blockly 8.0.5 → 9.0.0-beta.0

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

@@ -7,184 +7,123 @@
 /**
  * @fileoverview Object representing a zoom icons.
  */
-'use strict';
 
 /**
  * Object representing a zoom icons.
  * @class
  */
-goog.module('Blockly.ZoomControls');
-
-const Css = goog.require('Blockly.Css');
-const Touch = goog.require('Blockly.Touch');
-const browserEvents = goog.require('Blockly.browserEvents');
-const dom = goog.require('Blockly.utils.dom');
-const eventUtils = goog.require('Blockly.Events.utils');
-const {SPRITE} = goog.require('Blockly.sprite');
-const uiPosition = goog.require('Blockly.uiPosition');
-const {ComponentManager} = goog.require('Blockly.ComponentManager');
-/* eslint-disable-next-line no-unused-vars */
-const {IPositionable} = goog.require('Blockly.IPositionable');
-/* eslint-disable-next-line no-unused-vars */
-const {MetricsManager} = goog.requireType('Blockly.MetricsManager');
-const {Rect} = goog.require('Blockly.utils.Rect');
-const {Size} = goog.require('Blockly.utils.Size');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.ZoomControls');
+
 /* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.Click');
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './metrics_manager.js';
+// Unused import preserved for side-effects. Remove if unneeded.
+import './events/events_click.js';
+
+import * as browserEvents from './browser_events.js';
+import {ComponentManager} from './component_manager.js';
+import * as Css from './css.js';
+import * as eventUtils from './events/utils.js';
+import type {IPositionable} from './interfaces/i_positionable.js';
+import type {UiMetrics} from './metrics_manager.js';
+import * as uiPosition from './positionable_helpers.js';
+import {SPRITE} from './sprites.js';
+import * as Touch from './touch.js';
+import * as dom from './utils/dom.js';
+import {Rect} from './utils/rect.js';
+import {Size} from './utils/size.js';
+import {Svg} from './utils/svg.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
 
 
 /**
  * Class for a zoom controls.
- * @implements {IPositionable}
  * @alias Blockly.ZoomControls
  */
-class ZoomControls {
+export class ZoomControls implements IPositionable {
   /**
-   * @param {!WorkspaceSvg} workspace The workspace to sit in.
+   * The unique id for this component that is used to register with the
+   * ComponentManager.
    */
-  constructor(workspace) {
-    /**
-     * @type {!WorkspaceSvg}
-     * @private
-     */
-    this.workspace_ = workspace;
-
-    /**
-     * The unique id for this component that is used to register with the
-     * ComponentManager.
-     * @type {string}
-     */
-    this.id = 'zoomControls';
-
-    /**
-     * A handle to use to unbind the mouse down event handler for zoom reset
-     *    button. Opaque data returned from browserEvents.conditionalBind.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onZoomResetWrapper_ = null;
-
-    /**
-     * A handle to use to unbind the mouse down event handler for zoom in
-     * button. Opaque data returned from browserEvents.conditionalBind.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onZoomInWrapper_ = null;
-
-    /**
-     * A handle to use to unbind the mouse down event handler for zoom out
-     * button. Opaque data returned from browserEvents.conditionalBind.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onZoomOutWrapper_ = null;
-
-    /**
-     * The zoom in svg <g> element.
-     * @type {SVGGElement}
-     * @private
-     */
-    this.zoomInGroup_ = null;
-
-    /**
-     * The zoom out svg <g> element.
-     * @type {SVGGElement}
-     * @private
-     */
-    this.zoomOutGroup_ = null;
-
-    /**
-     * The zoom reset svg <g> element.
-     * @type {SVGGElement}
-     * @private
-     */
-    this.zoomResetGroup_ = null;
-
-    /**
-     * Width of the zoom controls.
-     * @type {number}
-     * @const
-     * @private
-     */
-    this.WIDTH_ = 32;
-
-    /**
-     * Height of each zoom control.
-     * @type {number}
-     * @const
-     * @private
-     */
-    this.HEIGHT_ = 32;
-
-    /**
-     * Small spacing used between the zoom in and out control, in pixels.
-     * @type {number}
-     * @const
-     * @private
-     */
-    this.SMALL_SPACING_ = 2;
-
-    /**
-     * Large spacing used between the zoom in and reset control, in pixels.
-     * @type {number}
-     * @const
-     * @private
-     */
-    this.LARGE_SPACING_ = 11;
-
-    /**
-     * Distance between zoom controls and bottom or top edge of workspace.
-     * @type {number}
-     * @const
-     * @private
-     */
-    this.MARGIN_VERTICAL_ = 20;
-
-    /**
-     * Distance between zoom controls and right or left edge of workspace.
-     * @type {number}
-     * @private
-     */
-    this.MARGIN_HORIZONTAL_ = 20;
-
-    /**
-     * The SVG group containing the zoom controls.
-     * @type {SVGElement}
-     * @private
-     */
-    this.svgGroup_ = null;
-
-    /**
-     * Left coordinate of the zoom controls.
-     * @type {number}
-     * @private
-     */
-    this.left_ = 0;
-
-    /**
-     * Top coordinate of the zoom controls.
-     * @type {number}
-     * @private
-     */
-    this.top_ = 0;
-
-    /**
-     * Whether this has been initialized.
-     * @type {boolean}
-     * @private
-     */
-    this.initialized_ = false;
-  }
+  id = 'zoomControls';
+
+  /**
+   * A handle to use to unbind the mouse down event handler for zoom reset
+   *    button. Opaque data returned from browserEvents.conditionalBind.
+   */
+  private onZoomResetWrapper_: browserEvents.Data|null = null;
+
+  /**
+   * A handle to use to unbind the mouse down event handler for zoom in
+   * button. Opaque data returned from browserEvents.conditionalBind.
+   */
+  private onZoomInWrapper_: browserEvents.Data|null = null;
+
+  /**
+   * A handle to use to unbind the mouse down event handler for zoom out
+   * button. Opaque data returned from browserEvents.conditionalBind.
+   */
+  private onZoomOutWrapper_: browserEvents.Data|null = null;
+
+  /** The zoom in svg <g> element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGGElement'.
+  private zoomInGroup_: SVGGElement = null as AnyDuringMigration;
+
+  /** The zoom out svg <g> element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGGElement'.
+  private zoomOutGroup_: SVGGElement = null as AnyDuringMigration;
+
+  /** The zoom reset svg <g> element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGGElement'.
+  private zoomResetGroup_: SVGGElement = null as AnyDuringMigration;
+
+  /** Width of the zoom controls. */
+  private readonly WIDTH_ = 32;
+
+  /** Height of each zoom control. */
+  private readonly HEIGHT_ = 32;
+
+  /** Small spacing used between the zoom in and out control, in pixels. */
+  private readonly SMALL_SPACING_ = 2;
+
+  /**
+   * Large spacing used between the zoom in and reset control, in pixels.
+   */
+  private readonly LARGE_SPACING_ = 11;
+
+  /** Distance between zoom controls and bottom or top edge of workspace. */
+  private readonly MARGIN_VERTICAL_ = 20;
+
+  /** Distance between zoom controls and right or left edge of workspace. */
+  private readonly MARGIN_HORIZONTAL_ = 20;
+
+  /** The SVG group containing the zoom controls. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private svgGroup_: SVGElement = null as AnyDuringMigration;
+
+  /** Left coordinate of the zoom controls. */
+  private left_ = 0;
+
+  /** Top coordinate of the zoom controls. */
+  private top_ = 0;
+
+  /** Whether this has been initialized. */
+  private initialized_ = false;
+
+  /** @param workspace The workspace to sit in. */
+  constructor(private readonly workspace: WorkspaceSvg) {}
+
   /**
    * Create the zoom controls.
-   * @return {!SVGElement} The zoom controls SVG group.
+   * @return The zoom controls SVG group.
    */
-  createDom() {
-    this.svgGroup_ = dom.createSvgElement(Svg.G, {}, null);
+  createDom(): SVGElement {
+    this.svgGroup_ = dom.createSvgElement(Svg.G, {});
 
     // Each filter/pattern needs a unique ID for the case of multiple Blockly
     // instances on a page.  Browser behaviour becomes undefined otherwise.
@@ -192,30 +131,30 @@ class ZoomControls {
     const rnd = String(Math.random()).substring(2);
     this.createZoomOutSvg_(rnd);
     this.createZoomInSvg_(rnd);
-    if (this.workspace_.isMovable()) {
+    if (this.workspace.isMovable()) {
       // If we zoom to the center and the workspace isn't movable we could
       // loose blocks at the edges of the workspace.
       this.createZoomResetSvg_(rnd);
     }
     return this.svgGroup_;
   }
-  /**
-   * Initializes the zoom controls.
-   */
+
+  /** Initializes the zoom controls. */
   init() {
-    this.workspace_.getComponentManager().addComponent({
+    this.workspace.getComponentManager().addComponent({
       component: this,
       weight: 2,
       capabilities: [ComponentManager.Capability.POSITIONABLE],
     });
     this.initialized_ = true;
   }
+
   /**
    * Disposes of this zoom controls.
    * Unlink from all DOM elements to prevent memory leaks.
    */
   dispose() {
-    this.workspace_.getComponentManager().removeComponent('zoomControls');
+    this.workspace.getComponentManager().removeComponent('zoomControls');
     if (this.svgGroup_) {
       dom.removeNode(this.svgGroup_);
     }
@@ -229,13 +168,14 @@ class ZoomControls {
       browserEvents.unbind(this.onZoomOutWrapper_);
     }
   }
+
   /**
    * Returns the bounding rectangle of the UI element in pixel units relative to
    * the Blockly injection div.
-   * @return {?Rect} The UI elements's bounding box. Null if
-   *   bounding box should be ignored by other UI elements.
+   * @return The UI elements's bounding box. Null if bounding box should be
+   *     ignored by other UI elements.
    */
-  getBoundingRectangle() {
+  getBoundingRectangle(): Rect|null {
     let height = this.SMALL_SPACING_ + 2 * this.HEIGHT_;
     if (this.zoomResetGroup_) {
       height += this.LARGE_SPACING_ + this.HEIGHT_;
@@ -244,29 +184,29 @@ class ZoomControls {
     const right = this.left_ + this.WIDTH_;
     return new Rect(this.top_, bottom, this.left_, right);
   }
+
   /**
    * Positions the zoom controls.
    * It is positioned in the opposite corner to the corner the
    * categories/toolbox starts at.
-   * @param {!MetricsManager.UiMetrics} metrics The workspace metrics.
-   * @param {!Array<!Rect>} savedPositions List of rectangles that
-   *     are already on the workspace.
+   * @param metrics The workspace metrics.
+   * @param savedPositions List of rectangles that are already on the workspace.
    */
-  position(metrics, savedPositions) {
+  position(metrics: UiMetrics, savedPositions: Rect[]) {
     // Not yet initialized.
     if (!this.initialized_) {
       return;
     }
 
     const cornerPosition =
-        uiPosition.getCornerOppositeToolbox(this.workspace_, metrics);
+        uiPosition.getCornerOppositeToolbox(this.workspace, metrics);
     let height = this.SMALL_SPACING_ + 2 * this.HEIGHT_;
     if (this.zoomResetGroup_) {
       height += this.LARGE_SPACING_ + this.HEIGHT_;
     }
     const startRect = uiPosition.getStartPositionRect(
         cornerPosition, new Size(this.WIDTH_, height), this.MARGIN_HORIZONTAL_,
-        this.MARGIN_VERTICAL_, metrics, this.workspace_);
+        this.MARGIN_VERTICAL_, metrics, this.workspace);
 
     const verticalPosition = cornerPosition.vertical;
     const bumpDirection = verticalPosition === uiPosition.verticalPosition.TOP ?
@@ -301,24 +241,24 @@ class ZoomControls {
     this.svgGroup_.setAttribute(
         'transform', 'translate(' + this.left_ + ',' + this.top_ + ')');
   }
+
   /**
    * Create the zoom in icon and its event handler.
-   * @param {string} rnd The random string to use as a suffix in the clip path's
-   *     ID.  These IDs must be unique in case there are multiple Blockly
-   *     instances on the same page.
-   * @private
+   * @param rnd The random string to use as a suffix in the clip path's ID.
+   *     These IDs must be unique in case there are multiple Blockly instances
+   *     on the same page.
    */
-  createZoomOutSvg_(rnd) {
+  private createZoomOutSvg_(rnd: string) {
     /* This markup will be generated and added to the .svgGroup_:
-    <g class="blocklyZoom">
-      <clipPath id="blocklyZoomoutClipPath837493">
-        <rect width="32" height="32></rect>
-      </clipPath>
-      <image width="96" height="124" x="-64" y="-92"
-    xlink:href="media/sprites.png"
-          clip-path="url(#blocklyZoomoutClipPath837493)"></image>
-    </g>
-    */
+        <g class="blocklyZoom">
+          <clipPath id="blocklyZoomoutClipPath837493">
+            <rect width="32" height="32></rect>
+          </clipPath>
+          <image width="96" height="124" x="-64" y="-92"
+        xlink:href="media/sprites.png"
+              clip-path="url(#blocklyZoomoutClipPath837493)"></image>
+        </g>
+        */
     this.zoomOutGroup_ =
         dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
     const clip = dom.createSvgElement(
@@ -341,30 +281,30 @@ class ZoomControls {
         this.zoomOutGroup_);
     zoomoutSvg.setAttributeNS(
         dom.XLINK_NS, 'xlink:href',
-        this.workspace_.options.pathToMedia + SPRITE.url);
+        this.workspace.options.pathToMedia + SPRITE.url);
 
     // Attach listener.
     this.onZoomOutWrapper_ = browserEvents.conditionalBind(
         this.zoomOutGroup_, 'mousedown', null, this.zoom_.bind(this, -1));
   }
+
   /**
    * Create the zoom out icon and its event handler.
-   * @param {string} rnd The random string to use as a suffix in the clip path's
-   *     ID.  These IDs must be unique in case there are multiple Blockly
-   *     instances on the same page.
-   * @private
+   * @param rnd The random string to use as a suffix in the clip path's ID.
+   *     These IDs must be unique in case there are multiple Blockly instances
+   *     on the same page.
    */
-  createZoomInSvg_(rnd) {
+  private createZoomInSvg_(rnd: string) {
     /* This markup will be generated and added to the .svgGroup_:
-    <g class="blocklyZoom">
-      <clipPath id="blocklyZoominClipPath837493">
-        <rect width="32" height="32"></rect>
-      </clipPath>
-      <image width="96" height="124" x="-32" y="-92"
-    xlink:href="media/sprites.png"
-          clip-path="url(#blocklyZoominClipPath837493)"></image>
-    </g>
-    */
+        <g class="blocklyZoom">
+          <clipPath id="blocklyZoominClipPath837493">
+            <rect width="32" height="32"></rect>
+          </clipPath>
+          <image width="96" height="124" x="-32" y="-92"
+        xlink:href="media/sprites.png"
+              clip-path="url(#blocklyZoominClipPath837493)"></image>
+        </g>
+        */
     this.zoomInGroup_ =
         dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
     const clip = dom.createSvgElement(
@@ -386,46 +326,46 @@ class ZoomControls {
         this.zoomInGroup_);
     zoominSvg.setAttributeNS(
         dom.XLINK_NS, 'xlink:href',
-        this.workspace_.options.pathToMedia + SPRITE.url);
+        this.workspace.options.pathToMedia + SPRITE.url);
 
     // Attach listener.
     this.onZoomInWrapper_ = browserEvents.conditionalBind(
         this.zoomInGroup_, 'mousedown', null, this.zoom_.bind(this, 1));
   }
+
   /**
    * Handles a mouse down event on the zoom in or zoom out buttons on the
    *    workspace.
-   * @param {number} amount Amount of zooming. Negative amount values zoom out,
-   *    and positive amount values zoom in.
-   * @param {!Event} e A mouse down event.
-   * @private
+   * @param amount Amount of zooming. Negative amount values zoom out, and
+   *     positive amount values zoom in.
+   * @param e A mouse down event.
    */
-  zoom_(amount, e) {
-    this.workspace_.markFocused();
-    this.workspace_.zoomCenter(amount);
+  private zoom_(amount: number, e: Event) {
+    this.workspace.markFocused();
+    this.workspace.zoomCenter(amount);
     this.fireZoomEvent_();
     Touch.clearTouchIdentifier();  // Don't block future drags.
     e.stopPropagation();           // Don't start a workspace scroll.
     e.preventDefault();            // Stop double-clicking from selecting text.
   }
+
   /**
    * Create the zoom reset icon and its event handler.
-   * @param {string} rnd The random string to use as a suffix in the clip path's
-   *     ID.  These IDs must be unique in case there are multiple Blockly
-   *     instances on the same page.
-   * @private
+   * @param rnd The random string to use as a suffix in the clip path's ID.
+   *     These IDs must be unique in case there are multiple Blockly instances
+   *     on the same page.
    */
-  createZoomResetSvg_(rnd) {
+  private createZoomResetSvg_(rnd: string) {
     /* This markup will be generated and added to the .svgGroup_:
-    <g class="blocklyZoom">
-      <clipPath id="blocklyZoomresetClipPath837493">
-        <rect width="32" height="32"></rect>
-      </clipPath>
-      <image width="96" height="124" x="-32" y="-92"
-    xlink:href="media/sprites.png"
-          clip-path="url(#blocklyZoomresetClipPath837493)"></image>
-    </g>
-    */
+        <g class="blocklyZoom">
+          <clipPath id="blocklyZoomresetClipPath837493">
+            <rect width="32" height="32"></rect>
+          </clipPath>
+          <image width="96" height="124" x="-32" y="-92"
+        xlink:href="media/sprites.png"
+              clip-path="url(#blocklyZoomresetClipPath837493)"></image>
+        </g>
+        */
     this.zoomResetGroup_ =
         dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
     const clip = dom.createSvgElement(
@@ -442,54 +382,50 @@ class ZoomControls {
         this.zoomResetGroup_);
     zoomresetSvg.setAttributeNS(
         dom.XLINK_NS, 'xlink:href',
-        this.workspace_.options.pathToMedia + SPRITE.url);
+        this.workspace.options.pathToMedia + SPRITE.url);
 
     // Attach event listeners.
     this.onZoomResetWrapper_ = browserEvents.conditionalBind(
         this.zoomResetGroup_, 'mousedown', null, this.resetZoom_.bind(this));
   }
+
   /**
    * Handles a mouse down event on the reset zoom button on the workspace.
-   * @param {!Event} e A mouse down event.
-   * @private
+   * @param e A mouse down event.
    */
-  resetZoom_(e) {
-    this.workspace_.markFocused();
+  private resetZoom_(e: Event) {
+    this.workspace.markFocused();
 
     // zoom is passed amount and computes the new scale using the formula:
     // targetScale = currentScale * Math.pow(speed, amount)
-    const targetScale = this.workspace_.options.zoomOptions.startScale;
-    const currentScale = this.workspace_.scale;
-    const speed = this.workspace_.options.zoomOptions.scaleSpeed;
+    const targetScale = this.workspace.options.zoomOptions.startScale;
+    const currentScale = this.workspace.scale;
+    const speed = this.workspace.options.zoomOptions.scaleSpeed;
     // To compute amount:
     // amount = log(speed, (targetScale / currentScale))
     // Math.log computes natural logarithm (ln), to change the base, use
     // formula: log(base, value) = ln(value) / ln(base)
     const amount = Math.log(targetScale / currentScale) / Math.log(speed);
-    this.workspace_.beginCanvasTransition();
-    this.workspace_.zoomCenter(amount);
-    this.workspace_.scrollCenter();
+    this.workspace.beginCanvasTransition();
+    this.workspace.zoomCenter(amount);
+    this.workspace.scrollCenter();
 
-    setTimeout(this.workspace_.endCanvasTransition.bind(this.workspace_), 500);
+    setTimeout(this.workspace.endCanvasTransition.bind(this.workspace), 500);
     this.fireZoomEvent_();
     Touch.clearTouchIdentifier();  // Don't block future drags.
     e.stopPropagation();           // Don't start a workspace scroll.
     e.preventDefault();            // Stop double-clicking from selecting text.
   }
-  /**
-   * Fires a zoom control UI event.
-   * @private
-   */
-  fireZoomEvent_() {
-    const uiEvent = new (eventUtils.get(eventUtils.CLICK))(
-        null, this.workspace_.id, 'zoom_controls');
+
+  /** Fires a zoom control UI event. */
+  private fireZoomEvent_() {
+    const uiEvent = new (eventUtils.get(eventUtils.CLICK))!
+        (null, this.workspace.id, 'zoom_controls');
     eventUtils.fire(uiEvent);
   }
 }
 
-/**
- * CSS for zoom controls.  See css.js for use.
- */
+/** CSS for zoom controls.  See css.js for use. */
 Css.register(`
 .blocklyZoom>image, .blocklyZoom>svg>image {
   opacity: .4;
@@ -503,5 +439,3 @@ Css.register(`
   opacity: .8;
 }
 `);
-
-exports.ZoomControls = ZoomControls;

package/core.d.ts

@@ -9,6 +9,4 @@
  * @author samelh@google.com (Sam El-Husseini)
  */
 
-/// <reference path="blockly.d.ts" />
-
-export * from 'core/blockly';
+export * from './core/blockly';

package/core.js

@@ -23,13 +23,12 @@ Blockly.setLocale = function (locale) {
 
 // Override textToDomDocument and provide Node.js alternatives to DOMParser and
 // XMLSerializer.
-const globalThis = Blockly.utils.global;
 if (typeof globalThis.document !== 'object') {
   const jsdom = require('jsdom/lib/jsdom/living');
   globalThis.DOMParser = jsdom.DOMParser;
   globalThis.XMLSerializer = jsdom.XMLSerializer;
   const xmlDocument = Blockly.utils.xml.textToDomDocument(
-    `<xml xmlns="${Blockly.utils.xml.NAME_SPACE}"></xml>`);
+      `<xml xmlns="${Blockly.utils.xml.NAME_SPACE}"></xml>`);
   Blockly.utils.xml.setDocument(xmlDocument);
 }
 

package/dart.d.ts

@@ -9,8 +9,5 @@
  * @author samelh@google.com (Sam El-Husseini)
  */
 
-/// <reference path="core.d.ts" />
-
-import * as Blockly from './core';
 declare const dart: any;
 export = dart;