diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx index 72006db3a5..22d7e84019 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx +++ b/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'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/konvaApiDraft.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx similarity index 92% rename from invokeai/frontend/web/src/features/regionalPrompts/components/imperative/konvaApiDraft.tsx rename to invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx index 185a9b935a..acb487179a 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/konvaApiDraft.tsx +++ b/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(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 onMouseUp = useMouseUp(); - const onMouseMove = useMouseMove(); - const onMouseEnter = useMouseEnter(); - const onMouseLeave = useMouseLeave(); + const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave } = useMouseEvents(); const cursorPosition = useStore($cursorPosition); const selectedLayerColor = useAppSelector(selectSelectedLayerColor); diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/mouseEventHooks.ts b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts similarity index 89% rename from invokeai/frontend/web/src/features/regionalPrompts/components/imperative/mouseEventHooks.ts rename to invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts index ec16da579d..e3f7745563 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/mouseEventHooks.ts +++ b/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) => { const stage = e.target.getStage(); @@ -47,10 +48,7 @@ export const useMouseDown = () => { }, [dispatch] ); - return onMouseDown; -}; -export const useMouseUp = () => { const onMouseUp = useCallback((e: KonvaEventObject) => { 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) => { const stage = e.target.getStage(); @@ -84,10 +78,7 @@ export const useMouseMove = () => { }, [dispatch] ); - return onMouseMove; -}; -export const useMouseLeave = () => { const onMouseLeave = useCallback((e: KonvaEventObject) => { 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) => { const stage = e.target.getStage(); @@ -128,5 +115,6 @@ export const useMouseEnter = () => { }, [dispatch] ); - return onMouseEnter; + + return { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave }; }; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts index cbdf07cb3b..20f4cff52d 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts +++ b/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'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/renderers.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts similarity index 98% rename from invokeai/frontend/web/src/features/regionalPrompts/components/imperative/renderers.ts rename to invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts index 050982b46f..f99aba5de2 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/imperative/renderers.ts +++ b/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(`.${REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME}`); assert(konvaObjectGroup, `Object group not found for layer ${reduxLayer.id}`); - const transparencyRect = konvaLayer.findOne( - `#${getLayerTransparencyRectId(reduxLayer.id)}` - ); + const transparencyRect = konvaLayer.findOne(`#${getLayerTransparencyRectId(reduxLayer.id)}`); assert(transparencyRect, `Transparency rect not found for layer ${reduxLayer.id}`); // Remove deleted objects