tidy(ui): organise files and classes

invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts

@@ -3,7 +3,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import Konva from 'konva';
 
-export class CanvasBackground {
+export class CanvasBackgroundModule {
   readonly type = 'background_grid';
 
   static GRID_LINE_COLOR_COARSE = getArbitraryBaseColor(27);
@@ -44,12 +44,10 @@ export class CanvasBackground {
     this.konva.layer.visible(true);
 
     this.konva.layer.zIndex(0);
-    const scale = this.manager.stage.scaleX();
-    const gridSpacing = CanvasBackground.getGridSpacing(scale);
-    const x = this.manager.stage.x();
-    const y = this.manager.stage.y();
-    const width = this.manager.stage.width();
-    const height = this.manager.stage.height();
+    const scale = this.manager.stage.getScale();
+    const { x, y } = this.manager.stage.getPosition();
+    const { width, height } = this.manager.stage.getSize();
+    const gridSpacing = this.getGridSpacing(scale);
     const stageRect = {
       x1: 0,
       y1: 0,
@@ -96,7 +94,7 @@ export class CanvasBackground {
           x: _x,
           y: gridFullRect.y1,
           points: [0, 0, 0, ySize],
-          stroke: _x % 64 ? CanvasBackground.GRID_LINE_COLOR_FINE : CanvasBackground.GRID_LINE_COLOR_COARSE,
+          stroke: _x % 64 ? CanvasBackgroundModule.GRID_LINE_COLOR_FINE : CanvasBackgroundModule.GRID_LINE_COLOR_COARSE,
           strokeWidth,
           listening: false,
         })
@@ -109,7 +107,7 @@ export class CanvasBackground {
           x: gridFullRect.x1,
           y: _y,
           points: [0, 0, xSize, 0],
-          stroke: _y % 64 ? CanvasBackground.GRID_LINE_COLOR_FINE : CanvasBackground.GRID_LINE_COLOR_COARSE,
+          stroke: _y % 64 ? CanvasBackgroundModule.GRID_LINE_COLOR_FINE : CanvasBackgroundModule.GRID_LINE_COLOR_COARSE,
           strokeWidth,
           listening: false,
         })
@@ -129,7 +127,7 @@ export class CanvasBackground {
    * @param scale The stage scale
    * @returns The grid spacing based on the stage scale
    */
-  static getGridSpacing = (scale: number): number => {
+  getGridSpacing = (scale: number): number => {
     if (scale >= 2) {
       return 8;
     }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasBboxModule.ts

@@ -1,7 +1,7 @@
 import type { JSONObject } from 'common/types';
 import { roundToMultiple, roundToMultipleMin } from 'common/util/roundDownToMultiple';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import type { CanvasPreview } from 'features/controlLayers/konva/CanvasPreview';
+import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import type { Rect } from 'features/controlLayers/store/types';
 import Konva from 'konva';
@@ -22,12 +22,12 @@ const ALL_ANCHORS: string[] = [
 const CORNER_ANCHORS: string[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const NO_ANCHORS: string[] = [];
 
-export class CanvasBbox {
+export class CanvasBboxModule {
   readonly type = 'generation_bbox';
 
   id: string;
   path: string[];
-  parent: CanvasPreview;
+  parent: CanvasPreviewModule;
   manager: CanvasManager;
   log: Logger;
 
@@ -37,7 +37,7 @@ export class CanvasBbox {
     transformer: Konva.Transformer;
   };
 
-  constructor(parent: CanvasPreview) {
+  constructor(parent: CanvasPreviewModule) {
     this.id = getPrefixedId(this.type);
     this.parent = parent;
     this.manager = this.parent.manager;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasFilterModule.ts

@@ -13,7 +13,7 @@ import { assert } from 'tsafe';
 
 const TYPE = 'entity_filter_preview';
 
-export class CanvasFilter {
+export class CanvasFilterModule {
   readonly type = TYPE;
 
   id: string;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts

@@ -1,10 +1,10 @@
 import { Mutex } from 'async-mutex';
 import type { JSONObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
-import type { CanvasFilter } from 'features/controlLayers/konva/CanvasFilter';
+import type { CanvasFilterModule } from 'features/controlLayers/konva/CanvasFilterModule';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { CanvasObjectRenderer } from 'features/controlLayers/konva/CanvasObjectRenderer';
-import type { CanvasStagingArea } from 'features/controlLayers/konva/CanvasStagingArea';
+import type { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStagingAreaModule';
 import { loadImage } from 'features/controlLayers/konva/util';
 import type { CanvasImageState } from 'features/controlLayers/store/types';
 import { t } from 'i18next';
@@ -17,7 +17,7 @@ export class CanvasImageRenderer {
 
   id: string;
   path: string[];
-  parent: CanvasObjectRenderer | CanvasStagingArea | CanvasFilter;
+  parent: CanvasObjectRenderer | CanvasStagingAreaModule | CanvasFilterModule;
   manager: CanvasManager;
   log: Logger;
 
@@ -32,7 +32,7 @@ export class CanvasImageRenderer {
   isError: boolean = false;
   mutex = new Mutex();
 
-  constructor(state: CanvasImageState, parent: CanvasObjectRenderer | CanvasStagingArea | CanvasFilter) {
+  constructor(state: CanvasImageState, parent: CanvasObjectRenderer | CanvasStagingAreaModule | CanvasFilterModule) {
     const { id, image } = state;
     const { width, height } = image;
     this.id = id;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts

@@ -4,7 +4,7 @@ import type { AppStore } from 'app/store/store';
 import type { SerializableObject } from 'common/types';
 import { CanvasCacheModule } from 'features/controlLayers/konva/CanvasCacheModule';
 import { CanvasCompositorModule } from 'features/controlLayers/konva/CanvasCompositorModule';
-import { CanvasFilter } from 'features/controlLayers/konva/CanvasFilter';
+import { CanvasFilterModule } from 'features/controlLayers/konva/CanvasFilterModule';
 import { CanvasRenderingModule } from 'features/controlLayers/konva/CanvasRenderingModule';
 import { CanvasStageModule } from 'features/controlLayers/konva/CanvasStageModule';
 import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js';
@@ -13,11 +13,11 @@ import type Konva from 'konva';
 import { atom } from 'nanostores';
 import type { Logger } from 'roarr';
 
-import { CanvasBackground } from './CanvasBackground';
+import { CanvasBackgroundModule } from './CanvasBackgroundModule';
 import type { CanvasLayerAdapter } from './CanvasLayerAdapter';
 import type { CanvasMaskAdapter } from './CanvasMaskAdapter';
-import { CanvasPreview } from './CanvasPreview';
-import { CanvasStateApi } from './CanvasStateApi';
+import { CanvasPreviewModule } from './CanvasPreviewModule';
+import { CanvasStateApiModule } from './CanvasStateApiModule';
 import { setStageEventHandlers } from './events';
 
 export const $canvasManager = atom<CanvasManager | null>(null);
@@ -37,10 +37,10 @@ export class CanvasManager {
   regionalGuidanceAdapters: Map<string, CanvasMaskAdapter> = new Map();
   inpaintMaskAdapters: Map<string, CanvasMaskAdapter> = new Map();
 
-  stateApi: CanvasStateApi;
-  preview: CanvasPreview;
-  background: CanvasBackground;
-  filter: CanvasFilter;
+  stateApi: CanvasStateApiModule;
+  preview: CanvasPreviewModule;
+  background: CanvasBackgroundModule;
+  filter: CanvasFilterModule;
   stage: CanvasStageModule;
   worker: CanvasWorkerModule;
   cache: CanvasCacheModule;
@@ -54,20 +54,20 @@ export class CanvasManager {
     this.path = [this.id];
     this.store = store;
     this.socket = socket;
-    this.stateApi = new CanvasStateApi(this.store, this);
 
+    this.stateApi = new CanvasStateApiModule(this.store, this);
     this.stage = new CanvasStageModule(stage, container, this);
     this.worker = new CanvasWorkerModule(this);
     this.cache = new CanvasCacheModule(this);
     this.renderer = new CanvasRenderingModule(this);
-    this.preview = new CanvasPreview(this);
+    this.preview = new CanvasPreviewModule(this);
+    this.filter = new CanvasFilterModule(this);
+
     this.compositor = new CanvasCompositorModule(this);
     this.stage.addLayer(this.preview.getLayer());
 
-    this.background = new CanvasBackground(this);
+    this.background = new CanvasBackgroundModule(this);
     this.stage.addLayer(this.background.konva.layer);
-
-    this.filter = new CanvasFilter(this);
   }
 
   log = logger('canvas').child((message) => {

invokeai/frontend/web/src/features/controlLayers/konva/CanvasPreviewModule.ts

@@ -1,22 +1,22 @@
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { CanvasProgressImage } from 'features/controlLayers/konva/CanvasProgressImage';
+import { CanvasProgressImageModule } from 'features/controlLayers/konva/CanvasProgressImageModule';
 import Konva from 'konva';
 
-import { CanvasBbox } from './CanvasBbox';
-import { CanvasStagingArea } from './CanvasStagingArea';
-import { CanvasTool } from './CanvasTool';
+import { CanvasBboxModule } from './CanvasBboxModule';
+import { CanvasStagingAreaModule } from './CanvasStagingAreaModule';
+import { CanvasToolModule } from './CanvasToolModule';
 
-export class CanvasPreview {
+export class CanvasPreviewModule {
   manager: CanvasManager;
 
   konva: {
     layer: Konva.Layer;
   };
 
-  tool: CanvasTool;
-  bbox: CanvasBbox;
-  stagingArea: CanvasStagingArea;
-  progressImage: CanvasProgressImage;
+  tool: CanvasToolModule;
+  bbox: CanvasBboxModule;
+  stagingArea: CanvasStagingAreaModule;
+  progressImage: CanvasProgressImageModule;
 
   constructor(manager: CanvasManager) {
     this.manager = manager;
@@ -24,16 +24,16 @@ export class CanvasPreview {
       layer: new Konva.Layer({ listening: false, imageSmoothingEnabled: false }),
     };
 
-    this.stagingArea = new CanvasStagingArea(this);
+    this.stagingArea = new CanvasStagingAreaModule(this);
     this.konva.layer.add(...this.stagingArea.getNodes());
 
-    this.progressImage = new CanvasProgressImage(this);
+    this.progressImage = new CanvasProgressImageModule(this);
     this.konva.layer.add(...this.progressImage.getNodes());
 
-    this.bbox = new CanvasBbox(this);
+    this.bbox = new CanvasBboxModule(this);
     this.konva.layer.add(this.bbox.konva.group);
 
-    this.tool = new CanvasTool(this);
+    this.tool = new CanvasToolModule(this);
     this.konva.layer.add(this.tool.konva.group);
   }
 

invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts

@@ -1,18 +1,18 @@
 import { Mutex } from 'async-mutex';
 import type { JSONObject } from 'common/types';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import type { CanvasPreview } from 'features/controlLayers/konva/CanvasPreview';
+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 { InvocationDenoiseProgressEvent } from 'services/events/types';
 
-export class CanvasProgressImage {
+export class CanvasProgressImageModule {
   readonly type = 'progress_image';
 
   id: string;
   path: string[];
-  parent: CanvasPreview;
+  parent: CanvasPreviewModule;
   manager: CanvasManager;
   log: Logger;
 
@@ -34,7 +34,7 @@ export class CanvasProgressImage {
 
   mutex: Mutex = new Mutex();
 
-  constructor(parent: CanvasPreview) {
+  constructor(parent: CanvasPreviewModule) {
     this.id = getPrefixedId(this.type);
     this.parent = parent;
     this.manager = parent.manager;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts

@@ -1,18 +1,18 @@
 import type { JSONObject } from 'common/types';
 import { CanvasImageRenderer } from 'features/controlLayers/konva/CanvasImage';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import type { CanvasPreview } from 'features/controlLayers/konva/CanvasPreview';
+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 CanvasStagingArea {
+export class CanvasStagingAreaModule {
   readonly type = 'staging_area';
 
   id: string;
   path: string[];
-  parent: CanvasPreview;
+  parent: CanvasPreviewModule;
   manager: CanvasManager;
   log: Logger;
 
@@ -26,7 +26,7 @@ export class CanvasStagingArea {
    */
   subscriptions: Set<() => void> = new Set();
 
-  constructor(parent: CanvasPreview) {
+  constructor(parent: CanvasPreviewModule) {
     this.id = getPrefixedId(this.type);
     this.parent = parent;
     this.manager = this.parent.manager;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts

@@ -77,7 +77,7 @@ type EntityStateAndAdapter =
       adapter: CanvasMaskAdapter;
     };
 
-export class CanvasStateApi {
+export class CanvasStateApiModule {
   store: AppStore;
   manager: CanvasManager;
 

invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts

@@ -1,7 +1,7 @@
 import type { JSONObject } from 'common/types';
 import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import type { CanvasPreview } from 'features/controlLayers/konva/CanvasPreview';
+import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule';
 import {
   BRUSH_BORDER_INNER_COLOR,
   BRUSH_BORDER_OUTER_COLOR,
@@ -13,12 +13,12 @@ import { isDrawableEntity } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import type { Logger } from 'roarr';
 
-export class CanvasTool {
+export class CanvasToolModule {
   readonly type = 'tool_preview';
 
   id: string;
   path: string[];
-  parent: CanvasPreview;
+  parent: CanvasPreviewModule;
   manager: CanvasManager;
   log: Logger;
 
@@ -48,7 +48,7 @@ export class CanvasTool {
    */
   subscriptions: Set<() => void> = new Set();
 
-  constructor(parent: CanvasPreview) {
+  constructor(parent: CanvasPreviewModule) {
     this.id = getPrefixedId(this.type);
     this.parent = parent;
     this.manager = this.parent.manager;