Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): remove unused files, code

Browse Source
This commit is contained in:
psychedelicious 2024-04-18 11:44:59 +10:00 committed by Kent Keirsey
parent 00737efc31
commit 8f4f3b773c
6 changed files with 1 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
invokeai/frontend/web/src/features/regionalPrompts/components/LayerComponent.tsx
View File

@ -1,128 +0,0 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
import { LayerBoundingBox } from 'features/regionalPrompts/components/LayerBoundingBox';
import { LineComponent } from 'features/regionalPrompts/components/LineComponent';
import { RectComponent } from 'features/regionalPrompts/components/RectComponent';
import { useLayer } from 'features/regionalPrompts/hooks/layerStateHooks';
import {
getStage,
layerBboxChanged,
layerTranslated,
REGIONAL_PROMPT_LAYER_NAME,
REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME,
} from 'features/regionalPrompts/store/regionalPromptsSlice';
import { getKonvaLayerBbox } from 'features/regionalPrompts/util/bbox';
import type { Group as KonvaGroupType } from 'konva/lib/Group';
import type { Layer as KonvaLayerType } from 'konva/lib/Layer';
import type { KonvaEventObject, Node as KonvaNodeType, NodeConfig as KonvaNodeConfigType } from 'konva/lib/Node';
import type { IRect, Vector2d } from 'konva/lib/types';
import { memo, useCallback, useEffect, useRef } from 'react';
import { Group as KonvaGroup, Layer as KonvaLayer } from 'react-konva';
type Props = {
id: string;
};
export const selectPromptLayerObjectGroup = (item: KonvaNodeType<KonvaNodeConfigType>) =>
item.name() !== REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME;
export const LayerComponent = memo(({ id }: Props) => {
const dispatch = useAppDispatch();
const layer = useLayer(id);
const promptLayerOpacity = useAppSelector((s) => s.regionalPrompts.promptLayerOpacity);
const tool = useAppSelector((s) => s.regionalPrompts.tool);
const layerRef = useRef<KonvaLayerType>(null);
const groupRef = useRef<KonvaGroupType>(null);
const onChangeBbox = useCallback(
(bbox: IRect | null) => {
dispatch(layerBboxChanged({ layerId: layer.id, bbox }));
},
[dispatch, layer.id]
);
const onDragMove = useCallback(
(e: KonvaEventObject<DragEvent>) => {
// We must track the layer's coordinates to accurately position objects. For example, when drawing a line, the
// mouse events are handled by the stage, but the line is drawn on the layer.
dispatch(layerTranslated({ layerId: id, x: e.target.x(), y: e.target.y() }));
},
[dispatch, id]
);
const dragBoundFunc = useCallback(function (this: KonvaNodeType<KonvaNodeConfigType>, pos: Vector2d) {
const stage = getStage();
const cursorPos = getScaledCursorPosition(stage);
if (!cursorPos) {
return this.getAbsolutePosition();
}
// This prevents the user from dragging the object out of the stage.
if (cursorPos.x < 0 || cursorPos.x > stage.width() || cursorPos.y < 0 || cursorPos.y > stage.height()) {
return this.getAbsolutePosition();
}
return pos;
}, []);
useEffect(() => {
if (!layerRef.current || tool !== 'move') {
// This effectively makes the bbox only calculate as the tool is changed to 'move'.
return;
}
if (layer.objects.length === 0) {
// Reset the bbox when we have no objects.
onChangeBbox(null);
return;
}
// We could debounce this, remove the early return when the tool isn't move, and always show the bbox. For now,
// it is only shown when we are using the move tool.
onChangeBbox(getKonvaLayerBbox(layerRef.current, selectPromptLayerObjectGroup));
}, [tool, layer.objects, onChangeBbox]);
useEffect(() => {
if (!groupRef.current) {
return;
}
// Caching is not allowed for "empty" nodes. We must draw here to render the group instead. This is required
// to clear the layer when the layer is reset and on first render, when the layer has no objects.
if (layer.objects.length === 0) {
groupRef.current.draw();
return;
}
// Caching the group allows its opacity to apply to all shapes at once. We should cache only when the layer's
// objects or attributes with a visual effect (e.g. color) change.
// TODO: Figure out a more efficient way to handle opacity - maybe a separate rect w/ globalCompositeOperation...
groupRef.current.cache();
}, [layer.objects, layer.color, layer.isVisible]);
return (
<KonvaLayer
ref={layerRef}
id={layer.id}
name={REGIONAL_PROMPT_LAYER_NAME}
onDragMove={onDragMove}
dragBoundFunc={dragBoundFunc}
visible={layer.isVisible}
draggable
>
<KonvaGroup
id={`layer-${layer.id}-group`}
name={REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME}
ref={groupRef}
listening={false}
opacity={promptLayerOpacity}
>
{layer.objects.map((obj) => {
if (obj.kind === 'line') {
return <LineComponent key={obj.id} line={obj} color={layer.color} layerId={layer.id} />;
}
if (obj.kind === 'fillRect') {
return <RectComponent key={obj.id} rect={obj} color={layer.color} />;
}
})}
</KonvaGroup>
<LayerBoundingBox layerId={layer.id} />
</KonvaLayer>
);
});
LayerComponent.displayName = 'LayerComponent';

31
invokeai/frontend/web/src/features/regionalPrompts/components/LineComponent.tsx
View File

@ -1,31 +0,0 @@
import { rgbColorToString } from 'features/canvas/util/colorToString';
import type { LineObject } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo } from 'react';
import type { RgbColor } from 'react-colorful';
import { Line } from 'react-konva';
type Props = {
layerId: string;
line: LineObject;
color: RgbColor;
};
export const LineComponent = memo(({ layerId, line, color }: Props) => {
return (
<Line
id={`layer-${layerId}.line-${line.id}`}
key={line.id}
points={line.points}
strokeWidth={line.strokeWidth}
stroke={rgbColorToString(color)}
tension={0}
lineCap="round"
lineJoin="round"
shadowForStrokeEnabled={false}
globalCompositeOperation={line.tool === 'brush' ? 'source-over' : 'destination-out'}
listening={false}
/>
);
});
LineComponent.displayName = 'LineComponent';

26
invokeai/frontend/web/src/features/regionalPrompts/components/RectComponent.tsx
View File

@ -1,26 +0,0 @@
import { rgbColorToString } from 'features/canvas/util/colorToString';
import type { FillRectObject } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo } from 'react';
import type { RgbColor } from 'react-colorful';
import { Rect } from 'react-konva';
type Props = {
rect: FillRectObject;
color: RgbColor;
};
export const RectComponent = memo(({ rect, color }: Props) => {
return (
<Rect
key={rect.id}
x={rect.x}
y={rect.y}
width={rect.width}
height={rect.height}
fill={rgbColorToString(color)}
listening={false}
/>
);
});
RectComponent.displayName = 'RectComponent';

75
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx
View File

@ -1,75 +0,0 @@
import { chakra } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { BrushPreviewOutline } from 'features/regionalPrompts/components/BrushPreview';
import { LayerComponent } from 'features/regionalPrompts/components/LayerComponent';
import {
useMouseDown,
useMouseEnter,
useMouseLeave,
useMouseMove,
useMouseUp,
} from 'features/regionalPrompts/hooks/mouseEventHooks';
import { $stage, selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
import type Konva from 'konva';
import { memo, useCallback, useMemo, useRef } from 'react';
import { Layer, Stage } from 'react-konva';
const selectLayerIds = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) =>
regionalPrompts.layers.map((l) => l.id)
);
const ChakraStage = chakra(Stage, {
shouldForwardProp: (prop) => !['sx'].includes(prop),
});
export const RegionalPromptsStage: React.FC = memo(() => {
const layerIds = useAppSelector(selectLayerIds);
const stageRef = useRef<Konva.Stage | null>(null);
const width = useAppSelector((s) => s.generation.width);
const height = useAppSelector((s) => s.generation.height);
const tool = useAppSelector((s) => s.regionalPrompts.tool);
const onMouseDown = useMouseDown(stageRef);
const onMouseUp = useMouseUp(stageRef);
const onMouseMove = useMouseMove(stageRef);
const onMouseEnter = useMouseEnter(stageRef);
const onMouseLeave = useMouseLeave(stageRef);
const stageRefCallback = useCallback((el: Konva.Stage) => {
$stage.set(el);
stageRef.current = el;
}, []);
const sx = useMemo(
() => ({
borderRadius: 'base',
borderWidth: 1,
cursor: tool === 'move' ? 'default' : 'none',
}),
[tool]
);
return (
<ChakraStage
ref={stageRefCallback}
x={0}
y={0}
width={width}
height={height}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onMouseMove={onMouseMove}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
tabIndex={-1}
sx={sx}
>
{layerIds.map((id) => (
<LayerComponent key={id} id={id} />
))}
<Layer id="brushPreviewOutline">
<BrushPreviewOutline />
</Layer>
</ChakraStage>
);
});
RegionalPromptsStage.displayName = 'RegionalPromptsStage';

7
invokeai/frontend/web/src/features/regionalPrompts/components/imperative/konvaApiDraft.tsx
View File

@ -6,11 +6,9 @@ import {
$cursorPosition, $cursorPosition,
layerBboxChanged, layerBboxChanged,
layerTranslated, layerTranslated,
REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME,
selectRegionalPromptsSlice, selectRegionalPromptsSlice,
} from 'features/regionalPrompts/store/regionalPromptsSlice'; } from 'features/regionalPrompts/store/regionalPromptsSlice';
import Konva from 'konva'; import Konva from 'konva';
import type { Node, NodeConfig } from 'konva/lib/Node';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
import { useCallback, useLayoutEffect } from 'react'; import { useCallback, useLayoutEffect } from 'react';
@ -18,10 +16,7 @@ import { useCallback, useLayoutEffect } from 'react';
import { useMouseDown, useMouseEnter, useMouseLeave, useMouseMove, useMouseUp } from './mouseEventHooks'; import { useMouseDown, useMouseEnter, useMouseLeave, useMouseMove, useMouseUp } from './mouseEventHooks';
import { renderBbox, renderBrushPreview, renderLayers } from './renderers'; import { renderBbox, renderBrushPreview, renderLayers } from './renderers';
export const $stage = atom<Konva.Stage | null>(null); const $stage = atom<Konva.Stage | null>(null);
export const selectPromptLayerObjectGroup = (item: Node<NodeConfig>) =>
item.name() !== REGIONAL_PROMPT_LAYER_OBJECT_GROUP_NAME;
const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color; return regionalPrompts.layers.find((l) => l.id === regionalPrompts.selectedLayer)?.color;

22
invokeai/frontend/web/src/features/regionalPrompts/components/imperative/test.tsx
View File

@ -1,22 +0,0 @@
import type Konva from 'konva';
import { useCallback, useEffect, useState } from 'react';
import { Stage } from 'react-konva';
export const StageWrapper = () => {
const [stage, setStage] = useState<Konva.Stage | null>(null);
const stageRefCallback = useCallback(
(el: Konva.Stage | null) => {
setStage(el);
},
[setStage]
);
useEffect(() => {
if (!stage) {
return;
}
// do something with stage
}, [stage]);
return <Stage ref={stageRefCallback} />;
};