From 1f82f9d9e24f49724b40e3b4cf66992e046a9e8e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 28 Jun 2019 14:59:39 -0700 Subject: [PATCH 1/4] Create svg_utils file --- core/utils/svg_paths.js | 153 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 core/utils/svg_paths.js diff --git a/core/utils/svg_paths.js b/core/utils/svg_paths.js new file mode 100644 index 000000000..02e2ab099 --- /dev/null +++ b/core/utils/svg_paths.js @@ -0,0 +1,153 @@ +/** + * @license + * Visual Blocks Editor + * + * Copyright 2019 Google Inc. + * https://developers.google.com/blockly/ + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Methods for creating parts of SVG path strings. See + * developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths + * @author fenichel@google.com (Rachel Fenichel) + */ +'use strict'; + +/** + * @name Blockly.utils.Paths + * @namespace + */ +goog.provide('Blockly.utils.Paths'); + + +/** + * Create a string representing the given x, y pair. It does not matter whether + * the coordinate is relative or absolute. The result has leading + * and trailing spaces, and separates the x and y coordinates with a comma but + * no space. + * @param {number} x The x coordinate. + * @param {number} y The y coordinate. + * @return {string} A string of the format ' x,y ' + * @public + */ +Blockly.utils.Paths.point = function(x, y) { + return ' ' + x + ',' + y + ' '; +}; +/** + * Draw a curbic or quadratic curve. See + * developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Cubic_B%C3%A9zier_Curve + * These coordinates are unitless and hence in the user coordinate system. + * @param {string} command The command to use. + * Should be one of: c, C, s, S, q, Q. + * @param {string} points An array containing all of the points to pass to the + * curve command, in order. The points are represented as strings of the + * format ' x, y '. + * @return {string} A string defining one or more Bezier curves. See the MDN + * documentation for exact format. + * @public + */ +Blockly.utils.Paths.curve = function(command, points) { + return command + points.join(''); +}; +/** + * Move the cursor to the given position without drawing a line. + * The coordinates are absolute. + * These coordinates are unitless and hence in the user coordinate system. + * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands + * @param {number} x The absolute x coordinate. + * @param {number} y The absolute y coordinate. + * @return {string} A string of the format ' M x,y ' + * @public + */ +Blockly.utils.Paths.moveTo = function(x, y) { + return ' M ' + x + ',' + y + ' '; +}; +/** + * Move the cursor to the given position without drawing a line. + * Coordinates are relative. + * These coordinates are unitless and hence in the user coordinate system. + * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands + * @param {number} dx The relative x coordinate. + * @param {number} dy The relative y coordinate. + * @return {string} A string of the format ' m dx,dy ' + * @public + */ +Blockly.utils.Paths.moveBy = function(dx, dy) { + return ' m ' + dx + ',' + dy + ' '; +}; + +/** + * Draw a line from the current point to the end point, which is the current + * point shifted by dx along the x-axis and dy along the y-axis. + * These coordinates are unitless and hence in the user coordinate system. + * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands + * @param {number} dx The relative x coordinate. + * @param {number} dy The relative y coordinate. + * @return {string} A string of the format ' L dx,dy ' + * @public + */ +Blockly.utils.Paths.lineTo = function(dx, dy) { + return ' l ' + dx + ',' + dy + ' '; +}; + +/** + * Draw multiple lines connecting all of the given points in order. This is + * equivalent to a series of 'l' commands. + * These coordinates are unitless and hence in the user coordinate system. + * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands + * @param {!Array.} 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 '. + * @return {string} A string of the format ' l (dx,dy)+ ' + * @public + */ +Blockly.utils.Paths.line = function(points) { + return 'l' + points.join(''); +}; + +/** + * Draw a horizontal or vertical line. + * The first argument specifies the direction and whether the given position is + * relative or absolute. + * 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 + * @param {number} val The coordinate to pass to the command. It may be + * absolute or relative. + * @return {string} A string of the format ' command val ' + * @public + */ +Blockly.utils.Paths.lineOnAxis = function(command, val) { + return command + ' ' + val; +}; + +/** + * Draw an elliptical arc curve. + * These coordinates are unitless and hence in the user coordinate system. + * See developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Elliptical_Arc_Curve + * @param {string} command The command string. Either 'a' or 'A'. + * @param {string} flags The flag string. See the MDN documentation for a + * description and examples. + * @param {number} radius The radius of the arc to draw. + * @param {string} point The point to move the cursor to after drawing the arc, + * specified either in absolute or relative coordinates depending on the + * command. + * @return {string} A string of the format 'command radius radius flags point' + * @public + */ +Blockly.utils.Paths.arc = function(command, flags, radius, point) { + return command + ' ' + radius + ' ' + radius + ' ' + flags + point; +}; From f1e05b1e68e04ffbe5ad5343d7200e7fa092558e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 28 Jun 2019 15:09:59 -0700 Subject: [PATCH 2/4] Lowercase l in comments --- core/utils/svg_paths.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/utils/svg_paths.js b/core/utils/svg_paths.js index 02e2ab099..ea6a9e112 100644 --- a/core/utils/svg_paths.js +++ b/core/utils/svg_paths.js @@ -95,7 +95,7 @@ Blockly.utils.Paths.moveBy = function(dx, dy) { * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands * @param {number} dx The relative x coordinate. * @param {number} dy The relative y coordinate. - * @return {string} A string of the format ' L dx,dy ' + * @return {string} A string of the format ' l dx,dy ' * @public */ Blockly.utils.Paths.lineTo = function(dx, dy) { From 2aa1bed83f14771622dee2c4dec7dc49c0d16d7a Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 28 Jun 2019 16:36:59 -0700 Subject: [PATCH 3/4] Add some spaces --- core/utils/svg_paths.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/core/utils/svg_paths.js b/core/utils/svg_paths.js index ea6a9e112..589ac5aaa 100644 --- a/core/utils/svg_paths.js +++ b/core/utils/svg_paths.js @@ -45,6 +45,7 @@ goog.provide('Blockly.utils.Paths'); Blockly.utils.Paths.point = function(x, y) { return ' ' + x + ',' + y + ' '; }; + /** * Draw a curbic or quadratic curve. See * developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Cubic_B%C3%A9zier_Curve @@ -59,8 +60,9 @@ Blockly.utils.Paths.point = function(x, y) { * @public */ Blockly.utils.Paths.curve = function(command, points) { - return command + points.join(''); + return ' ' + command + points.join(''); }; + /** * Move the cursor to the given position without drawing a line. * The coordinates are absolute. @@ -74,6 +76,7 @@ Blockly.utils.Paths.curve = function(command, points) { Blockly.utils.Paths.moveTo = function(x, y) { return ' M ' + x + ',' + y + ' '; }; + /** * Move the cursor to the given position without drawing a line. * Coordinates are relative. @@ -114,7 +117,7 @@ Blockly.utils.Paths.lineTo = function(dx, dy) { * @public */ Blockly.utils.Paths.line = function(points) { - return 'l' + points.join(''); + return ' l' + points.join(''); }; /** @@ -131,7 +134,7 @@ Blockly.utils.Paths.line = function(points) { * @public */ Blockly.utils.Paths.lineOnAxis = function(command, val) { - return command + ' ' + val; + return ' ' + command + ' ' + val + ' '; }; /** From f2be890f9faf432ed6b5ee63f4b4c13d5aa37675 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 28 Jun 2019 16:55:04 -0700 Subject: [PATCH 4/4] More cleanup --- core/utils/svg_paths.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/utils/svg_paths.js b/core/utils/svg_paths.js index 589ac5aaa..a3c5919db 100644 --- a/core/utils/svg_paths.js +++ b/core/utils/svg_paths.js @@ -112,7 +112,7 @@ Blockly.utils.Paths.lineTo = function(dx, dy) { * See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands * @param {!Array.} 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 '. + * format ' dx,dy '. * @return {string} A string of the format ' l (dx,dy)+ ' * @public */ @@ -127,7 +127,7 @@ Blockly.utils.Paths.line = function(points) { * 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 + * should be one of: V, v, H, h. * @param {number} val The coordinate to pass to the command. It may be * absolute or relative. * @return {string} A string of the format ' command val '