diff --git a/invokeai/frontend/web/.storybook/preview.tsx b/invokeai/frontend/web/.storybook/preview.tsx index 5f568c5ce3..8b21b48230 100644 --- a/invokeai/frontend/web/.storybook/preview.tsx +++ b/invokeai/frontend/web/.storybook/preview.tsx @@ -26,7 +26,7 @@ i18n.use(initReactI18next).init({ }); const store = createStore(undefined, false); -$store.set(store) +$store.set(store); $baseUrl.set('http://localhost:9090'); const preview: Preview = { diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerComponent.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/LayerComponent.tsx index 0446a97ad6..9e4596fa30 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerComponent.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/LayerComponent.tsx @@ -6,7 +6,7 @@ import { LineComponent } from 'features/regionalPrompts/components/LineComponent import { RectComponent } from 'features/regionalPrompts/components/RectComponent'; import { useLayer } from 'features/regionalPrompts/hooks/layerStateHooks'; import { - $stage, + getStage, layerBboxChanged, layerTranslated, REGIONAL_PROMPT_LAYER_NAME, @@ -54,10 +54,7 @@ export const LayerComponent: React.FC = ({ id }) => { ); const dragBoundFunc = useCallback(function (this: KonvaNodeType, pos: Vector2d) { - const stage = $stage.get(); - if (!stage) { - return this.getAbsolutePosition(); - } + const stage = getStage(); const cursorPos = getScaledCursorPosition(stage); if (!cursorPos) { return this.getAbsolutePosition(); diff --git a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts index 17e5cbff7b..084bb24294 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts @@ -13,7 +13,7 @@ import type { KonvaEventObject } from 'konva/lib/Node'; import type { MutableRefObject } from 'react'; import { useCallback } from 'react'; -export const getTool = () => getStore().getState().regionalPrompts.tool; +const getTool = () => getStore().getState().regionalPrompts.tool; const getIsFocused = (stage: Konva.Stage) => { return stage.container().contains(document.activeElement); diff --git a/invokeai/frontend/web/src/features/regionalPrompts/hooks/useTransform.ts b/invokeai/frontend/web/src/features/regionalPrompts/hooks/useTransform.ts deleted file mode 100644 index 87d4e3b9d4..0000000000 --- a/invokeai/frontend/web/src/features/regionalPrompts/hooks/useTransform.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { Group as KonvaGroupType } from 'konva/lib/Group'; -import type { Transformer as KonvaTransformerType } from 'konva/lib/shapes/Transformer'; -import { useEffect, useRef } from 'react'; - -export const useTransform = () => { - const shapeRef = useRef(null); - const transformerRef = useRef(null); - - useEffect(() => { - if (!transformerRef.current || !shapeRef.current) { - return; - } - transformerRef.current.nodes([shapeRef.current]); - transformerRef.current.getLayer()?.batchDraw(); - }, []); - - return { shapeRef, transformerRef }; -}; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts b/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts index 66891e5ccf..8d96bcdf30 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts @@ -9,7 +9,7 @@ import type { RgbColor } from 'react-colorful'; import { assert } from 'tsafe'; import { v4 as uuidv4 } from 'uuid'; -export type Tool = 'brush' | 'eraser' | 'move'; +type Tool = 'brush' | 'eraser' | 'move'; type LayerObjectBase = { id: string; @@ -39,7 +39,7 @@ export type FillRectObject = LayerObjectBase & { height: number; }; -export type LayerObject = ImageObject | LineObject | FillRectObject; +type LayerObject = ImageObject | LineObject | FillRectObject; type LayerBase = { id: string; @@ -56,7 +56,7 @@ type PromptRegionLayer = LayerBase & { color: RgbColor; }; -export type Layer = PromptRegionLayer; +type Layer = PromptRegionLayer; type RegionalPromptsState = { _version: 1; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/bbox.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/bbox.ts index 6536b3161b..5f0dc42088 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/util/bbox.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/util/bbox.ts @@ -11,7 +11,7 @@ import { assert } from 'tsafe'; * @param imageData The ImageData object to get the bounding box of. * @returns The minimum and maximum x and y values of the image's bounding box. */ -export const getImageDataBbox = (imageData: ImageData) => { +const getImageDataBbox = (imageData: ImageData) => { const { data, width, height } = imageData; let minX = width; let minY = height; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts index 3bec845da9..362f100941 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts @@ -2,7 +2,7 @@ import { getStore } from 'app/store/nanostores/store'; import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; import { selectPromptLayerObjectGroup } from 'features/regionalPrompts/components/LayerComponent'; -import { $stage, REGIONAL_PROMPT_LAYER_NAME } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { getStage, REGIONAL_PROMPT_LAYER_NAME } from 'features/regionalPrompts/store/regionalPromptsSlice'; import Konva from 'konva'; import { assert } from 'tsafe'; @@ -13,8 +13,7 @@ import { assert } from 'tsafe'; */ export const getRegionalPromptLayerBlobs = async (preview: boolean = false): Promise> => { const state = getStore().getState(); - const stage = $stage.get(); - assert(stage !== null, 'Stage is null'); + const stage = getStage(); // This automatically omits layers that are not rendered. Rendering is controlled by the layer's `isVisible` flag in redux. const regionalPromptLayers = stage.getLayers().filter((l) => l.name() === REGIONAL_PROMPT_LAYER_NAME);