nodeskini 1.0.1 → 1.0.2

package/blocklySkini/blockly/core/block_animations.js

@@ -0,0 +1,203 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods animating a block on connection and disconnection.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.blockAnimations');
+
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.Svg');
+
+
+/**
+ * PID of disconnect UI animation.  There can only be one at a time.
+ * @type {number}
+ * @private
+ */
+Blockly.blockAnimations.disconnectPid_ = 0;
+
+/**
+ * SVG group of wobbling block.  There can only be one at a time.
+ * @type {Element}
+ * @private
+ */
+Blockly.blockAnimations.disconnectGroup_ = null;
+
+/**
+ * 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) {
+    Blockly.utils.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) {
+  var workspace = block.workspace;
+  var 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.
+  var 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;
+  }
+  var ripple = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.CIRCLE,
+      {
+        'cx': xy.x,
+        'cy': xy.y,
+        'r': 0,
+        'fill': 'none',
+        'stroke': '#888',
+        'stroke-width': 10
+      },
+      workspace.getParentSvg());
+  // Start the animation.
+  Blockly.blockAnimations.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.
+ * @private
+ */
+Blockly.blockAnimations.connectionUiStep_ = function(ripple, start, scale) {
+  var ms = new Date - start;
+  var percent = ms / 150;
+  if (percent > 1) {
+    Blockly.utils.dom.removeNode(ripple);
+  } else {
+    ripple.setAttribute('r', percent * 25 * scale);
+    ripple.style.opacity = 1 - percent;
+    Blockly.blockAnimations.disconnectPid_ = setTimeout(
+        Blockly.blockAnimations.connectionUiStep_, 10, ripple, start, scale);
+  }
+};
+
+/**
+ * Play some UI effects (sound, animation) when disconnecting a block.
+ * @param {!Blockly.BlockSvg} block The block being disconnected.
+ * @package
+ */
+Blockly.blockAnimations.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.
+  var DISPLACEMENT = 10;
+  // Scale magnitude of skew to height of block.
+  var height = block.getHeightWidth().height;
+  var magnitude = Math.atan(DISPLACEMENT / height) / Math.PI * 180;
+  if (!block.RTL) {
+    magnitude *= -1;
+  }
+  // Start the animation.
+  Blockly.blockAnimations.disconnectUiStep_(
+      block.getSvgRoot(), 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.
+ * @private
+ */
+Blockly.blockAnimations.disconnectUiStep_ = function(group, magnitude, start) {
+  var DURATION = 200;  // Milliseconds.
+  var WIGGLES = 3;  // Half oscillations.
+
+  var ms = new Date - start;
+  var percent = ms / DURATION;
+
+  if (percent > 1) {
+    group.skew_ = '';
+  } else {
+    var skew = Math.round(
+        Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude);
+    group.skew_ = 'skewX(' + skew + ')';
+    Blockly.blockAnimations.disconnectGroup_ = group;
+    Blockly.blockAnimations.disconnectPid_ =
+        setTimeout(Blockly.blockAnimations.disconnectUiStep_, 10, group,
+            magnitude, start);
+  }
+  group.setAttribute('transform', group.translate_ + group.skew_);
+};
+
+/**
+ * Stop the disconnect UI animation immediately.
+ * @package
+ */
+Blockly.blockAnimations.disconnectUiStop = function() {
+  if (Blockly.blockAnimations.disconnectGroup_) {
+    clearTimeout(Blockly.blockAnimations.disconnectPid_);
+    var group = Blockly.blockAnimations.disconnectGroup_;
+    group.skew_ = '';
+    group.setAttribute('transform', group.translate_);
+    Blockly.blockAnimations.disconnectGroup_ = null;
+  }
+};

package/blocklySkini/blockly/core/block_drag_surface.js

@@ -0,0 +1,212 @@
+/**
+ * @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.
+ * @author picklesrus
+ */
+
+'use strict';
+
+goog.provide('Blockly.BlockDragSurfaceSvg');
+goog.require('Blockly.utils');
+goog.require('Blockly.utils.Coordinate');
+goog.require('Blockly.utils.dom');
+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.
+ * @param {!Element} container Containing element.
+ * @constructor
+ */
+Blockly.BlockDragSurfaceSvg = function(container) {
+  /**
+   * @type {!Element}
+   * @private
+   */
+  this.container_ = container;
+  this.createDom();
+};
+
+/**
+ * The SVG drag surface. Set once by Blockly.BlockDragSurfaceSvg.createDom.
+ * @type {SVGElement}
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.SVG_ = null;
+
+/**
+ * This is where blocks live while they are being dragged if the drag surface
+ * is enabled.
+ * @type {SVGElement}
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.dragGroup_ = null;
+
+/**
+ * Containing HTML element; parent of the workspace and the drag surface.
+ * @type {Element}
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.container_ = null;
+
+/**
+ * Cached value for the scale of the drag surface.
+ * Used to set/get the correct translation during and after a drag.
+ * @type {number}
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.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 {Blockly.utils.Coordinate}
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.surfaceXY_ = null;
+
+/**
+ * Create the drag surface and inject it into the container.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.createDom = function() {
+  if (this.SVG_) {
+    return;  // Already created.
+  }
+  this.SVG_ = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.SVG, {
+        'xmlns': Blockly.utils.dom.SVG_NS,
+        'xmlns:html': Blockly.utils.dom.HTML_NS,
+        'xmlns:xlink': Blockly.utils.dom.XLINK_NS,
+        'version': '1.1',
+        'class': 'blocklyBlockDragSurface'
+      }, this.container_);
+  this.dragGroup_ = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.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.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.setBlocksAndShow = function(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 Blockly.utils.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 workspace coordinates.
+ * @param {number} y Y translation in workspace coordinates.
+ * @param {number} scale Scale of the group.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.translateAndScaleGroup = function(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.
+  var fixedX = x.toFixed(0);
+  var fixedY = y.toFixed(0);
+  this.dragGroup_.setAttribute('transform',
+      'translate(' + fixedX + ',' + fixedY + ') scale(' + scale + ')');
+};
+
+/**
+ * Translate the drag surface's SVG based on its internal state.
+ * @private
+ */
+Blockly.BlockDragSurfaceSvg.prototype.translateSurfaceInternal_ = function() {
+  var x = this.surfaceXY_.x;
+  var 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';
+
+  Blockly.utils.dom.setCssTransform(this.SVG_,
+      'translate3d(' + x + 'px, ' + y + 'px, 0px)');
+};
+
+/**
+ * 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.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.translateSurface = function(x, y) {
+  this.surfaceXY_ = new Blockly.utils.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 {!Blockly.utils.Coordinate} Current translation of the surface.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.getSurfaceTranslation = function() {
+  var xy = Blockly.utils.getRelativeXY(/** @type {!SVGElement} */ (this.SVG_));
+  return new Blockly.utils.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.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.getGroup = function() {
+  return this.dragGroup_;
+};
+
+/**
+ * Get the current blocks on the drag surface, if any (primarily
+ * for BlockSvg.getRelativeToSurfaceXY).
+ * @return {Element} Drag surface block DOM element, or undefined if no blocks
+ * exist.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.getCurrentBlock = function() {
+  return /** @type {Element} */ (this.dragGroup_.firstChild);
+};
+
+/**
+ * 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.
+ */
+Blockly.BlockDragSurfaceSvg.prototype.clearAndHide = function(opt_newSurface) {
+  if (opt_newSurface) {
+    // appendChild removes the node from this.dragGroup_
+    opt_newSurface.appendChild(this.getCurrentBlock());
+  } else {
+    this.dragGroup_.removeChild(this.getCurrentBlock());
+  }
+  this.SVG_.style.display = 'none';
+  if (this.dragGroup_.childNodes.length) {
+    throw Error('Drag group was not cleared.');
+  }
+  this.surfaceXY_ = null;
+};