blockly 8.0.4-beta.0 → 8.0.5-beta.0

package/core/block_animations.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from './block_svg.js';
+/**
+ * Play some UI effects (sound, animation) when disposing of a block.
+ * @param block The block being disposed of.
+ * @alias Blockly.blockAnimations.disposeUiEffect
+ * @internal
+ */
+export declare function disposeUiEffect(block: BlockSvg): void;
+/**
+ * Play some UI effects (sound, ripple) after a connection has been established.
+ * @param block The block being connected.
+ * @alias Blockly.blockAnimations.connectionUiEffect
+ * @internal
+ */
+export declare function connectionUiEffect(block: BlockSvg): void;
+/**
+ * Play some UI effects (sound, animation) when disconnecting a block.
+ * @param block The block being disconnected.
+ * @alias Blockly.blockAnimations.disconnectUiEffect
+ * @internal
+ */
+export declare function disconnectUiEffect(block: BlockSvg): void;
+/**
+ * Stop the disconnect UI animation immediately.
+ * @alias Blockly.blockAnimations.disconnectUiStop
+ * @internal
+ */
+export declare function disconnectUiStop(): void;

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

@@ -7,90 +7,91 @@
 /**
  * @fileoverview Methods animating a block on connection and disconnection.
  */
-'use strict';
 
 /**
  * Methods animating a block on connection and disconnection.
  * @namespace Blockly.blockAnimations
  */
-goog.module('Blockly.blockAnimations');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.blockAnimations');
 
-const dom = goog.require('Blockly.utils.dom');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import type {BlockSvg} from './block_svg.js';
+import * as dom from './utils/dom.js';
+import {Svg} from './utils/svg.js';
 
 
-/**
- * PID of disconnect UI animation.  There can only be one at a time.
- * @type {number}
- */
-let disconnectPid = 0;
+/** A bounding box for a cloned block. */
+interface CloneRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** PID of disconnect UI animation.  There can only be one at a time. */
+let disconnectPid: AnyDuringMigration = 0;
+
+/** SVG group of wobbling block.  There can only be one at a time. */
+let disconnectGroup: SVGElement|null = null;
 
-/**
- * SVG group of wobbling block.  There can only be one at a time.
- * @type {Element}
- */
-let disconnectGroup = null;
 
 /**
  * Play some UI effects (sound, animation) when disposing of a block.
- * @param {!BlockSvg} block The block being disposed of.
+ * @param block The block being disposed of.
  * @alias Blockly.blockAnimations.disposeUiEffect
- * @package
+ * @internal
  */
-const disposeUiEffect = function(block) {
+export function disposeUiEffect(block: BlockSvg) {
   const workspace = block.workspace;
   const svgGroup = block.getSvgRoot();
   workspace.getAudioManager().play('delete');
 
   const xy = workspace.getSvgXY(svgGroup);
   // Deeply clone the current block.
-  const clone = svgGroup.cloneNode(true);
-  clone.translateX_ = xy.x;
-  clone.translateY_ = xy.y;
+  const clone: SVGGElement = svgGroup.cloneNode(true) as SVGGElement;
   clone.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
   workspace.getParentSvg().appendChild(clone);
-  clone.bBox_ = clone.getBBox();
-  // Start the animation.
-  disposeUiStep(clone, workspace.RTL, new Date, workspace.scale);
-};
-exports.disposeUiEffect = disposeUiEffect;
-
+  const cloneRect =
+      {'x': xy.x, 'y': xy.y, 'width': block.width, 'height': block.height};
+  disposeUiStep(clone, cloneRect, workspace.RTL, new Date(), workspace.scale);
+}
 /**
  * Animate a cloned block and eventually dispose of it.
  * This is a class method, not an instance method since the original block has
  * been destroyed and is no longer accessible.
- * @param {!Element} clone SVG element to animate and dispose of.
- * @param {boolean} rtl True if RTL, false if LTR.
- * @param {!Date} start Date of animation's start.
- * @param {number} workspaceScale Scale of workspace.
+ * @param clone SVG element to animate and dispose of.
+ * @param rect Starting rect of the clone.
+ * @param rtl True if RTL, false if LTR.
+ * @param start Date of animation's start.
+ * @param workspaceScale Scale of workspace.
  */
-const disposeUiStep = function(clone, rtl, start, workspaceScale) {
-  const ms = new Date - start;
+function disposeUiStep(
+    clone: Element, rect: CloneRect, rtl: boolean, start: Date,
+    workspaceScale: number) {
+  const ms = new Date().getTime() - start.getTime();
   const percent = ms / 150;
   if (percent > 1) {
     dom.removeNode(clone);
   } else {
-    const x = clone.translateX_ +
-        (rtl ? -1 : 1) * clone.bBox_.width * workspaceScale / 2 * percent;
-    const y = clone.translateY_ + clone.bBox_.height * workspaceScale * percent;
+    const x =
+        rect.x + (rtl ? -1 : 1) * rect.width * workspaceScale / 2 * percent;
+    const y = rect.y + rect.height * workspaceScale * percent;
     const scale = (1 - percent) * workspaceScale;
     clone.setAttribute(
         'transform',
         'translate(' + x + ',' + y + ')' +
             ' scale(' + scale + ')');
-    setTimeout(disposeUiStep, 10, clone, rtl, start, workspaceScale);
+    setTimeout(disposeUiStep, 10, clone, rect, rtl, start, workspaceScale);
   }
-};
+}
 
 /**
  * Play some UI effects (sound, ripple) after a connection has been established.
- * @param {!BlockSvg} block The block being connected.
+ * @param block The block being connected.
  * @alias Blockly.blockAnimations.connectionUiEffect
- * @package
+ * @internal
  */
-const connectionUiEffect = function(block) {
+export function connectionUiEffect(block: BlockSvg) {
   const workspace = block.workspace;
   const scale = workspace.scale;
   workspace.getAudioManager().play('click');
@@ -118,35 +119,35 @@ const connectionUiEffect = function(block) {
       },
       workspace.getParentSvg());
   // Start the animation.
-  connectionUiStep(ripple, new Date, scale);
-};
-exports.connectionUiEffect = connectionUiEffect;
+  connectionUiStep(ripple, new Date(), scale);
+}
 
 /**
  * Expand a ripple around a connection.
- * @param {!SVGElement} ripple Element to animate.
- * @param {!Date} start Date of animation's start.
- * @param {number} scale Scale of workspace.
+ * @param ripple Element to animate.
+ * @param start Date of animation's start.
+ * @param scale Scale of workspace.
  */
-const connectionUiStep = function(ripple, start, scale) {
-  const ms = new Date - start;
+function connectionUiStep(ripple: SVGElement, start: Date, scale: number) {
+  const ms = new Date().getTime() - start.getTime();
   const percent = ms / 150;
   if (percent > 1) {
     dom.removeNode(ripple);
   } else {
-    ripple.setAttribute('r', percent * 25 * scale);
-    ripple.style.opacity = 1 - percent;
+    ripple.setAttribute('r', (percent * 25 * scale).toString());
+    ripple.style.opacity = (1 - percent).toString();
     disconnectPid = setTimeout(connectionUiStep, 10, ripple, start, scale);
   }
-};
+}
 
 /**
  * Play some UI effects (sound, animation) when disconnecting a block.
- * @param {!BlockSvg} block The block being disconnected.
+ * @param block The block being disconnected.
  * @alias Blockly.blockAnimations.disconnectUiEffect
- * @package
+ * @internal
  */
-const disconnectUiEffect = function(block) {
+export function disconnectUiEffect(block: BlockSvg) {
+  disconnectUiStop();
   block.workspace.getAudioManager().play('disconnect');
   if (block.workspace.scale < 1) {
     return;  // Too small to care about visual effects.
@@ -160,47 +161,42 @@ const disconnectUiEffect = function(block) {
     magnitude *= -1;
   }
   // Start the animation.
-  disconnectUiStep(block.getSvgRoot(), magnitude, new Date);
-};
-exports.disconnectUiEffect = disconnectUiEffect;
+  disconnectGroup = block.getSvgRoot();
+  disconnectUiStep(disconnectGroup, magnitude, new Date());
+}
 
 /**
  * Animate a brief wiggle of a disconnected block.
- * @param {!SVGElement} group SVG element to animate.
- * @param {number} magnitude Maximum degrees skew (reversed for RTL).
- * @param {!Date} start Date of animation's start.
+ * @param group SVG element to animate.
+ * @param magnitude Maximum degrees skew (reversed for RTL).
+ * @param start Date of animation's start.
  */
-const disconnectUiStep = function(group, magnitude, start) {
+function disconnectUiStep(group: SVGElement, magnitude: number, start: Date) {
   const DURATION = 200;  // Milliseconds.
   const WIGGLES = 3;     // Half oscillations.
 
-  const ms = new Date - start;
+  const ms = new Date().getTime() - start.getTime();
   const percent = ms / DURATION;
 
-  if (percent > 1) {
-    group.skew_ = '';
-  } else {
-    const skew = Math.round(
+  let skew = '';
+  if (percent <= 1) {
+    const val = Math.round(
         Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude);
-    group.skew_ = 'skewX(' + skew + ')';
-    disconnectGroup = group;
+    skew = `skewX(${val})`;
     disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start);
   }
-  group.setAttribute('transform', group.translate_ + group.skew_);
-};
+  group.setAttribute('transform', skew);
+}
 
 /**
  * Stop the disconnect UI animation immediately.
  * @alias Blockly.blockAnimations.disconnectUiStop
- * @package
+ * @internal
  */
-const disconnectUiStop = function() {
+export function disconnectUiStop() {
   if (disconnectGroup) {
     clearTimeout(disconnectPid);
-    const group = disconnectGroup;
-    group.skew_ = '';
-    group.setAttribute('transform', group.translate_);
+    disconnectGroup.setAttribute('transform', '');
     disconnectGroup = null;
   }
-};
-exports.disconnectUiStop = disconnectUiStop;
+}

package/core/block_drag_surface.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Coordinate } from './utils/coordinate.js';
+/**
+ * Class for a drag surface for the currently dragged block. This is a separate
+ * SVG that contains only the currently moving block, or nothing.
+ * @alias Blockly.BlockDragSurfaceSvg
+ */
+export declare class BlockDragSurfaceSvg {
+    private readonly container;
+    /** The SVG drag surface. Set once by BlockDragSurfaceSvg.createDom. */
+    private svg_;
+    /**
+     * This is where blocks live while they are being dragged if the drag
+     * surface is enabled.
+     */
+    private dragGroup_;
+    /**
+     * Cached value for the scale of the drag surface.
+     * Used to set/get the correct translation during and after a drag.
+     */
+    private scale_;
+    /**
+     * Cached value for the translation of the drag surface.
+     * This translation is in pixel units, because the scale is applied to the
+     * drag group rather than the top-level SVG.
+     */
+    private surfaceXY_;
+    private readonly childSurfaceXY_;
+    /** @param container Containing element. */
+    constructor(container: Element);
+    /** Create the drag surface and inject it into the container. */
+    createDom(): void;
+    /**
+     * Set the SVG blocks on the drag surface's group and show the surface.
+     * Only one block group should be on the drag surface at a time.
+     * @param blocks Block or group of blocks to place on the drag surface.
+     */
+    setBlocksAndShow(blocks: SVGElement): void;
+    /**
+     * Translate and scale the entire drag surface group to the given position, to
+     * keep in sync with the workspace.
+     * @param x X translation in pixel coordinates.
+     * @param y Y translation in pixel coordinates.
+     * @param scale Scale of the group.
+     */
+    translateAndScaleGroup(x: number, y: number, scale: number): void;
+    /**
+     * Translate the drag surface's SVG based on its internal state.
+     * @private
+     */
+    translateSurfaceInternal_(): void;
+    /**
+     * Translates the entire surface by a relative offset.
+     * @param deltaX Horizontal offset in pixel units.
+     * @param deltaY Vertical offset in pixel units.
+     */
+    translateBy(deltaX: number, deltaY: number): 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.
+     */
+    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.
+     */
+    getSurfaceTranslation(): Coordinate;
+    /**
+     * Provide a reference to the drag group (primarily for
+     * BlockSvg.getRelativeToSurfaceXY).
+     * @return Drag surface group element.
+     */
+    getGroup(): SVGElement | null;
+    /**
+     * Returns the SVG drag surface.
+     * @returns The SVG drag surface.
+     */
+    getSvgRoot(): SVGElement | null;
+    /**
+     * Get the current blocks on the drag surface, if any (primarily
+     * for BlockSvg.getRelativeToSurfaceXY).
+     * @return Drag surface block DOM element, or null if no blocks exist.
+     */
+    getCurrentBlock(): Element | null;
+    /**
+     * Gets the translation of the child block surface
+     * This surface is in charge of keeping track of how much the workspace has
+     * moved.
+     * @return The amount the workspace has been moved.
+     */
+    getWsTranslation(): Coordinate;
+    /**
+     * Clear the group and hide the surface; move the blocks off onto the provided
+     * element.
+     * If the block is being deleted it doesn't need to go back to the original
+     * surface, since it would be removed immediately during dispose.
+     * @param opt_newSurface Surface the dragging blocks should be moved to, or
+     *     null if the blocks should be removed from this surface without being
+     *     moved to a different surface.
+     */
+    clearAndHide(opt_newSurface?: Element): void;
+}