blockly 7.20211209.3 → 8.0.1-beta.0

package/core/renderers/measurables/row.js

@@ -28,204 +28,220 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 /**
  * An object representing a single row on a rendered block and all of its
  * subcomponents.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
  * @alias Blockly.blockRendering.Row
  */
-const Row = function(constants) {
+class Row {
   /**
-   * The type of this rendering object.
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
    * @package
-   * @type {number}
    */
-  this.type = Types.ROW;
-
-  /**
-   * An array of elements contained in this row.
-   * @package
-   * @type {!Array<!Measurable>}
-   */
-  this.elements = [];
-
-  /**
-   * The height of the row.
-   * @package
-   * @type {number}
-   */
-  this.height = 0;
-
-  /**
-   * The width of the row, from the left edge of the block to the right.
-   * Does not include child blocks unless they are inline.
-   * @package
-   * @type {number}
-   */
-  this.width = 0;
-
-  /**
-   * The minimum height of the row.
-   * @package
-   * @type {number}
-   */
-  this.minHeight = 0;
-
-  /**
-   * The minimum width of the row, from the left edge of the block to the right.
-   * Does not include child blocks unless they are inline.
-   * @package
-   * @type {number}
-   */
-  this.minWidth = 0;
-
-  /**
-   * The width of the row, from the left edge of the block to the edge of the
-   * block or any connected child blocks.
-   * @package
-   * @type {number}
-   */
-  this.widthWithConnectedBlocks = 0;
-
-  /**
-   * The Y position of the row relative to the origin of the block's svg group.
-   * @package
-   * @type {number}
-   */
-  this.yPos = 0;
-
-  /**
-   * The X position of the row relative to the origin of the block's svg group.
-   * @package
-   * @type {number}
-   */
-  this.xPos = 0;
+  constructor(constants) {
+    /**
+     * The type of this rendering object.
+     * @package
+     * @type {number}
+     */
+    this.type = Types.ROW;
+
+    /**
+     * An array of elements contained in this row.
+     * @package
+     * @type {!Array<!Measurable>}
+     */
+    this.elements = [];
+
+    /**
+     * The height of the row.
+     * @package
+     * @type {number}
+     */
+    this.height = 0;
+
+    /**
+     * The width of the row, from the left edge of the block to the right.
+     * Does not include child blocks unless they are inline.
+     * @package
+     * @type {number}
+     */
+    this.width = 0;
+
+    /**
+     * The minimum height of the row.
+     * @package
+     * @type {number}
+     */
+    this.minHeight = 0;
+
+    /**
+     * The minimum width of the row, from the left edge of the block to the
+     * right. Does not include child blocks unless they are inline.
+     * @package
+     * @type {number}
+     */
+    this.minWidth = 0;
+
+    /**
+     * The width of the row, from the left edge of the block to the edge of the
+     * block or any connected child blocks.
+     * @package
+     * @type {number}
+     */
+    this.widthWithConnectedBlocks = 0;
+
+    /**
+     * The Y position of the row relative to the origin of the block's svg
+     * group.
+     * @package
+     * @type {number}
+     */
+    this.yPos = 0;
+
+    /**
+     * The X position of the row relative to the origin of the block's svg
+     * group.
+     * @package
+     * @type {number}
+     */
+    this.xPos = 0;
+
+    /**
+     * Whether the row has any external inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasExternalInput = false;
+
+    /**
+     * Whether the row has any statement inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasStatement = false;
+
+    /**
+     * Where the left edge of all of the statement inputs on the block should
+     * be. This makes sure that statement inputs which are proceded by fields
+     * of varius widths are all aligned.
+     * @type {number}
+     */
+    this.statementEdge = 0;
+
+    /**
+     * Whether the row has any inline inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasInlineInput = false;
+
+    /**
+     * Whether the row has any dummy inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasDummyInput = false;
+
+    /**
+     * Whether the row has a jagged edge.
+     * @package
+     * @type {boolean}
+     */
+    this.hasJaggedEdge = false;
+
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     * @protected
+     */
+    this.constants_ = constants;
+
+    /**
+     * @type {number}
+     */
+    this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+
+    /**
+     * Alignment of the row.
+     * @package
+     * @type {?number}
+     */
+    this.align = null;
+  }
 
   /**
-   * Whether the row has any external inputs.
+   * Get the last input on this row, if it has one.
+   * @return {InputConnection} The last input on the row,
+   *     or null.
    * @package
-   * @type {boolean}
    */
-  this.hasExternalInput = false;
+  getLastInput() {
+    // TODO: Consider moving this to InputRow, if possible.
+    for (let i = this.elements.length - 1; i >= 0; i--) {
+      const elem = this.elements[i];
+      if (Types.isInput(elem)) {
+        return /** @type {InputConnection} */ (elem);
+      }
+    }
+    return null;
+  }
 
   /**
-   * Whether the row has any statement inputs.
+   * Inspect all subcomponents and populate all size properties on the row.
    * @package
-   * @type {boolean}
    */
-  this.hasStatement = false;
+  measure() {
+    throw Error('Unexpected attempt to measure a base Row.');
+  }
 
   /**
-   * Whether the row has any inline inputs.
+   * Determines whether this row should start with an element spacer.
+   * @return {boolean} Whether the row should start with a spacer.
    * @package
-   * @type {boolean}
    */
-  this.hasInlineInput = false;
+  startsWithElemSpacer() {
+    return true;
+  }
 
   /**
-   * Whether the row has any dummy inputs.
+   * Determines whether this row should end with an element spacer.
+   * @return {boolean} Whether the row should end with a spacer.
    * @package
-   * @type {boolean}
    */
-  this.hasDummyInput = false;
+  endsWithElemSpacer() {
+    return true;
+  }
 
   /**
-   * Whether the row has a jagged edge.
+   * Convenience method to get the first spacer element on this row.
+   * @return {InRowSpacer} The first spacer element on
+   *   this row.
    * @package
-   * @type {boolean}
    */
-  this.hasJaggedEdge = false;
-
-  /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
-   * @protected
-   */
-  this.constants_ = constants;
-
-  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+  getFirstSpacer() {
+    for (let i = 0; i < this.elements.length; i++) {
+      const elem = this.elements[i];
+      if (Types.isSpacer(elem)) {
+        return /** @type {InRowSpacer} */ (elem);
+      }
+    }
+    return null;
+  }
 
   /**
-   * Alignment of the row.
+   * Convenience method to get the last spacer element on this row.
+   * @return {InRowSpacer} The last spacer element on
+   *   this row.
    * @package
-   * @type {?number}
    */
-  this.align = null;
-};
-
-/**
- * Get the last input on this row, if it has one.
- * @return {InputConnection} The last input on the row,
- *     or null.
- * @package
- */
-// TODO: Consider moving this to InputRow, if possible.
-Row.prototype.getLastInput = function() {
-  for (let i = this.elements.length - 1; i >= 0; i--) {
-    const elem = this.elements[i];
-    if (Types.isInput(elem)) {
-      return /** @type {InputConnection} */ (elem);
-    }
-  }
-  return null;
-};
-
-/**
- * Inspect all subcomponents and populate all size properties on the row.
- * @package
- */
-Row.prototype.measure = function() {
-  throw Error('Unexpected attempt to measure a base Row.');
-};
-
-/**
- * Determines whether this row should start with an element spacer.
- * @return {boolean} Whether the row should start with a spacer.
- * @package
- */
-Row.prototype.startsWithElemSpacer = function() {
-  return true;
-};
-
-/**
- * Determines whether this row should end with an element spacer.
- * @return {boolean} Whether the row should end with a spacer.
- * @package
- */
-Row.prototype.endsWithElemSpacer = function() {
-  return true;
-};
-
-/**
- * Convenience method to get the first spacer element on this row.
- * @return {InRowSpacer} The first spacer element on
- *   this row.
- * @package
- */
-Row.prototype.getFirstSpacer = function() {
-  for (let i = 0; i < this.elements.length; i++) {
-    const elem = this.elements[i];
-    if (Types.isSpacer(elem)) {
-      return /** @type {InRowSpacer} */ (elem);
-    }
-  }
-  return null;
-};
-
-/**
- * Convenience method to get the last spacer element on this row.
- * @return {InRowSpacer} The last spacer element on
- *   this row.
- * @package
- */
-Row.prototype.getLastSpacer = function() {
-  for (let i = this.elements.length - 1; i >= 0; i--) {
-    const elem = this.elements[i];
-    if (Types.isSpacer(elem)) {
-      return /** @type {InRowSpacer} */ (elem);
+  getLastSpacer() {
+    for (let i = this.elements.length - 1; i >= 0; i--) {
+      const elem = this.elements[i];
+      if (Types.isSpacer(elem)) {
+        return /** @type {InRowSpacer} */ (elem);
+      }
     }
+    return null;
   }
-  return null;
-};
+}
 
 exports.Row = Row;

package/core/renderers/measurables/spacer_row.js

@@ -14,7 +14,6 @@
  */
 goog.module('Blockly.blockRendering.SpacerRow');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 const {InRowSpacer} = goog.require('Blockly.blockRendering.InRowSpacer');
@@ -24,31 +23,47 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 
 /**
  * An object containing information about a spacer between two rows.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @param {number} height The height of the spacer.
- * @param {number} width The width of the spacer.
- * @package
- * @constructor
  * @extends {Row}
+ * @struct
  * @alias Blockly.blockRendering.SpacerRow
  */
-const SpacerRow = function(constants, height, width) {
-  SpacerRow.superClass_.constructor.call(this, constants);
-  this.type |= Types.SPACER | Types.BETWEEN_ROW_SPACER;
-  this.width = width;
-  this.height = height;
-  this.followsStatement = false;
-  this.widthWithConnectedBlocks = 0;
-  this.elements = [new InRowSpacer(this.constants_, width)];
-};
-object.inherits(SpacerRow, Row);
+class SpacerRow extends Row {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @param {number} height The height of the spacer.
+   * @param {number} width The width of the spacer.
+   * @package
+   */
+  constructor(constants, height, width) {
+    super(constants);
+    this.type |= Types.SPACER | Types.BETWEEN_ROW_SPACER;
 
-/**
- * @override
- */
-SpacerRow.prototype.measure = function() {
-  // NOP.  Width and height were set at creation.
-};
+    /** @type {number} */
+    this.width = width;
+
+    /** @type {number} */
+    this.height = height;
+
+    /** @type {boolean} */
+    this.followsStatement = false;
+
+    /** @type {boolean} */
+    this.precedesStatement = false;
+
+    /** @type {number} */
+    this.widthWithConnectedBlocks = 0;
+
+    /** @type {!Array.<!InRowSpacer>} */
+    this.elements = [new InRowSpacer(this.constants_, width)];
+  }
+
+  /**
+   * @override
+   */
+  measure() {
+    // NOP.  Width and height were set at creation.
+  }
+}
 
 exports.SpacerRow = SpacerRow;

package/core/renderers/measurables/square_corner.js

@@ -16,7 +16,6 @@
  */
 goog.module('Blockly.blockRendering.SquareCorner');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 const {Measurable} = goog.require('Blockly.blockRendering.Measurable');
@@ -26,23 +25,26 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 /**
  * An object containing information about the space a square corner takes up
  * during rendering.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @param {string=} opt_position The position of this corner.
- * @package
- * @constructor
  * @extends {Measurable}
+ * @struct
  * @alias Blockly.blockRendering.SquareCorner
  */
-const SquareCorner = function(constants, opt_position) {
-  SquareCorner.superClass_.constructor.call(this, constants);
-  this.type =
-      ((!opt_position || opt_position === 'left') ? Types.LEFT_SQUARE_CORNER :
-                                                    Types.RIGHT_SQUARE_CORNER) |
-      Types.CORNER;
-  this.height = this.constants_.NO_PADDING;
-  this.width = this.constants_.NO_PADDING;
-};
-object.inherits(SquareCorner, Measurable);
+class SquareCorner extends Measurable {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @param {string=} opt_position The position of this corner.
+   * @package
+   */
+  constructor(constants, opt_position) {
+    super(constants);
+    this.type = ((!opt_position || opt_position === 'left') ?
+                     Types.LEFT_SQUARE_CORNER :
+                     Types.RIGHT_SQUARE_CORNER) |
+        Types.CORNER;
+    this.height = this.constants_.NO_PADDING;
+    this.width = this.constants_.NO_PADDING;
+  }
+}
 
 exports.SquareCorner = SquareCorner;

package/core/renderers/measurables/statement_input.js

@@ -16,7 +16,6 @@
  */
 goog.module('Blockly.blockRendering.StatementInput');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 const {InputConnection} = goog.require('Blockly.blockRendering.InputConnection');
@@ -28,29 +27,33 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 /**
  * An object containing information about the space a statement input takes up
  * during rendering
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @param {!Input} input The statement input to measure and store
- *     information for.
- * @package
- * @constructor
+ * @struct
  * @extends {InputConnection}
  * @alias Blockly.blockRendering.StatementInput
  */
-const StatementInput = function(constants, input) {
-  StatementInput.superClass_.constructor.call(this, constants, input);
-  this.type |= Types.STATEMENT_INPUT;
+class StatementInput extends InputConnection {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @param {!Input} input The statement input to measure and store
+   *     information for.
+   * @package
+   */
+  constructor(constants, input) {
+    super(constants, input);
+    this.type |= Types.STATEMENT_INPUT;
 
-  if (!this.connectedBlock) {
-    this.height = this.constants_.EMPTY_STATEMENT_INPUT_HEIGHT;
-  } else {
-    // We allow the dark path to show on the parent block so that the child
-    // block looks embossed.  This takes up an extra pixel in both x and y.
-    this.height =
-        this.connectedBlockHeight + this.constants_.STATEMENT_BOTTOM_SPACER;
+    if (!this.connectedBlock) {
+      this.height = this.constants_.EMPTY_STATEMENT_INPUT_HEIGHT;
+    } else {
+      // We allow the dark path to show on the parent block so that the child
+      // block looks embossed.  This takes up an extra pixel in both x and y.
+      this.height =
+          this.connectedBlockHeight + this.constants_.STATEMENT_BOTTOM_SPACER;
+    }
+    this.width =
+        this.constants_.STATEMENT_INPUT_NOTCH_OFFSET + this.shape.width;
   }
-  this.width = this.constants_.STATEMENT_INPUT_NOTCH_OFFSET + this.shape.width;
-};
-object.inherits(StatementInput, InputConnection);
+}
 
 exports.StatementInput = StatementInput;