blockly 7.20211209.2 → 8.0.0

package/core/workspace_drag_surface_svg.js

@@ -33,155 +33,162 @@ const {Svg} = goog.require('Blockly.utils.Svg');
  * Blocks are moved into this SVG during a drag, improving performance.
  * The entire SVG is translated using CSS transforms instead of SVG so the
  * blocks are never repainted during drag improving performance.
- * @param {!Element} container Containing element.
- * @constructor
  * @alias Blockly.WorkspaceDragSurfaceSvg
  */
-const WorkspaceDragSurfaceSvg = function(container) {
-  this.container_ = container;
-  this.createDom();
-};
-
-/**
- * The SVG drag surface. Set once by WorkspaceDragSurfaceSvg.createDom.
- * @type {SVGElement}
- * @private
- */
-WorkspaceDragSurfaceSvg.prototype.SVG_ = null;
-
-/**
- * Containing HTML element; parent of the workspace and the drag surface.
- * @type {Element}
- * @private
- */
-WorkspaceDragSurfaceSvg.prototype.container_ = null;
-
-/**
- * Create the drag surface and inject it into the container.
- */
-WorkspaceDragSurfaceSvg.prototype.createDom = function() {
-  if (this.SVG_) {
-    return;  // Already created.
+class WorkspaceDragSurfaceSvg {
+  /**
+   * @param {!Element} container Containing element.
+   */
+  constructor(container) {
+    /**
+     * The SVG drag surface. Set once by WorkspaceDragSurfaceSvg.createDom.
+     * @type {SVGElement}
+     * @private
+     */
+    this.SVG_ = null;
+
+    /**
+     * Containing HTML element; parent of the workspace and the drag surface.
+     * @type {Element}
+     * @private
+     */
+    this.container_ = container;
+
+    /**
+     * The element to insert the block canvas and bubble canvas after when it
+     * goes back in the DOM at the end of a drag.
+     * @type {Element}
+     * @private
+     */
+    this.previousSibling_ = null;
+
+    this.createDom();
   }
-
   /**
-   * Dom structure when the workspace is being dragged. If there is no drag in
-   * progress, the SVG is empty and display: none.
-   * <svg class="blocklyWsDragSurface" style=transform:translate3d(...)>
-   *   <g class="blocklyBlockCanvas"></g>
-   *   <g class="blocklyBubbleCanvas">/g>
-   * </svg>
+   * Create the drag surface and inject it into the container.
    */
-  this.SVG_ = dom.createSvgElement(
-      Svg.SVG, {
-        'xmlns': dom.SVG_NS,
-        'xmlns:html': dom.HTML_NS,
-        'xmlns:xlink': dom.XLINK_NS,
-        'version': '1.1',
-        'class': 'blocklyWsDragSurface blocklyOverflowVisible',
-      },
-      null);
-  this.container_.appendChild(this.SVG_);
-};
-
-/**
- * Translate the entire drag surface during a drag.
- * We translate the drag surface instead of the blocks inside the surface
- * so that the browser avoids repainting the SVG.
- * Because of this, the drag coordinates must be adjusted by scale.
- * @param {number} x X translation for the entire surface
- * @param {number} y Y translation for the entire surface
- * @package
- */
-WorkspaceDragSurfaceSvg.prototype.translateSurface = function(x, y) {
-  // This is a work-around to prevent a the blocks from rendering
-  // fuzzy while they are being moved on the drag surface.
-  const fixedX = x.toFixed(0);
-  const fixedY = y.toFixed(0);
-
-  this.SVG_.style.display = 'block';
-  dom.setCssTransform(
-      this.SVG_, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0)');
-};
-
-/**
- * Reports the surface translation in scaled workspace coordinates.
- * Use this when finishing a drag to return blocks to the correct position.
- * @return {!Coordinate} Current translation of the surface
- * @package
- */
-WorkspaceDragSurfaceSvg.prototype.getSurfaceTranslation = function() {
-  return svgMath.getRelativeXY(/** @type {!SVGElement} */ (this.SVG_));
-};
-
-/**
- * Move the blockCanvas and bubbleCanvas out of the surface SVG and on to
- * newSurface.
- * @param {SVGElement} newSurface The element to put the drag surface contents
- *     into.
- * @package
- */
-WorkspaceDragSurfaceSvg.prototype.clearAndHide = function(newSurface) {
-  if (!newSurface) {
-    throw Error(
-        'Couldn\'t clear and hide the drag surface: missing new surface.');
+  createDom() {
+    if (this.SVG_) {
+      return;  // Already created.
+    }
+
+    /**
+     * Dom structure when the workspace is being dragged. If there is no drag in
+     * progress, the SVG is empty and display: none.
+     * <svg class="blocklyWsDragSurface" style=transform:translate3d(...)>
+     *   <g class="blocklyBlockCanvas"></g>
+     *   <g class="blocklyBubbleCanvas">/g>
+     * </svg>
+     */
+    this.SVG_ = dom.createSvgElement(
+        Svg.SVG, {
+          'xmlns': dom.SVG_NS,
+          'xmlns:html': dom.HTML_NS,
+          'xmlns:xlink': dom.XLINK_NS,
+          'version': '1.1',
+          'class': 'blocklyWsDragSurface blocklyOverflowVisible',
+        },
+        null);
+    this.container_.appendChild(this.SVG_);
   }
-  const blockCanvas = /** @type {!Element} */ (this.SVG_.childNodes[0]);
-  const bubbleCanvas = /** @type {!Element} */ (this.SVG_.childNodes[1]);
-  if (!blockCanvas || !bubbleCanvas ||
-      !dom.hasClass(blockCanvas, 'blocklyBlockCanvas') ||
-      !dom.hasClass(bubbleCanvas, 'blocklyBubbleCanvas')) {
-    throw Error(
-        'Couldn\'t clear and hide the drag surface. A node was missing.');
+  /**
+   * Translate the entire drag surface during a drag.
+   * We translate the drag surface instead of the blocks inside the surface
+   * so that the browser avoids repainting the SVG.
+   * Because of this, the drag coordinates must be adjusted by scale.
+   * @param {number} x X translation for the entire surface
+   * @param {number} y Y translation for the entire surface
+   * @package
+   */
+  translateSurface(x, y) {
+    // This is a work-around to prevent a the blocks from rendering
+    // fuzzy while they are being moved on the drag surface.
+    const fixedX = x.toFixed(0);
+    const fixedY = y.toFixed(0);
+
+    this.SVG_.style.display = 'block';
+    dom.setCssTransform(
+        this.SVG_, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0)');
   }
-
-  // If there is a previous sibling, put the blockCanvas back right afterwards,
-  // otherwise insert it as the first child node in newSurface.
-  if (this.previousSibling_ !== null) {
-    dom.insertAfter(blockCanvas, this.previousSibling_);
-  } else {
-    newSurface.insertBefore(blockCanvas, newSurface.firstChild);
+  /**
+   * Reports the surface translation in scaled workspace coordinates.
+   * Use this when finishing a drag to return blocks to the correct position.
+   * @return {!Coordinate} Current translation of the surface
+   * @package
+   */
+  getSurfaceTranslation() {
+    return svgMath.getRelativeXY(/** @type {!SVGElement} */ (this.SVG_));
   }
-
-  // Reattach the bubble canvas after the blockCanvas.
-  dom.insertAfter(bubbleCanvas, blockCanvas);
-  // Hide the drag surface.
-  this.SVG_.style.display = 'none';
-  if (this.SVG_.childNodes.length) {
-    throw Error('Drag surface was not cleared.');
+  /**
+   * Move the blockCanvas and bubbleCanvas out of the surface SVG and on to
+   * newSurface.
+   * @param {SVGElement} newSurface The element to put the drag surface contents
+   *     into.
+   * @package
+   */
+  clearAndHide(newSurface) {
+    if (!newSurface) {
+      throw Error(
+          'Couldn\'t clear and hide the drag surface: missing new surface.');
+    }
+    const blockCanvas = /** @type {!Element} */ (this.SVG_.childNodes[0]);
+    const bubbleCanvas = /** @type {!Element} */ (this.SVG_.childNodes[1]);
+    if (!blockCanvas || !bubbleCanvas ||
+        !dom.hasClass(blockCanvas, 'blocklyBlockCanvas') ||
+        !dom.hasClass(bubbleCanvas, 'blocklyBubbleCanvas')) {
+      throw Error(
+          'Couldn\'t clear and hide the drag surface. A node was missing.');
+    }
+
+    // If there is a previous sibling, put the blockCanvas back right
+    // afterwards, otherwise insert it as the first child node in newSurface.
+    if (this.previousSibling_ !== null) {
+      dom.insertAfter(blockCanvas, this.previousSibling_);
+    } else {
+      newSurface.insertBefore(blockCanvas, newSurface.firstChild);
+    }
+
+    // Reattach the bubble canvas after the blockCanvas.
+    dom.insertAfter(bubbleCanvas, blockCanvas);
+    // Hide the drag surface.
+    this.SVG_.style.display = 'none';
+    if (this.SVG_.childNodes.length) {
+      throw Error('Drag surface was not cleared.');
+    }
+    dom.setCssTransform(this.SVG_, '');
+    this.previousSibling_ = null;
   }
-  dom.setCssTransform(this.SVG_, '');
-  this.previousSibling_ = null;
-};
-
-/**
- * Set the SVG to have the block canvas and bubble canvas in it and then
- * show the surface.
- * @param {!SVGElement} blockCanvas The block canvas <g> element from the
- *     workspace.
- * @param {!SVGElement} bubbleCanvas The <g> element that contains the bubbles.
- * @param {Element} previousSibling The element to insert the block canvas and
-       bubble canvas after when it goes back in the DOM at the end of a drag.
- * @param {number} width The width of the workspace SVG element.
- * @param {number} height The height of the workspace SVG element.
- * @param {number} scale The scale of the workspace being dragged.
- * @package
- */
-WorkspaceDragSurfaceSvg.prototype.setContentsAndShow = function(
-    blockCanvas, bubbleCanvas, previousSibling, width, height, scale) {
-  if (this.SVG_.childNodes.length) {
-    throw Error('Already dragging a block.');
+  /**
+   * Set the SVG to have the block canvas and bubble canvas in it and then
+   * show the surface.
+   * @param {!SVGElement} blockCanvas The block canvas <g> element from the
+   *     workspace.
+   * @param {!SVGElement} bubbleCanvas The <g> element that contains the
+   bubbles.
+   * @param {Element} previousSibling The element to insert the block canvas and
+         bubble canvas after when it goes back in the DOM at the end of a drag.
+   * @param {number} width The width of the workspace SVG element.
+   * @param {number} height The height of the workspace SVG element.
+   * @param {number} scale The scale of the workspace being dragged.
+   * @package
+   */
+  setContentsAndShow(
+      blockCanvas, bubbleCanvas, previousSibling, width, height, scale) {
+    if (this.SVG_.childNodes.length) {
+      throw Error('Already dragging a block.');
+    }
+    this.previousSibling_ = previousSibling;
+    // Make sure the blocks and bubble canvas are scaled appropriately.
+    blockCanvas.setAttribute(
+        'transform', 'translate(0, 0) scale(' + scale + ')');
+    bubbleCanvas.setAttribute(
+        'transform', 'translate(0, 0) scale(' + scale + ')');
+    this.SVG_.setAttribute('width', width);
+    this.SVG_.setAttribute('height', height);
+    this.SVG_.appendChild(blockCanvas);
+    this.SVG_.appendChild(bubbleCanvas);
+    this.SVG_.style.display = 'block';
   }
-  this.previousSibling_ = previousSibling;
-  // Make sure the blocks and bubble canvas are scaled appropriately.
-  blockCanvas.setAttribute('transform', 'translate(0, 0) scale(' + scale + ')');
-  bubbleCanvas.setAttribute(
-      'transform', 'translate(0, 0) scale(' + scale + ')');
-  this.SVG_.setAttribute('width', width);
-  this.SVG_.setAttribute('height', height);
-  this.SVG_.appendChild(blockCanvas);
-  this.SVG_.appendChild(bubbleCanvas);
-  this.SVG_.style.display = 'block';
-};
+}
 
 exports.WorkspaceDragSurfaceSvg = WorkspaceDragSurfaceSvg;

package/core/workspace_dragger.js

@@ -27,90 +27,89 @@ const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
  * Note that the workspace itself manages whether or not it has a drag surface
  * and how to do translations based on that.  This simply passes the right
  * commands based on events.
- * @param {!WorkspaceSvg} workspace The workspace to drag.
- * @constructor
  * @alias Blockly.WorkspaceDragger
  */
-const WorkspaceDragger = function(workspace) {
+class WorkspaceDragger {
   /**
-   * @type {!WorkspaceSvg}
-   * @private
+   * @param {!WorkspaceSvg} workspace The workspace to drag.
    */
-  this.workspace_ = workspace;
+  constructor(workspace) {
+    /**
+     * @type {!WorkspaceSvg}
+     * @private
+     */
+    this.workspace_ = workspace;
 
+    /**
+     * Whether horizontal scroll is enabled.
+     * @type {boolean}
+     * @private
+     */
+    this.horizontalScrollEnabled_ = this.workspace_.isMovableHorizontally();
+
+    /**
+     * Whether vertical scroll is enabled.
+     * @type {boolean}
+     * @private
+     */
+    this.verticalScrollEnabled_ = this.workspace_.isMovableVertically();
+
+    /**
+     * The scroll position of the workspace at the beginning of the drag.
+     * Coordinate system: pixel coordinates.
+     * @type {!Coordinate}
+     * @protected
+     */
+    this.startScrollXY_ = new Coordinate(workspace.scrollX, workspace.scrollY);
+  }
   /**
-   * Whether horizontal scroll is enabled.
-   * @type {boolean}
-   * @private
+   * Sever all links from this object.
+   * @package
+   * @suppress {checkTypes}
    */
-  this.horizontalScrollEnabled_ = this.workspace_.isMovableHorizontally();
-
+  dispose() {
+    this.workspace_ = null;
+  }
   /**
-   * Whether vertical scroll is enabled.
-   * @type {boolean}
-   * @private
+   * Start dragging the workspace.
+   * @package
    */
-  this.verticalScrollEnabled_ = this.workspace_.isMovableVertically();
-
+  startDrag() {
+    if (common.getSelected()) {
+      common.getSelected().unselect();
+    }
+    this.workspace_.setupDragSurface();
+  }
   /**
-   * The scroll position of the workspace at the beginning of the drag.
-   * Coordinate system: pixel coordinates.
-   * @type {!Coordinate}
-   * @protected
+   * Finish dragging the workspace and put everything back where it belongs.
+   * @param {!Coordinate} currentDragDeltaXY How far the pointer has
+   *     moved from the position at the start of the drag, in pixel coordinates.
+   * @package
    */
-  this.startScrollXY_ = new Coordinate(workspace.scrollX, workspace.scrollY);
-};
-
-/**
- * Sever all links from this object.
- * @package
- * @suppress {checkTypes}
- */
-WorkspaceDragger.prototype.dispose = function() {
-  this.workspace_ = null;
-};
-
-/**
- * Start dragging the workspace.
- * @package
- */
-WorkspaceDragger.prototype.startDrag = function() {
-  if (common.getSelected()) {
-    common.getSelected().unselect();
+  endDrag(currentDragDeltaXY) {
+    // Make sure everything is up to date.
+    this.drag(currentDragDeltaXY);
+    this.workspace_.resetDragSurface();
   }
-  this.workspace_.setupDragSurface();
-};
-
-/**
- * Finish dragging the workspace and put everything back where it belongs.
- * @param {!Coordinate} currentDragDeltaXY How far the pointer has
- *     moved from the position at the start of the drag, in pixel coordinates.
- * @package
- */
-WorkspaceDragger.prototype.endDrag = function(currentDragDeltaXY) {
-  // Make sure everything is up to date.
-  this.drag(currentDragDeltaXY);
-  this.workspace_.resetDragSurface();
-};
-
-/**
- * Move the workspace based on the most recent mouse movements.
- * @param {!Coordinate} currentDragDeltaXY How far the pointer has
- *     moved from the position at the start of the drag, in pixel coordinates.
- * @package
- */
-WorkspaceDragger.prototype.drag = function(currentDragDeltaXY) {
-  const newXY = Coordinate.sum(this.startScrollXY_, currentDragDeltaXY);
+  /**
+   * Move the workspace based on the most recent mouse movements.
+   * @param {!Coordinate} currentDragDeltaXY How far the pointer has
+   *     moved from the position at the start of the drag, in pixel coordinates.
+   * @package
+   */
+  drag(currentDragDeltaXY) {
+    const newXY = Coordinate.sum(this.startScrollXY_, currentDragDeltaXY);
 
-  if (this.horizontalScrollEnabled_ && this.verticalScrollEnabled_) {
-    this.workspace_.scroll(newXY.x, newXY.y);
-  } else if (this.horizontalScrollEnabled_) {
-    this.workspace_.scroll(newXY.x, this.workspace_.scrollY);
-  } else if (this.verticalScrollEnabled_) {
-    this.workspace_.scroll(this.workspace_.scrollX, newXY.y);
-  } else {
-    throw new TypeError('Invalid state.');
+    if (this.horizontalScrollEnabled_ && this.verticalScrollEnabled_) {
+      this.workspace_.scroll(newXY.x, newXY.y);
+    } else if (this.horizontalScrollEnabled_) {
+      this.workspace_.scroll(newXY.x, this.workspace_.scrollY);
+    } else if (this.verticalScrollEnabled_) {
+      this.workspace_.scroll(this.workspace_.scrollX, newXY.y);
+    } else {
+      throw new TypeError('Invalid state.');
+    }
   }
-};
+}
 
 exports.WorkspaceDragger = WorkspaceDragger;