blockly 8.20220331.0-beta.1 → 9.0.0-beta.0

package/core/workspace_drag_surface_svg.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Coordinate } from './utils/coordinate.js';
+/**
+ * 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.
+ * @alias Blockly.WorkspaceDragSurfaceSvg
+ */
+export declare class WorkspaceDragSurfaceSvg {
+    private readonly container;
+    /**
+     * The SVG drag surface. Set once by WorkspaceDragSurfaceSvg.createDom.
+     */
+    private SVG_;
+    /**
+     * The element to insert the block canvas and bubble canvas after when it
+     * goes back in the DOM at the end of a drag.
+     */
+    private previousSibling_;
+    /** @param container Containing element. */
+    constructor(container: Element);
+    /** Create the drag surface and inject it into the container. */
+    createDom(): void;
+    /**
+     * 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 x X translation for the entire surface
+     * @param y Y translation for the entire surface
+     * @internal
+     */
+    translateSurface(x: number, y: number): void;
+    /**
+     * Reports the surface translation in scaled workspace coordinates.
+     * Use this when finishing a drag to return blocks to the correct position.
+     * @return Current translation of the surface
+     * @internal
+     */
+    getSurfaceTranslation(): Coordinate;
+    /**
+     * Move the blockCanvas and bubbleCanvas out of the surface SVG and on to
+     * newSurface.
+     * @param newSurface The element to put the drag surface contents into.
+     * @internal
+     */
+    clearAndHide(newSurface: SVGElement): void;
+    /**
+       * Set the SVG to have the block canvas and bubble canvas in it and then
+       * show the surface.
+       * @param blockCanvas The block canvas <g> element from the
+       *     workspace.
+       * @param bubbleCanvas The <g> element that contains the
+       bubbles.
+       * @param 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 width The width of the workspace SVG element.
+       * @param height The height of the workspace SVG element.
+       * @param scale The scale of the workspace being dragged.
+   * @internal
+       */
+    setContentsAndShow(blockCanvas: SVGElement, bubbleCanvas: SVGElement, previousSibling: Element, width: number, height: number, scale: number): void;
+}

package/core/{workspace_drag_surface_svg.js → workspace_drag_surface_svg.ts}

@@ -11,8 +11,6 @@
  * blocks are never repainted during drag improving performance.
  */
 
-'use strict';
-
 /**
  * An SVG that floats on top of the workspace.
  * Blocks are moved into this SVG during a drag, improving performance.
@@ -20,13 +18,13 @@
  * blocks are never repainted during drag improving performance.
  * @class
  */
-goog.module('Blockly.WorkspaceDragSurfaceSvg');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.WorkspaceDragSurfaceSvg');
 
-const dom = goog.require('Blockly.utils.dom');
-const svgMath = goog.require('Blockly.utils.svgMath');
-/* eslint-disable-next-line no-unused-vars */
-const {Coordinate} = goog.requireType('Blockly.utils.Coordinate');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import type {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import {Svg} from './utils/svg.js';
+import * as svgMath from './utils/svg_math.js';
 
 
 /**
@@ -35,43 +33,32 @@ const {Svg} = goog.require('Blockly.utils.Svg');
  * blocks are never repainted during drag improving performance.
  * @alias Blockly.WorkspaceDragSurfaceSvg
  */
-class WorkspaceDragSurfaceSvg {
+export class WorkspaceDragSurfaceSvg {
   /**
-   * @param {!Element} container Containing element.
+   * The SVG drag surface. Set once by WorkspaceDragSurfaceSvg.createDom.
    */
-  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;
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private SVG_: SVGElement = null as AnyDuringMigration;
 
-    /**
-     * 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;
+  /**
+   * The element to insert the block canvas and bubble canvas after when it
+   * goes back in the DOM at the end of a drag.
+   */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'Element'.
+  private previousSibling_: Element = null as AnyDuringMigration;
 
+  /** @param container Containing element. */
+  constructor(private readonly container: Element) {
     this.createDom();
   }
-  /**
-   * Create the drag surface and inject it into the container.
-   */
+
+  /** Create the drag surface and inject it into the container. */
   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.
@@ -80,59 +67,58 @@ class WorkspaceDragSurfaceSvg {
      *   <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_);
+    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',
+    });
+    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
+   * @param x X translation for the entire surface
+   * @param y Y translation for the entire surface
+   * @internal
    */
-  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);
+  translateSurface(x: number, y: number) {
+    // Make sure the svg exists on a pixel boundary so that it is not fuzzy.
+    const fixedX = Math.round(x);
+    const fixedY = Math.round(y);
 
     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
+   * @return Current translation of the surface
+   * @internal
    */
-  getSurfaceTranslation() {
-    return svgMath.getRelativeXY(/** @type {!SVGElement} */ (this.SVG_));
+  getSurfaceTranslation(): Coordinate {
+    return svgMath.getRelativeXY((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
+   * @param newSurface The element to put the drag surface contents into.
+   * @internal
    */
-  clearAndHide(newSurface) {
+  clearAndHide(newSurface: SVGElement) {
     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]);
+    const blockCanvas = this.SVG_.childNodes[0] as Element;
+    const bubbleCanvas = this.SVG_.childNodes[1] as Element;
     if (!blockCanvas || !bubbleCanvas ||
         !dom.hasClass(blockCanvas, 'blocklyBlockCanvas') ||
         !dom.hasClass(bubbleCanvas, 'blocklyBubbleCanvas')) {
@@ -156,24 +142,29 @@ class WorkspaceDragSurfaceSvg {
       throw Error('Drag surface was not cleared.');
     }
     dom.setCssTransform(this.SVG_, '');
-    this.previousSibling_ = null;
+    // AnyDuringMigration because:  Type 'null' is not assignable to type
+    // 'Element'.
+    this.previousSibling_ = null as AnyDuringMigration;
   }
+
   /**
-   * 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
-   */
+     * Set the SVG to have the block canvas and bubble canvas in it and then
+     * show the surface.
+     * @param blockCanvas The block canvas <g> element from the
+     *     workspace.
+     * @param bubbleCanvas The <g> element that contains the
+     bubbles.
+     * @param 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 width The width of the workspace SVG element.
+     * @param height The height of the workspace SVG element.
+     * @param scale The scale of the workspace being dragged.
+ * @internal
+     */
   setContentsAndShow(
-      blockCanvas, bubbleCanvas, previousSibling, width, height, scale) {
+      blockCanvas: SVGElement, bubbleCanvas: SVGElement,
+      previousSibling: Element, width: number, height: number, scale: number) {
     if (this.SVG_.childNodes.length) {
       throw Error('Already dragging a block.');
     }
@@ -183,12 +174,14 @@ class WorkspaceDragSurfaceSvg {
         'transform', 'translate(0, 0) scale(' + scale + ')');
     bubbleCanvas.setAttribute(
         'transform', 'translate(0, 0) scale(' + scale + ')');
-    this.SVG_.setAttribute('width', width);
-    this.SVG_.setAttribute('height', height);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.SVG_.setAttribute('width', width as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.SVG_.setAttribute('height', height as AnyDuringMigration);
     this.SVG_.appendChild(blockCanvas);
     this.SVG_.appendChild(bubbleCanvas);
     this.SVG_.style.display = 'block';
   }
 }
-
-exports.WorkspaceDragSurfaceSvg = WorkspaceDragSurfaceSvg;

package/core/workspace_dragger.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Coordinate } from './utils/coordinate.js';
+import type { WorkspaceSvg } from './workspace_svg.js';
+/**
+ * Class for a workspace dragger.  It moves the workspace around when it is
+ * being dragged by a mouse or touch.
+ * 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.
+ * @alias Blockly.WorkspaceDragger
+ */
+export declare class WorkspaceDragger {
+    private workspace;
+    private readonly horizontalScrollEnabled_;
+    private readonly verticalScrollEnabled_;
+    protected startScrollXY_: Coordinate;
+    /** @param workspace The workspace to drag. */
+    constructor(workspace: WorkspaceSvg);
+    /**
+     * Sever all links from this object.
+     * @suppress {checkTypes}
+     * @internal
+     */
+    dispose(): void;
+    /**
+     * Start dragging the workspace.
+     * @internal
+     */
+    startDrag(): void;
+    /**
+     * Finish dragging the workspace and put everything back where it belongs.
+     * @param currentDragDeltaXY How far the pointer has moved from the position
+     *     at the start of the drag, in pixel coordinates.
+     * @internal
+     */
+    endDrag(currentDragDeltaXY: Coordinate): void;
+    /**
+     * Move the workspace based on the most recent mouse movements.
+     * @param currentDragDeltaXY How far the pointer has moved from the position
+     *     at the start of the drag, in pixel coordinates.
+     * @internal
+     */
+    drag(currentDragDeltaXY: Coordinate): void;
+}

package/core/workspace_dragger.ts

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods for dragging a workspace visually.
+ */
+
+/**
+ * Methods for dragging a workspace visually.
+ * @class
+ */
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.WorkspaceDragger');
+
+import * as common from './common.js';
+import {Coordinate} from './utils/coordinate.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
+
+
+/**
+ * Class for a workspace dragger.  It moves the workspace around when it is
+ * being dragged by a mouse or touch.
+ * 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.
+ * @alias Blockly.WorkspaceDragger
+ */
+export class WorkspaceDragger {
+  private readonly horizontalScrollEnabled_: boolean;
+  private readonly verticalScrollEnabled_: boolean;
+  protected startScrollXY_: Coordinate;
+
+  /** @param workspace The workspace to drag. */
+  constructor(private workspace: WorkspaceSvg) {
+    /** Whether horizontal scroll is enabled. */
+    this.horizontalScrollEnabled_ = this.workspace.isMovableHorizontally();
+
+    /** Whether vertical scroll is enabled. */
+    this.verticalScrollEnabled_ = this.workspace.isMovableVertically();
+
+    /**
+     * The scroll position of the workspace at the beginning of the drag.
+     * Coordinate system: pixel coordinates.
+     */
+    this.startScrollXY_ = new Coordinate(workspace.scrollX, workspace.scrollY);
+  }
+
+  /**
+   * Sever all links from this object.
+   * @suppress {checkTypes}
+   * @internal
+   */
+  dispose() {
+    // AnyDuringMigration because:  Type 'null' is not assignable to type
+    // 'WorkspaceSvg'.
+    this.workspace = null as AnyDuringMigration;
+  }
+
+  /**
+   * Start dragging the workspace.
+   * @internal
+   */
+  startDrag() {
+    if (common.getSelected()) {
+      common.getSelected()!.unselect();
+    }
+    this.workspace.setupDragSurface();
+  }
+
+  /**
+   * Finish dragging the workspace and put everything back where it belongs.
+   * @param currentDragDeltaXY How far the pointer has moved from the position
+   *     at the start of the drag, in pixel coordinates.
+   * @internal
+   */
+  endDrag(currentDragDeltaXY: Coordinate) {
+    // Make sure everything is up to date.
+    this.drag(currentDragDeltaXY);
+    this.workspace.resetDragSurface();
+  }
+
+  /**
+   * Move the workspace based on the most recent mouse movements.
+   * @param currentDragDeltaXY How far the pointer has moved from the position
+   *     at the start of the drag, in pixel coordinates.
+   * @internal
+   */
+  drag(currentDragDeltaXY: Coordinate) {
+    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.');
+    }
+  }
+}