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

fix(ui): fiddle with control adapter filters

Browse Source 
some jank still
This commit is contained in:
psychedelicious 2024-07-05 19:15:36 +10:00
parent e66ef2e25e
commit 8d2f056407
4 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAOpacityAndFilter.tsx
View File

@ -32,7 +32,9 @@ export const CAOpacityAndFilter = memo(({ id }: Props) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const opacity = useAppSelector((s) => Math.round(selectCAOrThrow(s.canvasV2, id).opacity * 100));
const isFilterEnabled = useAppSelector((s) => selectCAOrThrow(s.canvasV2, id).filter === 'LightnessToAlphaFilter');
const isFilterEnabled = useAppSelector((s) =>
selectCAOrThrow(s.canvasV2, id).filters.includes('LightnessToAlphaFilter')
);
const onChangeOpacity = useCallback(
(v: number) => {
dispatch(caOpacityChanged({ id, opacity: v / 100 }));
@ -41,7 +43,7 @@ export const CAOpacityAndFilter = memo(({ id }: Props) => {
);
const onChangeFilter = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
dispatch(caFilterChanged({ id, filter: e.target.checked ? 'LightnessToAlphaFilter' : 'none' }));
dispatch(caFilterChanged({ id, filters: e.target.checked ? ['LightnessToAlphaFilter'] : [] }));
},
[dispatch, id]
);

17
invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
View File

@ -86,10 +86,16 @@ export class CanvasImage {
image: imageEl,
width,
height,
filters: filters.map((f) => FILTER_MAP[f]),
});
this.konvaImageGroup.add(this.konvaImage);
}
if (filters.length > 0) {
this.konvaImage.cache();
this.konvaImage.filters(filters.map((f) => FILTER_MAP[f]));
} else {
this.konvaImage.clearCache();
this.konvaImage.filters([]);
}
this.imageName = imageName;
this.isLoading = false;
this.isError = false;
@ -144,7 +150,14 @@ export class CanvasImage {
if (this.lastImageObject.image.name !== image.name || force) {
await this.updateImageSource(image.name);
}
this.konvaImage?.setAttrs({ x, y, width, height, filters: filters.map((f) => FILTER_MAP[f]) });
this.konvaImage?.setAttrs({ x, y, width, height });
if (filters.length > 0) {
this.konvaImage?.cache();
this.konvaImage?.filters(filters.map((f) => FILTER_MAP[f]));
} else {
this.konvaImage?.clearCache();
this.konvaImage?.filters([]);
}
this.konvaPlaceholderRect.setAttrs({ width, height });
this.konvaPlaceholderText.setAttrs({ width, height, fontSize: width / 16 });
this.lastImageObject = imageObject;

18
invokeai/frontend/web/src/features/controlLayers/store/controlAdaptersReducers.ts
View File

@ -41,7 +41,7 @@ export const controlAdaptersReducers = {
bboxNeedsUpdate: false,
isEnabled: true,
opacity: 1,
filter: 'LightnessToAlphaFilter',
filters: ['LightnessToAlphaFilter'],
processorPendingBatchId: null,
...config,
});
@ -164,7 +164,7 @@ export const controlAdaptersReducers = {
ca.bboxNeedsUpdate = true;
ca.isEnabled = true;
if (imageDTO) {
const newImageObject = imageDTOToImageObject(id, objectId, imageDTO, { filters: ca.filter ? [ca.filter] : [] });
const newImageObject = imageDTOToImageObject(id, objectId, imageDTO, { filters: ca.filters });
if (isEqual(newImageObject, ca.imageObject)) {
return;
}
@ -188,7 +188,7 @@ export const controlAdaptersReducers = {
ca.bboxNeedsUpdate = true;
ca.isEnabled = true;
ca.processedImageObject = imageDTO
? imageDTOToImageObject(id, objectId, imageDTO, { filters: ca.filter ? [ca.filter] : [] })
? imageDTOToImageObject(id, objectId, imageDTO, { filters: ca.filters })
: null;
},
prepare: (payload: { id: string; imageDTO: ImageDTO | null }) => ({ payload: { ...payload, objectId: uuidv4() } }),
@ -248,13 +248,19 @@ export const controlAdaptersReducers = {
ca.processedImageObject = null;
}
},
caFilterChanged: (state, action: PayloadAction<{ id: string; filter: Filter }>) => {
const { id, filter } = action.payload;
caFilterChanged: (state, action: PayloadAction<{ id: string; filters: Filter[] }>) => {
const { id, filters } = action.payload;
const ca = selectCA(state, id);
if (!ca) {
return;
}
ca.filter = filter;
ca.filters = filters;
if (ca.imageObject) {
ca.imageObject.filters = filters;
}
if (ca.processedImageObject) {
ca.processedImageObject.filters = filters;
}
},
caProcessorPendingBatchIdChanged: (state, action: PayloadAction<{ id: string; batchId: string | null }>) => {
const { id, batchId } = action.payload;

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

@ -677,7 +677,7 @@ const zControlAdapterEntityBase = z.object({
bbox: zRect.nullable(),
bboxNeedsUpdate: z.boolean(),
opacity: zOpacity,
filter: zFilter,
filters: z.array(zFilter),
weight: z.number().gte(-1).lte(2),
imageObject: zImageObject.nullable(),
processedImageObject: zImageObject.nullable(),