diff --git a/invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx b/invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx index cd0c455b55..42f99875a3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx @@ -1,18 +1,18 @@ import type { SyncableMap } from 'common/util/SyncableMap/SyncableMap'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; -import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { PropsWithChildren } from 'react'; import { createContext, memo, useContext, useMemo, useSyncExternalStore } from 'react'; import { assert } from 'tsafe'; -const EntityAdapterContext = createContext(null); +const EntityAdapterContext = createContext(null); export const EntityLayerAdapterGate = memo(({ children }: PropsWithChildren) => { const canvasManager = useCanvasManager(); const entityIdentifier = useEntityIdentifierContext(); - const store = useMemo>(() => { + const store = useMemo>(() => { if (entityIdentifier.type === 'raster_layer') { return canvasManager.adapters.rasterLayers; } @@ -45,7 +45,7 @@ EntityLayerAdapterGate.displayName = 'EntityLayerAdapterGate'; export const EntityMaskAdapterGate = memo(({ children }: PropsWithChildren) => { const canvasManager = useCanvasManager(); const entityIdentifier = useEntityIdentifierContext(); - const store = useMemo>(() => { + const store = useMemo>(() => { if (entityIdentifier.type === 'inpaint_mask') { return canvasManager.adapters.inpaintMasks; } @@ -75,7 +75,7 @@ EntityMaskAdapterGate.displayName = 'EntityMaskAdapterGate'; // return adapter; // }; -export const useEntityAdapter = (): CanvasLayerAdapter | CanvasMaskAdapter => { +export const useEntityAdapter = (): CanvasEntityLayerAdapter | CanvasEntityMaskAdapter => { const adapter = useContext(EntityAdapterContext); assert(adapter, 'useEntityAdapter must be used within a CanvasRasterLayerAdapterGate'); return adapter; diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useEntityAdapter.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useEntityAdapter.ts index 9913faa3a4..246156e8ee 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useEntityAdapter.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useEntityAdapter.ts @@ -1,11 +1,13 @@ import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; -import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import { useMemo } from 'react'; import { assert } from 'tsafe'; -export const useEntityAdapter = (entityIdentifier: CanvasEntityIdentifier): CanvasLayerAdapter | CanvasMaskAdapter => { +export const useEntityAdapter = ( + entityIdentifier: CanvasEntityIdentifier +): CanvasEntityLayerAdapter | CanvasEntityMaskAdapter => { const canvasManager = useCanvasManager(); const adapter = useMemo(() => { diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts index b8f0bd6b2d..042921eabc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts @@ -1,11 +1,11 @@ import { getArbitraryBaseColor } from '@invoke-ai/ui-library'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import Konva from 'konva'; import type { Logger } from 'roarr'; -export class CanvasBackgroundModule extends CanvasModuleBase { +export class CanvasBackgroundModule extends CanvasModuleABC { readonly type = 'background'; static GRID_LINE_COLOR_COARSE = getArbitraryBaseColor(27); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts index a84ba5c713..a9512f626d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts @@ -1,7 +1,7 @@ import type { SerializableObject } from 'common/types'; import { roundToMultiple, roundToMultipleMin } from 'common/util/roundDownToMultiple'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { Rect } from 'features/controlLayers/store/types'; @@ -23,7 +23,7 @@ const ALL_ANCHORS: string[] = [ const CORNER_ANCHORS: string[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right']; const NO_ANCHORS: string[] = []; -export class CanvasBboxModule extends CanvasModuleBase { +export class CanvasBboxModule extends CanvasModuleABC { readonly type = 'bbox'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCacheModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCacheModule.ts index 90feeed82b..86f3011ca9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCacheModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCacheModule.ts @@ -1,11 +1,11 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { GenerationMode } from 'features/controlLayers/store/types'; import { LRUCache } from 'lru-cache'; import type { Logger } from 'roarr'; -export class CanvasCacheModule extends CanvasModuleBase { +export class CanvasCacheModule extends CanvasModuleABC { readonly type = 'cache'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts index 2a93e79b14..3302e783f2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts @@ -1,6 +1,6 @@ import type { SerializableObject } from 'common/types'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { canvasToBlob, canvasToImageData, @@ -15,7 +15,7 @@ import type { ImageDTO } from 'services/api/types'; import stableHash from 'stable-hash'; import { assert } from 'tsafe'; -export class CanvasCompositorModule extends CanvasModuleBase { +export class CanvasCompositorModule extends CanvasModuleABC { readonly type = 'compositor'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayerAdapter.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityLayerAdapter.ts similarity index 90% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayerAdapter.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityLayerAdapter.ts index 50ef8faa47..3f59044bbc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayerAdapter.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityLayerAdapter.ts @@ -1,9 +1,9 @@ import type { SerializableObject } from 'common/types'; import { deepClone } from 'common/util/deepClone'; +import { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; +import { CanvasEntityTransformer } from 'features/controlLayers/konva/CanvasEntityTransformer'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; -import { CanvasTransformer } from 'features/controlLayers/konva/CanvasTransformer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getLastPointOfLine } from 'features/controlLayers/konva/util'; import type { CanvasBrushLineState, @@ -22,8 +22,8 @@ import type { Logger } from 'roarr'; import stableHash from 'stable-hash'; import { assert } from 'tsafe'; -export class CanvasLayerAdapter extends CanvasModuleBase { - readonly type = 'layer_adapter'; +export class CanvasEntityLayerAdapter extends CanvasModuleABC { + readonly type = 'entity_layer_adapter'; id: string; path: string[]; @@ -36,12 +36,12 @@ export class CanvasLayerAdapter extends CanvasModuleBase { konva: { layer: Konva.Layer; }; - transformer: CanvasTransformer; - renderer: CanvasObjectRenderer; + transformer: CanvasEntityTransformer; + renderer: CanvasEntityRenderer; isFirstRender: boolean = true; - constructor(state: CanvasLayerAdapter['state'], manager: CanvasLayerAdapter['manager']) { + constructor(state: CanvasEntityLayerAdapter['state'], manager: CanvasEntityLayerAdapter['manager']) { super(); this.id = state.id; this.manager = manager; @@ -63,8 +63,8 @@ export class CanvasLayerAdapter extends CanvasModuleBase { }), }; - this.renderer = new CanvasObjectRenderer(this); - this.transformer = new CanvasTransformer(this); + this.renderer = new CanvasEntityRenderer(this); + this.transformer = new CanvasEntityTransformer(this); } /** @@ -82,7 +82,7 @@ export class CanvasLayerAdapter extends CanvasModuleBase { this.konva.layer.destroy(); }; - update = async (arg?: { state: CanvasLayerAdapter['state'] }) => { + update = async (arg?: { state: CanvasEntityLayerAdapter['state'] }) => { const state = get(arg, 'state', this.state); if (!this.isFirstRender && state === this.state) { diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasMaskAdapter.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityMaskAdapter.ts similarity index 85% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasMaskAdapter.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityMaskAdapter.ts index cd0f16d73c..45a5cd3bba 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasMaskAdapter.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityMaskAdapter.ts @@ -1,9 +1,9 @@ import type { SerializableObject } from 'common/types'; import { deepClone } from 'common/util/deepClone'; +import { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; +import { CanvasEntityTransformer } from 'features/controlLayers/konva/CanvasEntityTransformer'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; -import { CanvasTransformer } from 'features/controlLayers/konva/CanvasTransformer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getLastPointOfLine } from 'features/controlLayers/konva/util'; import type { CanvasBrushLineState, @@ -21,8 +21,8 @@ import { get, omit } from 'lodash-es'; import type { Logger } from 'roarr'; import stableHash from 'stable-hash'; -export class CanvasMaskAdapter extends CanvasModuleBase { - readonly type = 'mask_adapter'; +export class CanvasEntityMaskAdapter extends CanvasModuleABC { + readonly type = 'entity_mask_adapter'; id: string; path: string[]; @@ -32,8 +32,8 @@ export class CanvasMaskAdapter extends CanvasModuleBase { state: CanvasInpaintMaskState | CanvasRegionalGuidanceState; - transformer: CanvasTransformer; - renderer: CanvasObjectRenderer; + transformer: CanvasEntityTransformer; + renderer: CanvasEntityRenderer; isFirstRender: boolean = true; @@ -41,7 +41,7 @@ export class CanvasMaskAdapter extends CanvasModuleBase { layer: Konva.Layer; }; - constructor(state: CanvasMaskAdapter['state'], manager: CanvasMaskAdapter['manager']) { + constructor(state: CanvasEntityMaskAdapter['state'], manager: CanvasEntityMaskAdapter['manager']) { super(); this.id = state.id; this.manager = manager; @@ -63,8 +63,8 @@ export class CanvasMaskAdapter extends CanvasModuleBase { }), }; - this.renderer = new CanvasObjectRenderer(this); - this.transformer = new CanvasTransformer(this); + this.renderer = new CanvasEntityRenderer(this); + this.transformer = new CanvasEntityTransformer(this); } /** @@ -82,7 +82,7 @@ export class CanvasMaskAdapter extends CanvasModuleBase { this.konva.layer.destroy(); }; - update = async (arg?: { state: CanvasMaskAdapter['state'] }) => { + update = async (arg?: { state: CanvasEntityMaskAdapter['state'] }) => { const state = get(arg, 'state', this.state); if (!this.isFirstRender && state === this.state && state.fill === this.state.fill) { @@ -163,7 +163,7 @@ export class CanvasMaskAdapter extends CanvasModuleBase { }; getHashableState = (): SerializableObject => { - const keysToOmit: (keyof CanvasMaskAdapter['state'])[] = ['fill', 'name', 'opacity']; + const keysToOmit: (keyof CanvasEntityMaskAdapter['state'])[] = ['fill', 'name', 'opacity']; return omit(this.state, keysToOmit); }; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityRenderer.ts similarity index 88% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityRenderer.ts index b586976f1a..5a87d708ac 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityRenderer.ts @@ -1,12 +1,12 @@ import { rgbColorToString } from 'common/util/colorCodeTransformers'; -import { CanvasBrushLineRenderer } from 'features/controlLayers/konva/CanvasBrushLine'; -import { CanvasEraserLineRenderer } from 'features/controlLayers/konva/CanvasEraserLine'; -import { CanvasImageRenderer } from 'features/controlLayers/konva/CanvasImage'; -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import { CanvasRectRenderer } from 'features/controlLayers/konva/CanvasRect'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; +import { CanvasObjectBrushLineRenderer } from 'features/controlLayers/konva/CanvasObjectBrushLineRenderer'; +import { CanvasObjectEraserLineRenderer } from 'features/controlLayers/konva/CanvasObjectEraserLineRenderer'; +import { CanvasObjectImageRenderer } from 'features/controlLayers/konva/CanvasObjectImageRenderer'; +import { CanvasObjectRectRenderer } from 'features/controlLayers/konva/CanvasObjectRectRenderer'; import { LightnessToAlphaFilter } from 'features/controlLayers/konva/filters'; import { getPatternSVG } from 'features/controlLayers/konva/patterns/getPatternSVG'; import { @@ -47,7 +47,11 @@ function setFillPatternImage(shape: Konva.Shape, ...args: Parameters(null); - constructor(parent: CanvasLayerAdapter | CanvasMaskAdapter) { + constructor(parent: CanvasEntityLayerAdapter | CanvasEntityMaskAdapter) { super(); this.id = getPrefixedId(this.type); this.parent = parent; @@ -171,7 +175,7 @@ export class CanvasObjectRenderer extends CanvasModuleBase { // need to update the compositing rect to match the stage. this.subscriptions.add( this.manager.stateApi.$stageAttrs.listen(() => { - if (this.konva.compositing && this.parent.type === 'mask_adapter') { + if (this.konva.compositing && this.parent.type === 'entity_mask_adapter') { this.updateCompositingRectSize(); } }) @@ -282,40 +286,40 @@ export class CanvasObjectRenderer extends CanvasModuleBase { const isFirstRender = !renderer; if (objectState.type === 'brush_line') { - assert(renderer instanceof CanvasBrushLineRenderer || !renderer); + assert(renderer instanceof CanvasObjectBrushLineRenderer || !renderer); if (!renderer) { - renderer = new CanvasBrushLineRenderer(objectState, this); + renderer = new CanvasObjectBrushLineRenderer(objectState, this); this.renderers.set(renderer.id, renderer); this.konva.objectGroup.add(renderer.konva.group); } didRender = renderer.update(objectState, force || isFirstRender); } else if (objectState.type === 'eraser_line') { - assert(renderer instanceof CanvasEraserLineRenderer || !renderer); + assert(renderer instanceof CanvasObjectEraserLineRenderer || !renderer); if (!renderer) { - renderer = new CanvasEraserLineRenderer(objectState, this); + renderer = new CanvasObjectEraserLineRenderer(objectState, this); this.renderers.set(renderer.id, renderer); this.konva.objectGroup.add(renderer.konva.group); } didRender = renderer.update(objectState, force || isFirstRender); } else if (objectState.type === 'rect') { - assert(renderer instanceof CanvasRectRenderer || !renderer); + assert(renderer instanceof CanvasObjectRectRenderer || !renderer); if (!renderer) { - renderer = new CanvasRectRenderer(objectState, this); + renderer = new CanvasObjectRectRenderer(objectState, this); this.renderers.set(renderer.id, renderer); this.konva.objectGroup.add(renderer.konva.group); } didRender = renderer.update(objectState, force || isFirstRender); } else if (objectState.type === 'image') { - assert(renderer instanceof CanvasImageRenderer || !renderer); + assert(renderer instanceof CanvasObjectImageRenderer || !renderer); if (!renderer) { - renderer = new CanvasImageRenderer(objectState, this); + renderer = new CanvasObjectImageRenderer(objectState, this); this.renderers.set(renderer.id, renderer); this.konva.objectGroup.add(renderer.konva.group); } @@ -342,37 +346,37 @@ export class CanvasObjectRenderer extends CanvasModuleBase { } if (this.bufferState.type === 'brush_line') { - assert(this.bufferRenderer instanceof CanvasBrushLineRenderer || !this.bufferRenderer); + assert(this.bufferRenderer instanceof CanvasObjectBrushLineRenderer || !this.bufferRenderer); if (!this.bufferRenderer) { - this.bufferRenderer = new CanvasBrushLineRenderer(this.bufferState, this); + this.bufferRenderer = new CanvasObjectBrushLineRenderer(this.bufferState, this); this.konva.bufferGroup.add(this.bufferRenderer.konva.group); } didRender = this.bufferRenderer.update(this.bufferState, true); } else if (this.bufferState.type === 'eraser_line') { - assert(this.bufferRenderer instanceof CanvasEraserLineRenderer || !this.bufferRenderer); + assert(this.bufferRenderer instanceof CanvasObjectEraserLineRenderer || !this.bufferRenderer); if (!this.bufferRenderer) { - this.bufferRenderer = new CanvasEraserLineRenderer(this.bufferState, this); + this.bufferRenderer = new CanvasObjectEraserLineRenderer(this.bufferState, this); this.konva.bufferGroup.add(this.bufferRenderer.konva.group); } didRender = this.bufferRenderer.update(this.bufferState, true); } else if (this.bufferState.type === 'rect') { - assert(this.bufferRenderer instanceof CanvasRectRenderer || !this.bufferRenderer); + assert(this.bufferRenderer instanceof CanvasObjectRectRenderer || !this.bufferRenderer); if (!this.bufferRenderer) { - this.bufferRenderer = new CanvasRectRenderer(this.bufferState, this); + this.bufferRenderer = new CanvasObjectRectRenderer(this.bufferState, this); this.konva.bufferGroup.add(this.bufferRenderer.konva.group); } didRender = this.bufferRenderer.update(this.bufferState, true); } else if (this.bufferState.type === 'image') { - assert(this.bufferRenderer instanceof CanvasImageRenderer || !this.bufferRenderer); + assert(this.bufferRenderer instanceof CanvasObjectImageRenderer || !this.bufferRenderer); if (!this.bufferRenderer) { - this.bufferRenderer = new CanvasImageRenderer(this.bufferState, this); + this.bufferRenderer = new CanvasObjectImageRenderer(this.bufferState, this); this.konva.bufferGroup.add(this.bufferRenderer.konva.group); } didRender = await this.bufferRenderer.update(this.bufferState, true); @@ -478,9 +482,9 @@ export class CanvasObjectRenderer extends CanvasModuleBase { needsPixelBbox = (): boolean => { let needsPixelBbox = false; for (const renderer of this.renderers.values()) { - const isEraserLine = renderer instanceof CanvasEraserLineRenderer; - const isImage = renderer instanceof CanvasImageRenderer; - const hasClip = renderer instanceof CanvasBrushLineRenderer && renderer.state.clip; + const isEraserLine = renderer instanceof CanvasObjectEraserLineRenderer; + const isImage = renderer instanceof CanvasObjectImageRenderer; + const hasClip = renderer instanceof CanvasObjectBrushLineRenderer && renderer.state.clip; if (isEraserLine || hasClip || isImage) { needsPixelBbox = true; break; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityTransformer.ts similarity index 92% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityTransformer.ts index b5daddf355..f49b4b2f0e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityTransformer.ts @@ -1,7 +1,7 @@ -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { canvasToImageData, getEmptyRect, getPrefixedId } from 'features/controlLayers/konva/util'; import type { Coordinate, Rect } from 'features/controlLayers/store/types'; import Konva from 'konva'; @@ -18,14 +18,14 @@ import type { Logger } from 'roarr'; * * It renders an outline when dragging and resizing the entity, with transform anchors for resizing and rotation. */ -export class CanvasTransformer extends CanvasModuleBase { +export class CanvasEntityTransformer extends CanvasModuleABC { readonly type = 'entity_transformer'; static RECT_CALC_DEBOUNCE_MS = 300; static OUTLINE_PADDING = 0; static OUTLINE_COLOR = 'hsl(200 76% 50% / 1)'; // invokeBlue.500 - static ANCHOR_FILL_COLOR = CanvasTransformer.OUTLINE_COLOR; + static ANCHOR_FILL_COLOR = CanvasEntityTransformer.OUTLINE_COLOR; static ANCHOR_STROKE_COLOR = 'hsl(200 76% 77% / 1)'; // invokeBlue.200 static ANCHOR_CORNER_RADIUS_RATIO = 0.5; static ANCHOR_STROKE_WIDTH = 2; @@ -39,7 +39,7 @@ export class CanvasTransformer extends CanvasModuleBase { id: string; path: string[]; - parent: CanvasLayerAdapter | CanvasMaskAdapter; + parent: CanvasEntityLayerAdapter | CanvasEntityMaskAdapter; manager: CanvasManager; log: Logger; @@ -98,7 +98,7 @@ export class CanvasTransformer extends CanvasModuleBase { outlineRect: Konva.Rect; }; - constructor(parent: CanvasLayerAdapter | CanvasMaskAdapter) { + constructor(parent: CanvasEntityLayerAdapter | CanvasEntityMaskAdapter) { super(); this.id = getPrefixedId(this.type); this.parent = parent; @@ -112,7 +112,7 @@ export class CanvasTransformer extends CanvasModuleBase { listening: false, draggable: false, name: `${this.type}:outline_rect`, - stroke: CanvasTransformer.OUTLINE_COLOR, + stroke: CanvasEntityTransformer.OUTLINE_COLOR, perfectDrawEnabled: false, strokeHitEnabled: false, }), @@ -128,36 +128,38 @@ export class CanvasTransformer extends CanvasModuleBase { // Transforming will retain aspect ratio only when shift is held keepRatio: false, // The padding is the distance between the transformer bbox and the nodes - padding: CanvasTransformer.OUTLINE_PADDING, + padding: CanvasEntityTransformer.OUTLINE_PADDING, // This is `invokeBlue.400` - stroke: CanvasTransformer.OUTLINE_COLOR, - anchorFill: CanvasTransformer.ANCHOR_FILL_COLOR, - anchorStroke: CanvasTransformer.ANCHOR_STROKE_COLOR, - anchorStrokeWidth: CanvasTransformer.ANCHOR_STROKE_WIDTH, - anchorSize: CanvasTransformer.RESIZE_ANCHOR_SIZE, - anchorCornerRadius: CanvasTransformer.RESIZE_ANCHOR_SIZE * CanvasTransformer.ANCHOR_CORNER_RADIUS_RATIO, + stroke: CanvasEntityTransformer.OUTLINE_COLOR, + anchorFill: CanvasEntityTransformer.ANCHOR_FILL_COLOR, + anchorStroke: CanvasEntityTransformer.ANCHOR_STROKE_COLOR, + anchorStrokeWidth: CanvasEntityTransformer.ANCHOR_STROKE_WIDTH, + anchorSize: CanvasEntityTransformer.RESIZE_ANCHOR_SIZE, + anchorCornerRadius: + CanvasEntityTransformer.RESIZE_ANCHOR_SIZE * CanvasEntityTransformer.ANCHOR_CORNER_RADIUS_RATIO, // This function is called for each anchor to style it (and do anything else you might want to do). anchorStyleFunc: (anchor) => { // Give the rotater special styling if (anchor.hasName('rotater')) { anchor.setAttrs({ - height: CanvasTransformer.ROTATE_ANCHOR_SIZE, - width: CanvasTransformer.ROTATE_ANCHOR_SIZE, - cornerRadius: CanvasTransformer.ROTATE_ANCHOR_SIZE * CanvasTransformer.ANCHOR_CORNER_RADIUS_RATIO, - fill: CanvasTransformer.ROTATE_ANCHOR_FILL_COLOR, - stroke: CanvasTransformer.ANCHOR_FILL_COLOR, - offsetX: CanvasTransformer.ROTATE_ANCHOR_SIZE / 2, - offsetY: CanvasTransformer.ROTATE_ANCHOR_SIZE / 2, + height: CanvasEntityTransformer.ROTATE_ANCHOR_SIZE, + width: CanvasEntityTransformer.ROTATE_ANCHOR_SIZE, + cornerRadius: + CanvasEntityTransformer.ROTATE_ANCHOR_SIZE * CanvasEntityTransformer.ANCHOR_CORNER_RADIUS_RATIO, + fill: CanvasEntityTransformer.ROTATE_ANCHOR_FILL_COLOR, + stroke: CanvasEntityTransformer.ANCHOR_FILL_COLOR, + offsetX: CanvasEntityTransformer.ROTATE_ANCHOR_SIZE / 2, + offsetY: CanvasEntityTransformer.ROTATE_ANCHOR_SIZE / 2, }); } // Add some padding to the hit area of the anchors anchor.hitFunc((context) => { context.beginPath(); context.rect( - -CanvasTransformer.ANCHOR_HIT_PADDING, - -CanvasTransformer.ANCHOR_HIT_PADDING, - anchor.width() + CanvasTransformer.ANCHOR_HIT_PADDING * 2, - anchor.height() + CanvasTransformer.ANCHOR_HIT_PADDING * 2 + -CanvasEntityTransformer.ANCHOR_HIT_PADDING, + -CanvasEntityTransformer.ANCHOR_HIT_PADDING, + anchor.width() + CanvasEntityTransformer.ANCHOR_HIT_PADDING * 2, + anchor.height() + CanvasEntityTransformer.ANCHOR_HIT_PADDING * 2 ); context.closePath(); context.fillStrokeShape(anchor); @@ -337,8 +339,8 @@ export class CanvasTransformer extends CanvasModuleBase { // The bbox should be updated to reflect the new position of the interaction rect, taking into account its padding // and border this.konva.outlineRect.setAttrs({ - x: this.konva.proxyRect.x() - this.manager.stage.getScaledPixels(CanvasTransformer.OUTLINE_PADDING), - y: this.konva.proxyRect.y() - this.manager.stage.getScaledPixels(CanvasTransformer.OUTLINE_PADDING), + x: this.konva.proxyRect.x() - this.manager.stage.getScaledPixels(CanvasEntityTransformer.OUTLINE_PADDING), + y: this.konva.proxyRect.y() - this.manager.stage.getScaledPixels(CanvasEntityTransformer.OUTLINE_PADDING), }); // The object group is translated by the difference between the interaction rect's new and old positions (which is @@ -400,7 +402,7 @@ export class CanvasTransformer extends CanvasModuleBase { */ update = (position: Coordinate, bbox: Rect) => { const onePixel = this.manager.stage.getScaledPixels(1); - const bboxPadding = this.manager.stage.getScaledPixels(CanvasTransformer.OUTLINE_PADDING); + const bboxPadding = this.manager.stage.getScaledPixels(CanvasEntityTransformer.OUTLINE_PADDING); this.konva.outlineRect.setAttrs({ x: position.x + bbox.x - bboxPadding, @@ -467,7 +469,7 @@ export class CanvasTransformer extends CanvasModuleBase { */ syncScale = () => { const onePixel = this.manager.stage.getScaledPixels(1); - const bboxPadding = this.manager.stage.getScaledPixels(CanvasTransformer.OUTLINE_PADDING); + const bboxPadding = this.manager.stage.getScaledPixels(CanvasEntityTransformer.OUTLINE_PADDING); this.konva.outlineRect.setAttrs({ x: this.konva.proxyRect.x() - bboxPadding, @@ -672,7 +674,7 @@ export class CanvasTransformer extends CanvasModuleBase { this.updateBbox(); } ); - }, CanvasTransformer.RECT_CALC_DEBOUNCE_MS); + }, CanvasEntityTransformer.RECT_CALC_DEBOUNCE_MS); requestRectCalculation = () => { this.isPendingRectCalculation = true; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts index b0ce426832..c7b70cb9d6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts @@ -1,7 +1,7 @@ import type { SerializableObject } from 'common/types'; -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { CanvasEntityIdentifier, CanvasImageState, FilterConfig } from 'features/controlLayers/store/types'; import { IMAGE_FILTERS, imageDTOToImageObject } from 'features/controlLayers/store/types'; @@ -11,7 +11,7 @@ import { getImageDTO } from 'services/api/endpoints/images'; import type { BatchConfig, ImageDTO, S } from 'services/api/types'; import { assert } from 'tsafe'; -export class CanvasFilterModule extends CanvasModuleBase { +export class CanvasFilterModule extends CanvasModuleABC { readonly type = 'canvas_filter'; id: string; @@ -22,7 +22,7 @@ export class CanvasFilterModule extends CanvasModuleBase { imageState: CanvasImageState | null = null; - $adapter = atom(null); + $adapter = atom(null); $isFiltering = computed(this.$adapter, (adapter) => Boolean(adapter)); $isProcessing = atom(false); $config = atom(IMAGE_FILTERS.canny_image_processor.buildDefaults()); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts index 072a7a5d12..6545cbe834 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts @@ -6,7 +6,7 @@ import { SyncableMap } from 'common/util/SyncableMap/SyncableMap'; import { CanvasCacheModule } from 'features/controlLayers/konva/CanvasCacheModule'; import { CanvasCompositorModule } from 'features/controlLayers/konva/CanvasCompositorModule'; import { CanvasFilterModule } from 'features/controlLayers/konva/CanvasFilterModule'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { CanvasRenderingModule } from 'features/controlLayers/konva/CanvasRenderingModule'; import { CanvasStageModule } from 'features/controlLayers/konva/CanvasStageModule'; import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js'; @@ -16,14 +16,14 @@ import { atom } from 'nanostores'; import type { Logger } from 'roarr'; import { CanvasBackgroundModule } from './CanvasBackgroundModule'; -import type { CanvasLayerAdapter } from './CanvasLayerAdapter'; -import type { CanvasMaskAdapter } from './CanvasMaskAdapter'; +import type { CanvasEntityLayerAdapter } from './CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from './CanvasEntityMaskAdapter'; import { CanvasPreviewModule } from './CanvasPreviewModule'; import { CanvasStateApiModule } from './CanvasStateApiModule'; export const $canvasManager = atom(null); -export class CanvasManager extends CanvasModuleBase { +export class CanvasManager extends CanvasModuleABC { readonly type = 'manager'; id: string; @@ -37,11 +37,11 @@ export class CanvasManager extends CanvasModuleBase { subscriptions = new Set<() => void>(); adapters = { - rasterLayers: new SyncableMap(), - controlLayers: new SyncableMap(), - regionMasks: new SyncableMap(), - inpaintMasks: new SyncableMap(), - getAll: (): (CanvasLayerAdapter | CanvasMaskAdapter)[] => { + rasterLayers: new SyncableMap(), + controlLayers: new SyncableMap(), + regionMasks: new SyncableMap(), + inpaintMasks: new SyncableMap(), + getAll: (): (CanvasEntityLayerAdapter | CanvasEntityMaskAdapter)[] => { return [ ...this.adapters.rasterLayers.values(), ...this.adapters.controlLayers.values(), diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleBase.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleABC.ts similarity index 93% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleBase.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleABC.ts index 894c9622f7..495565fb1e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleBase.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasModuleABC.ts @@ -2,7 +2,7 @@ import type { SerializableObject } from 'common/types'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import type { Logger } from 'roarr'; -export abstract class CanvasModuleBase { +export abstract class CanvasModuleABC { abstract id: string; abstract type: string; abstract path: string[]; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectBrushLineRenderer.ts similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectBrushLineRenderer.ts index 3dac0b77cc..425f1d64b7 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectBrushLineRenderer.ts @@ -1,18 +1,18 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers'; import { deepClone } from 'common/util/deepClone'; +import type { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import type { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasBrushLineState } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { Logger } from 'roarr'; -export class CanvasBrushLineRenderer extends CanvasModuleBase { - readonly type = 'brush_line_renderer'; +export class CanvasObjectBrushLineRenderer extends CanvasModuleABC { + readonly type = 'object_brush_line_renderer'; id: string; path: string[]; - parent: CanvasObjectRenderer; + parent: CanvasEntityRenderer; manager: CanvasManager; log: Logger; subscriptions = new Set<() => void>(); @@ -23,7 +23,7 @@ export class CanvasBrushLineRenderer extends CanvasModuleBase { line: Konva.Line; }; - constructor(state: CanvasBrushLineState, parent: CanvasObjectRenderer) { + constructor(state: CanvasBrushLineState, parent: CanvasEntityRenderer) { super(); const { id, clip } = state; this.id = id; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectEraserLineRenderer.ts similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectEraserLineRenderer.ts index 29b06ab9b6..fca2e4a712 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectEraserLineRenderer.ts @@ -1,17 +1,17 @@ import { deepClone } from 'common/util/deepClone'; +import type { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import type { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasEraserLineState } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { Logger } from 'roarr'; -export class CanvasEraserLineRenderer extends CanvasModuleBase { - readonly type = 'eraser_line_renderer'; +export class CanvasObjectEraserLineRenderer extends CanvasModuleABC { + readonly type = 'object_eraser_line_renderer'; id: string; path: string[]; - parent: CanvasObjectRenderer; + parent: CanvasEntityRenderer; manager: CanvasManager; log: Logger; subscriptions = new Set<() => void>(); @@ -22,7 +22,7 @@ export class CanvasEraserLineRenderer extends CanvasModuleBase { line: Konva.Line; }; - constructor(state: CanvasEraserLineState, parent: CanvasObjectRenderer) { + constructor(state: CanvasEraserLineState, parent: CanvasEntityRenderer) { super(); const { id, clip } = state; this.id = id; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectImageRenderer.ts similarity index 93% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectImageRenderer.ts index 6db8db5a7c..61056bf123 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectImageRenderer.ts @@ -1,9 +1,9 @@ import { Mutex } from 'async-mutex'; import { deepClone } from 'common/util/deepClone'; +import type { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; import type { CanvasFilterModule } from 'features/controlLayers/konva/CanvasFilterModule'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import type { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStagingAreaModule'; import { loadImage } from 'features/controlLayers/konva/util'; import type { CanvasImageState } from 'features/controlLayers/store/types'; @@ -12,12 +12,12 @@ import Konva from 'konva'; import type { Logger } from 'roarr'; import { getImageDTO } from 'services/api/endpoints/images'; -export class CanvasImageRenderer extends CanvasModuleBase { - readonly type = 'image_renderer'; +export class CanvasObjectImageRenderer extends CanvasModuleABC { + readonly type = 'object_image_renderer'; id: string; path: string[]; - parent: CanvasObjectRenderer | CanvasStagingAreaModule | CanvasFilterModule; + parent: CanvasEntityRenderer | CanvasStagingAreaModule | CanvasFilterModule; manager: CanvasManager; log: Logger; subscriptions = new Set<() => void>(); @@ -33,7 +33,7 @@ export class CanvasImageRenderer extends CanvasModuleBase { isError: boolean = false; mutex = new Mutex(); - constructor(state: CanvasImageState, parent: CanvasObjectRenderer | CanvasStagingAreaModule | CanvasFilterModule) { + constructor(state: CanvasImageState, parent: CanvasEntityRenderer | CanvasStagingAreaModule | CanvasFilterModule) { super(); const { id, image } = state; const { width, height } = image; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRectRenderer.ts similarity index 85% rename from invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts rename to invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRectRenderer.ts index 3cb0525e3f..93c8129934 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRectRenderer.ts @@ -1,18 +1,18 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers'; import { deepClone } from 'common/util/deepClone'; +import type { CanvasEntityRenderer } from 'features/controlLayers/konva/CanvasEntityRenderer'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; -import type { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasRectState } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { Logger } from 'roarr'; -export class CanvasRectRenderer extends CanvasModuleBase { - readonly type = 'rect_renderer'; +export class CanvasObjectRectRenderer extends CanvasModuleABC { + readonly type = 'object_rect_renderer'; id: string; path: string[]; - parent: CanvasObjectRenderer; + parent: CanvasEntityRenderer; manager: CanvasManager; log: Logger; subscriptions = new Set<() => void>(); @@ -24,7 +24,7 @@ export class CanvasRectRenderer extends CanvasModuleBase { }; isFirstRender: boolean = false; - constructor(state: CanvasRectState, parent: CanvasObjectRenderer) { + constructor(state: CanvasRectState, parent: CanvasEntityRenderer) { super(); const { id } = state; this.id = id; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasPreviewModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasPreviewModule.ts index 0a3f47ee61..fa00ba9690 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasPreviewModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasPreviewModule.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { CanvasProgressImageModule } from 'features/controlLayers/konva/CanvasProgressImageModule'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import Konva from 'konva'; @@ -9,7 +9,7 @@ import { CanvasBboxModule } from './CanvasBboxModule'; import { CanvasStagingAreaModule } from './CanvasStagingAreaModule'; import { CanvasToolModule } from './CanvasToolModule'; -export class CanvasPreviewModule extends CanvasModuleBase { +export class CanvasPreviewModule extends CanvasModuleABC { readonly type = 'preview'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts index fb972aeded..03cdc69b15 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts @@ -1,13 +1,13 @@ import { Mutex } from 'async-mutex'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule'; import { getPrefixedId, loadImage } from 'features/controlLayers/konva/util'; import Konva from 'konva'; import type { Logger } from 'roarr'; import type { S } from 'services/api/types'; -export class CanvasProgressImageModule extends CanvasModuleBase { +export class CanvasProgressImageModule extends CanvasModuleABC { readonly type = 'progress_image'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts index ce994085b7..b92bfef0e4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts @@ -1,15 +1,15 @@ import type { SerializableObject } from 'common/types'; -import { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; +import { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { CanvasSessionState } from 'features/controlLayers/store/canvasSessionSlice'; import type { CanvasSettingsState } from 'features/controlLayers/store/canvasSettingsSlice'; import type { CanvasState } from 'features/controlLayers/store/types'; import type { Logger } from 'roarr'; -export class CanvasRenderingModule extends CanvasModuleBase { +export class CanvasRenderingModule extends CanvasModuleABC { readonly type = 'canvas_renderer'; id: string; @@ -139,7 +139,7 @@ export class CanvasRenderingModule extends CanvasModuleBase { for (const entityState of state.rasterLayers.entities) { let adapter = adapterMap.get(entityState.id); if (!adapter) { - adapter = new CanvasLayerAdapter(entityState, this.manager); + adapter = new CanvasEntityLayerAdapter(entityState, this.manager); adapterMap.set(adapter.id, adapter); this.manager.stage.addLayer(adapter.konva.layer); } @@ -168,7 +168,7 @@ export class CanvasRenderingModule extends CanvasModuleBase { for (const entityState of state.controlLayers.entities) { let adapter = adapterMap.get(entityState.id); if (!adapter) { - adapter = new CanvasLayerAdapter(entityState, this.manager); + adapter = new CanvasEntityLayerAdapter(entityState, this.manager); adapterMap.set(adapter.id, adapter); this.manager.stage.addLayer(adapter.konva.layer); } @@ -202,7 +202,7 @@ export class CanvasRenderingModule extends CanvasModuleBase { for (const entityState of state.regions.entities) { let adapter = adapterMap.get(entityState.id); if (!adapter) { - adapter = new CanvasMaskAdapter(entityState, this.manager); + adapter = new CanvasEntityMaskAdapter(entityState, this.manager); adapterMap.set(adapter.id, adapter); this.manager.stage.addLayer(adapter.konva.layer); } @@ -236,7 +236,7 @@ export class CanvasRenderingModule extends CanvasModuleBase { for (const entityState of state.inpaintMasks.entities) { let adapter = adapterMap.get(entityState.id); if (!adapter) { - adapter = new CanvasMaskAdapter(entityState, this.manager); + adapter = new CanvasEntityMaskAdapter(entityState, this.manager); adapterMap.set(adapter.id, adapter); this.manager.stage.addLayer(adapter.konva.layer); } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts index a23bfad9c7..c8e65d88a0 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts @@ -1,5 +1,5 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { CANVAS_SCALE_BY } from 'features/controlLayers/konva/constants'; import { getPrefixedId, getRectUnion } from 'features/controlLayers/konva/util'; import type { Coordinate, Dimensions, Rect } from 'features/controlLayers/store/types'; @@ -8,7 +8,7 @@ import type { KonvaEventObject } from 'konva/lib/Node'; import { clamp } from 'lodash-es'; import type { Logger } from 'roarr'; -export class CanvasStageModule extends CanvasModuleBase { +export class CanvasStageModule extends CanvasModuleABC { readonly type = 'stage'; static MIN_CANVAS_SCALE = 0.1; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts index 202b367edb..45abeb207e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts @@ -1,14 +1,14 @@ import type { SerializableObject } from 'common/types'; -import { CanvasImageRenderer } from 'features/controlLayers/konva/CanvasImage'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; +import { CanvasObjectImageRenderer } from 'features/controlLayers/konva/CanvasObjectImageRenderer'; import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import { imageDTOToImageWithDims, type StagingAreaImage } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { Logger } from 'roarr'; -export class CanvasStagingAreaModule extends CanvasModuleBase { +export class CanvasStagingAreaModule extends CanvasModuleABC { readonly type = 'staging_area'; id: string; @@ -19,7 +19,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { konva: { group: Konva.Group }; - image: CanvasImageRenderer | null; + image: CanvasObjectImageRenderer | null; selectedImage: StagingAreaImage | null; /** @@ -58,7 +58,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { if (!this.image) { const { image_name } = imageDTO; - this.image = new CanvasImageRenderer( + this.image = new CanvasObjectImageRenderer( { id: 'staging-area-image', type: 'image', diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts index aa3be585f2..05fe1ccb25 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts @@ -1,9 +1,9 @@ import { $alt, $ctrl, $meta, $shift } from '@invoke-ai/ui-library'; import type { AppStore } from 'app/store/store'; -import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter'; +import type { CanvasEntityLayerAdapter } from 'features/controlLayers/konva/CanvasEntityLayerAdapter'; +import type { CanvasEntityMaskAdapter } from 'features/controlLayers/konva/CanvasEntityMaskAdapter'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import { bboxChanged, @@ -54,28 +54,28 @@ type EntityStateAndAdapter = id: string; type: CanvasRasterLayerState['type']; state: CanvasRasterLayerState; - adapter: CanvasLayerAdapter; + adapter: CanvasEntityLayerAdapter; } | { id: string; type: CanvasControlLayerState['type']; state: CanvasControlLayerState; - adapter: CanvasLayerAdapter; + adapter: CanvasEntityLayerAdapter; } | { id: string; type: CanvasInpaintMaskState['type']; state: CanvasInpaintMaskState; - adapter: CanvasMaskAdapter; + adapter: CanvasEntityMaskAdapter; } | { id: string; type: CanvasRegionalGuidanceState['type']; state: CanvasRegionalGuidanceState; - adapter: CanvasMaskAdapter; + adapter: CanvasEntityMaskAdapter; }; -export class CanvasStateApiModule extends CanvasModuleBase { +export class CanvasStateApiModule extends CanvasModuleABC { readonly type = 'state_api'; id: string; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts index 38bc0dd3ae..d9b06749f4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts @@ -1,6 +1,6 @@ import { rgbaColorToString, rgbColorToString } from 'common/util/colorCodeTransformers'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule'; import { BRUSH_BORDER_INNER_COLOR, @@ -31,7 +31,7 @@ import Konva from 'konva'; import type { KonvaEventObject } from 'konva/lib/Node'; import type { Logger } from 'roarr'; -export class CanvasToolModule extends CanvasModuleBase { +export class CanvasToolModule extends CanvasModuleABC { readonly type = 'tool'; static readonly COLOR_PICKER_RADIUS = 25; static readonly COLOR_PICKER_THICKNESS = 15; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasWorkerModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasWorkerModule.ts index 422b1f5ef4..ec15537bb4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasWorkerModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasWorkerModule.ts @@ -1,10 +1,10 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; -import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; +import { CanvasModuleABC } from 'features/controlLayers/konva/CanvasModuleABC'; import { getPrefixedId } from 'features/controlLayers/konva/util'; import type { Extents, ExtentsResult, GetBboxTask, WorkerLogMessage } from 'features/controlLayers/konva/worker'; import type { Logger } from 'roarr'; -export class CanvasWorkerModule extends CanvasModuleBase { +export class CanvasWorkerModule extends CanvasModuleABC { readonly type = 'worker'; id: string;