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

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.

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts

@@ -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.
    */