blockly 8.0.5 → 9.0.0-beta.0

package/core/{rendered_connection.js → rendered_connection.ts}

@@ -7,101 +7,92 @@
 /**
  * @fileoverview Components for creating connections between blocks.
  */
-'use strict';
 
 /**
  * Components for creating connections between blocks.
  * @class
  */
-goog.module('Blockly.RenderedConnection');
-
-const common = goog.require('Blockly.common');
-const dom = goog.require('Blockly.utils.dom');
-const eventUtils = goog.require('Blockly.Events.utils');
-const internalConstants = goog.require('Blockly.internalConstants');
-const svgPaths = goog.require('Blockly.utils.svgPaths');
-const svgMath = goog.require('Blockly.utils.svgMath');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-const {config} = goog.require('Blockly.config');
-/* eslint-disable-next-line no-unused-vars */
-const {ConnectionDB} = goog.requireType('Blockly.ConnectionDB');
-const {ConnectionType} = goog.require('Blockly.ConnectionType');
-const {Connection} = goog.require('Blockly.Connection');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.RenderedConnection');
+
+import type {Block} from './block.js';
+import type {BlockSvg} from './block_svg.js';
+import * as common from './common.js';
+import {config} from './config.js';
+import {Connection} from './connection.js';
+import type {ConnectionDB} from './connection_db.js';
+import {ConnectionType} from './connection_type.js';
+import * as eventUtils from './events/utils.js';
+import * as internalConstants from './internal_constants.js';
+import {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import {Svg} from './utils/svg.js';
+import * as svgMath from './utils/svg_math.js';
+import * as svgPaths from './utils/svg_paths.js';
+
+
+/** A shape that has a pathDown property. */
+interface PathDownShape {
+  pathDown: string;
+}
 
+/** A shape that has a pathLeft property. */
+interface PathLeftShape {
+  pathLeft: string;
+}
 
-/**
- * Maximum randomness in workspace units for bumping a block.
- * @const
- */
+/** Maximum randomness in workspace units for bumping a block. */
 const BUMP_RANDOMNESS = 10;
 
 /**
  * Class for a connection between blocks that may be rendered on screen.
- * @extends {Connection}
  * @alias Blockly.RenderedConnection
  */
-class RenderedConnection extends Connection {
+export class RenderedConnection extends Connection {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  sourceBlock_!: BlockSvg;
+  private readonly db_: ConnectionDB;
+  private readonly dbOpposite_: ConnectionDB;
+  private readonly offsetInBlock_: Coordinate;
+  private trackedState_: TrackedState;
+
+  /** Connection this connection connects to.  Null if not connected. */
+  override targetConnection: RenderedConnection|null = null;
+
   /**
-   * @param {!BlockSvg} source The block establishing this connection.
-   * @param {number} type The type of the connection.
+   * @param source The block establishing this connection.
+   * @param type The type of the connection.
    */
-  constructor(source, type) {
+  constructor(source: BlockSvg, type: number) {
     super(source, type);
 
-    /** @type {!BlockSvg} */
-    this.sourceBlock_;
-
     /**
      * Connection database for connections of this type on the current
      * workspace.
-     * @const {!ConnectionDB}
-     * @private
      */
     this.db_ = source.workspace.connectionDBList[type];
 
     /**
      * Connection database for connections compatible with this type on the
      * current workspace.
-     * @const {!ConnectionDB}
-     * @private
      */
     this.dbOpposite_ =
         source.workspace
             .connectionDBList[internalConstants.OPPOSITE_TYPE[type]];
 
-    /**
-     * Workspace units, (0, 0) is top left of block.
-     * @type {!Coordinate}
-     * @private
-     */
+    /** Workspace units, (0, 0) is top left of block. */
     this.offsetInBlock_ = new Coordinate(0, 0);
 
-    /**
-     * Describes the state of this connection's tracked-ness.
-     * @type {RenderedConnection.TrackedState}
-     * @private
-     */
+    /** Describes the state of this connection's tracked-ness. */
     this.trackedState_ = RenderedConnection.TrackedState.WILL_TRACK;
-
-    /**
-     * Connection this connection connects to.  Null if not connected.
-     * @type {RenderedConnection}
-     */
-    this.targetConnection = null;
   }
 
   /**
    * Dispose of this connection. Remove it from the database (if it is
    * tracked) and call the super-function to deal with connected blocks.
-   * @override
-   * @package
+   * @internal
    */
-  dispose() {
+  override dispose() {
     super.dispose();
     if (this.trackedState_ === RenderedConnection.TrackedState.TRACKED) {
       this.db_.removeConnection(this, this.y);
@@ -110,30 +101,27 @@ class RenderedConnection extends Connection {
 
   /**
    * Get the source block for this connection.
-   * @return {!BlockSvg} The source block.
-   * @override
+   * @return The source block.
    */
-  getSourceBlock() {
-    return /** @type {!BlockSvg} */ (super.getSourceBlock());
+  override getSourceBlock(): BlockSvg {
+    return super.getSourceBlock() as BlockSvg;
   }
 
   /**
    * Returns the block that this connection connects to.
-   * @return {?BlockSvg} The connected block or null if none is connected.
-   * @override
+   * @return The connected block or null if none is connected.
    */
-  targetBlock() {
-    return /** @type {BlockSvg} */ (super.targetBlock());
+  override targetBlock(): BlockSvg|null {
+    return super.targetBlock() as BlockSvg;
   }
 
   /**
    * Returns the distance between this connection and another connection in
    * workspace units.
-   * @param {!Connection} otherConnection The other connection to measure
-   *     the distance to.
-   * @return {number} The distance between connections, in workspace units.
+   * @param otherConnection The other connection to measure the distance to.
+   * @return The distance between connections, in workspace units.
    */
-  distanceFrom(otherConnection) {
+  distanceFrom(otherConnection: Connection): number {
     const xDiff = this.x - otherConnection.x;
     const yDiff = this.y - otherConnection.y;
     return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
@@ -142,11 +130,10 @@ class RenderedConnection extends Connection {
   /**
    * Move the block(s) belonging to the connection to a point where they don't
    * visually interfere with the specified connection.
-   * @param {!RenderedConnection} staticConnection The connection to move away
-   *     from.
-   * @package
+   * @param staticConnection The connection to move away from.
+   * @internal
    */
-  bumpAwayFrom(staticConnection) {
+  bumpAwayFrom(staticConnection: RenderedConnection) {
     if (this.sourceBlock_.workspace.isDragging()) {
       // Don't move blocks around while the user is doing the same.
       return;
@@ -172,20 +159,17 @@ class RenderedConnection extends Connection {
     // Raise it to the top for extra visibility.
     const selected = common.getSelected() == rootBlock;
     selected || rootBlock.addSelect();
-    let dx = (staticConnection.x + config.snapRadius +
-              Math.floor(Math.random() * BUMP_RANDOMNESS)) -
-        this.x;
-    let dy = (staticConnection.y + config.snapRadius +
-              Math.floor(Math.random() * BUMP_RANDOMNESS)) -
-        this.y;
+    let dx = staticConnection.x + config.snapRadius +
+        Math.floor(Math.random() * BUMP_RANDOMNESS) - this.x;
+    let dy = staticConnection.y + config.snapRadius +
+        Math.floor(Math.random() * BUMP_RANDOMNESS) - this.y;
     if (reverse) {
       // When reversing a bump due to an uneditable block, bump up.
       dy = -dy;
     }
     if (rootBlock.RTL) {
-      dx = (staticConnection.x - config.snapRadius -
-            Math.floor(Math.random() * BUMP_RANDOMNESS)) -
-          this.x;
+      dx = staticConnection.x - config.snapRadius -
+          Math.floor(Math.random() * BUMP_RANDOMNESS) - this.x;
     }
     rootBlock.moveBy(dx, dy);
     selected || rootBlock.removeSelect();
@@ -193,10 +177,10 @@ class RenderedConnection extends Connection {
 
   /**
    * Change the connection's coordinates.
-   * @param {number} x New absolute x coordinate, in workspace coordinates.
-   * @param {number} y New absolute y coordinate, in workspace coordinates.
+   * @param x New absolute x coordinate, in workspace coordinates.
+   * @param y New absolute y coordinate, in workspace coordinates.
    */
-  moveTo(x, y) {
+  moveTo(x: number, y: number) {
     if (this.trackedState_ === RenderedConnection.TrackedState.WILL_TRACK) {
       this.db_.addConnection(this, y);
       this.trackedState_ = RenderedConnection.TrackedState.TRACKED;
@@ -210,84 +194,82 @@ class RenderedConnection extends Connection {
 
   /**
    * Change the connection's coordinates.
-   * @param {number} dx Change to x coordinate, in workspace units.
-   * @param {number} dy Change to y coordinate, in workspace units.
+   * @param dx Change to x coordinate, in workspace units.
+   * @param dy Change to y coordinate, in workspace units.
    */
-  moveBy(dx, dy) {
+  moveBy(dx: number, dy: number) {
     this.moveTo(this.x + dx, this.y + dy);
   }
 
   /**
    * Move this connection to the location given by its offset within the block
    * and the location of the block's top left corner.
-   * @param {!Coordinate} blockTL The location of the top left
-   *     corner of the block, in workspace coordinates.
+   * @param blockTL The location of the top left corner of the block, in
+   *     workspace coordinates.
    */
-  moveToOffset(blockTL) {
+  moveToOffset(blockTL: Coordinate) {
     this.moveTo(
         blockTL.x + this.offsetInBlock_.x, blockTL.y + this.offsetInBlock_.y);
   }
 
   /**
    * Set the offset of this connection relative to the top left of its block.
-   * @param {number} x The new relative x, in workspace units.
-   * @param {number} y The new relative y, in workspace units.
+   * @param x The new relative x, in workspace units.
+   * @param y The new relative y, in workspace units.
    */
-  setOffsetInBlock(x, y) {
+  setOffsetInBlock(x: number, y: number) {
     this.offsetInBlock_.x = x;
     this.offsetInBlock_.y = y;
   }
 
   /**
    * Get the offset of this connection relative to the top left of its block.
-   * @return {!Coordinate} The offset of the connection.
-   * @package
+   * @return The offset of the connection.
+   * @internal
    */
-  getOffsetInBlock() {
+  getOffsetInBlock(): Coordinate {
     return this.offsetInBlock_;
   }
 
   /**
    * Move the blocks on either side of this connection right next to each other.
-   * @package
+   * @internal
    */
   tighten() {
-    const dx = this.targetConnection.x - this.x;
-    const dy = this.targetConnection.y - this.y;
+    const dx = this.targetConnection!.x - this.x;
+    const dy = this.targetConnection!.y - this.y;
     if (dx !== 0 || dy !== 0) {
       const block = this.targetBlock();
-      const svgRoot = block.getSvgRoot();
+      const svgRoot = block!.getSvgRoot();
       if (!svgRoot) {
         throw Error('block is not rendered.');
       }
       // Workspace coordinates.
       const xy = svgMath.getRelativeXY(svgRoot);
-      block.getSvgRoot().setAttribute(
+      block!.getSvgRoot().setAttribute(
           'transform', 'translate(' + (xy.x - dx) + ',' + (xy.y - dy) + ')');
-      block.moveConnections(-dx, -dy);
+      block!.moveConnections(-dx, -dy);
     }
   }
 
   /**
    * Find the closest compatible connection to this connection.
    * All parameters are in workspace units.
-   * @param {number} maxLimit The maximum radius to another connection.
-   * @param {!Coordinate} dxy Offset between this connection's location
-   *     in the database and the current location (as a result of dragging).
-   * @return {!{connection: ?Connection, radius: number}} Contains two
-   *     properties: 'connection' which is either another connection or null,
-   *     and 'radius' which is the distance.
+   * @param maxLimit The maximum radius to another connection.
+   * @param dxy Offset between this connection's location in the database and
+   *     the current location (as a result of dragging).
+   * @return Contains two properties: 'connection' which is either another
+   *     connection or null, and 'radius' which is the distance.
    */
-  closest(maxLimit, dxy) {
+  closest(maxLimit: number, dxy: Coordinate):
+      {connection: RenderedConnection|null, radius: number} {
     return this.dbOpposite_.searchForClosest(this, maxLimit, dxy);
   }
 
-  /**
-   * Add highlighting around this connection.
-   */
+  /** Add highlighting around this connection. */
   highlight() {
     let steps;
-    const sourceBlockSvg = /** @type {!BlockSvg} */ (this.sourceBlock_);
+    const sourceBlockSvg = (this.sourceBlock_);
     const renderConstants =
         sourceBlockSvg.workspace.getRenderer().getConstants();
     const shape = renderConstants.shapeFor(this);
@@ -296,18 +278,22 @@ class RenderedConnection extends Connection {
       // Vertical line, puzzle tab, vertical line.
       const yLen = renderConstants.TAB_OFFSET_FROM_TOP;
       steps = svgPaths.moveBy(0, -yLen) + svgPaths.lineOnAxis('v', yLen) +
-          shape.pathDown + svgPaths.lineOnAxis('v', yLen);
+          (shape as unknown as PathDownShape).pathDown +
+          svgPaths.lineOnAxis('v', yLen);
     } else {
       const xLen =
           renderConstants.NOTCH_OFFSET_LEFT - renderConstants.CORNER_RADIUS;
       // Horizontal line, notch, horizontal line.
       steps = svgPaths.moveBy(-xLen, 0) + svgPaths.lineOnAxis('h', xLen) +
-          shape.pathLeft + svgPaths.lineOnAxis('h', xLen);
+          (shape as unknown as PathLeftShape).pathLeft +
+          svgPaths.lineOnAxis('h', xLen);
     }
     const xy = this.sourceBlock_.getRelativeToSurfaceXY();
     const x = this.x - xy.x;
     const y = this.y - xy.y;
-    Connection.highlightedPath_ = dom.createSvgElement(
+    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
+    // on type 'typeof Connection'.
+    (Connection as AnyDuringMigration).highlightedPath_ = dom.createSvgElement(
         Svg.PATH, {
           'class': 'blocklyHighlightedConnectionPath',
           'd': steps,
@@ -317,25 +303,26 @@ class RenderedConnection extends Connection {
         this.sourceBlock_.getSvgRoot());
   }
 
-  /**
-   * Remove the highlighting around this connection.
-   */
+  /** Remove the highlighting around this connection. */
   unhighlight() {
-    dom.removeNode(Connection.highlightedPath_);
-    delete Connection.highlightedPath_;
+    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
+    // on type 'typeof Connection'.
+    dom.removeNode((Connection as AnyDuringMigration).highlightedPath_);
+    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
+    // on type 'typeof Connection'.
+    delete (Connection as AnyDuringMigration).highlightedPath_;
   }
 
   /**
    * Set whether this connections is tracked in the database or not.
-   * @param {boolean} doTracking If true, start tracking. If false, stop
-   *     tracking.
-   * @package
+   * @param doTracking If true, start tracking. If false, stop tracking.
+   * @internal
    */
-  setTracking(doTracking) {
-    if ((doTracking &&
-         this.trackedState_ === RenderedConnection.TrackedState.TRACKED) ||
-        (!doTracking &&
-         this.trackedState_ === RenderedConnection.TrackedState.UNTRACKED)) {
+  setTracking(doTracking: boolean) {
+    if (doTracking &&
+            this.trackedState_ === RenderedConnection.TrackedState.TRACKED ||
+        !doTracking &&
+            this.trackedState_ === RenderedConnection.TrackedState.UNTRACKED) {
       return;
     }
     if (this.sourceBlock_.isInFlyout) {
@@ -359,19 +346,18 @@ class RenderedConnection extends Connection {
    * collapsed.
    *
    * Also closes down-stream icons/bubbles.
-   * @package
+   * @internal
    */
   stopTrackingAll() {
     this.setTracking(false);
     if (this.targetConnection) {
-      const blocks = this.targetBlock().getDescendants(false);
+      const blocks = this.targetBlock()!.getDescendants(false);
       for (let i = 0; i < blocks.length; i++) {
         const block = blocks[i];
         // Stop tracking connections of all children.
         const connections = block.getConnections_(true);
         for (let j = 0; j < connections.length; j++) {
-          /** @type {!RenderedConnection} */ (connections[j])
-              .setTracking(false);
+          (connections[j]).setTracking(false);
         }
         // Close all bubbles of all children.
         const icons = block.getIcons();
@@ -386,15 +372,15 @@ class RenderedConnection extends Connection {
    * Start tracking this connection, as well as all down-stream connections on
    * any block attached to this connection. This happens when a block is
    * expanded.
-   * @return {!Array<!Block>} List of blocks to render.
+   * @return List of blocks to render.
    */
-  startTrackingAll() {
+  startTrackingAll(): Block[] {
     this.setTracking(true);
     // All blocks that are not tracked must start tracking before any
     // rendering takes place, since rendering requires knowing the dimensions
     // of lower blocks. Also, since rendering a block renders all its parents,
     // we only need to render the leaf nodes.
-    let renderList = [];
+    let renderList: AnyDuringMigration[] = [];
     if (this.type !== ConnectionType.INPUT_VALUE &&
         this.type !== ConnectionType.NEXT_STATEMENT) {
       // Only spider down.
@@ -428,19 +414,18 @@ class RenderedConnection extends Connection {
    * Behavior after a connection attempt fails.
    * Bumps this connection away from the other connection. Called when an
    * attempted connection fails.
-   * @param {!Connection} otherConnection Connection that this connection
-   *     failed to connect to.
-   * @package
+   * @param otherConnection Connection that this connection failed to connect
+   *     to.
+   * @internal
    */
-  onFailedConnect(otherConnection) {
+  override onFailedConnect(otherConnection: Connection) {
     const block = this.getSourceBlock();
     if (eventUtils.getRecordUndo()) {
       const group = eventUtils.getGroup();
-      setTimeout(function() {
+      setTimeout(function(this: RenderedConnection) {
         if (!block.isDisposed() && !block.getParent()) {
           eventUtils.setGroup(group);
-          this.bumpAwayFrom(
-              /** @type {!RenderedConnection} */ (otherConnection));
+          this.bumpAwayFrom(otherConnection as RenderedConnection);
           eventUtils.setGroup(false);
         }
       }.bind(this), config.bumpDelay);
@@ -449,16 +434,14 @@ class RenderedConnection extends Connection {
 
   /**
    * Disconnect two blocks that are connected by this connection.
-   * @param {!Block} parentBlock The superior block.
-   * @param {!Block} childBlock The inferior block.
-   * @protected
-   * @override
+   * @param parentBlock The superior block.
+   * @param childBlock The inferior block.
    */
-  disconnectInternal_(parentBlock, childBlock) {
+  protected override disconnectInternal_(
+      parentBlock: Block, childBlock: Block) {
     super.disconnectInternal_(parentBlock, childBlock);
-    const renderedParent = /** @type {!BlockSvg} */ (parentBlock);
-    const renderedChild = /** @type {!BlockSvg} */ (childBlock);
-
+    const renderedParent = parentBlock as BlockSvg;
+    const renderedChild = childBlock as BlockSvg;
     // Rerender the parent so that it may reflow.
     if (renderedParent.rendered) {
       renderedParent.render();
@@ -474,10 +457,8 @@ class RenderedConnection extends Connection {
   /**
    * Respawn the shadow block if there was one connected to the this connection.
    * Render/rerender blocks as needed.
-   * @protected
-   * @override
    */
-  respawnShadow_() {
+  protected override respawnShadow_() {
     super.respawnShadow_();
     const blockShadow = this.targetBlock();
     if (!blockShadow) {
@@ -495,26 +476,24 @@ class RenderedConnection extends Connection {
   /**
    * Find all nearby compatible connections to this connection.
    * Type checking does not apply, since this function is used for bumping.
-   * @param {number} maxLimit The maximum radius to another connection, in
-   *     workspace units.
-   * @return {!Array<!Connection>} List of connections.
-   * @package
+   * @param maxLimit The maximum radius to another connection, in workspace
+   *     units.
+   * @return List of connections.
+   * @internal
    */
-  neighbours(maxLimit) {
+  override neighbours(maxLimit: number): Connection[] {
     return this.dbOpposite_.getNeighbours(this, maxLimit);
   }
 
   /**
    * Connect two connections together.  This is the connection on the superior
    * block.  Rerender blocks as needed.
-   * @param {!Connection} childConnection Connection on inferior block.
-   * @protected
+   * @param childConnection Connection on inferior block.
    */
-  connect_(childConnection) {
+  protected override connect_(childConnection: Connection) {
     super.connect_(childConnection);
 
-    const renderedChildConnection = /** @type {!RenderedConnection} */
-        (childConnection);
+    const renderedChildConnection = childConnection as RenderedConnection;
 
     const parentConnection = this;
     const parentBlock = parentConnection.getSourceBlock();
@@ -551,38 +530,39 @@ class RenderedConnection extends Connection {
 
   /**
    * Function to be called when this connection's compatible types have changed.
-   * @protected
    */
-  onCheckChanged_() {
+  protected override onCheckChanged_() {
     // The new value type may not be compatible with the existing connection.
     if (this.isConnected() &&
         (!this.targetConnection ||
          !this.getConnectionChecker().canConnect(
              this, this.targetConnection, false))) {
       const child = this.isSuperior() ? this.targetBlock() : this.sourceBlock_;
-      child.unplug();
+      child!.unplug();
       // Bump away.
       this.sourceBlock_.bumpNeighbours();
     }
   }
 }
 
-/**
- * Enum for different kinds of tracked states.
- *
- * WILL_TRACK means that this connection will add itself to
- * the db on the next moveTo call it receives.
- *
- * UNTRACKED means that this connection will not add
- * itself to the database until setTracking(true) is explicitly called.
- *
- * TRACKED means that this connection is currently being tracked.
- * @enum {number}
- */
-RenderedConnection.TrackedState = {
-  WILL_TRACK: -1,
-  UNTRACKED: 0,
-  TRACKED: 1,
-};
+export namespace RenderedConnection {
+  /**
+   * Enum for different kinds of tracked states.
+   *
+   * WILL_TRACK means that this connection will add itself to
+   * the db on the next moveTo call it receives.
+   *
+   * UNTRACKED means that this connection will not add
+   * itself to the database until setTracking(true) is explicitly called.
+   *
+   * TRACKED means that this connection is currently being tracked.
+   */
+  export enum TrackedState {
+    WILL_TRACK = -1,
+    UNTRACKED = 0,
+    TRACKED = 1,
+  }
+}
 
-exports.RenderedConnection = RenderedConnection;
+export type TrackedState = RenderedConnection.TrackedState;
+export const TrackedState = RenderedConnection.TrackedState;