blockly 7.20211209.2 → 8.0.0

package/core/renderers/common/path_object.js

@@ -18,7 +18,7 @@ goog.module('Blockly.blockRendering.PathObject');
 
 const dom = goog.require('Blockly.utils.dom');
 /* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
+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 */
@@ -33,248 +33,251 @@ 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
  * @implements {IPathObject}
- * @package
  * @alias Blockly.blockRendering.PathObject
  */
-const PathObject = function(root, style, constants) {
+class PathObject {
   /**
-   * 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) {
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     * @package
+     */
+    this.constants = constants;
 
-  this.svgRoot = root;
+    this.svgRoot = root;
+
+    /**
+     * The primary path of the block.
+     * @type {!SVGElement}
+     * @package
+     */
+    this.svgPath =
+        dom.createSvgElement(Svg.PATH, {'class': 'blocklyPath'}, this.svgRoot);
+
+    /**
+     * The style object to use when colouring block paths.
+     * @type {!Theme.BlockStyle}
+     * @package
+     */
+    this.style = style;
+
+    /**
+     * Holds the cursors svg element when the cursor is attached to the block.
+     * This is null if there is no cursor on the block.
+     * @type {SVGElement}
+     * @package
+     */
+    this.cursorSvg = null;
+
+    /**
+     * Holds the markers svg element when the marker is attached to the block.
+     * This is null if there is no marker on the block.
+     * @type {SVGElement}
+     * @package
+     */
+    this.markerSvg = null;
+  }
 
   /**
-   * The primary path of the block.
-   * @type {!SVGElement}
+   * Set the path generated by the renderer onto the respective SVG element.
+   * @param {string} pathString The path.
    * @package
    */
-  this.svgPath =
-      dom.createSvgElement(Svg.PATH, {'class': 'blocklyPath'}, this.svgRoot);
+  setPath(pathString) {
+    this.svgPath.setAttribute('d', pathString);
+  }
 
   /**
-   * The style object to use when colouring block paths.
-   * @type {!Theme.BlockStyle}
+   * Flip the SVG paths in RTL.
    * @package
    */
-  this.style = style;
+  flipRTL() {
+    // Mirror the block's path.
+    this.svgPath.setAttribute('transform', 'scale(-1 1)');
+  }
 
   /**
-   * Holds the cursors svg element when the cursor is attached to the block.
-   * This is null if there is no cursor on the block.
-   * @type {SVGElement}
+   * Add the cursor SVG to this block's SVG group.
+   * @param {SVGElement} cursorSvg The SVG root of the cursor to be added to the
+   *     block SVG group.
    * @package
    */
-  this.cursorSvg = null;
+  setCursorSvg(cursorSvg) {
+    if (!cursorSvg) {
+      this.cursorSvg = null;
+      return;
+    }
+
+    this.svgRoot.appendChild(cursorSvg);
+    this.cursorSvg = cursorSvg;
+  }
 
   /**
-   * Holds the markers svg element when the marker is attached to the block.
-   * This is null if there is no marker on the block.
-   * @type {SVGElement}
+   * Add the marker SVG to this block's SVG group.
+   * @param {SVGElement} markerSvg The SVG root of the marker to be added to the
+   *     block SVG group.
    * @package
    */
-  this.markerSvg = null;
-};
+  setMarkerSvg(markerSvg) {
+    if (!markerSvg) {
+      this.markerSvg = null;
+      return;
+    }
 
-/**
- * Set the path generated by the renderer onto the respective SVG element.
- * @param {string} pathString The path.
- * @package
- */
-PathObject.prototype.setPath = function(pathString) {
-  this.svgPath.setAttribute('d', pathString);
-};
-
-/**
- * Flip the SVG paths in RTL.
- * @package
- */
-PathObject.prototype.flipRTL = function() {
-  // Mirror the block's path.
-  this.svgPath.setAttribute('transform', 'scale(-1 1)');
-};
-
-/**
- * Add the cursor SVG to this block's SVG group.
- * @param {SVGElement} cursorSvg The SVG root of the cursor to be added to the
- *     block SVG group.
- * @package
- */
-PathObject.prototype.setCursorSvg = function(cursorSvg) {
-  if (!cursorSvg) {
-    this.cursorSvg = null;
-    return;
+    if (this.cursorSvg) {
+      this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
+    } else {
+      this.svgRoot.appendChild(markerSvg);
+    }
+    this.markerSvg = markerSvg;
   }
 
-  this.svgRoot.appendChild(cursorSvg);
-  this.cursorSvg = cursorSvg;
-};
+  /**
+   * Apply the stored colours to the block's path, taking into account whether
+   * the paths belong to a shadow block.
+   * @param {!BlockSvg} block The source block.
+   * @package
+   */
+  applyColour(block) {
+    this.svgPath.setAttribute('stroke', this.style.colourTertiary);
+    this.svgPath.setAttribute('fill', this.style.colourPrimary);
 
-/**
- * Add the marker SVG to this block's SVG group.
- * @param {SVGElement} markerSvg The SVG root of the marker to be added to the
- *     block SVG group.
- * @package
- */
-PathObject.prototype.setMarkerSvg = function(markerSvg) {
-  if (!markerSvg) {
-    this.markerSvg = null;
-    return;
+    this.updateShadow_(block.isShadow());
+    this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
   }
 
-  if (this.cursorSvg) {
-    this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
-  } else {
-    this.svgRoot.appendChild(markerSvg);
+  /**
+   * Set the style.
+   * @param {!Theme.BlockStyle} blockStyle The block style to use.
+   * @package
+   */
+  setStyle(blockStyle) {
+    this.style = blockStyle;
   }
-  this.markerSvg = markerSvg;
-};
-
-/**
- * Apply the stored colours to the block's path, taking into account whether
- * the paths belong to a shadow block.
- * @param {!Block} block The source block.
- * @package
- */
-PathObject.prototype.applyColour = function(block) {
-  this.svgPath.setAttribute('stroke', this.style.colourTertiary);
-  this.svgPath.setAttribute('fill', this.style.colourPrimary);
-
-  this.updateShadow_(block.isShadow());
-  this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
-};
-
-/**
- * Set the style.
- * @param {!Theme.BlockStyle} blockStyle The block style to use.
- * @package
- */
-PathObject.prototype.setStyle = function(blockStyle) {
-  this.style = blockStyle;
-};
 
-/**
- * Add or remove the given CSS class on the path object's root SVG element.
- * @param {string} className The name of the class to add or remove
- * @param {boolean} add True if the class should be added.  False if it should
- *     be removed.
- * @protected
- */
-PathObject.prototype.setClass_ = function(className, add) {
-  if (add) {
-    dom.addClass(/** @type {!Element} */ (this.svgRoot), className);
-  } else {
-    dom.removeClass(/** @type {!Element} */ (this.svgRoot), className);
+  /**
+   * Add or remove the given CSS class on the path object's root SVG element.
+   * @param {string} className The name of the class to add or remove
+   * @param {boolean} add True if the class should be added.  False if it should
+   *     be removed.
+   * @protected
+   */
+  setClass_(className, add) {
+    if (add) {
+      dom.addClass(/** @type {!Element} */ (this.svgRoot), className);
+    } else {
+      dom.removeClass(/** @type {!Element} */ (this.svgRoot), className);
+    }
   }
-};
 
-/**
- * Set whether the block shows a highlight or not.  Block highlighting is
- * often used to visually mark blocks currently being executed.
- * @param {boolean} enable True if highlighted.
- * @package
- */
-PathObject.prototype.updateHighlighted = function(enable) {
-  if (enable) {
-    this.svgPath.setAttribute(
-        'filter', 'url(#' + this.constants.embossFilterId + ')');
-  } else {
-    this.svgPath.setAttribute('filter', 'none');
+  /**
+   * Set whether the block shows a highlight or not.  Block highlighting is
+   * often used to visually mark blocks currently being executed.
+   * @param {boolean} enable True if highlighted.
+   * @package
+   */
+  updateHighlighted(enable) {
+    if (enable) {
+      this.svgPath.setAttribute(
+          'filter', 'url(#' + this.constants.embossFilterId + ')');
+    } else {
+      this.svgPath.setAttribute('filter', 'none');
+    }
   }
-};
 
-/**
- * Updates the look of the block to reflect a shadow state.
- * @param {boolean} shadow True if the block is a shadow block.
- * @protected
- */
-PathObject.prototype.updateShadow_ = function(shadow) {
-  if (shadow) {
-    this.svgPath.setAttribute('stroke', 'none');
-    this.svgPath.setAttribute('fill', this.style.colourSecondary);
+  /**
+   * Updates the look of the block to reflect a shadow state.
+   * @param {boolean} shadow True if the block is a shadow block.
+   * @protected
+   */
+  updateShadow_(shadow) {
+    if (shadow) {
+      this.svgPath.setAttribute('stroke', 'none');
+      this.svgPath.setAttribute('fill', this.style.colourSecondary);
+    }
   }
-};
 
-/**
- * Updates the look of the block to reflect a disabled state.
- * @param {boolean} disabled True if disabled.
- * @protected
- */
-PathObject.prototype.updateDisabled_ = function(disabled) {
-  this.setClass_('blocklyDisabled', disabled);
-  if (disabled) {
-    this.svgPath.setAttribute(
-        'fill', 'url(#' + this.constants.disabledPatternId + ')');
+  /**
+   * Updates the look of the block to reflect a disabled state.
+   * @param {boolean} disabled True if disabled.
+   * @protected
+   */
+  updateDisabled_(disabled) {
+    this.setClass_('blocklyDisabled', disabled);
+    if (disabled) {
+      this.svgPath.setAttribute(
+          'fill', 'url(#' + this.constants.disabledPatternId + ')');
+    }
   }
-};
 
-/**
- * Add or remove styling showing that a block is selected.
- * @param {boolean} enable True if selection is enabled, false otherwise.
- * @package
- */
-PathObject.prototype.updateSelected = function(enable) {
-  this.setClass_('blocklySelected', enable);
-};
+  /**
+   * Add or remove styling showing that a block is selected.
+   * @param {boolean} enable True if selection is enabled, false otherwise.
+   * @package
+   */
+  updateSelected(enable) {
+    this.setClass_('blocklySelected', enable);
+  }
 
-/**
- * Add or remove styling showing that a block is dragged over a delete area.
- * @param {boolean} enable True if the block is being dragged over a delete
- *     area, false otherwise.
- * @package
- */
-PathObject.prototype.updateDraggingDelete = function(enable) {
-  this.setClass_('blocklyDraggingDelete', enable);
-};
+  /**
+   * Add or remove styling showing that a block is dragged over a delete area.
+   * @param {boolean} enable True if the block is being dragged over a delete
+   *     area, false otherwise.
+   * @package
+   */
+  updateDraggingDelete(enable) {
+    this.setClass_('blocklyDraggingDelete', enable);
+  }
 
-/**
- * Add or remove styling showing that a block is an insertion marker.
- * @param {boolean} enable True if the block is an insertion marker, false
- *     otherwise.
- * @package
- */
-PathObject.prototype.updateInsertionMarker = function(enable) {
-  this.setClass_('blocklyInsertionMarker', enable);
-};
+  /**
+   * Add or remove styling showing that a block is an insertion marker.
+   * @param {boolean} enable True if the block is an insertion marker, false
+   *     otherwise.
+   * @package
+   */
+  updateInsertionMarker(enable) {
+    this.setClass_('blocklyInsertionMarker', enable);
+  }
 
-/**
- * Add or remove styling showing that a block is movable.
- * @param {boolean} enable True if the block is movable, false otherwise.
- * @package
- */
-PathObject.prototype.updateMovable = function(enable) {
-  this.setClass_('blocklyDraggable', enable);
-};
+  /**
+   * Add or remove styling showing that a block is movable.
+   * @param {boolean} enable True if the block is movable, false otherwise.
+   * @package
+   */
+  updateMovable(enable) {
+    this.setClass_('blocklyDraggable', enable);
+  }
 
-/**
- * Add or remove styling that shows that if the dragging block is dropped, this
- * block will be replaced.  If a shadow block, it will disappear.  Otherwise it
- * will bump.
- * @param {boolean} enable True if styling should be added.
- * @package
- */
-PathObject.prototype.updateReplacementFade = function(enable) {
-  this.setClass_('blocklyReplaceable', enable);
-};
+  /**
+   * Add or remove styling that shows that if the dragging block is dropped,
+   * this block will be replaced.  If a shadow block, it will disappear.
+   * Otherwise it will bump.
+   * @param {boolean} enable True if styling should be added.
+   * @package
+   */
+  updateReplacementFade(enable) {
+    this.setClass_('blocklyReplaceable', enable);
+  }
 
-/**
- * Add or remove styling that shows that if the dragging block is dropped, this
- * block will be connected to the input.
- * @param {Connection} _conn The connection on the input to highlight.
- * @param {boolean} _enable True if styling should be added.
- * @package
- */
-PathObject.prototype.updateShapeForInputHighlight = function(_conn, _enable) {
-  // NOP
-};
+  /**
+   * Add or remove styling that shows that if the dragging block is dropped,
+   * this block will be connected to the input.
+   * @param {Connection} _conn The connection on the input to highlight.
+   * @param {boolean} _enable True if styling should be added.
+   * @package
+   */
+  updateShapeForInputHighlight(_conn, _enable) {
+    // NOP
+  }
+}
 
 exports.PathObject = PathObject;