blockly 7.20211209.2 → 8.0.0

package/core/scrollbar_pair.js

@@ -27,297 +27,302 @@ const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
 
 /**
  * Class for a pair of scrollbars.  Horizontal and vertical.
- * @param {!WorkspaceSvg} workspace Workspace to bind the scrollbars to.
- * @param {boolean=} addHorizontal Whether to add a horizontal scrollbar.
- *    Defaults to true.
- * @param {boolean=} addVertical Whether to add a vertical scrollbar. Defaults
- *    to true.
- * @param {string=} opt_class A class to be applied to these scrollbars.
- * @param {number=} opt_margin The margin to apply to these scrollbars.
- * @constructor
  * @alias Blockly.ScrollbarPair
  */
-const ScrollbarPair = function(
-    workspace, addHorizontal, addVertical, opt_class, opt_margin) {
+const ScrollbarPair = class {
   /**
-   * The workspace this scrollbar pair is bound to.
-   * @type {!WorkspaceSvg}
-   * @private
+   * @param {!WorkspaceSvg} workspace Workspace to bind the scrollbars to.
+   * @param {boolean=} addHorizontal Whether to add a horizontal scrollbar.
+   *    Defaults to true.
+   * @param {boolean=} addVertical Whether to add a vertical scrollbar. Defaults
+   *    to true.
+   * @param {string=} opt_class A class to be applied to these scrollbars.
+   * @param {number=} opt_margin The margin to apply to these scrollbars.
    */
-  this.workspace_ = workspace;
+  constructor(workspace, addHorizontal, addVertical, opt_class, opt_margin) {
+    /**
+     * The workspace this scrollbar pair is bound to.
+     * @type {!WorkspaceSvg}
+     * @private
+     */
+    this.workspace_ = workspace;
 
-  addHorizontal = addHorizontal === undefined ? true : addHorizontal;
-  addVertical = addVertical === undefined ? true : addVertical;
-  const isPair = addHorizontal && addVertical;
+    addHorizontal = addHorizontal === undefined ? true : addHorizontal;
+    addVertical = addVertical === undefined ? true : addVertical;
+    const isPair = addHorizontal && addVertical;
 
-  if (addHorizontal) {
-    this.hScroll =
-        new Scrollbar(workspace, true, isPair, opt_class, opt_margin);
-  }
-  if (addVertical) {
-    this.vScroll =
-        new Scrollbar(workspace, false, isPair, opt_class, opt_margin);
-  }
+    if (addHorizontal) {
+      this.hScroll =
+          new Scrollbar(workspace, true, isPair, opt_class, opt_margin);
+    }
+    if (addVertical) {
+      this.vScroll =
+          new Scrollbar(workspace, false, isPair, opt_class, opt_margin);
+    }
 
-  if (isPair) {
-    this.corner_ = dom.createSvgElement(
-        Svg.RECT, {
-          'height': Scrollbar.scrollbarThickness,
-          'width': Scrollbar.scrollbarThickness,
-          'class': 'blocklyScrollbarBackground',
-        },
-        null);
-    dom.insertAfter(this.corner_, workspace.getBubbleCanvas());
+    if (isPair) {
+      this.corner_ = dom.createSvgElement(
+          Svg.RECT, {
+            'height': Scrollbar.scrollbarThickness,
+            'width': Scrollbar.scrollbarThickness,
+            'class': 'blocklyScrollbarBackground',
+          },
+          null);
+      dom.insertAfter(this.corner_, workspace.getBubbleCanvas());
+    }
+
+    /**
+     * Previously recorded metrics from the workspace.
+     * @type {?Metrics}
+     * @private
+     */
+    this.oldHostMetrics_ = null;
   }
 
   /**
-   * Previously recorded metrics from the workspace.
-   * @type {?Metrics}
-   * @private
+   * Dispose of this pair of scrollbars.
+   * Unlink from all DOM elements to prevent memory leaks.
+   * @suppress {checkTypes}
    */
-  this.oldHostMetrics_ = null;
-};
-
-/**
- * Dispose of this pair of scrollbars.
- * Unlink from all DOM elements to prevent memory leaks.
- * @suppress {checkTypes}
- */
-ScrollbarPair.prototype.dispose = function() {
-  dom.removeNode(this.corner_);
-  this.corner_ = null;
-  this.workspace_ = null;
-  this.oldHostMetrics_ = null;
-  if (this.hScroll) {
-    this.hScroll.dispose();
-    this.hScroll = null;
-  }
-  if (this.vScroll) {
-    this.vScroll.dispose();
-    this.vScroll = null;
-  }
-};
-
-/**
- * Recalculate both of the scrollbars' locations and lengths.
- * Also reposition the corner rectangle.
- */
-ScrollbarPair.prototype.resize = function() {
-  // Look up the host metrics once, and use for both scrollbars.
-  const hostMetrics = this.workspace_.getMetrics();
-  if (!hostMetrics) {
-    // Host element is likely not visible.
-    return;
-  }
-
-  // Only change the scrollbars if there has been a change in metrics.
-  let resizeH = false;
-  let resizeV = false;
-  if (!this.oldHostMetrics_ ||
-      this.oldHostMetrics_.viewWidth !== hostMetrics.viewWidth ||
-      this.oldHostMetrics_.viewHeight !== hostMetrics.viewHeight ||
-      this.oldHostMetrics_.absoluteTop !== hostMetrics.absoluteTop ||
-      this.oldHostMetrics_.absoluteLeft !== hostMetrics.absoluteLeft) {
-    // The window has been resized or repositioned.
-    resizeH = true;
-    resizeV = true;
-  } else {
-    // Has the content been resized or moved?
-    if (!this.oldHostMetrics_ ||
-        this.oldHostMetrics_.scrollWidth !== hostMetrics.scrollWidth ||
-        this.oldHostMetrics_.viewLeft !== hostMetrics.viewLeft ||
-        this.oldHostMetrics_.scrollLeft !== hostMetrics.scrollLeft) {
-      resizeH = true;
+  dispose() {
+    dom.removeNode(this.corner_);
+    this.corner_ = null;
+    this.workspace_ = null;
+    this.oldHostMetrics_ = null;
+    if (this.hScroll) {
+      this.hScroll.dispose();
+      this.hScroll = null;
     }
-    if (!this.oldHostMetrics_ ||
-        this.oldHostMetrics_.scrollHeight !== hostMetrics.scrollHeight ||
-        this.oldHostMetrics_.viewTop !== hostMetrics.viewTop ||
-        this.oldHostMetrics_.scrollTop !== hostMetrics.scrollTop) {
-      resizeV = true;
+    if (this.vScroll) {
+      this.vScroll.dispose();
+      this.vScroll = null;
     }
   }
 
-  if (resizeH || resizeV) {
-    try {
-      eventUtils.disable();
-      if (this.hScroll && resizeH) {
-        this.hScroll.resize(hostMetrics);
-      }
-      if (this.vScroll && resizeV) {
-        this.vScroll.resize(hostMetrics);
-      }
-    } finally {
-      eventUtils.enable();
+  /**
+   * Recalculate both of the scrollbars' locations and lengths.
+   * Also reposition the corner rectangle.
+   */
+  resize() {
+    // Look up the host metrics once, and use for both scrollbars.
+    const hostMetrics = this.workspace_.getMetrics();
+    if (!hostMetrics) {
+      // Host element is likely not visible.
+      return;
     }
-    this.workspace_.maybeFireViewportChangeEvent();
-  }
 
-  if (this.hScroll && this.vScroll) {
-    // Reposition the corner square.
+    // Only change the scrollbars if there has been a change in metrics.
+    let resizeH = false;
+    let resizeV = false;
     if (!this.oldHostMetrics_ ||
         this.oldHostMetrics_.viewWidth !== hostMetrics.viewWidth ||
-        this.oldHostMetrics_.absoluteLeft !== hostMetrics.absoluteLeft) {
-      this.corner_.setAttribute('x', this.vScroll.position.x);
-    }
-    if (!this.oldHostMetrics_ ||
         this.oldHostMetrics_.viewHeight !== hostMetrics.viewHeight ||
-        this.oldHostMetrics_.absoluteTop !== hostMetrics.absoluteTop) {
-      this.corner_.setAttribute('y', this.hScroll.position.y);
+        this.oldHostMetrics_.absoluteTop !== hostMetrics.absoluteTop ||
+        this.oldHostMetrics_.absoluteLeft !== hostMetrics.absoluteLeft) {
+      // The window has been resized or repositioned.
+      resizeH = true;
+      resizeV = true;
+    } else {
+      // Has the content been resized or moved?
+      if (!this.oldHostMetrics_ ||
+          this.oldHostMetrics_.scrollWidth !== hostMetrics.scrollWidth ||
+          this.oldHostMetrics_.viewLeft !== hostMetrics.viewLeft ||
+          this.oldHostMetrics_.scrollLeft !== hostMetrics.scrollLeft) {
+        resizeH = true;
+      }
+      if (!this.oldHostMetrics_ ||
+          this.oldHostMetrics_.scrollHeight !== hostMetrics.scrollHeight ||
+          this.oldHostMetrics_.viewTop !== hostMetrics.viewTop ||
+          this.oldHostMetrics_.scrollTop !== hostMetrics.scrollTop) {
+        resizeV = true;
+      }
     }
-  }
-
-  // Cache the current metrics to potentially short-cut the next resize event.
-  this.oldHostMetrics_ = hostMetrics;
-};
 
-/**
- * Returns whether scrolling horizontally is enabled.
- * @return {boolean} True if horizontal scroll is enabled.
- */
-ScrollbarPair.prototype.canScrollHorizontally = function() {
-  return !!this.hScroll;
-};
+    if (resizeH || resizeV) {
+      try {
+        eventUtils.disable();
+        if (this.hScroll && resizeH) {
+          this.hScroll.resize(hostMetrics);
+        }
+        if (this.vScroll && resizeV) {
+          this.vScroll.resize(hostMetrics);
+        }
+      } finally {
+        eventUtils.enable();
+      }
+      this.workspace_.maybeFireViewportChangeEvent();
+    }
 
-/**
- * Returns whether scrolling vertically is enabled.
- * @return {boolean} True if vertical scroll is enabled.
- */
-ScrollbarPair.prototype.canScrollVertically = function() {
-  return !!this.vScroll;
-};
+    if (this.hScroll && this.vScroll) {
+      // Reposition the corner square.
+      if (!this.oldHostMetrics_ ||
+          this.oldHostMetrics_.viewWidth !== hostMetrics.viewWidth ||
+          this.oldHostMetrics_.absoluteLeft !== hostMetrics.absoluteLeft) {
+        this.corner_.setAttribute('x', this.vScroll.position.x);
+      }
+      if (!this.oldHostMetrics_ ||
+          this.oldHostMetrics_.viewHeight !== hostMetrics.viewHeight ||
+          this.oldHostMetrics_.absoluteTop !== hostMetrics.absoluteTop) {
+        this.corner_.setAttribute('y', this.hScroll.position.y);
+      }
+    }
 
-/**
- * Record the origin of the workspace that the scrollbar is in, in pixels
- * relative to the injection div origin. This is for times when the scrollbar is
- * used in an object whose origin isn't the same as the main workspace
- * (e.g. in a flyout.)
- * @param {number} x The x coordinate of the scrollbar's origin, in CSS pixels.
- * @param {number} y The y coordinate of the scrollbar's origin, in CSS pixels.
- * @package
- */
-ScrollbarPair.prototype.setOrigin = function(x, y) {
-  if (this.hScroll) {
-    this.hScroll.setOrigin(x, y);
-  }
-  if (this.vScroll) {
-    this.vScroll.setOrigin(x, y);
+    // Cache the current metrics to potentially short-cut the next resize event.
+    this.oldHostMetrics_ = hostMetrics;
   }
-};
 
-/**
- * Set the handles of both scrollbars.
- * @param {number} x The horizontal content displacement, relative to the view
- *    in pixels.
- * @param {number} y The vertical content displacement, relative to the view in
- *    pixels.
- * @param {boolean} updateMetrics Whether to update metrics on this set call.
- *    Defaults to true.
- */
-ScrollbarPair.prototype.set = function(x, y, updateMetrics) {
-  // This function is equivalent to:
-  //   this.hScroll.set(x);
-  //   this.vScroll.set(y);
-  // However, that calls setMetrics twice which causes a chain of
-  // getAttribute->setAttribute->getAttribute resulting in an extra layout pass.
-  // Combining them speeds up rendering.
-  if (this.hScroll) {
-    this.hScroll.set(x, false);
+  /**
+   * Returns whether scrolling horizontally is enabled.
+   * @return {boolean} True if horizontal scroll is enabled.
+   */
+  canScrollHorizontally() {
+    return !!this.hScroll;
   }
-  if (this.vScroll) {
-    this.vScroll.set(y, false);
+
+  /**
+   * Returns whether scrolling vertically is enabled.
+   * @return {boolean} True if vertical scroll is enabled.
+   */
+  canScrollVertically() {
+    return !!this.vScroll;
   }
 
-  if (updateMetrics || updateMetrics === undefined) {
-    // Update metrics.
-    const xyRatio = {};
+  /**
+   * Record the origin of the workspace that the scrollbar is in, in pixels
+   * relative to the injection div origin. This is for times when the scrollbar
+   * is used in an object whose origin isn't the same as the main workspace
+   * (e.g. in a flyout.)
+   * @param {number} x The x coordinate of the scrollbar's origin, in CSS
+   *     pixels.
+   * @param {number} y The y coordinate of the scrollbar's origin, in CSS
+   *     pixels.
+   * @package
+   */
+  setOrigin(x, y) {
     if (this.hScroll) {
-      xyRatio.x = this.hScroll.getRatio_();
+      this.hScroll.setOrigin(x, y);
     }
     if (this.vScroll) {
-      xyRatio.y = this.vScroll.getRatio_();
+      this.vScroll.setOrigin(x, y);
     }
-    this.workspace_.setMetrics(xyRatio);
   }
-};
 
-/**
- * Set the handle of the horizontal scrollbar to be at a certain position in
- *    CSS pixels relative to its parents.
- * @param {number} x Horizontal scroll value.
- */
-ScrollbarPair.prototype.setX = function(x) {
-  if (this.hScroll) {
-    this.hScroll.set(x, true);
-  }
-};
+  /**
+   * Set the handles of both scrollbars.
+   * @param {number} x The horizontal content displacement, relative to the view
+   *    in pixels.
+   * @param {number} y The vertical content displacement, relative to the view
+   *     in
+   *    pixels.
+   * @param {boolean} updateMetrics Whether to update metrics on this set call.
+   *    Defaults to true.
+   */
+  set(x, y, updateMetrics) {
+    // This function is equivalent to:
+    //   this.hScroll.set(x);
+    //   this.vScroll.set(y);
+    // However, that calls setMetrics twice which causes a chain of
+    // getAttribute->setAttribute->getAttribute resulting in an extra layout
+    // pass. Combining them speeds up rendering.
+    if (this.hScroll) {
+      this.hScroll.set(x, false);
+    }
+    if (this.vScroll) {
+      this.vScroll.set(y, false);
+    }
 
-/**
- * Set the handle of the vertical scrollbar to be at a certain position in
- *    CSS pixels relative to its parents.
- * @param {number} y Vertical scroll value.
- */
-ScrollbarPair.prototype.setY = function(y) {
-  if (this.vScroll) {
-    this.vScroll.set(y, true);
+    if (updateMetrics || updateMetrics === undefined) {
+      // Update metrics.
+      const xyRatio = {};
+      if (this.hScroll) {
+        xyRatio.x = this.hScroll.getRatio_();
+      }
+      if (this.vScroll) {
+        xyRatio.y = this.vScroll.getRatio_();
+      }
+      this.workspace_.setMetrics(xyRatio);
+    }
   }
-};
 
-/**
- * Set whether this scrollbar's container is visible.
- * @param {boolean} visible Whether the container is visible.
- */
-ScrollbarPair.prototype.setContainerVisible = function(visible) {
-  if (this.hScroll) {
-    this.hScroll.setContainerVisible(visible);
-  }
-  if (this.vScroll) {
-    this.vScroll.setContainerVisible(visible);
+  /**
+   * Set the handle of the horizontal scrollbar to be at a certain position in
+   *    CSS pixels relative to its parents.
+   * @param {number} x Horizontal scroll value.
+   */
+  setX(x) {
+    if (this.hScroll) {
+      this.hScroll.set(x, true);
+    }
   }
-};
 
-/**
- * If any of the scrollbars are visible. Non-paired scrollbars may disappear
- * when they aren't needed.
- * @return {boolean} True if visible.
- */
-ScrollbarPair.prototype.isVisible = function() {
-  let isVisible = false;
-  if (this.hScroll) {
-    isVisible = this.hScroll.isVisible();
-  }
-  if (this.vScroll) {
-    isVisible = isVisible || this.vScroll.isVisible();
+  /**
+   * Set the handle of the vertical scrollbar to be at a certain position in
+   *    CSS pixels relative to its parents.
+   * @param {number} y Vertical scroll value.
+   */
+  setY(y) {
+    if (this.vScroll) {
+      this.vScroll.set(y, true);
+    }
   }
-  return isVisible;
-};
 
-/**
- * Recalculates the scrollbars' locations within their path and length.
- * This should be called when the contents of the workspace have changed.
- * @param {!Metrics} hostMetrics A data structure describing all
- *     the required dimensions, possibly fetched from the host object.
- */
-ScrollbarPair.prototype.resizeContent = function(hostMetrics) {
-  if (this.hScroll) {
-    this.hScroll.resizeContentHorizontal(hostMetrics);
+  /**
+   * Set whether this scrollbar's container is visible.
+   * @param {boolean} visible Whether the container is visible.
+   */
+  setContainerVisible(visible) {
+    if (this.hScroll) {
+      this.hScroll.setContainerVisible(visible);
+    }
+    if (this.vScroll) {
+      this.vScroll.setContainerVisible(visible);
+    }
   }
-  if (this.vScroll) {
-    this.vScroll.resizeContentVertical(hostMetrics);
+
+  /**
+   * If any of the scrollbars are visible. Non-paired scrollbars may disappear
+   * when they aren't needed.
+   * @return {boolean} True if visible.
+   */
+  isVisible() {
+    let isVisible = false;
+    if (this.hScroll) {
+      isVisible = this.hScroll.isVisible();
+    }
+    if (this.vScroll) {
+      isVisible = isVisible || this.vScroll.isVisible();
+    }
+    return isVisible;
   }
-};
 
-/**
- * Recalculates the scrollbars' locations on the screen and path length.
- * This should be called when the layout or size of the window has changed.
- * @param {!Metrics} hostMetrics A data structure describing all
- *     the required dimensions, possibly fetched from the host object.
- */
-ScrollbarPair.prototype.resizeView = function(hostMetrics) {
-  if (this.hScroll) {
-    this.hScroll.resizeViewHorizontal(hostMetrics);
+  /**
+   * Recalculates the scrollbars' locations within their path and length.
+   * This should be called when the contents of the workspace have changed.
+   * @param {!Metrics} hostMetrics A data structure describing all
+   *     the required dimensions, possibly fetched from the host object.
+   */
+  resizeContent(hostMetrics) {
+    if (this.hScroll) {
+      this.hScroll.resizeContentHorizontal(hostMetrics);
+    }
+    if (this.vScroll) {
+      this.vScroll.resizeContentVertical(hostMetrics);
+    }
   }
-  if (this.vScroll) {
-    this.vScroll.resizeViewVertical(hostMetrics);
+
+  /**
+   * Recalculates the scrollbars' locations on the screen and path length.
+   * This should be called when the layout or size of the window has changed.
+   * @param {!Metrics} hostMetrics A data structure describing all
+   *     the required dimensions, possibly fetched from the host object.
+   */
+  resizeView(hostMetrics) {
+    if (this.hScroll) {
+      this.hScroll.resizeViewHorizontal(hostMetrics);
+    }
+    if (this.vScroll) {
+      this.vScroll.resizeViewVertical(hostMetrics);
+    }
   }
 };
 

package/core/serialization/blocks.js

@@ -23,6 +23,8 @@ const serializationRegistry = goog.require('Blockly.serialization.registry');
 const {BadConnectionCheck, MissingBlockType, MissingConnection, RealChildOfShadow} = goog.require('Blockly.serialization.exceptions');
 /* eslint-disable-next-line no-unused-vars */
 const {Block} = goog.requireType('Blockly.Block');
+/* 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
@@ -350,9 +352,10 @@ const appendInternal = function(state, workspace, {
   // Adding connections to the connection db is expensive. This defers that
   // operation to decrease load time.
   if (workspace.rendered) {
+    const blockSvg = /** @type {!BlockSvg} */ (block);
     setTimeout(() => {
-      if (!block.disposed) {
-        block.setConnectionTracking(true);
+      if (!blockSvg.disposed) {
+        blockSvg.setConnectionTracking(true);
       }
     }, 1);
   }
@@ -511,11 +514,17 @@ const loadIcons = function(block, state) {
   const comment = state['icons']['comment'];
   if (comment) {
     block.setCommentText(comment['text']);
-    block.commentModel.pinned = comment['pinned'];
-    block.commentModel.size = new Size(comment['width'], comment['height']);
-    if (comment['pinned'] && block.getCommentIcon && !block.isInFlyout) {
+    // Load if saved. (Cleaned unnecessary attributes when in the trashcan.)
+    if ('pinned' in comment) {
+      block.commentModel.pinned = comment['pinned'];
+    }
+    if ('width' in comment && 'height' in comment) {
+      block.commentModel.size = new Size(comment['width'], comment['height']);
+    }
+    if (comment['pinned'] && block.rendered && !block.isInFlyout) {
       // Give the block a chance to be positioned and rendered before showing.
-      setTimeout(() => block.getCommentIcon().setVisible(true), 1);
+      const blockSvg = /** @type {!BlockSvg} */ (block);
+      setTimeout(() => blockSvg.getCommentIcon().setVisible(true), 1);
     }
   }
 };
@@ -607,12 +616,13 @@ const loadConnection = function(connection, connectionState) {
  */
 const initBlock = function(block, rendered) {
   if (rendered) {
+    const blockSvg = /** @type {!BlockSvg} */ (block);
     // Adding connections to the connection db is expensive. This defers that
     // operation to decrease load time.
-    block.setConnectionTracking(false);
+    blockSvg.setConnectionTracking(false);
 
-    block.initSvg();
-    block.render(false);
+    blockSvg.initSvg();
+    blockSvg.render(false);
   } else {
     block.initModel();
   }

package/core/serialization/workspaces.js

@@ -22,6 +22,7 @@ const eventUtils = goog.require('Blockly.Events.utils');
 const registry = goog.require('Blockly.registry');
 // eslint-disable-next-line no-unused-vars
 const {Workspace} = goog.require('Blockly.Workspace');
+const {WorkspaceSvg} = goog.require('Blockly.WorkspaceSvg');
 
 
 /**
@@ -70,7 +71,7 @@ const load = function(state, workspace, {recordUndo = false} = {}) {
   }
 
   dom.startTextWidthCache();
-  if (workspace.setResizesEnabled) {
+  if (workspace instanceof WorkspaceSvg) {
     workspace.setResizesEnabled(false);
   }
 
@@ -89,7 +90,7 @@ const load = function(state, workspace, {recordUndo = false} = {}) {
     }
   }
 
-  if (workspace.setResizesEnabled) {
+  if (workspace instanceof WorkspaceSvg) {
     workspace.setResizesEnabled(true);
   }
   dom.stopTextWidthCache();