Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moves toolbox cursor styling out of block_dragger #4896

Merged
merged 5 commits into from
Jun 12, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions core/block_dragger.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

/**
Expand Down Expand Up @@ -302,8 +300,6 @@ Blockly.BlockDragger.prototype.endDrag = function(e, currentDragDeltaXY) {
}
this.workspace_.setResizesEnabled(true);

this.updateToolboxStyle_(true);

Blockly.Events.setGroup(false);
};

Expand Down
13 changes: 0 additions & 13 deletions core/bubble_dragger.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

/**
Expand Down Expand Up @@ -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);
};

Expand Down
16 changes: 13 additions & 3 deletions core/delete_area.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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;
};
71 changes: 69 additions & 2 deletions core/toolbox/toolbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -558,13 +558,80 @@ 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.
*/
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
moniika marked this conversation as resolved.
Show resolved Hide resolved
*/
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.
*/
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.
Expand Down