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): use imperative names for setters in stateapi

Browse Source
This commit is contained in:
psychedelicious 2024-08-05 20:32:09 +10:00
parent 72b5374916
commit 608279487b
8 changed files with 44 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBbox.ts
View File

@ -116,7 +116,7 @@ export class CanvasBbox {
};
this.konva.rect.setAttrs(bboxRect);
if (bbox.rect.x !== bboxRect.x || bbox.rect.y !== bboxRect.y) {
this.manager.stateApi.onBboxTransformed(bboxRect);
this.manager.stateApi.setGenerationBbox(bboxRect);
}
});
@ -196,7 +196,7 @@ export class CanvasBbox {
this.konva.rect.setAttrs({ ...bboxRect, scaleX: 1, scaleY: 1 });
// Update the bbox in internal state.
this.manager.stateApi.onBboxTransformed(bboxRect);
this.manager.stateApi.setGenerationBbox(bboxRect);
// Update the aspect ratio buffer whenever the shift key is not held - this allows for a nice UX where you can start
// a transform, get the right aspect ratio, then hold shift to lock it in.

6
invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts
View File

@ -72,7 +72,7 @@ export class CanvasInpaintMask {
);
});
this.konva.transformer.on('dragend', () => {
this.manager.stateApi.onPosChanged(
this.manager.stateApi.setEntityPosition(
{ id: this.id, position: { x: this.konva.group.x(), y: this.konva.group.y() } },
'inpaint_mask'
);
@ -114,9 +114,9 @@ export class CanvasInpaintMask {
if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'inpaint_mask');
} else if (this.drawingBuffer.type === 'eraser_line') {
this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: this.drawingBuffer }, 'inpaint_mask');
this.manager.stateApi.addEraserLine({ id: this.id, eraserLine: this.drawingBuffer }, 'inpaint_mask');
} else if (this.drawingBuffer.type === 'rect') {
this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: this.drawingBuffer }, 'inpaint_mask');
this.manager.stateApi.addRect({ id: this.id, rectShape: this.drawingBuffer }, 'inpaint_mask');
}
this.setDrawingBuffer(null);
}

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
View File

@ -206,9 +206,9 @@ export class CanvasObjectRenderer {
if (this.buffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.parent.id, brushLine: this.buffer }, 'layer');
} else if (this.buffer.type === 'eraser_line') {
this.manager.stateApi.onEraserLineAdded({ id: this.parent.id, eraserLine: this.buffer }, 'layer');
this.manager.stateApi.addEraserLine({ id: this.parent.id, eraserLine: this.buffer }, 'layer');
} else if (this.buffer.type === 'rect') {
this.manager.stateApi.onRectShapeAdded({ id: this.parent.id, rectShape: this.buffer }, 'layer');
this.manager.stateApi.addRect({ id: this.parent.id, rectShape: this.buffer }, 'layer');
} else {
this.log.warn({ buffer: this.buffer }, 'Invalid buffer object type');
}

6
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRegion.ts
View File

@ -73,7 +73,7 @@ export class CanvasRegion {
);
});
this.konva.transformer.on('dragend', () => {
this.manager.stateApi.onPosChanged(
this.manager.stateApi.setEntityPosition(
{ id: this.id, position: { x: this.konva.group.x(), y: this.konva.group.y() } },
'regional_guidance'
);
@ -114,9 +114,9 @@ export class CanvasRegion {
if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'regional_guidance');
} else if (this.drawingBuffer.type === 'eraser_line') {
this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: this.drawingBuffer }, 'regional_guidance');
this.manager.stateApi.addEraserLine({ id: this.id, eraserLine: this.drawingBuffer }, 'regional_guidance');
} else if (this.drawingBuffer.type === 'rect') {
this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: this.drawingBuffer }, 'regional_guidance');
this.manager.stateApi.addRect({ id: this.id, rectShape: this.drawingBuffer }, 'regional_guidance');
}
this.setDrawingBuffer(null);
}

88
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApi.ts
View File

@ -15,46 +15,37 @@ import {
$stageAttrs,
bboxChanged,
brushWidthChanged,
caBboxChanged,
caScaled,
caTranslated,
entitySelected,
eraserWidthChanged,
imBboxChanged,
imBrushLineAdded,
imEraserLineAdded,
imImageCacheChanged,
imRectShapeAdded,
imScaled,
imTranslated,
layerBboxChanged,
layerBrushLineAdded,
layerEraserLineAdded,
layerImageCacheChanged,
layerRectShapeAdded,
layerReset,
layerTranslated,
rgBboxChanged,
rgBrushLineAdded,
rgEraserLineAdded,
rgImageCacheChanged,
rgRectShapeAdded,
rgScaled,
rgTranslated,
toolBufferChanged,
toolChanged,
} from 'features/controlLayers/store/canvasV2Slice';
import type {
BboxChangedArg,
CanvasBrushLineState,
CanvasEntityState,
CanvasEraserLineState,
CanvasRectState,
PositionChangedArg,
ScaleChangedArg,
Rect,
Tool,
} from 'features/controlLayers/store/types';
import type { IRect } from 'konva/lib/types';
import type { ImageDTO } from 'services/api/types';
const log = logger('canvas');
@ -72,14 +63,14 @@ export class CanvasStateApi {
getState = () => {
return this._store.getState().canvasV2;
};
onEntityReset = (arg: { id: string }, entityType: CanvasEntityState['type']) => {
log.debug('onEntityReset');
resetEntity = (arg: { id: string }, entityType: CanvasEntityState['type']) => {
log.trace({ arg, entityType }, 'Resetting entity');
if (entityType === 'layer') {
this._store.dispatch(layerReset(arg));
}
};
onPosChanged = (arg: PositionChangedArg, entityType: CanvasEntityState['type']) => {
log.debug('onPosChanged');
setEntityPosition = (arg: PositionChangedArg, entityType: CanvasEntityState['type']) => {
log.trace({ arg, entityType }, 'Setting entity position');
if (entityType === 'layer') {
this._store.dispatch(layerTranslated(arg));
} else if (entityType === 'regional_guidance') {
@ -90,30 +81,8 @@ export class CanvasStateApi {
this._store.dispatch(caTranslated(arg));
}
};
onScaleChanged = (arg: ScaleChangedArg, entityType: CanvasEntityState['type']) => {
log.debug('onScaleChanged');
if (entityType === 'inpaint_mask') {
this._store.dispatch(imScaled(arg));
} else if (entityType === 'regional_guidance') {
this._store.dispatch(rgScaled(arg));
} else if (entityType === 'control_adapter') {
this._store.dispatch(caScaled(arg));
}
};
onBboxChanged = (arg: BboxChangedArg, entityType: CanvasEntityState['type']) => {
log.debug('Entity bbox changed');
if (entityType === 'layer') {
this._store.dispatch(layerBboxChanged(arg));
} else if (entityType === 'control_adapter') {
this._store.dispatch(caBboxChanged(arg));
} else if (entityType === 'regional_guidance') {
this._store.dispatch(rgBboxChanged(arg));
} else if (entityType === 'inpaint_mask') {
this._store.dispatch(imBboxChanged(arg));
}
};
onBrushLineAdded = (arg: { id: string; brushLine: CanvasBrushLineState }, entityType: CanvasEntityState['type']) => {
log.debug('Brush line added');
addBrushLine = (arg: { id: string; brushLine: CanvasBrushLineState }, entityType: CanvasEntityState['type']) => {
log.trace({ arg, entityType }, 'Adding brush line');
if (entityType === 'layer') {
this._store.dispatch(layerBrushLineAdded(arg));
} else if (entityType === 'regional_guidance') {
@ -122,11 +91,8 @@ export class CanvasStateApi {
this._store.dispatch(imBrushLineAdded(arg));
}
};
onEraserLineAdded = (
arg: { id: string; eraserLine: CanvasEraserLineState },
entityType: CanvasEntityState['type']
) => {
log.debug('Eraser line added');
addEraserLine = (arg: { id: string; eraserLine: CanvasEraserLineState }, entityType: CanvasEntityState['type']) => {
log.trace({ arg, entityType }, 'Adding eraser line');
if (entityType === 'layer') {
this._store.dispatch(layerEraserLineAdded(arg));
} else if (entityType === 'regional_guidance') {
@ -135,8 +101,8 @@ export class CanvasStateApi {
this._store.dispatch(imEraserLineAdded(arg));
}
};
onRectShapeAdded = (arg: { id: string; rectShape: CanvasRectState }, entityType: CanvasEntityState['type']) => {
log.debug('Rect shape added');
addRect = (arg: { id: string; rectShape: CanvasRectState }, entityType: CanvasEntityState['type']) => {
log.trace({ arg, entityType }, 'Adding rect');
if (entityType === 'layer') {
this._store.dispatch(layerRectShapeAdded(arg));
} else if (entityType === 'regional_guidance') {
@ -145,40 +111,40 @@ export class CanvasStateApi {
this._store.dispatch(imRectShapeAdded(arg));
}
};
onEntitySelected = (arg: { id: string; type: CanvasEntityState['type'] }) => {
log.debug('Entity selected');
setSelectedEntity = (arg: { id: string; type: CanvasEntityState['type'] }) => {
log.trace({ arg }, 'Setting selected entity');
this._store.dispatch(entitySelected(arg));
};
onBboxTransformed = (bbox: IRect) => {
log.debug('Generation bbox transformed');
setGenerationBbox = (bbox: Rect) => {
log.trace({ bbox }, 'Setting generation bbox');
this._store.dispatch(bboxChanged(bbox));
};
onBrushWidthChanged = (width: number) => {
log.debug('Brush width changed');
setBrushWidth = (width: number) => {
log.trace({ width }, 'Setting brush width');
this._store.dispatch(brushWidthChanged(width));
};
onEraserWidthChanged = (width: number) => {
log.debug('Eraser width changed');
setEraserWidth = (width: number) => {
log.trace({ width }, 'Setting eraser width');
this._store.dispatch(eraserWidthChanged(width));
};
onRegionMaskImageCached = (id: string, imageDTO: ImageDTO) => {
log.debug('Region mask image cached');
setRegionMaskImageCache = (id: string, imageDTO: ImageDTO) => {
log.trace({ id, imageDTO }, 'Setting region mask image cache');
this._store.dispatch(rgImageCacheChanged({ id, imageDTO }));
};
onInpaintMaskImageCached = (imageDTO: ImageDTO) => {
log.debug('Inpaint mask image cached');
setInpaintMaskImageCache = (imageDTO: ImageDTO) => {
log.trace({ imageDTO }, 'Setting inpaint mask image cache');
this._store.dispatch(imImageCacheChanged({ imageDTO }));
};
onLayerImageCached = (imageDTO: ImageDTO) => {
log.debug('Layer image cached');
setLayerImageCache = (imageDTO: ImageDTO) => {
log.trace({ imageDTO }, 'Setting layer image cache');
this._store.dispatch(layerImageCacheChanged({ imageDTO }));
};
setTool = (tool: Tool) => {
log.debug('Tool selection changed');
log.trace({ tool }, 'Setting tool');
this._store.dispatch(toolChanged(tool));
};
setToolBuffer = (toolBuffer: Tool | null) => {
log.debug('Tool buffer changed');
log.trace({ toolBuffer }, 'Setting tool buffer');
this._store.dispatch(toolBufferChanged(toolBuffer));
};

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
View File

@ -354,7 +354,7 @@ export class CanvasTransformer {
};
this.log.trace({ position }, 'Position changed');
this.manager.stateApi.onPosChanged({ id: this.parent.id, position }, 'layer');
this.manager.stateApi.setEntityPosition({ id: this.parent.id, position }, 'layer');
});
this.subscriptions.add(
@ -556,7 +556,7 @@ export class CanvasTransformer {
// We shouldn't reset on the first render - the bbox will be calculated on the next render
if (!this.parent.renderer.hasObjects()) {
// The layer is fully transparent but has objects - reset it
this.manager.stateApi.onEntityReset({ id: this.parent.id }, this.parent.type);
this.manager.stateApi.resetEntity({ id: this.parent.id }, this.parent.type);
}
this.syncInteractionState();
return;

4
invokeai/frontend/web/src/features/controlLayers/konva/events.ts
View File

@ -128,8 +128,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
$spaceKey,
getBbox,
getSettings,
onBrushWidthChanged,
onEraserWidthChanged,
setBrushWidth: onBrushWidthChanged,
setEraserWidth: onEraserWidthChanged,
} = stateApi;
function getIsPrimaryMouseDown(e: KonvaEventObject<MouseEvent>) {

6
invokeai/frontend/web/src/features/controlLayers/konva/util.ts
View File

@ -480,7 +480,7 @@ export async function getRegionMaskImage(arg: {
layerClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, `${region.id}_mask.png`, 'mask', true);
manager.stateApi.onRegionMaskImageCached(region.id, imageDTO);
manager.stateApi.setRegionMaskImageCache(region.id, imageDTO);
return imageDTO;
}
@ -568,7 +568,7 @@ export async function getInpaintMaskImage(arg: {
layerClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, 'inpaint_mask.png', 'mask', true);
manager.stateApi.onInpaintMaskImageCached(imageDTO);
manager.stateApi.setInpaintMaskImageCache(imageDTO);
return imageDTO;
}
@ -598,7 +598,7 @@ export async function getCompositeLayerImage(arg: {
stageClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, 'base_layer.png', 'general', true);
manager.stateApi.onLayerImageCached(imageDTO);
manager.stateApi.setLayerImageCache(imageDTO);
return imageDTO;
}