From 66c959b4a3e6ca3ad8884303f9a9a4aed85af801 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 15 Jul 2021 14:57:23 -0700 Subject: [PATCH 1/4] Migrate core/block_animations.js to ES6 const/let --- core/block_animations.js | 48 ++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/core/block_animations.js b/core/block_animations.js index 82e2516b1..54b776d98 100644 --- a/core/block_animations.js +++ b/core/block_animations.js @@ -38,13 +38,13 @@ Blockly.blockAnimations.disconnectGroup_ = null; * @package */ Blockly.blockAnimations.disposeUiEffect = function(block) { - var workspace = block.workspace; - var svgGroup = block.getSvgRoot(); + 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 + ')'); @@ -67,15 +67,15 @@ Blockly.blockAnimations.disposeUiEffect = function(block) { */ Blockly.blockAnimations.disposeUiStep_ = function(clone, rtl, start, workspaceScale) { - var ms = new Date - start; - var percent = ms / 150; + const ms = new Date - start; + const percent = ms / 150; if (percent > 1) { Blockly.utils.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; + const y = clone.translateY_ + clone.bBox_.height * workspaceScale * percent; + const scale = (1 - percent) * workspaceScale; clone.setAttribute('transform', 'translate(' + x + ',' + y + ')' + ' scale(' + scale + ')'); setTimeout(Blockly.blockAnimations.disposeUiStep_, 10, clone, rtl, start, @@ -89,14 +89,14 @@ Blockly.blockAnimations.disposeUiStep_ = function(clone, rtl, start, * @package */ Blockly.blockAnimations.connectionUiEffect = function(block) { - var workspace = block.workspace; - var scale = workspace.scale; + 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,7 +105,7 @@ Blockly.blockAnimations.connectionUiEffect = function(block) { xy.x += (block.RTL ? -23 : 23) * scale; xy.y += 3 * scale; } - var ripple = Blockly.utils.dom.createSvgElement( + const ripple = Blockly.utils.dom.createSvgElement( Blockly.utils.Svg.CIRCLE, { 'cx': xy.x, @@ -128,8 +128,8 @@ Blockly.blockAnimations.connectionUiEffect = function(block) { * @private */ Blockly.blockAnimations.connectionUiStep_ = function(ripple, start, scale) { - var ms = new Date - start; - var percent = ms / 150; + const ms = new Date - start; + const percent = ms / 150; if (percent > 1) { Blockly.utils.dom.removeNode(ripple); } else { @@ -151,10 +151,10 @@ Blockly.blockAnimations.disconnectUiEffect = function(block) { 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; } @@ -170,16 +170,16 @@ Blockly.blockAnimations.disconnectUiEffect = function(block) { * @private */ Blockly.blockAnimations.disconnectUiStep_ = function(group, magnitude, start) { - var DURATION = 200; // Milliseconds. - var WIGGLES = 3; // Half oscillations. + 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; @@ -197,7 +197,7 @@ Blockly.blockAnimations.disconnectUiStep_ = function(group, magnitude, start) { Blockly.blockAnimations.disconnectUiStop = function() { if (Blockly.blockAnimations.disconnectGroup_) { clearTimeout(Blockly.blockAnimations.disconnectPid_); - var group = Blockly.blockAnimations.disconnectGroup_; + const group = Blockly.blockAnimations.disconnectGroup_; group.skew_ = ''; group.setAttribute('transform', group.translate_); Blockly.blockAnimations.disconnectGroup_ = null; From ab0b03c4725c895e70cf6ecd35616562f5070985 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 15 Jul 2021 15:29:35 -0700 Subject: [PATCH 2/4] Migrate core/block_animations.js to goog.module --- core/block_animations.js | 79 ++++++++++++++++++++-------------------- tests/deps.js | 2 +- 2 files changed, 41 insertions(+), 40 deletions(-) diff --git a/core/block_animations.js b/core/block_animations.js index 54b776d98..e6a7cf4f2 100644 --- a/core/block_animations.js +++ b/core/block_animations.js @@ -10,7 +10,8 @@ */ 'use strict'; -goog.provide('Blockly.blockAnimations'); +goog.module('Blockly.blockAnimations'); +goog.module.declareLegacyNamespace(); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.Svg'); @@ -21,23 +22,20 @@ goog.requireType('Blockly.BlockSvg'); /** * 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 */ -Blockly.blockAnimations.disposeUiEffect = function(block) { +function disposeUiEffect(block) { const workspace = block.workspace; const svgGroup = block.getSvgRoot(); workspace.getAudioManager().play('delete'); @@ -51,9 +49,11 @@ Blockly.blockAnimations.disposeUiEffect = function(block) { workspace.getParentSvg().appendChild(clone); clone.bBox_ = clone.getBBox(); // Start the animation. - Blockly.blockAnimations.disposeUiStep_(clone, workspace.RTL, new Date, + disposeUiStep(clone, workspace.RTL, new Date, workspace.scale); -}; +} +/** @package */ +exports.disposeUiEffect = disposeUiEffect; /** * Animate a cloned block and eventually dispose of it. @@ -63,9 +63,8 @@ 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, +function disposeUiStep(clone, rtl, start, workspaceScale) { const ms = new Date - start; const percent = ms / 150; @@ -78,17 +77,16 @@ Blockly.blockAnimations.disposeUiStep_ = function(clone, rtl, start, const scale = (1 - percent) * workspaceScale; clone.setAttribute('transform', 'translate(' + x + ',' + y + ')' + ' scale(' + scale + ')'); - setTimeout(Blockly.blockAnimations.disposeUiStep_, 10, clone, rtl, start, + 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 */ -Blockly.blockAnimations.connectionUiEffect = function(block) { +function connectionUiEffect(block) { const workspace = block.workspace; const scale = workspace.scale; workspace.getAudioManager().play('click'); @@ -117,17 +115,18 @@ 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) { +function connectionUiStep(ripple, start, scale) { const ms = new Date - start; const percent = ms / 150; if (percent > 1) { @@ -135,17 +134,16 @@ Blockly.blockAnimations.connectionUiStep_ = function(ripple, start, scale) { } 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 */ -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. @@ -159,17 +157,19 @@ Blockly.blockAnimations.disconnectUiEffect = function(block) { magnitude *= -1; } // Start the animation. - Blockly.blockAnimations.disconnectUiStep_( + 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) { +function disconnectUiStep(group, magnitude, start) { const DURATION = 200; // Milliseconds. const WIGGLES = 3; // Half oscillations. @@ -182,24 +182,25 @@ Blockly.blockAnimations.disconnectUiStep_ = function(group, magnitude, start) { 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, + 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_); - const 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; diff --git a/tests/deps.js b/tests/deps.js index e83f61c67..f1a4cd48c 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -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']); 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']); From 5f025f4d03c64fc8af4ea339fde9a7345a8168bf Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 15 Jul 2021 15:32:40 -0700 Subject: [PATCH 3/4] Migrate core/block_animations.js to named requires --- core/block_animations.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/core/block_animations.js b/core/block_animations.js index e6a7cf4f2..c973bd097 100644 --- a/core/block_animations.js +++ b/core/block_animations.js @@ -13,10 +13,10 @@ goog.module('Blockly.blockAnimations'); goog.module.declareLegacyNamespace(); -goog.require('Blockly.utils.dom'); -goog.require('Blockly.utils.Svg'); +const dom = goog.require('Blockly.utils.dom'); +const Svg = goog.require('Blockly.utils.Svg'); -goog.requireType('Blockly.BlockSvg'); +const BlockSvg = goog.requireType('Blockly.BlockSvg'); /** @@ -33,7 +33,7 @@ let disconnectGroup = null; /** * Play some UI effects (sound, animation) when disposing of a block. - * @param {!Blockly.BlockSvg} block The block being disposed of. + * @param {!BlockSvg} block The block being disposed of. */ function disposeUiEffect(block) { const workspace = block.workspace; @@ -69,7 +69,7 @@ function disposeUiStep(clone, rtl, start, const ms = new Date - start; const percent = ms / 150; if (percent > 1) { - Blockly.utils.dom.removeNode(clone); + dom.removeNode(clone); } else { const x = clone.translateX_ + (rtl ? -1 : 1) * clone.bBox_.width * workspaceScale / 2 * percent; @@ -84,7 +84,7 @@ function disposeUiStep(clone, rtl, start, /** * Play some UI effects (sound, ripple) after a connection has been established. - * @param {!Blockly.BlockSvg} block The block being connected. + * @param {!BlockSvg} block The block being connected. */ function connectionUiEffect(block) { const workspace = block.workspace; @@ -103,8 +103,8 @@ function connectionUiEffect(block) { xy.x += (block.RTL ? -23 : 23) * scale; xy.y += 3 * scale; } - const ripple = Blockly.utils.dom.createSvgElement( - Blockly.utils.Svg.CIRCLE, + const ripple = dom.createSvgElement( + Svg.CIRCLE, { 'cx': xy.x, 'cy': xy.y, @@ -130,7 +130,7 @@ 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; @@ -141,7 +141,7 @@ function connectionUiStep(ripple, start, scale) { /** * Play some UI effects (sound, animation) when disconnecting a block. - * @param {!Blockly.BlockSvg} block The block being disconnected. + * @param {!BlockSvg} block The block being disconnected. */ function disconnectUiEffect(block) { block.workspace.getAudioManager().play('disconnect'); From f93ed6086978fef5619970d74889c6ed8b20f844 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 15 Jul 2021 15:33:59 -0700 Subject: [PATCH 4/4] clang-format core/block_animations.js --- core/block_animations.js | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/core/block_animations.js b/core/block_animations.js index c973bd097..86b4b44b5 100644 --- a/core/block_animations.js +++ b/core/block_animations.js @@ -13,11 +13,10 @@ goog.module('Blockly.blockAnimations'); goog.module.declareLegacyNamespace(); +const BlockSvg = goog.requireType('Blockly.BlockSvg'); const dom = goog.require('Blockly.utils.dom'); const Svg = goog.require('Blockly.utils.Svg'); -const BlockSvg = goog.requireType('Blockly.BlockSvg'); - /** * PID of disconnect UI animation. There can only be one at a time. @@ -49,8 +48,7 @@ function disposeUiEffect(block) { workspace.getParentSvg().appendChild(clone); clone.bBox_ = clone.getBBox(); // Start the animation. - disposeUiStep(clone, workspace.RTL, new Date, - workspace.scale); + disposeUiStep(clone, workspace.RTL, new Date, workspace.scale); } /** @package */ exports.disposeUiEffect = disposeUiEffect; @@ -64,8 +62,7 @@ exports.disposeUiEffect = disposeUiEffect; * @param {!Date} start Date of animation's start. * @param {number} workspaceScale Scale of workspace. */ -function disposeUiStep(clone, rtl, start, - workspaceScale) { +function disposeUiStep(clone, rtl, start, workspaceScale) { const ms = new Date - start; const percent = ms / 150; if (percent > 1) { @@ -75,10 +72,11 @@ function disposeUiStep(clone, rtl, start, (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); + clone.setAttribute( + 'transform', + 'translate(' + x + ',' + y + ')' + + ' scale(' + scale + ')'); + setTimeout(disposeUiStep, 10, clone, rtl, start, workspaceScale); } } @@ -104,8 +102,7 @@ function connectionUiEffect(block) { xy.y += 3 * scale; } const ripple = dom.createSvgElement( - Svg.CIRCLE, - { + Svg.CIRCLE, { 'cx': xy.x, 'cy': xy.y, 'r': 0, @@ -134,8 +131,7 @@ function connectionUiStep(ripple, start, scale) { } else { ripple.setAttribute('r', percent * 25 * scale); ripple.style.opacity = 1 - percent; - disconnectPid = setTimeout( - connectionUiStep, 10, ripple, start, scale); + disconnectPid = setTimeout(connectionUiStep, 10, ripple, start, scale); } } @@ -157,8 +153,7 @@ function disconnectUiEffect(block) { magnitude *= -1; } // Start the animation. - disconnectUiStep( - block.getSvgRoot(), magnitude, new Date); + disconnectUiStep(block.getSvgRoot(), magnitude, new Date); } /** @package */ exports.disconnectUiEffect = disconnectUiEffect; @@ -171,7 +166,7 @@ exports.disconnectUiEffect = disconnectUiEffect; */ function disconnectUiStep(group, magnitude, start) { const DURATION = 200; // Milliseconds. - const WIGGLES = 3; // Half oscillations. + const WIGGLES = 3; // Half oscillations. const ms = new Date - start; const percent = ms / DURATION; @@ -183,9 +178,7 @@ function disconnectUiStep(group, magnitude, start) { Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude); group.skew_ = 'skewX(' + skew + ')'; disconnectGroup = group; - disconnectPid = - setTimeout(disconnectUiStep, 10, group, - magnitude, start); + disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start); } group.setAttribute('transform', group.translate_ + group.skew_); }