github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add utils for getting images from canvas

Browse Source
This commit is contained in:
psychedelicious
2024-06-21 16:00:42 +10:00
parent 04df9f5873
commit 1b2d045be1
15 changed files with 277 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
View File

@@ -24,7 +24,7 @@ import { DEFAULT_RGBA_COLOR } from './types';
const initialState: CanvasV2State = {
_version: 3,
selectedEntityIdentifier: { type: 'inpaint_mask', id: 'inpaint_mask' },
layers: { entities: [], baseLayerImageCache: null },
layers: { entities: [], imageCache: null },
controlAdapters: { entities: [] },
ipAdapters: { entities: [] },
regions: { entities: [] },
@@ -161,7 +161,7 @@ export const canvasV2Slice = createSlice({
allEntitiesDeleted: (state) => {
state.regions.entities = [];
state.layers.entities = [];
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
state.ipAdapters.entities = [];
state.controlAdapters.entities = [];
},
@@ -185,7 +185,6 @@ export const {
scaledBboxChanged,
bboxScaleMethodChanged,
clipToBboxChanged,
baseLayerImageCacheChanged,
// layers
layerAdded,
layerRecalled,
@@ -205,6 +204,7 @@ export const {
layerRectAdded,
layerImageAdded,
layerAllDeleted,
layerImageCacheChanged,
// IP Adapters
ipaAdded,
ipaRecalled,
@@ -255,7 +255,7 @@ export const {
rgPositivePromptChanged,
rgNegativePromptChanged,
rgFillChanged,
rgMaskImageUploaded,
rgImageCacheChanged,
rgAutoNegativeChanged,
rgIPAdapterAdded,
rgIPAdapterDeleted,

39
invokeai/frontend/web/src/features/controlLayers/store/layersReducers.ts
View File

@@ -40,7 +40,7 @@ export const layersReducers = {
y: 0,
});
state.selectedEntityIdentifier = { type: 'layer', id };
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
prepare: () => ({ payload: { id: uuidv4() } }),
},
@@ -48,7 +48,7 @@ export const layersReducers = {
const { data } = action.payload;
state.layers.entities.push(data);
state.selectedEntityIdentifier = { type: 'layer', id: data.id };
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerIsEnabledToggled: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
@@ -57,7 +57,7 @@ export const layersReducers = {
return;
}
layer.isEnabled = !layer.isEnabled;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerTranslated: (state, action: PayloadAction<{ id: string; x: number; y: number }>) => {
const { id, x, y } = action.payload;
@@ -67,7 +67,7 @@ export const layersReducers = {
}
layer.x = x;
layer.y = y;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerBboxChanged: (state, action: PayloadAction<{ id: string; bbox: IRect | null }>) => {
const { id, bbox } = action.payload;
@@ -93,16 +93,16 @@ export const layersReducers = {
layer.objects = [];
layer.bbox = null;
layer.bboxNeedsUpdate = false;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerDeleted: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
state.layers.entities = state.layers.entities.filter((l) => l.id !== id);
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerAllDeleted: (state) => {
state.layers.entities = [];
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerOpacityChanged: (state, action: PayloadAction<{ id: string; opacity: number }>) => {
const { id, opacity } = action.payload;
@@ -111,7 +111,7 @@ export const layersReducers = {
return;
}
layer.opacity = opacity;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerMovedForwardOne: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
@@ -120,7 +120,7 @@ export const layersReducers = {
return;
}
moveOneToEnd(state.layers.entities, layer);
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerMovedToFront: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
@@ -129,7 +129,7 @@ export const layersReducers = {
return;
}
moveToEnd(state.layers.entities, layer);
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerMovedBackwardOne: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
@@ -138,7 +138,7 @@ export const layersReducers = {
return;
}
moveOneToStart(state.layers.entities, layer);
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerMovedToBack: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
@@ -147,7 +147,7 @@ export const layersReducers = {
return;
}
moveToStart(state.layers.entities, layer);
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerBrushLineAdded: {
reducer: (state, action: PayloadAction<BrushLineAddedArg & { lineId: string }>) => {
@@ -166,7 +166,7 @@ export const layersReducers = {
clip,
});
layer.bboxNeedsUpdate = true;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
prepare: (payload: BrushLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
@@ -188,7 +188,7 @@ export const layersReducers = {
clip,
});
layer.bboxNeedsUpdate = true;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
prepare: (payload: EraserLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
@@ -206,7 +206,7 @@ export const layersReducers = {
}
lastObject.points.push(...point);
layer.bboxNeedsUpdate = true;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
layerRectAdded: {
reducer: (state, action: PayloadAction<RectShapeAddedArg & { rectId: string }>) => {
@@ -226,7 +226,7 @@ export const layersReducers = {
color,
});
layer.bboxNeedsUpdate = true;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
prepare: (payload: RectShapeAddedArg) => ({ payload: { ...payload, rectId: uuidv4() } }),
},
@@ -239,11 +239,12 @@ export const layersReducers = {
}
layer.objects.push(imageDTOToImageObject(id, objectId, imageDTO));
layer.bboxNeedsUpdate = true;
state.layers.baseLayerImageCache = null;
state.layers.imageCache = null;
},
prepare: (payload: ImageObjectAddedArg) => ({ payload: { ...payload, objectId: uuidv4() } }),
},
baseLayerImageCacheChanged: (state, action: PayloadAction<ImageDTO | null>) => {
state.layers.baseLayerImageCache = action.payload ? imageDTOToImageWithDims(action.payload) : null;
layerImageCacheChanged: (state, action: PayloadAction<{ imageDTO: ImageDTO | null }>) => {
const { imageDTO } = action.payload;
state.layers.imageCache = imageDTO ? imageDTOToImageWithDims(imageDTO) : null;
},
} satisfies SliceCaseReducers<CanvasV2State>;

8
invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts
View File

@@ -1,11 +1,7 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
import { getBrushLineId, getEraserLineId, getRectShapeId } from 'features/controlLayers/konva/naming';
import type {
CanvasV2State,
CLIPVisionModelV2,
IPMethodV2,
} from 'features/controlLayers/store/types';
import type { CanvasV2State, CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import { zModelIdentifierField } from 'features/nodes/types/common';
import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas';
@@ -182,7 +178,7 @@ export const regionsReducers = {
}
rg.fill = fill;
},
rgMaskImageUploaded: (state, action: PayloadAction<{ id: string; imageDTO: ImageDTO }>) => {
rgImageCacheChanged: (state, action: PayloadAction<{ id: string; imageDTO: ImageDTO }>) => {
const { id, imageDTO } = action.payload;
const rg = selectRG(state, id);
if (!rg) {

2
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@@ -797,7 +797,7 @@ export type CanvasV2State = {
selectedEntityIdentifier: CanvasEntityIdentifier | null;
inpaintMask: InpaintMaskEntity;
layers: {
baseLayerImageCache: ImageWithDims | null;
imageCache: ImageWithDims | null;
entities: LayerEntity[];
};
controlAdapters: { entities: ControlAdapterEntity[] };