blockly 8.0.4 → 8.0.5-beta.0

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

@@ -8,208 +8,234 @@
  * @fileoverview An object that provides constants for rendering blocks in Zelos
  * mode.
  */
-'use strict';
 
 /**
  * An object that provides constants for rendering blocks in Zelos
  * mode.
  * @class
  */
-goog.module('Blockly.zelos.ConstantProvider');
-
-const dom = goog.require('Blockly.utils.dom');
-const svgPaths = goog.require('Blockly.utils.svgPaths');
-const utilsColour = goog.require('Blockly.utils.colour');
-const {ConnectionType} = goog.require('Blockly.ConnectionType');
-const {ConstantProvider: BaseConstantProvider} = goog.require('Blockly.blockRendering.ConstantProvider');
-const {Svg} = goog.require('Blockly.utils.Svg');
-
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.ConstantProvider');
+
+import {ConnectionType} from '../../connection_type.js';
+import type {RenderedConnection} from '../../rendered_connection.js';
+import type {Theme} from '../../theme.js';
+import * as utilsColour from '../../utils/colour.js';
+import * as dom from '../../utils/dom.js';
+import {Svg} from '../../utils/svg.js';
+import * as svgPaths from '../../utils/svg_paths.js';
+import {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
+import type {Shape} from '../common/constants.js';
+
+
+/** An object containing sizing and path information about inside corners. */
+export interface InsideCorners {
+  width: number;
+  height: number;
+  pathTop: string;
+  pathBottom: string;
+  rightWidth: number;
+  rightHeight: number;
+  pathTopRight: string;
+  pathBottomRight: string;
+}
 
 /**
  * An object that provides constants for rendering blocks in Zelos mode.
- * @extends {BaseConstantProvider}
  * @alias Blockly.zelos.ConstantProvider
  */
-class ConstantProvider extends BaseConstantProvider {
+export class ConstantProvider extends BaseConstantProvider {
+  GRID_UNIT = 4;
+  override SMALL_PADDING: AnyDuringMigration;
+  override MEDIUM_PADDING: AnyDuringMigration;
+  override MEDIUM_LARGE_PADDING: AnyDuringMigration;
+  override LARGE_PADDING: AnyDuringMigration;
+  override CORNER_RADIUS: AnyDuringMigration;
+  override NOTCH_WIDTH: AnyDuringMigration;
+  override NOTCH_HEIGHT: AnyDuringMigration;
+  override NOTCH_OFFSET_LEFT: AnyDuringMigration;
+  override STATEMENT_INPUT_NOTCH_OFFSET: AnyDuringMigration;
+  override MIN_BLOCK_WIDTH: AnyDuringMigration;
+  override MIN_BLOCK_HEIGHT: AnyDuringMigration;
+  override EMPTY_STATEMENT_INPUT_HEIGHT: AnyDuringMigration;
+
+  override TAB_OFFSET_FROM_TOP = 0;
+  override TOP_ROW_MIN_HEIGHT: AnyDuringMigration;
+  override TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT: AnyDuringMigration;
+  override BOTTOM_ROW_MIN_HEIGHT: AnyDuringMigration;
+  override BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT: AnyDuringMigration;
+  override STATEMENT_BOTTOM_SPACER: AnyDuringMigration;
+  STATEMENT_INPUT_SPACER_MIN_WIDTH: number;
+  override STATEMENT_INPUT_PADDING_LEFT: AnyDuringMigration;
+  override EMPTY_INLINE_INPUT_PADDING: AnyDuringMigration;
+  override EMPTY_INLINE_INPUT_HEIGHT: AnyDuringMigration;
+  override DUMMY_INPUT_MIN_HEIGHT: AnyDuringMigration;
+  override DUMMY_INPUT_SHADOW_MIN_HEIGHT: AnyDuringMigration;
+  override CURSOR_WS_WIDTH: AnyDuringMigration;
+
+  override CURSOR_COLOUR = '#ffa200';
+
+  /**
+   * Radius of the cursor for input and output connections.
+   * @internal
+   */
+  CURSOR_RADIUS = 5;
+
+  override JAGGED_TEETH_HEIGHT = 0;
+
+  override JAGGED_TEETH_WIDTH = 0;
+  override START_HAT_HEIGHT = 22;
+
+  override START_HAT_WIDTH = 96;
+
+  override SHAPES = {HEXAGONAL: 1, ROUND: 2, SQUARE: 3, PUZZLE: 4, NOTCH: 5};
+  SHAPE_IN_SHAPE_PADDING: AnyDuringMigration;
+
+  override FULL_BLOCK_FIELDS = true;
+  override FIELD_TEXT_FONTSIZE: AnyDuringMigration;
+
+  override FIELD_TEXT_FONTWEIGHT = 'bold';
+
+  override FIELD_TEXT_FONTFAMILY =
+      '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';
+  override FIELD_BORDER_RECT_RADIUS: AnyDuringMigration;
+  override FIELD_BORDER_RECT_X_PADDING: AnyDuringMigration;
+  override FIELD_BORDER_RECT_Y_PADDING: AnyDuringMigration;
+  override FIELD_BORDER_RECT_HEIGHT: AnyDuringMigration;
+  override FIELD_DROPDOWN_BORDER_RECT_HEIGHT: AnyDuringMigration;
+
+  override FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true;
+
+  override FIELD_DROPDOWN_COLOURED_DIV = true;
+
+  override FIELD_DROPDOWN_SVG_ARROW = true;
+  override FIELD_DROPDOWN_SVG_ARROW_PADDING: AnyDuringMigration;
+  override FIELD_TEXTINPUT_BOX_SHADOW = true;
+
+  override FIELD_COLOUR_FULL_BLOCK = true;
+  override FIELD_COLOUR_DEFAULT_WIDTH: AnyDuringMigration;
+  override FIELD_COLOUR_DEFAULT_HEIGHT: AnyDuringMigration;
+  override FIELD_CHECKBOX_X_OFFSET: AnyDuringMigration;
+  MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH: number;
+
+  /** The selected glow colour. */
+  SELECTED_GLOW_COLOUR = '#fff200';
+
+  /** The size of the selected glow. */
+  SELECTED_GLOW_SIZE = 0.5;
+
+  /** The replacement glow colour. */
+  REPLACEMENT_GLOW_COLOUR = '#fff200';
+
+  /** The size of the selected glow. */
+  REPLACEMENT_GLOW_SIZE = 2;
+
   /**
-   * @package
+   * The ID of the selected glow filter, or the empty string if no filter is
+   * set.
+   * @internal
    */
+  selectedGlowFilterId = '';
+
+  /**
+   * The <filter> element to use for a selected glow, or null if not set.
+   */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private selectedGlowFilter_: SVGElement = null as AnyDuringMigration;
+
+  /**
+   * The ID of the replacement glow filter, or the empty string if no filter
+   * is set.
+   * @internal
+   */
+  replacementGlowFilterId = '';
+
+  /**
+   * The <filter> element to use for a replacement glow, or null if not set.
+   */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private replacementGlowFilter_: SVGElement = null as AnyDuringMigration;
+
+  /**
+   * The object containing information about the hexagon used for a boolean
+   * reporter block. Null before init is called.
+   */
+  HEXAGONAL: Shape|null = null;
+
+  /**
+   * The object containing information about the hexagon used for a number or
+   * string reporter block. Null before init is called.
+   */
+  ROUNDED: Shape|null = null;
+
+  /**
+   * The object containing information about the hexagon used for a
+   * rectangular reporter block. Null before init is called.
+   */
+  SQUARED: Shape|null = null;
+
+  /** @internal */
   constructor() {
     super();
 
-    this.GRID_UNIT = 4;
-
-    /**
-     * @override
-     */
     this.SMALL_PADDING = this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.MEDIUM_PADDING = 2 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.MEDIUM_LARGE_PADDING = 3 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.LARGE_PADDING = 4 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.CORNER_RADIUS = 1 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.NOTCH_WIDTH = 9 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.NOTCH_HEIGHT = 2 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.NOTCH_OFFSET_LEFT = 3 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.STATEMENT_INPUT_NOTCH_OFFSET = this.NOTCH_OFFSET_LEFT;
 
-    /**
-     * @override
-     */
     this.MIN_BLOCK_WIDTH = 2 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.MIN_BLOCK_HEIGHT = 12 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.EMPTY_STATEMENT_INPUT_HEIGHT = 6 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
-    this.TAB_OFFSET_FROM_TOP = 0;
-
-    /**
-     * @override
-     */
     this.TOP_ROW_MIN_HEIGHT = this.CORNER_RADIUS;
 
-    /**
-     * @override
-     */
     this.TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT = this.LARGE_PADDING;
 
-    /**
-     * @override
-     */
     this.BOTTOM_ROW_MIN_HEIGHT = this.CORNER_RADIUS;
 
-    /**
-     * @override
-     */
     this.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT = 6 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT;
 
-    /**
-     * Minimum statement input spacer width.
-     * @type {number}
-     */
+    /** Minimum statement input spacer width. */
     this.STATEMENT_INPUT_SPACER_MIN_WIDTH = 40 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.STATEMENT_INPUT_PADDING_LEFT = 4 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.EMPTY_INLINE_INPUT_PADDING = 4 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.EMPTY_INLINE_INPUT_HEIGHT = 8 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.DUMMY_INPUT_MIN_HEIGHT = 8 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.DUMMY_INPUT_SHADOW_MIN_HEIGHT = 6 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.CURSOR_WS_WIDTH = 20 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
-    this.CURSOR_COLOUR = '#ffa200';
-
-    /**
-     * Radius of the cursor for input and output connections.
-     * @type {number}
-     * @package
-     */
-    this.CURSOR_RADIUS = 5;
-
-    /**
-     * @override
-     */
-    this.JAGGED_TEETH_HEIGHT = 0;
-
-    /**
-     * @override
-     */
-    this.JAGGED_TEETH_WIDTH = 0;
-
-    /**
-     * @override
-     */
-    this.START_HAT_HEIGHT = 22;
-
-    /**
-     * @override
-     */
-    this.START_HAT_WIDTH = 96;
-
-    /**
-     * @enum {number}
-     * @override
-     */
-    this.SHAPES = {HEXAGONAL: 1, ROUND: 2, SQUARE: 3, PUZZLE: 4, NOTCH: 5};
-
     /**
      * Map of output/input shapes and the amount they should cause a block to be
      * padded. Outer key is the outer shape, inner key is the inner shape.
      * When a block with the outer shape contains an input block with the inner
      * shape on its left or right edge, the block elements are aligned such that
      * the padding specified is reached.
-     * @package
+     * @internal
      */
     this.SHAPE_IN_SHAPE_PADDING = {
       1: {
@@ -235,183 +261,31 @@ class ConstantProvider extends BaseConstantProvider {
       },
     };
 
-    /**
-     * @override
-     */
-    this.FULL_BLOCK_FIELDS = true;
-
-    /**
-     * @override
-     */
     this.FIELD_TEXT_FONTSIZE = 3 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
-    this.FIELD_TEXT_FONTWEIGHT = 'bold';
-
-    /**
-     * @override
-     */
-    this.FIELD_TEXT_FONTFAMILY =
-        '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';
-
-    /**
-     * @override
-     */
     this.FIELD_BORDER_RECT_RADIUS = this.CORNER_RADIUS;
 
-    /**
-     * @override
-     */
     this.FIELD_BORDER_RECT_X_PADDING = 2 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.FIELD_BORDER_RECT_Y_PADDING = 1.625 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.FIELD_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
-    this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true;
-
-    /**
-     * @override
-     */
-    this.FIELD_DROPDOWN_COLOURED_DIV = true;
-
-    /**
-     * @override
-     */
-    this.FIELD_DROPDOWN_SVG_ARROW = true;
-
-    /**
-     * @override
-     */
     this.FIELD_DROPDOWN_SVG_ARROW_PADDING = this.FIELD_BORDER_RECT_X_PADDING;
 
-    /**
-     * @override
-     */
-    this.FIELD_TEXTINPUT_BOX_SHADOW = true;
-
-    /**
-     * @override
-     */
-    this.FIELD_COLOUR_FULL_BLOCK = true;
-
-    /**
-     * @override
-     */
     this.FIELD_COLOUR_DEFAULT_WIDTH = 2 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.FIELD_COLOUR_DEFAULT_HEIGHT = 4 * this.GRID_UNIT;
 
-    /**
-     * @override
-     */
     this.FIELD_CHECKBOX_X_OFFSET = 1 * this.GRID_UNIT;
 
-    /**
-     * The maximum width of a dynamic connection shape.
-     * @type {number}
-     */
+    /** The maximum width of a dynamic connection shape. */
     this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH = 12 * this.GRID_UNIT;
-
-    /**
-     * The selected glow colour.
-     * @type {string}
-     */
-    this.SELECTED_GLOW_COLOUR = '#fff200';
-
-    /**
-     * The size of the selected glow.
-     * @type {number}
-     */
-    this.SELECTED_GLOW_SIZE = 0.5;
-
-    /**
-     * The replacement glow colour.
-     * @type {string}
-     */
-    this.REPLACEMENT_GLOW_COLOUR = '#fff200';
-
-    /**
-     * The size of the selected glow.
-     * @type {number}
-     */
-    this.REPLACEMENT_GLOW_SIZE = 2;
-
-    /**
-     * The ID of the selected glow filter, or the empty string if no filter is
-     * set.
-     * @type {string}
-     * @package
-     */
-    this.selectedGlowFilterId = '';
-
-    /**
-     * The <filter> element to use for a selected glow, or null if not set.
-     * @type {SVGElement}
-     * @private
-     */
-    this.selectedGlowFilter_ = null;
-
-    /**
-     * The ID of the replacement glow filter, or the empty string if no filter
-     * is set.
-     * @type {string}
-     * @package
-     */
-    this.replacementGlowFilterId = '';
-
-    /**
-     * The <filter> element to use for a replacement glow, or null if not set.
-     * @type {SVGElement}
-     * @private
-     */
-    this.replacementGlowFilter_ = null;
-
-    /**
-     * The object containing information about the hexagon used for a boolean
-     * reporter block. Null before init is called.
-     * @type {Object}
-     */
-    this.HEXAGONAL = null;
-
-    /**
-     * The object containing information about the hexagon used for a number or
-     * string reporter block. Null before init is called.
-     * @type {Object}
-     */
-    this.ROUNDED = null;
-
-    /**
-     * The object containing information about the hexagon used for a
-     * rectangular reporter block. Null before init is called.
-     * @type {Object}
-     */
-    this.SQUARED = null;
   }
 
-  /**
-   * @override
-   */
-  setFontConstants_(theme) {
+  override setFontConstants_(theme: Theme) {
     super.setFontConstants_(theme);
 
     this.FIELD_BORDER_RECT_HEIGHT =
@@ -419,23 +293,17 @@ class ConstantProvider extends BaseConstantProvider {
     this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT;
   }
 
-  /**
-   * @override
-   */
-  init() {
+  override init() {
     super.init();
     this.HEXAGONAL = this.makeHexagonal();
     this.ROUNDED = this.makeRounded();
     this.SQUARED = this.makeSquared();
 
-    this.STATEMENT_INPUT_NOTCH_OFFSET =
-        this.NOTCH_OFFSET_LEFT + this.INSIDE_CORNERS.rightWidth;
+    this.STATEMENT_INPUT_NOTCH_OFFSET = this.NOTCH_OFFSET_LEFT +
+        (this.INSIDE_CORNERS as InsideCorners).rightWidth;
   }
 
-  /**
-   * @override
-   */
-  setDynamicProperties_(theme) {
+  override setDynamicProperties_(theme: Theme) {
     super.setDynamicProperties_(theme);
 
     this.SELECTED_GLOW_COLOUR = theme.getComponentStyle('selectedGlowColour') ||
@@ -456,10 +324,7 @@ class ConstantProvider extends BaseConstantProvider {
         this.REPLACEMENT_GLOW_SIZE;
   }
 
-  /**
-   * @override
-   */
-  dispose() {
+  override dispose() {
     super.dispose();
     if (this.selectedGlowFilter_) {
       dom.removeNode(this.selectedGlowFilter_);
@@ -469,10 +334,7 @@ class ConstantProvider extends BaseConstantProvider {
     }
   }
 
-  /**
-   * @override
-   */
-  makeStartHat() {
+  override makeStartHat() {
     const height = this.START_HAT_HEIGHT;
     const width = this.START_HAT_WIDTH;
 
@@ -481,16 +343,16 @@ class ConstantProvider extends BaseConstantProvider {
       svgPaths.point(71, -height),
       svgPaths.point(width, 0),
     ]);
-    return {height: height, width: width, path: mainPath};
+    return {height, width, path: mainPath};
   }
 
   /**
    * Create sizing and path information about a hexagonal shape.
-   * @return {!Object} An object containing sizing and path information about
-   *     a hexagonal shape for connections.
-   * @package
+   * @return An object containing sizing and path information about a hexagonal
+   *     shape for connections.
+   * @internal
    */
-  makeHexagonal() {
+  makeHexagonal(): Shape {
     const maxWidth = this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH;
 
     /**
@@ -499,14 +361,13 @@ class ConstantProvider extends BaseConstantProvider {
      * height. The 'up' and 'down' versions of the paths are the same, but the Y
      * sign flips.  The 'left' and 'right' versions of the path are also the
      * same, but the X sign flips.
-     * @param {number} height The height of the block the connection is on.
-     * @param {boolean} up True if the path should be drawn from bottom to top,
-     *     false otherwise.
-     * @param {boolean} right True if the path is for the right side of the
-     *     block.
-     * @return {string} A path fragment describing a rounded connection.
+     * @param height The height of the block the connection is on.
+     * @param up True if the path should be drawn from bottom to top, false
+     *     otherwise.
+     * @param right True if the path is for the right side of the block.
+     * @return A path fragment describing a rounded connection.
      */
-    function makeMainPath(height, up, right) {
+    function makeMainPath(height: number, up: boolean, right: boolean): string {
       const halfHeight = height / 2;
       const width = halfHeight > maxWidth ? maxWidth : halfHeight;
       const forward = up ? -1 : 1;
@@ -519,29 +380,29 @@ class ConstantProvider extends BaseConstantProvider {
     return {
       type: this.SHAPES.HEXAGONAL,
       isDynamic: true,
-      width: function(height) {
+      width(height: number): number {
         const halfHeight = height / 2;
         return halfHeight > maxWidth ? maxWidth : halfHeight;
       },
-      height: function(height) {
+      height(height: number): number {
         return height;
       },
-      connectionOffsetY: function(connectionHeight) {
+      connectionOffsetY(connectionHeight: number): number {
         return connectionHeight / 2;
       },
-      connectionOffsetX: function(connectionWidth) {
+      connectionOffsetX(connectionWidth: number): number {
         return -connectionWidth;
       },
-      pathDown: function(height) {
+      pathDown(height: number): string {
         return makeMainPath(height, false, false);
       },
-      pathUp: function(height) {
+      pathUp(height: number): string {
         return makeMainPath(height, true, false);
       },
-      pathRightDown: function(height) {
+      pathRightDown(height: number): string {
         return makeMainPath(height, false, true);
       },
-      pathRightUp: function(height) {
+      pathRightUp(height: number): string {
         return makeMainPath(height, false, true);
       },
     };
@@ -549,11 +410,11 @@ class ConstantProvider extends BaseConstantProvider {
 
   /**
    * Create sizing and path information about a rounded shape.
-   * @return {!Object} An object containing sizing and path information about
-   *     a rounded shape for connections.
-   * @package
+   * @return An object containing sizing and path information about a rounded
+   *     shape for connections.
+   * @internal
    */
-  makeRounded() {
+  makeRounded(): Shape {
     const maxWidth = this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH;
     const maxHeight = maxWidth * 2;
 
@@ -565,14 +426,14 @@ class ConstantProvider extends BaseConstantProvider {
      * drawn in between the two arcs. The 'up' and 'down' versions of the paths
      * are the same, but the Y sign flips.  The 'up' and 'right' versions of the
      * path flip the sweep-flag which moves the arc at negative angles.
-     * @param {number} blockHeight The height of the block the connection is on.
-     * @param {boolean} up True if the path should be drawn from bottom to top,
-     *     false otherwise.
-     * @param {boolean} right True if the path is for the right side of the
-     *     block.
-     * @return {string} A path fragment describing a rounded connection.
-     */
-    function makeMainPath(blockHeight, up, right) {
+     * @param blockHeight The height of the block the connection is on.
+     * @param up True if the path should be drawn from bottom to top, false
+     *     otherwise.
+     * @param right True if the path is for the right side of the block.
+     * @return A path fragment describing a rounded connection.
+     */
+    function makeMainPath(
+        blockHeight: number, up: boolean, right: boolean): string {
       const remainingHeight =
           blockHeight > maxHeight ? blockHeight - maxHeight : 0;
       const height = blockHeight > maxHeight ? maxHeight : blockHeight;
@@ -590,29 +451,29 @@ class ConstantProvider extends BaseConstantProvider {
     return {
       type: this.SHAPES.ROUND,
       isDynamic: true,
-      width: function(height) {
+      width(height: number): number {
         const halfHeight = height / 2;
         return halfHeight > maxWidth ? maxWidth : halfHeight;
       },
-      height: function(height) {
+      height(height: number): number {
         return height;
       },
-      connectionOffsetY: function(connectionHeight) {
+      connectionOffsetY(connectionHeight: number): number {
         return connectionHeight / 2;
       },
-      connectionOffsetX: function(connectionWidth) {
+      connectionOffsetX(connectionWidth: number): number {
         return -connectionWidth;
       },
-      pathDown: function(height) {
+      pathDown(height: number): string {
         return makeMainPath(height, false, false);
       },
-      pathUp: function(height) {
+      pathUp(height: number): string {
         return makeMainPath(height, true, false);
       },
-      pathRightDown: function(height) {
+      pathRightDown(height: number): string {
         return makeMainPath(height, false, true);
       },
-      pathRightUp: function(height) {
+      pathRightUp(height: number): string {
         return makeMainPath(height, false, true);
       },
     };
@@ -620,11 +481,11 @@ class ConstantProvider extends BaseConstantProvider {
 
   /**
    * Create sizing and path information about a squared shape.
-   * @return {!Object} An object containing sizing and path information about
-   *     a squared shape for connections.
-   * @package
+   * @return An object containing sizing and path information about a squared
+   *     shape for connections.
+   * @internal
    */
-  makeSquared() {
+  makeSquared(): Shape {
     const radius = this.CORNER_RADIUS;
 
     /**
@@ -634,14 +495,13 @@ class ConstantProvider extends BaseConstantProvider {
      * The 'left' and 'right' versions of the paths are the same, but the Y sign
      * flips.  The 'up' and 'down' versions of the path determine where the
      * corner point is placed and in turn the direction of the corners.
-     * @param {number} height The height of the block the connection is on.
-     * @param {boolean} up True if the path should be drawn from bottom to top,
-     *     false otherwise.
-     * @param {boolean} right True if the path is for the right side of the
-     *     block.
-     * @return {string} A path fragment describing a squared connection.
+     * @param height The height of the block the connection is on.
+     * @param up True if the path should be drawn from bottom to top, false
+     *     otherwise.
+     * @param right True if the path is for the right side of the block.
+     * @return A path fragment describing a squared connection.
      */
-    function makeMainPath(height, up, right) {
+    function makeMainPath(height: number, up: boolean, right: boolean): string {
       const innerHeight = height - radius * 2;
       return svgPaths.arc(
                  'a', '0 0,1', radius,
@@ -656,37 +516,34 @@ class ConstantProvider extends BaseConstantProvider {
     return {
       type: this.SHAPES.SQUARE,
       isDynamic: true,
-      width: function(_height) {
+      width(_height: number): number {
         return radius;
       },
-      height: function(height) {
+      height(height: number): number {
         return height;
       },
-      connectionOffsetY: function(connectionHeight) {
+      connectionOffsetY(connectionHeight: number): number {
         return connectionHeight / 2;
       },
-      connectionOffsetX: function(connectionWidth) {
+      connectionOffsetX(connectionWidth: number): number {
         return -connectionWidth;
       },
-      pathDown: function(height) {
+      pathDown(height: number): string {
         return makeMainPath(height, false, false);
       },
-      pathUp: function(height) {
+      pathUp(height: number): string {
         return makeMainPath(height, true, false);
       },
-      pathRightDown: function(height) {
+      pathRightDown(height: number): string {
         return makeMainPath(height, false, true);
       },
-      pathRightUp: function(height) {
+      pathRightUp(height: number): string {
         return makeMainPath(height, false, true);
       },
     };
   }
 
-  /**
-   * @override
-   */
-  shapeFor(connection) {
+  override shapeFor(connection: RenderedConnection): Shape {
     let checks = connection.getCheck();
     if (!checks && connection.targetConnection) {
       checks = connection.targetConnection.getCheck();
@@ -700,36 +557,33 @@ class ConstantProvider extends BaseConstantProvider {
         if (outputShape !== null) {
           switch (outputShape) {
             case this.SHAPES.HEXAGONAL:
-              return /** @type {!Object} */ (this.HEXAGONAL);
+              return this.HEXAGONAL!;
             case this.SHAPES.ROUND:
-              return /** @type {!Object} */ (this.ROUNDED);
+              return this.ROUNDED!;
             case this.SHAPES.SQUARE:
-              return /** @type {!Object} */ (this.SQUARED);
+              return this.SQUARED!;
           }
         }
         // Includes doesn't work in IE.
         if (checks && checks.indexOf('Boolean') !== -1) {
-          return /** @type {!Object} */ (this.HEXAGONAL);
+          return this.HEXAGONAL!;
         }
         if (checks && checks.indexOf('Number') !== -1) {
-          return /** @type {!Object} */ (this.ROUNDED);
+          return this.ROUNDED!;
         }
         if (checks && checks.indexOf('String') !== -1) {
-          return /** @type {!Object} */ (this.ROUNDED);
+          return this.ROUNDED!;
         }
-        return /** @type {!Object} */ (this.ROUNDED);
+        return this.ROUNDED!;
       case ConnectionType.PREVIOUS_STATEMENT:
       case ConnectionType.NEXT_STATEMENT:
-        return this.NOTCH;
+        return this.NOTCH!;
       default:
         throw Error('Unknown type');
     }
   }
 
-  /**
-   * @override
-   */
-  makeNotch() {
+  override makeNotch() {
     const width = this.NOTCH_WIDTH;
     const height = this.NOTCH_HEIGHT;
 
@@ -741,19 +595,18 @@ class ConstantProvider extends BaseConstantProvider {
 
     /**
      * Make the main path for the notch.
-     * @param {number} dir Direction multiplier to apply to horizontal offsets
-     *     along the path. Either 1 or -1.
-     * @return {string} A path fragment describing a notch.
-     */
-    function makeMainPath(dir) {
-      return (
-          svgPaths.curve(
-              'c',
-              [
-                svgPaths.point(dir * curveWidth / 2, 0),
-                svgPaths.point(dir * curveWidth * 3 / 4, quarterHeight / 2),
-                svgPaths.point(dir * curveWidth, quarterHeight),
-              ]) +
+     * @param dir Direction multiplier to apply to horizontal offsets along the
+     *     path. Either 1 or -1.
+     * @return A path fragment describing a notch.
+     */
+    function makeMainPath(dir: number): string {
+      return svgPaths.curve(
+                 'c',
+                 [
+                   svgPaths.point(dir * curveWidth / 2, 0),
+                   svgPaths.point(dir * curveWidth * 3 / 4, quarterHeight / 2),
+                   svgPaths.point(dir * curveWidth, quarterHeight),
+                 ]) +
           svgPaths.line([svgPaths.point(dir * curveWidth, halfHeight)]) +
           svgPaths.curve(
               'c',
@@ -775,7 +628,7 @@ class ConstantProvider extends BaseConstantProvider {
             svgPaths.point(dir * curveWidth / 4, -(quarterHeight / 2)),
             svgPaths.point(dir * curveWidth / 2, -quarterHeight),
             svgPaths.point(dir * curveWidth, -quarterHeight),
-          ]));
+          ]);
     }
 
     const pathLeft = makeMainPath(1);
@@ -783,17 +636,14 @@ class ConstantProvider extends BaseConstantProvider {
 
     return {
       type: this.SHAPES.NOTCH,
-      width: width,
-      height: height,
-      pathLeft: pathLeft,
-      pathRight: pathRight,
+      width,
+      height,
+      pathLeft,
+      pathRight,
     };
   }
 
-  /**
-   * @override
-   */
-  makeInsideCorners() {
+  override makeInsideCorners() {
     const radius = this.CORNER_RADIUS;
 
     const innerTopLeftCorner =
@@ -820,30 +670,21 @@ class ConstantProvider extends BaseConstantProvider {
     };
   }
 
-  /**
-   * @override
-   */
-  generateSecondaryColour_(colour) {
+  override generateSecondaryColour_(colour: string) {
     return utilsColour.blend('#000', colour, 0.15) || colour;
   }
 
-  /**
-   * @override
-   */
-  generateTertiaryColour_(colour) {
+  override generateTertiaryColour_(colour: string) {
     return utilsColour.blend('#000', colour, 0.25) || colour;
   }
 
-  /**
-   * @override
-   */
-  createDom(svg, tagName, selector) {
+  override createDom(svg: SVGElement, tagName: string, selector: string) {
     super.createDom(svg, tagName, selector);
     /*
-    <defs>
-      ... filters go here ...
-    </defs>
-    */
+        <defs>
+          ... filters go here ...
+        </defs>
+        */
     const defs = dom.createSvgElement(Svg.DEFS, {}, svg);
     // Using a dilate distorts the block shape.
     // Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
@@ -935,71 +776,83 @@ class ConstantProvider extends BaseConstantProvider {
     this.replacementGlowFilter_ = replacementGlowFilter;
   }
 
-  /**
-   * @override
-   */
-  getCSS_(selector) {
+  override getCSS_(selector: string) {
     return [
       /* eslint-disable indent */
       // Text.
-      selector + ' .blocklyText,', selector + ' .blocklyFlyoutLabelText {',
+      selector + ' .blocklyText,',
+      selector + ' .blocklyFlyoutLabelText {',
       'font: ' + this.FIELD_TEXT_FONTWEIGHT + ' ' + this.FIELD_TEXT_FONTSIZE +
           'pt ' + this.FIELD_TEXT_FONTFAMILY + ';',
       '}',
 
       // Fields.
-      selector + ' .blocklyText {', 'fill: #fff;', '}',
+      selector + ' .blocklyText {',
+      'fill: #fff;',
+      '}',
       selector + ' .blocklyNonEditableText>rect:not(.blocklyDropdownRect),',
       selector + ' .blocklyEditableText>rect:not(.blocklyDropdownRect) {',
-      'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';', '}',
+      'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';',
+      '}',
       selector + ' .blocklyNonEditableText>text,',
       selector + ' .blocklyEditableText>text,',
       selector + ' .blocklyNonEditableText>g>text,',
-      selector + ' .blocklyEditableText>g>text {', 'fill: #575E75;', '}',
-
-      // Flyout labels.
-      selector + ' .blocklyFlyoutLabelText {', 'fill: #575E75;', '}',
+      selector + ' .blocklyEditableText>g>text {',
+      'fill: #575E75;',
+      '}',  // Flyout labels.
+      selector + ' .blocklyFlyoutLabelText {',
+      'fill: #575E75;',
+      '}',
 
       // Bubbles.
-      selector + ' .blocklyText.blocklyBubbleText {', 'fill: #575E75;', '}',
+      selector + ' .blocklyText.blocklyBubbleText {',
+      'fill: #575E75;',
+      '}',
 
       // Editable field hover.
       selector + ' .blocklyDraggable:not(.blocklyDisabled)',
       ' .blocklyEditableText:not(.editing):hover>rect,',
       selector + ' .blocklyDraggable:not(.blocklyDisabled)',
       ' .blocklyEditableText:not(.editing):hover>.blocklyPath {',
-      'stroke: #fff;', 'stroke-width: 2;', '}',
+      'stroke: #fff;',
+      'stroke-width: 2;',
+      '}',
 
       // Text field input.
       selector + ' .blocklyHtmlInput {',
       'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';',
-      'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', 'color: #575E75;',
+      'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';',
+      'color: #575E75;',
       '}',
 
       // Dropdown field.
-      selector + ' .blocklyDropdownText {', 'fill: #fff !important;', '}',
-      // Widget and Dropdown Div
+      selector + ' .blocklyDropdownText {',
+      'fill: #fff !important;',
+      '}',  // Widget and Dropdown Div
       selector + '.blocklyWidgetDiv .goog-menuitem,',
       selector + '.blocklyDropDownDiv .goog-menuitem {',
-      'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', '}',
-      selector + '.blocklyDropDownDiv .goog-menuitem-content {', 'color: #fff;',
+      'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';',
+      '}',
+      selector + '.blocklyDropDownDiv .goog-menuitem-content {',
+      'color: #fff;',
       '}',
 
       // Connection highlight.
       selector + ' .blocklyHighlightedConnectionPath {',
-      'stroke: ' + this.SELECTED_GLOW_COLOUR + ';', '}',
+      'stroke: ' + this.SELECTED_GLOW_COLOUR + ';',
+      '}',
 
       // Disabled outline paths.
       selector + ' .blocklyDisabled > .blocklyOutlinePath {',
-      'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')', '}',
+      'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')',
+      '}',
 
       // Insertion marker.
       selector + ' .blocklyInsertionMarker>.blocklyPath {',
-      'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';', 'stroke: none;',
+      'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+      'stroke: none;',
       '}',
-      /* eslint-enable indent */
     ];
   }
 }
-
-exports.ConstantProvider = ConstantProvider;
+/* eslint-enable indent */