blockly 8.0.5 → 9.0.0-beta.0

package/core/renderers/zelos/{info.js → info.ts}

@@ -1,49 +1,43 @@
 /**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * @fileoverview Makecode/scratch-style renderer.
+ * Zelos: spirit of eager rivalry, emulation, envy, jealousy, and zeal.
  */
 
 /**
- * @fileoverview Makecode/scratch-style renderer.
- * Zelos: spirit of eager rivalry, emulation, envy, jealousy, and zeal.
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-'use strict';
 
 /**
  * Makecode/scratch-style renderer.
  * @class
  */
-goog.module('Blockly.zelos.RenderInfo');
-
-const {Align} = goog.require('Blockly.Input');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-const {BottomRow} = goog.require('Blockly.zelos.BottomRow');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.zelos.ConstantProvider');
-const {Field} = goog.require('Blockly.blockRendering.Field');
-const {FieldImage} = goog.require('Blockly.FieldImage');
-const {FieldLabel} = goog.require('Blockly.FieldLabel');
-const {FieldTextInput} = goog.require('Blockly.FieldTextInput');
-/* eslint-disable-next-line no-unused-vars */
-const {Input} = goog.requireType('Blockly.Input');
-const {InputConnection} = goog.require('Blockly.blockRendering.InputConnection');
-const {InRowSpacer} = goog.require('Blockly.blockRendering.InRowSpacer');
-/* eslint-disable-next-line no-unused-vars */
-const {Measurable} = goog.requireType('Blockly.blockRendering.Measurable');
-const {RenderInfo: BaseRenderInfo} = goog.require('Blockly.blockRendering.RenderInfo');
-/* eslint-disable-next-line no-unused-vars */
-const {Renderer} = goog.requireType('Blockly.zelos.Renderer');
-const {RightConnectionShape} = goog.require('Blockly.zelos.RightConnectionShape');
-/* eslint-disable-next-line no-unused-vars */
-const {Row} = goog.require('Blockly.blockRendering.Row');
-/* eslint-disable-next-line no-unused-vars */
-const {SpacerRow} = goog.requireType('Blockly.blockRendering.SpacerRow');
-const {StatementInput} = goog.require('Blockly.zelos.StatementInput');
-const {TopRow} = goog.require('Blockly.zelos.TopRow');
-const {Types} = goog.require('Blockly.blockRendering.Types');
-const {inputTypes} = goog.require('Blockly.inputTypes');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.RenderInfo');
+
+import type {BlockSvg} from '../../block_svg.js';
+import {FieldImage} from '../../field_image.js';
+import {FieldLabel} from '../../field_label.js';
+import {FieldTextInput} from '../../field_textinput.js';
+import {Align, Input} from '../../input.js';
+import {inputTypes} from '../../input_types.js';
+import {RenderInfo as BaseRenderInfo} from '../common/info.js';
+import type {Measurable} from '../measurables/base.js';
+import {Field} from '../measurables/field.js';
+import {InRowSpacer} from '../measurables/in_row_spacer.js';
+import {InputConnection} from '../measurables/input_connection.js';
+import type {Row} from '../measurables/row.js';
+import type {SpacerRow} from '../measurables/spacer_row.js';
+import {Types} from '../measurables/types.js';
+
+import type {ConstantProvider, InsideCorners} from './constants.js';
+import {BottomRow} from './measurables/bottom_row.js';
+import {StatementInput} from './measurables/inputs.js';
+import {RightConnectionShape} from './measurables/row_elements.js';
+import {TopRow} from './measurables/top_row.js';
+import type {PathObject} from './path_object.js';
+import type {Renderer} from './renderer.js';
 
 
 /**
@@ -52,56 +46,55 @@ const {inputTypes} = goog.require('Blockly.inputTypes');
  * This measure pass does not propagate changes to the block (although fields
  * may choose to rerender when getSize() is called).  However, calling it
  * repeatedly may be expensive.
- * @extends {BaseRenderInfo}
  * @alias Blockly.zelos.RenderInfo
  */
-class RenderInfo extends BaseRenderInfo {
+export class RenderInfo extends BaseRenderInfo {
+  override topRow: TopRow;
+  override bottomRow: BottomRow;
+  override constants_: ConstantProvider;
+  override renderer_: Renderer;
+
+  override isInline = true;
+  isMultiRow: boolean;
+  hasStatementInput: boolean;
+  rightSide: RightConnectionShape|null;
+  private readonly rightAlignedDummyInputs_: WeakMap<Row, Input>;
+
   /**
-   * @param {!Renderer} renderer The renderer in use.
-   * @param {!BlockSvg} block The block to measure.
-   * @package
+   * @param renderer The renderer in use.
+   * @param block The block to measure.
+   * @internal
    */
-  constructor(renderer, block) {
+  constructor(renderer: Renderer, block: BlockSvg) {
     super(renderer, block);
 
-    /** @type {!ConstantProvider} */
-    this.constants_;
+    this.renderer_ = renderer;
+
+    this.constants_ = this.renderer_.getConstants();
 
     /**
      * An object with rendering information about the top row of the block.
-     * @type {!TopRow}
-     * @override
      */
     this.topRow = new TopRow(this.constants_);
 
     /**
      * An object with rendering information about the bottom row of the block.
-     * @type {!BottomRow}
-     * @override
      */
     this.bottomRow = new BottomRow(this.constants_);
 
-    /**
-     * @override
-     */
-    this.isInline = true;
-
     /**
      * Whether the block should be rendered as a multi-line block, either
      * because it's not inline or because it has been collapsed.
-     * @type {boolean}
      */
     this.isMultiRow = !block.getInputsInline() || block.isCollapsed();
 
     /**
      * Whether or not the block has a statement input in one of its rows.
-     * @type {boolean}
      */
     this.hasStatementInput = block.statementInputCount > 0;
 
     /**
      * An object with rendering information about the right connection shape.
-     * @type {RightConnectionShape}
      */
     this.rightSide = this.outputConnection ?
         new RightConnectionShape(this.constants_) :
@@ -110,25 +103,20 @@ class RenderInfo extends BaseRenderInfo {
     /**
      * A map of rows to right aligned dummy inputs within those rows. Used to
      * add padding between left and right aligned inputs.
-     * @type {!WeakMap<!Row, !Input>}
-     * @private
      */
     this.rightAlignedDummyInputs_ = new WeakMap();
   }
 
   /**
    * Get the block renderer in use.
-   * @return {!Renderer} The block renderer in use.
-   * @package
+   * @return The block renderer in use.
+   * @internal
    */
-  getRenderer() {
-    return /** @type {!Renderer} */ (this.renderer_);
+  override getRenderer(): Renderer {
+    return this.renderer_ as Renderer;
   }
 
-  /**
-   * @override
-   */
-  measure() {
+  override measure() {
     // Modifying parent measure method to add `adjustXPosition_`.
     this.createRows_();
     this.addElemSpacing_();
@@ -139,10 +127,7 @@ class RenderInfo extends BaseRenderInfo {
     this.finalize_();
   }
 
-  /**
-   * @override
-   */
-  shouldStartNewRow_(input, lastInput) {
+  override shouldStartNewRow_(input: Input, lastInput: Input): boolean {
     // If this is the first input, just add to the existing row.
     // That row is either empty or has some icons in it.
     if (!lastInput) {
@@ -160,21 +145,17 @@ class RenderInfo extends BaseRenderInfo {
     return false;
   }
 
-  /**
-   * @override
-   */
-  getDesiredRowWidth_(row) {
+  override getDesiredRowWidth_(row: Row): number {
     if (row.hasStatement) {
-      const rightCornerWidth = this.constants_.INSIDE_CORNERS.rightWidth || 0;
+      const rightCornerWidth =
+          (this.constants_.INSIDE_CORNERS as InsideCorners).rightWidth || 0;
       return this.width - this.startX - rightCornerWidth;
     }
     return super.getDesiredRowWidth_(row);
   }
 
-  /**
-   * @override
-   */
-  getInRowSpacing_(prev, next) {
+  override getInRowSpacing_(prev: Measurable|null, next: Measurable|null):
+      number {
     if (!prev || !next) {
       // No need for padding at the beginning or end of the row if the
       // output shape is dynamic.
@@ -196,16 +177,16 @@ class RenderInfo extends BaseRenderInfo {
       }
     }
     // Spacing between a square corner and a hat.
-    if (prev && Types.isLeftSquareCorner(prev) && next && Types.isHat(next)) {
+    // AnyDuringMigration because:  Property 'isHat' does not exist on type
+    // 'typeof Types'.
+    if (prev && Types.isLeftSquareCorner(prev) && next &&
+        (Types as AnyDuringMigration).isHat(next)) {
       return this.constants_.NO_PADDING;
     }
     return this.constants_.MEDIUM_PADDING;
   }
 
-  /**
-   * @override
-   */
-  getSpacerRowHeight_(prev, next) {
+  override getSpacerRowHeight_(prev: Row, next: Row): number {
     // If we have an empty block add a spacer to increase the height.
     if (Types.isTopRow(prev) && Types.isBottomRow(next)) {
       return this.constants_.EMPTY_BLOCK_SPACER_HEIGHT;
@@ -213,7 +194,8 @@ class RenderInfo extends BaseRenderInfo {
     const followsStatement = Types.isInputRow(prev) && prev.hasStatement;
     const precedesStatement = Types.isInputRow(next) && next.hasStatement;
     if (precedesStatement || followsStatement) {
-      const cornerHeight = this.constants_.INSIDE_CORNERS.rightHeight || 0;
+      const cornerHeight =
+          (this.constants_.INSIDE_CORNERS as InsideCorners).rightHeight || 0;
       const height = Math.max(this.constants_.NOTCH_HEIGHT, cornerHeight);
       return precedesStatement && followsStatement ?
           Math.max(height, this.constants_.DUMMY_INPUT_MIN_HEIGHT) :
@@ -221,7 +203,7 @@ class RenderInfo extends BaseRenderInfo {
     }
     // Top and bottom rows act as a spacer so we don't need any extra padding.
     if (Types.isTopRow(prev)) {
-      const topRow = /** @type {!TopRow} */ (prev);
+      const topRow = prev as TopRow;
       if (!topRow.hasPreviousConnection &&
           (!this.outputConnection || this.hasStatementInput)) {
         return Math.abs(
@@ -230,7 +212,7 @@ class RenderInfo extends BaseRenderInfo {
       return this.constants_.NO_PADDING;
     }
     if (Types.isBottomRow(next)) {
-      const bottomRow = /** @type {!BottomRow} */ (next);
+      const bottomRow = next as BottomRow;
       if (!this.outputConnection) {
         const topHeight = Math.max(
                               this.topRow.minHeight,
@@ -248,22 +230,16 @@ class RenderInfo extends BaseRenderInfo {
     return this.constants_.MEDIUM_PADDING;
   }
 
-  /**
-   * @override
-   */
-  getSpacerRowWidth_(prev, next) {
+  override getSpacerRowWidth_(prev: Row, next: Row): number {
     const width = this.width - this.startX;
-    if ((Types.isInputRow(prev) && prev.hasStatement) ||
-        (Types.isInputRow(next) && next.hasStatement)) {
+    if (Types.isInputRow(prev) && prev.hasStatement ||
+        Types.isInputRow(next) && next.hasStatement) {
       return Math.max(width, this.constants_.STATEMENT_INPUT_SPACER_MIN_WIDTH);
     }
     return width;
   }
 
-  /**
-   * @override
-   */
-  getElemCenterline_(row, elem) {
+  override getElemCenterline_(row: Row, elem: Measurable): number {
     if (row.hasStatement && !Types.isSpacer(elem) &&
         !Types.isStatementInput(elem)) {
       return row.yPos + this.constants_.EMPTY_STATEMENT_INPUT_HEIGHT / 2;
@@ -278,10 +254,7 @@ class RenderInfo extends BaseRenderInfo {
     return super.getElemCenterline_(row, elem);
   }
 
-  /**
-   * @override
-   */
-  addInput_(input, activeRow) {
+  override addInput_(input: Input, activeRow: Row) {
     // If we have two dummy inputs on the same row, one aligned left and the
     // other right, keep track of the right aligned dummy input so we can add
     // padding later.
@@ -301,10 +274,7 @@ class RenderInfo extends BaseRenderInfo {
     super.addInput_(input, activeRow);
   }
 
-  /**
-   * @override
-   */
-  addAlignmentPadding_(row, missingSpace) {
+  override addAlignmentPadding_(row: Row, missingSpace: number) {
     if (this.rightAlignedDummyInputs_.get(row)) {
       let alignmentDivider;
       for (let i = 0; i < row.elements.length; i++) {
@@ -330,9 +300,8 @@ class RenderInfo extends BaseRenderInfo {
    * Adjust the x position of fields to bump all non-label fields in the first
    * row past the notch position.  This must be called before ``computeBounds``
    * is called.
-   * @protected
    */
-  adjustXPosition_() {
+  protected adjustXPosition_() {
     const notchTotalWidth =
         this.constants_.NOTCH_OFFSET_LEFT + this.constants_.NOTCH_WIDTH;
     let minXPos = notchTotalWidth;
@@ -340,9 +309,9 @@ class RenderInfo extends BaseRenderInfo {
     // first input row (if the block has prev connection) and every input row
     // that has a prev and next notch.
     for (let i = 2; i < this.rows.length - 1; i += 2) {
-      const prevSpacer = /** @type {!SpacerRow} */ (this.rows[i - 1]);
+      const prevSpacer = this.rows[i - 1] as SpacerRow;
       const row = this.rows[i];
-      const nextSpacer = /** @type {!SpacerRow} */ (this.rows[i + 1]);
+      const nextSpacer = this.rows[i + 1] as SpacerRow;
 
       const hasPrevNotch = i === 2 ? !!this.topRow.hasPreviousConnection :
                                      !!prevSpacer.followsStatement;
@@ -383,13 +352,18 @@ class RenderInfo extends BaseRenderInfo {
    * output connection to match that of the block.  For the right side, add a
    * right connection shape element and have it match the dimensions of the
    * output connection.
-   * @protected
    */
-  finalizeOutputConnection_() {
+  protected finalizeOutputConnection_() {
     // Dynamic output connections depend on the height of the block.
     if (!this.outputConnection || !this.outputConnection.isDynamicShape) {
       return;
     }
+    const outputConnectionShape = this.outputConnection.shape;
+    if (!('isDynamic' in outputConnectionShape &&
+          outputConnectionShape.isDynamic)) {
+      return;
+    }
+
     let yCursor = 0;
     // Determine the block height.
     for (let i = 0; i < this.rows.length; i++) {
@@ -403,26 +377,26 @@ class RenderInfo extends BaseRenderInfo {
     const blockHeight = this.bottomRow.hasNextConnection ?
         this.height - this.bottomRow.descenderHeight :
         this.height;
-    const connectionHeight = this.outputConnection.shape.height(blockHeight);
-    const connectionWidth = this.outputConnection.shape.width(blockHeight);
+    const connectionHeight = outputConnectionShape.height(blockHeight);
+    const connectionWidth = outputConnectionShape.width(blockHeight);
 
     this.outputConnection.height = connectionHeight;
     this.outputConnection.width = connectionWidth;
     this.outputConnection.startX = connectionWidth;
     this.outputConnection.connectionOffsetY =
-        this.outputConnection.shape.connectionOffsetY(connectionHeight);
+        outputConnectionShape.connectionOffsetY(connectionHeight);
     this.outputConnection.connectionOffsetX =
-        this.outputConnection.shape.connectionOffsetX(connectionWidth);
+        outputConnectionShape.connectionOffsetX(connectionWidth);
 
     // Add the right connection measurable.
     // Don't add it if we have a value-to-statement or a value-to-stack block.
     let rightConnectionWidth = 0;
     if (!this.hasStatementInput && !this.bottomRow.hasNextConnection) {
       rightConnectionWidth = connectionWidth;
-      this.rightSide.height = connectionHeight;
-      this.rightSide.width = rightConnectionWidth;
-      this.rightSide.centerline = connectionHeight / 2;
-      this.rightSide.xPos = this.width + rightConnectionWidth;
+      this.rightSide!.height = connectionHeight;
+      this.rightSide!.width = rightConnectionWidth;
+      this.rightSide!.centerline = connectionHeight / 2;
+      this.rightSide!.xPos = this.width + rightConnectionWidth;
     }
     this.startX = connectionWidth;
     this.width += connectionWidth + rightConnectionWidth;
@@ -434,9 +408,8 @@ class RenderInfo extends BaseRenderInfo {
    * reduce the implicit spacing created by the left and right output connection
    * shapes by adding setting negative spacing onto the leftmost and rightmost
    * spacers.
-   * @protected
    */
-  finalizeHorizontalAlignment_() {
+  protected finalizeHorizontalAlignment_() {
     if (!this.outputConnection || this.hasStatementInput ||
         this.bottomRow.hasNextConnection) {
       return;
@@ -468,10 +441,12 @@ class RenderInfo extends BaseRenderInfo {
     if (totalNegativeSpacing) {
       this.width -= totalNegativeSpacing;
       this.widthWithChildren -= totalNegativeSpacing;
-      this.rightSide.xPos -= totalNegativeSpacing;
+      this.rightSide!.xPos -= totalNegativeSpacing;
       for (let i = 0; i < this.rows.length; i++) {
         const row = this.rows[i];
-        if (Types.isTopOrBottomRow(row)) {
+        // AnyDuringMigration because:  Property 'isTopOrBottomRow' does not
+        // exist on type 'typeof Types'.
+        if ((Types as AnyDuringMigration).isTopOrBottomRow(row)) {
           row.elements[1].width -= totalNegativeSpacing;
         }
         row.width -= totalNegativeSpacing;
@@ -483,19 +458,16 @@ class RenderInfo extends BaseRenderInfo {
   /**
    * Calculate the spacing to reduce the left and right edges by based on the
    * outer and inner connection shape.
-   * @param {Measurable} elem The first or last element on
-   *     a block.
-   * @return {number} The amount of spacing to reduce the first or last spacer.
-   * @protected
+   * @param elem The first or last element on a block.
+   * @return The amount of spacing to reduce the first or last spacer.
    */
-  getNegativeSpacing_(elem) {
+  protected getNegativeSpacing_(elem: Measurable): number {
     if (!elem) {
       return 0;
     }
     const connectionWidth = this.outputConnection.width;
     const outerShape = this.outputConnection.shape.type;
-    const constants =
-        /** @type {!ConstantProvider} */ (this.constants_);
+    const constants = (this.constants_);
     if (this.isMultiRow && this.inputRows.length > 1) {
       switch (outerShape) {
         case constants.SHAPES.ROUND: {
@@ -514,8 +486,11 @@ class RenderInfo extends BaseRenderInfo {
     if (Types.isInlineInput(elem) && elem instanceof InputConnection) {
       const connectedBlock = elem.connectedBlock;
       const innerShape = connectedBlock ?
-          connectedBlock.pathObject.outputShapeType :
+          (connectedBlock.pathObject as PathObject).outputShapeType :
           elem.shape.type;
+      if (innerShape == null) {
+        return 0;
+      }
       // Special case for value to stack / value to statement blocks.
       if (connectedBlock && connectedBlock.outputConnection &&
           (connectedBlock.statementInputCount ||
@@ -533,7 +508,7 @@ class RenderInfo extends BaseRenderInfo {
       // Special case for text inputs.
       if (outerShape === constants.SHAPES.ROUND &&
           elem.field instanceof FieldTextInput) {
-        return connectionWidth - (2.75 * constants.GRID_UNIT);
+        return connectionWidth - 2.75 * constants.GRID_UNIT;
       }
       return connectionWidth -
           this.constants_.SHAPE_IN_SHAPE_PADDING[outerShape][0];
@@ -547,18 +522,17 @@ class RenderInfo extends BaseRenderInfo {
    * Finalize vertical alignment of rows on a block.  In particular, reduce the
    * implicit spacing when a non-shadow block is connected to any of an input
    * row's inline inputs.
-   * @protected
    */
-  finalizeVerticalAlignment_() {
+  protected finalizeVerticalAlignment_() {
     if (this.outputConnection) {
       return;
     }
     // Run through every input row on the block and only apply tight nesting
     // logic to input rows that have a prev and next notch.
     for (let i = 2; i < this.rows.length - 1; i += 2) {
-      const prevSpacer = /** @type {!SpacerRow} */ (this.rows[i - 1]);
+      const prevSpacer = this.rows[i - 1] as SpacerRow;
       const row = this.rows[i];
-      const nextSpacer = /** @type {!SpacerRow} */ (this.rows[i + 1]);
+      const nextSpacer = this.rows[i + 1] as SpacerRow;
 
       const firstRow = i === 2;
       const hasPrevNotch = firstRow ? !!this.topRow.hasPreviousConnection :
@@ -606,10 +580,7 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 
-  /**
-   * @override
-   */
-  finalize_() {
+  override finalize_() {
     this.finalizeOutputConnection_();
     this.finalizeHorizontalAlignment_();
     this.finalizeVerticalAlignment_();
@@ -620,5 +591,3 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 }
-
-exports.RenderInfo = RenderInfo;

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ASTNode } from '../../keyboard_nav/ast_node.js';
+import type { Marker } from '../../keyboard_nav/marker.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 declare class MarkerSvg extends BaseMarkerSvg {
+    constants_: ZelosConstantProvider;
+    private markerCircle_;
+    /**
+     * @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);
+    /**
+     * Position and display the marker for an input or an output connection.
+     * @param curNode The node to draw the marker for.
+     */
+    private showWithInputOutput_;
+    showWithOutput_(curNode: ASTNode): void;
+    showWithInput_(curNode: ASTNode): void;
+    /**
+     * Draw a rectangle around the block.
+     * @param curNode The current node of the marker.
+     */
+    showWithBlock_(curNode: ASTNode): void;
+    /**
+     * 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_;
+    hide(): void;
+    createDomInternal_(): SVGGElement;
+    applyColour_(curNode: ASTNode): void;
+}