blockly 8.0.5 → 9.0.0-beta.0

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

@@ -9,7 +9,6 @@
  * These methods are not specific to Blockly, and could be factored out into
  * a JavaScript framework such as Closure.
  */
-'use strict';
 
 /**
  * Utilities for element styles.
@@ -17,26 +16,37 @@
  * a JavaScript framework such as Closure.
  * @namespace Blockly.utils.style
  */
-goog.module('Blockly.utils.style');
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.utils.style');
 
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Size} = goog.require('Blockly.utils.Size');
+import {Coordinate} from './coordinate.js';
+import {Rect} from './rect.js';
+import {Size} from './size.js';
 
 
 /**
  * Gets the height and width of an element.
  * Similar to Closure's goog.style.getSize
- * @param {!Element} element Element to get size of.
- * @return {!Size} Object with width/height properties.
+ * @param element Element to get size of.
+ * @return Object with width/height properties.
  * @alias Blockly.utils.style.getSize
  */
-const getSize = function(element) {
+export function getSize(element: Element): Size {
+  return TEST_ONLY.getSizeInternal(element);
+}
+
+/**
+ * Private version of getSize for stubbing in tests.
+ */
+function getSizeInternal(element: Element): Size {
   if (getStyle(element, 'display') !== 'none') {
     return getSizeWithDisplay(element);
   }
 
   // Evaluate size with a temporary element.
-  const style = element.style;
+  // AnyDuringMigration because:  Property 'style' does not exist on type
+  // 'Element'.
+  const style = (element as AnyDuringMigration).style;
   const originalDisplay = style.display;
   const originalVisibility = style.visibility;
   const originalPosition = style.position;
@@ -45,27 +55,26 @@ const getSize = function(element) {
   style.position = 'absolute';
   style.display = 'inline';
 
-  const offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
-  const offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
+  const offsetWidth = (element as HTMLElement).offsetWidth;
+  const offsetHeight = (element as HTMLElement).offsetHeight;
 
   style.display = originalDisplay;
   style.position = originalPosition;
   style.visibility = originalVisibility;
 
   return new Size(offsetWidth, offsetHeight);
-};
-exports.getSize = getSize;
+}
 
 /**
  * Gets the height and width of an element when the display is not none.
- * @param {!Element} element Element to get size of.
- * @return {!Size} Object with width/height properties.
+ * @param element Element to get size of.
+ * @return Object with width/height properties.
  */
-const getSizeWithDisplay = function(element) {
-  const offsetWidth = /** @type {!HTMLElement} */ (element).offsetWidth;
-  const offsetHeight = /** @type {!HTMLElement} */ (element).offsetHeight;
+function getSizeWithDisplay(element: Element): Size {
+  const offsetWidth = (element as HTMLElement).offsetWidth;
+  const offsetHeight = (element as HTMLElement).offsetHeight;
   return new Size(offsetWidth, offsetHeight);
-};
+}
 
 /**
  * Cross-browser pseudo get computed style. It returns the computed style where
@@ -76,14 +85,18 @@ const getSizeWithDisplay = function(element) {
  *
  * Copied from Closure's goog.style.getStyle_
  *
- * @param {!Element} element Element to get style of.
- * @param {string} style Property to get (must be camelCase, not CSS-style).
- * @return {string} Style value.
+ * @param element Element to get style of.
+ * @param style Property to get (must be camelCase, not CSS-style).
+ * @return Style value.
  */
-const getStyle = function(element, style) {
+function getStyle(element: Element, style: string): string {
+  // AnyDuringMigration because:  Property 'style' does not exist on type
+  // 'Element'. AnyDuringMigration because:  Property 'style' does not exist on
+  // type 'Element'.
   return getComputedStyle(element, style) || getCascadedStyle(element, style) ||
-      (element.style && element.style[style]);
-};
+      (element as AnyDuringMigration).style &&
+      (element as AnyDuringMigration).style[style];
+}
 
 /**
  * Retrieves a computed style value of a node. It returns empty string if the
@@ -93,24 +106,24 @@ const getStyle = function(element, style) {
  *
  * Copied from Closure's goog.style.getComputedStyle
  *
- * @param {!Element} element Element to get style of.
- * @param {string} property Property to get (camel-case).
- * @return {string} Style value.
+ * @param element Element to get style of.
+ * @param property Property to get (camel-case).
+ * @return Style value.
  * @alias Blockly.utils.style.getComputedStyle
  */
-const getComputedStyle = function(element, property) {
+export function getComputedStyle(element: Element, property: string): string {
   if (document.defaultView && document.defaultView.getComputedStyle) {
     const styles = document.defaultView.getComputedStyle(element, null);
     if (styles) {
       // element.style[..] is undefined for browser specific styles
       // as 'filter'.
-      return styles[property] || styles.getPropertyValue(property) || '';
+      return (styles as AnyDuringMigration)[property] ||
+          styles.getPropertyValue(property) || '';
     }
   }
 
   return '';
-};
-exports.getComputedStyle = getComputedStyle;
+}
 
 /**
  * Gets the cascaded style value of a node, or null if the value cannot be
@@ -118,25 +131,28 @@ exports.getComputedStyle = getComputedStyle;
  *
  * Copied from Closure's goog.style.getCascadedStyle
  *
- * @param {!Element} element Element to get style of.
- * @param {string} style Property to get (camel-case).
- * @return {string} Style value.
+ * @param element Element to get style of.
+ * @param style Property to get (camel-case).
+ * @return Style value.
  * @alias Blockly.utils.style.getCascadedStyle
  */
-const getCascadedStyle = function(element, style) {
-  return /** @type {string} */ (
-      element.currentStyle ? element.currentStyle[style] : null);
-};
-exports.getCascadedStyle = getCascadedStyle;
+export function getCascadedStyle(element: Element, style: string): string {
+  // AnyDuringMigration because:  Property 'currentStyle' does not exist on type
+  // 'Element'. AnyDuringMigration because:  Property 'currentStyle' does not
+  // exist on type 'Element'.
+  return (element as AnyDuringMigration).currentStyle ?
+      (element as AnyDuringMigration).currentStyle[style] :
+      '' as string;
+}
 
 /**
  * Returns a Coordinate object relative to the top-left of the HTML document.
  * Similar to Closure's goog.style.getPageOffset
- * @param {!Element} el Element to get the page offset for.
- * @return {!Coordinate} The page offset.
+ * @param el Element to get the page offset for.
+ * @return The page offset.
  * @alias Blockly.utils.style.getPageOffset
  */
-const getPageOffset = function(el) {
+export function getPageOffset(el: Element): Coordinate {
   const pos = new Coordinate(0, 0);
   const box = el.getBoundingClientRect();
   const documentElement = document.documentElement;
@@ -150,23 +166,21 @@ const getPageOffset = function(el) {
   pos.y = box.top + scrollCoord.y;
 
   return pos;
-};
-exports.getPageOffset = getPageOffset;
+}
 
 /**
  * Calculates the viewport coordinates relative to the document.
  * Similar to Closure's goog.style.getViewportPageOffset
- * @return {!Coordinate} The page offset of the viewport.
+ * @return The page offset of the viewport.
  * @alias Blockly.utils.style.getViewportPageOffset
  */
-const getViewportPageOffset = function() {
+export function getViewportPageOffset(): Coordinate {
   const body = document.body;
   const documentElement = document.documentElement;
   const scrollLeft = body.scrollLeft || documentElement.scrollLeft;
   const scrollTop = body.scrollTop || documentElement.scrollTop;
   return new Coordinate(scrollLeft, scrollTop);
-};
-exports.getViewportPageOffset = getViewportPageOffset;
+}
 
 /**
  * Shows or hides an element from the page. Hiding the element is done by
@@ -176,50 +190,44 @@ exports.getViewportPageOffset = getViewportPageOffset;
  * the browser's default style rules).
  * Copied from Closure's goog.style.getViewportPageOffset
  *
- * @param {!Element} el Element to show or hide.
- * @param {*} isShown True to render the element in its default style,
- *     false to disable rendering the element.
+ * @param el Element to show or hide.
+ * @param isShown True to render the element in its default style, false to
+ *     disable rendering the element.
  * @alias Blockly.utils.style.setElementShown
  */
-const setElementShown = function(el, isShown) {
-  el.style.display = isShown ? '' : 'none';
-};
-exports.setElementShown = setElementShown;
+export function setElementShown(el: Element, isShown: AnyDuringMigration) {
+  // AnyDuringMigration because:  Property 'style' does not exist on type
+  // 'Element'.
+  (el as AnyDuringMigration).style.display = isShown ? '' : 'none';
+}
 
 /**
  * Returns true if the element is using right to left (RTL) direction.
  * Copied from Closure's goog.style.isRightToLeft
  *
- * @param {!Element} el The element to test.
- * @return {boolean} True for right to left, false for left to right.
+ * @param el The element to test.
+ * @return True for right to left, false for left to right.
  * @alias Blockly.utils.style.isRightToLeft
  */
-const isRightToLeft = function(el) {
+export function isRightToLeft(el: Element): boolean {
   return 'rtl' === getStyle(el, 'direction');
-};
-exports.isRightToLeft = isRightToLeft;
+}
 
 /**
  * Gets the computed border widths (on all sides) in pixels
  * Copied from Closure's goog.style.getBorderBox
- * @param {!Element} element  The element to get the border widths for.
- * @return {!Object} The computed border widths.
+ * @param element  The element to get the border widths for.
+ * @return The computed border widths.
  * @alias Blockly.utils.style.getBorderBox
  */
-const getBorderBox = function(element) {
-  const left = getComputedStyle(element, 'borderLeftWidth');
-  const right = getComputedStyle(element, 'borderRightWidth');
-  const top = getComputedStyle(element, 'borderTopWidth');
-  const bottom = getComputedStyle(element, 'borderBottomWidth');
+export function getBorderBox(element: Element): Rect {
+  const left = parseFloat(getComputedStyle(element, 'borderLeftWidth'));
+  const right = parseFloat(getComputedStyle(element, 'borderRightWidth'));
+  const top = parseFloat(getComputedStyle(element, 'borderTopWidth'));
+  const bottom = parseFloat(getComputedStyle(element, 'borderBottomWidth'));
 
-  return {
-    top: parseFloat(top),
-    right: parseFloat(right),
-    bottom: parseFloat(bottom),
-    left: parseFloat(left),
-  };
-};
-exports.getBorderBox = getBorderBox;
+  return new Rect(top, bottom, left, right);
+}
 
 /**
  * Changes the scroll position of `container` with the minimum amount so
@@ -228,19 +236,19 @@ exports.getBorderBox = getBorderBox;
  * aligned as close to the container's top left corner as possible.
  * Copied from Closure's goog.style.scrollIntoContainerView
  *
- * @param {!Element} element The element to make visible.
- * @param {!Element} container The container to scroll. If not set, then the
- *     document scroll element will be used.
- * @param {boolean=} opt_center Whether to center the element in the container.
+ * @param element The element to make visible.
+ * @param container The container to scroll. If not set, then the document
+ *     scroll element will be used.
+ * @param opt_center Whether to center the element in the container.
  *     Defaults to false.
  * @alias Blockly.utils.style.scrollIntoContainerView
  */
-const scrollIntoContainerView = function(element, container, opt_center) {
+export function scrollIntoContainerView(
+    element: Element, container: Element, opt_center?: boolean) {
   const offset = getContainerOffsetToScrollInto(element, container, opt_center);
   container.scrollLeft = offset.x;
   container.scrollTop = offset.y;
-};
-exports.scrollIntoContainerView = scrollIntoContainerView;
+}
 
 /**
  * Calculate the scroll position of `container` with the minimum amount so
@@ -249,17 +257,16 @@ exports.scrollIntoContainerView = scrollIntoContainerView;
  * aligned as close to the container's top left corner as possible.
  * Copied from Closure's goog.style.getContainerOffsetToScrollInto
  *
- * @param {!Element} element The element to make visible.
- * @param {!Element} container The container to scroll. If not set, then the
- *     document scroll element will be used.
- * @param {boolean=} opt_center Whether to center the element in the container.
+ * @param element The element to make visible.
+ * @param container The container to scroll. If not set, then the document
+ *     scroll element will be used.
+ * @param opt_center Whether to center the element in the container.
  *     Defaults to false.
- * @return {!Coordinate} The new scroll position of the container,
- *     in form of goog.math.Coordinate(scrollLeft, scrollTop).
+ * @return The new scroll position of the container.
  * @alias Blockly.utils.style.getContainerOffsetToScrollInto
  */
-const getContainerOffsetToScrollInto = function(
-    element, container, opt_center) {
+export function getContainerOffsetToScrollInto(
+    element: Element, container: Element, opt_center?: boolean): Coordinate {
   // Absolute position of the element's border's top left corner.
   const elementPos = getPageOffset(element);
   // Absolute position of the container's border's top left corner.
@@ -292,5 +299,8 @@ const getContainerOffsetToScrollInto = function(
     scrollTop += Math.min(relY, Math.max(relY - spaceY, 0));
   }
   return new Coordinate(scrollLeft, scrollTop);
-};
-exports.getContainerOffsetToScrollInto = getContainerOffsetToScrollInto;
+}
+
+export const TEST_ONLY = {
+  getSizeInternal,
+}

package/core/utils/svg.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A name with the type of the SVG element stored in the generic.
+ * @alias Blockly.utils.Svg
+ */
+export declare class Svg<T> {
+    private readonly tagName;
+    /** @internal */
+    static ANIMATE: Svg<SVGAnimateElement>;
+    /** @internal */
+    static CIRCLE: Svg<SVGCircleElement>;
+    /** @internal */
+    static CLIPPATH: Svg<SVGClipPathElement>;
+    /** @internal */
+    static DEFS: Svg<SVGDefsElement>;
+    /** @internal */
+    static FECOMPOSITE: Svg<SVGFECompositeElement>;
+    /** @internal */
+    static FECOMPONENTTRANSFER: Svg<SVGFEComponentTransferElement>;
+    /** @internal */
+    static FEFLOOD: Svg<SVGFEFloodElement>;
+    /** @internal */
+    static FEFUNCA: Svg<SVGFEFuncAElement>;
+    /** @internal */
+    static FEGAUSSIANBLUR: Svg<SVGFEGaussianBlurElement>;
+    /** @internal */
+    static FEPOINTLIGHT: Svg<SVGFEPointLightElement>;
+    /** @internal */
+    static FESPECULARLIGHTING: Svg<SVGFESpecularLightingElement>;
+    /** @internal */
+    static FILTER: Svg<SVGFilterElement>;
+    /** @internal */
+    static FOREIGNOBJECT: Svg<SVGForeignObjectElement>;
+    /** @internal */
+    static G: Svg<SVGGElement>;
+    /** @internal */
+    static IMAGE: Svg<SVGImageElement>;
+    /** @internal */
+    static LINE: Svg<SVGLineElement>;
+    /** @internal */
+    static PATH: Svg<SVGPathElement>;
+    /** @internal */
+    static PATTERN: Svg<SVGPatternElement>;
+    /** @internal */
+    static POLYGON: Svg<SVGPolygonElement>;
+    /** @internal */
+    static RECT: Svg<SVGRectElement>;
+    /** @internal */
+    static SVG: Svg<SVGSVGElement>;
+    /** @internal */
+    static TEXT: Svg<SVGTextElement>;
+    /** @internal */
+    static TSPAN: Svg<SVGTSpanElement>;
+    /**
+     * @param tagName The SVG element tag name.
+     * @internal
+     */
+    constructor(tagName: string);
+    /**
+     * Returns the SVG element tag name.
+     * @return The name.
+     */
+    toString(): string;
+}

package/core/utils/svg.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Defines the Svg class. Its constants enumerate
+ * all SVG tag names used by Blockly.
+ */
+
+/**
+ * Defines the Svg class. Its constants enumerate
+ * all SVG tag names used by Blockly.
+ * @class
+ */
+import * as goog from '../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.utils.Svg');
+
+
+/**
+ * A name with the type of the SVG element stored in the generic.
+ * @alias Blockly.utils.Svg
+ */
+export class Svg<T> {
+  /** @internal */
+  static ANIMATE = new Svg<SVGAnimateElement>('animate');
+  /** @internal */
+  static CIRCLE = new Svg<SVGCircleElement>('circle');
+  /** @internal */
+  static CLIPPATH = new Svg<SVGClipPathElement>('clipPath');
+  /** @internal */
+  static DEFS = new Svg<SVGDefsElement>('defs');
+  /** @internal */
+  static FECOMPOSITE = new Svg<SVGFECompositeElement>('feComposite');
+  /** @internal */
+  static FECOMPONENTTRANSFER =
+      new Svg<SVGFEComponentTransferElement>('feComponentTransfer');
+  /** @internal */
+  static FEFLOOD = new Svg<SVGFEFloodElement>('feFlood');
+  /** @internal */
+  static FEFUNCA = new Svg<SVGFEFuncAElement>('feFuncA');
+  /** @internal */
+  static FEGAUSSIANBLUR = new Svg<SVGFEGaussianBlurElement>('feGaussianBlur');
+  /** @internal */
+  static FEPOINTLIGHT = new Svg<SVGFEPointLightElement>('fePointLight');
+  /** @internal */
+  static FESPECULARLIGHTING =
+      new Svg<SVGFESpecularLightingElement>('feSpecularLighting');
+  /** @internal */
+  static FILTER = new Svg<SVGFilterElement>('filter');
+  /** @internal */
+  static FOREIGNOBJECT = new Svg<SVGForeignObjectElement>('foreignObject');
+  /** @internal */
+  static G = new Svg<SVGGElement>('g');
+  /** @internal */
+  static IMAGE = new Svg<SVGImageElement>('image');
+  /** @internal */
+  static LINE = new Svg<SVGLineElement>('line');
+  /** @internal */
+  static PATH = new Svg<SVGPathElement>('path');
+  /** @internal */
+  static PATTERN = new Svg<SVGPatternElement>('pattern');
+  /** @internal */
+  static POLYGON = new Svg<SVGPolygonElement>('polygon');
+  /** @internal */
+  static RECT = new Svg<SVGRectElement>('rect');
+  /** @internal */
+  static SVG = new Svg<SVGSVGElement>('svg');
+  /** @internal */
+  static TEXT = new Svg<SVGTextElement>('text');
+  /** @internal */
+  static TSPAN = new Svg<SVGTSpanElement>('tspan');
+
+  /**
+   * @param tagName The SVG element tag name.
+   * @internal
+   */
+  constructor(private readonly tagName: string) {}
+
+  /**
+   * Returns the SVG element tag name.
+   * @return The name.
+   */
+  toString(): string {
+    return this.tagName;
+  }
+}

package/core/utils/svg_math.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { WorkspaceSvg } from '../workspace_svg.js';
+import { Coordinate } from './coordinate.js';
+import { Rect } from './rect.js';
+import { Size } from './size.js';
+/**
+ * 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 SVG element to find the coordinates of.
+ * @return Object with .x and .y properties.
+ * @alias Blockly.utils.svgMath.getRelativeXY
+ */
+export declare function getRelativeXY(element: Element): Coordinate;
+/**
+ * Return the coordinates of the top-left corner of this element relative to
+ * the div Blockly was injected into.
+ * @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
+ */
+export declare function getInjectionDivXY(element: Element): Coordinate;
+/**
+ * Check if 3D transforms are supported by adding an element
+ * and attempting to set the property.
+ * @return True if 3D transforms are supported.
+ * @alias Blockly.utils.svgMath.is3dSupported
+ */
+export declare function is3dSupported(): boolean;
+/**
+ * Get the position of the current viewport in window coordinates.  This takes
+ * scroll into account.
+ * @return An object containing window width, height, and scroll position in
+ *     window coordinates.
+ * @alias Blockly.utils.svgMath.getViewportBBox
+ * @internal
+ */
+export declare function getViewportBBox(): Rect;
+/**
+ * Gets the document scroll distance as a coordinate object.
+ * Copied from Closure's goog.dom.getDocumentScroll.
+ * @return Object with values 'x' and 'y'.
+ * @alias Blockly.utils.svgMath.getDocumentScroll
+ */
+export declare function getDocumentScroll(): Coordinate;
+/**
+ * Converts screen coordinates to 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
+ */
+export declare function screenToWsCoordinates(ws: WorkspaceSvg, screenCoordinates: Coordinate): Coordinate;
+/**
+ * Returns the dimensions of the specified SVG image.
+ * @param svg SVG image.
+ * @return Contains width and height properties.
+ * @deprecated Use workspace.getCachedParentSvgSize. (2021 March 5)
+ * @alias Blockly.utils.svgMath.svgSize
+ */
+export declare function svgSize(svg: SVGElement): Size;
+export declare const TEST_ONLY: {
+    XY_REGEX: RegExp;
+    XY_STYLE_REGEX: RegExp;
+};