From a1a9f0da73940b6011a832f2959976bdeaec81a6 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 18 Apr 2024 11:46:27 +1000 Subject: [PATCH] tidy(ui): remove more unused files --- .../components/BrushPreview.tsx | 58 ------- .../components/LayerBoundingBox.tsx | 49 ------ .../regionalPrompts/hooks/mouseEventHooks.ts | 145 ------------------ 3 files changed, 252 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/regionalPrompts/components/BrushPreview.tsx delete mode 100644 invokeai/frontend/web/src/features/regionalPrompts/components/LayerBoundingBox.tsx delete mode 100644 invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/BrushPreview.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/BrushPreview.tsx deleted file mode 100644 index 1c625625cf..0000000000 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/BrushPreview.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useStore } from '@nanostores/react'; -import { useAppSelector } from 'app/store/storeHooks'; -import { rgbaColorToString } from 'features/canvas/util/colorToString'; -import { $cursorPosition } from 'features/regionalPrompts/store/regionalPromptsSlice'; -import { memo } from 'react'; -import { Circle, Group } from 'react-konva'; - -export const BrushPreviewOutline = memo(() => { - const brushSize = useAppSelector((s) => s.regionalPrompts.brushSize); - const tool = useAppSelector((s) => s.regionalPrompts.tool); - const a = useAppSelector((s) => s.regionalPrompts.promptLayerOpacity); - const color = useAppSelector((s) => { - const _color = s.regionalPrompts.layers.find((l) => l.id === s.regionalPrompts.selectedLayer)?.color; - if (!_color) { - return null; - } - return rgbaColorToString({ ..._color, a }); - }); - - const pos = useStore($cursorPosition); - - if (!brushSize || !color || !pos || tool === 'move') { - return null; - } - - return ( - - - - - - ); -}); - -BrushPreviewOutline.displayName = 'BrushPreviewOutline'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerBoundingBox.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/LayerBoundingBox.tsx deleted file mode 100644 index 31e09d1e05..0000000000 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerBoundingBox.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { layerSelected, selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice'; -import { memo, useCallback, useMemo } from 'react'; -import { Rect as KonvaRect } from 'react-konva'; - -type Props = { - layerId: string; -}; - -export const LayerBoundingBox = memo(({ layerId }: Props) => { - const dispatch = useAppDispatch(); - const tool = useAppSelector((s) => s.regionalPrompts.tool); - const selectedLayer = useAppSelector((s) => s.regionalPrompts.selectedLayer); - - const onMouseDown = useCallback(() => { - dispatch(layerSelected(layerId)); - }, [dispatch, layerId]); - - const selectBbox = useMemo( - () => - createMemoizedSelector( - selectRegionalPromptsSlice, - (regionalPrompts) => regionalPrompts.layers.find((layer) => layer.id === layerId)?.bbox ?? null - ), - [layerId] - ); - const bbox = useAppSelector(selectBbox); - - if (!bbox || tool !== 'move') { - return null; - } - - return ( - - ); -}); - -LayerBoundingBox.displayName = 'LayerBoundingBox'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts deleted file mode 100644 index 084bb24294..0000000000 --- a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { getStore } from 'app/store/nanostores/store'; -import { useAppDispatch } from 'app/store/storeHooks'; -import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; -import { - $cursorPosition, - $isMouseDown, - $isMouseOver, - lineAdded, - pointsAdded, -} from 'features/regionalPrompts/store/regionalPromptsSlice'; -import type Konva from 'konva'; -import type { KonvaEventObject } from 'konva/lib/Node'; -import type { MutableRefObject } from 'react'; -import { useCallback } from 'react'; - -const getTool = () => getStore().getState().regionalPrompts.tool; - -const getIsFocused = (stage: Konva.Stage) => { - return stage.container().contains(document.activeElement); -}; - -const syncCursorPos = (stage: Konva.Stage) => { - const pos = getScaledCursorPosition(stage); - if (!pos) { - return null; - } - $cursorPosition.set(pos); - return pos; -}; - -export const useMouseDown = (stageRef: MutableRefObject) => { - const dispatch = useAppDispatch(); - const onMouseDown = useCallback( - (_e: KonvaEventObject) => { - if (!stageRef.current) { - return; - } - const pos = syncCursorPos(stageRef.current); - if (!pos) { - return; - } - $isMouseDown.set(true); - const tool = getTool(); - if (tool === 'brush' || tool === 'eraser') { - dispatch(lineAdded([pos.x, pos.y])); - } - }, - [dispatch, stageRef] - ); - return onMouseDown; -}; - -export const useMouseUp = (stageRef: MutableRefObject) => { - const dispatch = useAppDispatch(); - const onMouseUp = useCallback( - (_e: KonvaEventObject) => { - if (!stageRef.current) { - return; - } - const tool = getTool(); - if ((tool === 'brush' || tool === 'eraser') && $isMouseDown.get()) { - // Add another point to the last line. - $isMouseDown.set(false); - const pos = syncCursorPos(stageRef.current); - if (!pos) { - return; - } - dispatch(pointsAdded([pos.x, pos.y])); - } - }, - [dispatch, stageRef] - ); - return onMouseUp; -}; - -export const useMouseMove = (stageRef: MutableRefObject) => { - const dispatch = useAppDispatch(); - const onMouseMove = useCallback( - (_e: KonvaEventObject) => { - if (!stageRef.current) { - return; - } - const pos = syncCursorPos(stageRef.current); - if (!pos) { - return; - } - const tool = getTool(); - if ( - getIsFocused(stageRef.current) && - $isMouseOver.get() && - $isMouseDown.get() && - (tool === 'brush' || tool === 'eraser') - ) { - dispatch(pointsAdded([pos.x, pos.y])); - } - }, - [dispatch, stageRef] - ); - return onMouseMove; -}; - -export const useMouseLeave = (stageRef: MutableRefObject) => { - const onMouseLeave = useCallback( - (_e: KonvaEventObject) => { - if (!stageRef.current) { - return; - } - $isMouseOver.set(false); - $isMouseDown.set(false); - $cursorPosition.set(null); - }, - [stageRef] - ); - return onMouseLeave; -}; - -export const useMouseEnter = (stageRef: MutableRefObject) => { - const dispatch = useAppDispatch(); - const onMouseEnter = useCallback( - (e: KonvaEventObject) => { - if (!stageRef.current) { - return; - } - $isMouseOver.set(true); - const pos = syncCursorPos(stageRef.current); - if (!pos) { - return; - } - if (!getIsFocused(stageRef.current)) { - return; - } - if (e.evt.buttons !== 1) { - $isMouseDown.set(false); - } else { - $isMouseDown.set(true); - const tool = getTool(); - if (tool === 'brush' || tool === 'eraser') { - dispatch(lineAdded([pos.x, pos.y])); - } - } - }, - [dispatch, stageRef] - ); - return onMouseEnter; -};