cloud-blocks/core/block_animations.js

Cloud Blocks is a library for building scratch computing interfaces with Luxrobo MODI.

/**
 * @license
 * Visual Blocks Editor
 *
 * Copyright 2018 Google Inc.
 * https://developers.google.com/blockly/
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Methods animating a block on connection and disconnection.
 * @author fenichel@google.com (Rachel Fenichel)
 */
'use strict';

goog.provide('Blockly.BlockAnimations');

/**
 * Play some UI effects (sound, animation) when disposing of a block.
 * @param {!Blockly.BlockSvg} block The block being disposed of.
 * @package
 */
Blockly.BlockAnimations.disposeUiEffect = function (block) {
  var workspace = block.workspace;
  var svgGroup = block.getSvgRoot();
  workspace.getAudioManager().play('delete');

  var xy = workspace.getSvgXY(svgGroup);
  // Deeply clone the current block.
  var 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.
  Blockly.BlockAnimations.disposeUiStep_(
    clone,
    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.
 * @private
 */
Blockly.BlockAnimations.disposeUiStep_ = function (
  clone,
  rtl,
  start,
  workspaceScale
) {
  var ms = new Date() - start;
  var percent = ms / 150;
  if (percent > 1) {
    goog.dom.removeNode(clone);
  } else {
    var x =
      clone.translateX_ +
      (((rtl ? -1 : 1) * clone.bBox_.width * workspaceScale) / 2) * percent;
    var y = clone.translateY_ + clone.bBox_.height * workspaceScale * percent;
    var scale = (1 - percent) * workspaceScale;
    clone.setAttribute(
      'transform',
      'translate(' + x + ',' + y + ')' + ' scale(' + scale + ')'
    );
    setTimeout(
      Blockly.BlockAnimations.disposeUiStep_,
      10,
      clone,
      rtl,
      start,
      workspaceScale
    );
  }
};

/**
 * Play some UI effects (sound, ripple) after a connection has been established.
 * @param {!Blockly.BlockSvg} block The block being connected.
 * @package
 */
Blockly.BlockAnimations.connectionUiEffect = function (block) {
  block.workspace.getAudioManager().play('click');
};

/**
 * Play some UI effects (sound, animation) when disconnecting a block.
 * No-op in scratch-blocks, which has no disconnect animation.
 * @param {!Blockly.BlockSvg} _block The block being disconnected.
 * @package
 */
Blockly.BlockAnimations.disconnectUiEffect = function (
  /* eslint-disable no-unused-vars */ _block
  /* eslint-enable no-unused-vars */
) {};

/**
 * Stop the disconnect UI animation immediately.
 * No-op in scratch-blocks, which has no disconnect animation.
 * @package
 */
Blockly.BlockAnimations.disconnectUiStop = function () {};