Skip to content

Commit

Permalink
Updates BlockDragger to make it easier to override (#4842)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alschmiedt
alschmiedt committed May 21, 2021
1 parent 50842fa commit fd417a0
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 75 deletions.
182 changes: 115 additions & 67 deletions core/block_dragger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,46 +42,46 @@ Blockly.BlockDragger = function(block, workspace) {
/**
* The top block in the stack that is being dragged.
* @type {!Blockly.BlockSvg}
* @private
* @protected
*/
this.draggingBlock_ = block;

/**
* The workspace on which the block is being dragged.
* @type {!Blockly.WorkspaceSvg}
* @private
* @protected
*/
this.workspace_ = workspace;

/**
* Object that keeps track of connections on dragged blocks.
* @type {!Blockly.InsertionMarkerManager}
* @private
* @protected
*/
this.draggedConnectionManager_ = new Blockly.InsertionMarkerManager(
this.draggingBlock_);
this.draggedConnectionManager_ =
new Blockly.InsertionMarkerManager(this.draggingBlock_);

/**
* Which delete area the mouse pointer is over, if any.
* One of {@link Blockly.DELETE_AREA_TRASH},
* {@link Blockly.DELETE_AREA_TOOLBOX}, or {@link Blockly.DELETE_AREA_NONE}.
* @type {?number}
* @private
* @protected
*/
this.deleteArea_ = null;

/**
* Whether the block would be deleted if dropped immediately.
* @type {boolean}
* @private
* @protected
*/
this.wouldDeleteBlock_ = false;

/**
* The location of the top left corner of the dragging block at the beginning
* of the drag in workspace coordinates.
* @type {!Blockly.utils.Coordinate}
* @private
* @protected
*/
this.startXY_ = this.draggingBlock_.getRelativeToSurfaceXY();

Expand All @@ -90,7 +90,7 @@ Blockly.BlockDragger = function(block, workspace) {
* on this block and its descendants. Moving an icon moves the bubble that
* extends from it if that bubble is open.
* @type {Array.<!Object>}
* @private
* @protected
*/
this.dragIconData_ = Blockly.BlockDragger.initIconData_(block);
};
Expand Down Expand Up @@ -123,7 +123,8 @@ Blockly.BlockDragger.initIconData_ = function(block) {
var icons = descendant.getIcons();
for (var j = 0; j < icons.length; j++) {
var data = {
// Blockly.utils.Coordinate with x and y properties (workspace coordinates).
// Blockly.utils.Coordinate with x and y properties (workspace
// coordinates).
location: icons[j].getIconLocation(),
// Blockly.Icon
icon: icons[j]
Expand All @@ -140,10 +141,10 @@ Blockly.BlockDragger.initIconData_ = function(block) {
* moved from the position at mouse down, in pixel units.
* @param {boolean} healStack Whether or not to heal the stack after
* disconnecting.
* @package
* @public
*/
Blockly.BlockDragger.prototype.startBlockDrag = function(currentDragDeltaXY,
healStack) {
Blockly.BlockDragger.prototype.startDrag = function(
currentDragDeltaXY, healStack) {
if (!Blockly.Events.getGroup()) {
Blockly.Events.setGroup(true);
}
Expand All @@ -163,34 +164,53 @@ Blockly.BlockDragger.prototype.startBlockDrag = function(currentDragDeltaXY,
this.workspace_.setResizesEnabled(false);
Blockly.blockAnimations.disconnectUiStop();

if (this.draggingBlock_.getParent() ||
(healStack && this.draggingBlock_.nextConnection &&
this.draggingBlock_.nextConnection.targetBlock())) {
this.draggingBlock_.unplug(healStack);
var delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
var newLoc = Blockly.utils.Coordinate.sum(this.startXY_, delta);

this.draggingBlock_.translate(newLoc.x, newLoc.y);
Blockly.blockAnimations.disconnectUiEffect(this.draggingBlock_);
this.draggedConnectionManager_.updateAvailableConnections();
if (this.shouldDisconnect_(healStack)) {
this.disconnectBlock_(healStack, currentDragDeltaXY);
}
this.draggingBlock_.setDragging(true);
// For future consideration: we may be able to put moveToDragSurface inside
// the block dragger, which would also let the block not track the block drag
// surface.
this.draggingBlock_.moveToDragSurface();

var toolbox = this.workspace_.getToolbox();
if (toolbox && typeof toolbox.addStyle == 'function') {
var style = this.draggingBlock_.isDeletable() ? 'blocklyToolboxDelete' :
'blocklyToolboxGrab';
toolbox.addStyle(style);
}
this.updateToolboxStyle_(false);
};

/**
* Whether or not we should disconnect the block when a drag is started.
* @param {boolean} healStack Whether or not to heal the stack after
* disconnecting.
* @returns {boolean} True to disconnect the block, false otherwise.
* @protected
*/
Blockly.BlockDragger.prototype.shouldDisconnect_ = function(healStack) {
return !!(this.draggingBlock_.getParent() ||
(healStack && this.draggingBlock_.nextConnection &&
this.draggingBlock_.nextConnection.targetBlock()));
};

/**
* Disconnects the block and moves it to a new location.
* @param {boolean} healStack Whether or not to heal the stack after
* disconnecting.
* @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
* moved from the position at mouse down, in pixel units.
* @protected
*/
Blockly.BlockDragger.prototype.disconnectBlock_ = function(
healStack, currentDragDeltaXY) {
this.draggingBlock_.unplug(healStack);
var delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
var newLoc = Blockly.utils.Coordinate.sum(this.startXY_, delta);

this.draggingBlock_.translate(newLoc.x, newLoc.y);
Blockly.blockAnimations.disconnectUiEffect(this.draggingBlock_);
this.draggedConnectionManager_.updateAvailableConnections();
};

/**
* Fire a UI event at the start of a block drag.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.fireDragStartEvent_ = function() {
var event = new (Blockly.Events.get(Blockly.Events.BLOCK_DRAG))(
Expand All @@ -204,9 +224,9 @@ Blockly.BlockDragger.prototype.fireDragStartEvent_ = function() {
* @param {!Event} e The most recent move event.
* @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
* moved from the position at the start of the drag, in pixel units.
* @package
* @public
*/
Blockly.BlockDragger.prototype.dragBlock = function(e, currentDragDeltaXY) {
Blockly.BlockDragger.prototype.drag = function(e, currentDragDeltaXY) {
var delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
var newLoc = Blockly.utils.Coordinate.sum(this.startXY_, delta);

Expand All @@ -224,11 +244,11 @@ Blockly.BlockDragger.prototype.dragBlock = function(e, currentDragDeltaXY) {
* @param {!Event} e The mouseup/touchend event.
* @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
* moved from the position at the start of the drag, in pixel units.
* @package
* @public
*/
Blockly.BlockDragger.prototype.endBlockDrag = function(e, currentDragDeltaXY) {
Blockly.BlockDragger.prototype.endDrag = function(e, currentDragDeltaXY) {
// Make sure internal state is fresh.
this.dragBlock(e, currentDragDeltaXY);
this.drag(e, currentDragDeltaXY);
this.dragIconData_ = [];
this.fireDragEndEvent_();

Expand All @@ -242,46 +262,73 @@ Blockly.BlockDragger.prototype.endBlockDrag = function(e, currentDragDeltaXY) {

var deleted = this.maybeDeleteBlock_();
if (!deleted) {
// These are expensive and don't need to be done if we're deleting.
this.draggingBlock_.moveConnections(delta.x, delta.y);
this.draggingBlock_.setDragging(false);
this.fireMoveEvent_();
if (this.draggedConnectionManager_.wouldConnectBlock()) {
// Applying connections also rerenders the relevant blocks.
this.draggedConnectionManager_.applyConnections();
} else {
this.draggingBlock_.render();
}
this.draggingBlock_.scheduleSnapAndBump();
// Moving the block is expensive, so only do it if the block is not deleted.
this.updateBlockAfterMove_(delta);
}
this.workspace_.setResizesEnabled(true);

var toolbox = this.workspace_.getToolbox();
if (toolbox && typeof toolbox.removeStyle == 'function') {
var style = this.draggingBlock_.isDeletable() ? 'blocklyToolboxDelete' :
'blocklyToolboxGrab';
toolbox.removeStyle(style);
this.updateToolboxStyle_(true);
};

/**
* Updates the necessary information to place a block at a certain location.
* @param {!Blockly.utils.Coordinate} delta The change in location from where
* the block started the drag to where it ended the drag.
* @protected
*/
Blockly.BlockDragger.prototype.updateBlockAfterMove_ = function(delta) {
this.draggingBlock_.moveConnections(delta.x, delta.y);
this.draggingBlock_.setDragging(false);
this.fireMoveEvent_();
if (this.draggedConnectionManager_.wouldConnectBlock()) {
// Applying connections also rerenders the relevant blocks.
this.draggedConnectionManager_.applyConnections();
} else {
this.draggingBlock_.render();
}
Blockly.Events.setGroup(false);
this.draggingBlock_.scheduleSnapAndBump();
};

/**
* Fire a UI event at the end of a block drag.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.fireDragEndEvent_ = function() {
var event = new (Blockly.Events.get(Blockly.Events.BLOCK_DRAG))(
this.draggingBlock_, false, this.draggingBlock_.getDescendants(false));
Blockly.Events.fire(event);
};

/**
* Adds or removes the style of the cursor for the toolbox.
* This is what changes the cursor to display an x when a deletable block is
* held over the toolbox.
* @param {boolean} isEnd True if we are at the end of a drag, false otherwise.
* @protected
*/
Blockly.BlockDragger.prototype.updateToolboxStyle_ = function(isEnd) {
var toolbox = this.workspace_.getToolbox();

if (toolbox) {
var style = this.draggingBlock_.isDeletable() ? 'blocklyToolboxDelete' :
'blocklyToolboxGrab';

if (isEnd && typeof toolbox.removeStyle == 'function') {
toolbox.removeStyle(style);
} else if (!isEnd && typeof toolbox.addStyle == 'function') {
toolbox.addStyle(style);
}
}
};


/**
* Fire a move event at the end of a block drag.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.fireMoveEvent_ = function() {
var event = new (Blockly.Events.get(Blockly.Events.BLOCK_MOVE))(
this.draggingBlock_);
var event =
new (Blockly.Events.get(Blockly.Events.BLOCK_MOVE))(this.draggingBlock_);
event.oldCoordinate = this.startXY_;
event.recordNew();
Blockly.Events.fire(event);
Expand All @@ -291,7 +338,7 @@ Blockly.BlockDragger.prototype.fireMoveEvent_ = function() {
* Shut the trash can and, if necessary, delete the dragging block.
* Should be called at the end of a block drag.
* @return {boolean} Whether the block was deleted.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.maybeDeleteBlock_ = function() {
var trashcan = this.workspace_.trashcan;
Expand All @@ -314,7 +361,7 @@ Blockly.BlockDragger.prototype.maybeDeleteBlock_ = function() {
/**
* Update the cursor (and possibly the trash can lid) to reflect whether the
* dragging block would be deleted if released immediately.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.updateCursorDuringBlockDrag_ = function() {
this.wouldDeleteBlock_ = this.draggedConnectionManager_.wouldDeleteBlock();
Expand All @@ -337,11 +384,11 @@ Blockly.BlockDragger.prototype.updateCursorDuringBlockDrag_ = function() {
* correction for mutator workspaces.
* This function does not consider differing origins. It simply scales the
* input's x and y values.
* @param {!Blockly.utils.Coordinate} pixelCoord A coordinate with x and y values
* in CSS pixel units.
* @return {!Blockly.utils.Coordinate} The input coordinate divided by the workspace
* scale.
* @private
* @param {!Blockly.utils.Coordinate} pixelCoord A coordinate with x and y
* values in CSS pixel units.
* @return {!Blockly.utils.Coordinate} The input coordinate divided by the
* workspace scale.
* @protected
*/
Blockly.BlockDragger.prototype.pixelsToWorkspaceUnits_ = function(pixelCoord) {
var result = new Blockly.utils.Coordinate(
Expand All @@ -362,7 +409,7 @@ Blockly.BlockDragger.prototype.pixelsToWorkspaceUnits_ = function(pixelCoord) {
* Move all of the icons connected to this drag.
* @param {!Blockly.utils.Coordinate} dxy How far to move the icons from their
* original positions, in workspace units.
* @private
* @protected
*/
Blockly.BlockDragger.prototype.dragIcons_ = function(dxy) {
// Moving icons moves their associated bubbles.
Expand All @@ -377,7 +424,7 @@ Blockly.BlockDragger.prototype.dragIcons_ = function(dxy) {
* or 2 insertion markers.
* @return {!Array.<!Blockly.BlockSvg>} A possibly empty list of insertion
* marker blocks.
* @package
* @public
*/
Blockly.BlockDragger.prototype.getInsertionMarkers = function() {
// No insertion markers with the old style of dragged connection managers.
Expand All @@ -388,5 +435,6 @@ Blockly.BlockDragger.prototype.getInsertionMarkers = function() {
return [];
};

Blockly.registry.register(Blockly.registry.Type.BLOCK_DRAGGER,
Blockly.registry.DEFAULT, Blockly.BlockDragger);
Blockly.registry.register(
Blockly.registry.Type.BLOCK_DRAGGER, Blockly.registry.DEFAULT,
Blockly.BlockDragger);
10 changes: 5 additions & 5 deletions core/gesture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,8 +444,8 @@ Blockly.Gesture.prototype.startDraggingBlock_ = function() {
this.blockDragger_ = new BlockDraggerClass(
/** @type {!Blockly.BlockSvg} */ (this.targetBlock_),
/** @type {!Blockly.WorkspaceSvg} */ (this.startWorkspace_));
this.blockDragger_.startBlockDrag(this.currentDragDeltaXY_, this.healStack_);
this.blockDragger_.dragBlock(this.mostRecentEvent_, this.currentDragDeltaXY_);
this.blockDragger_.startDrag(this.currentDragDeltaXY_, this.healStack_);
this.blockDragger_.drag(this.mostRecentEvent_, this.currentDragDeltaXY_);
};

/**
Expand Down Expand Up @@ -537,7 +537,7 @@ Blockly.Gesture.prototype.handleMove = function(e) {
if (this.isDraggingWorkspace_) {
this.workspaceDragger_.drag(this.currentDragDeltaXY_);
} else if (this.isDraggingBlock_) {
this.blockDragger_.dragBlock(
this.blockDragger_.drag(
this.mostRecentEvent_, this.currentDragDeltaXY_);
} else if (this.isDraggingBubble_) {
this.bubbleDragger_.dragBubble(
Expand Down Expand Up @@ -569,7 +569,7 @@ Blockly.Gesture.prototype.handleUp = function(e) {
if (this.isDraggingBubble_) {
this.bubbleDragger_.endBubbleDrag(e, this.currentDragDeltaXY_);
} else if (this.isDraggingBlock_) {
this.blockDragger_.endBlockDrag(e, this.currentDragDeltaXY_);
this.blockDragger_.endDrag(e, this.currentDragDeltaXY_);
} else if (this.isDraggingWorkspace_) {
this.workspaceDragger_.endDrag(this.currentDragDeltaXY_);
} else if (this.isBubbleClick_()) {
Expand Down Expand Up @@ -605,7 +605,7 @@ Blockly.Gesture.prototype.cancel = function() {
this.bubbleDragger_.endBubbleDrag(
this.mostRecentEvent_, this.currentDragDeltaXY_);
} else if (this.isDraggingBlock_) {
this.blockDragger_.endBlockDrag(
this.blockDragger_.endDrag(
this.mostRecentEvent_, this.currentDragDeltaXY_);
} else if (this.isDraggingWorkspace_) {
this.workspaceDragger_.endDrag(this.currentDragDeltaXY_);
Expand Down
Loading

0 comments on commit fd417a0

Please sign in to comment.