feat(ui): fix color picker wrong color, improved perf

The color picker take some time to sample the color from the canvas state. This could cause a race condition where the cursor position changes between the time sampling starts, resulting in the picker showing the wrong color. Sometimes it picks up the color picker tool preview!

To resolve this, the color picker's color syncing is now throttled to once per animation frame. Besides fixing the incorrect color issue, it improves the perf substantially by reducing number of samples we take.

Author: psychedelicious

invokeai/frontend/web/package.json

@@ -83,6 +83,7 @@
     "overlayscrollbars-react": "^0.5.6",
     "perfect-freehand": "^1.2.2",
     "query-string": "^9.1.0",
+    "raf-throttle": "^2.0.6",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",

invokeai/frontend/web/pnpm-lock.yaml

@@ -31,6 +31,7 @@ import { RGBA_BLACK } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import { atom } from 'nanostores';
+import rafThrottle from 'raf-throttle';
 import type { Logger } from 'roarr';
 
 // Konva's docs say the default drag buttons are [0], but it's actually [0,1]. We only want left-click to drag, so we
@@ -597,6 +598,18 @@ export class CanvasToolModule extends CanvasModuleBase {
     }
   };
 
+  syncColorUnderCursor = rafThrottle(() => {
+    const cursorPos = this.$cursorPos.get();
+    if (!cursorPos) {
+      return;
+    }
+
+    const color = getColorAtCoordinate(this.konva.stage, cursorPos.absolute);
+    if (color) {
+      this.$colorUnderCursor.set(color);
+    }
+  });
+
   onStagePointerMove = async (e: KonvaEventObject<PointerEvent>) => {
     try {
       this.$lastPointerType.set(e.evt.pointerType);
@@ -615,11 +628,7 @@ export class CanvasToolModule extends CanvasModuleBase {
       const tool = this.$tool.get();
 
       if (tool === 'colorPicker') {
-        const color = getColorAtCoordinate(this.konva.stage, cursorPos.absolute);
-        if (color) {
-          this.$colorUnderCursor.set(color);
-        }
-        return;
+        this.syncColorUnderCursor();
       }
 
       const isMouseDown = this.$isMouseDown.get();