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

package/core/block_animations.ts

@@ -1,202 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Methods animating a block on connection and disconnection.
- */
-
-/**
- * Methods animating a block on connection and disconnection.
- * @namespace Blockly.blockAnimations
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.blockAnimations');
-
-import type {BlockSvg} from './block_svg.js';
-import * as dom from './utils/dom.js';
-import {Svg} from './utils/svg.js';
-
-
-/** 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;
-
-
-/**
- * Play some UI effects (sound, animation) when disposing of a block.
- * @param block The block being disposed of.
- * @alias Blockly.blockAnimations.disposeUiEffect
- * @internal
- */
-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: SVGGElement = svgGroup.cloneNode(true) as SVGGElement;
-  clone.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
-  workspace.getParentSvg().appendChild(clone);
-  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 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.
- */
-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 =
-        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, rect, rtl, start, workspaceScale);
-  }
-}
-
-/**
- * Play some UI effects (sound, ripple) after a connection has been established.
- * @param block The block being connected.
- * @alias Blockly.blockAnimations.connectionUiEffect
- * @internal
- */
-export function connectionUiEffect(block: BlockSvg) {
-  const workspace = block.workspace;
-  const scale = workspace.scale;
-  workspace.getAudioManager().play('click');
-  if (scale < 1) {
-    return;  // Too small to care about visual effects.
-  }
-  // Determine the absolute coordinates of the inferior block.
-  const xy = workspace.getSvgXY(block.getSvgRoot());
-  // Offset the coordinates based on the two connection types, fix scale.
-  if (block.outputConnection) {
-    xy.x += (block.RTL ? 3 : -3) * scale;
-    xy.y += 13 * scale;
-  } else if (block.previousConnection) {
-    xy.x += (block.RTL ? -23 : 23) * scale;
-    xy.y += 3 * scale;
-  }
-  const ripple = dom.createSvgElement(
-      Svg.CIRCLE, {
-        'cx': xy.x,
-        'cy': xy.y,
-        'r': 0,
-        'fill': 'none',
-        'stroke': '#888',
-        'stroke-width': 10,
-      },
-      workspace.getParentSvg());
-  // Start the animation.
-  connectionUiStep(ripple, new Date(), scale);
-}
-
-/**
- * Expand a ripple around a connection.
- * @param ripple Element to animate.
- * @param start Date of animation's start.
- * @param scale Scale of workspace.
- */
-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).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 block The block being disconnected.
- * @alias Blockly.blockAnimations.disconnectUiEffect
- * @internal
- */
-export function disconnectUiEffect(block: BlockSvg) {
-  disconnectUiStop();
-  block.workspace.getAudioManager().play('disconnect');
-  if (block.workspace.scale < 1) {
-    return;  // Too small to care about visual effects.
-  }
-  // Horizontal distance for bottom of block to wiggle.
-  const DISPLACEMENT = 10;
-  // Scale magnitude of skew to height of block.
-  const height = block.getHeightWidth().height;
-  let magnitude = Math.atan(DISPLACEMENT / height) / Math.PI * 180;
-  if (!block.RTL) {
-    magnitude *= -1;
-  }
-  // Start the animation.
-  disconnectGroup = block.getSvgRoot();
-  disconnectUiStep(disconnectGroup, magnitude, new Date());
-}
-
-/**
- * Animate a brief wiggle of a disconnected block.
- * @param group SVG element to animate.
- * @param magnitude Maximum degrees skew (reversed for RTL).
- * @param start Date of animation's start.
- */
-function disconnectUiStep(group: SVGElement, magnitude: number, start: Date) {
-  const DURATION = 200;  // Milliseconds.
-  const WIGGLES = 3;     // Half oscillations.
-
-  const ms = new Date().getTime() - start.getTime();
-  const percent = ms / DURATION;
-
-  let skew = '';
-  if (percent <= 1) {
-    const val = Math.round(
-        Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude);
-    skew = `skewX(${val})`;
-    disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start);
-  }
-  group.setAttribute('transform', skew);
-}
-
-/**
- * Stop the disconnect UI animation immediately.
- * @alias Blockly.blockAnimations.disconnectUiStop
- * @internal
- */
-export function disconnectUiStop() {
-  if (disconnectGroup) {
-    clearTimeout(disconnectPid);
-    disconnectGroup.setAttribute('transform', '');
-    disconnectGroup = null;
-  }
-}

package/core/block_drag_surface.ts

@@ -1,237 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview A class that manages a surface for dragging blocks.  When a
- * block drag is started, we move the block (and children) to a separate DOM
- * element that we move around using translate3d. At the end of the drag, the
- * blocks are put back in into the SVG they came from. This helps
- * performance by avoiding repainting the entire SVG on every mouse move
- * while dragging blocks.
- */
-
-/**
- * A class that manages a surface for dragging blocks.  When a
- * block drag is started, we move the block (and children) to a separate DOM
- * element that we move around using translate3d. At the end of the drag, the
- * blocks are put back in into the SVG they came from. This helps
- * performance by avoiding repainting the entire SVG on every mouse move
- * while dragging blocks.
- * @class
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.BlockDragSurfaceSvg');
-
-import {Coordinate} from './utils/coordinate.js';
-import * as deprecation from './utils/deprecation.js';
-import * as dom from './utils/dom.js';
-import {Svg} from './utils/svg.js';
-import * as svgMath from './utils/svg_math.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 class BlockDragSurfaceSvg {
-  /** The SVG drag surface. Set once by BlockDragSurfaceSvg.createDom. */
-  private svg_: SVGElement;
-
-  /**
-   * This is where blocks live while they are being dragged if the drag
-   * surface is enabled.
-   */
-  private dragGroup_: SVGElement;
-
-  /**
-   * Cached value for the scale of the drag surface.
-   * Used to set/get the correct translation during and after a drag.
-   */
-  private scale_ = 1;
-
-  /**
-   * 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_: Coordinate = new Coordinate(0, 0);
-  private readonly childSurfaceXY_: Coordinate;
-
-  /** @param container Containing element. */
-  constructor(private readonly container: Element) {
-    /**
-     * Cached value for the translation of the child drag surface in pixel
-     * units. Since the child drag surface tracks the translation of the
-     * workspace this is ultimately the translation of the workspace.
-     */
-    this.childSurfaceXY_ = new Coordinate(0, 0);
-
-    this.svg_ = dom.createSvgElement(
-        Svg.SVG, {
-          'xmlns': dom.SVG_NS,
-          'xmlns:html': dom.HTML_NS,
-          'xmlns:xlink': dom.XLINK_NS,
-          'version': '1.1',
-          'class': 'blocklyBlockDragSurface',
-        },
-        this.container);
-    this.dragGroup_ = dom.createSvgElement(Svg.G, {}, this.svg_ as SVGElement);
-  }
-
-  /** Create the drag surface and inject it into the container. */
-  createDom() {
-    // No alternative provided, because now the dom is just automatically
-    // created in the constructor now.
-    deprecation.warn('BlockDragSurfaceSvg createDom', 'June 2022', 'June 2023');
-  }
-
-  /**
-   * 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) {
-    if (this.dragGroup_.childNodes.length) {
-      throw Error('Already dragging a block.');
-    }
-    // appendChild removes the blocks from the previous parent
-    this.dragGroup_.appendChild(blocks);
-    this.svg_.style.display = 'block';
-    this.surfaceXY_ = new Coordinate(0, 0);
-  }
-
-  /**
-   * 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) {
-    this.scale_ = scale;
-    // Make sure the svg exists on a pixel boundary so that it is not fuzzy.
-    const roundX = Math.round(x);
-    const roundY = Math.round(y);
-    this.childSurfaceXY_.x = roundX;
-    this.childSurfaceXY_.y = roundY;
-    this.dragGroup_!.setAttribute(
-        'transform',
-        'translate(' + roundX + ',' + roundY + ') scale(' + scale + ')');
-  }
-
-  /**
-   * Translate the drag surface's SVG based on its internal state.
-   * @private
-   */
-  translateSurfaceInternal_() {
-    let x = this.surfaceXY_!.x;
-    let y = this.surfaceXY_!.y;
-    // Make sure the svg exists on a pixel boundary so that it is not fuzzy.
-    x = Math.round(x);
-    y = Math.round(y);
-    this.svg_.style.display = 'block';
-    dom.setCssTransform(this.svg_, 'translate3d(' + x + 'px, ' + y + 'px, 0)');
-  }
-
-  /**
-   * 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) {
-    const x = this.surfaceXY_.x + deltaX;
-    const y = this.surfaceXY_.y + deltaY;
-    this.surfaceXY_ = new Coordinate(x, y);
-    this.translateSurfaceInternal_();
-  }
-
-  /**
-   * 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) {
-    this.surfaceXY_ = new Coordinate(x * this.scale_, y * this.scale_);
-    this.translateSurfaceInternal_();
-  }
-
-  /**
-   * 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 {
-    const xy = svgMath.getRelativeXY(this.svg_ as SVGElement);
-    return new Coordinate(xy.x / this.scale_, xy.y / this.scale_);
-  }
-
-  /**
-   * Provide a reference to the drag group (primarily for
-   * BlockSvg.getRelativeToSurfaceXY).
-   * @return Drag surface group element.
-   */
-  getGroup(): SVGElement|null {
-    return this.dragGroup_;
-  }
-
-  /**
-   * Returns the SVG drag surface.
-   * @returns The SVG drag surface.
-   */
-  getSvgRoot(): SVGElement|null {
-    return this.svg_;
-  }
-
-  /**
-   * 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 {
-    return this.dragGroup_.firstChild as Element;
-  }
-
-  /**
-   * 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 {
-    // Returning a copy so the coordinate can not be changed outside this class.
-    return this.childSurfaceXY_.clone();
-  }
-
-  /**
-   * 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) {
-    const currentBlockElement = this.getCurrentBlock();
-    if (currentBlockElement) {
-      if (opt_newSurface) {
-        // appendChild removes the node from this.dragGroup_
-        opt_newSurface.appendChild(currentBlockElement);
-      } else {
-        this.dragGroup_.removeChild(currentBlockElement);
-      }
-    }
-    this.svg_.style.display = 'none';
-    if (this.dragGroup_.childNodes.length) {
-      throw Error('Drag group was not cleared.');
-    }
-    this.surfaceXY_ = new Coordinate(0, 0);
-  }
-}