blockly 7.20211209.2 → 8.0.0

package/core/renderers/geras/measurables/inline_input.js

@@ -17,9 +17,10 @@
  */
 goog.module('Blockly.geras.InlineInput');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {ConstantProvider: BaseConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+/* eslint-disable-next-line no-unused-vars */
+const {ConstantProvider: GerasConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
 const {InlineInput: BaseInlineInput} = goog.require('Blockly.blockRendering.InlineInput');
 /* eslint-disable-next-line no-unused-vars */
 const {Input} = goog.requireType('Blockly.Input');
@@ -27,26 +28,31 @@ const {Input} = goog.requireType('Blockly.Input');
 
 /**
  * An object containing information about the space an inline input takes up
- * during rendering
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @param {!Input} input The inline input to measure and store
- *     information for.
- * @package
- * @constructor
+ * during rendering.
  * @extends {BaseInlineInput}
  * @alias Blockly.geras.InlineInput
  */
-const InlineInput = function(constants, input) {
-  InlineInput.superClass_.constructor.call(this, constants, input);
-
-  if (this.connectedBlock) {
-    // 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.width += this.constants_.DARK_PATH_OFFSET;
-    this.height += this.constants_.DARK_PATH_OFFSET;
+class InlineInput extends BaseInlineInput {
+  /**
+   * @param {!BaseConstantProvider} constants The rendering
+   *   constants provider.
+   * @param {!Input} input The inline input to measure and store
+   *     information for.
+   * @package
+   */
+  constructor(constants, input) {
+    super(constants, input);
+
+    /** @type {!GerasConstantProvider} */
+    this.constants_;
+
+    if (this.connectedBlock) {
+      // 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.width += this.constants_.DARK_PATH_OFFSET;
+      this.height += this.constants_.DARK_PATH_OFFSET;
+    }
   }
-};
-object.inherits(InlineInput, BaseInlineInput);
+}
 
 exports.InlineInput = InlineInput;

package/core/renderers/geras/measurables/statement_input.js

@@ -17,9 +17,10 @@
  */
 goog.module('Blockly.geras.StatementInput');
 
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {ConstantProvider: BaseConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+/* eslint-disable-next-line no-unused-vars */
+const {ConstantProvider: GerasConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
 /* eslint-disable-next-line no-unused-vars */
 const {Input} = goog.requireType('Blockly.Input');
 const {StatementInput: BaseStatementInput} = goog.require('Blockly.blockRendering.StatementInput');
@@ -27,25 +28,30 @@ 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.geras.StatementInput
  */
-const StatementInput = function(constants, input) {
-  StatementInput.superClass_.constructor.call(this, constants, input);
+class StatementInput extends BaseStatementInput {
+  /**
+   * @param {!BaseConstantProvider} constants The rendering
+   *   constants provider.
+   * @param {!Input} input The statement input to measure and store
+   *     information for.
+   * @package
+   */
+  constructor(constants, input) {
+    super(constants, input);
+
+    /** @type {!GerasConstantProvider} */
+    this.constants_;
 
-  if (this.connectedBlock) {
-    // 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.constants_.DARK_PATH_OFFSET;
+    if (this.connectedBlock) {
+      // 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.constants_.DARK_PATH_OFFSET;
+    }
   }
-};
-object.inherits(StatementInput, BaseStatementInput);
+}
 
 exports.StatementInput = StatementInput;

package/core/renderers/geras/path_object.js

@@ -18,7 +18,6 @@ goog.module('Blockly.geras.PathObject');
 
 const colour = goog.require('Blockly.utils.colour');
 const dom = goog.require('Blockly.utils.dom');
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
 const {PathObject: BasePathObject} = goog.require('Blockly.blockRendering.PathObject');
@@ -30,152 +29,138 @@ const {Theme} = goog.requireType('Blockly.Theme');
 /**
  * An object that handles creating and setting each of the SVG elements
  * used by the renderer.
- * @param {!SVGElement} root The root SVG element.
- * @param {!Theme.BlockStyle} style The style object to use for
- *     colouring.
- * @param {!ConstantProvider} constants The renderer's constants.
- * @constructor
- * @extends {BasePathObject}
- * @package
  * @alias Blockly.geras.PathObject
  */
-const PathObject = function(root, style, constants) {
+class PathObject extends BasePathObject {
   /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
-   */
-  this.constants = constants;
-
-  this.svgRoot = root;
-
-  // The order of creation for these next three matters, because that
-  // effectively sets their z-indices.
-
-  /**
-   * The dark path of the block.
-   * @type {SVGElement}
+   * @param {!SVGElement} root The root SVG element.
+   * @param {!Theme.BlockStyle} style The style object to use for
+   *     colouring.
+   * @param {!ConstantProvider} constants The renderer's constants.
    * @package
    */
-  this.svgPathDark = dom.createSvgElement(
-      Svg.PATH, {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'},
-      this.svgRoot);
+  constructor(root, style, constants) {
+    super(root, style, constants);
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     */
+    this.constants = constants;
+
+    /**
+     * The dark path of the block.
+     * @type {SVGElement}
+     * @package
+     */
+    this.svgPathDark = dom.createSvgElement(
+        Svg.PATH, {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'});
+
+    // SVG draw order is based on the order of elements (top most = back most)
+    // So we need to insert the dark path before the base path to make sure it
+    // gets drawn first.
+    this.svgRoot.insertBefore(this.svgPathDark, this.svgPath);
+
+    /**
+     * The light path of the block.
+     * @type {SVGElement}
+     * @package
+     */
+    this.svgPathLight = dom.createSvgElement(
+        Svg.PATH, {'class': 'blocklyPathLight'}, this.svgRoot);
+
+    /**
+     * The colour of the dark path on the block in '#RRGGBB' format.
+     * @type {string}
+     * @package
+     */
+    this.colourDark = '#000000';
+  }
 
   /**
-   * The primary path of the block.
-   * @type {!SVGElement}
-   * @package
+   * @override
    */
-  this.svgPath =
-      dom.createSvgElement(Svg.PATH, {'class': 'blocklyPath'}, this.svgRoot);
+  setPath(mainPath) {
+    this.svgPath.setAttribute('d', mainPath);
+    this.svgPathDark.setAttribute('d', mainPath);
+  }
 
   /**
-   * The light path of the block.
-   * @type {SVGElement}
+   * Set the highlight path generated by the renderer onto the SVG element.
+   * @param {string} highlightPath The highlight path.
    * @package
    */
-  this.svgPathLight = dom.createSvgElement(
-      Svg.PATH, {'class': 'blocklyPathLight'}, this.svgRoot);
+  setHighlightPath(highlightPath) {
+    this.svgPathLight.setAttribute('d', highlightPath);
+  }
 
   /**
-   * The colour of the dark path on the block in '#RRGGBB' format.
-   * @type {string}
-   * @package
+   * @override
    */
-  this.colourDark = '#000000';
+  flipRTL() {
+    // Mirror the block's path.
+    this.svgPath.setAttribute('transform', 'scale(-1 1)');
+    this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
+    this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
+  }
 
   /**
-   * The style object to use when colouring block paths.
-   * @type {!Theme.BlockStyle}
-   * @package
+   * @override
    */
-  this.style = style;
-};
-object.inherits(PathObject, BasePathObject);
+  applyColour(block) {
+    this.svgPathLight.style.display = '';
+    this.svgPathDark.style.display = '';
+    this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
+    this.svgPathDark.setAttribute('fill', this.colourDark);
 
-/**
- * @override
- */
-PathObject.prototype.setPath = function(mainPath) {
-  this.svgPath.setAttribute('d', mainPath);
-  this.svgPathDark.setAttribute('d', mainPath);
-};
-
-/**
- * Set the highlight path generated by the renderer onto the SVG element.
- * @param {string} highlightPath The highlight path.
- * @package
- */
-PathObject.prototype.setHighlightPath = function(highlightPath) {
-  this.svgPathLight.setAttribute('d', highlightPath);
-};
-
-/**
- * @override
- */
-PathObject.prototype.flipRTL = function() {
-  // Mirror the block's path.
-  this.svgPath.setAttribute('transform', 'scale(-1 1)');
-  this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
-  this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
-};
-
-/**
- * @override
- */
-PathObject.prototype.applyColour = function(block) {
-  this.svgPathLight.style.display = '';
-  this.svgPathDark.style.display = '';
-  this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
-  this.svgPathDark.setAttribute('fill', this.colourDark);
+    super.applyColour(block);
 
-  PathObject.superClass_.applyColour.call(this, block);
-
-  this.svgPath.setAttribute('stroke', 'none');
-};
+    this.svgPath.setAttribute('stroke', 'none');
+  }
 
-/**
- * @override
- */
-PathObject.prototype.setStyle = function(blockStyle) {
-  this.style = blockStyle;
-  this.colourDark =
-      colour.blend('#000', this.style.colourPrimary, 0.2) || this.colourDark;
-};
+  /**
+   * @override
+   */
+  setStyle(blockStyle) {
+    this.style = blockStyle;
+    this.colourDark =
+        colour.blend('#000', this.style.colourPrimary, 0.2) || this.colourDark;
+  }
 
-/**
- * @override
- */
-PathObject.prototype.updateHighlighted = function(highlighted) {
-  if (highlighted) {
-    this.svgPath.setAttribute(
-        'filter', 'url(#' + this.constants.embossFilterId + ')');
-    this.svgPathLight.style.display = 'none';
-  } else {
-    this.svgPath.setAttribute('filter', 'none');
-    this.svgPathLight.style.display = 'inline';
+  /**
+   * @override
+   */
+  updateHighlighted(highlighted) {
+    if (highlighted) {
+      this.svgPath.setAttribute(
+          'filter', 'url(#' + this.constants.embossFilterId + ')');
+      this.svgPathLight.style.display = 'none';
+    } else {
+      this.svgPath.setAttribute('filter', 'none');
+      this.svgPathLight.style.display = 'inline';
+    }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.updateShadow_ = function(shadow) {
-  if (shadow) {
-    this.svgPathLight.style.display = 'none';
-    this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
-    this.svgPath.setAttribute('stroke', 'none');
-    this.svgPath.setAttribute('fill', this.style.colourSecondary);
+  /**
+   * @override
+   */
+  updateShadow_(shadow) {
+    if (shadow) {
+      this.svgPathLight.style.display = 'none';
+      this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
+      this.svgPath.setAttribute('stroke', 'none');
+      this.svgPath.setAttribute('fill', this.style.colourSecondary);
+    }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.updateDisabled_ = function(disabled) {
-  PathObject.superClass_.updateDisabled_.call(this, disabled);
-  if (disabled) {
-    this.svgPath.setAttribute('stroke', 'none');
+  /**
+   * @override
+   */
+  updateDisabled_(disabled) {
+    super.updateDisabled_(disabled);
+    if (disabled) {
+      this.svgPath.setAttribute('stroke', 'none');
+    }
   }
-};
+}
 
 exports.PathObject = PathObject;

package/core/renderers/geras/renderer.js

@@ -16,7 +16,6 @@
 goog.module('Blockly.geras.Renderer');
 
 const blockRendering = goog.require('Blockly.blockRendering');
-const object = goog.require('Blockly.utils.object');
 /* eslint-disable-next-line no-unused-vars */
 const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 /* eslint-disable-next-line no-unused-vars */
@@ -35,116 +34,115 @@ const {Theme} = goog.requireType('Blockly.Theme');
 
 /**
  * The geras renderer.
- * @param {string} name The renderer name.
- * @package
- * @constructor
  * @extends {BaseRenderer}
  * @alias Blockly.geras.Renderer
  */
-const Renderer = function(name) {
-  Renderer.superClass_.constructor.call(this, name);
-
+class Renderer extends BaseRenderer {
   /**
-   * The renderer's highlight constant provider.
-   * @type {HighlightConstantProvider}
-   * @private
+   * @param {string} name The renderer name.
+   * @package
    */
-  this.highlightConstants_ = null;
-};
-object.inherits(Renderer, BaseRenderer);
+  constructor(name) {
+    super(name);
 
-/**
- * Initialize the renderer.  Geras has a highlight provider in addition to
- * the normal constant provider.
- * @package
- * @override
- */
-Renderer.prototype.init = function(theme, opt_rendererOverrides) {
-  Renderer.superClass_.init.call(this, theme, opt_rendererOverrides);
-  this.highlightConstants_ = this.makeHighlightConstants_();
-  this.highlightConstants_.init();
-};
+    /**
+     * The renderer's highlight constant provider.
+     * @type {HighlightConstantProvider}
+     * @private
+     */
+    this.highlightConstants_ = null;
+  }
 
-/**
- * @override
- */
-Renderer.prototype.refreshDom = function(svg, theme) {
-  Renderer.superClass_.refreshDom.call(this, svg, theme);
-  this.getHighlightConstants().init();
-};
+  /**
+   * Initialize the renderer.  Geras has a highlight provider in addition to
+   * the normal constant provider.
+   * @package
+   * @override
+   */
+  init(theme, opt_rendererOverrides) {
+    super.init(theme, opt_rendererOverrides);
+    this.highlightConstants_ = this.makeHighlightConstants_();
+    this.highlightConstants_.init();
+  }
 
-/**
- * @override
- */
-Renderer.prototype.makeConstants_ = function() {
-  return new ConstantProvider();
-};
+  /**
+   * @override
+   */
+  refreshDom(svg, theme) {
+    super.refreshDom(svg, theme);
+    this.getHighlightConstants().init();
+  }
 
-/**
- * Create a new instance of the renderer's render info object.
- * @param {!BlockSvg} block The block to measure.
- * @return {!RenderInfo} The render info object.
- * @protected
- * @override
- */
-Renderer.prototype.makeRenderInfo_ = function(block) {
-  return new RenderInfo(this, block);
-};
+  /**
+   * @override
+   */
+  makeConstants_() {
+    return new ConstantProvider();
+  }
 
-/**
- * Create a new instance of the renderer's drawer.
- * @param {!BlockSvg} block The block to render.
- * @param {!BaseRenderInfo} info An object containing all
- *   information needed to render this block.
- * @return {!Drawer} The drawer.
- * @protected
- * @override
- */
-Renderer.prototype.makeDrawer_ = function(block, info) {
-  return new Drawer(
-      block,
-      /** @type {!RenderInfo} */ (info));
-};
+  /**
+   * Create a new instance of the renderer's render info object.
+   * @param {!BlockSvg} block The block to measure.
+   * @return {!RenderInfo} The render info object.
+   * @protected
+   * @override
+   */
+  makeRenderInfo_(block) {
+    return new RenderInfo(this, block);
+  }
 
-/**
- * Create a new instance of a renderer path object.
- * @param {!SVGElement} root The root SVG element.
- * @param {!Theme.BlockStyle} style The style object to use for
- *     colouring.
- * @return {!PathObject} The renderer path object.
- * @package
- * @override
- */
-Renderer.prototype.makePathObject = function(root, style) {
-  return new PathObject(
-      root, style,
-      /** @type {!ConstantProvider} */ (this.getConstants()));
-};
+  /**
+   * Create a new instance of the renderer's drawer.
+   * @param {!BlockSvg} block The block to render.
+   * @param {!BaseRenderInfo} info An object containing all information needed
+   *     to render this block.
+   * @return {!Drawer} The drawer.
+   * @protected
+   * @override
+   */
+  makeDrawer_(block, info) {
+    return new Drawer(
+        block,
+        /** @type {!RenderInfo} */ (info));
+  }
 
-/**
- * Create a new instance of the renderer's highlight constant provider.
- * @return {!HighlightConstantProvider} The highlight constant
- *     provider.
- * @protected
- */
-Renderer.prototype.makeHighlightConstants_ = function() {
-  return new HighlightConstantProvider(
-      /** @type {!BaseConstantProvider} */
-      (this.getConstants()));
-};
+  /**
+   * Create a new instance of a renderer path object.
+   * @param {!SVGElement} root The root SVG element.
+   * @param {!Theme.BlockStyle} style The style object to use for colouring.
+   * @return {!PathObject} The renderer path object.
+   * @package
+   * @override
+   */
+  makePathObject(root, style) {
+    return new PathObject(
+        root, style,
+        /** @type {!ConstantProvider} */ (this.getConstants()));
+  }
 
-/**
- * Get the renderer's highlight constant provider.  We assume that when this is
- * called, the renderer has already been initialized.
- * @return {!HighlightConstantProvider} The highlight constant
- *     provider.
- * @package
- */
-Renderer.prototype.getHighlightConstants = function() {
-  return (
-      /** @type {!HighlightConstantProvider} */
-      (this.highlightConstants_));
-};
+  /**
+   * Create a new instance of the renderer's highlight constant provider.
+   * @return {!HighlightConstantProvider} The highlight constant provider.
+   * @protected
+   */
+  makeHighlightConstants_() {
+    return new HighlightConstantProvider(
+        /** @type {!BaseConstantProvider} */
+        (this.getConstants()));
+  }
+
+  /**
+   * Get the renderer's highlight constant provider.  We assume that when this
+   * is called, the renderer has already been initialized.
+   * @return {!HighlightConstantProvider} The highlight constant provider.
+   * @package
+   */
+  getHighlightConstants() {
+    return (
+        /** @type {!HighlightConstantProvider} */
+        (this.highlightConstants_));
+  }
+}
 
 blockRendering.register('geras', Renderer);
 

package/core/renderers/measurables/base.js

@@ -25,28 +25,40 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
  * The base class to represent a part of a block that takes up space during
  * rendering.  The constructor for each non-spacer Measurable records the size
  * of the block element (e.g. field, statement input).
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
  * @alias Blockly.blockRendering.Measurable
  */
-const Measurable = function(constants) {
-  this.width = 0;
-  this.height = 0;
-  this.type = Types.NONE;
-
-  this.xPos = 0;
-  this.centerline = 0;
-
+class Measurable {
   /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
-   * @protected
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @package
    */
-  this.constants_ = constants;
+  constructor(constants) {
+    /** @type {number} */
+    this.width = 0;
+
+    /** @type {number} */
+    this.height = 0;
+
+    /** @type {number} */
+    this.type = Types.NONE;
+
+    /** @type {number} */
+    this.xPos = 0;
+
+    /** @type {number} */
+    this.centerline = 0;
+
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     * @protected
+     */
+    this.constants_ = constants;
 
-  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
-};
+    /** @type {number} */
+    this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+  }
+}
 
 exports.Measurable = Measurable;