diff --git a/src/actions/mover.ts b/src/actions/mover.ts index 4d2c40e9..d2f67969 100644 --- a/src/actions/mover.ts +++ b/src/actions/mover.ts @@ -144,6 +144,8 @@ export class Mover { this.unpatchWorkspace(workspace); this.unpatchDragStrategy(info.block); this.moves.delete(workspace); + // Delay scroll until after block has finished moving. + setTimeout(() => this.scrollCurrentBlockIntoView(workspace), 0); return true; } @@ -175,6 +177,8 @@ export class Mover { this.unpatchWorkspace(workspace); this.unpatchDragStrategy(info.block); this.moves.delete(workspace); + // Delay scroll until after block has finished moving. + setTimeout(() => this.scrollCurrentBlockIntoView(workspace), 0); return true; } @@ -197,6 +201,7 @@ export class Mover { ); info.updateTotalDelta(); + this.scrollCurrentBlockIntoView(workspace); return true; } @@ -218,6 +223,7 @@ export class Mover { info.totalDelta.y += y * UNCONSTRAINED_MOVE_DISTANCE * workspace.scale; info.dragger.onDrag(info.fakePointerEvent('pointermove'), info.totalDelta); + this.scrollCurrentBlockIntoView(workspace); return true; } @@ -307,6 +313,23 @@ export class Mover { this.oldDragStrategy = null; } } + + /** + * Scrolls the current block into view if one exists. + * + * @param workspace The workspace to get current block from. + * @param padding Amount of spacing to put between the bounds and the edge of + * the workspace's viewport. + */ + private scrollCurrentBlockIntoView(workspace: WorkspaceSvg, padding = 10) { + const blockToView = this.getCurrentBlock(workspace); + if (blockToView) { + workspace.scrollBoundsIntoView( + blockToView.getBoundingRectangleWithoutChildren(), + padding, + ); + } + } } /**