tidy(ui): removed unused state related to non-buffered drawing

This commit is contained in:
psychedelicious 2024-07-05 17:36:16 +10:00
parent 0aa4568fd4
commit a18878474b
8 changed files with 45 additions and 350 deletions

View File

@ -90,11 +90,11 @@ export class CanvasInpaintMask {
return; return;
} }
if (this.drawingBuffer.type === 'brush_line') { if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded2({ 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.onEraserLineAdded2({ id: this.id, eraserLine: this.drawingBuffer }, 'inpaint_mask'); this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: this.drawingBuffer }, 'inpaint_mask');
} else if (this.drawingBuffer.type === 'rect_shape') { } else if (this.drawingBuffer.type === 'rect_shape') {
this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'inpaint_mask'); this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: this.drawingBuffer }, 'inpaint_mask');
} }
this.setDrawingBuffer(null); this.setDrawingBuffer(null);
} }

View File

@ -85,11 +85,11 @@ export class CanvasLayer {
return; return;
} }
if (this.drawingBuffer.type === 'brush_line') { if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded2({ id: this.id, brushLine: this.drawingBuffer }, 'layer'); this.manager.stateApi.onBrushLineAdded({ id: this.id, brushLine: this.drawingBuffer }, 'layer');
} else if (this.drawingBuffer.type === 'eraser_line') { } else if (this.drawingBuffer.type === 'eraser_line') {
this.manager.stateApi.onEraserLineAdded2({ id: this.id, eraserLine: this.drawingBuffer }, 'layer'); this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: this.drawingBuffer }, 'layer');
} else if (this.drawingBuffer.type === 'rect_shape') { } else if (this.drawingBuffer.type === 'rect_shape') {
this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'layer'); this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: this.drawingBuffer }, 'layer');
} }
this.setDrawingBuffer(null); this.setDrawingBuffer(null);
} }

View File

@ -90,11 +90,11 @@ export class CanvasRegion {
return; return;
} }
if (this.drawingBuffer.type === 'brush_line') { if (this.drawingBuffer.type === 'brush_line') {
this.manager.stateApi.onBrushLineAdded2({ 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.onEraserLineAdded2({ id: this.id, eraserLine: this.drawingBuffer }, 'regional_guidance'); this.manager.stateApi.onEraserLineAdded({ id: this.id, eraserLine: this.drawingBuffer }, 'regional_guidance');
} else if (this.drawingBuffer.type === 'rect_shape') { } else if (this.drawingBuffer.type === 'rect_shape') {
this.manager.stateApi.onRectShapeAdded2({ id: this.id, rectShape: this.drawingBuffer }, 'regional_guidance'); this.manager.stateApi.onRectShapeAdded({ id: this.id, rectShape: this.drawingBuffer }, 'regional_guidance');
} }
this.setDrawingBuffer(null); this.setDrawingBuffer(null);
} }

View File

@ -15,39 +15,28 @@ import {
bboxChanged, bboxChanged,
brushWidthChanged, brushWidthChanged,
caBboxChanged, caBboxChanged,
caScaled,
caTranslated, caTranslated,
eraserWidthChanged, eraserWidthChanged,
imBboxChanged, imBboxChanged,
imBrushLineAdded, imBrushLineAdded,
imBrushLineAdded2,
imEraserLineAdded, imEraserLineAdded,
imEraserLineAdded2,
imImageCacheChanged, imImageCacheChanged,
imLinePointAdded, imRectShapeAdded,
imRectAdded,
imRectShapeAdded2,
imScaled, imScaled,
imTranslated, imTranslated,
layerBboxChanged, layerBboxChanged,
layerBrushLineAdded, layerBrushLineAdded,
layerBrushLineAdded2,
layerEraserLineAdded, layerEraserLineAdded,
layerEraserLineAdded2,
layerImageCacheChanged, layerImageCacheChanged,
layerLinePointAdded, layerRectShapeAdded,
layerRectAdded,
layerRectShapeAdded2,
layerScaled, layerScaled,
layerTranslated, layerTranslated,
rgBboxChanged, rgBboxChanged,
rgBrushLineAdded, rgBrushLineAdded,
rgBrushLineAdded2,
rgEraserLineAdded, rgEraserLineAdded,
rgEraserLineAdded2,
rgImageCacheChanged, rgImageCacheChanged,
rgLinePointAdded, rgRectShapeAdded,
rgRectAdded,
rgRectShapeAdded2,
rgScaled, rgScaled,
rgTranslated, rgTranslated,
toolBufferChanged, toolBufferChanged,
@ -56,14 +45,10 @@ import {
import type { import type {
BboxChangedArg, BboxChangedArg,
BrushLine, BrushLine,
BrushLineAddedArg,
CanvasEntity, CanvasEntity,
EraserLine, EraserLine,
EraserLineAddedArg,
PointAddedToLineArg,
PosChangedArg, PosChangedArg,
RectShape, RectShape,
RectShapeAddedArg,
ScaleChangedArg, ScaleChangedArg,
Tool, Tool,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
@ -89,12 +74,12 @@ export class CanvasStateApi {
log.debug('onPosChanged'); log.debug('onPosChanged');
if (entityType === 'layer') { if (entityType === 'layer') {
this.store.dispatch(layerTranslated(arg)); this.store.dispatch(layerTranslated(arg));
} else if (entityType === 'control_adapter') {
this.store.dispatch(caTranslated(arg));
} else if (entityType === 'regional_guidance') { } else if (entityType === 'regional_guidance') {
this.store.dispatch(rgTranslated(arg)); this.store.dispatch(rgTranslated(arg));
} else if (entityType === 'inpaint_mask') { } else if (entityType === 'inpaint_mask') {
this.store.dispatch(imTranslated(arg)); this.store.dispatch(imTranslated(arg));
} else if (entityType === 'control_adapter') {
this.store.dispatch(caTranslated(arg));
} }
}; };
onScaleChanged = (arg: ScaleChangedArg, entityType: CanvasEntity['type']) => { onScaleChanged = (arg: ScaleChangedArg, entityType: CanvasEntity['type']) => {
@ -105,6 +90,8 @@ export class CanvasStateApi {
this.store.dispatch(imScaled(arg)); this.store.dispatch(imScaled(arg));
} else if (entityType === 'regional_guidance') { } else if (entityType === 'regional_guidance') {
this.store.dispatch(rgScaled(arg)); this.store.dispatch(rgScaled(arg));
} else if (entityType === 'control_adapter') {
this.store.dispatch(caScaled(arg));
} }
}; };
onBboxChanged = (arg: BboxChangedArg, entityType: CanvasEntity['type']) => { onBboxChanged = (arg: BboxChangedArg, entityType: CanvasEntity['type']) => {
@ -119,7 +106,7 @@ export class CanvasStateApi {
this.store.dispatch(imBboxChanged(arg)); this.store.dispatch(imBboxChanged(arg));
} }
}; };
onBrushLineAdded = (arg: BrushLineAddedArg, entityType: CanvasEntity['type']) => { onBrushLineAdded = (arg: { id: string; brushLine: BrushLine }, entityType: CanvasEntity['type']) => {
log.debug('Brush line added'); log.debug('Brush line added');
if (entityType === 'layer') { if (entityType === 'layer') {
this.store.dispatch(layerBrushLineAdded(arg)); this.store.dispatch(layerBrushLineAdded(arg));
@ -129,7 +116,7 @@ export class CanvasStateApi {
this.store.dispatch(imBrushLineAdded(arg)); this.store.dispatch(imBrushLineAdded(arg));
} }
}; };
onEraserLineAdded = (arg: EraserLineAddedArg, entityType: CanvasEntity['type']) => { onEraserLineAdded = (arg: { id: string; eraserLine: EraserLine }, entityType: CanvasEntity['type']) => {
log.debug('Eraser line added'); log.debug('Eraser line added');
if (entityType === 'layer') { if (entityType === 'layer') {
this.store.dispatch(layerEraserLineAdded(arg)); this.store.dispatch(layerEraserLineAdded(arg));
@ -139,54 +126,14 @@ export class CanvasStateApi {
this.store.dispatch(imEraserLineAdded(arg)); this.store.dispatch(imEraserLineAdded(arg));
} }
}; };
onBrushLineAdded2 = (arg: { id: string; brushLine: BrushLine }, entityType: CanvasEntity['type']) => { onRectShapeAdded = (arg: { id: string; rectShape: RectShape }, entityType: CanvasEntity['type']) => {
log.debug('Brush line added');
if (entityType === 'layer') {
this.store.dispatch(layerBrushLineAdded2(arg));
} else if (entityType === 'regional_guidance') {
this.store.dispatch(rgBrushLineAdded2(arg));
} else if (entityType === 'inpaint_mask') {
this.store.dispatch(imBrushLineAdded2(arg));
}
};
onEraserLineAdded2 = (arg: { id: string; eraserLine: EraserLine }, entityType: CanvasEntity['type']) => {
log.debug('Eraser line added');
if (entityType === 'layer') {
this.store.dispatch(layerEraserLineAdded2(arg));
} else if (entityType === 'regional_guidance') {
this.store.dispatch(rgEraserLineAdded2(arg));
} else if (entityType === 'inpaint_mask') {
this.store.dispatch(imEraserLineAdded2(arg));
}
};
onPointAddedToLine = (arg: PointAddedToLineArg, entityType: CanvasEntity['type']) => {
log.debug('Point added to line');
if (entityType === 'layer') {
this.store.dispatch(layerLinePointAdded(arg));
} else if (entityType === 'regional_guidance') {
this.store.dispatch(rgLinePointAdded(arg));
} else if (entityType === 'inpaint_mask') {
this.store.dispatch(imLinePointAdded(arg));
}
};
onRectShapeAdded = (arg: RectShapeAddedArg, entityType: CanvasEntity['type']) => {
log.debug('Rect shape added'); log.debug('Rect shape added');
if (entityType === 'layer') { if (entityType === 'layer') {
this.store.dispatch(layerRectAdded(arg)); this.store.dispatch(layerRectShapeAdded(arg));
} else if (entityType === 'regional_guidance') { } else if (entityType === 'regional_guidance') {
this.store.dispatch(rgRectAdded(arg)); this.store.dispatch(rgRectShapeAdded(arg));
} else if (entityType === 'inpaint_mask') { } else if (entityType === 'inpaint_mask') {
this.store.dispatch(imRectAdded(arg)); this.store.dispatch(imRectShapeAdded(arg));
}
};
onRectShapeAdded2 = (arg: { id: string; rectShape: RectShape }, entityType: CanvasEntity['type']) => {
log.debug('Rect shape added');
if (entityType === 'layer') {
this.store.dispatch(layerRectShapeAdded2(arg));
} else if (entityType === 'regional_guidance') {
this.store.dispatch(rgRectShapeAdded2(arg));
} else if (entityType === 'inpaint_mask') {
this.store.dispatch(imRectShapeAdded2(arg));
} }
}; };
onBboxTransformed = (bbox: IRect) => { onBboxTransformed = (bbox: IRect) => {

View File

@ -209,14 +209,13 @@ export const {
layerOpacityChanged, layerOpacityChanged,
layerTranslated, layerTranslated,
layerBboxChanged, layerBboxChanged,
layerBrushLineAdded,
layerEraserLineAdded,
layerLinePointAdded,
layerRectAdded,
layerImageAdded, layerImageAdded,
layerAllDeleted, layerAllDeleted,
layerImageCacheChanged, layerImageCacheChanged,
layerScaled, layerScaled,
layerBrushLineAdded,
layerEraserLineAdded,
layerRectShapeAdded,
// IP Adapters // IP Adapters
ipaAdded, ipaAdded,
ipaRecalled, ipaRecalled,
@ -251,6 +250,7 @@ export const {
caProcessorPendingBatchIdChanged, caProcessorPendingBatchIdChanged,
caWeightChanged, caWeightChanged,
caBeginEndStepPctChanged, caBeginEndStepPctChanged,
caScaled,
// Regions // Regions
rgAdded, rgAdded,
rgRecalled, rgRecalled,
@ -277,11 +277,10 @@ export const {
rgIPAdapterMethodChanged, rgIPAdapterMethodChanged,
rgIPAdapterModelChanged, rgIPAdapterModelChanged,
rgIPAdapterCLIPVisionModelChanged, rgIPAdapterCLIPVisionModelChanged,
rgScaled,
rgBrushLineAdded, rgBrushLineAdded,
rgEraserLineAdded, rgEraserLineAdded,
rgLinePointAdded, rgRectShapeAdded,
rgRectAdded,
rgScaled,
// Compositing // Compositing
setInfillMethod, setInfillMethod,
setInfillTileSize, setInfillTileSize,
@ -334,11 +333,10 @@ export const {
imBboxChanged, imBboxChanged,
imFillChanged, imFillChanged,
imImageCacheChanged, imImageCacheChanged,
imScaled,
imBrushLineAdded, imBrushLineAdded,
imEraserLineAdded, imEraserLineAdded,
imLinePointAdded, imRectShapeAdded,
imRectAdded,
imScaled,
// Staging // Staging
stagingAreaStartedStaging, stagingAreaStartedStaging,
stagingAreaImageAdded, stagingAreaImageAdded,
@ -347,15 +345,6 @@ export const {
stagingAreaCanceledStaging, stagingAreaCanceledStaging,
stagingAreaNextImageSelected, stagingAreaNextImageSelected,
stagingAreaPreviousImageSelected, stagingAreaPreviousImageSelected,
layerBrushLineAdded2,
layerEraserLineAdded2,
layerRectShapeAdded2,
rgBrushLineAdded2,
rgEraserLineAdded2,
rgRectShapeAdded2,
imBrushLineAdded2,
imEraserLineAdded2,
imRectShapeAdded2,
} = canvasV2Slice.actions; } = canvasV2Slice.actions;
export const selectCanvasV2Slice = (state: RootState) => state.canvasV2; export const selectCanvasV2Slice = (state: RootState) => state.canvasV2;

View File

@ -1,5 +1,4 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { getBrushLineId, getEraserLineId, getRectShapeId } from 'features/controlLayers/konva/naming';
import type { import type {
BrushLine, BrushLine,
CanvasV2State, CanvasV2State,
@ -8,13 +7,11 @@ import type {
RectShape, RectShape,
ScaleChangedArg, ScaleChangedArg,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
import { imageDTOToImageWithDims, RGBA_RED } from 'features/controlLayers/store/types'; import { imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import type { ImageDTO } from 'services/api/types'; import type { ImageDTO } from 'services/api/types';
import { v4 as uuidv4 } from 'uuid';
import type { BrushLineAddedArg, EraserLineAddedArg, PointAddedToLineArg, RectShapeAddedArg, RgbColor } from './types'; import type { RgbColor } from './types';
import { isLine } from './types';
export const inpaintMaskReducers = { export const inpaintMaskReducers = {
imReset: (state) => { imReset: (state) => {
@ -70,85 +67,22 @@ export const inpaintMaskReducers = {
const { imageDTO } = action.payload; const { imageDTO } = action.payload;
state.inpaintMask.imageCache = imageDTO ? imageDTOToImageWithDims(imageDTO) : null; state.inpaintMask.imageCache = imageDTO ? imageDTOToImageWithDims(imageDTO) : null;
}, },
imBrushLineAdded: { imBrushLineAdded: (state, action: PayloadAction<{ brushLine: BrushLine }>) => {
reducer: (state, action: PayloadAction<Omit<BrushLineAddedArg, 'id'> & { lineId: string }>) => {
const { points, lineId, width, clip } = action.payload;
state.inpaintMask.objects.push({
id: getBrushLineId(state.inpaintMask.id, lineId),
type: 'brush_line',
points,
strokeWidth: width,
color: RGBA_RED,
clip,
});
state.inpaintMask.bboxNeedsUpdate = true;
state.inpaintMask.imageCache = null;
},
prepare: (payload: Omit<BrushLineAddedArg, 'id'>) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
imBrushLineAdded2: (state, action: PayloadAction<{ brushLine: BrushLine }>) => {
const { brushLine } = action.payload; const { brushLine } = action.payload;
state.inpaintMask.objects.push(brushLine); state.inpaintMask.objects.push(brushLine);
state.inpaintMask.bboxNeedsUpdate = true; state.inpaintMask.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
imEraserLineAdded2: (state, action: PayloadAction<{ eraserLine: EraserLine }>) => { imEraserLineAdded: (state, action: PayloadAction<{ eraserLine: EraserLine }>) => {
const { eraserLine } = action.payload; const { eraserLine } = action.payload;
state.inpaintMask.objects.push(eraserLine); state.inpaintMask.objects.push(eraserLine);
state.inpaintMask.bboxNeedsUpdate = true; state.inpaintMask.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
imRectShapeAdded2: (state, action: PayloadAction<{ rectShape: RectShape }>) => { imRectShapeAdded: (state, action: PayloadAction<{ rectShape: RectShape }>) => {
const { rectShape } = action.payload; const { rectShape } = action.payload;
state.inpaintMask.objects.push(rectShape); state.inpaintMask.objects.push(rectShape);
state.inpaintMask.bboxNeedsUpdate = true; state.inpaintMask.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
imEraserLineAdded: {
reducer: (state, action: PayloadAction<Omit<EraserLineAddedArg, 'id'> & { lineId: string }>) => {
const { points, lineId, width, clip } = action.payload;
state.inpaintMask.objects.push({
id: getEraserLineId(state.inpaintMask.id, lineId),
type: 'eraser_line',
points,
strokeWidth: width,
clip,
});
state.inpaintMask.bboxNeedsUpdate = true;
state.inpaintMask.imageCache = null;
},
prepare: (payload: Omit<EraserLineAddedArg, 'id'>) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
imLinePointAdded: (state, action: PayloadAction<Omit<PointAddedToLineArg, 'id'>>) => {
const { point } = action.payload;
const lastObject = state.inpaintMask.objects[state.inpaintMask.objects.length - 1];
if (!lastObject || !isLine(lastObject)) {
return;
}
lastObject.points.push(...point);
state.inpaintMask.bboxNeedsUpdate = true;
state.inpaintMask.imageCache = null;
},
imRectAdded: {
reducer: (state, action: PayloadAction<Omit<RectShapeAddedArg, 'id'> & { rectId: string }>) => {
const { rect, rectId } = action.payload;
if (rect.height === 0 || rect.width === 0) {
// Ignore zero-area rectangles
return;
}
state.inpaintMask.objects.push({
type: 'rect_shape',
id: getRectShapeId(state.inpaintMask.id, rectId),
...rect,
color: RGBA_RED,
});
state.inpaintMask.bboxNeedsUpdate = true;
state.inpaintMask.imageCache = null;
},
prepare: (payload: Omit<RectShapeAddedArg, 'id'>) => ({ payload: { ...payload, rectId: uuidv4() } }),
},
} satisfies SliceCaseReducers<CanvasV2State>; } satisfies SliceCaseReducers<CanvasV2State>;

View File

@ -1,6 +1,5 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils'; import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
import { getBrushLineId, getEraserLineId, getRectShapeId } from 'features/controlLayers/konva/naming';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import type { ImageDTO } from 'services/api/types'; import type { ImageDTO } from 'services/api/types';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
@ -8,18 +7,14 @@ import { v4 as uuidv4 } from 'uuid';
import type { import type {
BrushLine, BrushLine,
BrushLineAddedArg,
CanvasV2State, CanvasV2State,
EraserLine, EraserLine,
EraserLineAddedArg,
ImageObjectAddedArg, ImageObjectAddedArg,
LayerEntity, LayerEntity,
PointAddedToLineArg,
RectShape, RectShape,
RectShapeAddedArg,
ScaleChangedArg, ScaleChangedArg,
} from './types'; } from './types';
import { imageDTOToImageObject, imageDTOToImageWithDims, isLine } from './types'; import { imageDTOToImageObject, imageDTOToImageWithDims } from './types';
export const selectLayer = (state: CanvasV2State, id: string) => state.layers.entities.find((layer) => layer.id === id); export const selectLayer = (state: CanvasV2State, id: string) => state.layers.entities.find((layer) => layer.id === id);
export const selectLayerOrThrow = (state: CanvasV2State, id: string) => { export const selectLayerOrThrow = (state: CanvasV2State, id: string) => {
@ -155,7 +150,7 @@ export const layersReducers = {
moveToStart(state.layers.entities, layer); moveToStart(state.layers.entities, layer);
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
layerBrushLineAdded2: (state, action: PayloadAction<{ id: string; brushLine: BrushLine }>) => { layerBrushLineAdded: (state, action: PayloadAction<{ id: string; brushLine: BrushLine }>) => {
const { id, brushLine } = action.payload; const { id, brushLine } = action.payload;
const layer = selectLayer(state, id); const layer = selectLayer(state, id);
if (!layer) { if (!layer) {
@ -166,7 +161,7 @@ export const layersReducers = {
layer.bboxNeedsUpdate = true; layer.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
layerEraserLineAdded2: (state, action: PayloadAction<{ id: string; eraserLine: EraserLine }>) => { layerEraserLineAdded: (state, action: PayloadAction<{ id: string; eraserLine: EraserLine }>) => {
const { id, eraserLine } = action.payload; const { id, eraserLine } = action.payload;
const layer = selectLayer(state, id); const layer = selectLayer(state, id);
if (!layer) { if (!layer) {
@ -177,7 +172,7 @@ export const layersReducers = {
layer.bboxNeedsUpdate = true; layer.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
layerRectShapeAdded2: (state, action: PayloadAction<{ id: string; rectShape: RectShape }>) => { layerRectShapeAdded: (state, action: PayloadAction<{ id: string; rectShape: RectShape }>) => {
const { id, rectShape } = action.payload; const { id, rectShape } = action.payload;
const layer = selectLayer(state, id); const layer = selectLayer(state, id);
if (!layer) { if (!layer) {
@ -188,29 +183,6 @@ export const layersReducers = {
layer.bboxNeedsUpdate = true; layer.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
layerBrushLineAdded: {
reducer: (state, action: PayloadAction<BrushLineAddedArg & { lineId: string }>) => {
const { id, points, lineId, color, width, clip } = action.payload;
const layer = selectLayer(state, id);
if (!layer) {
return;
}
layer.objects.push({
id: getBrushLineId(id, lineId),
type: 'brush_line',
points,
strokeWidth: width,
color,
clip,
});
layer.bboxNeedsUpdate = true;
state.layers.imageCache = null;
},
prepare: (payload: BrushLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
layerScaled: (state, action: PayloadAction<ScaleChangedArg>) => { layerScaled: (state, action: PayloadAction<ScaleChangedArg>) => {
const { id, scale, x, y } = action.payload; const { id, scale, x, y } = action.payload;
const layer = selectLayer(state, id); const layer = selectLayer(state, id);
@ -241,64 +213,6 @@ export const layersReducers = {
layer.bboxNeedsUpdate = true; layer.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
layerEraserLineAdded: {
reducer: (state, action: PayloadAction<EraserLineAddedArg & { lineId: string }>) => {
const { id, points, lineId, width, clip } = action.payload;
const layer = selectLayer(state, id);
if (!layer) {
return;
}
layer.objects.push({
id: getEraserLineId(id, lineId),
type: 'eraser_line',
points,
strokeWidth: width,
clip,
});
layer.bboxNeedsUpdate = true;
state.layers.imageCache = null;
},
prepare: (payload: EraserLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
layerLinePointAdded: (state, action: PayloadAction<PointAddedToLineArg>) => {
const { id, point } = action.payload;
const layer = selectLayer(state, id);
if (!layer) {
return;
}
const lastObject = layer.objects[layer.objects.length - 1];
if (!lastObject || !isLine(lastObject)) {
return;
}
lastObject.points.push(...point);
layer.bboxNeedsUpdate = true;
state.layers.imageCache = null;
},
layerRectAdded: {
reducer: (state, action: PayloadAction<RectShapeAddedArg & { rectId: string }>) => {
const { id, rect, rectId, color } = action.payload;
if (rect.height === 0 || rect.width === 0) {
// Ignore zero-area rectangles
return;
}
const layer = selectLayer(state, id);
if (!layer) {
return;
}
layer.objects.push({
type: 'rect_shape',
id: getRectShapeId(id, rectId),
...rect,
color,
});
layer.bboxNeedsUpdate = true;
state.layers.imageCache = null;
},
prepare: (payload: RectShapeAddedArg) => ({ payload: { ...payload, rectId: uuidv4() } }),
},
layerImageAdded: { layerImageAdded: {
reducer: ( reducer: (
state, state,

View File

@ -1,6 +1,5 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils'; import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
import { getBrushLineId, getEraserLineId, getRectShapeId } from 'features/controlLayers/konva/naming';
import type { import type {
BrushLine, BrushLine,
CanvasV2State, CanvasV2State,
@ -10,7 +9,7 @@ import type {
RectShape, RectShape,
ScaleChangedArg, ScaleChangedArg,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
import { imageDTOToImageObject, imageDTOToImageWithDims, RGBA_RED } from 'features/controlLayers/store/types'; import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import { zModelIdentifierField } from 'features/nodes/types/common'; import { zModelIdentifierField } from 'features/nodes/types/common';
import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas'; import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
@ -19,16 +18,7 @@ import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import type { import type { IPAdapterEntity, RegionEntity, RgbColor } from './types';
BrushLineAddedArg,
EraserLineAddedArg,
IPAdapterEntity,
PointAddedToLineArg,
RectShapeAddedArg,
RegionEntity,
RgbColor,
} from './types';
import { isLine } from './types';
export const selectRG = (state: CanvasV2State, id: string) => state.regions.entities.find((rg) => rg.id === id); export const selectRG = (state: CanvasV2State, id: string) => state.regions.entities.find((rg) => rg.id === id);
export const selectRGOrThrow = (state: CanvasV2State, id: string) => { export const selectRGOrThrow = (state: CanvasV2State, id: string) => {
@ -340,29 +330,7 @@ export const regionsReducers = {
} }
ipa.clipVisionModel = clipVisionModel; ipa.clipVisionModel = clipVisionModel;
}, },
rgBrushLineAdded: { rgBrushLineAdded: (state, action: PayloadAction<{ id: string; brushLine: BrushLine }>) => {
reducer: (state, action: PayloadAction<BrushLineAddedArg & { lineId: string }>) => {
const { id, points, lineId, width, clip } = action.payload;
const rg = selectRG(state, id);
if (!rg) {
return;
}
rg.objects.push({
id: getBrushLineId(id, lineId),
type: 'brush_line',
points,
strokeWidth: width,
color: RGBA_RED,
clip,
});
rg.bboxNeedsUpdate = true;
rg.imageCache = null;
},
prepare: (payload: BrushLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
rgBrushLineAdded2: (state, action: PayloadAction<{ id: string; brushLine: BrushLine }>) => {
const { id, brushLine } = action.payload; const { id, brushLine } = action.payload;
const rg = selectRG(state, id); const rg = selectRG(state, id);
if (!rg) { if (!rg) {
@ -373,7 +341,7 @@ export const regionsReducers = {
rg.bboxNeedsUpdate = true; rg.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
rgEraserLineAdded2: (state, action: PayloadAction<{ id: string; eraserLine: EraserLine }>) => { rgEraserLineAdded: (state, action: PayloadAction<{ id: string; eraserLine: EraserLine }>) => {
const { id, eraserLine } = action.payload; const { id, eraserLine } = action.payload;
const rg = selectRG(state, id); const rg = selectRG(state, id);
if (!rg) { if (!rg) {
@ -384,7 +352,7 @@ export const regionsReducers = {
rg.bboxNeedsUpdate = true; rg.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
rgRectShapeAdded2: (state, action: PayloadAction<{ id: string; rectShape: RectShape }>) => { rgRectShapeAdded: (state, action: PayloadAction<{ id: string; rectShape: RectShape }>) => {
const { id, rectShape } = action.payload; const { id, rectShape } = action.payload;
const rg = selectRG(state, id); const rg = selectRG(state, id);
if (!rg) { if (!rg) {
@ -395,61 +363,4 @@ export const regionsReducers = {
rg.bboxNeedsUpdate = true; rg.bboxNeedsUpdate = true;
state.layers.imageCache = null; state.layers.imageCache = null;
}, },
rgEraserLineAdded: {
reducer: (state, action: PayloadAction<EraserLineAddedArg & { lineId: string }>) => {
const { id, points, lineId, width, clip } = action.payload;
const rg = selectRG(state, id);
if (!rg) {
return;
}
rg.objects.push({
id: getEraserLineId(id, lineId),
type: 'eraser_line',
points,
strokeWidth: width,
clip,
});
rg.bboxNeedsUpdate = true;
rg.imageCache = null;
},
prepare: (payload: EraserLineAddedArg) => ({
payload: { ...payload, lineId: uuidv4() },
}),
},
rgLinePointAdded: (state, action: PayloadAction<PointAddedToLineArg>) => {
const { id, point } = action.payload;
const rg = selectRG(state, id);
if (!rg) {
return;
}
const lastObject = rg.objects[rg.objects.length - 1];
if (!lastObject || !isLine(lastObject)) {
return;
}
lastObject.points.push(...point);
rg.bboxNeedsUpdate = true;
rg.imageCache = null;
},
rgRectAdded: {
reducer: (state, action: PayloadAction<RectShapeAddedArg & { rectId: string }>) => {
const { id, rect, rectId } = action.payload;
if (rect.height === 0 || rect.width === 0) {
// Ignore zero-area rectangles
return;
}
const rg = selectRG(state, id);
if (!rg) {
return;
}
rg.objects.push({
type: 'rect_shape',
id: getRectShapeId(id, rectId),
...rect,
color: RGBA_RED,
});
rg.bboxNeedsUpdate = true;
rg.imageCache = null;
},
prepare: (payload: RectShapeAddedArg) => ({ payload: { ...payload, rectId: uuidv4() } }),
},
} satisfies SliceCaseReducers<CanvasV2State>; } satisfies SliceCaseReducers<CanvasV2State>;