Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create svg_utils file #2597

Merged
merged 4 commits into from
Jun 28, 2019
Merged

Conversation

rachel-fenichel
Copy link
Collaborator

The basics

  • I branched from develop
  • My pull request is against develop
  • My code follows the style guide

The details

Resolves

No issue

Proposed Changes

Create a set of helper functions for making SVG path commands.

Reason for Changes

SVG paths are defined as strings. There are a variety of commands, each represented by a single character and a sequence of numbers. These commands are really hard to read in the current code:

Blockly.BlockSvg.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'v 6.5 m -' +
    (Blockly.BlockSvg.TAB_WIDTH * 0.97) + ',3 q -' +
    (Blockly.BlockSvg.TAB_WIDTH * 0.05) + ',10 ' +
    (Blockly.BlockSvg.TAB_WIDTH * 0.3) + ',9.5 m ' +
    (Blockly.BlockSvg.TAB_WIDTH * 0.67) + ',-1.9 v 1.4';

These functions make the SVG path code more readable, and also remove some of the confusion around number addition vs string concatenation. It also makes it easier to see when we're using negative numbers.

This is a proposed API. I would like to keep the names relatively short, since Blockly.utils.Something is already pretty long. I could be convinced that it should be SVGPaths instead of Paths.

We're not using these functions anywhere yet, so now is the time to pick names.

@rachel-fenichel
Copy link
Collaborator Author

FYI @NeilFraser @RoboErikG for API/naming comments.

core/utils/svg_paths.js Outdated Show resolved Hide resolved
core/utils/svg_paths.js Outdated Show resolved Hide resolved
core/utils/svg_paths.js Outdated Show resolved Hide resolved
* See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands
* @param {!Array.<string>} points An array containing all of the points to
* draw lines to, in order. The points are represented as strings of the
* format ' dx, dy '.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no space after the comma.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

* These coordinates are unitless and hence in the user coordinate system.
* See developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#LineTo_path_commands
* @param {string} command The command to prepend to the coordinate. This
* should be one of: V, v, H, h. See
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh say can you see ... what?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed.

@rachel-fenichel rachel-fenichel merged commit a45b0b1 into google:develop Jun 28, 2019
@rachel-fenichel rachel-fenichel deleted the svg_utils branch June 28, 2019 23:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants