blockly 7.20211209.4 → 8.0.0

package/core/renderers/geras/highlighter.js

@@ -19,13 +19,22 @@ goog.module('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');
 
 
@@ -39,221 +48,264 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
  * position of each part of the block.  The resulting paths are not continuous
  * or closed paths.  The highlights for tabs and notches are loosely based on
  * tab and notch shapes, but are not exactly the same.
- *
- * @param {!RenderInfo} info An object containing all
- *     information needed to render this block.
- * @package
- * @constructor
  * @alias Blockly.geras.Highlighter
  */
-const Highlighter = function(info) {
-  this.info_ = info;
-  this.steps_ = '';
-  this.inlineSteps_ = '';
-
-  this.RTL_ = this.info_.RTL;
-
-  const renderer = /** @type {!Renderer} */ (info.getRenderer());
-
+class Highlighter {
   /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
+   * @param {!RenderInfo} info An object containing all
+   *     information needed to render this block.
+   * @package
    */
-  this.constants_ = renderer.getConstants();
+  constructor(info) {
+    this.info_ = info;
+    this.steps_ = '';
+    this.inlineSteps_ = '';
 
-  /**
-   * @type {!HighlightConstantProvider}
-   */
-  this.highlightConstants_ = renderer.getHighlightConstants();
-  /**
-   * The offset between the block's main path and highlight path.
-   * @type {number}
-   * @private
-   */
-  this.highlightOffset_ = this.highlightConstants_.OFFSET;
+    this.RTL_ = this.info_.RTL;
 
-  this.outsideCornerPaths_ = this.highlightConstants_.OUTSIDE_CORNER;
-  this.insideCornerPaths_ = this.highlightConstants_.INSIDE_CORNER;
-  this.puzzleTabPaths_ = this.highlightConstants_.PUZZLE_TAB;
-  this.notchPaths_ = this.highlightConstants_.NOTCH;
-  this.startPaths_ = this.highlightConstants_.START_HAT;
-  this.jaggedTeethPaths_ = this.highlightConstants_.JAGGED_TEETH;
-};
+    const renderer = /** @type {!Renderer} */ (info.getRenderer());
 
-/**
- * Get the steps for the highlight path.
- * @return {string} The steps for the highlight path.
- * @package
- */
-Highlighter.prototype.getPath = function() {
-  return this.steps_ + '\n' + this.inlineSteps_;
-};
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     */
+    this.constants_ = renderer.getConstants();
 
-Highlighter.prototype.drawTopCorner = function(row) {
-  this.steps_ += svgPaths.moveBy(row.xPos, this.info_.startY);
-  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)) {
-      this.steps_ += this.outsideCornerPaths_.topLeft(this.RTL_);
-    } else if (Types.isPreviousConnection(elem)) {
-      this.steps_ += this.notchPaths_.pathLeft;
-    } else if (Types.isHat(elem)) {
-      this.steps_ += this.startPaths_.path(this.RTL_);
-    } else if (Types.isSpacer(elem) && elem.width !== 0) {
-      // The end point of the spacer needs to be offset by the highlight amount.
-      // So instead of using the spacer's width for a relative horizontal, use
-      // its width and position for an absolute horizontal move.
-      this.steps_ += svgPaths.lineOnAxis(
-          'H', elem.xPos + elem.width - this.highlightOffset_);
-    }
-  }
+    /**
+     * @type {!HighlightConstantProvider}
+     */
+    this.highlightConstants_ = renderer.getHighlightConstants();
+    /**
+     * The offset between the block's main path and highlight path.
+     * @type {number}
+     * @private
+     */
+    this.highlightOffset_ = this.highlightConstants_.OFFSET;
 
-  const right = row.xPos + row.width - this.highlightOffset_;
-  this.steps_ += svgPaths.lineOnAxis('H', right);
-};
+    this.outsideCornerPaths_ = this.highlightConstants_.OUTSIDE_CORNER;
+    this.insideCornerPaths_ = this.highlightConstants_.INSIDE_CORNER;
+    this.puzzleTabPaths_ = this.highlightConstants_.PUZZLE_TAB;
+    this.notchPaths_ = this.highlightConstants_.NOTCH;
+    this.startPaths_ = this.highlightConstants_.START_HAT;
+    this.jaggedTeethPaths_ = this.highlightConstants_.JAGGED_TEETH;
+  }
 
-Highlighter.prototype.drawJaggedEdge_ = function(row) {
-  if (this.info_.RTL) {
-    const remainder =
-        row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;
-    this.steps_ +=
-        this.jaggedTeethPaths_.pathLeft + svgPaths.lineOnAxis('v', remainder);
+  /**
+   * Get the steps for the highlight path.
+   * @return {string} The steps for the highlight path.
+   * @package
+   */
+  getPath() {
+    return this.steps_ + '\n' + this.inlineSteps_;
   }
-};
 
-Highlighter.prototype.drawValueInput = function(row) {
-  const input = row.getLastInput();
-  if (this.RTL_) {
-    const belowTabHeight = row.height - input.connectionHeight;
+  /**
+   * Add a highlight to the top corner of a block.
+   * @param {!TopRow} row The top row of the block.
+   * @package
+   */
+  drawTopCorner(row) {
+    this.steps_ += svgPaths.moveBy(row.xPos, this.info_.startY);
+    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)) {
+        this.steps_ += this.outsideCornerPaths_.topLeft(this.RTL_);
+      } else if (Types.isPreviousConnection(elem)) {
+        this.steps_ += this.notchPaths_.pathLeft;
+      } else if (Types.isHat(elem)) {
+        this.steps_ += this.startPaths_.path(this.RTL_);
+      } else if (Types.isSpacer(elem) && elem.width !== 0) {
+        // The end point of the spacer needs to be offset by the highlight
+        // amount. So instead of using the spacer's width for a relative
+        // horizontal, use its width and position for an absolute horizontal
+        // move.
+        this.steps_ += svgPaths.lineOnAxis(
+            'H', elem.xPos + elem.width - this.highlightOffset_);
+      }
+    }
 
-    this.steps_ +=
-        svgPaths.moveTo(
-            input.xPos + input.width - this.highlightOffset_, row.yPos) +
-        this.puzzleTabPaths_.pathDown(this.RTL_) +
-        svgPaths.lineOnAxis('v', belowTabHeight);
-  } else {
-    this.steps_ += svgPaths.moveTo(input.xPos + input.width, row.yPos) +
-        this.puzzleTabPaths_.pathDown(this.RTL_);
+    const right = row.xPos + row.width - this.highlightOffset_;
+    this.steps_ += svgPaths.lineOnAxis('H', right);
   }
-};
 
-Highlighter.prototype.drawStatementInput = function(row) {
-  const input = row.getLastInput();
-  if (this.RTL_) {
-    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) +
-        this.insideCornerPaths_.pathBottom(this.RTL_) +
-        svgPaths.lineTo(
-            row.width - input.xPos - this.insideCornerPaths_.width, 0);
-  } else {
-    this.steps_ += svgPaths.moveTo(input.xPos, row.yPos + row.height) +
-        this.insideCornerPaths_.pathBottom(this.RTL_) +
-        svgPaths.lineTo(
-            row.width - input.xPos - this.insideCornerPaths_.width, 0);
+  /**
+   * Add a highlight on a jagged edge for a collapsed block.
+   * @param {!Row} row  The row to highlight.
+   * @package
+   */
+  drawJaggedEdge_(row) {
+    if (this.info_.RTL) {
+      const remainder =
+          row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;
+      this.steps_ +=
+          this.jaggedTeethPaths_.pathLeft + svgPaths.lineOnAxis('v', remainder);
+    }
   }
-};
 
-Highlighter.prototype.drawRightSideRow = function(row) {
-  const rightEdge = row.xPos + row.width - this.highlightOffset_;
-  if (row.followsStatement) {
-    this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
+  /**
+   * Add a highlight on a value input.
+   * @param {!Row} row The row the input belongs to.
+   * @package
+   */
+  drawValueInput(row) {
+    const input = /** @type {!InlineInput}} */ (row.getLastInput());
+    if (this.RTL_) {
+      const belowTabHeight = row.height - input.connectionHeight;
+
+      this.steps_ +=
+          svgPaths.moveTo(
+              input.xPos + input.width - this.highlightOffset_, row.yPos) +
+          this.puzzleTabPaths_.pathDown(this.RTL_) +
+          svgPaths.lineOnAxis('v', belowTabHeight);
+    } else {
+      this.steps_ += svgPaths.moveTo(input.xPos + input.width, row.yPos) +
+          this.puzzleTabPaths_.pathDown(this.RTL_);
+    }
   }
-  if (this.RTL_) {
-    this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
-    if (row.height > this.highlightOffset_) {
-      this.steps_ += svgPaths.lineOnAxis(
-          'V', row.yPos + row.height - this.highlightOffset_);
+
+  /**
+   * Add a highlight on a statement input.
+   * @param {!Row} row The row to highlight.
+   * @package
+   */
+  drawStatementInput(row) {
+    const input = row.getLastInput();
+    if (this.RTL_) {
+      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) +
+          this.insideCornerPaths_.pathBottom(this.RTL_) +
+          svgPaths.lineTo(
+              row.width - input.xPos - this.insideCornerPaths_.width, 0);
+    } else {
+      this.steps_ += svgPaths.moveTo(input.xPos, row.yPos + row.height) +
+          this.insideCornerPaths_.pathBottom(this.RTL_) +
+          svgPaths.lineTo(
+              row.width - input.xPos - this.insideCornerPaths_.width, 0);
     }
   }
-};
 
-Highlighter.prototype.drawBottomRow = function(row) {
-  // 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_) {
-    this.steps_ +=
-        svgPaths.lineOnAxis('V', row.baseline - this.highlightOffset_);
-  } else {
-    const cornerElem = this.info_.bottomRow.elements[0];
-    if (Types.isLeftSquareCorner(cornerElem)) {
-      this.steps_ += svgPaths.moveTo(
-          row.xPos + this.highlightOffset_,
-          row.baseline - this.highlightOffset_);
-    } else if (Types.isLeftRoundedCorner(cornerElem)) {
-      this.steps_ += svgPaths.moveTo(row.xPos, row.baseline);
-      this.steps_ += this.outsideCornerPaths_.bottomLeft();
+  /**
+   * Add a highlight on the right side of a row.
+   * @param {!Row} row The row to highlight.
+   * @package
+   */
+  drawRightSideRow(row) {
+    const rightEdge = row.xPos + row.width - this.highlightOffset_;
+    if (row instanceof SpacerRow && row.followsStatement) {
+      this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
+    }
+    if (this.RTL_) {
+      this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
+      if (row.height > this.highlightOffset_) {
+        this.steps_ += svgPaths.lineOnAxis(
+            'V', row.yPos + row.height - this.highlightOffset_);
+      }
     }
   }
-};
 
-Highlighter.prototype.drawLeft = function() {
-  const outputConnection = this.info_.outputConnection;
-  if (outputConnection) {
-    const tabBottom =
-        outputConnection.connectionOffsetY + outputConnection.height;
-    // Draw a line up to the bottom of the tab.
+  /**
+   * Add a highlight to the bottom row.
+   * @param {!BottomRow} row The row to highlight.
+   * @package
+   */
+  drawBottomRow(row) {
+    // 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_) {
-      this.steps_ += svgPaths.moveTo(this.info_.startX, tabBottom);
+      this.steps_ +=
+          svgPaths.lineOnAxis('V', row.baseline - this.highlightOffset_);
     } else {
-      const left = this.info_.startX + this.highlightOffset_;
-      const bottom = this.info_.bottomRow.baseline - this.highlightOffset_;
-      this.steps_ += svgPaths.moveTo(left, bottom);
-      this.steps_ += svgPaths.lineOnAxis('V', tabBottom);
+      const cornerElem = this.info_.bottomRow.elements[0];
+      if (Types.isLeftSquareCorner(cornerElem)) {
+        this.steps_ += svgPaths.moveTo(
+            row.xPos + this.highlightOffset_,
+            row.baseline - this.highlightOffset_);
+      } else if (Types.isLeftRoundedCorner(cornerElem)) {
+        this.steps_ += svgPaths.moveTo(row.xPos, row.baseline);
+        this.steps_ += this.outsideCornerPaths_.bottomLeft();
+      }
     }
-    this.steps_ += this.puzzleTabPaths_.pathUp(this.RTL_);
   }
 
-  if (!this.RTL_) {
-    const topRow = this.info_.topRow;
-    if (Types.isLeftRoundedCorner(topRow.elements[0])) {
-      this.steps_ += svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height);
-    } else {
-      this.steps_ +=
-          svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_);
+  /**
+   * Draw the highlight on the left side of the block.
+   * @package
+   */
+  drawLeft() {
+    const outputConnection = this.info_.outputConnection;
+    if (outputConnection) {
+      const tabBottom =
+          outputConnection.connectionOffsetY + outputConnection.height;
+      // Draw a line up to the bottom of the tab.
+      if (this.RTL_) {
+        this.steps_ += svgPaths.moveTo(this.info_.startX, tabBottom);
+      } else {
+        const left = this.info_.startX + this.highlightOffset_;
+        const bottom = this.info_.bottomRow.baseline - this.highlightOffset_;
+        this.steps_ += svgPaths.moveTo(left, bottom);
+        this.steps_ += svgPaths.lineOnAxis('V', tabBottom);
+      }
+      this.steps_ += this.puzzleTabPaths_.pathUp(this.RTL_);
+    }
+
+    if (!this.RTL_) {
+      const topRow = this.info_.topRow;
+      if (Types.isLeftRoundedCorner(topRow.elements[0])) {
+        this.steps_ +=
+            svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height);
+      } else {
+        this.steps_ +=
+            svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_);
+      }
     }
   }
-};
 
-Highlighter.prototype.drawInlineInput = function(input) {
-  const offset = this.highlightOffset_;
+  /**
+   * Add a highlight to an inline input.
+   * @param {!InlineInput} input The input to highlight.
+   * @package
+   */
+  drawInlineInput(input) {
+    const offset = this.highlightOffset_;
 
-  // Relative to the block's left.
-  const connectionRight = input.xPos + input.connectionWidth;
-  const yPos = input.centerline - input.height / 2;
-  const bottomHighlightWidth = input.width - input.connectionWidth;
-  const startY = yPos + offset;
+    // Relative to the block's left.
+    const connectionRight = input.xPos + input.connectionWidth;
+    const yPos = input.centerline - input.height / 2;
+    const bottomHighlightWidth = input.width - input.connectionWidth;
+    const startY = yPos + offset;
 
-  if (this.RTL_) {
-    const aboveTabHeight = input.connectionOffsetY - offset;
-    const belowTabHeight = input.height -
-        (input.connectionOffsetY + input.connectionHeight) + offset;
+    if (this.RTL_) {
+      const aboveTabHeight = input.connectionOffsetY - offset;
+      const belowTabHeight = input.height -
+          (input.connectionOffsetY + input.connectionHeight) + offset;
 
-    const startX = connectionRight - offset;
+      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.
-        svgPaths.lineOnAxis('h', bottomHighlightWidth);
-  } else {
-    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.
-        this.puzzleTabPaths_.pathDown(this.RTL_);
+      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.
+          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.
+          this.puzzleTabPaths_.pathDown(this.RTL_);
+    }
   }
-};
+}
 
 exports.Highlighter = Highlighter;