blockly 8.0.5 → 9.0.0-beta.0

package/core/utils/{svg_math.js → svg_math.ts}

@@ -7,23 +7,22 @@
 /**
  * @fileoverview Utility methods for SVG math.
  */
-'use strict';
 
 /**
  * Utility methods realted to figuring out positions of SVG elements.
  * @namespace Blockly.utils.svgMath
  */
-goog.module('Blockly.utils.svgMath');
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.utils.svgMath');
 
-const deprecation = goog.require('Blockly.utils.deprecation');
-const global = goog.require('Blockly.utils.global');
-const style = goog.require('Blockly.utils.style');
-const userAgent = goog.require('Blockly.utils.userAgent');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Rect} = goog.require('Blockly.utils.Rect');
-const {Size} = goog.require('Blockly.utils.Size');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
+import type {WorkspaceSvg} from '../workspace_svg.js';
+
+import {Coordinate} from './coordinate.js';
+import * as deprecation from './deprecation.js';
+import {Rect} from './rect.js';
+import {Size} from './size.js';
+import * as style from './style.js';
+import * as userAgent from './useragent.js';
 
 
 /**
@@ -32,35 +31,35 @@ const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
  * 'translate(12, 0)'.
  * Note that IE (9,10) returns 'translate(16 8)' instead of 'translate(16, 8)'.
  * Note that IE has been reported to return scientific notation (0.123456e-42).
- * @type {!RegExp}
  */
-const XY_REGEX = /translate\(\s*([-+\d.e]+)([ ,]\s*([-+\d.e]+)\s*)?/;
+const XY_REGEX: RegExp = /translate\(\s*([-+\d.e]+)([ ,]\s*([-+\d.e]+)\s*)?/;
 
 /**
  * Static regex to pull the x,y values out of a translate() or translate3d()
  * style property.
  * Accounts for same exceptions as XY_REGEX.
- * @type {!RegExp}
  */
-const XY_STYLE_REGEX =
+const XY_STYLE_REGEX: RegExp =
     /transform:\s*translate(?:3d)?\(\s*([-+\d.e]+)\s*px([ ,]\s*([-+\d.e]+)\s*px)?/;
 
-
 /**
  * Return the coordinates of the top-left corner of this element relative to
  * its parent.  Only for SVG elements and children (e.g. rect, g, path).
- * @param {!Element} element SVG element to find the coordinates of.
- * @return {!Coordinate} Object with .x and .y properties.
+ * @param element SVG element to find the coordinates of.
+ * @return Object with .x and .y properties.
  * @alias Blockly.utils.svgMath.getRelativeXY
  */
-const getRelativeXY = function(element) {
+export function getRelativeXY(element: Element): Coordinate {
   const xy = new Coordinate(0, 0);
   // First, check for x and y attributes.
-  const x = element.getAttribute('x');
+  // Checking for the existence of x/y properties is faster than getAttribute.
+  // However, x/y contains an SVGAnimatedLength object, so rely on getAttribute
+  // to get the number.
+  const x = (element as any).x && element.getAttribute('x');
+  const y = (element as any).y && element.getAttribute('y');
   if (x) {
     xy.x = parseInt(x, 10);
   }
-  const y = element.getAttribute('y');
   if (y) {
     xy.y = parseInt(y, 10);
   }
@@ -86,19 +85,17 @@ const getRelativeXY = function(element) {
     }
   }
   return xy;
-};
-exports.getRelativeXY = getRelativeXY;
+}
 
 /**
  * Return the coordinates of the top-left corner of this element relative to
  * the div Blockly was injected into.
- * @param {!Element} element SVG element to find the coordinates of. If this is
- *     not a child of the div Blockly was injected into, the behaviour is
- *     undefined.
- * @return {!Coordinate} Object with .x and .y properties.
+ * @param element SVG element to find the coordinates of. If this is not a child
+ *     of the div Blockly was injected into, the behaviour is undefined.
+ * @return Object with .x and .y properties.
  * @alias Blockly.utils.svgMath.getInjectionDivXY
  */
-const getInjectionDivXY = function(element) {
+export function getInjectionDivXY(element: Element): Coordinate {
   let x = 0;
   let y = 0;
   while (element) {
@@ -109,25 +106,28 @@ const getInjectionDivXY = function(element) {
     if ((' ' + classes + ' ').indexOf(' injectionDiv ') !== -1) {
       break;
     }
-    element = /** @type {!Element} */ (element.parentNode);
+    element = element.parentNode as Element;
   }
   return new Coordinate(x, y);
-};
-exports.getInjectionDivXY = getInjectionDivXY;
+}
 
 /**
  * Check if 3D transforms are supported by adding an element
  * and attempting to set the property.
- * @return {boolean} True if 3D transforms are supported.
+ * @return True if 3D transforms are supported.
  * @alias Blockly.utils.svgMath.is3dSupported
  */
-const is3dSupported = function() {
-  if (is3dSupported.cached_ !== undefined) {
-    return is3dSupported.cached_;
+export function is3dSupported(): boolean {
+  // AnyDuringMigration because:  Property 'cached_' does not exist on type '()
+  // => boolean'.
+  if ((is3dSupported as AnyDuringMigration).cached_ !== undefined) {
+    // AnyDuringMigration because:  Property 'cached_' does not exist on type
+    // '() => boolean'.
+    return (is3dSupported as AnyDuringMigration).cached_;
   }
   // CC-BY-SA Lorenzo Polidori
   // stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
-  if (!global.globalThis['getComputedStyle']) {
+  if (!globalThis['getComputedStyle']) {
     return false;
   }
 
@@ -145,9 +145,9 @@ const is3dSupported = function() {
   document.body.insertBefore(el, null);
 
   for (const t in transforms) {
-    if (el.style[t] !== undefined) {
-      el.style[t] = 'translate3d(1px,1px,1px)';
-      const computedStyle = global.globalThis['getComputedStyle'](el);
+    if ((el.style as AnyDuringMigration)[t] !== undefined) {
+      (el.style as AnyDuringMigration)[t] = 'translate3d(1px,1px,1px)';
+      const computedStyle = globalThis['getComputedStyle'](el);
       if (!computedStyle) {
         // getComputedStyle in Firefox returns null when Blockly is loaded
         // inside an iframe with display: none.  Returning false and not
@@ -158,39 +158,42 @@ const is3dSupported = function() {
         document.body.removeChild(el);
         return false;
       }
-      has3d = computedStyle.getPropertyValue(transforms[t]);
+      has3d =
+          computedStyle.getPropertyValue((transforms as AnyDuringMigration)[t]);
     }
   }
   document.body.removeChild(el);
-  is3dSupported.cached_ = has3d !== 'none';
-  return is3dSupported.cached_;
-};
-exports.is3dSupported = is3dSupported;
+  // AnyDuringMigration because:  Property 'cached_' does not exist on type '()
+  // => boolean'.
+  (is3dSupported as AnyDuringMigration).cached_ = has3d !== 'none';
+  // AnyDuringMigration because:  Property 'cached_' does not exist on type '()
+  // => boolean'.
+  return (is3dSupported as AnyDuringMigration).cached_;
+}
 
 /**
  * Get the position of the current viewport in window coordinates.  This takes
  * scroll into account.
- * @return {!Rect} An object containing window width, height, and
- *     scroll position in window coordinates.
+ * @return An object containing window width, height, and scroll position in
+ *     window coordinates.
  * @alias Blockly.utils.svgMath.getViewportBBox
- * @package
+ * @internal
  */
-const getViewportBBox = function() {
+export function getViewportBBox(): Rect {
   // Pixels, in window coordinates.
   const scrollOffset = style.getViewportPageOffset();
   return new Rect(
       scrollOffset.y, document.documentElement.clientHeight + scrollOffset.y,
       scrollOffset.x, document.documentElement.clientWidth + scrollOffset.x);
-};
-exports.getViewportBBox = getViewportBBox;
+}
 
 /**
  * Gets the document scroll distance as a coordinate object.
  * Copied from Closure's goog.dom.getDocumentScroll.
- * @return {!Coordinate} Object with values 'x' and 'y'.
+ * @return Object with values 'x' and 'y'.
  * @alias Blockly.utils.svgMath.getDocumentScroll
  */
-const getDocumentScroll = function() {
+export function getDocumentScroll(): Coordinate {
   const el = document.documentElement;
   const win = window;
   if (userAgent.IE && win.pageYOffset !== el.scrollTop) {
@@ -201,18 +204,18 @@ const getDocumentScroll = function() {
   }
   return new Coordinate(
       win.pageXOffset || el.scrollLeft, win.pageYOffset || el.scrollTop);
-};
-exports.getDocumentScroll = getDocumentScroll;
+}
 
 /**
  * Converts screen coordinates to workspace coordinates.
- * @param {!WorkspaceSvg} ws The workspace to find the coordinates on.
- * @param {!Coordinate} screenCoordinates The screen coordinates to
- * be converted to workspace coordinates
- * @return {!Coordinate} The workspace coordinates.
+ * @param ws The workspace to find the coordinates on.
+ * @param screenCoordinates The screen coordinates to be converted to workspace
+ *     coordinates
+ * @return The workspace coordinates.
  * @alias Blockly.utils.svgMath.screenToWsCoordinates
  */
-const screenToWsCoordinates = function(ws, screenCoordinates) {
+export function screenToWsCoordinates(
+    ws: WorkspaceSvg, screenCoordinates: Coordinate): Coordinate {
   const screenX = screenCoordinates.x;
   const screenY = screenCoordinates.y;
 
@@ -234,21 +237,19 @@ const screenToWsCoordinates = function(ws, screenCoordinates) {
   // main workspace.
   const finalOffsetPixels =
       Coordinate.difference(clientOffsetPixels, mainOffsetPixels);
-
   // The position in main workspace coordinates.
   const finalOffsetMainWs = finalOffsetPixels.scale(1 / ws.scale);
   return finalOffsetMainWs;
-};
-exports.screenToWsCoordinates = screenToWsCoordinates;
+}
 
 /**
  * Returns the dimensions of the specified SVG image.
- * @param {!SVGElement} svg SVG image.
- * @return {!Size} Contains width and height properties.
+ * @param svg SVG image.
+ * @return Contains width and height properties.
  * @deprecated Use workspace.getCachedParentSvgSize. (2021 March 5)
  * @alias Blockly.utils.svgMath.svgSize
  */
-const svgSize = function(svg) {
+export function svgSize(svg: SVGElement): Size {
   // When removing this function, remove svg.cachedWidth_ and svg.cachedHeight_
   // from setCachedParentSvgSize.
   // The deprecated name is `Blockly.svgSize` because this function used to be
@@ -256,13 +257,13 @@ const svgSize = function(svg) {
   deprecation.warn(
       'Blockly.svgSize', 'March 2021', 'March 2022',
       'workspace.getCachedParentSvgSize');
-  svg = /** @type {?} */ (svg);
-  return new Size(svg.cachedWidth_, svg.cachedHeight_);
-};
-exports.svgSize = svgSize;
-
+  svg = svg as AnyDuringMigration;
+  return new Size(
+      Number(svg.getAttribute('data-cached-width')),
+      Number(svg.getAttribute('data-cached-height')));
+}
 
-exports.TEST_ONLY = {
+export const TEST_ONLY = {
   XY_REGEX,
   XY_STYLE_REGEX,
 };

package/core/utils/svg_paths.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @fileoverview Methods for creating parts of SVG path strings.  See
+ * developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/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 x The x coordinate.
+ * @param y The y coordinate.
+ * @return A string of the format ' x,y '
+ * @alias Blockly.utils.svgPaths.point
+ */
+export declare function point(x: number, y: number): string;
+/**
+ * Draw a cubic 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 command The command to use.
+ *     Should be one of: c, C, s, S, q, Q.
+ * @param 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 A string defining one or more Bezier curves.  See the MDN
+ *     documentation for exact format.
+ * @alias Blockly.utils.svgPaths.curve
+ */
+export declare function curve(command: string, points: string[]): string;
+/**
+ * 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 x The absolute x coordinate.
+ * @param y The absolute y coordinate.
+ * @return A string of the format ' M x,y '
+ * @alias Blockly.utils.svgPaths.moveTo
+ */
+export declare function moveTo(x: number, y: number): string;
+/**
+ * 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 dx The relative x coordinate.
+ * @param dy The relative y coordinate.
+ * @return A string of the format ' m dx,dy '
+ * @alias Blockly.utils.svgPaths.moveBy
+ */
+export declare function moveBy(dx: number, dy: number): string;
+/**
+ * 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 dx The relative x coordinate.
+ * @param dy The relative y coordinate.
+ * @return A string of the format ' l dx,dy '
+ * @alias Blockly.utils.svgPaths.lineTo
+ */
+export declare function lineTo(dx: number, dy: number): string;
+/**
+ * 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 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 A string of the format ' l (dx,dy)+ '
+ * @alias Blockly.utils.svgPaths.line
+ */
+export declare function line(points: string[]): string;
+/**
+ * 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 command The command to prepend to the coordinate.  This should be one
+ *     of: V, v, H, h.
+ * @param val The coordinate to pass to the command.  It may be absolute or
+ *     relative.
+ * @return A string of the format ' command val '
+ * @alias Blockly.utils.svgPaths.lineOnAxis
+ */
+export declare function lineOnAxis(command: string, val: number): string;
+/**
+ * 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 command The command string.  Either 'a' or 'A'.
+ * @param flags The flag string.  See the MDN documentation for a description
+ *     and examples.
+ * @param radius The radius of the arc to draw.
+ * @param point The point to move the cursor to after drawing the arc, specified
+ *     either in absolute or relative coordinates depending on the command.
+ * @return A string of the format 'command radius radius flags point'
+ * @alias Blockly.utils.svgPaths.arc
+ */
+export declare function arc(command: string, flags: string, radius: number, point: string): string;

package/core/utils/{svg_paths.js → svg_paths.ts}

@@ -1,20 +1,20 @@
 /**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * @fileoverview Methods for creating parts of SVG path strings.  See
+ * developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  */
 
 /**
- * @fileoverview Methods for creating parts of SVG path strings.  See
- * developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-'use strict';
 
 /**
  * Methods for creating parts of SVG path strings.  See
  * @namespace Blockly.utils.svgPaths
  */
-goog.module('Blockly.utils.svgPaths');
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.utils.svgPaths');
 
 
 /**
@@ -22,94 +22,87 @@ goog.module('Blockly.utils.svgPaths');
  * 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 '
+ * @param x The x coordinate.
+ * @param y The y coordinate.
+ * @return A string of the format ' x,y '
  * @alias Blockly.utils.svgPaths.point
  */
-const point = function(x, y) {
+export function point(x: number, y: number): string {
   return ' ' + x + ',' + y + ' ';
-};
-exports.point = point;
+}
 
 /**
  * Draw a cubic 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.
+ * @param command The command to use.
  *     Should be one of: c, C, s, S, q, Q.
- * @param {!Array<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
+ * @param 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 A string defining one or more Bezier curves.  See the MDN
  *     documentation for exact format.
  * @alias Blockly.utils.svgPaths.curve
  */
-const curve = function(command, points) {
+export function curve(command: string, points: string[]): string {
   return ' ' + command + points.join('');
-};
-exports.curve = curve;
+}
 
 /**
  * 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 '
+ * @param x The absolute x coordinate.
+ * @param y The absolute y coordinate.
+ * @return A string of the format ' M x,y '
  * @alias Blockly.utils.svgPaths.moveTo
  */
-const moveTo = function(x, y) {
+export function moveTo(x: number, y: number): string {
   return ' M ' + x + ',' + y + ' ';
-};
-exports.moveTo = moveTo;
+}
 
 /**
  * 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 '
+ * @param dx The relative x coordinate.
+ * @param dy The relative y coordinate.
+ * @return A string of the format ' m dx,dy '
  * @alias Blockly.utils.svgPaths.moveBy
  */
-const moveBy = function(dx, dy) {
+export function moveBy(dx: number, dy: number): string {
   return ' m ' + dx + ',' + dy + ' ';
-};
-exports.moveBy = moveBy;
+}
 
 /**
  * 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 '
+ * @param dx The relative x coordinate.
+ * @param dy The relative y coordinate.
+ * @return A string of the format ' l dx,dy '
  * @alias Blockly.utils.svgPaths.lineTo
  */
-const lineTo = function(dx, dy) {
+export function lineTo(dx: number, dy: number): string {
   return ' l ' + dx + ',' + dy + ' ';
-};
-exports.lineTo = lineTo;
+}
 
 /**
  * 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<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 '.
- * @return {string} A string of the format ' l (dx,dy)+ '
+ * @param 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 A string of the format ' l (dx,dy)+ '
  * @alias Blockly.utils.svgPaths.line
  */
-const line = function(points) {
+export function line(points: string[]): string {
   return ' l' + points.join('');
-};
-exports.line = line;
+}
 
 /**
  * Draw a horizontal or vertical line.
@@ -117,33 +110,31 @@ exports.line = line;
  * 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.
- * @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 '
+ * @param command The command to prepend to the coordinate.  This should be one
+ *     of: V, v, H, h.
+ * @param val The coordinate to pass to the command.  It may be absolute or
+ *     relative.
+ * @return A string of the format ' command val '
  * @alias Blockly.utils.svgPaths.lineOnAxis
  */
-const lineOnAxis = function(command, val) {
+export function lineOnAxis(command: string, val: number): string {
   return ' ' + command + ' ' + val + ' ';
-};
-exports.lineOnAxis = lineOnAxis;
+}
 
 /**
  * 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'
+ * @param command The command string.  Either 'a' or 'A'.
+ * @param flags The flag string.  See the MDN documentation for a description
+ *     and examples.
+ * @param radius The radius of the arc to draw.
+ * @param point The point to move the cursor to after drawing the arc, specified
+ *     either in absolute or relative coordinates depending on the command.
+ * @return A string of the format 'command radius radius flags point'
  * @alias Blockly.utils.svgPaths.arc
  */
-const arc = function(command, flags, radius, point) {
+export function arc(
+    command: string, flags: string, radius: number, point: string): string {
   return command + ' ' + radius + ' ' + radius + ' ' + flags + point;
-};
-exports.arc = arc;
+}