feat(ui): consolidate konva API

This commit is contained in:
psychedelicious 2024-06-26 15:58:09 +10:00
parent d497da0e61
commit 57c257d10d
13 changed files with 1189 additions and 1178 deletions

View File

@ -130,7 +130,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
stage.on('mouseenter', () => {
const tool = getToolState().selected;
stage.findOne<Konva.Layer>(`#${PREVIEW_TOOL_GROUP_ID}`)?.visible(tool === 'brush' || tool === 'eraser');
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region mousedown
@ -251,7 +251,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
setLastAddedPoint(pos);
}
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region mouseup
@ -290,7 +290,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
setLastMouseDownPos(null);
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region mousemove
@ -396,7 +396,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
}
}
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region mouseleave
@ -425,7 +425,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
}
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region wheel
@ -466,11 +466,11 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
stage.scaleY(newScale);
stage.position(newPos);
setStageAttrs({ ...newPos, width: stage.width(), height: stage.height(), scale: newScale });
manager.konvaApi.renderBackground();
manager.konvaApi.renderDocumentOverlay();
manager.renderBackground();
manager.renderDocumentOverlay();
}
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region dragmove
@ -482,9 +482,9 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
height: stage.height(),
scale: stage.scaleX(),
});
manager.konvaApi.renderBackground();
manager.konvaApi.renderDocumentOverlay();
manager.konvaApi.renderToolPreview();
manager.renderBackground();
manager.renderDocumentOverlay();
manager.renderToolPreview();
});
//#region dragend
@ -497,7 +497,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
height: stage.height(),
scale: stage.scaleX(),
});
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
});
//#region key
@ -518,12 +518,12 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
setTool('view');
setSpaceKey(true);
} else if (e.key === 'r') {
manager.konvaApi.fitDocumentToStage();
manager.konvaApi.renderToolPreview();
manager.konvaApi.renderBackground();
manager.konvaApi.renderDocumentOverlay();
manager.fitDocumentToStage();
manager.renderToolPreview();
manager.renderBackground();
manager.renderDocumentOverlay();
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
};
window.addEventListener('keydown', onKeyDown);
@ -541,7 +541,7 @@ export const setStageEventHandlers = (manager: KonvaNodeManager): (() => void) =
setToolBuffer(null);
setSpaceKey(false);
}
manager.konvaApi.renderToolPreview();
manager.renderToolPreview();
};
window.addEventListener('keyup', onKeyUp);

View File

@ -1,18 +1,17 @@
import { getImageDataTransparency } from 'common/util/arrayBuffer';
import { DOCUMENT_FIT_PADDING_PX } from 'features/controlLayers/konva/constants';
import { KonvaBackground } from 'features/controlLayers/konva/renderers/background';
import { KonvaPreview } from 'features/controlLayers/konva/renderers/preview';
import { konvaNodeToBlob, konvaNodeToImageData, previewBlob } from 'features/controlLayers/konva/util';
import type {
BrushLine,
BrushLineAddedArg,
CanvasEntity,
CanvasV2State,
EraserLine,
EraserLineAddedArg,
GenerationMode,
ImageObject,
PointAddedToLineArg,
PosChangedArg,
Rect,
RectShape,
RectShapeAddedArg,
RgbaColor,
StageAttrs,
@ -21,96 +20,16 @@ import type {
import { isValidLayer } from 'features/nodes/util/graph/generation/addLayers';
import type Konva from 'konva';
import type { Vector2d } from 'konva/lib/types';
import { atom } from 'nanostores';
import { getImageDTO as defaultGetImageDTO, uploadImage as defaultUploadImage } from 'services/api/endpoints/images';
import type { ImageCategory, ImageDTO } from 'services/api/types';
import { assert } from 'tsafe';
export type BrushLineObjectRecord = {
id: string;
type: BrushLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
import { KonvaControlAdapter } from './renderers/controlAdapters';
import { KonvaInpaintMask } from './renderers/inpaintMask';
import { KonvaLayerAdapter } from './renderers/layers';
import { KonvaRegion } from './renderers/regions';
export type EraserLineObjectRecord = {
id: string;
type: EraserLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
export type RectShapeObjectRecord = {
id: string;
type: RectShape['type'];
konvaRect: Konva.Rect;
};
export type ImageObjectRecord = {
id: string;
type: ImageObject['type'];
konvaImageGroup: Konva.Group;
konvaPlaceholderGroup: Konva.Group;
konvaPlaceholderRect: Konva.Rect;
konvaPlaceholderText: Konva.Text;
imageName: string | null;
konvaImage: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
isLoading: boolean;
isError: boolean;
};
type ObjectRecord = BrushLineObjectRecord | EraserLineObjectRecord | RectShapeObjectRecord | ImageObjectRecord;
type KonvaApi = {
renderRegions: () => void;
renderLayers: () => void;
renderControlAdapters: () => void;
renderInpaintMask: () => void;
renderBbox: () => void;
renderDocumentOverlay: () => void;
renderBackground: () => void;
renderToolPreview: () => void;
renderStagingArea: () => void;
arrangeEntities: () => void;
fitDocumentToStage: () => void;
fitStageToContainer: () => void;
};
type BackgroundLayer = {
layer: Konva.Layer;
};
type PreviewLayer = {
layer: Konva.Layer;
bbox: {
group: Konva.Group;
rect: Konva.Rect;
transformer: Konva.Transformer;
};
tool: {
group: Konva.Group;
brush: {
group: Konva.Group;
fill: Konva.Circle;
innerBorder: Konva.Circle;
outerBorder: Konva.Circle;
};
rect: {
rect: Konva.Rect;
};
};
documentOverlay: {
group: Konva.Group;
innerRect: Konva.Rect;
outerRect: Konva.Rect;
};
stagingArea: {
group: Konva.Group;
image: ImageObjectRecord | null;
};
};
type StateApi = {
export type StateApi = {
getToolState: () => CanvasV2State['tool'];
getCurrentFill: () => RgbaColor;
setTool: (tool: Tool) => void;
@ -174,21 +93,25 @@ type Util = {
export class KonvaNodeManager {
stage: Konva.Stage;
container: HTMLDivElement;
adapters: Map<string, KonvaEntityAdapter>;
controlAdapters: Map<string, KonvaControlAdapter>;
layers: Map<string, KonvaLayerAdapter>;
regions: Map<string, KonvaRegion>;
inpaintMask: KonvaInpaintMask | null;
util: Util;
_background: BackgroundLayer | null;
_preview: PreviewLayer | null;
_konvaApi: KonvaApi | null;
_stateApi: StateApi | null;
stateApi: StateApi;
preview: KonvaPreview;
background: KonvaBackground;
constructor(
stage: Konva.Stage,
container: HTMLDivElement,
stateApi: StateApi,
getImageDTO: Util['getImageDTO'] = defaultGetImageDTO,
uploadImage: Util['uploadImage'] = defaultUploadImage
) {
this.stage = stage;
this.container = container;
this.stateApi = stateApi;
this.util = {
getImageDTO,
uploadImage,
@ -199,83 +122,183 @@ export class KonvaNodeManager {
getCompositeLayerStageClone: this._getCompositeLayerStageClone.bind(this),
getGenerationMode: this._getGenerationMode.bind(this),
};
this._konvaApi = null;
this._preview = null;
this._background = null;
this._stateApi = null;
this.adapters = new Map();
this.preview = new KonvaPreview(
this.stage,
this.stateApi.getBbox,
this.stateApi.onBboxTransformed,
this.stateApi.getShiftKey,
this.stateApi.getCtrlKey,
this.stateApi.getMetaKey,
this.stateApi.getAltKey
);
this.background = new KonvaBackground();
this.layers = new Map();
this.regions = new Map();
this.controlAdapters = new Map();
this.inpaintMask = null;
}
add(entity: CanvasEntity, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group): KonvaEntityAdapter {
const adapter = new KonvaEntityAdapter(entity, konvaLayer, konvaObjectGroup, this);
this.adapters.set(adapter.id, adapter);
return adapter;
}
renderLayers() {
const { entities } = this.stateApi.getLayersState();
const toolState = this.stateApi.getToolState();
get(id: string): KonvaEntityAdapter | undefined {
return this.adapters.get(id);
}
for (const adapter of this.layers.values()) {
if (!entities.find((l) => l.id === adapter.id)) {
adapter.destroy();
this.layers.delete(adapter.id);
}
}
getAll(type?: CanvasEntity['type']): KonvaEntityAdapter[] {
if (type) {
return Array.from(this.adapters.values()).filter((adapter) => adapter.entityType === type);
} else {
return Array.from(this.adapters.values());
for (const entity of entities) {
let adapter = this.layers.get(entity.id);
if (!adapter) {
adapter = new KonvaLayerAdapter(entity, this.stateApi.onPosChanged);
this.layers.set(adapter.id, adapter);
this.stage.add(adapter.konvaLayer);
}
adapter.render(entity, toolState.selected);
}
}
destroy(id: string): boolean {
const adapter = this.get(id);
if (!adapter) {
return false;
renderRegions() {
const { entities } = this.stateApi.getRegionsState();
const maskOpacity = this.stateApi.getMaskOpacity();
const toolState = this.stateApi.getToolState();
const selectedEntity = this.stateApi.getSelectedEntity();
// Destroy the konva nodes for nonexistent entities
for (const adapter of this.regions.values()) {
if (!entities.find((rg) => rg.id === adapter.id)) {
adapter.destroy();
this.regions.delete(adapter.id);
}
}
for (const entity of entities) {
let adapter = this.regions.get(entity.id);
if (!adapter) {
adapter = new KonvaRegion(entity, this.stateApi.onPosChanged);
this.regions.set(adapter.id, adapter);
this.stage.add(adapter.konvaLayer);
}
adapter.render(entity, toolState.selected, selectedEntity, maskOpacity);
}
adapter.konvaLayer.destroy();
return this.adapters.delete(id);
}
set konvaApi(konvaApi: KonvaApi) {
this._konvaApi = konvaApi;
renderInpaintMask() {
const inpaintMaskState = this.stateApi.getInpaintMaskState();
if (!this.inpaintMask) {
this.inpaintMask = new KonvaInpaintMask(inpaintMaskState, this.stateApi.onPosChanged);
this.stage.add(this.inpaintMask.konvaLayer);
}
const toolState = this.stateApi.getToolState();
const selectedEntity = this.stateApi.getSelectedEntity();
const maskOpacity = this.stateApi.getMaskOpacity();
this.inpaintMask.render(inpaintMaskState, toolState.selected, selectedEntity, maskOpacity);
}
get konvaApi(): KonvaApi {
assert(this._konvaApi !== null, 'Konva API has not been set');
return this._konvaApi;
renderControlAdapters() {
const { entities } = this.stateApi.getControlAdaptersState();
for (const adapter of this.controlAdapters.values()) {
if (!entities.find((ca) => ca.id === adapter.id)) {
adapter.destroy();
this.controlAdapters.delete(adapter.id);
}
}
for (const entity of entities) {
let adapter = this.controlAdapters.get(entity.id);
if (!adapter) {
adapter = new KonvaControlAdapter(entity);
this.controlAdapters.set(adapter.id, adapter);
this.stage.add(adapter.konvaLayer);
}
adapter.render(entity);
}
}
set preview(preview: PreviewLayer) {
this._preview = preview;
arrangeEntities() {
const { getLayersState, getControlAdaptersState, getRegionsState } = this.stateApi;
const layers = getLayersState().entities;
const controlAdapters = getControlAdaptersState().entities;
const regions = getRegionsState().entities;
let zIndex = 0;
this.background.konvaLayer.zIndex(++zIndex);
for (const layer of layers) {
this.layers.get(layer.id)?.konvaLayer.zIndex(++zIndex);
}
for (const ca of controlAdapters) {
this.controlAdapters.get(ca.id)?.konvaLayer.zIndex(++zIndex);
}
for (const rg of regions) {
this.regions.get(rg.id)?.konvaLayer.zIndex(++zIndex);
}
this.inpaintMask?.konvaLayer.zIndex(++zIndex);
this.preview.konvaLayer.zIndex(++zIndex);
}
get preview(): PreviewLayer {
assert(this._preview !== null, 'Konva preview layer has not been set');
return this._preview;
renderDocumentOverlay() {
this.preview.renderDocumentOverlay(this.stage, this.stateApi.getDocument());
}
set background(background: BackgroundLayer) {
this._background = background;
renderBbox() {
this.preview.renderBbox(this.stateApi.getBbox(), this.stateApi.getToolState());
}
get background(): BackgroundLayer {
assert(this._background !== null, 'Konva background layer has not been set');
return this._background;
renderToolPreview() {
this.preview.renderToolPreview(
this.stage,
1,
this.stateApi.getToolState(),
this.stateApi.getCurrentFill(),
this.stateApi.getSelectedEntity(),
this.stateApi.getLastCursorPos(),
this.stateApi.getLastMouseDownPos(),
this.stateApi.getIsDrawing(),
this.stateApi.getIsMouseDown()
);
}
set stateApi(stateApi: StateApi) {
this._stateApi = stateApi;
fitDocumentToStage(): void {
const { getDocument, setStageAttrs } = this.stateApi;
const document = getDocument();
// Fit & center the document on the stage
const width = this.stage.width();
const height = this.stage.height();
const docWidthWithBuffer = document.width + DOCUMENT_FIT_PADDING_PX * 2;
const docHeightWithBuffer = document.height + DOCUMENT_FIT_PADDING_PX * 2;
const scale = Math.min(Math.min(width / docWidthWithBuffer, height / docHeightWithBuffer), 1);
const x = (width - docWidthWithBuffer * scale) / 2 + DOCUMENT_FIT_PADDING_PX * scale;
const y = (height - docHeightWithBuffer * scale) / 2 + DOCUMENT_FIT_PADDING_PX * scale;
this.stage.setAttrs({ x, y, width, height, scaleX: scale, scaleY: scale });
setStageAttrs({ x, y, width, height, scale });
}
get stateApi(): StateApi {
assert(this._stateApi !== null, 'State API has not been set');
return this._stateApi;
fitStageToContainer(): void {
this.stage.width(this.container.offsetWidth);
this.stage.height(this.container.offsetHeight);
this.stateApi.setStageAttrs({
x: this.stage.x(),
y: this.stage.y(),
width: this.stage.width(),
height: this.stage.height(),
scale: this.stage.scaleX(),
});
this.renderBackground();
this.renderDocumentOverlay();
}
_getMaskLayerClone(arg: { id: string }): Konva.Layer {
const { id } = arg;
const adapter = this.get(id);
assert(adapter, `Adapter for entity ${id} not found`);
renderBackground() {
this.background.renderBackground(this.stage);
}
const layerClone = adapter.konvaLayer.clone();
const objectGroupClone = adapter.konvaObjectGroup.clone();
_getMaskLayerClone(): Konva.Layer {
assert(this.inpaintMask, 'Inpaint mask layer has not been set');
const layerClone = this.inpaintMask.konvaLayer.clone();
const objectGroupClone = this.inpaintMask.konvaObjectGroup.clone();
layerClone.destroyChildren();
layerClone.add(objectGroupClone);
@ -392,7 +415,7 @@ export class KonvaNodeManager {
async _getImageSourceImage(arg: { bbox?: Rect; preview?: boolean }): Promise<ImageDTO> {
const { bbox, preview = false } = arg;
const { imageCache } = this.stateApi.getLayersState();
// const { imageCache } = this.stateApi.getLayersState();
// if (imageCache) {
// const imageDTO = await this.util.getImageDTO(imageCache.name);
@ -416,72 +439,3 @@ export class KonvaNodeManager {
return imageDTO;
}
}
export class KonvaEntityAdapter {
id: string;
entityType: CanvasEntity['type'];
konvaLayer: Konva.Layer; // Every entity is associated with a konva layer
konvaObjectGroup: Konva.Group; // Every entity's nodes are part of an object group
objectRecords: Map<string, ObjectRecord>;
manager: KonvaNodeManager;
constructor(entity: CanvasEntity, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group, manager: KonvaNodeManager) {
this.id = entity.id;
this.entityType = entity.type;
this.konvaLayer = konvaLayer;
this.konvaObjectGroup = konvaObjectGroup;
this.objectRecords = new Map();
this.manager = manager;
this.konvaLayer.add(this.konvaObjectGroup);
this.manager.stage.add(this.konvaLayer);
}
add<T extends ObjectRecord>(objectRecord: T): T {
this.objectRecords.set(objectRecord.id, objectRecord);
if (objectRecord.type === 'brush_line' || objectRecord.type === 'eraser_line') {
objectRecord.konvaLineGroup.add(objectRecord.konvaLine);
this.konvaObjectGroup.add(objectRecord.konvaLineGroup);
} else if (objectRecord.type === 'rect_shape') {
this.konvaObjectGroup.add(objectRecord.konvaRect);
} else if (objectRecord.type === 'image') {
objectRecord.konvaPlaceholderGroup.add(objectRecord.konvaPlaceholderRect);
objectRecord.konvaPlaceholderGroup.add(objectRecord.konvaPlaceholderText);
objectRecord.konvaImageGroup.add(objectRecord.konvaPlaceholderGroup);
this.konvaObjectGroup.add(objectRecord.konvaImageGroup);
}
return objectRecord;
}
get<T extends ObjectRecord>(id: string): T | undefined {
return this.objectRecords.get(id) as T | undefined;
}
getAll<T extends ObjectRecord>(): T[] {
return Array.from(this.objectRecords.values()) as T[];
}
destroy(id: string): boolean {
const record = this.get(id);
if (!record) {
return false;
}
if (record.type === 'brush_line' || record.type === 'eraser_line') {
record.konvaLineGroup.destroy();
} else if (record.type === 'rect_shape') {
record.konvaRect.destroy();
} else if (record.type === 'image') {
record.konvaImageGroup.destroy();
}
return this.objectRecords.delete(id);
}
}
const $nodeManager = atom<KonvaNodeManager | null>(null);
export const setNodeManager = (manager: KonvaNodeManager) => {
$nodeManager.set(manager);
};
export const getNodeManager = () => {
const nodeManager = $nodeManager.get();
assert(nodeManager, 'Konva node manager not initialized');
return nodeManager;
};

View File

@ -24,7 +24,7 @@ export const getArrangeEntities = (manager: KonvaNodeManager) => {
manager.get(rg.id)?.konvaLayer.zIndex(++zIndex);
}
manager.get('inpaint_mask')?.konvaLayer.zIndex(++zIndex);
manager.preview.layer.zIndex(++zIndex);
manager.preview.konvaLayer.zIndex(++zIndex);
}
return arrangeEntities;

View File

@ -120,3 +120,86 @@ export const getRenderBackground = (manager: KonvaNodeManager) => {
return renderBackground;
};
export class KonvaBackground {
konvaLayer: Konva.Layer;
constructor() {
this.konvaLayer = new Konva.Layer({ listening: false });
}
renderBackground(stage: Konva.Stage): void {
this.konvaLayer.zIndex(0);
const scale = stage.scaleX();
const gridSpacing = getGridSpacing(scale);
const x = stage.x();
const y = stage.y();
const width = stage.width();
const height = stage.height();
const stageRect = {
x1: 0,
y1: 0,
x2: width,
y2: height,
};
const gridOffset = {
x: Math.ceil(x / scale / gridSpacing) * gridSpacing,
y: Math.ceil(y / scale / gridSpacing) * gridSpacing,
};
const gridRect = {
x1: -gridOffset.x,
y1: -gridOffset.y,
x2: width / scale - gridOffset.x + gridSpacing,
y2: height / scale - gridOffset.y + gridSpacing,
};
const gridFullRect = {
x1: Math.min(stageRect.x1, gridRect.x1),
y1: Math.min(stageRect.y1, gridRect.y1),
x2: Math.max(stageRect.x2, gridRect.x2),
y2: Math.max(stageRect.y2, gridRect.y2),
};
// find the x & y size of the grid
const xSize = gridFullRect.x2 - gridFullRect.x1;
const ySize = gridFullRect.y2 - gridFullRect.y1;
// compute the number of steps required on each axis.
const xSteps = Math.round(xSize / gridSpacing) + 1;
const ySteps = Math.round(ySize / gridSpacing) + 1;
const strokeWidth = 1 / scale;
let _x = 0;
let _y = 0;
this.konvaLayer.destroyChildren();
for (let i = 0; i < xSteps; i++) {
_x = gridFullRect.x1 + i * gridSpacing;
this.konvaLayer.add(
new Konva.Line({
x: _x,
y: gridFullRect.y1,
points: [0, 0, 0, ySize],
stroke: _x % 64 ? fineGridLineColor : baseGridLineColor,
strokeWidth,
listening: false,
})
);
}
for (let i = 0; i < ySteps; i++) {
_y = gridFullRect.y1 + i * gridSpacing;
this.konvaLayer.add(
new Konva.Line({
x: gridFullRect.x1,
y: _y,
points: [0, 0, xSize, 0],
stroke: _y % 64 ? fineGridLineColor : baseGridLineColor,
strokeWidth,
listening: false,
})
);
}
}
}

View File

@ -1,81 +1,50 @@
import { LightnessToAlphaFilter } from 'features/controlLayers/konva/filters';
import { CA_LAYER_IMAGE_NAME, CA_LAYER_NAME, CA_LAYER_OBJECT_GROUP_NAME } from 'features/controlLayers/konva/naming';
import type { ImageObjectRecord, KonvaEntityAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import {
createImageObjectGroup,
createObjectGroup,
updateImageSource,
} from 'features/controlLayers/konva/renderers/objects';
import { getObjectGroupId } from 'features/controlLayers/konva/naming';
import type { ControlAdapterEntity } from 'features/controlLayers/store/types';
import Konva from 'konva';
import { isEqual } from 'lodash-es';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
/**
* Gets a control adapter entity's konva nodes and entity adapter, creating them if they do not exist.
* @param manager The konva node manager
* @param entity The control adapter layer state
*/
const getControlAdapter = (manager: KonvaNodeManager, entity: ControlAdapterEntity): KonvaEntityAdapter => {
const adapter = manager.get(entity.id);
if (adapter) {
return adapter;
}
const konvaLayer = new Konva.Layer({
id: entity.id,
name: CA_LAYER_NAME,
imageSmoothingEnabled: false,
listening: false,
});
const konvaObjectGroup = createObjectGroup(konvaLayer, CA_LAYER_OBJECT_GROUP_NAME);
return manager.add(entity, konvaLayer, konvaObjectGroup);
};
import { KonvaImage } from './objects';
/**
* Renders a control adapter.
* @param manager The konva node manager
* @param entity The control adapter entity state
*/
export const renderControlAdapter = async (manager: KonvaNodeManager, entity: ControlAdapterEntity): Promise<void> => {
const adapter = getControlAdapter(manager, entity);
const imageObject = entity.processedImageObject ?? entity.imageObject;
export class KonvaControlAdapter {
id: string;
konvaLayer: Konva.Layer;
konvaObjectGroup: Konva.Group;
konvaImageObject: KonvaImage | null;
if (!imageObject) {
// The user has deleted/reset the image
adapter.getAll().forEach((entry) => {
adapter.destroy(entry.id);
constructor(entity: ControlAdapterEntity) {
const { id } = entity;
this.id = id;
this.konvaLayer = new Konva.Layer({
id,
imageSmoothingEnabled: false,
listening: false,
});
return;
this.konvaObjectGroup = new Konva.Group({
id: getObjectGroupId(this.konvaLayer.id(), uuidv4()),
listening: false,
});
this.konvaLayer.add(this.konvaObjectGroup);
this.konvaImageObject = null;
}
let entry = adapter.getAll<ImageObjectRecord>()[0];
const opacity = entity.opacity;
const visible = entity.isEnabled;
const filters = entity.filter === 'LightnessToAlphaFilter' ? [LightnessToAlphaFilter] : [];
if (!entry) {
entry = await createImageObjectGroup({
adapter: adapter,
obj: imageObject,
name: CA_LAYER_IMAGE_NAME,
onLoad: (konvaImage) => {
konvaImage.filters(filters);
konvaImage.cache();
konvaImage.opacity(opacity);
konvaImage.visible(visible);
},
});
} else {
if (entry.isLoading || entry.isError) {
async render(entity: ControlAdapterEntity) {
const imageObject = entity.processedImageObject ?? entity.imageObject;
if (!imageObject) {
if (this.konvaImageObject) {
this.konvaImageObject.destroy();
}
return;
}
assert(entry.konvaImage, `Image entry ${entry.id} must have a konva image if it is not loading or in error state`);
const imageSource = entry.konvaImage.image();
assert(imageSource instanceof HTMLImageElement, `Image source must be an HTMLImageElement`);
if (imageSource.id !== imageObject.image.name) {
updateImageSource({
objectRecord: entry,
image: imageObject.image,
const opacity = entity.opacity;
const visible = entity.isEnabled;
const filters = entity.filter === 'LightnessToAlphaFilter' ? [LightnessToAlphaFilter] : [];
if (!this.konvaImageObject) {
this.konvaImageObject = await new KonvaImage({
imageObject,
onLoad: (konvaImage) => {
konvaImage.filters(filters);
konvaImage.cache();
@ -83,37 +52,25 @@ export const renderControlAdapter = async (manager: KonvaNodeManager, entity: Co
konvaImage.visible(visible);
},
});
} else {
if (!isEqual(entry.konvaImage.filters(), filters)) {
entry.konvaImage.filters(filters);
entry.konvaImage.cache();
}
entry.konvaImage.opacity(opacity);
entry.konvaImage.visible(visible);
this.konvaObjectGroup.add(this.konvaImageObject.konvaImageGroup);
}
}
};
/**
* Gets a function to render all control adapters.
* @param manager The konva node manager
* @returns A function to render all control adapters
*/
export const getRenderControlAdapters = (manager: KonvaNodeManager) => {
const { getControlAdaptersState } = manager.stateApi;
function renderControlAdapters(): void {
const { entities } = getControlAdaptersState();
// Destroy nonexistent layers
for (const adapters of manager.getAll('control_adapter')) {
if (!entities.find((ca) => ca.id === adapters.id)) {
manager.destroy(adapters.id);
}
if (this.konvaImageObject.isLoading || this.konvaImageObject.isError) {
return;
}
for (const entity of entities) {
renderControlAdapter(manager, entity);
if (this.konvaImageObject.imageName !== imageObject.image.name) {
this.konvaImageObject.updateImageSource(imageObject.image.name);
}
if (this.konvaImageObject.konvaImage) {
if (!isEqual(this.konvaImageObject.konvaImage.filters(), filters)) {
this.konvaImageObject.konvaImage.filters(filters);
this.konvaImageObject.konvaImage.cache();
}
this.konvaImageObject.konvaImage.opacity(opacity);
this.konvaImageObject.konvaImage.visible(visible);
}
}
return renderControlAdapters;
};
destroy(): void {
this.konvaLayer.destroy();
}
}

View File

@ -1,162 +1,134 @@
import { rgbColorToString } from 'common/util/colorCodeTransformers';
import {
COMPOSITING_RECT_NAME,
INPAINT_MASK_LAYER_BRUSH_LINE_NAME,
INPAINT_MASK_LAYER_ERASER_LINE_NAME,
INPAINT_MASK_LAYER_NAME,
INPAINT_MASK_LAYER_OBJECT_GROUP_NAME,
INPAINT_MASK_LAYER_RECT_SHAPE_NAME,
} from 'features/controlLayers/konva/naming';
import type { KonvaEntityAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { getObjectGroupId } from 'features/controlLayers/konva/naming';
import type { StateApi } from 'features/controlLayers/konva/nodeManager';
import { getLayerBboxFast } from 'features/controlLayers/konva/renderers/bbox';
import {
createObjectGroup,
getBrushLine,
getEraserLine,
getRectShape,
} from 'features/controlLayers/konva/renderers/objects';
import { KonvaBrushLine, KonvaEraserLine, KonvaRect } from 'features/controlLayers/konva/renderers/objects';
import { mapId } from 'features/controlLayers/konva/util';
import type { CanvasEntity, InpaintMaskEntity, PosChangedArg } from 'features/controlLayers/store/types';
import type { CanvasEntityIdentifier, InpaintMaskEntity, Tool } from 'features/controlLayers/store/types';
import Konva from 'konva';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
/**
* Creates the "compositing rect" for the inpaint mask.
* @param konvaLayer The konva layer
*/
const createCompositingRect = (konvaLayer: Konva.Layer): Konva.Rect => {
const compositingRect = new Konva.Rect({ name: COMPOSITING_RECT_NAME, listening: false });
konvaLayer.add(compositingRect);
return compositingRect;
};
export class KonvaInpaintMask {
id: string;
konvaLayer: Konva.Layer;
konvaObjectGroup: Konva.Group;
compositingRect: Konva.Rect;
objects: Map<string, KonvaBrushLine | KonvaEraserLine | KonvaRect>;
/**
* Gets the singleton inpaint mask entity's konva nodes and entity adapter, creating them if they do not exist.
* @param manager The konva node manager
* @param entityState The inpaint mask entity state
* @param onPosChanged Callback for when the position changes (e.g. the entity is dragged)
* @returns The konva entity adapter for the inpaint mask
*/
const getInpaintMask = (
manager: KonvaNodeManager,
entityState: InpaintMaskEntity,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): KonvaEntityAdapter => {
const adapter = manager.get(entityState.id);
if (adapter) {
return adapter;
}
// This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({
id: entityState.id,
name: INPAINT_MASK_LAYER_NAME,
draggable: true,
dragDistance: 0,
});
constructor(entity: InpaintMaskEntity, onPosChanged: StateApi['onPosChanged']) {
this.id = entity.id;
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
if (onPosChanged) {
konvaLayer.on('dragend', function (e) {
onPosChanged({ id: entityState.id, x: Math.floor(e.target.x()), y: Math.floor(e.target.y()) }, 'inpaint_mask');
this.konvaLayer = new Konva.Layer({
id: entity.id,
draggable: true,
dragDistance: 0,
});
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
this.konvaLayer.on('dragend', function (e) {
onPosChanged({ id: entity.id, x: Math.floor(e.target.x()), y: Math.floor(e.target.y()) }, 'inpaint_mask');
});
this.konvaObjectGroup = new Konva.Group({
id: getObjectGroupId(this.konvaLayer.id(), uuidv4()),
listening: false,
});
this.konvaLayer.add(this.konvaObjectGroup);
this.compositingRect = new Konva.Rect({ listening: false });
this.konvaLayer.add(this.compositingRect);
this.objects = new Map();
}
const konvaObjectGroup = createObjectGroup(konvaLayer, INPAINT_MASK_LAYER_OBJECT_GROUP_NAME);
return manager.add(entityState, konvaLayer, konvaObjectGroup);
};
/**
* Gets a function to render the inpaint mask.
* @param manager The konva node manager
* @returns A function to render the inpaint mask
*/
export const getRenderInpaintMask = (manager: KonvaNodeManager) => {
const { getInpaintMaskState, getMaskOpacity, getToolState, getSelectedEntity, onPosChanged } = manager.stateApi;
function renderInpaintMask(): void {
const entity = getInpaintMaskState();
const globalMaskLayerOpacity = getMaskOpacity();
const toolState = getToolState();
const selectedEntity = getSelectedEntity();
const adapter = getInpaintMask(manager, entity, onPosChanged);
destroy(): void {
this.konvaLayer.destroy();
}
async render(
inpaintMaskState: InpaintMaskEntity,
selectedTool: Tool,
selectedEntityIdentifier: CanvasEntityIdentifier | null,
maskOpacity: number
) {
// Update the layer's position and listening state
adapter.konvaLayer.setAttrs({
listening: toolState.selected === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(entity.x),
y: Math.floor(entity.y),
this.konvaLayer.setAttrs({
listening: selectedTool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(inpaintMaskState.x),
y: Math.floor(inpaintMaskState.y),
});
// Convert the color to a string, stripping the alpha - the object group will handle opacity.
const rgbColor = rgbColorToString(entity.fill);
const rgbColor = rgbColorToString(inpaintMaskState.fill);
// We use caching to handle "global" layer opacity, but caching is expensive and we should only do it when required.
let groupNeedsCache = false;
const objectIds = entity.objects.map(mapId);
const objectIds = inpaintMaskState.objects.map(mapId);
// Destroy any objects that are no longer in state
for (const objectRecord of adapter.getAll()) {
if (!objectIds.includes(objectRecord.id)) {
adapter.destroy(objectRecord.id);
for (const object of this.objects.values()) {
if (!objectIds.includes(object.id)) {
object.destroy();
groupNeedsCache = true;
}
}
for (const obj of entity.objects) {
for (const obj of inpaintMaskState.objects) {
if (obj.type === 'brush_line') {
const objectRecord = getBrushLine(adapter, obj, INPAINT_MASK_LAYER_BRUSH_LINE_NAME);
let brushLine = this.objects.get(obj.id);
assert(brushLine instanceof KonvaBrushLine || brushLine === undefined);
// Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
if (!brushLine) {
brushLine = new KonvaBrushLine({ brushLine: obj });
this.objects.set(brushLine.id, brushLine);
this.konvaLayer.add(brushLine.konvaLineGroup);
groupNeedsCache = true;
}
// Only update the color if it has changed.
if (objectRecord.konvaLine.stroke() !== rgbColor) {
objectRecord.konvaLine.stroke(rgbColor);
if (obj.points.length !== brushLine.konvaLine.points().length) {
brushLine.konvaLine.points(obj.points);
groupNeedsCache = true;
}
} else if (obj.type === 'eraser_line') {
const objectRecord = getEraserLine(adapter, obj, INPAINT_MASK_LAYER_ERASER_LINE_NAME);
let eraserLine = this.objects.get(obj.id);
assert(eraserLine instanceof KonvaEraserLine || eraserLine === undefined);
// Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
if (!eraserLine) {
eraserLine = new KonvaEraserLine({ eraserLine: obj });
this.objects.set(eraserLine.id, eraserLine);
this.konvaLayer.add(eraserLine.konvaLineGroup);
groupNeedsCache = true;
}
// Only update the color if it has changed.
if (objectRecord.konvaLine.stroke() !== rgbColor) {
objectRecord.konvaLine.stroke(rgbColor);
if (obj.points.length !== eraserLine.konvaLine.points().length) {
eraserLine.konvaLine.points(obj.points);
groupNeedsCache = true;
}
} else if (obj.type === 'rect_shape') {
const objectRecord = getRectShape(adapter, obj, INPAINT_MASK_LAYER_RECT_SHAPE_NAME);
let rect = this.objects.get(obj.id);
assert(rect instanceof KonvaRect || rect === undefined);
// Only update the color if it has changed.
if (objectRecord.konvaRect.fill() !== rgbColor) {
objectRecord.konvaRect.fill(rgbColor);
if (!rect) {
rect = new KonvaRect({ rectShape: obj });
this.objects.set(rect.id, rect);
this.konvaLayer.add(rect.konvaRect);
groupNeedsCache = true;
}
}
}
// Only update layer visibility if it has changed.
if (adapter.konvaLayer.visible() !== entity.isEnabled) {
adapter.konvaLayer.visible(entity.isEnabled);
if (this.konvaLayer.visible() !== inpaintMaskState.isEnabled) {
this.konvaLayer.visible(inpaintMaskState.isEnabled);
groupNeedsCache = true;
}
if (adapter.konvaObjectGroup.getChildren().length === 0) {
if (this.objects.size === 0) {
// No objects - clear the cache to reset the previous pixel data
adapter.konvaObjectGroup.clearCache();
this.konvaObjectGroup.clearCache();
return;
}
const compositingRect =
adapter.konvaLayer.findOne<Konva.Rect>(`.${COMPOSITING_RECT_NAME}`) ?? createCompositingRect(adapter.konvaLayer);
const isSelected = selectedEntity?.id === entity.id;
const isSelected = selectedEntityIdentifier?.id === inpaintMaskState.id;
/**
* When the group is selected, we use a rect of the selected preview color, composited over the shapes. This allows
@ -169,39 +141,40 @@ export const getRenderInpaintMask = (manager: KonvaNodeManager) => {
* Instead, with the special handling, the effect is as if you drew all the shapes at 100% opacity, flattened them to
* a single raster image, and _then_ applied the 50% opacity.
*/
if (isSelected && toolState.selected !== 'move') {
if (isSelected && selectedTool !== 'move') {
// We must clear the cache first so Konva will re-draw the group with the new compositing rect
if (adapter.konvaObjectGroup.isCached()) {
adapter.konvaObjectGroup.clearCache();
if (this.konvaObjectGroup.isCached()) {
this.konvaObjectGroup.clearCache();
}
// The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work
adapter.konvaObjectGroup.opacity(1);
this.konvaObjectGroup.opacity(1);
compositingRect.setAttrs({
this.compositingRect.setAttrs({
// The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already
...(!entity.bboxNeedsUpdate && entity.bbox ? entity.bbox : getLayerBboxFast(adapter.konvaLayer)),
...(!inpaintMaskState.bboxNeedsUpdate && inpaintMaskState.bbox
? inpaintMaskState.bbox
: getLayerBboxFast(this.konvaLayer)),
fill: rgbColor,
opacity: globalMaskLayerOpacity,
opacity: maskOpacity,
// Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
globalCompositeOperation: 'source-in',
visible: true,
// This rect must always be on top of all other shapes
zIndex: adapter.konvaObjectGroup.getChildren().length,
zIndex: this.objects.size + 1,
});
} else {
// The compositing rect should only be shown when the layer is selected.
compositingRect.visible(false);
this.compositingRect.visible(false);
// Cache only if needed - or if we are on this code path and _don't_ have a cache
if (groupNeedsCache || !adapter.konvaObjectGroup.isCached()) {
adapter.konvaObjectGroup.cache();
if (groupNeedsCache || !this.konvaObjectGroup.isCached()) {
this.konvaObjectGroup.cache();
}
// Updating group opacity does not require re-caching
adapter.konvaObjectGroup.opacity(globalMaskLayerOpacity);
this.konvaObjectGroup.opacity(maskOpacity);
}
// const bboxRect =
// regionMap.konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(rg, regionMap.konvaLayer);
// if (rg.bbox) {
// const active = !rg.bboxNeedsUpdate && isSelected && tool === 'move';
// bboxRect.setAttrs({
@ -217,6 +190,4 @@ export const getRenderInpaintMask = (manager: KonvaNodeManager) => {
// bboxRect.visible(false);
// }
}
return renderInpaintMask;
};
}

View File

@ -1,156 +1,131 @@
import {
RASTER_LAYER_BRUSH_LINE_NAME,
RASTER_LAYER_ERASER_LINE_NAME,
RASTER_LAYER_IMAGE_NAME,
RASTER_LAYER_NAME,
RASTER_LAYER_OBJECT_GROUP_NAME,
RASTER_LAYER_RECT_SHAPE_NAME,
} from 'features/controlLayers/konva/naming';
import type { KonvaEntityAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import {
createImageObjectGroup,
createObjectGroup,
getBrushLine,
getEraserLine,
getRectShape,
} from 'features/controlLayers/konva/renderers/objects';
import { getObjectGroupId } from 'features/controlLayers/konva/naming';
import type { StateApi } from 'features/controlLayers/konva/nodeManager';
import { KonvaBrushLine, KonvaEraserLine, KonvaImage, KonvaRect } from 'features/controlLayers/konva/renderers/objects';
import { mapId } from 'features/controlLayers/konva/util';
import type { CanvasEntity, LayerEntity, PosChangedArg, Tool } from 'features/controlLayers/store/types';
import type { LayerEntity, Tool } from 'features/controlLayers/store/types';
import Konva from 'konva';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
/**
* Gets layer entity's konva nodes and entity adapter, creating them if they do not exist.
* @param manager The konva node manager
* @param entity The layer entity state
* @param onPosChanged Callback for when the layer's position changes
* @returns The konva entity adapter for the layer
*/
const getLayer = (
manager: KonvaNodeManager,
entity: LayerEntity,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): KonvaEntityAdapter => {
const adapter = manager.get(entity.id);
if (adapter) {
return adapter;
}
// This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({
id: entity.id,
name: RASTER_LAYER_NAME,
draggable: true,
dragDistance: 0,
});
export class KonvaLayerAdapter {
id: string;
konvaLayer: Konva.Layer;
konvaObjectGroup: Konva.Group;
objects: Map<string, KonvaBrushLine | KonvaEraserLine | KonvaRect | KonvaImage>;
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
if (onPosChanged) {
konvaLayer.on('dragend', function (e) {
constructor(entity: LayerEntity, onPosChanged: StateApi['onPosChanged']) {
this.id = entity.id;
this.konvaLayer = new Konva.Layer({
id: entity.id,
draggable: true,
dragDistance: 0,
});
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
this.konvaLayer.on('dragend', function (e) {
onPosChanged({ id: entity.id, x: Math.floor(e.target.x()), y: Math.floor(e.target.y()) }, 'layer');
});
const konvaObjectGroup = new Konva.Group({
id: getObjectGroupId(this.konvaLayer.id(), uuidv4()),
listening: false,
});
this.konvaObjectGroup = konvaObjectGroup;
this.konvaLayer.add(this.konvaObjectGroup);
this.objects = new Map();
}
const konvaObjectGroup = createObjectGroup(konvaLayer, RASTER_LAYER_OBJECT_GROUP_NAME);
return manager.add(entity, konvaLayer, konvaObjectGroup);
};
/**
* Renders a layer.
* @param manager The konva node manager
* @param entity The layer entity state
* @param tool The current tool
* @param onPosChanged Callback for when the layer's position changes
*/
export const renderLayer = async (
manager: KonvaNodeManager,
entity: LayerEntity,
tool: Tool,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
) => {
const adapter = getLayer(manager, entity, onPosChanged);
// Update the layer's position and listening state
adapter.konvaLayer.setAttrs({
listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(entity.x),
y: Math.floor(entity.y),
});
const objectIds = entity.objects.map(mapId);
// Destroy any objects that are no longer in state
for (const objectRecord of adapter.getAll()) {
if (!objectIds.includes(objectRecord.id)) {
adapter.destroy(objectRecord.id);
}
destroy(): void {
this.konvaLayer.destroy();
}
for (const obj of entity.objects) {
if (obj.type === 'brush_line') {
const objectRecord = getBrushLine(adapter, obj, RASTER_LAYER_BRUSH_LINE_NAME);
// Only update the points if they have changed.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
}
} else if (obj.type === 'eraser_line') {
const objectRecord = getEraserLine(adapter, obj, RASTER_LAYER_ERASER_LINE_NAME);
// Only update the points if they have changed.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
}
} else if (obj.type === 'rect_shape') {
getRectShape(adapter, obj, RASTER_LAYER_RECT_SHAPE_NAME);
} else if (obj.type === 'image') {
createImageObjectGroup({ adapter, obj, name: RASTER_LAYER_IMAGE_NAME });
}
}
async render(layerState: LayerEntity, selectedTool: Tool) {
// Update the layer's position and listening state
this.konvaLayer.setAttrs({
listening: selectedTool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(layerState.x),
y: Math.floor(layerState.y),
});
// Only update layer visibility if it has changed.
if (adapter.konvaLayer.visible() !== entity.isEnabled) {
adapter.konvaLayer.visible(entity.isEnabled);
}
// const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(layerState, konvaLayer);
// if (layerState.bbox) {
// const active = !layerState.bboxNeedsUpdate && layerState.isSelected && tool === 'move';
// bboxRect.setAttrs({
// visible: active,
// listening: active,
// x: layerState.bbox.x,
// y: layerState.bbox.y,
// width: layerState.bbox.width,
// height: layerState.bbox.height,
// stroke: layerState.isSelected ? BBOX_SELECTED_STROKE : '',
// strokeWidth: 1 / stage.scaleX(),
// });
// } else {
// bboxRect.visible(false);
// }
adapter.konvaObjectGroup.opacity(entity.opacity);
};
/**
* Gets a function to render all layers.
* @param manager The konva node manager
* @returns A function to render all layers
*/
export const getRenderLayers = (manager: KonvaNodeManager) => {
const { getLayersState, getToolState, onPosChanged } = manager.stateApi;
function renderLayers(): void {
const { entities } = getLayersState();
const tool = getToolState();
// Destroy nonexistent layers
for (const adapter of manager.getAll('layer')) {
if (!entities.find((l) => l.id === adapter.id)) {
manager.destroy(adapter.id);
const objectIds = layerState.objects.map(mapId);
// Destroy any objects that are no longer in state
for (const object of this.objects.values()) {
if (!objectIds.includes(object.id)) {
object.destroy();
}
}
for (const entity of entities) {
renderLayer(manager, entity, tool.selected, onPosChanged);
}
}
return renderLayers;
};
for (const obj of layerState.objects) {
if (obj.type === 'brush_line') {
let brushLine = this.objects.get(obj.id);
assert(brushLine instanceof KonvaBrushLine || brushLine === undefined);
if (!brushLine) {
brushLine = new KonvaBrushLine({ brushLine: obj });
this.objects.set(brushLine.id, brushLine);
this.konvaLayer.add(brushLine.konvaLineGroup);
}
if (obj.points.length !== brushLine.konvaLine.points().length) {
brushLine.konvaLine.points(obj.points);
}
} else if (obj.type === 'eraser_line') {
let eraserLine = this.objects.get(obj.id);
assert(eraserLine instanceof KonvaEraserLine || eraserLine === undefined);
if (!eraserLine) {
eraserLine = new KonvaEraserLine({ eraserLine: obj });
this.objects.set(eraserLine.id, eraserLine);
this.konvaLayer.add(eraserLine.konvaLineGroup);
}
if (obj.points.length !== eraserLine.konvaLine.points().length) {
eraserLine.konvaLine.points(obj.points);
}
} else if (obj.type === 'rect_shape') {
let rect = this.objects.get(obj.id);
assert(rect instanceof KonvaRect || rect === undefined);
if (!rect) {
rect = new KonvaRect({ rectShape: obj });
this.objects.set(rect.id, rect);
this.konvaLayer.add(rect.konvaRect);
}
} else if (obj.type === 'image') {
let image = this.objects.get(obj.id);
assert(image instanceof KonvaImage || image === undefined);
if (!image) {
image = await new KonvaImage({ imageObject: obj });
this.objects.set(image.id, image);
this.konvaLayer.add(image.konvaImageGroup);
}
if (image.imageName !== obj.image.name) {
image.updateImageSource(obj.image.name);
}
}
}
// Only update layer visibility if it has changed.
if (this.konvaLayer.visible() !== layerState.isEnabled) {
this.konvaLayer.visible(layerState.isEnabled);
}
// const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(layerState, konvaLayer);
// if (layerState.bbox) {
// const active = !layerState.bboxNeedsUpdate && layerState.isSelected && tool === 'move';
// bboxRect.setAttrs({
// visible: active,
// listening: active,
// x: layerState.bbox.x,
// y: layerState.bbox.y,
// width: layerState.bbox.width,
// height: layerState.bbox.height,
// stroke: layerState.isSelected ? BBOX_SELECTED_STROKE : '',
// strokeWidth: 1 / stage.scaleX(),
// });
// } else {
// bboxRect.visible(false);
// }
this.konvaObjectGroup.opacity(layerState.opacity);
}
}

View File

@ -1,262 +1,11 @@
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import {
getLayerBboxId,
getObjectGroupId,
IMAGE_PLACEHOLDER_NAME,
LAYER_BBOX_NAME,
PREVIEW_GENERATION_BBOX_DUMMY_RECT,
} from 'features/controlLayers/konva/naming';
import type {
BrushLineObjectRecord,
EraserLineObjectRecord,
ImageObjectRecord,
KonvaEntityAdapter,
RectShapeObjectRecord,
} from 'features/controlLayers/konva/nodeManager';
import type {
BrushLine,
CanvasEntity,
EraserLine,
ImageObject,
ImageWithDims,
RectShape,
} from 'features/controlLayers/store/types';
import { getLayerBboxId, LAYER_BBOX_NAME } from 'features/controlLayers/konva/naming';
import type { BrushLine, CanvasEntity, EraserLine, ImageObject, RectShape } from 'features/controlLayers/store/types';
import { DEFAULT_RGBA_COLOR } from 'features/controlLayers/store/types';
import { t } from 'i18next';
import Konva from 'konva';
import { getImageDTO as defaultGetImageDTO } from 'services/api/endpoints/images';
import type { ImageDTO } from 'services/api/types';
import { v4 as uuidv4 } from 'uuid';
/**
* Utilities to create various konva objects from layer state. These are used by both the raster and regional guidance
* layers types.
*/
/**
* Creates a konva line for a brush line.
* @param brushLine The brush line state
* @param layerObjectGroup The konva layer's object group to add the line to
* @param name The konva name for the line
*/
export const getBrushLine = (
adapter: KonvaEntityAdapter,
brushLine: BrushLine,
name: string
): BrushLineObjectRecord => {
const objectRecord = adapter.get<BrushLineObjectRecord>(brushLine.id);
if (objectRecord) {
return objectRecord;
}
const { id, strokeWidth, clip, color } = brushLine;
const konvaLineGroup = new Konva.Group({
clip,
listening: false,
});
const konvaLine = new Konva.Line({
id,
name,
strokeWidth,
tension: 0,
lineCap: 'round',
lineJoin: 'round',
shadowForStrokeEnabled: false,
globalCompositeOperation: 'source-over',
listening: false,
stroke: rgbaColorToString(color),
});
return adapter.add({ id, type: 'brush_line', konvaLine, konvaLineGroup });
};
/**
* Creates a konva line for a eraser line.
* @param eraserLine The eraser line state
* @param layerObjectGroup The konva layer's object group to add the line to
* @param name The konva name for the line
*/
export const getEraserLine = (
adapter: KonvaEntityAdapter,
eraserLine: EraserLine,
name: string
): EraserLineObjectRecord => {
const objectRecord = adapter.get<EraserLineObjectRecord>(eraserLine.id);
if (objectRecord) {
return objectRecord;
}
const { id, strokeWidth, clip } = eraserLine;
const konvaLineGroup = new Konva.Group({
clip,
listening: false,
});
const konvaLine = new Konva.Line({
id,
name,
strokeWidth,
tension: 0,
lineCap: 'round',
lineJoin: 'round',
shadowForStrokeEnabled: false,
globalCompositeOperation: 'destination-out',
listening: false,
stroke: rgbaColorToString(DEFAULT_RGBA_COLOR),
});
return adapter.add({ id, type: 'eraser_line', konvaLine, konvaLineGroup });
};
/**
* Creates a konva rect for a rect shape.
* @param rectShape The rect shape state
* @param layerObjectGroup The konva layer's object group to add the rect to
* @param name The konva name for the rect
*/
export const getRectShape = (
adapter: KonvaEntityAdapter,
rectShape: RectShape,
name: string
): RectShapeObjectRecord => {
const objectRecord = adapter.get<RectShapeObjectRecord>(rectShape.id);
if (objectRecord) {
return objectRecord;
}
const { id, x, y, width, height } = rectShape;
const konvaRect = new Konva.Rect({
id,
name,
x,
y,
width,
height,
listening: false,
fill: rgbaColorToString(rectShape.color),
});
return adapter.add({ id: rectShape.id, type: 'rect_shape', konvaRect });
};
export const updateImageSource = async (arg: {
objectRecord: ImageObjectRecord;
image: ImageWithDims;
getImageDTO?: (imageName: string) => Promise<ImageDTO | null>;
onLoading?: () => void;
onLoad?: (konvaImage: Konva.Image) => void;
onError?: () => void;
}) => {
const { objectRecord, image, getImageDTO = defaultGetImageDTO, onLoading, onLoad, onError } = arg;
try {
objectRecord.isLoading = true;
if (!objectRecord.konvaImage) {
objectRecord.konvaPlaceholderGroup.visible(true);
objectRecord.konvaPlaceholderText.text(t('common.loadingImage', 'Loading Image'));
}
onLoading?.();
const imageDTO = await getImageDTO(image.name);
if (!imageDTO) {
objectRecord.imageName = null;
objectRecord.isLoading = false;
objectRecord.isError = true;
objectRecord.konvaPlaceholderGroup.visible(true);
objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.();
return;
}
const imageEl = new Image();
imageEl.onload = () => {
if (objectRecord.konvaImage) {
objectRecord.konvaImage.setAttrs({
image: imageEl,
});
} else {
objectRecord.konvaImage = new Konva.Image({
id: objectRecord.id,
listening: false,
image: imageEl,
});
objectRecord.konvaImageGroup.add(objectRecord.konvaImage);
objectRecord.imageName = image.name;
}
objectRecord.isLoading = false;
objectRecord.isError = false;
objectRecord.konvaPlaceholderGroup.visible(false);
onLoad?.(objectRecord.konvaImage);
};
imageEl.onerror = () => {
objectRecord.imageName = null;
objectRecord.isLoading = false;
objectRecord.isError = true;
objectRecord.konvaPlaceholderGroup.visible(true);
objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.();
};
imageEl.id = image.name;
imageEl.src = imageDTO.image_url;
} catch {
objectRecord.imageName = null;
objectRecord.isLoading = false;
objectRecord.isError = true;
objectRecord.konvaPlaceholderGroup.visible(true);
objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.();
}
};
/**
* Creates an image placeholder group for an image object.
* @param image The image object state
* @returns The konva group for the image placeholder, and callbacks to handle loading and error states
*/
export const createImageObjectGroup = (arg: {
adapter: KonvaEntityAdapter;
obj: ImageObject;
name: string;
getImageDTO?: (imageName: string) => Promise<ImageDTO | null>;
onLoad?: (konvaImage: Konva.Image) => void;
onLoading?: () => void;
onError?: () => void;
}): ImageObjectRecord => {
const { adapter, obj, name, getImageDTO = defaultGetImageDTO, onLoad, onLoading, onError } = arg;
let objectRecord = adapter.get<ImageObjectRecord>(obj.id);
if (objectRecord) {
return objectRecord;
}
const { id, image } = obj;
const { width, height } = obj;
const konvaImageGroup = new Konva.Group({ id, name, listening: false, x: obj.x, y: obj.y });
const konvaPlaceholderGroup = new Konva.Group({ name: IMAGE_PLACEHOLDER_NAME, listening: false });
const konvaPlaceholderRect = new Konva.Rect({
fill: 'hsl(220 12% 45% / 1)', // 'base.500'
width,
height,
listening: false,
});
const konvaPlaceholderText = new Konva.Text({
fill: 'hsl(220 12% 10% / 1)', // 'base.900'
width,
height,
align: 'center',
verticalAlign: 'middle',
fontFamily: '"Inter Variable", sans-serif',
fontSize: width / 16,
fontStyle: '600',
text: t('common.loadingImage', 'Loading Image'),
listening: false,
});
objectRecord = adapter.add({
id,
type: 'image',
konvaImageGroup,
konvaPlaceholderGroup,
konvaPlaceholderRect,
konvaPlaceholderText,
konvaImage: null,
imageName: null,
isLoading: false,
isError: false,
});
updateImageSource({ objectRecord, image, getImageDTO, onLoad, onLoading, onError });
return objectRecord;
};
/**
* Creates a bounding box rect for a layer.
@ -274,33 +23,217 @@ export const createBboxRect = (entity: CanvasEntity, konvaLayer: Konva.Layer): K
return rect;
};
/**
* Creates a konva group for a layer's objects.
* @param konvaLayer The konva layer to add the object group to
* @param name The konva name for the group
* @returns
*/
export const createObjectGroup = (konvaLayer: Konva.Layer, name: string): Konva.Group => {
const konvaObjectGroup = new Konva.Group({
id: getObjectGroupId(konvaLayer.id(), uuidv4()),
name,
listening: false,
});
konvaLayer.add(konvaObjectGroup);
return konvaObjectGroup;
};
export class KonvaBrushLine {
id: string;
konvaLineGroup: Konva.Group;
konvaLine: Konva.Line;
export const createImageDimsPreview = (konvaLayer: Konva.Layer, width: number, height: number): Konva.Rect => {
const imageDimsPreview = new Konva.Rect({
id: PREVIEW_GENERATION_BBOX_DUMMY_RECT,
x: 0,
y: 0,
width,
height,
stroke: 'rgb(255,0,255)',
strokeWidth: 1 / konvaLayer.getStage().scaleX(),
listening: false,
});
konvaLayer.add(imageDimsPreview);
return imageDimsPreview;
};
constructor(arg: { brushLine: BrushLine }) {
const { brushLine } = arg;
const { id, strokeWidth, clip, color } = brushLine;
this.id = id;
this.konvaLineGroup = new Konva.Group({
clip,
listening: false,
});
this.konvaLine = new Konva.Line({
id,
listening: false,
shadowForStrokeEnabled: false,
strokeWidth,
tension: 0,
lineCap: 'round',
lineJoin: 'round',
globalCompositeOperation: 'source-over',
stroke: rgbaColorToString(color),
});
this.konvaLineGroup.add(this.konvaLine);
}
destroy() {
this.konvaLineGroup.destroy();
}
}
export class KonvaEraserLine {
id: string;
konvaLineGroup: Konva.Group;
konvaLine: Konva.Line;
constructor(arg: { eraserLine: EraserLine }) {
const { eraserLine } = arg;
const { id, strokeWidth, clip } = eraserLine;
this.id = id;
this.konvaLineGroup = new Konva.Group({
clip,
listening: false,
});
this.konvaLine = new Konva.Line({
id,
listening: false,
shadowForStrokeEnabled: false,
strokeWidth,
tension: 0,
lineCap: 'round',
lineJoin: 'round',
globalCompositeOperation: 'destination-out',
stroke: rgbaColorToString(DEFAULT_RGBA_COLOR),
});
this.konvaLineGroup.add(this.konvaLine);
}
destroy() {
this.konvaLineGroup.destroy();
}
}
export class KonvaRect {
id: string;
konvaRect: Konva.Rect;
constructor(arg: { rectShape: RectShape }) {
const { rectShape } = arg;
const { id, x, y, width, height } = rectShape;
this.id = id;
const konvaRect = new Konva.Rect({
id,
x,
y,
width,
height,
listening: false,
fill: rgbaColorToString(rectShape.color),
});
this.konvaRect = konvaRect;
}
destroy() {
this.konvaRect.destroy();
}
}
export class KonvaImage {
id: string;
konvaImageGroup: Konva.Group;
konvaPlaceholderGroup: Konva.Group;
konvaPlaceholderRect: Konva.Rect;
konvaPlaceholderText: Konva.Text;
imageName: string | null;
konvaImage: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
isLoading: boolean;
isError: boolean;
getImageDTO: (imageName: string) => Promise<ImageDTO | null>;
onLoading: () => void;
onLoad: (imageName: string, imageEl: HTMLImageElement) => void;
onError: () => void;
constructor(arg: {
imageObject: ImageObject;
getImageDTO?: (imageName: string) => Promise<ImageDTO | null>;
onLoading?: () => void;
onLoad?: (konvaImage: Konva.Image) => void;
onError?: () => void;
}) {
const { imageObject, getImageDTO, onLoading, onLoad, onError } = arg;
const { id, width, height, x, y } = imageObject;
this.konvaImageGroup = new Konva.Group({ id, listening: false, x, y });
this.konvaPlaceholderGroup = new Konva.Group({ listening: false });
this.konvaPlaceholderRect = new Konva.Rect({
fill: 'hsl(220 12% 45% / 1)', // 'base.500'
width,
height,
listening: false,
});
this.konvaPlaceholderText = new Konva.Text({
fill: 'hsl(220 12% 10% / 1)', // 'base.900'
width,
height,
align: 'center',
verticalAlign: 'middle',
fontFamily: '"Inter Variable", sans-serif',
fontSize: width / 16,
fontStyle: '600',
text: t('common.loadingImage', 'Loading Image'),
listening: false,
});
this.konvaPlaceholderGroup.add(this.konvaPlaceholderRect);
this.konvaPlaceholderGroup.add(this.konvaPlaceholderText);
this.konvaImageGroup.add(this.konvaPlaceholderGroup);
this.id = id;
this.imageName = null;
this.konvaImage = null;
this.isLoading = false;
this.isError = false;
this.getImageDTO = getImageDTO ?? defaultGetImageDTO;
this.onLoading = function () {
this.isLoading = true;
if (!this.konvaImage) {
this.konvaPlaceholderGroup.visible(true);
this.konvaPlaceholderText.text(t('common.loadingImage', 'Loading Image'));
}
if (onLoading) {
onLoading();
}
};
this.onLoad = function (imageName: string, imageEl: HTMLImageElement) {
if (this.konvaImage) {
this.konvaImage.setAttrs({
image: imageEl,
});
} else {
this.konvaImage = new Konva.Image({
id: this.id,
listening: false,
image: imageEl,
});
this.konvaImageGroup.add(this.konvaImage);
this.imageName = imageName;
}
this.isLoading = false;
this.isError = false;
this.konvaPlaceholderGroup.visible(false);
if (onLoad) {
onLoad(this.konvaImage);
}
};
this.onError = function () {
this.imageName = null;
this.isLoading = false;
this.isError = true;
this.konvaPlaceholderGroup.visible(true);
this.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
if (onError) {
onError();
}
};
}
async updateImageSource(imageName: string) {
try {
this.onLoading();
const imageDTO = await this.getImageDTO(imageName);
if (!imageDTO) {
this.onError();
return;
}
const imageEl = new Image();
imageEl.onload = () => {
this.onLoad(imageName, imageEl);
};
imageEl.onerror = () => {
this.onError();
};
imageEl.id = imageName;
imageEl.src = imageDTO.image_url;
} catch {
this.onError();
}
}
destroy() {
this.konvaImageGroup.destroy();
}
}

View File

@ -19,10 +19,13 @@ import {
PREVIEW_TOOL_GROUP_ID,
} from 'features/controlLayers/konva/naming';
import type { KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import type { CanvasV2State } from 'features/controlLayers/store/types';
import { createImageObjectGroup, updateImageSource } from 'features/controlLayers/konva/renderers/objects';
import type { CanvasEntity, CanvasV2State, Position, RgbaColor } from 'features/controlLayers/store/types';
import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { IRect } from 'konva/lib/types';
import { atom } from 'nanostores';
import { assert } from 'tsafe';
/**
* Creates the konva preview layer.
@ -511,3 +514,230 @@ export const getRenderDocumentOverlay = (manager: KonvaNodeManager) => {
return renderDocumentOverlay;
};
export const createStagingArea = (): KonvaNodeManager['preview']['stagingArea'] => {
const group = new Konva.Group({ id: 'staging_area_group', listening: false });
return { group, image: null };
};
export const getRenderStagingArea = async (manager: KonvaNodeManager) => {
const { getStagingAreaState } = manager.stateApi;
const stagingArea = getStagingAreaState();
if (!stagingArea || stagingArea.selectedImageIndex === null) {
if (manager.preview.stagingArea.image) {
manager.preview.stagingArea.image.konvaImageGroup.visible(false);
manager.preview.stagingArea.image = null;
}
return;
}
if (stagingArea.selectedImageIndex) {
const imageDTO = stagingArea.images[stagingArea.selectedImageIndex];
assert(imageDTO, 'Image must exist');
if (manager.preview.stagingArea.image) {
if (manager.preview.stagingArea.image.imageName !== imageDTO.image_name) {
await updateImageSource({
objectRecord: manager.preview.stagingArea.image,
image: imageDTOToImageWithDims(imageDTO),
});
}
} else {
manager.preview.stagingArea.image = await createImageObjectGroup({
obj: imageDTOToImageObject(imageDTO),
name: imageDTO.image_name,
});
}
}
};
export class KonvaPreview {
konvaLayer: Konva.Layer;
bbox: {
group: Konva.Group;
rect: Konva.Rect;
transformer: Konva.Transformer;
};
tool: {
group: Konva.Group;
brush: {
group: Konva.Group;
fill: Konva.Circle;
innerBorder: Konva.Circle;
outerBorder: Konva.Circle;
};
rect: {
rect: Konva.Rect;
};
};
documentOverlay: {
group: Konva.Group;
innerRect: Konva.Rect;
outerRect: Konva.Rect;
};
stagingArea: {
group: Konva.Group;
// image: KonvaImage | null;
};
constructor(
stage: Konva.Stage,
getBbox: () => IRect,
onBboxTransformed: (bbox: IRect) => void,
getShiftKey: () => boolean,
getCtrlKey: () => boolean,
getMetaKey: () => boolean,
getAltKey: () => boolean
) {
this.konvaLayer = createPreviewLayer();
this.bbox = createBboxNodes(stage, getBbox, onBboxTransformed, getShiftKey, getCtrlKey, getMetaKey, getAltKey);
this.tool = createToolPreviewNodes();
this.documentOverlay = createDocumentOverlay();
this.stagingArea = createStagingArea();
}
renderBbox(bbox: CanvasV2State['bbox'], toolState: CanvasV2State['tool']) {
this.bbox.group.listening(toolState.selected === 'bbox');
// This updates the bbox during transformation
this.bbox.rect.setAttrs({
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
scaleX: 1,
scaleY: 1,
listening: toolState.selected === 'bbox',
});
this.bbox.transformer.setAttrs({
listening: toolState.selected === 'bbox',
enabledAnchors: toolState.selected === 'bbox' ? ALL_ANCHORS : NO_ANCHORS,
});
}
scaleToolPreview(stage: Konva.Stage, toolState: CanvasV2State['tool']) {
const scale = stage.scaleX();
const radius = (toolState.selected === 'brush' ? toolState.brush.width : toolState.eraser.width) / 2;
this.tool.brush.innerBorder.strokeWidth(BRUSH_ERASER_BORDER_WIDTH / scale);
this.tool.brush.outerBorder.setAttrs({
strokeWidth: BRUSH_ERASER_BORDER_WIDTH / scale,
radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale,
});
}
renderToolPreview(
stage: Konva.Stage,
renderedEntityCount: number,
toolState: CanvasV2State['tool'],
currentFill: RgbaColor,
selectedEntity: CanvasEntity | null,
cursorPos: Position | null,
lastMouseDownPos: Position | null,
isDrawing: boolean,
isMouseDown: boolean
) {
const tool = toolState.selected;
const isDrawableEntity =
selectedEntity?.type === 'regional_guidance' ||
selectedEntity?.type === 'layer' ||
selectedEntity?.type === 'inpaint_mask';
// Update the stage's pointer style
if (tool === 'view') {
// View gets a hand
stage.container().style.cursor = isMouseDown ? 'grabbing' : 'grab';
} else if (renderedEntityCount === 0) {
// We have no layers, so we should not render any tool
stage.container().style.cursor = 'default';
} else if (!isDrawableEntity) {
// Non-drawable layers don't have tools
stage.container().style.cursor = 'not-allowed';
} else if (tool === 'move') {
// Move tool gets a pointer
stage.container().style.cursor = 'default';
} else if (tool === 'rect') {
// Rect gets a crosshair
stage.container().style.cursor = 'crosshair';
} else if (tool === 'brush' || tool === 'eraser') {
// Hide the native cursor and use the konva-rendered brush preview
stage.container().style.cursor = 'none';
} else if (tool === 'bbox') {
stage.container().style.cursor = 'default';
}
stage.draggable(tool === 'view');
if (!cursorPos || renderedEntityCount === 0 || !isDrawableEntity) {
// We can bail early if the mouse isn't over the stage or there are no layers
this.tool.group.visible(false);
} else {
this.tool.group.visible(true);
// No need to render the brush preview if the cursor position or color is missing
if (cursorPos && (tool === 'brush' || tool === 'eraser')) {
const scale = stage.scaleX();
// Update the fill circle
const radius = (tool === 'brush' ? toolState.brush.width : toolState.eraser.width) / 2;
this.tool.brush.fill.setAttrs({
x: cursorPos.x,
y: cursorPos.y,
radius,
fill: isDrawing ? '' : rgbaColorToString(currentFill),
globalCompositeOperation: tool === 'brush' ? 'source-over' : 'destination-out',
});
// Update the inner border of the brush preview
this.tool.brush.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y, radius });
// Update the outer border of the brush preview
this.tool.brush.outerBorder.setAttrs({
x: cursorPos.x,
y: cursorPos.y,
radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale,
});
this.scaleToolPreview(stage, toolState);
this.tool.brush.group.visible(true);
} else {
this.tool.brush.group.visible(false);
}
if (cursorPos && lastMouseDownPos && tool === 'rect') {
this.tool.rect.rect.setAttrs({
x: Math.min(cursorPos.x, lastMouseDownPos.x),
y: Math.min(cursorPos.y, lastMouseDownPos.y),
width: Math.abs(cursorPos.x - lastMouseDownPos.x),
height: Math.abs(cursorPos.y - lastMouseDownPos.y),
fill: rgbaColorToString(currentFill),
visible: true,
});
} else {
this.tool.rect.rect.visible(false);
}
}
}
renderDocumentOverlay(stage: Konva.Stage, document: CanvasV2State['document']) {
this.documentOverlay.group.zIndex(0);
const x = stage.x();
const y = stage.y();
const width = stage.width();
const height = stage.height();
const scale = stage.scaleX();
this.documentOverlay.outerRect.setAttrs({
offsetX: x / scale,
offsetY: y / scale,
width: width / scale,
height: height / scale,
});
this.documentOverlay.innerRect.setAttrs({
x: 0,
y: 0,
width: document.width,
height: document.height,
});
}
}

View File

@ -1,257 +1,191 @@
import { rgbColorToString } from 'common/util/colorCodeTransformers';
import {
COMPOSITING_RECT_NAME,
RG_LAYER_BRUSH_LINE_NAME,
RG_LAYER_ERASER_LINE_NAME,
RG_LAYER_NAME,
RG_LAYER_OBJECT_GROUP_NAME,
RG_LAYER_RECT_SHAPE_NAME,
} from 'features/controlLayers/konva/naming';
import type { KonvaEntityAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { getObjectGroupId } from 'features/controlLayers/konva/naming';
import type { StateApi } from 'features/controlLayers/konva/nodeManager';
import { getLayerBboxFast } from 'features/controlLayers/konva/renderers/bbox';
import {
createObjectGroup,
getBrushLine,
getEraserLine,
getRectShape,
} from 'features/controlLayers/konva/renderers/objects';
import { KonvaBrushLine, KonvaEraserLine, KonvaRect } from 'features/controlLayers/konva/renderers/objects';
import { mapId } from 'features/controlLayers/konva/util';
import type {
CanvasEntity,
CanvasEntityIdentifier,
PosChangedArg,
RegionEntity,
Tool,
} from 'features/controlLayers/store/types';
import type { CanvasEntityIdentifier, RegionEntity, Tool } from 'features/controlLayers/store/types';
import Konva from 'konva';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
/**
* Creates the "compositing rect" for a regional guidance layer.
* @param konvaLayer The konva layer
*/
const createCompositingRect = (konvaLayer: Konva.Layer): Konva.Rect => {
const compositingRect = new Konva.Rect({ name: COMPOSITING_RECT_NAME, listening: false });
konvaLayer.add(compositingRect);
return compositingRect;
};
export class KonvaRegion {
id: string;
konvaLayer: Konva.Layer;
konvaObjectGroup: Konva.Group;
compositingRect: Konva.Rect;
objects: Map<string, KonvaBrushLine | KonvaEraserLine | KonvaRect>;
/**
* Gets a region's konva nodes and entity adapter, creating them if they do not exist.
* @param stage The konva stage
* @param entity The regional guidance layer state
* @param onLayerPosChanged Callback for when the layer's position changes
* @returns The konva entity adapter for the region
*/
const getRegion = (
manager: KonvaNodeManager,
entity: RegionEntity,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): KonvaEntityAdapter => {
const adapter = manager.get(entity.id);
if (adapter) {
return adapter;
}
// This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({
id: entity.id,
name: RG_LAYER_NAME,
draggable: true,
dragDistance: 0,
});
constructor(entity: RegionEntity, onPosChanged: StateApi['onPosChanged']) {
this.id = entity.id;
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
if (onPosChanged) {
konvaLayer.on('dragend', function (e) {
this.konvaLayer = new Konva.Layer({
id: entity.id,
draggable: true,
dragDistance: 0,
});
// When a drag on the layer finishes, update the layer's position in state. During the drag, konva handles changing
// the position - we do not need to call this on the `dragmove` event.
this.konvaLayer.on('dragend', function (e) {
onPosChanged({ id: entity.id, x: Math.floor(e.target.x()), y: Math.floor(e.target.y()) }, 'regional_guidance');
});
this.konvaObjectGroup = new Konva.Group({
id: getObjectGroupId(this.konvaLayer.id(), uuidv4()),
listening: false,
});
this.konvaLayer.add(this.konvaObjectGroup);
this.compositingRect = new Konva.Rect({ listening: false });
this.konvaLayer.add(this.compositingRect);
this.objects = new Map();
}
const konvaObjectGroup = createObjectGroup(konvaLayer, RG_LAYER_OBJECT_GROUP_NAME);
return manager.add(entity, konvaLayer, konvaObjectGroup);
};
destroy(): void {
this.konvaLayer.destroy();
}
/**
* Renders a region.
* @param stage The konva stage
* @param entity The regional guidance layer state
* @param globalMaskLayerOpacity The global mask layer opacity
* @param tool The current tool
* @param onPosChanged Callback for when the layer's position changes
*/
export const renderRegion = (
manager: KonvaNodeManager,
entity: RegionEntity,
globalMaskLayerOpacity: number,
tool: Tool,
selectedEntityIdentifier: CanvasEntityIdentifier | null,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): void => {
const adapter = getRegion(manager, entity, onPosChanged);
async render(
regionState: RegionEntity,
selectedTool: Tool,
selectedEntityIdentifier: CanvasEntityIdentifier | null,
maskOpacity: number
) {
// Update the layer's position and listening state
this.konvaLayer.setAttrs({
listening: selectedTool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(regionState.x),
y: Math.floor(regionState.y),
});
// Update the layer's position and listening state
adapter.konvaLayer.setAttrs({
listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(entity.x),
y: Math.floor(entity.y),
});
// Convert the color to a string, stripping the alpha - the object group will handle opacity.
const rgbColor = rgbColorToString(regionState.fill);
// Convert the color to a string, stripping the alpha - the object group will handle opacity.
const rgbColor = rgbColorToString(entity.fill);
// We use caching to handle "global" layer opacity, but caching is expensive and we should only do it when required.
let groupNeedsCache = false;
// We use caching to handle "global" layer opacity, but caching is expensive and we should only do it when required.
let groupNeedsCache = false;
const objectIds = regionState.objects.map(mapId);
// Destroy any objects that are no longer in state
for (const object of this.objects.values()) {
if (!objectIds.includes(object.id)) {
object.destroy();
groupNeedsCache = true;
}
}
const objectIds = entity.objects.map(mapId);
// Destroy any objects that are no longer in state
for (const objectRecord of adapter.getAll()) {
if (!objectIds.includes(objectRecord.id)) {
adapter.destroy(objectRecord.id);
for (const obj of regionState.objects) {
if (obj.type === 'brush_line') {
let brushLine = this.objects.get(obj.id);
assert(brushLine instanceof KonvaBrushLine || brushLine === undefined);
if (!brushLine) {
brushLine = new KonvaBrushLine({ brushLine: obj });
this.objects.set(brushLine.id, brushLine);
this.konvaLayer.add(brushLine.konvaLineGroup);
groupNeedsCache = true;
}
if (obj.points.length !== brushLine.konvaLine.points().length) {
brushLine.konvaLine.points(obj.points);
groupNeedsCache = true;
}
} else if (obj.type === 'eraser_line') {
let eraserLine = this.objects.get(obj.id);
assert(eraserLine instanceof KonvaEraserLine || eraserLine === undefined);
if (!eraserLine) {
eraserLine = new KonvaEraserLine({ eraserLine: obj });
this.objects.set(eraserLine.id, eraserLine);
this.konvaLayer.add(eraserLine.konvaLineGroup);
groupNeedsCache = true;
}
if (obj.points.length !== eraserLine.konvaLine.points().length) {
eraserLine.konvaLine.points(obj.points);
groupNeedsCache = true;
}
} else if (obj.type === 'rect_shape') {
let rect = this.objects.get(obj.id);
assert(rect instanceof KonvaRect || rect === undefined);
if (!rect) {
rect = new KonvaRect({ rectShape: obj });
this.objects.set(rect.id, rect);
this.konvaLayer.add(rect.konvaRect);
groupNeedsCache = true;
}
}
}
// Only update layer visibility if it has changed.
if (this.konvaLayer.visible() !== regionState.isEnabled) {
this.konvaLayer.visible(regionState.isEnabled);
groupNeedsCache = true;
}
}
for (const obj of entity.objects) {
if (obj.type === 'brush_line') {
const objectRecord = getBrushLine(adapter, obj, RG_LAYER_BRUSH_LINE_NAME);
// Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
groupNeedsCache = true;
}
// Only update the color if it has changed.
if (objectRecord.konvaLine.stroke() !== rgbColor) {
objectRecord.konvaLine.stroke(rgbColor);
groupNeedsCache = true;
}
} else if (obj.type === 'eraser_line') {
const objectRecord = getEraserLine(adapter, obj, RG_LAYER_ERASER_LINE_NAME);
// Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache.
if (objectRecord.konvaLine.points().length !== obj.points.length) {
objectRecord.konvaLine.points(obj.points);
groupNeedsCache = true;
}
// Only update the color if it has changed.
if (objectRecord.konvaLine.stroke() !== rgbColor) {
objectRecord.konvaLine.stroke(rgbColor);
groupNeedsCache = true;
}
} else if (obj.type === 'rect_shape') {
const objectRecord = getRectShape(adapter, obj, RG_LAYER_RECT_SHAPE_NAME);
// Only update the color if it has changed.
if (objectRecord.konvaRect.fill() !== rgbColor) {
objectRecord.konvaRect.fill(rgbColor);
groupNeedsCache = true;
}
}
}
// Only update layer visibility if it has changed.
if (adapter.konvaLayer.visible() !== entity.isEnabled) {
adapter.konvaLayer.visible(entity.isEnabled);
groupNeedsCache = true;
}
if (adapter.konvaObjectGroup.getChildren().length === 0) {
// No objects - clear the cache to reset the previous pixel data
adapter.konvaObjectGroup.clearCache();
return;
}
const compositingRect =
adapter.konvaLayer.findOne<Konva.Rect>(`.${COMPOSITING_RECT_NAME}`) ?? createCompositingRect(adapter.konvaLayer);
const isSelected = selectedEntityIdentifier?.id === entity.id;
/**
* When the group is selected, we use a rect of the selected preview color, composited over the shapes. This allows
* shapes to render as a "raster" layer with all pixels drawn at the same color and opacity.
*
* Without this special handling, each shape is drawn individually with the given opacity, atop the other shapes. The
* effect is like if you have a Photoshop Group consisting of many shapes, each of which has the given opacity.
* Overlapping shapes will have their colors blended together, and the final color is the result of all the shapes.
*
* Instead, with the special handling, the effect is as if you drew all the shapes at 100% opacity, flattened them to
* a single raster image, and _then_ applied the 50% opacity.
*/
if (isSelected && tool !== 'move') {
// We must clear the cache first so Konva will re-draw the group with the new compositing rect
if (adapter.konvaObjectGroup.isCached()) {
adapter.konvaObjectGroup.clearCache();
}
// The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work
adapter.konvaObjectGroup.opacity(1);
compositingRect.setAttrs({
// The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already
...(!entity.bboxNeedsUpdate && entity.bbox ? entity.bbox : getLayerBboxFast(adapter.konvaLayer)),
fill: rgbColor,
opacity: globalMaskLayerOpacity,
// Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
globalCompositeOperation: 'source-in',
visible: true,
// This rect must always be on top of all other shapes
zIndex: adapter.konvaObjectGroup.getChildren().length,
});
} else {
// The compositing rect should only be shown when the layer is selected.
compositingRect.visible(false);
// Cache only if needed - or if we are on this code path and _don't_ have a cache
if (groupNeedsCache || !adapter.konvaObjectGroup.isCached()) {
adapter.konvaObjectGroup.cache();
}
// Updating group opacity does not require re-caching
adapter.konvaObjectGroup.opacity(globalMaskLayerOpacity);
}
// const bboxRect =
// regionMap.konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(rg, regionMap.konvaLayer);
// if (rg.bbox) {
// const active = !rg.bboxNeedsUpdate && isSelected && tool === 'move';
// bboxRect.setAttrs({
// visible: active,
// listening: active,
// x: rg.bbox.x,
// y: rg.bbox.y,
// width: rg.bbox.width,
// height: rg.bbox.height,
// stroke: isSelected ? BBOX_SELECTED_STROKE : '',
// });
// } else {
// bboxRect.visible(false);
// }
};
/**
* Gets a function to render all regions.
* @param manager The konva node manager
* @returns A function to render all regions
*/
export const getRenderRegions = (manager: KonvaNodeManager) => {
const { getRegionsState, getMaskOpacity, getToolState, getSelectedEntity, onPosChanged } = manager.stateApi;
function renderRegions(): void {
const { entities } = getRegionsState();
const maskOpacity = getMaskOpacity();
const toolState = getToolState();
const selectedEntity = getSelectedEntity();
// Destroy the konva nodes for nonexistent entities
for (const adapter of manager.getAll('regional_guidance')) {
if (!entities.find((rg) => rg.id === adapter.id)) {
manager.destroy(adapter.id);
}
if (this.objects.size === 0) {
// No objects - clear the cache to reset the previous pixel data
this.konvaObjectGroup.clearCache();
return;
}
for (const entity of entities) {
renderRegion(manager, entity, maskOpacity, toolState.selected, selectedEntity, onPosChanged);
}
}
const isSelected = selectedEntityIdentifier?.id === regionState.id;
return renderRegions;
};
/**
* When the group is selected, we use a rect of the selected preview color, composited over the shapes. This allows
* shapes to render as a "raster" layer with all pixels drawn at the same color and opacity.
*
* Without this special handling, each shape is drawn individually with the given opacity, atop the other shapes. The
* effect is like if you have a Photoshop Group consisting of many shapes, each of which has the given opacity.
* Overlapping shapes will have their colors blended together, and the final color is the result of all the shapes.
*
* Instead, with the special handling, the effect is as if you drew all the shapes at 100% opacity, flattened them to
* a single raster image, and _then_ applied the 50% opacity.
*/
if (isSelected && selectedTool !== 'move') {
// We must clear the cache first so Konva will re-draw the group with the new compositing rect
if (this.konvaObjectGroup.isCached()) {
this.konvaObjectGroup.clearCache();
}
// The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work
this.konvaObjectGroup.opacity(1);
this.compositingRect.setAttrs({
// The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already
...(!regionState.bboxNeedsUpdate && regionState.bbox ? regionState.bbox : getLayerBboxFast(this.konvaLayer)),
fill: rgbColor,
opacity: maskOpacity,
// Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
globalCompositeOperation: 'source-in',
visible: true,
// This rect must always be on top of all other shapes
zIndex: this.objects.size + 1,
});
} else {
// The compositing rect should only be shown when the layer is selected.
this.compositingRect.visible(false);
// Cache only if needed - or if we are on this code path and _don't_ have a cache
if (groupNeedsCache || !this.konvaObjectGroup.isCached()) {
this.konvaObjectGroup.cache();
}
// Updating group opacity does not require re-caching
this.konvaObjectGroup.opacity(maskOpacity);
}
// const bboxRect =
// regionMap.konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(rg, regionMap.konvaLayer);
// if (rg.bbox) {
// const active = !rg.bboxNeedsUpdate && isSelected && tool === 'move';
// bboxRect.setAttrs({
// visible: active,
// listening: active,
// x: rg.bbox.x,
// y: rg.bbox.y,
// width: rg.bbox.width,
// height: rg.bbox.height,
// stroke: isSelected ? BBOX_SELECTED_STROKE : '',
// });
// } else {
// bboxRect.visible(false);
// }
}
}

View File

@ -5,24 +5,9 @@ import { $isDebugging } from 'app/store/nanostores/isDebugging';
import type { RootState } from 'app/store/store';
import { setStageEventHandlers } from 'features/controlLayers/konva/events';
import { KonvaNodeManager, setNodeManager } from 'features/controlLayers/konva/nodeManager';
import { getArrangeEntities } from 'features/controlLayers/konva/renderers/arrange';
import { createBackgroundLayer, getRenderBackground } from 'features/controlLayers/konva/renderers/background';
import { KonvaBackground } from 'features/controlLayers/konva/renderers/background';
import { updateBboxes } from 'features/controlLayers/konva/renderers/bbox';
import { getRenderControlAdapters } from 'features/controlLayers/konva/renderers/controlAdapters';
import { getRenderInpaintMask } from 'features/controlLayers/konva/renderers/inpaintMask';
import { getRenderLayers } from 'features/controlLayers/konva/renderers/layers';
import {
createBboxNodes,
createDocumentOverlay,
createPreviewLayer,
createToolPreviewNodes,
getRenderBbox,
getRenderDocumentOverlay,
getRenderToolPreview,
} from 'features/controlLayers/konva/renderers/preview';
import { getRenderRegions } from 'features/controlLayers/konva/renderers/regions';
import { getFitDocumentToStage, getFitStageToContainer } from 'features/controlLayers/konva/renderers/stage';
import { createStagingArea, getRenderStagingArea } from 'features/controlLayers/konva/renderers/stagingArea';
import { KonvaPreview } from 'features/controlLayers/konva/renderers/preview';
import {
$stageAttrs,
bboxChanged,
@ -299,23 +284,7 @@ export const initializeRenderer = (
spaceKey = val;
};
const manager = new KonvaNodeManager(stage, container);
setNodeManager(manager);
manager.background = { layer: createBackgroundLayer() };
manager.stage.add(manager.background.layer);
manager.preview = {
layer: createPreviewLayer(),
bbox: createBboxNodes(stage, getBbox, onBboxTransformed, $shift.get, $ctrl.get, $meta.get, $alt.get),
tool: createToolPreviewNodes(),
documentOverlay: createDocumentOverlay(),
stagingArea: createStagingArea(),
};
manager.preview.layer.add(manager.preview.bbox.group);
manager.preview.layer.add(manager.preview.tool.group);
manager.preview.layer.add(manager.preview.documentOverlay.group);
manager.stage.add(manager.preview.layer);
manager.stateApi = {
const stateApi: KonvaNodeManager['stateApi'] = {
// Read-only state
getToolState,
getSelectedEntity,
@ -365,6 +334,26 @@ export const initializeRenderer = (
onLayerImageCached,
};
const manager = new KonvaNodeManager(stage, container, stateApi);
setNodeManager(manager);
console.log(manager);
manager.background = new KonvaBackground();
manager.stage.add(manager.background.konvaLayer);
manager.preview = new KonvaPreview({
stage,
getBbox,
onBboxTransformed,
getShiftKey: $shift.get,
getCtrlKey: $ctrl.get,
getMetaKey: $meta.get,
getAltKey: $alt.get,
});
manager.preview.konvaLayer.add(manager.preview.bbox.group);
manager.preview.konvaLayer.add(manager.preview.tool.group);
manager.preview.konvaLayer.add(manager.preview.documentOverlay.group);
manager.stage.add(manager.preview.konvaLayer);
const cleanupListeners = setStageEventHandlers(manager);
// Calculating bounding boxes is expensive, must be debounced to not block the UI thread during a user interaction.
@ -372,21 +361,6 @@ export const initializeRenderer = (
// the entire state over when needed.
const debouncedUpdateBboxes = debounce(updateBboxes, 300);
manager.konvaApi = {
renderRegions: getRenderRegions(manager),
renderLayers: getRenderLayers(manager),
renderControlAdapters: getRenderControlAdapters(manager),
renderInpaintMask: getRenderInpaintMask(manager),
renderBbox: getRenderBbox(manager),
renderToolPreview: getRenderToolPreview(manager),
renderDocumentOverlay: getRenderDocumentOverlay(manager),
renderStagingArea: getRenderStagingArea(manager),
renderBackground: getRenderBackground(manager),
arrangeEntities: getArrangeEntities(manager),
fitDocumentToStage: getFitDocumentToStage(manager),
fitStageToContainer: getFitStageToContainer(manager),
};
const renderCanvas = () => {
canvasV2 = store.getState().canvasV2;
@ -404,7 +378,7 @@ export const initializeRenderer = (
canvasV2.tool.selected !== prevCanvasV2.tool.selected
) {
logIfDebugging('Rendering layers');
manager.konvaApi.renderLayers();
manager.renderLayers();
}
if (
@ -414,7 +388,7 @@ export const initializeRenderer = (
canvasV2.tool.selected !== prevCanvasV2.tool.selected
) {
logIfDebugging('Rendering regions');
manager.konvaApi.renderRegions();
manager.renderRegions();
}
if (
@ -424,22 +398,22 @@ export const initializeRenderer = (
canvasV2.tool.selected !== prevCanvasV2.tool.selected
) {
logIfDebugging('Rendering inpaint mask');
manager.konvaApi.renderInpaintMask();
manager.renderInpaintMask();
}
if (isFirstRender || canvasV2.controlAdapters.entities !== prevCanvasV2.controlAdapters.entities) {
logIfDebugging('Rendering control adapters');
manager.konvaApi.renderControlAdapters();
manager.renderControlAdapters();
}
if (isFirstRender || canvasV2.document !== prevCanvasV2.document) {
logIfDebugging('Rendering document bounds overlay');
manager.konvaApi.renderDocumentOverlay();
manager.renderDocumentOverlay();
}
if (isFirstRender || canvasV2.bbox !== prevCanvasV2.bbox || canvasV2.tool.selected !== prevCanvasV2.tool.selected) {
logIfDebugging('Rendering generation bbox');
manager.konvaApi.renderBbox();
manager.renderBbox();
}
if (
@ -459,7 +433,7 @@ export const initializeRenderer = (
canvasV2.regions.entities !== prevCanvasV2.regions.entities
) {
logIfDebugging('Arranging entities');
manager.konvaApi.arrangeEntities();
manager.arrangeEntities();
}
prevCanvasV2 = canvasV2;
@ -473,16 +447,16 @@ export const initializeRenderer = (
// We can use a resize observer to ensure the stage always fits the container. We also need to re-render the bg and
// document bounds overlay when the stage is resized.
const resizeObserver = new ResizeObserver(manager.konvaApi.fitStageToContainer);
const resizeObserver = new ResizeObserver(manager.fitStageToContainer);
resizeObserver.observe(container);
manager.konvaApi.fitStageToContainer();
manager.fitStageToContainer();
const unsubscribeRenderer = subscribe(renderCanvas);
logIfDebugging('First render of konva stage');
// On first render, the document should be fit to the stage.
manager.konvaApi.fitDocumentToStage();
manager.konvaApi.renderToolPreview();
manager.fitDocumentToStage();
manager.renderToolPreview();
renderCanvas();
return () => {

View File

@ -45,7 +45,7 @@ export const getFitStageToContainer = (manager: KonvaNodeManager) => {
scale: stage.scaleX(),
});
manager.konvaApi.renderBackground();
manager.konvaApi.renderDocumentOverlay();
manager.renderDocumentOverlay();
}
return fitStageToContainer;

View File

@ -2,7 +2,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 { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import { DEFAULT_RGBA_COLOR, imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
import { zModelIdentifierField } from 'features/nodes/types/common';
import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas';
import type { IRect } from 'konva/lib/types';
@ -309,7 +309,7 @@ export const regionsReducers = {
},
rgBrushLineAdded: {
reducer: (state, action: PayloadAction<BrushLineAddedArg & { lineId: string }>) => {
const { id, points, lineId, color, width, clip } = action.payload;
const { id, points, lineId, width, clip } = action.payload;
const rg = selectRG(state, id);
if (!rg) {
return;
@ -319,7 +319,7 @@ export const regionsReducers = {
type: 'brush_line',
points,
strokeWidth: width,
color,
color: DEFAULT_RGBA_COLOR,
clip,
});
rg.bboxNeedsUpdate = true;
@ -366,7 +366,7 @@ export const regionsReducers = {
},
rgRectAdded: {
reducer: (state, action: PayloadAction<RectShapeAddedArg & { rectId: string }>) => {
const { id, rect, rectId, color } = action.payload;
const { id, rect, rectId } = action.payload;
if (rect.height === 0 || rect.width === 0) {
// Ignore zero-area rectangles
return;
@ -379,7 +379,7 @@ export const regionsReducers = {
type: 'rect_shape',
id: getRectShapeId(id, rectId),
...rect,
color,
color: DEFAULT_RGBA_COLOR,
});
rg.bboxNeedsUpdate = true;
rg.imageCache = null;