mirror of
https://github.com/google/blockly.git
synced 2026-01-10 10:27:08 +01:00
Merge pull request #5079 from gonfunko/block_animations
Migrate core/block_animations.js to goog.module syntax
This commit is contained in:
Aaron Dodson
GitHub
@@ -10,50 +10,48 @@
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
goog.provide('Blockly.blockAnimations');
|
||||
goog.module('Blockly.blockAnimations');
|
||||
goog.module.declareLegacyNamespace();
|
||||
|
||||
goog.require('Blockly.utils.dom');
|
||||
goog.require('Blockly.utils.Svg');
|
||||
|
||||
goog.requireType('Blockly.BlockSvg');
|
||||
const BlockSvg = goog.requireType('Blockly.BlockSvg');
|
||||
const dom = goog.require('Blockly.utils.dom');
|
||||
const Svg = 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;
|
||||
let disconnectPid = 0;
|
||||
|
||||
/**
|
||||
* SVG group of wobbling block. There can only be one at a time.
|
||||
* @type {Element}
|
||||
* @private
|
||||
*/
|
||||
Blockly.blockAnimations.disconnectGroup_ = null;
|
||||
let disconnectGroup = null;
|
||||
|
||||
/**
|
||||
* Play some UI effects (sound, animation) when disposing of a block.
|
||||
* @param {!Blockly.BlockSvg} block The block being disposed of.
|
||||
* @package
|
||||
* @param {!BlockSvg} block The block being disposed of.
|
||||
*/
|
||||
Blockly.blockAnimations.disposeUiEffect = function(block) {
|
||||
var workspace = block.workspace;
|
||||
var svgGroup = block.getSvgRoot();
|
||||
function disposeUiEffect(block) {
|
||||
const workspace = block.workspace;
|
||||
const svgGroup = block.getSvgRoot();
|
||||
workspace.getAudioManager().play('delete');
|
||||
|
||||
var xy = workspace.getSvgXY(svgGroup);
|
||||
const xy = workspace.getSvgXY(svgGroup);
|
||||
// Deeply clone the current block.
|
||||
var clone = svgGroup.cloneNode(true);
|
||||
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.
|
||||
Blockly.blockAnimations.disposeUiStep_(clone, workspace.RTL, new Date,
|
||||
workspace.scale);
|
||||
};
|
||||
disposeUiStep(clone, workspace.RTL, new Date, workspace.scale);
|
||||
}
|
||||
/** @package */
|
||||
exports.disposeUiEffect = disposeUiEffect;
|
||||
|
||||
/**
|
||||
* Animate a cloned block and eventually dispose of it.
|
||||
@@ -63,40 +61,38 @@ Blockly.blockAnimations.disposeUiEffect = function(block) {
|
||||
* @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;
|
||||
function disposeUiStep(clone, rtl, start, workspaceScale) {
|
||||
const ms = new Date - start;
|
||||
const percent = ms / 150;
|
||||
if (percent > 1) {
|
||||
Blockly.utils.dom.removeNode(clone);
|
||||
dom.removeNode(clone);
|
||||
} else {
|
||||
var x = clone.translateX_ +
|
||||
const 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);
|
||||
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 {!Blockly.BlockSvg} block The block being connected.
|
||||
* @package
|
||||
* @param {!BlockSvg} block The block being connected.
|
||||
*/
|
||||
Blockly.blockAnimations.connectionUiEffect = function(block) {
|
||||
var workspace = block.workspace;
|
||||
var scale = workspace.scale;
|
||||
function connectionUiEffect(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.
|
||||
var xy = workspace.getSvgXY(block.getSvgRoot());
|
||||
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;
|
||||
@@ -105,9 +101,8 @@ Blockly.blockAnimations.connectionUiEffect = function(block) {
|
||||
xy.x += (block.RTL ? -23 : 23) * scale;
|
||||
xy.y += 3 * scale;
|
||||
}
|
||||
var ripple = Blockly.utils.dom.createSvgElement(
|
||||
Blockly.utils.Svg.CIRCLE,
|
||||
{
|
||||
const ripple = dom.createSvgElement(
|
||||
Svg.CIRCLE, {
|
||||
'cx': xy.x,
|
||||
'cy': xy.y,
|
||||
'r': 0,
|
||||
@@ -117,89 +112,88 @@ Blockly.blockAnimations.connectionUiEffect = function(block) {
|
||||
},
|
||||
workspace.getParentSvg());
|
||||
// Start the animation.
|
||||
Blockly.blockAnimations.connectionUiStep_(ripple, new Date, scale);
|
||||
};
|
||||
connectionUiStep(ripple, new Date, scale);
|
||||
}
|
||||
/** @package */
|
||||
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.
|
||||
* @private
|
||||
*/
|
||||
Blockly.blockAnimations.connectionUiStep_ = function(ripple, start, scale) {
|
||||
var ms = new Date - start;
|
||||
var percent = ms / 150;
|
||||
function connectionUiStep(ripple, start, scale) {
|
||||
const ms = new Date - start;
|
||||
const percent = ms / 150;
|
||||
if (percent > 1) {
|
||||
Blockly.utils.dom.removeNode(ripple);
|
||||
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);
|
||||
disconnectPid = setTimeout(connectionUiStep, 10, ripple, start, scale);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Play some UI effects (sound, animation) when disconnecting a block.
|
||||
* @param {!Blockly.BlockSvg} block The block being disconnected.
|
||||
* @package
|
||||
* @param {!BlockSvg} block The block being disconnected.
|
||||
*/
|
||||
Blockly.blockAnimations.disconnectUiEffect = function(block) {
|
||||
function disconnectUiEffect(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;
|
||||
const DISPLACEMENT = 10;
|
||||
// Scale magnitude of skew to height of block.
|
||||
var height = block.getHeightWidth().height;
|
||||
var magnitude = Math.atan(DISPLACEMENT / height) / Math.PI * 180;
|
||||
const height = block.getHeightWidth().height;
|
||||
let magnitude = Math.atan(DISPLACEMENT / height) / Math.PI * 180;
|
||||
if (!block.RTL) {
|
||||
magnitude *= -1;
|
||||
}
|
||||
// Start the animation.
|
||||
Blockly.blockAnimations.disconnectUiStep_(
|
||||
block.getSvgRoot(), magnitude, new Date);
|
||||
};
|
||||
disconnectUiStep(block.getSvgRoot(), magnitude, new Date);
|
||||
}
|
||||
/** @package */
|
||||
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.
|
||||
* @private
|
||||
*/
|
||||
Blockly.blockAnimations.disconnectUiStep_ = function(group, magnitude, start) {
|
||||
var DURATION = 200; // Milliseconds.
|
||||
var WIGGLES = 3; // Half oscillations.
|
||||
function disconnectUiStep(group, magnitude, start) {
|
||||
const DURATION = 200; // Milliseconds.
|
||||
const WIGGLES = 3; // Half oscillations.
|
||||
|
||||
var ms = new Date - start;
|
||||
var percent = ms / DURATION;
|
||||
const ms = new Date - start;
|
||||
const percent = ms / DURATION;
|
||||
|
||||
if (percent > 1) {
|
||||
group.skew_ = '';
|
||||
} else {
|
||||
var skew = Math.round(
|
||||
const 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);
|
||||
disconnectGroup = group;
|
||||
disconnectPid = setTimeout(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_;
|
||||
function disconnectUiStop() {
|
||||
if (disconnectGroup) {
|
||||
clearTimeout(disconnectPid);
|
||||
const group = disconnectGroup;
|
||||
group.skew_ = '';
|
||||
group.setAttribute('transform', group.translate_);
|
||||
Blockly.blockAnimations.disconnectGroup_ = null;
|
||||
disconnectGroup = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
/** @package */
|
||||
exports.disconnectUiStop = disconnectUiStop;
|
||||
|
||||
@@ -8,7 +8,7 @@ goog.addDependency('../../blocks/text.js', ['Blockly.Blocks.texts', 'Blockly.Con
|
||||
goog.addDependency('../../blocks/variables.js', ['Blockly.Blocks.variables', 'Blockly.Constants.Variables'], ['Blockly', 'Blockly.Blocks', 'Blockly.FieldLabel', 'Blockly.FieldVariable']);
|
||||
goog.addDependency('../../blocks/variables_dynamic.js', ['Blockly.Constants.VariablesDynamic'], ['Blockly', 'Blockly.Blocks', 'Blockly.FieldLabel', 'Blockly.FieldVariable']);
|
||||
goog.addDependency('../../core/block.js', ['Blockly.Block'], ['Blockly.ASTNode', 'Blockly.Blocks', 'Blockly.Connection', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Events.BlockCreate', 'Blockly.Events.BlockDelete', 'Blockly.Events.BlockMove', 'Blockly.Extensions', 'Blockly.IASTNodeLocation', 'Blockly.IDeletable', 'Blockly.Input', 'Blockly.Tooltip', 'Blockly.Workspace', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.fieldRegistry', 'Blockly.inputTypes', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.object'], {'lang': 'es5'});
|
||||
goog.addDependency('../../core/block_animations.js', ['Blockly.blockAnimations'], ['Blockly.utils.Svg', 'Blockly.utils.dom']);
|
||||
goog.addDependency('../../core/block_animations.js', ['Blockly.blockAnimations'], ['Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/block_drag_surface.js', ['Blockly.BlockDragSurfaceSvg'], ['Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/block_dragger.js', ['Blockly.BlockDragger'], ['Blockly.Events', 'Blockly.Events.BlockDrag', 'Blockly.Events.BlockMove', 'Blockly.IBlockDragger', 'Blockly.InsertionMarkerManager', 'Blockly.blockAnimations', 'Blockly.constants', 'Blockly.registry', 'Blockly.utils.Coordinate', 'Blockly.utils.dom']);
|
||||
goog.addDependency('../../core/block_svg.js', ['Blockly.BlockSvg'], ['Blockly.ASTNode', 'Blockly.Block', 'Blockly.ContextMenu', 'Blockly.ContextMenuRegistry', 'Blockly.Events', 'Blockly.Events.BlockMove', 'Blockly.Events.Selected', 'Blockly.IASTNodeLocationSvg', 'Blockly.IBoundedElement', 'Blockly.ICopyable', 'Blockly.IDraggable', 'Blockly.Msg', 'Blockly.RenderedConnection', 'Blockly.TabNavigateCursor', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.Xml', 'Blockly.blockAnimations', 'Blockly.blockRendering.IPathObject', 'Blockly.browserEvents', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.Svg', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.userAgent']);
|
||||
|
||||
Reference in New Issue
Block a user