blockly 7.20211209.2 → 8.0.0

package/core/renderers/zelos/path_object.js

@@ -17,7 +17,6 @@
 goog.module('Blockly.zelos.PathObject');
 
 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.zelos.ConstantProvider');
 const {PathObject: BasePathObject} = goog.require('Blockly.blockRendering.PathObject');
@@ -29,218 +28,220 @@ 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.zelos.PathObject
  */
-const PathObject = function(root, style, constants) {
-  PathObject.superClass_.constructor.call(this, root, style, constants);
-
+class PathObject extends BasePathObject {
   /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
+   * @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.constants = constants;
+  constructor(root, style, constants) {
+    super(root, style, constants);
+
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     */
+    this.constants = constants;
+
+    /**
+     * The selected path of the block.
+     * @type {?SVGElement}
+     * @private
+     */
+    this.svgPathSelected_ = null;
+
+    /**
+     * The outline paths on the block.
+     * @type {!Object<string, !SVGElement>}
+     * @private
+     */
+    this.outlines_ = Object.create(null);
+
+    /**
+     * A set used to determine which outlines were used during a draw pass.  The
+     * set is initialized with a reference to all the outlines in
+     * `this.outlines_`. Every time we use an outline during the draw pass, the
+     * reference is removed from this set.
+     * @type {Object<string, number>}
+     * @private
+     */
+    this.remainingOutlines_ = null;
+
+    /**
+     * The type of block's output connection shape.  This is set when a block
+     * with an output connection is drawn.
+     * @package
+     */
+    this.outputShapeType = null;
+  }
 
   /**
-   * The selected path of the block.
-   * @type {?SVGElement}
-   * @private
+   * @override
    */
-  this.svgPathSelected_ = null;
+  setPath(pathString) {
+    super.setPath(pathString);
+    if (this.svgPathSelected_) {
+      this.svgPathSelected_.setAttribute('d', pathString);
+    }
+  }
 
   /**
-   * The outline paths on the block.
-   * @type {!Object<string, !SVGElement>}
-   * @private
+   * @override
    */
-  this.outlines_ = Object.create(null);
+  applyColour(block) {
+    super.applyColour(block);
+    // Set shadow stroke colour.
+    if (block.isShadow() && block.getParent()) {
+      this.svgPath.setAttribute(
+          'stroke', block.getParent().style.colourTertiary);
+    }
 
-  /**
-   * A set used to determine which outlines were used during a draw pass.  The
-   * set is initialized with a reference to all the outlines in
-   * `this.outlines_`. Every time we use an outline during the draw pass, the
-   * reference is removed from this set.
-   * @type {Object<string, number>}
-   * @private
-   */
-  this.remainingOutlines_ = null;
+    // Apply colour to outlines.
+    for (const key in this.outlines_) {
+      this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
+    }
+  }
 
   /**
-   * The type of block's output connection shape.  This is set when a block with
-   * an output connection is drawn.
-   * @package
+   * @override
    */
-  this.outputShapeType = null;
-};
-object.inherits(PathObject, BasePathObject);
-
-/**
- * @override
- */
-PathObject.prototype.setPath = function(pathString) {
-  PathObject.superClass_.setPath.call(this, pathString);
-  if (this.svgPathSelected_) {
-    this.svgPathSelected_.setAttribute('d', pathString);
-  }
-};
-
-/**
- * @override
- */
-PathObject.prototype.applyColour = function(block) {
-  PathObject.superClass_.applyColour.call(this, block);
-  // Set shadow stroke colour.
-  if (block.isShadow() && block.getParent()) {
-    this.svgPath.setAttribute('stroke', block.getParent().style.colourTertiary);
+  flipRTL() {
+    super.flipRTL();
+    // Mirror each input outline path.
+    for (const key in this.outlines_) {
+      this.outlines_[key].setAttribute('transform', 'scale(-1 1)');
+    }
   }
 
-  // Apply colour to outlines.
-  for (const key in this.outlines_) {
-    this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
+  /**
+   * @override
+   */
+  updateSelected(enable) {
+    this.setClass_('blocklySelected', enable);
+    if (enable) {
+      if (!this.svgPathSelected_) {
+        this.svgPathSelected_ =
+            /** @type {!SVGElement} */ (this.svgPath.cloneNode(true));
+        this.svgPathSelected_.setAttribute('fill', 'none');
+        this.svgPathSelected_.setAttribute(
+            'filter', 'url(#' + this.constants.selectedGlowFilterId + ')');
+        this.svgRoot.appendChild(this.svgPathSelected_);
+      }
+    } else {
+      if (this.svgPathSelected_) {
+        this.svgRoot.removeChild(this.svgPathSelected_);
+        this.svgPathSelected_ = null;
+      }
+    }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.flipRTL = function() {
-  PathObject.superClass_.flipRTL.call(this);
-  // Mirror each input outline path.
-  for (const key in this.outlines_) {
-    this.outlines_[key].setAttribute('transform', 'scale(-1 1)');
+  /**
+   * @override
+   */
+  updateReplacementFade(enable) {
+    this.setClass_('blocklyReplaceable', enable);
+    if (enable) {
+      this.svgPath.setAttribute(
+          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
+    } else {
+      this.svgPath.removeAttribute('filter');
+    }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.updateSelected = function(enable) {
-  this.setClass_('blocklySelected', enable);
-  if (enable) {
-    if (!this.svgPathSelected_) {
-      this.svgPathSelected_ =
-          /** @type {!SVGElement} */ (this.svgPath.cloneNode(true));
-      this.svgPathSelected_.setAttribute('fill', 'none');
-      this.svgPathSelected_.setAttribute(
-          'filter', 'url(#' + this.constants.selectedGlowFilterId + ')');
-      this.svgRoot.appendChild(this.svgPathSelected_);
+  /**
+   * @override
+   */
+  updateShapeForInputHighlight(conn, enable) {
+    const name = conn.getParentInput().name;
+    const outlinePath = this.getOutlinePath_(name);
+    if (!outlinePath) {
+      return;
     }
-  } else {
-    if (this.svgPathSelected_) {
-      this.svgRoot.removeChild(this.svgPathSelected_);
-      this.svgPathSelected_ = null;
+    if (enable) {
+      outlinePath.setAttribute(
+          'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
+    } else {
+      outlinePath.removeAttribute('filter');
     }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.updateReplacementFade = function(enable) {
-  this.setClass_('blocklyReplaceable', enable);
-  if (enable) {
-    this.svgPath.setAttribute(
-        'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
-  } else {
-    this.svgPath.removeAttribute('filter');
+  /**
+   * Method that's called when the drawer is about to draw the block.
+   * @package
+   */
+  beginDrawing() {
+    this.remainingOutlines_ = Object.create(null);
+    for (const key in this.outlines_) {
+      // The value set here isn't used anywhere, we are just using the
+      // object as a Set data structure.
+      this.remainingOutlines_[key] = 1;
+    }
   }
-};
 
-/**
- * @override
- */
-PathObject.prototype.updateShapeForInputHighlight = function(conn, enable) {
-  const name = conn.getParentInput().name;
-  const outlinePath = this.getOutlinePath_(name);
-  if (!outlinePath) {
-    return;
-  }
-  if (enable) {
-    outlinePath.setAttribute(
-        'filter', 'url(#' + this.constants.replacementGlowFilterId + ')');
-  } else {
-    outlinePath.removeAttribute('filter');
+  /**
+   * Method that's called when the drawer is done drawing.
+   * @package
+   */
+  endDrawing() {
+    // Go through all remaining outlines that were not used this draw pass, and
+    // remove them.
+    if (this.remainingOutlines_) {
+      for (const key in this.remainingOutlines_) {
+        this.removeOutlinePath_(key);
+      }
+    }
+    this.remainingOutlines_ = null;
   }
-};
 
-/**
- * Method that's called when the drawer is about to draw the block.
- * @package
- */
-PathObject.prototype.beginDrawing = function() {
-  this.remainingOutlines_ = Object.create(null);
-  for (const key in this.outlines_) {
-    // The value set here isn't used anywhere, we are just using the
-    // object as a Set data structure.
-    this.remainingOutlines_[key] = 1;
+  /**
+   * Set the path generated by the renderer for an outline path on the
+   * respective outline path SVG element.
+   * @param {string} name The input name.
+   * @param {string} pathString The path.
+   * @package
+   */
+  setOutlinePath(name, pathString) {
+    const outline = this.getOutlinePath_(name);
+    outline.setAttribute('d', pathString);
+    outline.setAttribute('fill', this.style.colourTertiary);
   }
-};
 
-/**
- * Method that's called when the drawer is done drawing.
- * @package
- */
-PathObject.prototype.endDrawing = function() {
-  // Go through all remaining outlines that were not used this draw pass, and
-  // remove them.
-  if (this.remainingOutlines_) {
-    for (const key in this.remainingOutlines_) {
-      this.removeOutlinePath_(key);
+  /**
+   * Create's an outline path for the specified input.
+   * @param {string} name The input name.
+   * @return {!SVGElement} The SVG outline path.
+   * @private
+   */
+  getOutlinePath_(name) {
+    if (!this.outlines_[name]) {
+      this.outlines_[name] = dom.createSvgElement(
+          Svg.PATH, {
+            'class': 'blocklyOutlinePath',
+            // IE doesn't like paths without the data definition, set empty
+            // default
+            'd': '',
+          },
+          this.svgRoot);
     }
+    if (this.remainingOutlines_) {
+      delete this.remainingOutlines_[name];
+    }
+    return this.outlines_[name];
   }
-  this.remainingOutlines_ = null;
-};
-
-/**
- * Set the path generated by the renderer for an outline path on the respective
- * outline path SVG element.
- * @param {string} name The input name.
- * @param {string} pathString The path.
- * @package
- */
-PathObject.prototype.setOutlinePath = function(name, pathString) {
-  const outline = this.getOutlinePath_(name);
-  outline.setAttribute('d', pathString);
-  outline.setAttribute('fill', this.style.colourTertiary);
-};
 
-/**
- * Create's an outline path for the specified input.
- * @param {string} name The input name.
- * @return {!SVGElement} The SVG outline path.
- * @private
- */
-PathObject.prototype.getOutlinePath_ = function(name) {
-  if (!this.outlines_[name]) {
-    this.outlines_[name] = dom.createSvgElement(
-        Svg.PATH, {
-          'class': 'blocklyOutlinePath',
-          // IE doesn't like paths without the data definition, set empty
-          // default
-          'd': '',
-        },
-        this.svgRoot);
-  }
-  if (this.remainingOutlines_) {
-    delete this.remainingOutlines_[name];
+  /**
+   * Remove an outline path that is associated with the specified input.
+   * @param {string} name The input name.
+   * @private
+   */
+  removeOutlinePath_(name) {
+    this.outlines_[name].parentNode.removeChild(this.outlines_[name]);
+    delete this.outlines_[name];
   }
-  return this.outlines_[name];
-};
-
-/**
- * Remove an outline path that is associated with the specified input.
- * @param {string} name The input name.
- * @private
- */
-PathObject.prototype.removeOutlinePath_ = function(name) {
-  this.outlines_[name].parentNode.removeChild(this.outlines_[name]);
-  delete this.outlines_[name];
-};
+}
 
 exports.PathObject = PathObject;

package/core/renderers/zelos/renderer.js

@@ -16,7 +16,6 @@
 goog.module('Blockly.zelos.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');
 const {ConnectionType} = goog.require('Blockly.ConnectionType');
@@ -39,109 +38,109 @@ const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
 
 /**
  * The zelos renderer.
- * @param {string} name The renderer name.
- * @package
- * @constructor
  * @extends {BaseRenderer}
  * @alias Blockly.zelos.Renderer
  */
-const Renderer = function(name) {
-  Renderer.superClass_.constructor.call(this, name);
-};
-object.inherits(Renderer, BaseRenderer);
+class Renderer extends BaseRenderer {
+  /**
+   * @param {string} name The renderer name.
+   * @package
+   */
+  constructor(name) {
+    super(name);
+  }
 
-/**
- * Create a new instance of the renderer's constant provider.
- * @return {!ConstantProvider} The constant provider.
- * @protected
- * @override
- */
-Renderer.prototype.makeConstants_ = function() {
-  return new ConstantProvider();
-};
+  /**
+   * Create a new instance of the renderer's constant provider.
+   * @return {!ConstantProvider} The constant provider.
+   * @protected
+   * @override
+   */
+  makeConstants_() {
+    return new ConstantProvider();
+  }
 
-/**
- * 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);
-};
+  /**
+   * 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 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 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 cursor drawer.
- * @param {!WorkspaceSvg} workspace The workspace the cursor belongs to.
- * @param {!Marker} marker The marker.
- * @return {!MarkerSvg} The object in charge of drawing
- *     the marker.
- * @package
- * @override
- */
-Renderer.prototype.makeMarkerDrawer = function(workspace, marker) {
-  return new MarkerSvg(workspace, this.getConstants(), marker);
-};
+  /**
+   * Create a new instance of the renderer's cursor drawer.
+   * @param {!WorkspaceSvg} workspace The workspace the cursor belongs to.
+   * @param {!Marker} marker The marker.
+   * @return {!MarkerSvg} The object in charge of drawing
+   *     the marker.
+   * @package
+   * @override
+   */
+  makeMarkerDrawer(workspace, marker) {
+    return new MarkerSvg(workspace, this.getConstants(), marker);
+  }
 
-/**
- * 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 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()));
+  }
 
-/**
- * @override
- */
-Renderer.prototype.shouldHighlightConnection = function(conn) {
-  return conn.type !== ConnectionType.INPUT_VALUE &&
-      conn.type !== ConnectionType.OUTPUT_VALUE;
-};
+  /**
+   * @override
+   */
+  shouldHighlightConnection(conn) {
+    return conn.type !== ConnectionType.INPUT_VALUE &&
+        conn.type !== ConnectionType.OUTPUT_VALUE;
+  }
 
-/**
- * @override
- */
-Renderer.prototype.getConnectionPreviewMethod = function(
-    closest, local, topBlock) {
-  if (local.type === ConnectionType.OUTPUT_VALUE) {
-    if (!closest.isConnected()) {
-      return InsertionMarkerManager.PREVIEW_TYPE.INPUT_OUTLINE;
+  /**
+   * @override
+   */
+  getConnectionPreviewMethod(closest, local, topBlock) {
+    if (local.type === ConnectionType.OUTPUT_VALUE) {
+      if (!closest.isConnected()) {
+        return InsertionMarkerManager.PREVIEW_TYPE.INPUT_OUTLINE;
+      }
+      // TODO: Returning this is a total hack, because we don't want to show
+      //   a replacement fade, we want to show an outline affect.
+      //   Sadly zelos does not support showing an outline around filled
+      //   inputs, so we have to pretend like the connected block is getting
+      //   replaced.
+      return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
     }
-    // TODO: Returning this is a total hack, because we don't want to show
-    //   a replacement fade, we want to show an outline affect.
-    //   Sadly zelos does not support showing an outline around filled
-    //   inputs, so we have to pretend like the connected block is getting
-    //   replaced.
-    return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
-  }
 
-  return Renderer.superClass_.getConnectionPreviewMethod(
-      closest, local, topBlock);
-};
+    return super.getConnectionPreviewMethod(closest, local, topBlock);
+  }
+}
 
 blockRendering.register('zelos', Renderer);