blockly 8.0.5 → 9.0.0-beta.0

package/core/renderers/zelos/marker_svg.ts

@@ -0,0 +1,151 @@
+/**
+ * @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.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 declare class BottomRow extends BaseBottomRow {
+    /**
+     * @param constants The rendering constants provider.
+     * @internal
+     */
+    constructor(constants: ConstantProvider);
+    endsWithElemSpacer(): boolean;
+    /** Render a round corner unless the block has an output connection. */
+    hasLeftSquareCorner(block: BlockSvg): boolean;
+    /** Render a round corner unless the block has an output connection. */
+    hasRightSquareCorner(block: BlockSvg): false;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * @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.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 declare class StatementInput extends BaseStatementInput {
+    connectedBottomNextConnection: boolean;
+    height: any;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The statement input to measure and store information for.
+     * @internal
+     */
+    constructor(constants: ConstantProvider, input: Input);
+}

package/core/renderers/zelos/measurables/{inputs.js → inputs.ts}

@@ -14,36 +14,37 @@
  * a rendered block.
  * @class
  */
-goog.module('Blockly.zelos.StatementInput');
+import * as goog from '../../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.StatementInput');
 
 /* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
-/* eslint-disable-next-line no-unused-vars */
-const {Input} = goog.requireType('Blockly.Input');
-const {StatementInput: BaseStatementInput} = goog.require('Blockly.blockRendering.StatementInput');
+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.
- * @extends {BaseStatementInput}
  * @alias Blockly.zelos.StatementInput
  */
-class StatementInput extends BaseStatementInput {
+export class StatementInput extends BaseStatementInput {
+  connectedBottomNextConnection = false;
+  override height: AnyDuringMigration;
+
   /**
-   * @param {!ConstantProvider} constants The rendering constants provider.
-   * @param {!Input} input The statement input to measure and store information
-   *    for.
-   * @package
+   * @param constants The rendering constants provider.
+   * @param input The statement input to measure and store information for.
+   * @internal
    */
-  constructor(constants, input) {
+  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())) {
+      while (nextBlock = block.getNextBlock()) {
         block = nextBlock;
       }
       if (!block.nextConnection) {
@@ -53,5 +54,3 @@ class StatementInput extends BaseStatementInput {
     }
   }
 }
-
-exports.StatementInput = StatementInput;

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../../../renderers/common/constants.js';
+import { Measurable } from '../../../renderers/measurables/base.js';
+/**
+ * An object containing information about the space a right connection shape
+ * takes up during rendering.
+ * @alias Blockly.zelos.RightConnectionShape
+ */
+export declare class RightConnectionShape extends Measurable {
+    height: number;
+    width: number;
+    /**
+     * @param constants The rendering constants provider.
+     * @internal
+     */
+    constructor(constants: ConstantProvider);
+}

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

@@ -0,0 +1,45 @@
+/**
+ * @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.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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 declare class TopRow extends BaseTopRow {
+    /**
+     * @param constants The rendering constants provider.
+     * @internal
+     */
+    constructor(constants: ConstantProvider);
+    endsWithElemSpacer(): boolean;
+    /** Render a round corner unless the block has an output connection. */
+    hasLeftSquareCorner(block: BlockSvg): boolean;
+    /** Render a round corner unless the block has an output connection. */
+    hasRightSquareCorner(block: BlockSvg): false;
+}

package/core/renderers/zelos/measurables/{top_row.js → top_row.ts}

@@ -7,17 +7,17 @@
 /**
  * @fileoverview An object representing the top row of a rendered block.
  */
-'use strict';
 
 /**
  * An object representing the top row of a rendered block.
  * @class
  */
-goog.module('Blockly.zelos.TopRow');
+import * as goog from '../../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.TopRow');
 
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
-const {TopRow: BaseTopRow} = goog.require('Blockly.blockRendering.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';
 
 
 /**
@@ -27,45 +27,32 @@ const {TopRow: BaseTopRow} = goog.require('Blockly.blockRendering.TopRow');
  * connections.
  * After this constructor is called, the row will contain all non-spacer
  * elements it needs.
- * @extends {BaseTopRow}
  * @alias Blockly.zelos.TopRow
  */
-class TopRow extends BaseTopRow {
+export class TopRow extends BaseTopRow {
   /**
-   * @param {!ConstantProvider} constants The rendering
-   *   constants provider.
-   * @package
+   * @param constants The rendering constants provider.
+   * @internal
    */
-  constructor(constants) {
+  constructor(constants: ConstantProvider) {
     super(constants);
   }
 
-  /**
-   * @override
-   */
-  endsWithElemSpacer() {
+  override endsWithElemSpacer() {
     return false;
   }
 
-  /**
-   * Render a round corner unless the block has an output connection.
-   * @override
-   */
-  hasLeftSquareCorner(block) {
+  /** 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) {
+  /** Render a round corner unless the block has an output connection. */
+  override hasRightSquareCorner(block: BlockSvg) {
     return !!block.outputConnection && !block.statementInputCount &&
         !block.nextConnection;
   }
 }
-
-exports.TopRow = TopRow;

package/core/renderers/zelos/path_object.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Connection } from '../../connection.js';
+import type { BlockStyle } from '../../theme.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 declare class PathObject extends BasePathObject {
+    /** The selected path of the block. */
+    private svgPathSelected_;
+    /** The outline paths on the block. */
+    private readonly outlines;
+    /**
+     * 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;
+    /**
+     * The type of block's output connection shape.  This is set when a block
+     * with an output connection is drawn.
+     */
+    outputShapeType: null;
+    /** @internal */
+    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);
+    setPath(pathString: string): void;
+    applyColour(block: BlockSvg): void;
+    flipRTL(): void;
+    updateSelected(enable: boolean): void;
+    updateReplacementFade(enable: boolean): void;
+    updateShapeForInputHighlight(conn: Connection, enable: boolean): void;
+    /**
+     * Method that's called when the drawer is about to draw the block.
+     * @internal
+     */
+    beginDrawing(): void;
+    /**
+     * Method that's called when the drawer is done drawing.
+     * @internal
+     */
+    endDrawing(): void;
+    /**
+     * 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): void;
+    /**
+     * Create's an outline path for the specified input.
+     * @param name The input name.
+     * @return The SVG outline path.
+     */
+    private getOutlinePath_;
+    /**
+     * Remove an outline path that is associated with the specified input.
+     * @param name The input name.
+     */
+    private removeOutlinePath_;
+}