github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): stop dragging when user clicks mmb once

Browse Source 
This has been an issue for a long time. I suspect it wasn't noticed
until now because it's finicky to trigger - you have to click and
release very quickly, without moving the mouse at all.
This commit is contained in:
psychedelicious
2025-09-04 11:11:12 +10:00
parent 0ee360ba6c
commit 8bcb6648f1
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
View File

@@ -125,9 +125,14 @@ export class CanvasStageModule extends CanvasModuleBase {
this.konva.stage.on('dragmove', this.onStageDragMove);
this.konva.stage.on('dragend', this.onStageDragEnd);
// Start dragging the stage when the middle mouse button is clicked. We do not need to listen for 'pointerdown' to
// do cleanup - that is done in onStageDragEnd.
// Start dragging the stage when the middle mouse button is clicked and stop dragging when it's released.
// We _also_ stop dragging on dragend - but in case the user doesn't actually start a drag (just clicks MMB once),
// we still need to stop dragging.
//
// Why start dragging on pointerdown instead of dragstart? Because it allows us to immediately show the cursor as
// grabbing, instead of waiting for the user to actually move the mouse to start the drag. Minor UX affordance.
this.konva.stage.on('pointerdown', this.onStagePointerDown);
this.konva.stage.on('pointerup', this.onStagePointerUp);
this.subscriptions.add(() => this.konva.stage.off('wheel', this.onStageMouseWheel));
this.subscriptions.add(() => this.konva.stage.off('dragmove', this.onStageDragMove));
@@ -438,6 +443,13 @@ export class CanvasStageModule extends CanvasModuleBase {
}
};
onStagePointerUp = (e: KonvaEventObject<PointerEvent>) => {
// If the middle mouse button is released and we are dragging, stop dragging the stage
if (e.evt.button === 1) {
this.stopDragging();
}
};
/**
* Forcibly starts dragging the stage. This is useful when you want to start dragging the stage programmatically.
*/