blockly 8.0.4-beta.0 → 8.0.5-beta.0

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

@@ -7,174 +7,114 @@
 /**
  * @fileoverview Object representing a code comment on a rendered workspace.
  */
-'use strict';
 
 /**
  * Object representing a code comment on a rendered workspace.
  * @class
  */
-goog.module('Blockly.WorkspaceCommentSvg');
-
-const ContextMenu = goog.require('Blockly.ContextMenu');
-const Css = goog.require('Blockly.Css');
-const Touch = goog.require('Blockly.Touch');
-const browserEvents = goog.require('Blockly.browserEvents');
-const common = goog.require('Blockly.common');
-const dom = goog.require('Blockly.utils.dom');
-const eventUtils = goog.require('Blockly.Events.utils');
-const svgMath = goog.require('Blockly.utils.svgMath');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockDragSurfaceSvg} = goog.requireType('Blockly.BlockDragSurfaceSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {CommentMove} = goog.require('Blockly.Events.CommentMove');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-/* eslint-disable-next-line no-unused-vars */
-const {IBoundedElement} = goog.require('Blockly.IBoundedElement');
-/* eslint-disable-next-line no-unused-vars */
-const {IBubble} = goog.require('Blockly.IBubble');
-/* eslint-disable-next-line no-unused-vars */
-const {ICopyable} = goog.require('Blockly.ICopyable');
-const {Rect} = goog.require('Blockly.utils.Rect');
-const {Svg} = goog.require('Blockly.utils.Svg');
-const {WorkspaceComment} = goog.require('Blockly.WorkspaceComment');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.CommentCreate');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.CommentDelete');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.Selected');
-
-
-/**
- * Size of the resize icon.
- * @type {number}
- * @const
- */
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.WorkspaceCommentSvg');
+
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './events/events_comment_create.js';
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './events/events_comment_delete.js';
+// Unused import preserved for side-effects. Remove if unneeded.
+import './events/events_selected.js';
+
+import type {BlockDragSurfaceSvg} from './block_drag_surface.js';
+import * as browserEvents from './browser_events.js';
+import * as common from './common.js';
+// import * as ContextMenu from './contextmenu.js';
+import * as Css from './css.js';
+import type {CommentMove} from './events/events_comment_move.js';
+import * as eventUtils from './events/utils.js';
+import type {IBoundedElement} from './interfaces/i_bounded_element.js';
+import type {IBubble} from './interfaces/i_bubble.js';
+import type {CopyData, ICopyable} from './interfaces/i_copyable.js';
+import * as Touch from './touch.js';
+import {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import {Rect} from './utils/rect.js';
+import {Svg} from './utils/svg.js';
+import * as svgMath from './utils/svg_math.js';
+import {WorkspaceComment} from './workspace_comment.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
+
+
+/** Size of the resize icon. */
 const RESIZE_SIZE = 8;
 
-/**
- * Radius of the border around the comment.
- * @type {number}
- * @const
- */
+/** Radius of the border around the comment. */
 const BORDER_RADIUS = 3;
 
-/**
- * Offset from the foreignobject edge to the textarea edge.
- * @type {number}
- * @const
- */
+/** Offset from the foreignobject edge to the textarea edge. */
 const TEXTAREA_OFFSET = 2;
 
 /**
  * Class for a workspace comment's SVG representation.
- * @extends {WorkspaceComment}
- * @implements {IBoundedElement}
- * @implements {IBubble}
- * @implements {ICopyable}
  * @alias Blockly.WorkspaceCommentSvg
  */
-class WorkspaceCommentSvg extends WorkspaceComment {
+export class WorkspaceCommentSvg extends WorkspaceComment implements
+    IBoundedElement, IBubble, ICopyable {
   /**
-   * @param {!WorkspaceSvg} workspace The block's workspace.
-   * @param {string} content The content of this workspace comment.
-   * @param {number} height Height of the comment.
-   * @param {number} width Width of the comment.
-   * @param {string=} opt_id Optional ID.  Use this ID if provided, otherwise
-   *     create a new ID.
+   * The width and height to use to size a workspace comment when it is first
+   * added, before it has been edited by the user.
+   * @internal
    */
-  constructor(workspace, content, height, width, opt_id) {
-    super(workspace, content, height, width, opt_id);
-    /**
-     * @type {!WorkspaceSvg}
-     */
-    this.workspace;
+  static DEFAULT_SIZE = 100;
 
-    /**
-     * Mouse up event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onMouseUpWrapper_ = null;
+  /** Offset from the top to make room for a top bar. */
+  private static readonly TOP_OFFSET = 10;
+  override workspace: WorkspaceSvg;
 
-    /**
-     * Mouse move event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onMouseMoveWrapper_ = null;
+  /** Mouse up event data. */
+  private onMouseUpWrapper_: browserEvents.Data|null = null;
 
-    /**
-     * Whether event handlers have been initialized.
-     * @type {boolean}
-     * @private
-     */
-    this.eventsInit_ = false;
+  /** Mouse move event data. */
+  private onMouseMoveWrapper_: browserEvents.Data|null = null;
 
-    /**
-     * @type {?Element}
-     * @private
-     */
-    this.textarea_ = null;
+  /** Whether event handlers have been initialized. */
+  private eventsInit_ = false;
+  private textarea_: HTMLTextAreaElement|null = null;
 
-    /**
-     * @type {?SVGRectElement}
-     * @private
-     */
-    this.svgRectTarget_ = null;
+  private svgRectTarget_: SVGRectElement|null = null;
 
-    /**
-     * @type {?SVGRectElement}
-     * @private
-     */
-    this.svgHandleTarget_ = null;
+  private svgHandleTarget_: SVGRectElement|null = null;
 
-    /**
-     * @type {?SVGForeignObjectElement}
-     * @private
-     */
-    this.foreignObject_ = null;
+  private foreignObject_: SVGForeignObjectElement|null = null;
 
-    /**
-     * @type {?SVGGElement}
-     * @private
-     */
-    this.resizeGroup_ = null;
+  private resizeGroup_: SVGGElement|null = null;
 
-    /**
-     * @type {?SVGGElement}
-     * @private
-     */
-    this.deleteGroup_ = null;
+  private deleteGroup_: SVGGElement|null = null;
 
-    /**
-     * @type {?SVGCircleElement}
-     * @private
-     */
-    this.deleteIconBorder_ = null;
+  private deleteIconBorder_: SVGCircleElement|null = null;
 
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this.focused_ = false;
+  private focused_ = false;
+  private autoLayout_ = false;
+  // Create core elements for the block.
+  private readonly svgGroup_: SVGElement;
+  svgRect_: AnyDuringMigration;
 
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this.autoLayout_ = false;
+  /** Whether the comment is rendered onscreen and is a part of the DOM. */
+  private rendered_ = false;
+  private readonly useDragSurface_: boolean;
 
-    // Create core elements for the block.
-    /**
-     * @type {!SVGElement}
-     * @private
-     */
-    this.svgGroup_ =
-        dom.createSvgElement(Svg.G, {'class': 'blocklyComment'}, null);
-    this.svgGroup_.translate_ = '';
+  /**
+   * @param workspace The block's workspace.
+   * @param content The content of this workspace comment.
+   * @param height Height of the comment.
+   * @param width Width of the comment.
+   * @param opt_id Optional ID.  Use this ID if provided, otherwise create a new
+   *     ID.
+   */
+  constructor(
+      workspace: WorkspaceSvg, content: string, height: number, width: number,
+      opt_id?: string) {
+    super(workspace, content, height, width, opt_id);
+    this.svgGroup_ = dom.createSvgElement(Svg.G, {'class': 'blocklyComment'});
+    (this.svgGroup_ as AnyDuringMigration).translate_ = '';
+    this.workspace = workspace;
 
     this.svgRect_ = dom.createSvgElement(Svg.RECT, {
       'class': 'blocklyCommentRect',
@@ -185,18 +125,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     });
     this.svgGroup_.appendChild(this.svgRect_);
 
-    /**
-     * Whether the comment is rendered onscreen and is a part of the DOM.
-     * @type {boolean}
-     * @private
-     */
-    this.rendered_ = false;
-
     /**
      * Whether to move the comment to the drag surface when it is dragged.
      * True if it should move, false if it should be translated directly.
-     * @type {boolean}
-     * @private
      */
     this.useDragSurface_ =
         svgMath.is3dSupported() && !!workspace.getBlockDragSurface();
@@ -206,9 +137,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Dispose of this comment.
-   * @package
+   * @internal
    */
-  dispose() {
+  override dispose() {
     if (this.disposed_) {
       return;
     }
@@ -219,7 +150,7 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     }
 
     if (eventUtils.isEnabled()) {
-      eventUtils.fire(new (eventUtils.get(eventUtils.COMMENT_DELETE))(this));
+      eventUtils.fire(new (eventUtils.get(eventUtils.COMMENT_DELETE))!(this));
     }
 
     dom.removeNode(this.svgGroup_);
@@ -235,22 +166,20 @@ class WorkspaceCommentSvg extends WorkspaceComment {
    * Create and initialize the SVG representation of a workspace comment.
    * May be called more than once.
    *
-   * @param {boolean=} opt_noSelect Text inside text area will be selected if
-   *     false
-   *
-   * @package
+   * @param opt_noSelect Text inside text area will be selected if false
+   * @internal
    */
-  initSvg(opt_noSelect) {
+  initSvg(opt_noSelect?: boolean) {
     if (!this.workspace.rendered) {
       throw TypeError('Workspace is headless.');
     }
     if (!this.workspace.options.readOnly && !this.eventsInit_) {
       browserEvents.conditionalBind(
-          /** @type {!SVGRectElement} */ (this.svgRectTarget_), 'mousedown',
-          this, this.pathMouseDown_);
+          this.svgRectTarget_ as SVGRectElement, 'mousedown', this,
+          this.pathMouseDown_);
       browserEvents.conditionalBind(
-          /** @type {!SVGRectElement} */ (this.svgHandleTarget_), 'mousedown',
-          this, this.pathMouseDown_);
+          this.svgHandleTarget_ as SVGRectElement, 'mousedown', this,
+          this.pathMouseDown_);
     }
     this.eventsInit_ = true;
 
@@ -266,10 +195,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Handle a mouse-down on an SVG comment.
-   * @param {!Event} e Mouse down event or touch start event.
-   * @private
+   * @param e Mouse down event or touch start event.
    */
-  pathMouseDown_(e) {
+  private pathMouseDown_(e: Event) {
     const gesture = this.workspace.getGesture(e);
     if (gesture) {
       gesture.handleBubbleStart(e, this);
@@ -278,28 +206,18 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Show the context menu for this workspace comment.
-   * @param {!Event} e Mouse event.
-   * @package
+   * @param e Mouse event.
+   * @internal
    */
-  showContextMenu(e) {
-    if (this.workspace.options.readOnly) {
-      return;
-    }
-    // Save the current workspace comment in a variable for use in closures.
-    const comment = this;
-    const menuOptions = [];
-
-    if (this.isDeletable() && this.isMovable()) {
-      menuOptions.push(ContextMenu.commentDuplicateOption(comment));
-      menuOptions.push(ContextMenu.commentDeleteOption(comment));
-    }
-
-    ContextMenu.show(e, menuOptions, this.RTL);
+  showContextMenu(e: Event) {
+    throw new Error(
+        'The implementation of showContextMenu should be ' +
+        'monkey-patched in by blockly.ts');
   }
 
   /**
    * Select this comment.  Highlight it visually.
-   * @package
+   * @internal
    */
   select() {
     if (common.getSelected() === this) {
@@ -307,17 +225,17 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     }
     let oldId = null;
     if (common.getSelected()) {
-      oldId = common.getSelected().id;
+      oldId = common.getSelected()!.id;
       // Unselect any previously selected block.
       eventUtils.disable();
       try {
-        common.getSelected().unselect();
+        common.getSelected()!.unselect();
       } finally {
         eventUtils.enable();
       }
     }
-    const event = new (eventUtils.get(eventUtils.SELECTED))(
-        oldId, this.id, this.workspace.id);
+    const event = new (eventUtils.get(eventUtils.SELECTED))!
+        (oldId, this.id, this.workspace.id);
     eventUtils.fire(event);
     common.setSelected(this);
     this.addSelect();
@@ -325,14 +243,14 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Unselect this comment.  Remove its highlighting.
-   * @package
+   * @internal
    */
   unselect() {
     if (common.getSelected() !== this) {
       return;
     }
-    const event = new (eventUtils.get(eventUtils.SELECTED))(
-        this.id, null, this.workspace.id);
+    const event = new (eventUtils.get(eventUtils.SELECTED))!
+        (this.id, null, this.workspace.id);
     eventUtils.fire(event);
     common.setSelected(null);
     this.removeSelect();
@@ -341,40 +259,36 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Select this comment.  Highlight it visually.
-   * @package
+   * @internal
    */
   addSelect() {
-    dom.addClass(
-        /** @type {!Element} */ (this.svgGroup_), 'blocklySelected');
+    dom.addClass(this.svgGroup_ as Element, 'blocklySelected');
     this.setFocus();
   }
 
   /**
    * Unselect this comment.  Remove its highlighting.
-   * @package
+   * @internal
    */
   removeSelect() {
-    dom.removeClass(
-        /** @type {!Element} */ (this.svgGroup_), 'blocklySelected');
+    dom.removeClass(this.svgGroup_ as Element, 'blocklySelected');
     this.blurFocus();
   }
 
   /**
    * Focus this comment.  Highlight it visually.
-   * @package
+   * @internal
    */
   addFocus() {
-    dom.addClass(
-        /** @type {!Element} */ (this.svgGroup_), 'blocklyFocused');
+    dom.addClass(this.svgGroup_ as Element, 'blocklyFocused');
   }
 
   /**
    * Unfocus this comment.  Remove its highlighting.
-   * @package
+   * @internal
    */
   removeFocus() {
-    dom.removeClass(
-        /** @type {!Element} */ (this.svgGroup_), 'blocklyFocused');
+    dom.removeClass(this.svgGroup_ as Element, 'blocklyFocused');
   }
 
   /**
@@ -383,36 +297,37 @@ class WorkspaceCommentSvg extends WorkspaceComment {
    * If the comment is on the workspace, (0, 0) is the origin of the workspace
    * coordinate system.
    * This does not change with workspace scale.
-   * @return {!Coordinate} Object with .x and .y properties in
-   *     workspace coordinates.
-   * @package
+   * @return Object with .x and .y properties in workspace coordinates.
+   * @internal
    */
-  getRelativeToSurfaceXY() {
+  getRelativeToSurfaceXY(): Coordinate {
     let x = 0;
     let y = 0;
 
     const dragSurfaceGroup = this.useDragSurface_ ?
-        this.workspace.getBlockDragSurface().getGroup() :
+        this.workspace.getBlockDragSurface()!.getGroup() :
         null;
 
     let element = this.getSvgRoot();
     if (element) {
       do {
         // Loop through this comment and every parent.
-        const xy = svgMath.getRelativeXY(/** @type {!Element} */ (element));
+        const xy = svgMath.getRelativeXY(element as Element);
         x += xy.x;
         y += xy.y;
         // If this element is the current element on the drag surface, include
         // the translation of the drag surface itself.
         if (this.useDragSurface_ &&
-            this.workspace.getBlockDragSurface().getCurrentBlock() ===
+            this.workspace.getBlockDragSurface()!.getCurrentBlock() ===
                 element) {
           const surfaceTranslation =
-              this.workspace.getBlockDragSurface().getSurfaceTranslation();
+              this.workspace.getBlockDragSurface()!.getSurfaceTranslation();
           x += surfaceTranslation.x;
           y += surfaceTranslation.y;
         }
-        element = element.parentNode;
+        // AnyDuringMigration because:  Type 'ParentNode | null' is not
+        // assignable to type 'SVGElement'.
+        element = element.parentNode as AnyDuringMigration;
       } while (element && element !== this.workspace.getBubbleCanvas() &&
                element !== dragSurfaceGroup);
     }
@@ -422,13 +337,13 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Move a comment by a relative offset.
-   * @param {number} dx Horizontal offset, in workspace units.
-   * @param {number} dy Vertical offset, in workspace units.
-   * @package
+   * @param dx Horizontal offset, in workspace units.
+   * @param dy Vertical offset, in workspace units.
+   * @internal
    */
-  moveBy(dx, dy) {
-    const event = /** @type {!CommentMove} */ (
-        new (eventUtils.get(eventUtils.COMMENT_MOVE))(this));
+  override moveBy(dx: number, dy: number) {
+    const event =
+        new (eventUtils.get(eventUtils.COMMENT_MOVE))!(this) as CommentMove;
     // TODO: Do I need to look up the relative to surface XY position here?
     const xy = this.getRelativeToSurfaceXY();
     this.translate(xy.x + dx, xy.y + dy);
@@ -441,11 +356,11 @@ class WorkspaceCommentSvg extends WorkspaceComment {
   /**
    * Transforms a comment by setting the translation on the transform attribute
    * of the block's SVG.
-   * @param {number} x The x coordinate of the translation in workspace units.
-   * @param {number} y The y coordinate of the translation in workspace units.
-   * @package
+   * @param x The x coordinate of the translation in workspace units.
+   * @param y The y coordinate of the translation in workspace units.
+   * @internal
    */
-  translate(x, y) {
+  translate(x: number, y: number) {
     this.xy_ = new Coordinate(x, y);
     this.getSvgRoot().setAttribute(
         'transform', 'translate(' + x + ',' + y + ')');
@@ -455,7 +370,7 @@ class WorkspaceCommentSvg extends WorkspaceComment {
    * Move this comment to its workspace's drag surface, accounting for
    * positioning.  Generally should be called at the same time as
    * setDragging(true).  Does nothing if useDragSurface_ is false.
-   * @package
+   * @internal
    */
   moveToDragSurface() {
     if (!this.useDragSurface_) {
@@ -467,47 +382,48 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     // This is in workspace coordinates.
     const xy = this.getRelativeToSurfaceXY();
     this.clearTransformAttributes_();
-    this.workspace.getBlockDragSurface().translateSurface(xy.x, xy.y);
+    this.workspace.getBlockDragSurface()!.translateSurface(xy.x, xy.y);
     // Execute the move on the top-level SVG component
-    this.workspace.getBlockDragSurface().setBlocksAndShow(this.getSvgRoot());
+    this.workspace.getBlockDragSurface()!.setBlocksAndShow(this.getSvgRoot());
   }
 
   /**
    * Move this comment during a drag, taking into account whether we are using a
    * drag surface to translate blocks.
-   * @param {BlockDragSurfaceSvg} dragSurface The surface that carries
-   *     rendered items during a drag, or null if no drag surface is in use.
-   * @param {!Coordinate} newLoc The location to translate to, in
-   *     workspace coordinates.
-   * @package
+   * @param dragSurface The surface that carries rendered items during a drag,
+   *     or null if no drag surface is in use.
+   * @param newLoc The location to translate to, in workspace coordinates.
+   * @internal
    */
-  moveDuringDrag(dragSurface, newLoc) {
+  moveDuringDrag(dragSurface: BlockDragSurfaceSvg, newLoc: Coordinate) {
     if (dragSurface) {
       dragSurface.translateSurface(newLoc.x, newLoc.y);
     } else {
-      this.svgGroup_.translate_ =
+      (this.svgGroup_ as AnyDuringMigration).translate_ =
           'translate(' + newLoc.x + ',' + newLoc.y + ')';
-      this.svgGroup_.setAttribute(
-          'transform', this.svgGroup_.translate_ + this.svgGroup_.skew_);
+      (this.svgGroup_ as AnyDuringMigration)
+          .setAttribute(
+              'transform',
+              (this.svgGroup_ as AnyDuringMigration).translate_ +
+                  (this.svgGroup_ as AnyDuringMigration).skew_);
     }
   }
 
   /**
    * Move the bubble group to the specified location in workspace coordinates.
-   * @param {number} x The x position to move to.
-   * @param {number} y The y position to move to.
-   * @package
+   * @param x The x position to move to.
+   * @param y The y position to move to.
+   * @internal
    */
-  moveTo(x, y) {
+  moveTo(x: number, y: number) {
     this.translate(x, y);
   }
 
   /**
    * Clear the comment of transform="..." attributes.
    * Used when the comment is switching from 3d to 2d transform or vice versa.
-   * @private
    */
-  clearTransformAttributes_() {
+  private clearTransformAttributes_() {
     this.getSvgRoot().removeAttribute('transform');
   }
 
@@ -515,10 +431,10 @@ class WorkspaceCommentSvg extends WorkspaceComment {
    * Returns the coordinates of a bounding box describing the dimensions of this
    * comment.
    * Coordinate system: workspace coordinates.
-   * @return {!Rect} Object with coordinates of the bounding box.
-   * @package
+   * @return Object with coordinates of the bounding box.
+   * @internal
    */
-  getBoundingRectangle() {
+  getBoundingRectangle(): Rect {
     const blockXY = this.getRelativeToSurfaceXY();
     const commentBounds = this.getHeightWidth();
     const top = blockXY.y;
@@ -541,33 +457,31 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Add or remove the UI indicating if this comment is movable or not.
-   * @package
+   * @internal
    */
   updateMovable() {
     if (this.isMovable()) {
-      dom.addClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggable');
+      dom.addClass(this.svgGroup_ as Element, 'blocklyDraggable');
     } else {
-      dom.removeClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggable');
+      dom.removeClass(this.svgGroup_ as Element, 'blocklyDraggable');
     }
   }
 
   /**
    * Set whether this comment is movable or not.
-   * @param {boolean} movable True if movable.
-   * @package
+   * @param movable True if movable.
+   * @internal
    */
-  setMovable(movable) {
+  override setMovable(movable: boolean) {
     super.setMovable(movable);
     this.updateMovable();
   }
 
   /**
    * Set whether this comment is editable or not.
-   * @param {boolean} editable True if editable.
+   * @param editable True if editable.
    */
-  setEditable(editable) {
+  override setEditable(editable: boolean) {
     super.setEditable(editable);
     if (this.textarea_) {
       this.textarea_.readOnly = !editable;
@@ -577,46 +491,44 @@ class WorkspaceCommentSvg extends WorkspaceComment {
   /**
    * Recursively adds or removes the dragging class to this node and its
    * children.
-   * @param {boolean} adding True if adding, false if removing.
-   * @package
+   * @param adding True if adding, false if removing.
+   * @internal
    */
-  setDragging(adding) {
+  setDragging(adding: boolean) {
     if (adding) {
       const group = this.getSvgRoot();
-      group.translate_ = '';
-      group.skew_ = '';
-      dom.addClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDragging');
+      (group as AnyDuringMigration).translate_ = '';
+      (group as AnyDuringMigration).skew_ = '';
+      dom.addClass(this.svgGroup_ as Element, 'blocklyDragging');
     } else {
-      dom.removeClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDragging');
+      dom.removeClass(this.svgGroup_ as Element, 'blocklyDragging');
     }
   }
 
   /**
    * Return the root node of the SVG or null if none exists.
-   * @return {!SVGElement} The root SVG node (probably a group).
-   * @package
+   * @return The root SVG node (probably a group).
+   * @internal
    */
-  getSvgRoot() {
+  getSvgRoot(): SVGElement {
     return this.svgGroup_;
   }
 
   /**
    * Returns this comment's text.
-   * @return {string} Comment text.
-   * @package
+   * @return Comment text.
+   * @internal
    */
-  getContent() {
+  override getContent(): string {
     return this.textarea_ ? this.textarea_.value : this.content_;
   }
 
   /**
    * Set this comment's content.
-   * @param {string} content Comment content.
-   * @package
+   * @param content Comment content.
+   * @internal
    */
-  setContent(content) {
+  override setContent(content: string) {
     super.setContent(content);
     if (this.textarea_) {
       this.textarea_.value = content;
@@ -625,17 +537,14 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Update the cursor over this comment by adding or removing a class.
-   * @param {boolean} enable True if the delete cursor should be shown, false
-   *     otherwise.
-   * @package
+   * @param enable True if the delete cursor should be shown, false otherwise.
+   * @internal
    */
-  setDeleteStyle(enable) {
+  setDeleteStyle(enable: boolean) {
     if (enable) {
-      dom.addClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggingDelete');
+      dom.addClass(this.svgGroup_ as Element, 'blocklyDraggingDelete');
     } else {
-      dom.removeClass(
-          /** @type {!Element} */ (this.svgGroup_), 'blocklyDraggingDelete');
+      dom.removeClass(this.svgGroup_ as Element, 'blocklyDraggingDelete');
     }
   }
 
@@ -643,42 +552,50 @@ class WorkspaceCommentSvg extends WorkspaceComment {
    * Set whether auto-layout of this bubble is enabled.  The first time a bubble
    * is shown it positions itself to not cover any blocks.  Once a user has
    * dragged it to reposition, it renders where the user put it.
-   * @param {boolean} _enable True if auto-layout should be enabled, false
-   *     otherwise.
-   * @package
+   * @param _enable True if auto-layout should be enabled, false otherwise.
+   * @internal
    */
-  setAutoLayout(_enable) {
-    // NOP for compatibility with the bubble dragger.
-  }
+  setAutoLayout(_enable: boolean) {}
+  // NOP for compatibility with the bubble dragger.
 
   /**
    * Encode a comment subtree as XML with XY coordinates.
-   * @param {boolean=} opt_noId True if the encoder should skip the comment ID.
-   * @return {!Element} Tree of XML elements.
-   * @package
+   * @param opt_noId True if the encoder should skip the comment ID.
+   * @return Tree of XML elements.
+   * @internal
    */
-  toXmlWithXY(opt_noId) {
-    let width;  // Not used in LTR.
+  override toXmlWithXY(opt_noId?: boolean): Element {
+    let width = 0;  // Not used in LTR.
     if (this.workspace.RTL) {
       // Here be performance dragons: This calls getMetrics().
       width = this.workspace.getWidth();
     }
     const element = this.toXml(opt_noId);
     const xy = this.getRelativeToSurfaceXY();
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
     element.setAttribute(
-        'x', Math.round(this.workspace.RTL ? width - xy.x : xy.x));
-    element.setAttribute('y', Math.round(xy.y));
-    element.setAttribute('h', this.getHeight());
-    element.setAttribute('w', this.getWidth());
+        'x',
+        Math.round(this.workspace.RTL ? width - xy.x : xy.x) as
+            AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    element.setAttribute('y', Math.round(xy.y) as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    element.setAttribute('h', this.getHeight() as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    element.setAttribute('w', this.getWidth() as AnyDuringMigration);
     return element;
   }
 
   /**
    * Encode a comment for copying.
-   * @return {!ICopyable.CopyData} Copy metadata.
-   * @package
+   * @return Copy metadata.
+   * @internal
    */
-  toCopyData() {
+  toCopyData(): CopyData {
     return {
       saveInfo: this.toXmlWithXY(),
       source: this.workspace,
@@ -688,17 +605,16 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Returns a bounding box describing the dimensions of this comment.
-   * @return {!{height: number, width: number}} Object with height and width
-   *     properties in workspace units.
-   * @package
+   * @return Object with height and width properties in workspace units.
+   * @internal
    */
-  getHeightWidth() {
+  getHeightWidth(): {height: number, width: number} {
     return {width: this.getWidth(), height: this.getHeight()};
   }
 
   /**
    * Renders the workspace comment.
-   * @package
+   * @internal
    */
   render() {
     if (this.rendered_) {
@@ -709,11 +625,15 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
     // Add text area
     this.createEditor_();
-    this.svgGroup_.appendChild(this.foreignObject_);
+    // AnyDuringMigration because:  Argument of type 'SVGForeignObjectElement |
+    // null' is not assignable to parameter of type 'Node'.
+    this.svgGroup_.appendChild(this.foreignObject_ as AnyDuringMigration);
 
     this.svgHandleTarget_ = dom.createSvgElement(
         Svg.RECT, {'class': 'blocklyCommentHandleTarget', 'x': 0, 'y': 0});
-    this.svgGroup_.appendChild(this.svgHandleTarget_);
+    // AnyDuringMigration because:  Argument of type 'SVGRectElement | null' is
+    // not assignable to parameter of type 'Node'.
+    this.svgGroup_.appendChild(this.svgHandleTarget_ as AnyDuringMigration);
     this.svgRectTarget_ = dom.createSvgElement(Svg.RECT, {
       'class': 'blocklyCommentTarget',
       'x': 0,
@@ -721,7 +641,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
       'rx': BORDER_RADIUS,
       'ry': BORDER_RADIUS,
     });
-    this.svgGroup_.appendChild(this.svgRectTarget_);
+    // AnyDuringMigration because:  Argument of type 'SVGRectElement | null' is
+    // not assignable to parameter of type 'Node'.
+    this.svgGroup_.appendChild(this.svgRectTarget_ as AnyDuringMigration);
 
     // Add the resize icon
     this.addResizeDom_();
@@ -733,91 +655,90 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     this.setSize_(size.width, size.height);
 
     // Set the content
-    this.textarea_.value = this.content_;
+    this.textarea_!.value = this.content_;
 
     this.rendered_ = true;
 
     if (this.resizeGroup_) {
       browserEvents.conditionalBind(
-          /** @type {!SVGGElement} */ (this.resizeGroup_), 'mousedown', this,
-          this.resizeMouseDown_);
+          (this.resizeGroup_), 'mousedown', this, this.resizeMouseDown_);
     }
 
     if (this.isDeletable()) {
       browserEvents.conditionalBind(
-          /** @type {!SVGGElement} */ (this.deleteGroup_), 'mousedown', this,
+          this.deleteGroup_ as SVGGElement, 'mousedown', this,
           this.deleteMouseDown_);
       browserEvents.conditionalBind(
-          /** @type {!SVGGElement} */ (this.deleteGroup_), 'mouseout', this,
+          this.deleteGroup_ as SVGGElement, 'mouseout', this,
           this.deleteMouseOut_);
       browserEvents.conditionalBind(
-          /** @type {!SVGGElement} */ (this.deleteGroup_), 'mouseup', this,
+          this.deleteGroup_ as SVGGElement, 'mouseup', this,
           this.deleteMouseUp_);
     }
   }
 
   /**
    * Create the text area for the comment.
-   * @return {!Element} The top-level node of the editor.
-   * @private
+   * @return The top-level node of the editor.
    */
-  createEditor_() {
+  private createEditor_(): Element {
     /* Create the editor.  Here's the markup that will be generated:
-      <foreignObject class="blocklyCommentForeignObject" x="0" y="10"
-      width="164" height="164"> <body xmlns="http://www.w3.org/1999/xhtml"
-      class="blocklyMinimalBody"> <textarea xmlns="http://www.w3.org/1999/xhtml"
-              class="blocklyCommentTextarea"
-              style="height: 164px; width: 164px;"></textarea>
-        </body>
-      </foreignObject>
-    */
-    this.foreignObject_ = dom.createSvgElement(
-        Svg.FOREIGNOBJECT, {
-          'x': 0,
-          'y': WorkspaceCommentSvg.TOP_OFFSET,
-          'class': 'blocklyCommentForeignObject',
-        },
-        null);
+          <foreignObject class="blocklyCommentForeignObject" x="0" y="10"
+          width="164" height="164"> <body xmlns="http://www.w3.org/1999/xhtml"
+          class="blocklyMinimalBody"> <textarea
+       xmlns="http://www.w3.org/1999/xhtml" class="blocklyCommentTextarea"
+                  style="height: 164px; width: 164px;"></textarea>
+            </body>
+          </foreignObject>
+        */
+    this.foreignObject_ = dom.createSvgElement(Svg.FOREIGNOBJECT, {
+      'x': 0,
+      'y': WorkspaceCommentSvg.TOP_OFFSET,
+      'class': 'blocklyCommentForeignObject',
+    });
     const body = document.createElementNS(dom.HTML_NS, 'body');
     body.setAttribute('xmlns', dom.HTML_NS);
     body.className = 'blocklyMinimalBody';
-    const textarea = document.createElementNS(dom.HTML_NS, 'textarea');
+    const textarea = document.createElementNS(dom.HTML_NS, 'textarea') as
+        HTMLTextAreaElement;
     textarea.className = 'blocklyCommentTextarea';
     textarea.setAttribute('dir', this.RTL ? 'RTL' : 'LTR');
     textarea.readOnly = !this.isEditable();
     body.appendChild(textarea);
     this.textarea_ = textarea;
-    this.foreignObject_.appendChild(body);
+    this.foreignObject_!.appendChild(body);
     // Don't zoom with mousewheel.
-    browserEvents.conditionalBind(textarea, 'wheel', this, function(e) {
-      e.stopPropagation();
-    });
+    browserEvents.conditionalBind(
+        textarea, 'wheel', this, function(e: AnyDuringMigration) {
+          e.stopPropagation();
+        });
     browserEvents.conditionalBind(
         textarea, 'change', this,
-        /**
-         * @this {WorkspaceCommentSvg}
-         * @param {Event} e Unused event parameter
-         */
+        /** @param e Unused event parameter */
+        /* eslint-enable no-unused-vars */
         function(
-            /* eslint-disable no-unused-vars */ e
-            /* eslint-enable no-unused-vars */) {
+            this: WorkspaceCommentSvg,
+            /* eslint-disable no-unused-vars */ e: Event) {
           this.setContent(textarea.value);
         });
-    return this.foreignObject_;
+    // AnyDuringMigration because:  Type 'SVGForeignObjectElement | null' is not
+    // assignable to type 'Element'.
+    return this.foreignObject_ as AnyDuringMigration;
   }
 
-  /**
-   * Add the resize icon to the DOM
-   * @private
-   */
-  addResizeDom_() {
+  /** Add the resize icon to the DOM */
+  private addResizeDom_() {
     this.resizeGroup_ = dom.createSvgElement(
         Svg.G, {'class': this.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE'},
         this.svgGroup_);
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     dom.createSvgElement(
         Svg.POLYGON,
         {'points': '0,x x,x x,0'.replace(/x/g, RESIZE_SIZE.toString())},
-        this.resizeGroup_);
+        this.resizeGroup_ as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     dom.createSvgElement(
         Svg.LINE, {
           'class': 'blocklyResizeLine',
@@ -826,7 +747,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
           'x2': RESIZE_SIZE - 1,
           'y2': RESIZE_SIZE / 3,
         },
-        this.resizeGroup_);
+        this.resizeGroup_ as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     dom.createSvgElement(
         Svg.LINE, {
           'class': 'blocklyResizeLine',
@@ -835,21 +758,22 @@ class WorkspaceCommentSvg extends WorkspaceComment {
           'x2': RESIZE_SIZE - 1,
           'y2': RESIZE_SIZE * 2 / 3,
         },
-        this.resizeGroup_);
+        this.resizeGroup_ as AnyDuringMigration);
   }
 
-  /**
-   * Add the delete icon to the DOM
-   * @private
-   */
-  addDeleteDom_() {
+  /** Add the delete icon to the DOM */
+  private addDeleteDom_() {
     this.deleteGroup_ = dom.createSvgElement(
         Svg.G, {'class': 'blocklyCommentDeleteIcon'}, this.svgGroup_);
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     this.deleteIconBorder_ = dom.createSvgElement(
         Svg.CIRCLE,
         {'class': 'blocklyDeleteIconShape', 'r': '7', 'cx': '7.5', 'cy': '7.5'},
-        this.deleteGroup_);
+        this.deleteGroup_ as AnyDuringMigration);
     // x icon.
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     dom.createSvgElement(
         Svg.LINE, {
           'x1': '5',
@@ -859,7 +783,9 @@ class WorkspaceCommentSvg extends WorkspaceComment {
           'stroke': '#fff',
           'stroke-width': '2',
         },
-        this.deleteGroup_);
+        this.deleteGroup_ as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
+    // assignable to parameter of type 'Element | undefined'.
     dom.createSvgElement(
         Svg.LINE, {
           'x1': '5',
@@ -869,15 +795,14 @@ class WorkspaceCommentSvg extends WorkspaceComment {
           'stroke': '#fff',
           'stroke-width': '2',
         },
-        this.deleteGroup_);
+        this.deleteGroup_ as AnyDuringMigration);
   }
 
   /**
    * Handle a mouse-down on comment's resize corner.
-   * @param {!Event} e Mouse down event.
-   * @private
+   * @param e Mouse down event.
    */
-  resizeMouseDown_(e) {
+  private resizeMouseDown_(e: MouseEvent) {
     this.unbindDragEvents_();
     if (browserEvents.isRightButton(e)) {
       // No right-click.
@@ -901,47 +826,39 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Handle a mouse-down on comment's delete icon.
-   * @param {!Event} e Mouse down event.
-   * @private
+   * @param e Mouse down event.
    */
-  deleteMouseDown_(e) {
+  private deleteMouseDown_(e: Event) {
     // Highlight the delete icon.
     dom.addClass(
-        /** @type {!Element} */ (this.deleteIconBorder_),
-        'blocklyDeleteIconHighlighted');
+        this.deleteIconBorder_ as Element, 'blocklyDeleteIconHighlighted');
     // This event has been handled.  No need to bubble up to the document.
     e.stopPropagation();
   }
 
   /**
    * Handle a mouse-out on comment's delete icon.
-   * @param {!Event} _e Mouse out event.
-   * @private
+   * @param _e Mouse out event.
    */
-  deleteMouseOut_(_e) {
+  private deleteMouseOut_(_e: Event) {
     // Restore highlight on the delete icon.
     dom.removeClass(
-        /** @type {!Element} */ (this.deleteIconBorder_),
-        'blocklyDeleteIconHighlighted');
+        this.deleteIconBorder_ as Element, 'blocklyDeleteIconHighlighted');
   }
 
   /**
    * Handle a mouse-up on comment's delete icon.
-   * @param {!Event} e Mouse up event.
-   * @private
+   * @param e Mouse up event.
    */
-  deleteMouseUp_(e) {
+  private deleteMouseUp_(e: Event) {
     // Delete this comment.
     this.dispose();
     // This event has been handled.  No need to bubble up to the document.
     e.stopPropagation();
   }
 
-  /**
-   * Stop binding to the global mouseup and mousemove events.
-   * @private
-   */
-  unbindDragEvents_() {
+  /** Stop binding to the global mouseup and mousemove events. */
+  private unbindDragEvents_() {
     if (this.onMouseUpWrapper_) {
       browserEvents.unbind(this.onMouseUpWrapper_);
       this.onMouseUpWrapper_ = null;
@@ -954,20 +871,18 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Handle a mouse-up event while dragging a comment's border or resize handle.
-   * @param {!Event} _e Mouse up event.
-   * @private
+   * @param _e Mouse up event.
    */
-  resizeMouseUp_(_e) {
+  private resizeMouseUp_(_e: Event) {
     Touch.clearTouchIdentifier();
     this.unbindDragEvents_();
   }
 
   /**
    * Resize this comment to follow the mouse.
-   * @param {!Event} e Mouse move event.
-   * @private
+   * @param e Mouse move event.
    */
-  resizeMouseMove_(e) {
+  private resizeMouseMove_(e: MouseEvent) {
     this.autoLayout_ = false;
     const newXY = this.workspace.moveDrag(e);
     this.setSize_(this.RTL ? -newXY.x : newXY.x, newXY.y);
@@ -976,29 +891,31 @@ class WorkspaceCommentSvg extends WorkspaceComment {
   /**
    * Callback function triggered when the comment has resized.
    * Resize the text area accordingly.
-   * @private
    */
-  resizeComment_() {
+  private resizeComment_() {
     const size = this.getHeightWidth();
     const topOffset = WorkspaceCommentSvg.TOP_OFFSET;
     const textOffset = TEXTAREA_OFFSET * 2;
 
-    this.foreignObject_.setAttribute('width', size.width);
-    this.foreignObject_.setAttribute('height', size.height - topOffset);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.foreignObject_!.setAttribute(
+        'width', size.width as AnyDuringMigration);
+    this.foreignObject_!.setAttribute(
+        'height', (size.height - topOffset).toString());
     if (this.RTL) {
-      this.foreignObject_.setAttribute('x', -size.width);
+      this.foreignObject_!.setAttribute('x', (-size.width).toString());
     }
-    this.textarea_.style.width = (size.width - textOffset) + 'px';
-    this.textarea_.style.height = (size.height - textOffset - topOffset) + 'px';
+    this.textarea_!.style.width = size.width - textOffset + 'px';
+    this.textarea_!.style.height = size.height - textOffset - topOffset + 'px';
   }
 
   /**
    * Set size
-   * @param {number} width width of the container
-   * @param {number} height height of the container
-   * @private
+   * @param width width of the container
+   * @param height height of the container
    */
-  setSize_(width, height) {
+  private setSize_(width: number, height: number) {
     // Minimum size of a comment.
     width = Math.max(width, 45);
     height = Math.max(height, 20 + WorkspaceCommentSvg.TOP_OFFSET);
@@ -1006,14 +923,22 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     this.height_ = height;
     this.svgRect_.setAttribute('width', width);
     this.svgRect_.setAttribute('height', height);
-    this.svgRectTarget_.setAttribute('width', width);
-    this.svgRectTarget_.setAttribute('height', height);
-    this.svgHandleTarget_.setAttribute('width', width);
-    this.svgHandleTarget_.setAttribute(
-        'height', WorkspaceCommentSvg.TOP_OFFSET);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.svgRectTarget_!.setAttribute('width', width as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.svgRectTarget_!.setAttribute('height', height as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.svgHandleTarget_!.setAttribute('width', width as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.svgHandleTarget_!.setAttribute(
+        'height', WorkspaceCommentSvg.TOP_OFFSET as AnyDuringMigration);
     if (this.RTL) {
       this.svgRect_.setAttribute('transform', 'scale(-1 1)');
-      this.svgRectTarget_.setAttribute('transform', 'scale(-1 1)');
+      this.svgRectTarget_!.setAttribute('transform', 'scale(-1 1)');
     }
 
     if (this.resizeGroup_) {
@@ -1023,18 +948,18 @@ class WorkspaceCommentSvg extends WorkspaceComment {
             'transform',
             'translate(' + (-width + RESIZE_SIZE) + ',' +
                 (height - RESIZE_SIZE) + ') scale(-1 1)');
-        this.deleteGroup_.setAttribute(
+        this.deleteGroup_!.setAttribute(
             'transform',
-            'translate(' + (-width + RESIZE_SIZE) + ',' + (-RESIZE_SIZE) +
+            'translate(' + (-width + RESIZE_SIZE) + ',' + -RESIZE_SIZE +
                 ') scale(-1 1)');
       } else {
         this.resizeGroup_.setAttribute(
             'transform',
             'translate(' + (width - RESIZE_SIZE) + ',' +
                 (height - RESIZE_SIZE) + ')');
-        this.deleteGroup_.setAttribute(
+        this.deleteGroup_!.setAttribute(
             'transform',
-            'translate(' + (width - RESIZE_SIZE) + ',' + (-RESIZE_SIZE) + ')');
+            'translate(' + (width - RESIZE_SIZE) + ',' + -RESIZE_SIZE + ')');
       }
     }
 
@@ -1042,11 +967,8 @@ class WorkspaceCommentSvg extends WorkspaceComment {
     this.resizeComment_();
   }
 
-  /**
-   * Dispose of any rendered comment components.
-   * @private
-   */
-  disposeInternal_() {
+  /** Dispose of any rendered comment components. */
+  private disposeInternal_() {
     this.textarea_ = null;
     this.foreignObject_ = null;
     this.svgRectTarget_ = null;
@@ -1056,7 +978,7 @@ class WorkspaceCommentSvg extends WorkspaceComment {
 
   /**
    * Set the focus on the text area.
-   * @package
+   * @internal
    */
   setFocus() {
     const comment = this;
@@ -1066,20 +988,20 @@ class WorkspaceCommentSvg extends WorkspaceComment {
       if (comment.disposed_) {
         return;
       }
-      comment.textarea_.focus();
+      comment.textarea_!.focus();
       comment.addFocus();
       dom.addClass(
-          /** @type {!SVGRectElement} */ (comment.svgRectTarget_),
+          comment.svgRectTarget_ as SVGRectElement,
           'blocklyCommentTargetFocused');
       dom.addClass(
-          /** @type {!SVGRectElement} */ (comment.svgHandleTarget_),
+          comment.svgHandleTarget_ as SVGRectElement,
           'blocklyCommentHandleTargetFocused');
     }, 0);
   }
 
   /**
    * Remove focus from the text area.
-   * @package
+   * @internal
    */
   blurFocus() {
     const comment = this;
@@ -1090,27 +1012,29 @@ class WorkspaceCommentSvg extends WorkspaceComment {
         return;
       }
 
-      comment.textarea_.blur();
+      comment.textarea_!.blur();
       comment.removeFocus();
       dom.removeClass(
-          /** @type {!SVGRectElement} */ (comment.svgRectTarget_),
+          comment.svgRectTarget_ as SVGRectElement,
           'blocklyCommentTargetFocused');
       dom.removeClass(
-          /** @type {!SVGRectElement} */ (comment.svgHandleTarget_),
+          comment.svgHandleTarget_ as SVGRectElement,
           'blocklyCommentHandleTargetFocused');
     }, 0);
   }
 
   /**
    * Decode an XML comment tag and create a rendered comment on the workspace.
-   * @param {!Element} xmlComment XML comment element.
-   * @param {!WorkspaceSvg} workspace The workspace.
-   * @param {number=} opt_wsWidth The width of the workspace, which is used to
-   *     position comments correctly in RTL.
-   * @return {!WorkspaceCommentSvg} The created workspace comment.
-   * @package
+   * @param xmlComment XML comment element.
+   * @param workspace The workspace.
+   * @param opt_wsWidth The width of the workspace, which is used to position
+   *     comments correctly in RTL.
+   * @return The created workspace comment.
+   * @internal
    */
-  static fromXmlRendered(xmlComment, workspace, opt_wsWidth) {
+  static fromXmlRendered(
+      xmlComment: Element, workspace: WorkspaceSvg,
+      opt_wsWidth?: number): WorkspaceCommentSvg {
     eventUtils.disable();
     let comment;
     try {
@@ -1136,31 +1060,12 @@ class WorkspaceCommentSvg extends WorkspaceComment {
       eventUtils.enable();
     }
 
-    WorkspaceComment.fireCreateEvent(
-        /** @type {!WorkspaceCommentSvg} */ (comment));
-    return (/** @type {!WorkspaceCommentSvg} */ (comment));
+    WorkspaceComment.fireCreateEvent((comment));
+    return comment;
   }
 }
 
-/**
- * The width and height to use to size a workspace comment when it is first
- * added, before it has been edited by the user.
- * @type {number}
- * @package
- */
-WorkspaceCommentSvg.DEFAULT_SIZE = 100;
-
-/**
- * Offset from the top to make room for a top bar.
- * @type {number}
- * @const
- * @private
- */
-WorkspaceCommentSvg.TOP_OFFSET = 10;
-
-/**
- * CSS for workspace comment.  See css.js for use.
- */
+/** CSS for workspace comment.  See css.js for use. */
 Css.register(`
 .blocklyCommentForeignObject {
   position: relative;
@@ -1220,5 +1125,3 @@ Css.register(`
   stroke: #fc3;
 }
 `);
-
-exports.WorkspaceCommentSvg = WorkspaceCommentSvg;