blockly 9.0.0-beta.0 → 9.0.0-beta.1

package/core/renderers/zelos/marker_svg.ts

@@ -1,151 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Methods for graphically rendering a marker as SVG.
- */
-
-/**
- * Methods for graphically rendering a marker as SVG.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.MarkerSvg');
-
-import type {BlockSvg} from '../../block_svg.js';
-import type {ASTNode} from '../../keyboard_nav/ast_node.js';
-import type {Marker} from '../../keyboard_nav/marker.js';
-import type {RenderedConnection} from '../../rendered_connection.js';
-import * as dom from '../../utils/dom.js';
-import {Svg} from '../../utils/svg.js';
-import type {WorkspaceSvg} from '../../workspace_svg.js';
-import type {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
-import {MarkerSvg as BaseMarkerSvg} from '../common/marker_svg.js';
-
-import type {ConstantProvider as ZelosConstantProvider} from './constants.js';
-
-
-/**
- * Class to draw a marker.
- * @alias Blockly.zelos.MarkerSvg
- */
-export class MarkerSvg extends BaseMarkerSvg {
-  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
-  constants_!: ZelosConstantProvider;
-
-  private markerCircle_: SVGCircleElement|null = null;
-
-  /**
-   * @param workspace The workspace the marker belongs to.
-   * @param constants The constants for the renderer.
-   * @param marker The marker to draw.
-   */
-  constructor(
-      workspace: WorkspaceSvg, constants: BaseConstantProvider,
-      marker: Marker) {
-    super(workspace, constants, marker);
-  }
-
-  /**
-   * Position and display the marker for an input or an output connection.
-   * @param curNode The node to draw the marker for.
-   */
-  private showWithInputOutput_(curNode: ASTNode) {
-    const block = curNode.getSourceBlock() as BlockSvg;
-    const connection = curNode.getLocation() as RenderedConnection;
-    const offsetInBlock = connection.getOffsetInBlock();
-
-    this.positionCircle_(offsetInBlock.x, offsetInBlock.y);
-    this.setParent_(block);
-    this.showCurrent_();
-  }
-
-  override showWithOutput_(curNode: ASTNode) {
-    this.showWithInputOutput_(curNode);
-  }
-
-  override showWithInput_(curNode: ASTNode) {
-    this.showWithInputOutput_(curNode);
-  }
-
-  /**
-   * Draw a rectangle around the block.
-   * @param curNode The current node of the marker.
-   */
-  override showWithBlock_(curNode: ASTNode) {
-    const block = curNode.getLocation() as BlockSvg;
-
-    // Gets the height and width of entire stack.
-    const heightWidth = block.getHeightWidth();
-    // Add padding so that being on a stack looks different than being on a
-    // block.
-    this.positionRect_(0, 0, heightWidth.width, heightWidth.height);
-    this.setParent_(block);
-    this.showCurrent_();
-  }
-
-  /**
-   * Position the circle we use for input and output connections.
-   * @param x The x position of the circle.
-   * @param y The y position of the circle.
-   */
-  private positionCircle_(x: number, y: number) {
-    this.markerCircle_?.setAttribute('cx', x.toString());
-    this.markerCircle_?.setAttribute('cy', y.toString());
-    this.currentMarkerSvg = this.markerCircle_;
-  }
-
-  override hide() {
-    super.hide();
-    if (this.markerCircle_) {
-      this.markerCircle_.style.display = 'none';
-    }
-  }
-
-  override createDomInternal_() {
-    /* clang-format off */
-    /* This markup will be generated and added to the .svgGroup_:
-        <g>
-          <rect width="100" height="5">
-            <animate attributeType="XML" attributeName="fill" dur="1s"
-              values="transparent;transparent;#fff;transparent" repeatCount="indefinite" />
-          </rect>
-        </g>
-        */
-    /* clang-format on */
-    super.createDomInternal_();
-
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'Element | undefined'.
-    this.markerCircle_ = dom.createSvgElement(
-        Svg.CIRCLE, {
-          'r': this.constants_.CURSOR_RADIUS,
-          'style': 'display: none',
-          'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
-        },
-        this.markerSvg_!);
-
-    // Markers and stack cursors don't blink.
-    if (this.isCursor()) {
-      const blinkProperties = this.getBlinkProperties_();
-      dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerCircle_!);
-    }
-
-    return this.markerSvg_!;
-  }
-
-  override applyColour_(curNode: ASTNode) {
-    super.applyColour_(curNode);
-
-    this.markerCircle_?.setAttribute('fill', this.colour_);
-    this.markerCircle_?.setAttribute('stroke', this.colour_);
-
-    if (this.isCursor()) {
-      const values = this.colour_ + ';transparent;transparent;';
-      this.markerCircle_?.firstElementChild!.setAttribute('values', values);
-    }
-  }
-}

package/core/renderers/zelos/measurables/bottom_row.ts

@@ -1,53 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An object representing the bottom row of a rendered block.
- */
-
-/**
- * An object representing the bottom row of a rendered block.
- * @class
- */
-import * as goog from '../../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.BottomRow');
-
-import type {BlockSvg} from '../../../block_svg.js';
-import type {ConstantProvider} from '../../../renderers/common/constants.js';
-import {BottomRow as BaseBottomRow} from '../../../renderers/measurables/bottom_row.js';
-
-
-/**
- * An object containing information about what elements are in the bottom row of
- * a block as well as spacing information for the top row.
- * Elements in a bottom row can consist of corners, spacers and next
- * connections.
- * @alias Blockly.zelos.BottomRow
- */
-export class BottomRow extends BaseBottomRow {
-  /**
-   * @param constants The rendering constants provider.
-   * @internal
-   */
-  constructor(constants: ConstantProvider) {
-    super(constants);
-  }
-
-  override endsWithElemSpacer() {
-    return false;
-  }
-
-  /** Render a round corner unless the block has an output connection. */
-  override hasLeftSquareCorner(block: BlockSvg) {
-    return !!block.outputConnection;
-  }
-
-  /** Render a round corner unless the block has an output connection. */
-  override hasRightSquareCorner(block: BlockSvg) {
-    return !!block.outputConnection && !block.statementInputCount &&
-        !block.nextConnection;
-  }
-}

package/core/renderers/zelos/measurables/inputs.ts

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Zelos specific objects representing inputs with connections on
- * a rendered block.
- */
-
-/**
- * Zelos specific objects representing inputs with connections on
- * a rendered block.
- * @class
- */
-import * as goog from '../../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.StatementInput');
-
-/* eslint-disable-next-line no-unused-vars */
-import type {Input} from '../../../input.js';
-import type {ConstantProvider} from '../../../renderers/common/constants.js';
-import {StatementInput as BaseStatementInput} from '../../../renderers/measurables/statement_input.js';
-
-
-/**
- * An object containing information about the space a statement input takes up
- * during rendering.
- * @alias Blockly.zelos.StatementInput
- */
-export class StatementInput extends BaseStatementInput {
-  connectedBottomNextConnection = false;
-  override height: AnyDuringMigration;
-
-  /**
-   * @param constants The rendering constants provider.
-   * @param input The statement input to measure and store information for.
-   * @internal
-   */
-  constructor(constants: ConstantProvider, input: Input) {
-    super(constants, input);
-
-    if (this.connectedBlock) {
-      // Find the bottom-most connected block in the stack.
-      let block = this.connectedBlock;
-      let nextBlock;
-      while (nextBlock = block.getNextBlock()) {
-        block = nextBlock;
-      }
-      if (!block.nextConnection) {
-        this.height = this.connectedBlockHeight;
-        this.connectedBottomNextConnection = true;
-      }
-    }
-  }
-}

package/core/renderers/zelos/measurables/row_elements.ts

@@ -1,45 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Zelos specific objects representing elements in a row of a
- * rendered block.
- */
-
-/**
- * Zelos specific objects representing elements in a row of a
- * rendered block.
- * @class
- */
-import * as goog from '../../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.RightConnectionShape');
-
-import type {ConstantProvider} from '../../../renderers/common/constants.js';
-import {Measurable} from '../../../renderers/measurables/base.js';
-import {Types} from '../../../renderers/measurables/types.js';
-
-
-/**
- * An object containing information about the space a right connection shape
- * takes up during rendering.
- * @alias Blockly.zelos.RightConnectionShape
- */
-export class RightConnectionShape extends Measurable {
-  // Size is dynamic
-  override height = 0;
-  override width = 0;
-
-  /**
-   * @param constants The rendering constants provider.
-   * @internal
-   */
-  constructor(constants: ConstantProvider) {
-    super(constants);
-    // AnyDuringMigration because:  Property 'getType' does not exist on type
-    // 'typeof Types'.
-    this.type |= (Types as AnyDuringMigration).getType('RIGHT_CONNECTION');
-  }
-}

package/core/renderers/zelos/measurables/top_row.ts

@@ -1,58 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An object representing the top row of a rendered block.
- */
-
-/**
- * An object representing the top row of a rendered block.
- * @class
- */
-import * as goog from '../../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.TopRow');
-
-import type {BlockSvg} from '../../../block_svg.js';
-import type {ConstantProvider} from '../../../renderers/common/constants.js';
-import {TopRow as BaseTopRow} from '../../../renderers/measurables/top_row.js';
-
-
-/**
- * An object containing information about what elements are in the top row of a
- * block as well as sizing information for the top row.
- * Elements in a top row can consist of corners, hats, spacers, and previous
- * connections.
- * After this constructor is called, the row will contain all non-spacer
- * elements it needs.
- * @alias Blockly.zelos.TopRow
- */
-export class TopRow extends BaseTopRow {
-  /**
-   * @param constants The rendering constants provider.
-   * @internal
-   */
-  constructor(constants: ConstantProvider) {
-    super(constants);
-  }
-
-  override endsWithElemSpacer() {
-    return false;
-  }
-
-  /** Render a round corner unless the block has an output connection. */
-  override hasLeftSquareCorner(block: BlockSvg) {
-    const hasHat =
-        (block.hat ? block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
-        !block.outputConnection && !block.previousConnection;
-    return !!block.outputConnection || hasHat;
-  }
-
-  /** Render a round corner unless the block has an output connection. */
-  override hasRightSquareCorner(block: BlockSvg) {
-    return !!block.outputConnection && !block.statementInputCount &&
-        !block.nextConnection;
-  }
-}

package/core/renderers/zelos/path_object.ts

@@ -1,215 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An object that owns a block's rendering SVG elements.
- */
-
-/**
- * An object that owns a block's rendering SVG elements.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.zelos.PathObject');
-
-/* eslint-disable-next-line no-unused-vars */
-// Unused import preserved for side-effects. Remove if unneeded.
-// import '../../theme.js';
-
-import type {BlockSvg} from '../../block_svg.js';
-import type {Connection} from '../../connection.js';
-import type {BlockStyle} from '../../theme.js';
-import * as dom from '../../utils/dom.js';
-import {Svg} from '../../utils/svg.js';
-import {PathObject as BasePathObject} from '../common/path_object.js';
-
-import type {ConstantProvider} from './constants.js';
-
-
-/**
- * An object that handles creating and setting each of the SVG elements
- * used by the renderer.
- * @alias Blockly.zelos.PathObject
- */
-export class PathObject extends BasePathObject {
-  /** The selected path of the block. */
-  private svgPathSelected_: SVGElement|null = null;
-
-  /** The outline paths on the block. */
-  private readonly outlines = new Map<string, SVGElement>();
-
-  /**
-   * A set used to determine which outlines were used during a draw pass.  The
-   * set is initialized with a reference to all the outlines in
-   * `this.outlines`. Every time we use an outline during the draw pass, the
-   * reference is removed from this set.
-   */
-  private remainingOutlines = new Set<string>();
-
-  /**
-   * The type of block's output connection shape.  This is set when a block
-   * with an output connection is drawn.
-   */
-  outputShapeType = null;
-
-  /** @internal */
-  public override constants: ConstantProvider;
-
-  /**
-   * @param root The root SVG element.
-   * @param style The style object to use for colouring.
-   * @param constants The renderer's constants.
-   * @internal
-   */
-  constructor(
-      root: SVGElement, style: BlockStyle, constants: ConstantProvider) {
-    super(root, style, constants);
-
-    this.constants = constants;
-  }
-
-  override setPath(pathString: string) {
-    super.setPath(pathString);
-    if (this.svgPathSelected_) {
-      this.svgPathSelected_.setAttribute('d', pathString);
-    }
-  }
-
-  override applyColour(block: BlockSvg) {
-    super.applyColour(block);
-    // Set shadow stroke colour.
-    const parent = block.getParent();
-    if (block.isShadow() && parent) {
-      this.svgPath.setAttribute('stroke', parent.style.colourTertiary);
-    }
-
-    // Apply colour to outlines.
-    for (const outline of this.outlines.values()) {
-      outline.setAttribute('fill', this.style.colourTertiary);
-    }
-  }
-
-  override flipRTL() {
-    super.flipRTL();
-    // Mirror each input outline path.
-    for (const outline of this.outlines.values()) {
-      outline.setAttribute('transform', 'scale(-1 1)');
-    }
-  }
-
-  override updateSelected(enable: boolean) {
-    this.setClass_('blocklySelected', enable);
-    if (enable) {
-      if (!this.svgPathSelected_) {
-        this.svgPathSelected_ = this.svgPath.cloneNode(true) as SVGElement;
-        this.svgPathSelected_.setAttribute('fill', 'none');
-        this.svgPathSelected_.setAttribute(
-            'filter', 'url(#' + this.constants.selectedGlowFilterId + ')');
-        this.svgRoot.appendChild(this.svgPathSelected_);
-      }
-    } else {
-      if (this.svgPathSelected_) {
-        this.svgRoot.removeChild(this.svgPathSelected_);
-        this.svgPathSelected_ = null;
-      }
-    }
-  }
-
-  override updateReplacementFade(enable: boolean) {
-    this.setClass_('blocklyReplaceable', enable);
-    if (enable) {
-      this.svgPath.setAttribute(
-          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
-    } else {
-      this.svgPath.removeAttribute('filter');
-    }
-  }
-
-  override updateShapeForInputHighlight(conn: Connection, enable: boolean) {
-    const name = conn.getParentInput()!.name;
-    const outlinePath = this.getOutlinePath_(name);
-    if (!outlinePath) {
-      return;
-    }
-    if (enable) {
-      outlinePath.setAttribute(
-          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
-    } else {
-      outlinePath.removeAttribute('filter');
-    }
-  }
-
-  /**
-   * Method that's called when the drawer is about to draw the block.
-   * @internal
-   */
-  beginDrawing() {
-    this.remainingOutlines.clear()
-    for (const key of this.outlines.keys()) {
-      this.remainingOutlines.add(key);
-    }
-  }
-
-  /**
-   * Method that's called when the drawer is done drawing.
-   * @internal
-   */
-  endDrawing() {
-    // Go through all remaining outlines that were not used this draw pass, and
-    // remove them.
-    if (this.remainingOutlines.size) {
-      for (const key of this.remainingOutlines) {
-        this.removeOutlinePath_(key);
-      }
-    }
-    this.remainingOutlines.clear();
-  }
-
-  /**
-   * Set the path generated by the renderer for an outline path on the
-   * respective outline path SVG element.
-   * @param name The input name.
-   * @param pathString The path.
-   * @internal
-   */
-  setOutlinePath(name: string, pathString: string) {
-    const outline = this.getOutlinePath_(name);
-    outline.setAttribute('d', pathString);
-    outline.setAttribute('fill', this.style.colourTertiary);
-  }
-
-  /**
-   * Create's an outline path for the specified input.
-   * @param name The input name.
-   * @return The SVG outline path.
-   */
-  private getOutlinePath_(name: string): SVGElement {
-    if (!this.outlines.has(name)) {
-      this.outlines.set(
-          name,
-          dom.createSvgElement(
-              Svg.PATH, {
-                'class':
-                    'blocklyOutlinePath',  // IE doesn't like paths without the
-                // data definition, set empty
-                // default
-                'd': '',
-              },
-              this.svgRoot));
-    }
-    this.remainingOutlines.delete(name);
-    return this.outlines.get(name)!;
-  }
-
-  /**
-   * Remove an outline path that is associated with the specified input.
-   * @param name The input name.
-   */
-  private removeOutlinePath_(name: string) {
-    this.outlines.get(name)?.parentNode?.removeChild(this.outlines.get(name)!);
-    this.outlines.delete(name);
-  }
-}