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); this.konva.rect.setAttrs(bboxRect);
if (bbox.rect.x !== bboxRect.x || bbox.rect.y !== bboxRect.y) { 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 }); this.konva.rect.setAttrs({ ...bboxRect, scaleX: 1, scaleY: 1 });
// Update the bbox in internal state. // 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 // 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. // 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.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() } }, { id: this.id, position: { x: this.konva.group.x(), y: this.konva.group.y() } },
'inpaint_mask' 'inpaint_mask'
); );
@ -114,9 +114,9 @@ export class CanvasInpaintMask {
if (this.drawingBuffer.type === 'brush_line') { if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'inpaint_mask'); this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'inpaint_mask');
} else if (this.drawingBuffer.type === 'eraser_line') { } 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') { } 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); 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') { if (this.buffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.parent.id, brushLine: this.buffer }, 'layer'); this.manager.stateApi.onBrushLineAdded({ id: this.parent.id, brushLine: this.buffer }, 'layer');
} else if (this.buffer.type === 'eraser_line') { } 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') { } 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 { } else {
this.log.warn({ buffer: this.buffer }, 'Invalid buffer object type'); 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.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() } }, { id: this.id, position: { x: this.konva.group.x(), y: this.konva.group.y() } },
'regional_guidance' 'regional_guidance'
); );
@ -114,9 +114,9 @@ export class CanvasRegion {
if (this.drawingBuffer.type === 'brush_line') { if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'regional_guidance'); this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'regional_guidance');
} else if (this.drawingBuffer.type === 'eraser_line') { } 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') { } 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); this.setDrawingBuffer(null);
} }

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

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

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

@ -128,8 +128,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
$spaceKey, $spaceKey,
getBbox, getBbox,
getSettings, getSettings,
onBrushWidthChanged, setBrushWidth: onBrushWidthChanged,
onEraserWidthChanged, setEraserWidth: onEraserWidthChanged,
} = stateApi; } = stateApi;
function getIsPrimaryMouseDown(e: KonvaEventObject<MouseEvent>) { 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(); layerClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, `${region.id}_mask.png`, 'mask', true); 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; return imageDTO;
} }
@ -568,7 +568,7 @@ export async function getInpaintMaskImage(arg: {
layerClone.destroy(); layerClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, 'inpaint_mask.png', 'mask', true); const imageDTO = await manager.util.uploadImage(blob, 'inpaint_mask.png', 'mask', true);
manager.stateApi.onInpaintMaskImageCached(imageDTO); manager.stateApi.setInpaintMaskImageCache(imageDTO);
return imageDTO; return imageDTO;
} }
@ -598,7 +598,7 @@ export async function getCompositeLayerImage(arg: {
stageClone.destroy(); stageClone.destroy();
const imageDTO = await manager.util.uploadImage(blob, 'base_layer.png', 'general', true); const imageDTO = await manager.util.uploadImage(blob, 'base_layer.png', 'general', true);
manager.stateApi.onLayerImageCached(imageDTO); manager.stateApi.setLayerImageCache(imageDTO);
return imageDTO; return imageDTO;
} }