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

package/core/block_animations.js

@@ -1,206 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @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');
-
-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');
-
-
-/**
- * PID of disconnect UI animation.  There can only be one at a time.
- * @type {number}
- */
-let disconnectPid = 0;
-
-/**
- * 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.
- * @alias Blockly.blockAnimations.disposeUiEffect
- * @package
- */
-const disposeUiEffect = function(block) {
-  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;
-  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;
-
-/**
- * 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.
- */
-const disposeUiStep = function(clone, rtl, start, workspaceScale) {
-  const ms = new Date - start;
-  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 scale = (1 - percent) * workspaceScale;
-    clone.setAttribute(
-        'transform',
-        'translate(' + x + ',' + y + ')' +
-            ' scale(' + scale + ')');
-    setTimeout(disposeUiStep, 10, clone, rtl, start, workspaceScale);
-  }
-};
-
-/**
- * Play some UI effects (sound, ripple) after a connection has been established.
- * @param {!BlockSvg} block The block being connected.
- * @alias Blockly.blockAnimations.connectionUiEffect
- * @package
- */
-const connectionUiEffect = function(block) {
-  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);
-};
-exports.connectionUiEffect = connectionUiEffect;
-
-/**
- * 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.
- */
-const connectionUiStep = function(ripple, start, scale) {
-  const ms = new Date - start;
-  const percent = ms / 150;
-  if (percent > 1) {
-    dom.removeNode(ripple);
-  } else {
-    ripple.setAttribute('r', percent * 25 * scale);
-    ripple.style.opacity = 1 - percent;
-    disconnectPid = setTimeout(connectionUiStep, 10, ripple, start, scale);
-  }
-};
-
-/**
- * Play some UI effects (sound, animation) when disconnecting a block.
- * @param {!BlockSvg} block The block being disconnected.
- * @alias Blockly.blockAnimations.disconnectUiEffect
- * @package
- */
-const disconnectUiEffect = function(block) {
-  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.
-  disconnectUiStep(block.getSvgRoot(), magnitude, new Date);
-};
-exports.disconnectUiEffect = disconnectUiEffect;
-
-/**
- * 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.
- */
-const disconnectUiStep = function(group, magnitude, start) {
-  const DURATION = 200;  // Milliseconds.
-  const WIGGLES = 3;     // Half oscillations.
-
-  const ms = new Date - start;
-  const percent = ms / DURATION;
-
-  if (percent > 1) {
-    group.skew_ = '';
-  } else {
-    const skew = Math.round(
-        Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude);
-    group.skew_ = 'skewX(' + skew + ')';
-    disconnectGroup = group;
-    disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start);
-  }
-  group.setAttribute('transform', group.translate_ + group.skew_);
-};
-
-/**
- * Stop the disconnect UI animation immediately.
- * @alias Blockly.blockAnimations.disconnectUiStop
- * @package
- */
-const disconnectUiStop = function() {
-  if (disconnectGroup) {
-    clearTimeout(disconnectPid);
-    const group = disconnectGroup;
-    group.skew_ = '';
-    group.setAttribute('transform', group.translate_);
-    disconnectGroup = null;
-  }
-};
-exports.disconnectUiStop = disconnectUiStop;

package/core/block_drag_surface.js

@@ -1,269 +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.
- */
-
-'use strict';
-
-/**
- * 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
- */
-goog.module('Blockly.BlockDragSurfaceSvg');
-
-const dom = goog.require('Blockly.utils.dom');
-const svgMath = goog.require('Blockly.utils.svgMath');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Svg} = goog.require('Blockly.utils.Svg');
-
-
-/**
- * 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
- */
-const BlockDragSurfaceSvg = class {
-  /**
-   * @param {!Element} container Containing element.
-   */
-  constructor(container) {
-    /**
-     * The SVG drag surface. Set once by BlockDragSurfaceSvg.createDom.
-     * @type {?SVGElement}
-     * @private
-     */
-    this.SVG_ = null;
-
-    /**
-     * This is where blocks live while they are being dragged if the drag
-     * surface is enabled.
-     * @type {?SVGElement}
-     * @private
-     */
-    this.dragGroup_ = null;
-
-    /**
-     * Containing HTML element; parent of the workspace and the drag surface.
-     * @type {!Element}
-     * @private
-     */
-    this.container_ = container;
-
-    /**
-     * Cached value for the scale of the drag surface.
-     * Used to set/get the correct translation during and after a drag.
-     * @type {number}
-     * @private
-     */
-    this.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.
-     * @type {?Coordinate}
-     * @private
-     */
-    this.surfaceXY_ = null;
-
-    /**
-     * 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.
-     * @type {!Coordinate}
-     * @private
-     */
-    this.childSurfaceXY_ = new Coordinate(0, 0);
-
-    this.createDom();
-  }
-
-  /**
-   * Create the drag surface and inject it into the container.
-   */
-  createDom() {
-    if (this.SVG_) {
-      return;  // Already created.
-    }
-    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_);
-  }
-
-  /**
-   * 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 {!SVGElement} blocks Block or group of blocks to place on the drag
-   * surface.
-   */
-  setBlocksAndShow(blocks) {
-    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 {number} x X translation in pixel coordinates.
-   * @param {number} y Y translation in pixel coordinates.
-   * @param {number} scale Scale of the group.
-   */
-  translateAndScaleGroup(x, y, scale) {
-    this.scale_ = scale;
-    // This is a work-around to prevent a the blocks from rendering
-    // fuzzy while they are being dragged on the drag surface.
-    const fixedX = x.toFixed(0);
-    const fixedY = y.toFixed(0);
-
-    this.childSurfaceXY_.x = parseInt(fixedX, 10);
-    this.childSurfaceXY_.y = parseInt(fixedY, 10);
-
-    this.dragGroup_.setAttribute(
-        'transform',
-        'translate(' + fixedX + ',' + fixedY + ') 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;
-    // This is a work-around to prevent a the blocks from rendering
-    // fuzzy while they are being dragged on the drag surface.
-    x = x.toFixed(0);
-    y = y.toFixed(0);
-    this.SVG_.style.display = 'block';
-
-    dom.setCssTransform(this.SVG_, 'translate3d(' + x + 'px, ' + y + 'px, 0)');
-  }
-
-  /**
-   * Translates the entire surface by a relative offset.
-   * @param {number} deltaX Horizontal offset in pixel units.
-   * @param {number} deltaY Vertical offset in pixel units.
-   */
-  translateBy(deltaX, deltaY) {
-    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 {number} x X translation for the entire surface.
-   * @param {number} y Y translation for the entire surface.
-   */
-  translateSurface(x, y) {
-    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 {!Coordinate} Current translation of the surface.
-   */
-  getSurfaceTranslation() {
-    const xy = svgMath.getRelativeXY(/** @type {!SVGElement} */ (this.SVG_));
-    return new Coordinate(xy.x / this.scale_, xy.y / this.scale_);
-  }
-
-  /**
-   * Provide a reference to the drag group (primarily for
-   * BlockSvg.getRelativeToSurfaceXY).
-   * @return {?SVGElement} Drag surface group element.
-   */
-  getGroup() {
-    return this.dragGroup_;
-  }
-
-  /**
-   * Returns the SVG drag surface.
-   * @returns {?SVGElement} The SVG drag surface.
-   */
-  getSvgRoot() {
-    return this.SVG_;
-  }
-
-  /**
-   * Get the current blocks on the drag surface, if any (primarily
-   * for BlockSvg.getRelativeToSurfaceXY).
-   * @return {?Element} Drag surface block DOM element, or null if no blocks
-   *     exist.
-   */
-  getCurrentBlock() {
-    return /** @type {Element} */ (this.dragGroup_.firstChild);
-  }
-
-  /**
-   * Gets the translation of the child block surface
-   * This surface is in charge of keeping track of how much the workspace has
-   * moved.
-   * @return {!Coordinate} The amount the workspace has been moved.
-   */
-  getWsTranslation() {
-    // 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 {Element=} 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) {
-    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_ = null;
-  }
-};
-
-exports.BlockDragSurfaceSvg = BlockDragSurfaceSvg;