blockly 8.0.5 → 9.0.0-beta.0

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

@@ -8,126 +8,107 @@
  * @fileoverview Object representing a mutator dialog.  A mutator allows the
  * user to change the shape of a block using a nested blocks editor.
  */
-'use strict';
 
 /**
  * Object representing a mutator dialog.  A mutator allows the
  * user to change the shape of a block using a nested blocks editor.
  * @class
  */
-goog.module('Blockly.Mutator');
-
-const dom = goog.require('Blockly.utils.dom');
-const eventUtils = goog.require('Blockly.Events.utils');
-const toolbox = goog.require('Blockly.utils.toolbox');
-const xml = goog.require('Blockly.utils.xml');
-/* eslint-disable-next-line no-unused-vars */
-const {Abstract} = goog.requireType('Blockly.Events.Abstract');
-const {BlockChange} = goog.require('Blockly.Events.BlockChange');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {BlocklyOptions} = goog.requireType('Blockly.BlocklyOptions');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-const {Bubble} = goog.require('Blockly.Bubble');
-const {config} = goog.require('Blockly.config');
-/* eslint-disable-next-line no-unused-vars */
-const {Connection} = goog.requireType('Blockly.Connection');
-/* eslint-disable-next-line no-unused-vars */
-const {Coordinate} = goog.requireType('Blockly.utils.Coordinate');
-const {Icon} = goog.require('Blockly.Icon');
-const {Options} = goog.require('Blockly.Options');
-const {Svg} = goog.require('Blockly.utils.Svg');
-const {WorkspaceSvg} = goog.require('Blockly.WorkspaceSvg');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.BubbleOpen');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.Mutator');
+
+// Unused import preserved for side-effects. Remove if unneeded.
+import './events/events_bubble_open.js';
+
+import type {Block} from './block.js';
+import type {BlockSvg} from './block_svg.js';
+import type {BlocklyOptions} from './blockly_options.js';
+import {Bubble} from './bubble.js';
+import {config} from './config.js';
+import type {Connection} from './connection.js';
+import type {Abstract} from './events/events_abstract.js';
+import {BlockChange} from './events/events_block_change.js';
+import * as eventUtils from './events/utils.js';
+import {Icon} from './icon.js';
+import {Options} from './options.js';
+import type {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import {Svg} from './utils/svg.js';
+import * as toolbox from './utils/toolbox.js';
+import * as xml from './utils/xml.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
 
 
 /**
  * Class for a mutator dialog.
- * @extends {Icon}
  * @alias Blockly.Mutator
  */
-class Mutator extends Icon {
+export class Mutator extends Icon {
+  quarkNames_: AnyDuringMigration;
+
+  /** Workspace in the mutator's bubble. */
+  private workspace_: WorkspaceSvg|null = null;
+
+  /** Width of workspace. */
+  private workspaceWidth_ = 0;
+
+  /** Height of workspace. */
+  private workspaceHeight_ = 0;
+
   /**
-   * @param {!Array<string>} quarkNames List of names of sub-blocks for flyout.
+   * The SVG element that is the parent of the mutator workspace, or null if
+   * not created.
    */
-  constructor(quarkNames) {
-    super(null);
-    this.quarkNames_ = quarkNames;
+  private svgDialog_: SVGSVGElement|null = null;
+
+  /**
+   * The root block of the mutator workspace, created by decomposing the
+   * source block.
+   */
+  private rootBlock_: BlockSvg|null = null;
 
-    /**
-     * Workspace in the mutator's bubble.
-     * @type {?WorkspaceSvg}
-     * @private
-     */
-    this.workspace_ = null;
-
-    /**
-     * Width of workspace.
-     * @type {number}
-     * @private
-     */
-    this.workspaceWidth_ = 0;
-
-    /**
-     * Height of workspace.
-     * @type {number}
-     * @private
-     */
-    this.workspaceHeight_ = 0;
-
-    /**
-     * The SVG element that is the parent of the mutator workspace, or null if
-     * not created.
-     * @type {?SVGSVGElement}
-     * @private
-     */
-    this.svgDialog_ = null;
-
-    /**
-     * The root block of the mutator workspace, created by decomposing the
-     * source block.
-     * @type {?BlockSvg}
-     * @private
-     */
-    this.rootBlock_ = null;
-
-    /**
-     * Function registered on the main workspace to update the mutator contents
-     * when the main workspace changes.
-     * @type {?Function}
-     * @private
-     */
-    this.sourceListener_ = null;
+  /**
+   * Function registered on the main workspace to update the mutator contents
+   * when the main workspace changes.
+   */
+  private sourceListener_: Function|null = null;
+
+  /**
+   * The PID associated with the updateWorkpace_ timeout, or 0 if no timeout
+   * is currently running.
+   */
+  private updateWorkspacePid_: AnyDuringMigration = 0;
+
+  /** @param quarkNames List of names of sub-blocks for flyout. */
+  constructor(block: BlockSvg, quarkNames: string[]) {
+    super(block);
+    this.quarkNames_ = quarkNames;
   }
 
   /**
    * Set the block this mutator is associated with.
-   * @param {!BlockSvg} block The block associated with this mutator.
-   * @package
+   * @param block The block associated with this mutator.
+   * @internal
    */
-  setBlock(block) {
+  setBlock(block: BlockSvg) {
     this.block_ = block;
   }
 
   /**
    * Returns the workspace inside this mutator icon's bubble.
-   * @return {?WorkspaceSvg} The workspace inside this mutator icon's
-   *     bubble or null if the mutator isn't open.
-   * @package
+   * @return The workspace inside this mutator icon's bubble or null if the
+   *     mutator isn't open.
+   * @internal
    */
-  getWorkspace() {
+  getWorkspace(): WorkspaceSvg|null {
     return this.workspace_;
   }
 
   /**
    * Draw the mutator icon.
-   * @param {!Element} group The icon group.
-   * @protected
+   * @param group The icon group.
    */
-  drawIcon_(group) {
+  protected override drawIcon_(group: Element) {
     // Square with rounded corners.
     dom.createSvgElement(
         Svg.RECT, {
@@ -160,34 +141,31 @@ class Mutator extends Icon {
   /**
    * Clicking on the icon toggles if the mutator bubble is visible.
    * Disable if block is uneditable.
-   * @param {!Event} e Mouse click event.
-   * @protected
-   * @override
+   * @param e Mouse click event.
    */
-  iconClick_(e) {
+  protected override iconClick_(e: MouseEvent) {
     if (this.block_.isEditable()) {
-      Icon.prototype.iconClick_.call(this, e);
+      super.iconClick_(e);
     }
   }
 
   /**
    * Create the editor for the mutator's bubble.
-   * @return {!SVGElement} The top-level node of the editor.
-   * @private
+   * @return The top-level node of the editor.
    */
-  createEditor_() {
+  private createEditor_(): SVGElement {
     /* Create the editor.  Here's the markup that will be generated:
-    <svg>
-      [Workspace]
-    </svg>
-    */
+        <svg>
+          [Workspace]
+        </svg>
+        */
     this.svgDialog_ = dom.createSvgElement(
-        Svg.SVG, {'x': Bubble.BORDER_WIDTH, 'y': Bubble.BORDER_WIDTH}, null);
+        Svg.SVG, {'x': Bubble.BORDER_WIDTH, 'y': Bubble.BORDER_WIDTH});
     // Convert the list of names into a list of XML objects for the flyout.
     let quarkXml;
     if (this.quarkNames_.length) {
       quarkXml = xml.createElement('xml');
-      for (let i = 0, quarkName; (quarkName = this.quarkNames_[i]); i++) {
+      for (let i = 0, quarkName; quarkName = this.quarkNames_[i]; i++) {
         const element = xml.createElement('block');
         element.setAttribute('type', quarkName);
         quarkXml.appendChild(element);
@@ -195,27 +173,25 @@ class Mutator extends Icon {
     } else {
       quarkXml = null;
     }
-    const workspaceOptions = new Options(
-        /** @type {!BlocklyOptions} */
-        ({
-          // If you want to enable disabling, also remove the
-          // event filter from workspaceChanged_ .
-          'disable': false,
-          'parentWorkspace': this.block_.workspace,
-          'media': this.block_.workspace.options.pathToMedia,
-          'rtl': this.block_.RTL,
-          'horizontalLayout': false,
-          'renderer': this.block_.workspace.options.renderer,
-          'rendererOverrides': this.block_.workspace.options.rendererOverrides,
-        }));
+    const workspaceOptions = new Options(({
+      // If you want to enable disabling, also remove the
+      // event filter from workspaceChanged_ .
+      'disable': false,
+      'parentWorkspace': this.block_.workspace,
+      'media': this.block_.workspace.options.pathToMedia,
+      'rtl': this.block_.RTL,
+      'horizontalLayout': false,
+      'renderer': this.block_.workspace.options.renderer,
+      'rendererOverrides': this.block_.workspace.options.rendererOverrides,
+    } as BlocklyOptions));
     workspaceOptions.toolboxPosition =
         this.block_.RTL ? toolbox.Position.RIGHT : toolbox.Position.LEFT;
     const hasFlyout = !!quarkXml;
     if (hasFlyout) {
       workspaceOptions.languageTree = toolbox.convertToolboxDefToJson(quarkXml);
     }
-    this.workspace_ = new WorkspaceSvg(workspaceOptions);
-    this.workspace_.isMutator = true;
+    this.workspace_ = this.newWorkspaceSvg(workspaceOptions);
+    this.workspace_.internalIsMutator = true;
     this.workspace_.addChangeListener(eventUtils.disableOrphans);
 
     // Mutator flyouts go inside the mutator workspace's <g> rather than in
@@ -231,45 +207,48 @@ class Mutator extends Icon {
       // dragging work properly.
       background.insertBefore(flyoutSvg, this.workspace_.svgBlockCanvas_);
     }
-    this.svgDialog_.appendChild(background);
+    this.svgDialog_!.appendChild(background);
 
-    return this.svgDialog_;
+    // AnyDuringMigration because:  Type 'SVGSVGElement | null' is not
+    // assignable to type 'SVGElement'.
+    return this.svgDialog_ as AnyDuringMigration;
   }
 
   /**
-   * Add or remove the UI indicating if this icon may be clicked or not.
+   * @internal
    */
-  updateEditable() {
+  newWorkspaceSvg(options: Options): WorkspaceSvg {
+    throw new Error(
+        'The implementation of newWorkspaceSvg should be ' +
+        'monkey-patched in by blockly.ts');
+  }
+
+  /** Add or remove the UI indicating if this icon may be clicked or not. */
+  override updateEditable() {
     super.updateEditable();
     if (!this.block_.isInFlyout) {
       if (this.block_.isEditable()) {
         if (this.iconGroup_) {
           dom.removeClass(
-              /** @type {!Element} */ (this.iconGroup_),
-              'blocklyIconGroupReadonly');
+              this.iconGroup_ as Element, 'blocklyIconGroupReadonly');
         }
       } else {
         // Close any mutator bubble.  Icon is not clickable.
         this.setVisible(false);
         if (this.iconGroup_) {
-          dom.addClass(
-              /** @type {!Element} */ (this.iconGroup_),
-              'blocklyIconGroupReadonly');
+          dom.addClass(this.iconGroup_ as Element, 'blocklyIconGroupReadonly');
         }
       }
     }
   }
 
-  /**
-   * Resize the bubble to match the size of the workspace.
-   * @private
-   */
-  resizeBubble_() {
+  /** Resize the bubble to match the size of the workspace. */
+  private resizeBubble_() {
     const doubleBorderWidth = 2 * Bubble.BORDER_WIDTH;
-    const workspaceSize = this.workspace_.getCanvas().getBBox();
+    const workspaceSize = this.workspace_!.getCanvas().getBBox();
     let width = workspaceSize.width + workspaceSize.x;
     let height = workspaceSize.height + doubleBorderWidth * 3;
-    const flyout = this.workspace_.getFlyout();
+    const flyout = this.workspace_!.getFlyout();
     if (flyout) {
       const flyoutScrollMetrics =
           flyout.getWorkspace().getMetricsManager().getScrollMetrics();
@@ -288,27 +267,30 @@ class Mutator extends Icon {
       this.workspaceWidth_ = width;
       this.workspaceHeight_ = height;
       // Resize the bubble.
-      this.bubble_.setBubbleSize(
+      this.bubble_!.setBubbleSize(
           width + doubleBorderWidth, height + doubleBorderWidth);
-      this.svgDialog_.setAttribute('width', this.workspaceWidth_);
-      this.svgDialog_.setAttribute('height', this.workspaceHeight_);
-      this.workspace_.setCachedParentSvgSize(
+      // AnyDuringMigration because:  Argument of type 'number' is not
+      // assignable to parameter of type 'string'.
+      this.svgDialog_!.setAttribute(
+          'width', this.workspaceWidth_ as AnyDuringMigration);
+      // AnyDuringMigration because:  Argument of type 'number' is not
+      // assignable to parameter of type 'string'.
+      this.svgDialog_!.setAttribute(
+          'height', this.workspaceHeight_ as AnyDuringMigration);
+      this.workspace_!.setCachedParentSvgSize(
           this.workspaceWidth_, this.workspaceHeight_);
     }
 
     if (this.block_.RTL) {
       // Scroll the workspace to always left-align.
       const translation = 'translate(' + this.workspaceWidth_ + ',0)';
-      this.workspace_.getCanvas().setAttribute('transform', translation);
+      this.workspace_!.getCanvas().setAttribute('transform', translation);
     }
-    this.workspace_.resize();
+    this.workspace_!.resize();
   }
 
-  /**
-   * A method handler for when the bubble is moved.
-   * @private
-   */
-  onBubbleMove_() {
+  /** A method handler for when the bubble is moved. */
+  private onBubbleMove_() {
     if (this.workspace_) {
       this.workspace_.recordDragTargets();
     }
@@ -316,44 +298,44 @@ class Mutator extends Icon {
 
   /**
    * Show or hide the mutator bubble.
-   * @param {boolean} visible True if the bubble should be visible.
+   * @param visible True if the bubble should be visible.
    */
-  setVisible(visible) {
+  override setVisible(visible: boolean) {
     if (visible === this.isVisible()) {
       // No change.
       return;
     }
-    eventUtils.fire(new (eventUtils.get(eventUtils.BUBBLE_OPEN))(
-        this.block_, visible, 'mutator'));
+    eventUtils.fire(new (eventUtils.get(eventUtils.BUBBLE_OPEN))!
+                    (this.block_, visible, 'mutator'));
     if (visible) {
       // Create the bubble.
       this.bubble_ = new Bubble(
-          /** @type {!WorkspaceSvg} */ (this.block_.workspace),
-          this.createEditor_(), this.block_.pathObject.svgPath,
-          /** @type {!Coordinate} */ (this.iconXY_), null, null);
+          (this.block_.workspace as WorkspaceSvg), this.createEditor_(),
+          this.block_.pathObject.svgPath, (this.iconXY_ as Coordinate), null,
+          null);
       // Expose this mutator's block's ID on its top-level SVG group.
       this.bubble_.setSvgId(this.block_.id);
       this.bubble_.registerMoveEvent(this.onBubbleMove_.bind(this));
-      const tree = this.workspace_.options.languageTree;
-      const flyout = this.workspace_.getFlyout();
+      const tree = this.workspace_!.options.languageTree;
+      const flyout = this.workspace_!.getFlyout();
       if (tree) {
-        flyout.init(this.workspace_);
-        flyout.show(tree);
+        flyout!.init(this.workspace_!);
+        flyout!.show(tree);
       }
 
-      this.rootBlock_ = this.block_.decompose(this.workspace_);
-      const blocks = this.rootBlock_.getDescendants(false);
-      for (let i = 0, child; (child = blocks[i]); i++) {
+      this.rootBlock_ = this.block_!.decompose!(this.workspace_!)!;
+      const blocks = this.rootBlock_!.getDescendants(false);
+      for (let i = 0, child; child = blocks[i]; i++) {
         child.render();
       }
       // The root block should not be draggable or deletable.
-      this.rootBlock_.setMovable(false);
-      this.rootBlock_.setDeletable(false);
+      this.rootBlock_!.setMovable(false);
+      this.rootBlock_!.setDeletable(false);
       let margin;
       let x;
       if (flyout) {
         margin = flyout.CORNER_RADIUS * 2;
-        x = this.rootBlock_.RTL ? flyout.getWidth() + margin : margin;
+        x = this.rootBlock_!.RTL ? flyout.getWidth() + margin : margin;
       } else {
         margin = 16;
         x = margin;
@@ -361,13 +343,13 @@ class Mutator extends Icon {
       if (this.block_.RTL) {
         x = -x;
       }
-      this.rootBlock_.moveBy(x, margin);
+      this.rootBlock_!.moveBy(x, margin);
       // Save the initial connections, then listen for further changes.
       if (this.block_.saveConnections) {
         const thisRootBlock = this.rootBlock_;
         this.block_.saveConnections(thisRootBlock);
         this.sourceListener_ = () => {
-          if (this.block_) {
+          if (this.block_ && this.block_.saveConnections) {
             this.block_.saveConnections(thisRootBlock);
           }
         };
@@ -375,17 +357,17 @@ class Mutator extends Icon {
       }
       this.resizeBubble_();
       // When the mutator's workspace changes, update the source block.
-      this.workspace_.addChangeListener(this.workspaceChanged_.bind(this));
+      this.workspace_!.addChangeListener(this.workspaceChanged_.bind(this));
       // Update the source block immediately after the bubble becomes visible.
       this.updateWorkspace_();
       this.applyColour();
     } else {
       // Dispose of the bubble.
       this.svgDialog_ = null;
-      this.workspace_.dispose();
+      this.workspace_!.dispose();
       this.workspace_ = null;
       this.rootBlock_ = null;
-      this.bubble_.dispose();
+      this.bubble_?.dispose();
       this.bubble_ = null;
       this.workspaceWidth_ = 0;
       this.workspaceHeight_ = 0;
@@ -398,29 +380,39 @@ class Mutator extends Icon {
 
   /**
    * Fired whenever a change is made to the mutator's workspace.
-   * @param {!Abstract} e Custom data for event.
-   * @private
+   * @param e Custom data for event.
    */
-  workspaceChanged_(e) {
-    if (!(e.isUiEvent ||
-          (e.type === eventUtils.CHANGE &&
-           /** @type {!BlockChange} */ (e).element === 'disabled') ||
-          e.type === eventUtils.CREATE)) {
-      this.updateWorkspace_();
+  private workspaceChanged_(e: Abstract) {
+    if (!this.shouldIgnoreMutatorEvent_(e) && !this.updateWorkspacePid_) {
+      this.updateWorkspacePid_ = setTimeout(() => {
+        this.updateWorkspacePid_ = 0;
+        this.updateWorkspace_();
+      }, 0);
     }
   }
 
+  /**
+   * Returns whether the given event in the mutator workspace should be ignored
+   * when deciding whether to update the workspace and compose the block or not.
+   * @param e The event.
+   * @return Whether to ignore the event or not.
+   */
+  shouldIgnoreMutatorEvent_(e: Abstract) {
+    return e.isUiEvent || e.type === eventUtils.CREATE ||
+        e.type === eventUtils.CHANGE &&
+        (e as BlockChange).element === 'disabled';
+  }
+
   /**
    * Updates the source block when the mutator's blocks are changed.
    * Bump down any block that's too high.
-   * @private
    */
-  updateWorkspace_() {
-    if (!this.workspace_.isDragging()) {
-      const blocks = this.workspace_.getTopBlocks(false);
+  private updateWorkspace_() {
+    if (!this.workspace_!.isDragging()) {
+      const blocks = this.workspace_!.getTopBlocks(false);
       const MARGIN = 20;
 
-      for (let b = 0, block; (block = blocks[b]); b++) {
+      for (let b = 0, block; block = blocks[b]; b++) {
         const blockXY = block.getRelativeToSurfaceXY();
 
         // Bump any block that's above the top back inside.
@@ -430,7 +422,7 @@ class Mutator extends Icon {
         // Bump any block overlapping the flyout back inside.
         if (block.RTL) {
           let right = -MARGIN;
-          const flyout = this.workspace_.getFlyout();
+          const flyout = this.workspace_!.getFlyout();
           if (flyout) {
             right -= flyout.getWidth();
           }
@@ -444,12 +436,12 @@ class Mutator extends Icon {
     }
 
     // When the mutator's workspace changes, update the source block.
-    if (this.rootBlock_.workspace === this.workspace_) {
+    if (this.rootBlock_ && this.rootBlock_.workspace === this.workspace_) {
       const existingGroup = eventUtils.getGroup();
       if (!existingGroup) {
         eventUtils.setGroup(true);
       }
-      const block = /** @type {!BlockSvg} */ (this.block_);
+      const block = this.block_ as BlockSvg;
       const oldExtraState = BlockChange.getExtraBlockState_(block);
 
       // Switch off rendering while the source block is rebuilt.
@@ -458,7 +450,7 @@ class Mutator extends Icon {
       block.rendered = false;
 
       // Allow the source block to rebuild itself.
-      block.compose(this.rootBlock_);
+      block.compose!(this.rootBlock_);
       // Restore rendering and show the changes.
       block.rendered = savedRendered;
       // Mutation may have added some elements that need initializing.
@@ -470,7 +462,7 @@ class Mutator extends Icon {
 
       const newExtraState = BlockChange.getExtraBlockState_(block);
       if (oldExtraState !== newExtraState) {
-        eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CHANGE))(
+        eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CHANGE))!(
             block, 'mutation', null, oldExtraState, newExtraState));
         // Ensure that any bump is part of this mutation's event group.
         const mutationGroup = eventUtils.getGroup();
@@ -484,38 +476,33 @@ class Mutator extends Icon {
 
       // Don't update the bubble until the drag has ended, to avoid moving
       // blocks under the cursor.
-      if (!this.workspace_.isDragging()) {
-        this.resizeBubble_();
+      if (!this.workspace_!.isDragging()) {
+        setTimeout(() => this.resizeBubble_(), 0);
       }
       eventUtils.setGroup(existingGroup);
     }
   }
 
-  /**
-   * Dispose of this mutator.
-   */
-  dispose() {
+  /** Dispose of this mutator. */
+  override dispose() {
     this.block_.mutator = null;
-    Icon.prototype.dispose.call(this);
+    super.dispose();
   }
 
-  /**
-   * Update the styles on all blocks in the mutator.
-   * @public
-   */
+  /** Update the styles on all blocks in the mutator. */
   updateBlockStyle() {
     const ws = this.workspace_;
 
     if (ws && ws.getAllBlocks(false)) {
       const workspaceBlocks = ws.getAllBlocks(false);
-      for (let i = 0, block; (block = workspaceBlocks[i]); i++) {
+      for (let i = 0, block; block = workspaceBlocks[i]; i++) {
         block.setStyle(block.getStyleName());
       }
 
       const flyout = ws.getFlyout();
       if (flyout) {
-        const flyoutBlocks = flyout.workspace_.getAllBlocks(false);
-        for (let i = 0, block; (block = flyoutBlocks[i]); i++) {
+        const flyoutBlocks = flyout.getWorkspace().getAllBlocks(false);
+        for (let i = 0, block; block = flyoutBlocks[i]; i++) {
           block.setStyle(block.getStyleName());
         }
       }
@@ -524,18 +511,19 @@ class Mutator extends Icon {
 
   /**
    * Reconnect an block to a mutated input.
-   * @param {Connection} connectionChild Connection on child block.
-   * @param {!Block} block Parent block.
-   * @param {string} inputName Name of input on parent block.
-   * @return {boolean} True iff a reconnection was made, false otherwise.
+   * @param connectionChild Connection on child block.
+   * @param block Parent block.
+   * @param inputName Name of input on parent block.
+   * @return True iff a reconnection was made, false otherwise.
    */
-  static reconnect(connectionChild, block, inputName) {
+  static reconnect(
+      connectionChild: Connection, block: Block, inputName: string): boolean {
     if (!connectionChild || !connectionChild.getSourceBlock().workspace) {
       return false;  // No connection or block has been deleted.
     }
-    const connectionParent = block.getInput(inputName).connection;
+    const connectionParent = block.getInput(inputName)!.connection;
     const currentParent = connectionChild.targetBlock();
-    if ((!currentParent || currentParent === block) &&
+    if ((!currentParent || currentParent === block) && connectionParent &&
         connectionParent.targetConnection !== connectionChild) {
       if (connectionParent.isConnected()) {
         // There's already something connected here.  Get rid of it.
@@ -550,11 +538,10 @@ class Mutator extends Icon {
   /**
    * Get the parent workspace of a workspace that is inside a mutator, taking
    * into account whether it is a flyout.
-   * @param {WorkspaceSvg} workspace The workspace that is inside a mutator.
-   * @return {?WorkspaceSvg} The mutator's parent workspace or null.
-   * @public
+   * @param workspace The workspace that is inside a mutator.
+   * @return The mutator's parent workspace or null.
    */
-  static findParentWs(workspace) {
+  static findParentWs(workspace: WorkspaceSvg): WorkspaceSvg|null {
     let outerWs = null;
     if (workspace && workspace.options) {
       const parent = workspace.options.parentWorkspace;
@@ -571,5 +558,3 @@ class Mutator extends Icon {
     return outerWs;
   }
 }
-
-exports.Mutator = Mutator;