blockly 7.20211209.3 → 8.0.1-beta.0

package/core/renderers/zelos/marker_svg.js

@@ -16,150 +16,164 @@
 goog.module('Blockly.zelos.MarkerSvg');
 
 const dom = goog.require('Blockly.utils.dom');
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ASTNode} = goog.requireType('Blockly.ASTNode');
 /* eslint-disable-next-line no-unused-vars */
 const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 /* eslint-disable-next-line no-unused-vars */
-const {Connection} = goog.requireType('Blockly.Connection');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {ConstantProvider: BaseConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 const {MarkerSvg: BaseMarkerSvg} = goog.require('Blockly.blockRendering.MarkerSvg');
 /* eslint-disable-next-line no-unused-vars */
 const {Marker} = goog.requireType('Blockly.Marker');
+/* eslint-disable-next-line no-unused-vars */
+const {RenderedConnection} = goog.requireType('Blockly.RenderedConnection');
 const {Svg} = goog.require('Blockly.utils.Svg');
 /* eslint-disable-next-line no-unused-vars */
 const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
+/* eslint-disable-next-line no-unused-vars */
+const {ConstantProvider: ZelosConstantProvider} = goog.requireType('Blockly.zelos.ConstantProvider');
 
 
 /**
  * Class to draw a marker.
- * @param {!WorkspaceSvg} workspace The workspace the marker belongs to.
- * @param {!ConstantProvider} constants The constants for
- *     the renderer.
- * @param {!Marker} marker The marker to draw.
- * @constructor
  * @extends {BaseMarkerSvg}
  * @alias Blockly.zelos.MarkerSvg
  */
-const MarkerSvg = function(workspace, constants, marker) {
-  MarkerSvg.superClass_.constructor.call(this, workspace, constants, marker);
-};
-object.inherits(MarkerSvg, BaseMarkerSvg);
-
-/**
- * Position and display the marker for an input or an output connection.
- * @param {!ASTNode} curNode The node to draw the marker for.
- * @private
- */
-MarkerSvg.prototype.showWithInputOutput_ = function(curNode) {
-  const block = /** @type {!BlockSvg} */ (curNode.getSourceBlock());
-  const connection = /** @type {!Connection} */ (curNode.getLocation());
-  const offsetInBlock = connection.getOffsetInBlock();
-
-  this.positionCircle_(offsetInBlock.x, offsetInBlock.y);
-  this.setParent_(block);
-  this.showCurrent_();
-};
-
-/**
- * @override
- */
-MarkerSvg.prototype.showWithOutput_ = function(curNode) {
-  this.showWithInputOutput_(curNode);
-};
-
-/**
- * @override
- */
-MarkerSvg.prototype.showWithInput_ = function(curNode) {
-  this.showWithInputOutput_(curNode);
-};
+class MarkerSvg extends BaseMarkerSvg {
+  /**
+   * @param {!WorkspaceSvg} workspace The workspace the marker belongs to.
+   * @param {!BaseConstantProvider} constants The constants for
+   *     the renderer.
+   * @param {!Marker} marker The marker to draw.
+   */
+  constructor(workspace, constants, marker) {
+    super(workspace, constants, marker);
+
+    /** @type {!ZelosConstantProvider} */
+    this.constants_;
+
+    /**
+     * @type {SVGCircleElement}
+     * @private
+     */
+    this.markerCircle_ = null;
+  }
 
-/**
- * Draw a rectangle around the block.
- * @param {!ASTNode} curNode The current node of the marker.
- */
-MarkerSvg.prototype.showWithBlock_ = function(curNode) {
-  const block = /** @type {!BlockSvg} */ (curNode.getLocation());
+  /**
+   * Position and display the marker for an input or an output connection.
+   * @param {!ASTNode} curNode The node to draw the marker for.
+   * @private
+   */
+  showWithInputOutput_(curNode) {
+    const block = /** @type {!BlockSvg} */ (curNode.getSourceBlock());
+    const connection =
+        /** @type {!RenderedConnection} */ (curNode.getLocation());
+    const offsetInBlock = connection.getOffsetInBlock();
+
+    this.positionCircle_(offsetInBlock.x, offsetInBlock.y);
+    this.setParent_(block);
+    this.showCurrent_();
+  }
 
-  // Gets the height and width of entire stack.
-  const heightWidth = block.getHeightWidth();
+  /**
+   * @override
+   */
+  showWithOutput_(curNode) {
+    this.showWithInputOutput_(curNode);
+  }
 
-  // Add padding so that being on a stack looks different than being on a block.
-  this.positionRect_(0, 0, heightWidth.width, heightWidth.height);
-  this.setParent_(block);
-  this.showCurrent_();
-};
+  /**
+   * @override
+   */
+  showWithInput_(curNode) {
+    this.showWithInputOutput_(curNode);
+  }
 
-/**
- * Position the circle we use for input and output connections.
- * @param {number} x The x position of the circle.
- * @param {number} y The y position of the circle.
- * @private
- */
-MarkerSvg.prototype.positionCircle_ = function(x, y) {
-  this.markerCircle_.setAttribute('cx', x);
-  this.markerCircle_.setAttribute('cy', y);
-  this.currentMarkerSvg = this.markerCircle_;
-};
+  /**
+   * Draw a rectangle around the block.
+   * @param {!ASTNode} curNode The current node of the marker.
+   */
+  showWithBlock_(curNode) {
+    const block = /** @type {!BlockSvg} */ (curNode.getLocation());
+
+    // Gets the height and width of entire stack.
+    const heightWidth = block.getHeightWidth();
+
+    // Add padding so that being on a stack looks different than being on a
+    // block.
+    this.positionRect_(0, 0, heightWidth.width, heightWidth.height);
+    this.setParent_(block);
+    this.showCurrent_();
+  }
 
-/**
- * @override
- */
-MarkerSvg.prototype.hide = function() {
-  MarkerSvg.superClass_.hide.call(this);
-  this.markerCircle_.style.display = 'none';
-};
+  /**
+   * Position the circle we use for input and output connections.
+   * @param {number} x The x position of the circle.
+   * @param {number} y The y position of the circle.
+   * @private
+   */
+  positionCircle_(x, y) {
+    this.markerCircle_.setAttribute('cx', x);
+    this.markerCircle_.setAttribute('cy', y);
+    this.currentMarkerSvg = this.markerCircle_;
+  }
 
-/**
- * @override
- */
-MarkerSvg.prototype.createDomInternal_ = function() {
-  /* clang-format off */
-  /* This markup will be generated and added to the .svgGroup_:
-  <g>
-    <rect width="100" height="5">
-      <animate attributeType="XML" attributeName="fill" dur="1s"
-        values="transparent;transparent;#fff;transparent" repeatCount="indefinite" />
-    </rect>
-  </g>
-  */
-  /* clang-format on */
-
-  MarkerSvg.superClass_.createDomInternal_.call(this);
-
-  this.markerCircle_ = dom.createSvgElement(
-      Svg.CIRCLE, {
-        'r': this.constants_.CURSOR_RADIUS,
-        'style': 'display: none',
-        'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
-      },
-      this.markerSvg_);
-
-  // Markers and stack cursors don't blink.
-  if (this.isCursor()) {
-    const blinkProperties = this.getBlinkProperties_();
-    dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerCircle_);
+  /**
+   * @override
+   */
+  hide() {
+    super.hide();
+    this.markerCircle_.style.display = 'none';
   }
 
-  return this.markerSvg_;
-};
+  /**
+   * @override
+   */
+  createDomInternal_() {
+    /* clang-format off */
+    /* This markup will be generated and added to the .svgGroup_:
+    <g>
+      <rect width="100" height="5">
+        <animate attributeType="XML" attributeName="fill" dur="1s"
+          values="transparent;transparent;#fff;transparent" repeatCount="indefinite" />
+      </rect>
+    </g>
+    */
+    /* clang-format on */
+
+    super.createDomInternal_();
+
+    this.markerCircle_ = dom.createSvgElement(
+        Svg.CIRCLE, {
+          'r': this.constants_.CURSOR_RADIUS,
+          'style': 'display: none',
+          'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
+        },
+        this.markerSvg_);
+
+    // Markers and stack cursors don't blink.
+    if (this.isCursor()) {
+      const blinkProperties = this.getBlinkProperties_();
+      dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerCircle_);
+    }
+
+    return this.markerSvg_;
+  }
 
-/**
- * @override
- */
-MarkerSvg.prototype.applyColour_ = function(curNode) {
-  MarkerSvg.superClass_.applyColour_.call(this, curNode);
+  /**
+   * @override
+   */
+  applyColour_(curNode) {
+    super.applyColour_(curNode);
 
-  this.markerCircle_.setAttribute('fill', this.colour_);
-  this.markerCircle_.setAttribute('stroke', this.colour_);
+    this.markerCircle_.setAttribute('fill', this.colour_);
+    this.markerCircle_.setAttribute('stroke', this.colour_);
 
-  if (this.isCursor()) {
-    const values = this.colour_ + ';transparent;transparent;';
-    this.markerCircle_.firstChild.setAttribute('values', values);
+    if (this.isCursor()) {
+      const values = this.colour_ + ';transparent;transparent;';
+      this.markerCircle_.firstChild.setAttribute('values', values);
+    }
   }
-};
+}
 
 exports.MarkerSvg = MarkerSvg;

package/core/renderers/zelos/measurables/bottom_row.js

@@ -15,7 +15,6 @@
  */
 goog.module('Blockly.zelos.BottomRow');
 
-const object = goog.require('Blockly.utils.object');
 const {BottomRow: BaseBottomRow} = goog.require('Blockly.blockRendering.BottomRow');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
@@ -26,40 +25,42 @@ const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProv
  * a block as well as spacing information for the top row.
  * Elements in a bottom row can consist of corners, spacers and next
  * connections.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
  * @extends {BaseBottomRow}
  * @alias Blockly.zelos.BottomRow
  */
-const BottomRow = function(constants) {
-  BottomRow.superClass_.constructor.call(this, constants);
-};
-object.inherits(BottomRow, BaseBottomRow);
+class BottomRow extends BaseBottomRow {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @package
+   */
+  constructor(constants) {
+    super(constants);
+  }
 
-/**
- * @override
- */
-BottomRow.prototype.endsWithElemSpacer = function() {
-  return false;
-};
+  /**
+   * @override
+   */
+  endsWithElemSpacer() {
+    return false;
+  }
 
-/**
- * Render a round corner unless the block has an output connection.
- * @override
- */
-BottomRow.prototype.hasLeftSquareCorner = function(block) {
-  return !!block.outputConnection;
-};
+  /**
+   * Render a round corner unless the block has an output connection.
+   * @override
+   */
+  hasLeftSquareCorner(block) {
+    return !!block.outputConnection;
+  }
 
-/**
- * Render a round corner unless the block has an output connection.
- * @override
- */
-BottomRow.prototype.hasRightSquareCorner = function(block) {
-  return !!block.outputConnection && !block.statementInputCount &&
-      !block.nextConnection;
-};
+  /**
+   * Render a round corner unless the block has an output connection.
+   * @override
+   */
+  hasRightSquareCorner(block) {
+    return !!block.outputConnection && !block.statementInputCount &&
+        !block.nextConnection;
+  }
+}
 
 exports.BottomRow = BottomRow;

package/core/renderers/zelos/measurables/inputs.js

@@ -16,7 +16,6 @@
  */
 goog.module('Blockly.zelos.StatementInput');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 /* eslint-disable-next-line no-unused-vars */
@@ -26,31 +25,33 @@ const {StatementInput: BaseStatementInput} = goog.require('Blockly.blockRenderin
 
 /**
  * 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
+ * during rendering.
  * @extends {BaseStatementInput}
  * @alias Blockly.zelos.StatementInput
  */
-const StatementInput = function(constants, input) {
-  StatementInput.superClass_.constructor.call(this, constants, input);
+class StatementInput extends BaseStatementInput {
+  /**
+   * @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);
 
-  if (this.connectedBlock) {
-    // Find the bottom-most connected block in the stack.
-    let block = this.connectedBlock;
-    let nextBlock;
-    while ((nextBlock = block.getNextBlock())) {
-      block = nextBlock;
-    }
-    if (!block.nextConnection) {
-      this.height = this.connectedBlockHeight;
-      this.connectedBottomNextConnection = true;
+    if (this.connectedBlock) {
+      // Find the bottom-most connected block in the stack.
+      let block = this.connectedBlock;
+      let nextBlock;
+      while ((nextBlock = block.getNextBlock())) {
+        block = nextBlock;
+      }
+      if (!block.nextConnection) {
+        this.height = this.connectedBlockHeight;
+        this.connectedBottomNextConnection = true;
+      }
     }
   }
-};
-object.inherits(StatementInput, BaseStatementInput);
+}
 
 exports.StatementInput = StatementInput;

package/core/renderers/zelos/measurables/row_elements.js

@@ -16,7 +16,6 @@
  */
 goog.module('Blockly.zelos.RightConnectionShape');
 
-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,20 +25,22 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 /**
  * An object containing information about the space a right connection shape
  * takes up during rendering.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
  * @extends {Measurable}
  * @alias Blockly.zelos.RightConnectionShape
  */
-const RightConnectionShape = function(constants) {
-  RightConnectionShape.superClass_.constructor.call(this, constants);
-  this.type |= Types.getType('RIGHT_CONNECTION');
-  // Size is dynamic
-  this.height = 0;
-  this.width = 0;
-};
-object.inherits(RightConnectionShape, Measurable);
+class RightConnectionShape extends Measurable {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @package
+   */
+  constructor(constants) {
+    super(constants);
+    this.type |= Types.getType('RIGHT_CONNECTION');
+    // Size is dynamic
+    this.height = 0;
+    this.width = 0;
+  }
+}
 
 exports.RightConnectionShape = RightConnectionShape;

package/core/renderers/zelos/measurables/top_row.js

@@ -15,7 +15,6 @@
  */
 goog.module('Blockly.zelos.TopRow');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 const {TopRow: BaseTopRow} = goog.require('Blockly.blockRendering.TopRow');
@@ -28,43 +27,45 @@ const {TopRow: BaseTopRow} = goog.require('Blockly.blockRendering.TopRow');
  * connections.
  * After this constructor is called, the row will contain all non-spacer
  * elements it needs.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
  * @extends {BaseTopRow}
  * @alias Blockly.zelos.TopRow
  */
-const TopRow = function(constants) {
-  TopRow.superClass_.constructor.call(this, constants);
-};
-object.inherits(TopRow, BaseTopRow);
+class TopRow extends BaseTopRow {
+  /**
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @package
+   */
+  constructor(constants) {
+    super(constants);
+  }
 
-/**
- * @override
- */
-TopRow.prototype.endsWithElemSpacer = function() {
-  return false;
-};
+  /**
+   * @override
+   */
+  endsWithElemSpacer() {
+    return false;
+  }
 
-/**
- * Render a round corner unless the block has an output connection.
- * @override
- */
-TopRow.prototype.hasLeftSquareCorner = function(block) {
-  const hasHat =
-      (block.hat ? block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
-      !block.outputConnection && !block.previousConnection;
-  return !!block.outputConnection || hasHat;
-};
+  /**
+   * Render a round corner unless the block has an output connection.
+   * @override
+   */
+  hasLeftSquareCorner(block) {
+    const hasHat =
+        (block.hat ? block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
+        !block.outputConnection && !block.previousConnection;
+    return !!block.outputConnection || hasHat;
+  }
 
-/**
- * Render a round corner unless the block has an output connection.
- * @override
- */
-TopRow.prototype.hasRightSquareCorner = function(block) {
-  return !!block.outputConnection && !block.statementInputCount &&
-      !block.nextConnection;
-};
+  /**
+   * Render a round corner unless the block has an output connection.
+   * @override
+   */
+  hasRightSquareCorner(block) {
+    return !!block.outputConnection && !block.statementInputCount &&
+        !block.nextConnection;
+  }
+}
 
 exports.TopRow = TopRow;