fix(ui): disable color picker while middle-mouse panning canvas

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasColorPickerToolModule.ts

@@ -289,6 +289,14 @@ export class CanvasColorPickerToolModule extends CanvasModuleBase {
     this.manager.stage.setCursor('none');
   };
 
+  getCanPick = () => {
+    if (this.manager.stage.getIsDragging()) {
+      return false;
+    }
+
+    return true;
+  };
+
   /**
    * Renders the color picker tool preview on the canvas.
    */
@@ -298,6 +306,11 @@ export class CanvasColorPickerToolModule extends CanvasModuleBase {
       return;
     }
 
+    if (!this.getCanPick()) {
+      this.setVisibility(false);
+      return;
+    }
+
     const cursorPos = this.parent.$cursorPos.get();
 
     if (!cursorPos) {
@@ -406,11 +419,21 @@ export class CanvasColorPickerToolModule extends CanvasModuleBase {
   };
 
   onStagePointerUp = (_e: KonvaEventObject<PointerEvent>) => {
+    if (!this.getCanPick()) {
+      this.setVisibility(false);
+      return;
+    }
+
     const { a: _, ...color } = this.$colorUnderCursor.get();
     this.manager.stateApi.setColor(color);
   };
 
   onStagePointerMove = (_e: KonvaEventObject<PointerEvent>) => {
+    if (!this.getCanPick()) {
+      this.setVisibility(false);
+      return;
+    }
+
     this.syncColorUnderCursor();
   };
 

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts

@@ -164,7 +164,7 @@ export class CanvasToolModule extends CanvasModuleBase {
     const selectedEntityAdapter = this.manager.stateApi.getSelectedEntityAdapter();
 
     if (this.manager.stage.getIsDragging()) {
-      this.tools.view.syncCursorStyle();
+      stage.setCursor('grabbing');
     } else if (tool === 'view') {
       this.tools.view.syncCursorStyle();
     } else if (segmentingAdapter) {