blockly 8.0.5 → 9.0.0-beta.0

package/core/renderers/geras/{highlighter.js → highlighter.ts}

@@ -8,34 +8,30 @@
  * @fileoverview Methods for adding highlights on block, for rendering in
  * compatibility mode.
  */
-'use strict';
 
 /**
  * Methods for adding highlights on block, for rendering in
  * compatibility mode.
  * @class
  */
-goog.module('Blockly.geras.Highlighter');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.Highlighter');
 
-const svgPaths = goog.require('Blockly.utils.svgPaths');
 /* eslint-disable-next-line no-unused-vars */
-const {BottomRow} = goog.require('Blockly.blockRendering.BottomRow');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
-/* eslint-disable-next-line no-unused-vars */
-const {HighlightConstantProvider} = goog.requireType('Blockly.geras.HighlightConstantProvider');
-/* eslint-disable-next-line no-unused-vars */
-const {InlineInput} = goog.require('Blockly.geras.InlineInput');
-/* eslint-disable-next-line no-unused-vars */
-const {RenderInfo} = goog.requireType('Blockly.geras.RenderInfo');
-/* eslint-disable-next-line no-unused-vars */
-const {Renderer} = goog.requireType('Blockly.geras.Renderer');
-/* eslint-disable-next-line no-unused-vars */
-const {Row} = goog.requireType('Blockly.blockRendering.Row');
-const {SpacerRow} = goog.require('Blockly.blockRendering.SpacerRow');
-/* eslint-disable-next-line no-unused-vars */
-const {TopRow} = goog.require('Blockly.blockRendering.TopRow');
-const {Types} = goog.require('Blockly.blockRendering.Types');
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './renderer.js';
+
+import * as svgPaths from '../../utils/svg_paths.js';
+import type {ConstantProvider} from '../common/constants.js';
+import type {BottomRow} from '../measurables/bottom_row.js';
+import type {Row} from '../measurables/row.js';
+import {SpacerRow} from '../measurables/spacer_row.js';
+import type {TopRow} from '../measurables/top_row.js';
+import {Types} from '../measurables/types.js';
+
+import type {HighlightConstantProvider, InsideCorner, JaggedTeeth, Notch, OutsideCorner, PuzzleTab, StartHat} from './highlight_constants.js';
+import type {RenderInfo} from './info.js';
+import type {InlineInput} from './measurables/inline_input.js';
 
 
 /**
@@ -50,36 +46,38 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
  * tab and notch shapes, but are not exactly the same.
  * @alias Blockly.geras.Highlighter
  */
-class Highlighter {
+export class Highlighter {
+  info_: RenderInfo;
+  steps_ = '';
+  inlineSteps_ = '';
+  RTL_: boolean;
+  constants_: ConstantProvider;
+  highlightConstants_: HighlightConstantProvider;
+  private readonly highlightOffset_: number;
+  outsideCornerPaths_: OutsideCorner;
+  insideCornerPaths_: InsideCorner;
+  puzzleTabPaths_: PuzzleTab;
+  notchPaths_: Notch;
+  startPaths_: StartHat;
+  jaggedTeethPaths_: JaggedTeeth;
+
   /**
-   * @param {!RenderInfo} info An object containing all
-   *     information needed to render this block.
-   * @package
+   * @param info An object containing all information needed to render this
+   *     block.
+   * @internal
    */
-  constructor(info) {
+  constructor(info: RenderInfo) {
     this.info_ = info;
-    this.steps_ = '';
-    this.inlineSteps_ = '';
 
     this.RTL_ = this.info_.RTL;
 
-    const renderer = /** @type {!Renderer} */ (info.getRenderer());
+    const renderer = (info.getRenderer());
 
-    /**
-     * The renderer's constant provider.
-     * @type {!ConstantProvider}
-     */
+    /** The renderer's constant provider. */
     this.constants_ = renderer.getConstants();
 
-    /**
-     * @type {!HighlightConstantProvider}
-     */
     this.highlightConstants_ = renderer.getHighlightConstants();
-    /**
-     * The offset between the block's main path and highlight path.
-     * @type {number}
-     * @private
-     */
+    /** The offset between the block's main path and highlight path. */
     this.highlightOffset_ = this.highlightConstants_.OFFSET;
 
     this.outsideCornerPaths_ = this.highlightConstants_.OUTSIDE_CORNER;
@@ -92,21 +90,21 @@ class Highlighter {
 
   /**
    * Get the steps for the highlight path.
-   * @return {string} The steps for the highlight path.
-   * @package
+   * @return The steps for the highlight path.
+   * @internal
    */
-  getPath() {
+  getPath(): string {
     return this.steps_ + '\n' + this.inlineSteps_;
   }
 
   /**
    * Add a highlight to the top corner of a block.
-   * @param {!TopRow} row The top row of the block.
-   * @package
+   * @param row The top row of the block.
+   * @internal
    */
-  drawTopCorner(row) {
+  drawTopCorner(row: TopRow) {
     this.steps_ += svgPaths.moveBy(row.xPos, this.info_.startY);
-    for (let i = 0, elem; (elem = row.elements[i]); i++) {
+    for (let i = 0, elem; elem = row.elements[i]; i++) {
       if (Types.isLeftSquareCorner(elem)) {
         this.steps_ += this.highlightConstants_.START_POINT;
       } else if (Types.isLeftRoundedCorner(elem)) {
@@ -131,10 +129,10 @@ class Highlighter {
 
   /**
    * Add a highlight on a jagged edge for a collapsed block.
-   * @param {!Row} row  The row to highlight.
-   * @package
+   * @param row  The row to highlight.
+   * @internal
    */
-  drawJaggedEdge_(row) {
+  drawJaggedEdge_(row: Row) {
     if (this.info_.RTL) {
       const remainder =
           row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;
@@ -145,11 +143,11 @@ class Highlighter {
 
   /**
    * Add a highlight on a value input.
-   * @param {!Row} row The row the input belongs to.
-   * @package
+   * @param row The row the input belongs to.
+   * @internal
    */
-  drawValueInput(row) {
-    const input = /** @type {!InlineInput}} */ (row.getLastInput());
+  drawValueInput(row: Row) {
+    const input = row.getLastInput() as InlineInput;
     if (this.RTL_) {
       const belowTabHeight = row.height - input.connectionHeight;
 
@@ -166,13 +164,13 @@ class Highlighter {
 
   /**
    * Add a highlight on a statement input.
-   * @param {!Row} row The row to highlight.
-   * @package
+   * @param row The row to highlight.
+   * @internal
    */
-  drawStatementInput(row) {
+  drawStatementInput(row: Row) {
     const input = row.getLastInput();
     if (this.RTL_) {
-      const innerHeight = row.height - (2 * this.insideCornerPaths_.height);
+      const innerHeight = row.height - 2 * this.insideCornerPaths_.height;
       this.steps_ += svgPaths.moveTo(input.xPos, row.yPos) +
           this.insideCornerPaths_.pathTop(this.RTL_) +
           svgPaths.lineOnAxis('v', innerHeight) +
@@ -189,10 +187,10 @@ class Highlighter {
 
   /**
    * Add a highlight on the right side of a row.
-   * @param {!Row} row The row to highlight.
-   * @package
+   * @param row The row to highlight.
+   * @internal
    */
-  drawRightSideRow(row) {
+  drawRightSideRow(row: Row) {
     const rightEdge = row.xPos + row.width - this.highlightOffset_;
     if (row instanceof SpacerRow && row.followsStatement) {
       this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
@@ -208,10 +206,10 @@ class Highlighter {
 
   /**
    * Add a highlight to the bottom row.
-   * @param {!BottomRow} row The row to highlight.
-   * @package
+   * @param row The row to highlight.
+   * @internal
    */
-  drawBottomRow(row) {
+  drawBottomRow(row: BottomRow) {
     // Highlight the vertical edge of the bottom row on the input side.
     // Highlighting is always from the top left, both in LTR and RTL.
     if (this.RTL_) {
@@ -232,7 +230,7 @@ class Highlighter {
 
   /**
    * Draw the highlight on the left side of the block.
-   * @package
+   * @internal
    */
   drawLeft() {
     const outputConnection = this.info_.outputConnection;
@@ -265,10 +263,10 @@ class Highlighter {
 
   /**
    * Add a highlight to an inline input.
-   * @param {!InlineInput} input The input to highlight.
-   * @package
+   * @param input The input to highlight.
+   * @internal
    */
-  drawInlineInput(input) {
+  drawInlineInput(input: InlineInput) {
     const offset = this.highlightOffset_;
 
     // Relative to the block's left.
@@ -284,28 +282,25 @@ class Highlighter {
 
       const startX = connectionRight - offset;
 
-      this.inlineSteps_ += svgPaths.moveTo(startX, startY) +
-          // Right edge above tab.
-          svgPaths.lineOnAxis('v', aboveTabHeight) +
-          // Back of tab.
-          this.puzzleTabPaths_.pathDown(this.RTL_) +
-          // Right edge below tab.
-          svgPaths.lineOnAxis('v', belowTabHeight) +
-          // Bottom.
+      this.inlineSteps_ +=
+          svgPaths.moveTo(startX, startY) +           // Right edge above tab.
+          svgPaths.lineOnAxis('v', aboveTabHeight) +  // Back of tab.
+          this.puzzleTabPaths_.pathDown(this.RTL_) +  // Right edge below tab.
+          svgPaths.lineOnAxis('v', belowTabHeight) +  // Bottom.
           svgPaths.lineOnAxis('h', bottomHighlightWidth);
     } else {
-      this.inlineSteps_ +=
-          // Go to top right corner.
-          svgPaths.moveTo(input.xPos + input.width + offset, startY) +
-          // Highlight right edge, bottom.
+      this.inlineSteps_ +=  // Go to top right corner.
+          svgPaths.moveTo(
+              input.xPos + input.width + offset,
+              startY) +  // Highlight right edge, bottom.
           svgPaths.lineOnAxis('v', input.height) +
-          svgPaths.lineOnAxis('h', -bottomHighlightWidth) +
-          // Go to top of tab.
-          svgPaths.moveTo(connectionRight, yPos + input.connectionOffsetY) +
-          // Short highlight glint at bottom of tab.
+          svgPaths.lineOnAxis(
+              'h', -bottomHighlightWidth) +  // Go to top of tab.
+          svgPaths.moveTo(
+              connectionRight,
+              yPos + input.connectionOffsetY) +  // Short highlight glint at
+          // bottom of tab.
           this.puzzleTabPaths_.pathDown(this.RTL_);
     }
   }
 }
-
-exports.Highlighter = Highlighter;

package/core/renderers/geras/info.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Input } from '../../input.js';
+import { RenderInfo as BaseRenderInfo } from '../common/info.js';
+import type { Measurable } from '../measurables/base.js';
+import type { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import type { Renderer } from './renderer.js';
+/**
+ * An object containing all sizing information needed to draw this block.
+ *
+ * This measure pass does not propagate changes to the block (although fields
+ * may choose to rerender when getSize() is called).  However, calling it
+ * repeatedly may be expensive.
+ * @alias Blockly.geras.RenderInfo
+ */
+export declare class RenderInfo extends BaseRenderInfo {
+    constants_: ConstantProvider;
+    protected readonly renderer_: Renderer;
+    /**
+     * @param renderer The renderer in use.
+     * @param block The block to measure.
+     * @internal
+     */
+    constructor(renderer: Renderer, block: BlockSvg);
+    /**
+     * Get the block renderer in use.
+     * @return The block renderer in use.
+     * @internal
+     */
+    getRenderer(): Renderer;
+    populateBottomRow_(): void;
+    addInput_(input: Input, activeRow: Row): void;
+    addElemSpacing_(): void;
+    getInRowSpacing_(prev: Measurable | null, next: Measurable | null): number;
+    getSpacerRowHeight_(prev: Row, next: Row): number;
+    getElemCenterline_(row: Row, elem: Measurable): number;
+    alignRowElements_(): void;
+    getDesiredRowWidth_(row: Row): number;
+    finalize_(): void;
+}

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

@@ -8,36 +8,33 @@
  * @fileoverview Old (compatibility) renderer.
  * Geras: spirit of old age.
  */
-'use strict';
 
 /**
  * Old (compatibility) renderer.
  * Geras: spirit of old age.
  * @class
  */
-goog.module('Blockly.geras.RenderInfo');
-
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {BottomRow} = goog.requireType('Blockly.blockRendering.BottomRow');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
-const {ExternalValueInput} = goog.require('Blockly.blockRendering.ExternalValueInput');
-/* eslint-disable-next-line no-unused-vars */
-const {Field} = goog.requireType('Blockly.blockRendering.Field');
-const {InRowSpacer} = goog.require('Blockly.blockRendering.InRowSpacer');
-const {InlineInput} = goog.require('Blockly.geras.InlineInput');
-/* eslint-disable-next-line no-unused-vars */
-const {InputRow} = goog.requireType('Blockly.blockRendering.InputRow');
-const {RenderInfo: BaseRenderInfo} = goog.require('Blockly.blockRendering.RenderInfo');
-/* eslint-disable-next-line no-unused-vars */
-const {Renderer} = goog.requireType('Blockly.geras.Renderer');
-const {StatementInput} = goog.require('Blockly.geras.StatementInput');
-/* eslint-disable-next-line no-unused-vars */
-const {TopRow} = goog.requireType('Blockly.blockRendering.TopRow');
-const {Types} = goog.require('Blockly.blockRendering.Types');
-const {inputTypes} = goog.require('Blockly.inputTypes');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.RenderInfo');
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {Input} from '../../input.js';
+import {inputTypes} from '../../input_types.js';
+import {RenderInfo as BaseRenderInfo} from '../common/info.js';
+import type {Measurable} from '../measurables/base.js';
+import type {BottomRow} from '../measurables/bottom_row.js';
+import {ExternalValueInput} from '../measurables/external_value_input.js';
+import type {Field} from '../measurables/field.js';
+import {InRowSpacer} from '../measurables/in_row_spacer.js';
+import type {InputRow} from '../measurables/input_row.js';
+import type {Row} from '../measurables/row.js';
+import type {TopRow} from '../measurables/top_row.js';
+import {Types} from '../measurables/types.js';
+
+import type {ConstantProvider} from './constants.js';
+import {InlineInput} from './measurables/inline_input.js';
+import {StatementInput} from './measurables/statement_input.js';
+import type {Renderer} from './renderer.js';
 
 
 /**
@@ -46,41 +43,39 @@ const {inputTypes} = goog.require('Blockly.inputTypes');
  * This measure pass does not propagate changes to the block (although fields
  * may choose to rerender when getSize() is called).  However, calling it
  * repeatedly may be expensive.
- * @extends {BaseRenderInfo}
  * @alias Blockly.geras.RenderInfo
  */
-class RenderInfo extends BaseRenderInfo {
+export class RenderInfo extends BaseRenderInfo {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  override constants_!: ConstantProvider;
+
+  protected override readonly renderer_: Renderer;
+
   /**
-   * @param {!Renderer} renderer The renderer in use.
-   * @param {!BlockSvg} block The block to measure.
-   * @package
+   * @param renderer The renderer in use.
+   * @param block The block to measure.
+   * @internal
    */
-  constructor(renderer, block) {
+  constructor(renderer: Renderer, block: BlockSvg) {
     super(renderer, block);
-
-    /** @type {!ConstantProvider} */
-    this.constants_;
+    this.renderer_ = renderer;
   }
 
   /**
    * Get the block renderer in use.
-   * @return {!Renderer} The block renderer in use.
-   * @package
+   * @return The block renderer in use.
+   * @internal
    */
-  getRenderer() {
-    return /** @type {!Renderer} */ (this.renderer_);
+  override getRenderer(): Renderer {
+    return this.renderer_;
   }
 
-  /**
-   * @override
-   */
-  populateBottomRow_() {
+  override populateBottomRow_() {
     super.populateBottomRow_();
 
     const followsStatement = this.block_.inputList.length &&
         this.block_.inputList[this.block_.inputList.length - 1].type ===
             inputTypes.STATEMENT;
-
     // The minimum height of the bottom row is smaller in Geras than in other
     // renderers, because the dark path adds a pixel.
     // If one of the row's elements has a greater height this will be
@@ -91,10 +86,7 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 
-  /**
-   * @override
-   */
-  addInput_(input, activeRow) {
+  override addInput_(input: Input, activeRow: Row) {
     // Non-dummy inputs have visual representations onscreen.
     if (this.isInline && input.type === inputTypes.VALUE) {
       activeRow.elements.push(new InlineInput(this.constants_, input));
@@ -118,17 +110,14 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 
-  /**
-   * @override
-   */
-  addElemSpacing_() {
+  override addElemSpacing_() {
     let hasExternalInputs = false;
-    for (let i = 0, row; (row = this.rows[i]); i++) {
+    for (let i = 0, row; row = this.rows[i]; i++) {
       if (row.hasExternalInput) {
         hasExternalInputs = true;
       }
     }
-    for (let i = 0, row; (row = this.rows[i]); i++) {
+    for (let i = 0, row; row = this.rows[i]; i++) {
       const oldElems = row.elements;
       row.elements = [];
       // No spacing needed before the corner on the top row or the bottom row.
@@ -158,14 +147,10 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 
-  /**
-   * @override
-   */
-  getInRowSpacing_(prev, next) {
+  override getInRowSpacing_(prev: Measurable|null, next: Measurable|null) {
     if (!prev) {
       // Between an editable field and the beginning of the row.
-      if (next && Types.isField(next) &&
-          (/** @type {Field} */ (next)).isEditable) {
+      if (next && Types.isField(next) && (next as Field).isEditable) {
         return this.constants_.MEDIUM_PADDING;
       }
       // Inline input at the beginning of the row.
@@ -182,12 +167,12 @@ class RenderInfo extends BaseRenderInfo {
     // Spacing between a non-input and the end of the row or a statement input.
     if (!Types.isInput(prev) && (!next || Types.isStatementInput(next))) {
       // Between an editable field and the end of the row.
-      if (Types.isField(prev) && (/** @type {Field} */ (prev)).isEditable) {
+      if (Types.isField(prev) && (prev as Field).isEditable) {
         return this.constants_.MEDIUM_PADDING;
       }
       // Padding at the end of an icon-only row to make the block shape clearer.
       if (Types.isIcon(prev)) {
-        return (this.constants_.LARGE_PADDING * 2) + 1;
+        return this.constants_.LARGE_PADDING * 2 + 1;
       }
       if (Types.isHat(prev)) {
         return this.constants_.NO_PADDING;
@@ -223,7 +208,7 @@ class RenderInfo extends BaseRenderInfo {
     // Spacing between a non-input and an input.
     if (!Types.isInput(prev) && next && Types.isInput(next)) {
       // Between an editable field and an input.
-      if (Types.isField(prev) && (/** @type {Field} */ (prev)).isEditable) {
+      if (Types.isField(prev) && (prev as Field).isEditable) {
         if (Types.isInlineInput(next)) {
           return this.constants_.SMALL_PADDING;
         } else if (Types.isExternalInput(next)) {
@@ -245,11 +230,10 @@ class RenderInfo extends BaseRenderInfo {
     if (Types.isIcon(prev) && next && !Types.isInput(next)) {
       return this.constants_.LARGE_PADDING;
     }
-
     // Spacing between an inline input and a field.
     if (Types.isInlineInput(prev) && next && Types.isField(next)) {
       // Editable field after inline input.
-      if ((/** @type {Field} */ (next)).isEditable) {
+      if ((next as Field).isEditable) {
         return this.constants_.MEDIUM_PADDING;
       } else {
         // Noneditable field after inline input.
@@ -291,8 +275,7 @@ class RenderInfo extends BaseRenderInfo {
 
     // Spacing between two fields of the same editability.
     if (Types.isField(prev) && next && Types.isField(next) &&
-        ((/** @type {Field} */ (prev)).isEditable ===
-         (/** @type {Field} */ (next)).isEditable)) {
+        (prev as Field).isEditable === (next as Field).isEditable) {
       return this.constants_.LARGE_PADDING;
     }
 
@@ -304,10 +287,7 @@ class RenderInfo extends BaseRenderInfo {
     return this.constants_.MEDIUM_PADDING;
   }
 
-  /**
-   * @override
-   */
-  getSpacerRowHeight_(prev, next) {
+  override getSpacerRowHeight_(prev: Row, next: Row) {
     // If we have an empty block add a spacer to increase the height.
     if (Types.isTopRow(prev) && Types.isBottomRow(next)) {
       return this.constants_.EMPTY_BLOCK_SPACER_HEIGHT;
@@ -334,15 +314,12 @@ class RenderInfo extends BaseRenderInfo {
     return this.constants_.MEDIUM_PADDING;
   }
 
-  /**
-   * @override
-   */
-  getElemCenterline_(row, elem) {
+  override getElemCenterline_(row: Row, elem: Measurable) {
     if (Types.isSpacer(elem)) {
       return row.yPos + elem.height / 2;
     }
     if (Types.isBottomRow(row)) {
-      const bottomRow = /** @type {!BottomRow} */ (row);
+      const bottomRow = row as BottomRow;
       const baseline =
           bottomRow.yPos + bottomRow.height - bottomRow.descenderHeight;
       if (Types.isNextConnection(elem)) {
@@ -351,7 +328,7 @@ class RenderInfo extends BaseRenderInfo {
       return baseline - elem.height / 2;
     }
     if (Types.isTopRow(row)) {
-      const topRow = /** @type {!TopRow} */ (row);
+      const topRow = row as TopRow;
       if (Types.isHat(elem)) {
         return topRow.capline - elem.height / 2;
       }
@@ -360,7 +337,7 @@ class RenderInfo extends BaseRenderInfo {
 
     let result = row.yPos;
     if (Types.isField(elem) || Types.isIcon(elem)) {
-      result += (elem.height / 2);
+      result += elem.height / 2;
       if ((row.hasInlineInput || row.hasStatement) &&
           elem.height + this.constants_.TALL_INPUT_FIELD_OFFSET_Y <=
               row.height) {
@@ -369,31 +346,26 @@ class RenderInfo extends BaseRenderInfo {
     } else if (Types.isInlineInput(elem)) {
       result += elem.height / 2;
     } else {
-      result += (row.height / 2);
+      result += row.height / 2;
     }
     return result;
   }
 
-  /**
-   * @override
-   */
-  alignRowElements_() {
+  override alignRowElements_() {
     if (!this.isInline) {
       super.alignRowElements_();
       return;
     }
-
     // Walk backgrounds through rows on the block, keeping track of the right
     // input edge.
     let nextRightEdge = 0;
     const rowNextRightEdges = new WeakMap();
     let prevInput = null;
-    for (let i = this.rows.length - 1, row; (row = this.rows[i]); i--) {
+    for (let i = this.rows.length - 1, row; row = this.rows[i]; i--) {
       rowNextRightEdges.set(row, nextRightEdge);
       if (Types.isInputRow(row)) {
         if (row.hasStatement) {
-          this.alignStatementRow_(
-              /** @type {!InputRow} */ (row));
+          this.alignStatementRow_(row as InputRow);
         }
         if (prevInput && prevInput.hasStatement &&
             row.width < prevInput.width) {
@@ -407,7 +379,7 @@ class RenderInfo extends BaseRenderInfo {
     // Walk down each row from the top, comparing the prev and next right input
     // edges and setting the desired width to the max of the two.
     let prevRightEdge = 0;
-    for (let i = 0, row; (row = this.rows[i]); i++) {
+    for (let i = 0, row; row = this.rows[i]; i++) {
       if (row.hasStatement) {
         prevRightEdge = this.getDesiredRowWidth_(row);
       } else if (Types.isSpacer(row)) {
@@ -426,10 +398,7 @@ class RenderInfo extends BaseRenderInfo {
     }
   }
 
-  /**
-   * @override
-   */
-  getDesiredRowWidth_(row) {
+  override getDesiredRowWidth_(row: Row) {
     // Limit the width of a statement row when a block is inline.
     if (this.isInline && row.hasStatement) {
       return this.statementEdge + this.constants_.MAX_BOTTOM_WIDTH +
@@ -438,16 +407,13 @@ class RenderInfo extends BaseRenderInfo {
     return super.getDesiredRowWidth_(row);
   }
 
-  /**
-   * @override
-   */
-  finalize_() {
+  override finalize_() {
     // Performance note: this could be combined with the draw pass, if the time
     // that this takes is excessive.  But it shouldn't be, because it only
     // accesses and sets properties that already exist on the objects.
     let widestRowWithConnectedBlocks = 0;
     let yCursor = 0;
-    for (let i = 0, row; (row = this.rows[i]); i++) {
+    for (let i = 0, row; row = this.rows[i]; i++) {
       row.yPos = yCursor;
       row.xPos = this.startX;
       yCursor += row.height;
@@ -475,8 +441,6 @@ class RenderInfo extends BaseRenderInfo {
     }
 
     this.bottomRow.baseline = yCursor - this.bottomRow.descenderHeight;
-
-    // The dark (lowlight) adds to the size of the block in both x and y.
     this.widthWithChildren = widestRowWithConnectedBlocks + this.startX +
         this.constants_.DARK_PATH_OFFSET;
     this.width += this.constants_.DARK_PATH_OFFSET;
@@ -484,5 +448,3 @@ class RenderInfo extends BaseRenderInfo {
     this.startY = this.topRow.capline;
   }
 }
-
-exports.RenderInfo = RenderInfo;