tidy(ui): move getColorUnderCursor to utils

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

@@ -7,6 +7,7 @@ import {
   alignCoordForTool,
   calculateNewBrushSizeFromWheelDelta,
   floorCoord,
+  getColorUnderCursor,
   getIsPrimaryMouseDown,
   getLastPointOfLastLine,
   getLastPointOfLastLineWithPressure,
@@ -217,28 +218,6 @@ export class CanvasToolModule extends CanvasModuleBase {
     return pos;
   };
 
-  getColorUnderCursor = (): RgbColor | null => {
-    const pos = this.konva.stage.getPointerPosition();
-    if (!pos) {
-      return null;
-    }
-    const ctx = this.konva.stage
-      .toCanvas({ x: pos.x, y: pos.y, width: 1, height: 1, imageSmoothingEnabled: false })
-      .getContext('2d');
-
-    if (!ctx) {
-      return null;
-    }
-
-    const [r, g, b, _a] = ctx.getImageData(0, 0, 1, 1).data;
-
-    if (r === undefined || g === undefined || b === undefined) {
-      return null;
-    }
-
-    return { r, g, b };
-  };
-
   getClip = (
     entity: CanvasRegionalGuidanceState | CanvasControlLayerState | CanvasRasterLayerState | CanvasInpaintMaskState
   ) => {
@@ -562,7 +541,7 @@ export class CanvasToolModule extends CanvasModuleBase {
       const settings = this.manager.stateApi.getSettings();
 
       if (tool === 'colorPicker') {
-        const color = this.getColorUnderCursor();
+        const color = getColorUnderCursor(this.konva.stage);
         if (color) {
           this.manager.stateApi.setColor({ ...settings.color, ...color });
         }
@@ -622,7 +601,7 @@ export class CanvasToolModule extends CanvasModuleBase {
       const cursorPos = this.syncLastCursorPos();
 
       if (tool === 'colorPicker') {
-        const color = this.getColorUnderCursor();
+        const color = getColorUnderCursor(this.konva.stage);
         if (color) {
           this.$colorUnderCursor.set(color);
         }

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

@@ -8,6 +8,7 @@ import { clamp } from 'lodash-es';
 import { customAlphabet } from 'nanoid';
 import type { StrokeOptions } from 'perfect-freehand';
 import getStroke from 'perfect-freehand';
+import type { RgbColor } from 'react-colorful';
 import { assert } from 'tsafe';
 
 /**
@@ -633,3 +634,30 @@ export const getPointerType = (e: KonvaEventObject<PointerEvent>): 'mouse' | 'pe
 
   return 'touch';
 };
+
+/**
+ * Gets the color under the cursor on a Konva stage.
+ * @param stage The konva stage
+ * @returns The color under the cursor, or null if the cursor is not over the stage
+ */
+export const getColorUnderCursor = (stage: Konva.Stage): RgbColor | null => {
+  const pos = stage.getPointerPosition();
+  if (!pos) {
+    return null;
+  }
+  const ctx = stage
+    .toCanvas({ x: pos.x, y: pos.y, width: 1, height: 1, imageSmoothingEnabled: false })
+    .getContext('2d');
+
+  if (!ctx) {
+    return null;
+  }
+
+  const [r, g, b, _a] = ctx.getImageData(0, 0, 1, 1).data;
+
+  if (r === undefined || g === undefined || b === undefined) {
+    return null;
+  }
+
+  return { r, g, b };
+};