From 34fce2c1cb0857e2e787d9a681ff05c3ce6c8955 Mon Sep 17 00:00:00 2001 From: Monica Kozbial <6621618+moniika@users.noreply.github.com> Date: Fri, 11 Jun 2021 18:02:40 -0700 Subject: [PATCH] Moves toolbox cursor styling out of block_dragger (#4896) --- core/block_dragger.js | 4 --- core/bubble_dragger.js | 13 -------- core/delete_area.js | 16 +++++++-- core/toolbox/toolbox.js | 73 +++++++++++++++++++++++++++++++++++++++-- 4 files changed, 84 insertions(+), 22 deletions(-) diff --git a/core/block_dragger.js b/core/block_dragger.js index 046291bfb..a1d4b6f2d 100644 --- a/core/block_dragger.js +++ b/core/block_dragger.js @@ -171,8 +171,6 @@ Blockly.BlockDragger.prototype.startDrag = function( // the block dragger, which would also let the block not track the block drag // surface. this.draggingBlock_.moveToDragSurface(); - - this.updateToolboxStyle_(false); }; /** @@ -301,8 +299,6 @@ Blockly.BlockDragger.prototype.endDrag = function(e, currentDragDeltaXY) { } this.workspace_.setResizesEnabled(true); - this.updateToolboxStyle_(true); - Blockly.Events.setGroup(false); }; diff --git a/core/bubble_dragger.js b/core/bubble_dragger.js index 943f5e362..e014b8738 100644 --- a/core/bubble_dragger.js +++ b/core/bubble_dragger.js @@ -112,13 +112,6 @@ Blockly.BubbleDragger.prototype.startBubbleDrag = function() { } this.draggingBubble_.setDragging && this.draggingBubble_.setDragging(true); - - var toolbox = this.workspace_.getToolbox(); - if (toolbox && typeof toolbox.addStyle == 'function') { - var style = this.draggingBubble_.isDeletable() ? 'blocklyToolboxDelete' : - 'blocklyToolboxGrab'; - toolbox.addStyle(style); - } }; /** @@ -225,12 +218,6 @@ Blockly.BubbleDragger.prototype.endBubbleDrag = function( } this.workspace_.setResizesEnabled(true); - var toolbox = this.workspace_.getToolbox(); - if (toolbox && typeof toolbox.removeStyle == 'function') { - var style = this.draggingBubble_.isDeletable() ? 'blocklyToolboxDelete' : - 'blocklyToolboxGrab'; - toolbox.removeStyle(style); - } Blockly.Events.setGroup(false); }; diff --git a/core/delete_area.js b/core/delete_area.js index 2891f2a8d..384136a05 100644 --- a/core/delete_area.js +++ b/core/delete_area.js @@ -31,8 +31,9 @@ Blockly.DeleteArea = function() { Blockly.DeleteArea.superClass_.constructor.call(this); /** - * Whether the current block or bubble dragged over this delete area would be + * Whether the last block or bubble dragged over this delete area would be * deleted if dropped on this component. + * This property is not updated after the block or bubble is deleted. * @type {boolean} * @protected */ @@ -56,9 +57,18 @@ Blockly.DeleteArea.prototype.wouldDelete = function(element, couldConnect) { if (element instanceof Blockly.BlockSvg) { var block = /** @type {Blockly.BlockSvg} */ (element); var couldDeleteBlock = !block.getParent() && block.isDeletable(); - this.wouldDelete_ = couldDeleteBlock && !couldConnect; + this.updateWouldDelete_(couldDeleteBlock && !couldConnect); } else { - this.wouldDelete_ = element.isDeletable(); + this.updateWouldDelete_(element.isDeletable()); } return this.wouldDelete_; }; + +/** + * Updates the internal wouldDelete_ state. + * @param {boolean} wouldDelete The new value for the wouldDelete state. + * @protected + */ +Blockly.DeleteArea.prototype.updateWouldDelete_ = function(wouldDelete) { + this.wouldDelete_ = wouldDelete; +}; diff --git a/core/toolbox/toolbox.js b/core/toolbox/toolbox.js index 5accb0759..d96bde6d2 100644 --- a/core/toolbox/toolbox.js +++ b/core/toolbox/toolbox.js @@ -558,13 +558,82 @@ Blockly.Toolbox.prototype.wouldDelete = function(element, _couldConnect) { if (element instanceof Blockly.BlockSvg) { var block = /** @type {Blockly.BlockSvg} */ (element); // Prefer dragging to the toolbox over connecting to other blocks. - this.wouldDelete_ = !block.getParent() && block.isDeletable(); + this.updateWouldDelete_(!block.getParent() && block.isDeletable()); } else { - this.wouldDelete_ = element.isDeletable(); + this.updateWouldDelete_(element.isDeletable()); } return this.wouldDelete_; }; +/** + * Handles when a cursor with a block or bubble enters this drag target. + * @param {!Blockly.IDraggable} _dragElement The block or bubble currently being + * dragged. + * @override + */ +Blockly.Toolbox.prototype.onDragEnter = function(_dragElement) { + this.updateCursorDeleteStyle_(true); +}; + +/** + * Handles when a cursor with a block or bubble exits this drag target. + * @param {!Blockly.IDraggable} _dragElement The block or bubble currently being + * dragged. + * @override + */ +Blockly.Toolbox.prototype.onDragExit = function(_dragElement) { + this.updateCursorDeleteStyle_(false); +}; + + +/** + * Handles when a block or bubble is dropped on this component. + * Should not handle delete here. + * @param {!Blockly.IDraggable} _dragElement The block or bubble currently being + * dragged. + * @override + */ +Blockly.Toolbox.prototype.onDrop = function(_dragElement) { + this.updateCursorDeleteStyle_(false); +}; + +/** + * Updates the internal wouldDelete_ state. + * @param {boolean} wouldDelete The new value for the wouldDelete state. + * @protected + * @override + */ +Blockly.Toolbox.prototype.updateWouldDelete_ = function(wouldDelete) { + if (wouldDelete === this.wouldDelete_) { + return; + } + // This logic handles updating the deleteStyle properly if the delete state + // changes while the block is over the Toolbox. This could happen if the + // implementation of wouldDeleteBlock depends on the couldConnect parameter + // or if the isDeletable property of the block currently being dragged + // changes during the drag. + this.updateCursorDeleteStyle_(false); + this.wouldDelete_ = wouldDelete; + this.updateCursorDeleteStyle_(true); +}; + +/** + * Adds or removes the CSS style of the cursor over the toolbox based whether + * the block or bubble over it is expected to be deleted if dropped (using the + * internal this.wouldDelete_ property). + * @param {boolean} addStyle Whether the style should be added or removed. + * @protected + */ +Blockly.Toolbox.prototype.updateCursorDeleteStyle_ = function(addStyle) { + var style = this.wouldDelete_ ? 'blocklyToolboxDelete' : + 'blocklyToolboxGrab'; + if (addStyle) { + this.addStyle(style); + } else { + this.removeStyle(style); + } +}; + /** * Gets the toolbox item with the given ID. * @param {string} id The ID of the toolbox item.