From c02f70362916a6b19d0fe199e5950dd064d25abc Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Fri, 31 Jan 2020 13:14:39 -0800 Subject: [PATCH 1/3] Added constants to animation code. --- core/trashcan.js | 67 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 60 insertions(+), 7 deletions(-) diff --git a/core/trashcan.js b/core/trashcan.js index fde748787..f2ee3bf41 100644 --- a/core/trashcan.js +++ b/core/trashcan.js @@ -154,6 +154,37 @@ Blockly.Trashcan.prototype.SPRITE_TOP_ = 32; */ Blockly.Trashcan.prototype.HAS_BLOCKS_LID_ANGLE = 0.1; +/** + * The length of the open/close animation in milliseconds. + * @type {number} + */ +Blockly.Trashcan.ANIMATION_LENGTH = 80; + +/** + * The number of frames in the animation. + * @type {number} + */ +Blockly.Trashcan.ANIMATION_FRAMES = 4; + +/** + * The minimum (resting) opacity of the trashcan and lid. + * @type {number} + */ +Blockly.Trashcan.OPACITY_MIN = 0.4; + +/** + * The maximum (hovered) opacity of the trashcan and lid. + * @type {number} + */ +Blockly.Trashcan.OPACITY_MAX = 0.8; + +/** + * The maximum angle the trashcan lid can opens to. At the end of the open + * animation the lid will be open to this angle. + * @type {number} + */ +Blockly.Trashcan.MAX_LID_ANGLE = 45; + /** * Current open/close state of the lid. * @type {boolean} @@ -389,14 +420,23 @@ Blockly.Trashcan.prototype.setOpen = function(state) { * @private */ Blockly.Trashcan.prototype.animateLid_ = function() { - this.lidOpen_ += this.isOpen ? 0.2 : -0.2; + var frames = Blockly.Trashcan.ANIMATION_FRAMES; + + var delta = 1 / (frames + 1); + this.lidOpen_ += this.isOpen ? delta : -delta; this.lidOpen_ = Math.min(Math.max(this.lidOpen_, this.minOpenness_), 1); - this.setLidAngle_(this.lidOpen_ * 45); - // Linear interpolation between 0.4 and 0.8. - var opacity = 0.4 + this.lidOpen_ * (0.8 - 0.4); + + this.setLidAngle_(this.lidOpen_ * Blockly.Trashcan.MAX_LID_ANGLE); + + var minOpacity = Blockly.Trashcan.OPACITY_MIN; + var maxOpacity = Blockly.Trashcan.OPACITY_MAX; + // Linear interpolation between min and max. + var opacity = minOpacity + this.lidOpen_ * (maxOpacity - minOpacity); this.svgGroup_.style.opacity = opacity; + if (this.lidOpen_ > this.minOpenness_ && this.lidOpen_ < 1) { - this.lidTask_ = setTimeout(this.animateLid_.bind(this), 20); + this.lidTask_ = setTimeout(this.animateLid_.bind(this), + Blockly.Trashcan.ANIMATION_LENGTH / frames); } }; @@ -414,6 +454,20 @@ Blockly.Trashcan.prototype.setLidAngle_ = function(lidAngle) { (this.LID_HEIGHT_ - 2) + ')'); }; +/** + * Sets the minimum openness of the trashcan lid. If the lid is currently + * closed, this will update lid's position. + * @param {number} newMin The new minimum openness of the lid. Should be between + * 0 and 1. + * @private + */ +Blockly.Trashcan.prototype.setMinOpenness_ = function(newMin) { + this.minOpenness_ = newMin; + if (!this.isOpen) { + this.setLidAngle_(newMin * Blockly.Trashcan.MAX_LID_ANGLE); + } +}; + /** * Flip the lid shut. * Called externally after a drag. @@ -479,8 +533,7 @@ Blockly.Trashcan.prototype.onDelete_ = function(event) { this.contents_.pop(); } - this.minOpenness_ = this.HAS_BLOCKS_LID_ANGLE; - this.setLidAngle_(this.minOpenness_ * 45); + this.setMinOpenness_(this.HAS_BLOCKS_LID_ANGLE); } }; From b0cd8032119c817f955d56e7c415fb9000436751 Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Fri, 31 Jan 2020 13:15:03 -0800 Subject: [PATCH 2/3] Added empty trashcan function. --- core/trashcan.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/core/trashcan.js b/core/trashcan.js index f2ee3bf41..1534b92e7 100644 --- a/core/trashcan.js +++ b/core/trashcan.js @@ -347,6 +347,29 @@ Blockly.Trashcan.prototype.dispose = function() { clearTimeout(this.lidTask_); }; +/** + * Returns true if the trashcan contents-flyout is currently open. + * @return {boolean} True if the trashcan contents-flyout is currently open. + */ +Blockly.Trashcan.prototype.contentsIsOpen = function() { + return this.flyout.isVisible(); +}; + +/** + * Empties the trashcan's contents. If the contents-flyout is currently open + * it will be closed. + */ +Blockly.Trashcan.prototype.emptyContents = function() { + if (!this.contents_.length) { + return; + } + this.contents_.length = 0; + this.setMinOpenness_(0); + if (this.contentsIsOpen()) { + this.flyout.hide(); + } +}; + /** * Position the trashcan. * It is positioned in the opposite corner to the corner the From 4416be2a30ff12f104499d03ee087921796a1620 Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Fri, 7 Feb 2020 13:34:09 -0800 Subject: [PATCH 3/3] Added const tags and fixed visibility. --- core/trashcan.js | 59 ++++++++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 27 deletions(-) diff --git a/core/trashcan.js b/core/trashcan.js index 1534b92e7..bc718fce6 100644 --- a/core/trashcan.js +++ b/core/trashcan.js @@ -92,56 +92,56 @@ Blockly.Trashcan = function(workspace) { /** * Width of both the trash can and lid images. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.WIDTH_ = 47; /** * Height of the trashcan image (minus lid). - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.BODY_HEIGHT_ = 44; /** * Height of the lid image. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.LID_HEIGHT_ = 16; /** * Distance between trashcan and bottom edge of workspace. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.MARGIN_BOTTOM_ = 20; /** * Distance between trashcan and right edge of workspace. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.MARGIN_SIDE_ = 20; /** * Extent of hotspot on all sides beyond the size of the image. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.MARGIN_HOTSPOT_ = 10; /** * Location of trashcan in sprite image. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.SPRITE_LEFT_ = 0; /** * Location of trashcan in sprite image. - * @type {number} + * @const {number} * @private */ Blockly.Trashcan.prototype.SPRITE_TOP_ = 32; @@ -149,41 +149,46 @@ Blockly.Trashcan.prototype.SPRITE_TOP_ = 32; /** * The openness of the lid when the trashcan contains blocks. * (0.0 = closed, 1.0 = open) - * @type {number} + * @const {number} * @private */ -Blockly.Trashcan.prototype.HAS_BLOCKS_LID_ANGLE = 0.1; +Blockly.Trashcan.prototype.HAS_BLOCKS_LID_ANGLE_ = 0.1; /** * The length of the open/close animation in milliseconds. - * @type {number} + * @const {number} + * @private */ -Blockly.Trashcan.ANIMATION_LENGTH = 80; +Blockly.Trashcan.ANIMATION_LENGTH_ = 80; /** * The number of frames in the animation. - * @type {number} + * @const {number} + * @private */ -Blockly.Trashcan.ANIMATION_FRAMES = 4; +Blockly.Trashcan.ANIMATION_FRAMES_ = 4; /** * The minimum (resting) opacity of the trashcan and lid. - * @type {number} + * @const {number} + * @private */ -Blockly.Trashcan.OPACITY_MIN = 0.4; +Blockly.Trashcan.OPACITY_MIN_ = 0.4; /** * The maximum (hovered) opacity of the trashcan and lid. - * @type {number} + * @const {number} + * @private */ -Blockly.Trashcan.OPACITY_MAX = 0.8; +Blockly.Trashcan.OPACITY_MAX_ = 0.8; /** * The maximum angle the trashcan lid can opens to. At the end of the open * animation the lid will be open to this angle. - * @type {number} + * @const {number} + * @private */ -Blockly.Trashcan.MAX_LID_ANGLE = 45; +Blockly.Trashcan.MAX_LID_ANGLE_ = 45; /** * Current open/close state of the lid. @@ -443,23 +448,23 @@ Blockly.Trashcan.prototype.setOpen = function(state) { * @private */ Blockly.Trashcan.prototype.animateLid_ = function() { - var frames = Blockly.Trashcan.ANIMATION_FRAMES; + var frames = Blockly.Trashcan.ANIMATION_FRAMES_; var delta = 1 / (frames + 1); this.lidOpen_ += this.isOpen ? delta : -delta; this.lidOpen_ = Math.min(Math.max(this.lidOpen_, this.minOpenness_), 1); - this.setLidAngle_(this.lidOpen_ * Blockly.Trashcan.MAX_LID_ANGLE); + this.setLidAngle_(this.lidOpen_ * Blockly.Trashcan.MAX_LID_ANGLE_); - var minOpacity = Blockly.Trashcan.OPACITY_MIN; - var maxOpacity = Blockly.Trashcan.OPACITY_MAX; + var minOpacity = Blockly.Trashcan.OPACITY_MIN_; + var maxOpacity = Blockly.Trashcan.OPACITY_MAX_; // Linear interpolation between min and max. var opacity = minOpacity + this.lidOpen_ * (maxOpacity - minOpacity); this.svgGroup_.style.opacity = opacity; if (this.lidOpen_ > this.minOpenness_ && this.lidOpen_ < 1) { this.lidTask_ = setTimeout(this.animateLid_.bind(this), - Blockly.Trashcan.ANIMATION_LENGTH / frames); + Blockly.Trashcan.ANIMATION_LENGTH_ / frames); } }; @@ -487,7 +492,7 @@ Blockly.Trashcan.prototype.setLidAngle_ = function(lidAngle) { Blockly.Trashcan.prototype.setMinOpenness_ = function(newMin) { this.minOpenness_ = newMin; if (!this.isOpen) { - this.setLidAngle_(newMin * Blockly.Trashcan.MAX_LID_ANGLE); + this.setLidAngle_(newMin * Blockly.Trashcan.MAX_LID_ANGLE_); } }; @@ -556,7 +561,7 @@ Blockly.Trashcan.prototype.onDelete_ = function(event) { this.contents_.pop(); } - this.setMinOpenness_(this.HAS_BLOCKS_LID_ANGLE); + this.setMinOpenness_(this.HAS_BLOCKS_LID_ANGLE_); } };