Moves toolbox cursor styling out of block_dragger (#4896)

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);
 };
 

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);
 };
 

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;
+};

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.