tidy(ui): organize regional prompts files

invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx

@@ -5,9 +5,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton';
 import { BrushSize } from 'features/regionalPrompts/components/BrushSize';
 import { DeleteAllLayersButton } from 'features/regionalPrompts/components/DeleteAllLayersButton';
-import { StageComponent } from 'features/regionalPrompts/components/imperative/konvaApiDraft';
 import { LayerListItem } from 'features/regionalPrompts/components/LayerListItem';
 import { PromptLayerOpacity } from 'features/regionalPrompts/components/PromptLayerOpacity';
+import { StageComponent } from 'features/regionalPrompts/components/StageComponent';
 import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser';
 import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';

invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx

@@ -2,20 +2,19 @@ import { Box } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useMouseEvents } from 'features/regionalPrompts/hooks/mouseEventHooks';
 import {
   $cursorPosition,
   layerBboxChanged,
   layerTranslated,
   selectRegionalPromptsSlice,
 } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { renderBbox, renderBrushPreview, renderLayers } from 'features/regionalPrompts/util/renderers';
 import Konva from 'konva';
 import type { IRect } from 'konva/lib/types';
 import { atom } from 'nanostores';
 import { useCallback, useLayoutEffect } from 'react';
 
-import { useMouseDown, useMouseEnter, useMouseLeave, useMouseMove, useMouseUp } from './mouseEventHooks';
-import { renderBbox, renderBrushPreview, renderLayers } from './renderers';
-
 const $stage = atom<Konva.Stage | null>(null);
 
 const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
@@ -28,11 +27,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
   const height = useAppSelector((s) => s.generation.height);
   const state = useAppSelector((s) => s.regionalPrompts);
   const stage = useStore($stage);
-  const onMouseDown = useMouseDown();
+  const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave } = useMouseEvents();
-  const onMouseUp = useMouseUp();
-  const onMouseMove = useMouseMove();
-  const onMouseEnter = useMouseEnter();
-  const onMouseLeave = useMouseLeave();
   const cursorPosition = useStore($cursorPosition);
   const selectedLayerColor = useAppSelector(selectSelectedLayerColor);
 

invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts

@@ -27,8 +27,9 @@ const syncCursorPos = (stage: Konva.Stage) => {
   return pos;
 };
 
-export const useMouseDown = () => {
+export const useMouseEvents = () => {
   const dispatch = useAppDispatch();
+
   const onMouseDown = useCallback(
     (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
       const stage = e.target.getStage();
@@ -47,10 +48,7 @@ export const useMouseDown = () => {
     },
     [dispatch]
   );
-  return onMouseDown;
-};
 
-export const useMouseUp = () => {
   const onMouseUp = useCallback((e: KonvaEventObject<MouseEvent | TouchEvent>) => {
     const stage = e.target.getStage();
     if (!stage) {
@@ -62,11 +60,7 @@ export const useMouseUp = () => {
       $isMouseDown.set(false);
     }
   }, []);
-  return onMouseUp;
-};
 
-export const useMouseMove = () => {
-  const dispatch = useAppDispatch();
   const onMouseMove = useCallback(
     (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
       const stage = e.target.getStage();
@@ -84,10 +78,7 @@ export const useMouseMove = () => {
     },
     [dispatch]
   );
-  return onMouseMove;
-};
 
-export const useMouseLeave = () => {
   const onMouseLeave = useCallback((e: KonvaEventObject<MouseEvent | TouchEvent>) => {
     const stage = e.target.getStage();
     if (!stage) {
@@ -97,11 +88,7 @@ export const useMouseLeave = () => {
     $isMouseDown.set(false);
     $cursorPosition.set(null);
   }, []);
-  return onMouseLeave;
-};
 
-export const useMouseEnter = () => {
-  const dispatch = useAppDispatch();
   const onMouseEnter = useCallback(
     (e: KonvaEventObject<MouseEvent>) => {
       const stage = e.target.getStage();
@@ -128,5 +115,6 @@ export const useMouseEnter = () => {
     },
     [dispatch]
   );
-  return onMouseEnter;
+
+  return { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave };
 };

invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts

@@ -1,8 +1,8 @@
 import { getStore } from 'app/store/nanostores/store';
 import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
 import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
-import { renderLayers } from 'features/regionalPrompts/components/imperative/renderers';
 import { REGIONAL_PROMPT_LAYER_NAME } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { renderLayers } from 'features/regionalPrompts/util/renderers';
 import Konva from 'konva';
 import { assert } from 'tsafe';
 

invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts

@@ -209,9 +209,7 @@ export const renderLayers = (
     const color = rgbColorToString(reduxLayer.color);
     const konvaObjectGroup = konvaLayer.findOne<Konva.Group>(`.${REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME}`);
     assert(konvaObjectGroup, `Object group not found for layer ${reduxLayer.id}`);
-    const transparencyRect = konvaLayer.findOne<Konva.Rect>(
+    const transparencyRect = konvaLayer.findOne<Konva.Rect>(`#${getLayerTransparencyRectId(reduxLayer.id)}`);
-      `#${getLayerTransparencyRectId(reduxLayer.id)}`
-    );
     assert(transparencyRect, `Transparency rect not found for layer ${reduxLayer.id}`);
 
     // Remove deleted objects