mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
tidy(ui): remove more unused files
This commit is contained in:
psychedelicious
Kent Keirsey
parent
8f4f3b773c
commit
a1a9f0da73
@ -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 (
|
|
||||||
<Group listening={false}>
|
|
||||||
<Circle
|
|
||||||
x={pos.x}
|
|
||||||
y={pos.y}
|
|
||||||
radius={brushSize / 2}
|
|
||||||
fill={color}
|
|
||||||
globalCompositeOperation={tool === 'brush' ? 'source-over' : 'destination-out'}
|
|
||||||
listening={false}
|
|
||||||
/>
|
|
||||||
<Circle
|
|
||||||
x={pos.x}
|
|
||||||
y={pos.y}
|
|
||||||
radius={brushSize / 2 + 1}
|
|
||||||
stroke="rgba(255,255,255,0.8)"
|
|
||||||
strokeWidth={1}
|
|
||||||
strokeEnabled={true}
|
|
||||||
listening={false}
|
|
||||||
/>
|
|
||||||
<Circle
|
|
||||||
x={pos.x}
|
|
||||||
y={pos.y}
|
|
||||||
radius={brushSize / 2}
|
|
||||||
stroke="rgba(0,0,0,1)"
|
|
||||||
strokeWidth={1}
|
|
||||||
strokeEnabled={true}
|
|
||||||
listening={false}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
BrushPreviewOutline.displayName = 'BrushPreviewOutline';
|
|
||||||
@ -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 (
|
|
||||||
<KonvaRect
|
|
||||||
name="layer bbox"
|
|
||||||
onMouseDown={onMouseDown}
|
|
||||||
stroke={selectedLayer === layerId ? 'rgba(153, 187, 189, 1)' : 'rgba(255, 255, 255, 0.149)'}
|
|
||||||
strokeWidth={1}
|
|
||||||
x={bbox.x}
|
|
||||||
y={bbox.y}
|
|
||||||
width={bbox.width}
|
|
||||||
height={bbox.height}
|
|
||||||
listening={tool === 'move'}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
LayerBoundingBox.displayName = 'LayerBoundingBox';
|
|
||||||
@ -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<Konva.Stage | null>) => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const onMouseDown = useCallback(
|
|
||||||
(_e: KonvaEventObject<MouseEvent | TouchEvent>) => {
|
|
||||||
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<Konva.Stage | null>) => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const onMouseUp = useCallback(
|
|
||||||
(_e: KonvaEventObject<MouseEvent | TouchEvent>) => {
|
|
||||||
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<Konva.Stage | null>) => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const onMouseMove = useCallback(
|
|
||||||
(_e: KonvaEventObject<MouseEvent | TouchEvent>) => {
|
|
||||||
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<Konva.Stage | null>) => {
|
|
||||||
const onMouseLeave = useCallback(
|
|
||||||
(_e: KonvaEventObject<MouseEvent | TouchEvent>) => {
|
|
||||||
if (!stageRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$isMouseOver.set(false);
|
|
||||||
$isMouseDown.set(false);
|
|
||||||
$cursorPosition.set(null);
|
|
||||||
},
|
|
||||||
[stageRef]
|
|
||||||
);
|
|
||||||
return onMouseLeave;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useMouseEnter = (stageRef: MutableRefObject<Konva.Stage | null>) => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const onMouseEnter = useCallback(
|
|
||||||
(e: KonvaEventObject<MouseEvent>) => {
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user