blockly 12.4.0 → 12.5.0

package/core/utils/svg.ts

@@ -1,84 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Defines the Svg class. Its constants enumerate
- * all SVG tag names used by Blockly.
- *
- * @class
- */
-// Former goog.module ID: Blockly.utils.Svg
-
-/**
- * A name with the type of the SVG element stored in the generic.
- */
-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.
-   *
-   * @returns The name.
-   */
-  toString(): string {
-    return this.tagName;
-  }
-}

package/core/utils/svg_math.ts

@@ -1,207 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.utils.svgMath
-
-import type {WorkspaceSvg} from '../workspace_svg.js';
-import {Coordinate} from './coordinate.js';
-import {Rect} from './rect.js';
-import * as style from './style.js';
-
-/**
- * Static regex to pull the x,y values out of an SVG translate() directive.
- * Note that Firefox and IE (9,10) return 'translate(12)' instead of
- * '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).
- */
-const XY_REGEX = /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.
- */
-const XY_STYLE_REGEX =
-  /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 SVG element to find the coordinates of.
- * @returns Object with .x and .y properties.
- */
-export function getRelativeXY(element: Element): Coordinate {
-  const xy = new Coordinate(0, 0);
-  // First, check for x and y attributes.
-  // 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);
-  }
-  if (y) {
-    xy.y = parseInt(y);
-  }
-  // Second, check for transform="translate(...)" attribute.
-  const transform = element.getAttribute('transform');
-  const r = transform && transform.match(XY_REGEX);
-  if (r) {
-    xy.x += Number(r[1]);
-    if (r[3]) {
-      xy.y += Number(r[3]);
-    }
-  }
-
-  // Then check for style = transform: translate(...) or translate3d(...)
-  const style = element.getAttribute('style');
-  if (style && style.includes('translate')) {
-    const styleComponents = style.match(XY_STYLE_REGEX);
-    if (styleComponents) {
-      xy.x += Number(styleComponents[1]);
-      if (styleComponents[3]) {
-        xy.y += Number(styleComponents[3]);
-      }
-    }
-  }
-  return xy;
-}
-
-/**
- * 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.
- * @returns Object with .x and .y properties.
- */
-export function getInjectionDivXY(element: Element): Coordinate {
-  let x = 0;
-  let y = 0;
-  while (element) {
-    const xy = getRelativeXY(element);
-    x += xy.x;
-    y += xy.y;
-    const classes = element.getAttribute('class') || '';
-    if ((' ' + classes + ' ').includes(' injectionDiv ')) {
-      break;
-    }
-    element = element.parentNode as Element;
-  }
-  return new Coordinate(x, y);
-}
-
-/**
- * Get the position of the current viewport in window coordinates.  This takes
- * scroll into account.
- *
- * @returns An object containing window width, height, and scroll position in
- *     window coordinates.
- * @internal
- */
-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,
-  );
-}
-
-/**
- * Gets the document scroll distance as a coordinate object.
- * Copied from Closure's goog.dom.getDocumentScroll.
- *
- * @returns Object with values 'x' and 'y'.
- */
-export function getDocumentScroll(): Coordinate {
-  const el = document.documentElement;
-  const win = window;
-  return new Coordinate(
-    win.pageXOffset || el.scrollLeft,
-    win.pageYOffset || el.scrollTop,
-  );
-}
-
-/**
- * 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
- * @returns The workspace coordinates.
- */
-export function screenToWsCoordinates(
-  ws: WorkspaceSvg,
-  screenCoordinates: Coordinate,
-): Coordinate {
-  const screenX = screenCoordinates.x;
-  const screenY = screenCoordinates.y;
-
-  const injectionDiv = ws.getInjectionDiv();
-  // Bounding rect coordinates are in client coordinates, meaning that they
-  // are in pixels relative to the upper left corner of the visible browser
-  // window.  These coordinates change when you scroll the browser window.
-  const boundingRect = injectionDiv.getBoundingClientRect();
-
-  // The client coordinates offset by the injection div's upper left corner.
-  const clientOffsetPixels = new Coordinate(
-    screenX - boundingRect.left,
-    screenY - boundingRect.top,
-  );
-
-  // The offset in pixels between the main workspace's origin and the upper
-  // left corner of the injection div.
-  const mainOffsetPixels = ws.getOriginOffsetInPixels();
-
-  // The position of the new comment in pixels relative to the origin of the
-  // main workspace.
-  const finalOffsetPixels = Coordinate.difference(
-    clientOffsetPixels,
-    mainOffsetPixels,
-  );
-  // The position in main workspace coordinates.
-  const finalOffsetMainWs = finalOffsetPixels.scale(1 / ws.scale);
-  return finalOffsetMainWs;
-}
-
-/**
- * Converts workspace coordinates to screen coordinates.
- *
- * @param ws The workspace to get the coordinates out of.
- * @param workspaceCoordinates  The workspace coordinates to be converted
- *     to screen coordinates.
- * @returns The screen coordinates.
- */
-export function wsToScreenCoordinates(
-  ws: WorkspaceSvg,
-  workspaceCoordinates: Coordinate,
-): Coordinate {
-  // Fix workspace scale vs browser scale.
-  const screenCoordinates = workspaceCoordinates.scale(ws.scale);
-  const screenX = screenCoordinates.x;
-  const screenY = screenCoordinates.y;
-
-  const injectionDiv = ws.getInjectionDiv();
-  const boundingRect = injectionDiv.getBoundingClientRect();
-  const mainOffset = ws.getOriginOffsetInPixels();
-
-  // Fix workspace origin vs browser origin.
-  return new Coordinate(
-    screenX + boundingRect.left + mainOffset.x,
-    screenY + boundingRect.top + mainOffset.y,
-  );
-}
-
-export const TEST_ONLY = {
-  XY_REGEX,
-  XY_STYLE_REGEX,
-};

package/core/utils/svg_paths.ts

@@ -1,133 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.utils.svgPaths
-
-/**
- * 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.
- * @returns A string of the format ' x,y '
- */
-export function point(x: number, y: number): string {
-  return ' ' + x + ',' + y + ' ';
-}
-
-/**
- * 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 '.
- * @returns A string defining one or more Bezier curves.  See the MDN
- *     documentation for exact format.
- */
-export function curve(command: string, points: string[]): string {
-  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 x The absolute x coordinate.
- * @param y The absolute y coordinate.
- * @returns A string of the format ' M x,y '
- */
-export function moveTo(x: number, y: number): string {
-  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 dx The relative x coordinate.
- * @param dy The relative y coordinate.
- * @returns A string of the format ' m dx,dy '
- */
-export function moveBy(dx: number, dy: number): string {
-  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 dx The relative x coordinate.
- * @param dy The relative y coordinate.
- * @returns A string of the format ' l dx,dy '
- */
-export function lineTo(dx: number, dy: number): string {
-  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 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 '.
- * @returns A string of the format ' l (dx,dy)+ '
- */
-export function line(points: string[]): string {
-  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 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.
- * @returns A string of the format ' command val '
- */
-export function lineOnAxis(command: string, val: number): string {
-  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 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.
- * @returns A string of the format 'command radius radius flags point'
- */
-export function arc(
-  command: string,
-  flags: string,
-  radius: number,
-  point: string,
-): string {
-  return command + ' ' + radius + ' ' + radius + ' ' + flags + point;
-}