tidy(ui): rename some classes to be consistent

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<CanvasLayerAdapter | CanvasMaskAdapter | null>(null);
+const EntityAdapterContext = createContext<CanvasEntityLayerAdapter | CanvasEntityMaskAdapter | null>(null);
 
 export const EntityLayerAdapterGate = memo(({ children }: PropsWithChildren) => {
   const canvasManager = useCanvasManager();
   const entityIdentifier = useEntityIdentifierContext();
-  const store = useMemo<SyncableMap<string, CanvasLayerAdapter>>(() => {
+  const store = useMemo<SyncableMap<string, CanvasEntityLayerAdapter>>(() => {
     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<SyncableMap<string, CanvasMaskAdapter>>(() => {
+  const store = useMemo<SyncableMap<string, CanvasEntityMaskAdapter>>(() => {
     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;

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(() => {

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);

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;

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;

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;

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) {

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);
   };
 

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<typeof getP
 /**
  * Union of all object renderers.
  */
-type AnyObjectRenderer = CanvasBrushLineRenderer | CanvasEraserLineRenderer | CanvasRectRenderer | CanvasImageRenderer;
+type AnyObjectRenderer =
+  | CanvasObjectBrushLineRenderer
+  | CanvasObjectEraserLineRenderer
+  | CanvasObjectRectRenderer
+  | CanvasObjectImageRenderer;
 /**
  * Union of all object states.
  */
@@ -56,12 +60,12 @@ type AnyObjectState = CanvasBrushLineState | CanvasEraserLineState | CanvasImage
 /**
  * Handles rendering of objects for a canvas entity.
  */
-export class CanvasObjectRenderer extends CanvasModuleBase {
-  readonly type = 'entity_object_renderer';
+export class CanvasEntityRenderer extends CanvasModuleABC {
+  readonly type = 'entity_renderer';
 
   id: string;
   path: string[];
-  parent: CanvasLayerAdapter | CanvasMaskAdapter;
+  parent: CanvasEntityLayerAdapter | CanvasEntityMaskAdapter;
   manager: CanvasManager;
   log: Logger;
 
@@ -123,7 +127,7 @@ export class CanvasObjectRenderer extends CanvasModuleBase {
 
   $canvasCache = atom<{ canvas: HTMLCanvasElement; rect: Rect } | null>(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;

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;

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<CanvasLayerAdapter | null>(null);
+  $adapter = atom<CanvasEntityLayerAdapter | null>(null);
   $isFiltering = computed(this.$adapter, (adapter) => Boolean(adapter));
   $isProcessing = atom<boolean>(false);
   $config = atom<FilterConfig>(IMAGE_FILTERS.canny_image_processor.buildDefaults());

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<CanvasManager | null>(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<string, CanvasLayerAdapter>(),
-    controlLayers: new SyncableMap<string, CanvasLayerAdapter>(),
-    regionMasks: new SyncableMap<string, CanvasMaskAdapter>(),
-    inpaintMasks: new SyncableMap<string, CanvasMaskAdapter>(),
-    getAll: (): (CanvasLayerAdapter | CanvasMaskAdapter)[] => {
+    rasterLayers: new SyncableMap<string, CanvasEntityLayerAdapter>(),
+    controlLayers: new SyncableMap<string, CanvasEntityLayerAdapter>(),
+    regionMasks: new SyncableMap<string, CanvasEntityMaskAdapter>(),
+    inpaintMasks: new SyncableMap<string, CanvasEntityMaskAdapter>(),
+    getAll: (): (CanvasEntityLayerAdapter | CanvasEntityMaskAdapter)[] => {
       return [
         ...this.adapters.rasterLayers.values(),
         ...this.adapters.controlLayers.values(),

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[];

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;

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;

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;

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;

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;

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;

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);
         }

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;

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',

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;

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;

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;