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): selectedLayer -> selectedLayerId

Browse Source
This commit is contained in:
psychedelicious
2024-04-19 21:06:48 +10:00
committed by Kent Keirsey
parent 9528287d56
commit e93e0612af
6 changed files with 44 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx
View File

@ -17,11 +17,11 @@ type Props = {
export const RPLayerListItem = memo(({ layerId }: Props) => { export const RPLayerListItem = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selectedLayer = useAppSelector((s) => s.regionalPrompts.present.selectedLayer); const selectedLayerId = useAppSelector((s) => s.regionalPrompts.present.selectedLayerId);
const color = useAppSelector((s) => { const color = useAppSelector((s) => {
const layer = s.regionalPrompts.present.layers.find((l) => l.id === layerId); const layer = s.regionalPrompts.present.layers.find((l) => l.id === layerId);
assert(isRPLayer(layer), `Layer ${layerId} not found or not an RP layer`); assert(isRPLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return rgbaColorToString({ ...layer.color, a: selectedLayer === layerId ? 1 : 0.35 }); return rgbaColorToString({ ...layer.color, a: selectedLayerId === layerId ? 1 : 0.35 });
}); });
const onClickCapture = useCallback(() => { const onClickCapture = useCallback(() => {
// Must be capture so that the layer is selected before deleting/resetting/etc // Must be capture so that the layer is selected before deleting/resetting/etc

18
invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx
View File

@ -22,11 +22,11 @@ import { assert } from 'tsafe';
const log = logger('regionalPrompts'); const log = logger('regionalPrompts');
const $stage = atom<Konva.Stage | null>(null); const $stage = atom<Konva.Stage | null>(null);
const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayer); const layer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayerId);
if (!layer) { if (!layer) {
return null; return null;
} }
assert(isRPLayer(layer), `Layer ${regionalPrompts.present.selectedLayer} is not an RP layer`); assert(isRPLayer(layer), `Layer ${regionalPrompts.present.selectedLayerId} is not an RP layer`);
return layer.color; return layer.color;
}); });
@ -39,7 +39,7 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
const tool = useStore($tool); const tool = useStore($tool);
const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave } = useMouseEvents(); const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave } = useMouseEvents();
const cursorPosition = useStore($cursorPosition); const cursorPosition = useStore($cursorPosition);
const selectedLayerColor = useAppSelector(selectSelectedLayerColor); const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor);
const onLayerPosChanged = useCallback( const onLayerPosChanged = useCallback(
(layerId: string, x: number, y: number) => { (layerId: string, x: number, y: number) => {
@ -122,24 +122,24 @@ const useStageRenderer = (container: HTMLDivElement | null, wrapper: HTMLDivElem
if (!stage) { if (!stage) {
return; return;
} }
renderBrushPreview(stage, tool, selectedLayerColor, cursorPosition, state.brushSize); renderBrushPreview(stage, tool, selectedLayerIdColor, cursorPosition, state.brushSize);
}, [stage, tool, cursorPosition, state.brushSize, selectedLayerColor]); }, [stage, tool, cursorPosition, state.brushSize, selectedLayerIdColor]);
useLayoutEffect(() => { useLayoutEffect(() => {
log.trace('Rendering layers'); log.trace('Rendering layers');
if (!stage) { if (!stage) {
return; return;
} }
renderLayers(stage, state.layers, state.selectedLayer, state.promptLayerOpacity, tool, onLayerPosChanged); renderLayers(stage, state.layers, state.selectedLayerId, state.promptLayerOpacity, tool, onLayerPosChanged);
}, [onLayerPosChanged, stage, state.layers, state.promptLayerOpacity, tool, state.selectedLayer]); }, [onLayerPosChanged, stage, state.layers, state.promptLayerOpacity, tool, state.selectedLayerId]);
useLayoutEffect(() => { useLayoutEffect(() => {
log.trace('Rendering bbox'); log.trace('Rendering bbox');
if (!stage) { if (!stage) {
return; return;
} }
renderBbox(stage, tool, state.selectedLayer, onBboxChanged); renderBbox(stage, tool, state.selectedLayerId, onBboxChanged);
}, [dispatch, stage, tool, state.selectedLayer, onBboxChanged]); }, [dispatch, stage, tool, state.selectedLayerId, onBboxChanged]);
}; };
const $container = atom<HTMLDivElement | null>(null); const $container = atom<HTMLDivElement | null>(null);

20
invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts
View File

@ -28,7 +28,7 @@ const syncCursorPos = (stage: Konva.Stage) => {
export const useMouseEvents = () => { export const useMouseEvents = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selectedLayer = useAppSelector((s) => s.regionalPrompts.present.selectedLayer); const selectedLayerId = useAppSelector((s) => s.regionalPrompts.present.selectedLayerId);
const tool = useStore($tool); const tool = useStore($tool);
const onMouseDown = useCallback( const onMouseDown = useCallback(
@ -42,15 +42,15 @@ export const useMouseEvents = () => {
return; return;
} }
$isMouseDown.set(true); $isMouseDown.set(true);
if (!selectedLayer) { if (!selectedLayerId) {
return; return;
} }
// const tool = getTool(); // const tool = getTool();
if (tool === 'brush' || tool === 'eraser') { if (tool === 'brush' || tool === 'eraser') {
dispatch(rpLayerLineAdded({ layerId: selectedLayer, points: [pos.x, pos.y, pos.x, pos.y], tool })); dispatch(rpLayerLineAdded({ layerId: selectedLayerId, points: [pos.x, pos.y, pos.x, pos.y], tool }));
} }
}, },
[dispatch, selectedLayer, tool] [dispatch, selectedLayerId, tool]
); );
const onMouseUp = useCallback( const onMouseUp = useCallback(
@ -74,15 +74,15 @@ export const useMouseEvents = () => {
return; return;
} }
const pos = syncCursorPos(stage); const pos = syncCursorPos(stage);
if (!pos || !selectedLayer) { if (!pos || !selectedLayerId) {
return; return;
} }
// const tool = getTool(); // const tool = getTool();
if (getIsFocused(stage) && $isMouseOver.get() && $isMouseDown.get() && (tool === 'brush' || tool === 'eraser')) { if (getIsFocused(stage) && $isMouseOver.get() && $isMouseDown.get() && (tool === 'brush' || tool === 'eraser')) {
dispatch(rpLayerPointsAdded({ layerId: selectedLayer, point: [pos.x, pos.y] })); dispatch(rpLayerPointsAdded({ layerId: selectedLayerId, point: [pos.x, pos.y] }));
} }
}, },
[dispatch, selectedLayer, tool] [dispatch, selectedLayerId, tool]
); );
const onMouseLeave = useCallback((e: KonvaEventObject<MouseEvent | TouchEvent>) => { const onMouseLeave = useCallback((e: KonvaEventObject<MouseEvent | TouchEvent>) => {
@ -113,15 +113,15 @@ export const useMouseEvents = () => {
$isMouseDown.set(false); $isMouseDown.set(false);
} else { } else {
$isMouseDown.set(true); $isMouseDown.set(true);
if (!selectedLayer) { if (!selectedLayerId) {
return; return;
} }
if (tool === 'brush' || tool === 'eraser') { if (tool === 'brush' || tool === 'eraser') {
dispatch(rpLayerLineAdded({ layerId: selectedLayer, points: [pos.x, pos.y, pos.x, pos.y], tool })); dispatch(rpLayerLineAdded({ layerId: selectedLayerId, points: [pos.x, pos.y, pos.x, pos.y], tool }));
} }
} }
}, },
[dispatch, selectedLayer, tool] [dispatch, selectedLayerId, tool]
); );
return { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave }; return { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave };

18
invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts
View File

@ -10,7 +10,7 @@ import type { UndoableOptions } from 'redux-undo';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
export type DrawingTool = 'brush' | 'eraser'; type DrawingTool = 'brush' | 'eraser';
export type RPTool = DrawingTool | 'move'; export type RPTool = DrawingTool | 'move';
@ -65,7 +65,7 @@ export type Layer = RegionalPromptLayer;
type RegionalPromptsState = { type RegionalPromptsState = {
_version: 1; _version: 1;
selectedLayer: string | null; selectedLayerId: string | null;
layers: Layer[]; layers: Layer[];
brushSize: number; brushSize: number;
promptLayerOpacity: number; promptLayerOpacity: number;
@ -74,7 +74,7 @@ type RegionalPromptsState = {
export const initialRegionalPromptsState: RegionalPromptsState = { export const initialRegionalPromptsState: RegionalPromptsState = {
_version: 1, _version: 1,
selectedLayer: null, selectedLayerId: null,
brushSize: 40, brushSize: 40,
layers: [], layers: [],
promptLayerOpacity: 0.5, // This currently doesn't work promptLayerOpacity: 0.5, // This currently doesn't work
@ -106,7 +106,7 @@ export const regionalPromptsSlice = createSlice({
autoNegative: 'off', autoNegative: 'off',
}; };
state.layers.push(layer); state.layers.push(layer);
state.selectedLayer = layer.id; state.selectedLayerId = layer.id;
return; return;
} }
}, },
@ -114,7 +114,7 @@ export const regionalPromptsSlice = createSlice({
}, },
layerDeleted: (state, action: PayloadAction<string>) => { layerDeleted: (state, action: PayloadAction<string>) => {
state.layers = state.layers.filter((l) => l.id !== action.payload); state.layers = state.layers.filter((l) => l.id !== action.payload);
state.selectedLayer = state.layers[0]?.id ?? null; state.selectedLayerId = state.layers[0]?.id ?? null;
}, },
layerMovedForward: (state, action: PayloadAction<string>) => { layerMovedForward: (state, action: PayloadAction<string>) => {
const cb = (l: Layer) => l.id === action.payload; const cb = (l: Layer) => l.id === action.payload;
@ -139,7 +139,7 @@ export const regionalPromptsSlice = createSlice({
rpLayerSelected: (state, action: PayloadAction<string>) => { rpLayerSelected: (state, action: PayloadAction<string>) => {
const layer = state.layers.find((l) => l.id === action.payload); const layer = state.layers.find((l) => l.id === action.payload);
if (isRPLayer(layer)) { if (isRPLayer(layer)) {
state.selectedLayer = layer.id; state.selectedLayerId = layer.id;
} }
}, },
rpLayerIsVisibleToggled: (state, action: PayloadAction<string>) => { rpLayerIsVisibleToggled: (state, action: PayloadAction<string>) => {
@ -173,7 +173,7 @@ export const regionalPromptsSlice = createSlice({
}, },
allLayersDeleted: (state) => { allLayersDeleted: (state) => {
state.layers = []; state.layers = [];
state.selectedLayer = null; state.selectedLayerId = null;
}, },
rpLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string }>) => { rpLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string }>) => {
const { layerId, prompt } = action.payload; const { layerId, prompt } = action.payload;
@ -349,13 +349,12 @@ export const regionalPromptsPersistConfig: PersistConfig<RegionalPromptsState> =
name: regionalPromptsSlice.name, name: regionalPromptsSlice.name,
initialState: initialRegionalPromptsState, initialState: initialRegionalPromptsState,
migrate: migrateRegionalPromptsState, migrate: migrateRegionalPromptsState,
persistDenylist: ['tool'], persistDenylist: [],
}; };
// Payload-less actions for `redux-undo` // Payload-less actions for `redux-undo`
export const undoRegionalPrompts = createAction(`${regionalPromptsSlice.name}/undo`); export const undoRegionalPrompts = createAction(`${regionalPromptsSlice.name}/undo`);
export const redoRegionalPrompts = createAction(`${regionalPromptsSlice.name}/redo`); export const redoRegionalPrompts = createAction(`${regionalPromptsSlice.name}/redo`);
export const clearHistoryRegionalPrompts = createAction(`${regionalPromptsSlice.name}/clearHistory`);
// These actions are _individually_ grouped together as single undoable actions // These actions are _individually_ grouped together as single undoable actions
const undoableGroupByMatcher = isAnyOf( const undoableGroupByMatcher = isAnyOf(
@ -374,7 +373,6 @@ export const regionalPromptsUndoableConfig: UndoableOptions<RegionalPromptsState
limit: 64, limit: 64,
undoType: undoRegionalPrompts.type, undoType: undoRegionalPrompts.type,
redoType: redoRegionalPrompts.type, redoType: redoRegionalPrompts.type,
clearHistoryType: clearHistoryRegionalPrompts.type,
groupBy: (action, state, history) => { groupBy: (action, state, history) => {
// Lines are started with `rpLayerLineAdded` and may have any number of subsequent `rpLayerPointsAdded` events. // Lines are started with `rpLayerLineAdded` and may have any number of subsequent `rpLayerPointsAdded` events.
// We can use a double-buffer-esque trick to group each "logical" line as a single undoable action, without grouping // We can use a double-buffer-esque trick to group each "logical" line as a single undoable action, without grouping

4
invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts
View File

@ -18,10 +18,10 @@ export const getRegionalPromptLayerBlobs = async (
): Promise<Record<string, Blob>> => { ): Promise<Record<string, Blob>> => {
const state = getStore().getState(); const state = getStore().getState();
const reduxLayers = state.regionalPrompts.present.layers; const reduxLayers = state.regionalPrompts.present.layers;
const selectedLayerId = state.regionalPrompts.present.selectedLayer; const selectedLayerIdId = state.regionalPrompts.present.selectedLayerId;
const container = document.createElement('div'); const container = document.createElement('div');
const stage = new Konva.Stage({ container, width: state.generation.width, height: state.generation.height }); const stage = new Konva.Stage({ container, width: state.generation.width, height: state.generation.height });
renderLayers(stage, reduxLayers, selectedLayerId, 1, 'brush'); renderLayers(stage, reduxLayers, selectedLayerIdId, 1, 'brush');
const konvaLayers = stage.find<Konva.Layer>(`.${REGIONAL_PROMPT_LAYER_NAME}`); const konvaLayers = stage.find<Konva.Layer>(`.${REGIONAL_PROMPT_LAYER_NAME}`);
const blobs: Record<string, Blob> = {}; const blobs: Record<string, Blob> = {};

26
invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
View File

@ -129,7 +129,7 @@ const renderRPLayer = (
stage: Konva.Stage, stage: Konva.Stage,
rpLayer: RegionalPromptLayer, rpLayer: RegionalPromptLayer,
rpLayerIndex: number, rpLayerIndex: number,
selectedLayerId: string | null, selectedLayerIdId: string | null,
tool: RPTool, tool: RPTool,
layerOpacity: number, layerOpacity: number,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void onLayerPosChanged?: (layerId: string, x: number, y: number) => void
@ -195,7 +195,7 @@ const renderRPLayer = (
// Update the layer's position and listening state (only the selected layer is listening) // Update the layer's position and listening state (only the selected layer is listening)
konvaLayer.setAttrs({ konvaLayer.setAttrs({
listening: rpLayer.id === selectedLayerId && tool === 'move', listening: rpLayer.id === selectedLayerIdId && tool === 'move',
x: rpLayer.x, x: rpLayer.x,
y: rpLayer.y, y: rpLayer.y,
// There are rpLayers.length layers, plus a brush preview layer rendered on top of them, so the zIndex works // There are rpLayers.length layers, plus a brush preview layer rendered on top of them, so the zIndex works
@ -268,7 +268,7 @@ const renderRPLayer = (
* Renders the layers on the stage. * Renders the layers on the stage.
* @param stage The konva stage to render on. * @param stage The konva stage to render on.
* @param reduxLayers Array of the layers from the redux store. * @param reduxLayers Array of the layers from the redux store.
* @param selectedLayerId The selected layer id. * @param selectedLayerIdId The selected layer id.
* @param layerOpacity The opacity of the layer. * @param layerOpacity The opacity of the layer.
* @param onLayerPosChanged Callback for when the layer's position changes. This is optional to allow for offscreen rendering. * @param onLayerPosChanged Callback for when the layer's position changes. This is optional to allow for offscreen rendering.
* @returns * @returns
@ -276,7 +276,7 @@ const renderRPLayer = (
export const renderLayers = ( export const renderLayers = (
stage: Konva.Stage, stage: Konva.Stage,
reduxLayers: Layer[], reduxLayers: Layer[],
selectedLayerId: string | null, selectedLayerIdId: string | null,
layerOpacity: number, layerOpacity: number,
tool: RPTool, tool: RPTool,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void onLayerPosChanged?: (layerId: string, x: number, y: number) => void
@ -294,7 +294,7 @@ export const renderLayers = (
const reduxLayer = reduxLayers[layerIndex]; const reduxLayer = reduxLayers[layerIndex];
assert(reduxLayer, `Layer at index ${layerIndex} is undefined`); assert(reduxLayer, `Layer at index ${layerIndex} is undefined`);
if (reduxLayer.kind === 'regionalPromptLayer') { if (reduxLayer.kind === 'regionalPromptLayer') {
renderRPLayer(stage, reduxLayer, layerIndex, selectedLayerId, tool, layerOpacity, onLayerPosChanged); renderRPLayer(stage, reduxLayer, layerIndex, selectedLayerIdId, tool, layerOpacity, onLayerPosChanged);
} }
} }
}; };
@ -306,14 +306,14 @@ const selectPromptLayerObjectGroup = (item: Node<NodeConfig>) =>
* *
* @param stage The konva stage to render on. * @param stage The konva stage to render on.
* @param tool The current tool. * @param tool The current tool.
* @param selectedLayerId The currently selected layer id. * @param selectedLayerIdId The currently selected layer id.
* @param onBboxChanged A callback to be called when the bounding box changes. * @param onBboxChanged A callback to be called when the bounding box changes.
* @returns * @returns
*/ */
export const renderBbox = ( export const renderBbox = (
stage: Konva.Stage, stage: Konva.Stage,
tool: RPTool, tool: RPTool,
selectedLayerId: string | null, selectedLayerIdId: string | null,
onBboxChanged: (layerId: string, bbox: IRect) => void onBboxChanged: (layerId: string, bbox: IRect) => void
) => { ) => {
// Hide all bounding boxes // Hide all bounding boxes
@ -323,20 +323,20 @@ export const renderBbox = (
} }
// No selected layer or not using the move tool - nothing more to do here // No selected layer or not using the move tool - nothing more to do here
if (!selectedLayerId || tool !== 'move') { if (!selectedLayerIdId || tool !== 'move') {
return; return;
} }
const konvaLayer = stage.findOne<Konva.Layer>(`#${selectedLayerId}`); const konvaLayer = stage.findOne<Konva.Layer>(`#${selectedLayerIdId}`);
assert(konvaLayer, `Selected layer ${selectedLayerId} not found in stage`); assert(konvaLayer, `Selected layer ${selectedLayerIdId} not found in stage`);
const bbox = getKonvaLayerBbox(konvaLayer, selectPromptLayerObjectGroup); const bbox = getKonvaLayerBbox(konvaLayer, selectPromptLayerObjectGroup);
onBboxChanged(selectedLayerId, bbox); onBboxChanged(selectedLayerIdId, bbox);
let rect = konvaLayer.findOne<Konva.Rect>(`.${REGIONAL_PROMPT_LAYER_BBOX_NAME}`); let rect = konvaLayer.findOne<Konva.Rect>(`.${REGIONAL_PROMPT_LAYER_BBOX_NAME}`);
if (!rect) { if (!rect) {
rect = new Konva.Rect({ rect = new Konva.Rect({
id: getPRLayerBboxId(selectedLayerId), id: getPRLayerBboxId(selectedLayerIdId),
name: REGIONAL_PROMPT_LAYER_BBOX_NAME, name: REGIONAL_PROMPT_LAYER_BBOX_NAME,
strokeWidth: 1, strokeWidth: 1,
}); });
@ -349,6 +349,6 @@ export const renderBbox = (
width: bbox.width, width: bbox.width,
height: bbox.height, height: bbox.height,
listening: true, listening: true,
stroke: selectedLayerId === selectedLayerId ? 'rgba(153, 187, 189, 1)' : 'rgba(255, 255, 255, 0.149)', stroke: selectedLayerIdId === selectedLayerIdId ? 'rgba(153, 187, 189, 1)' : 'rgba(255, 255, 255, 0.149)',
}); });
}; };