tidy(ui): organise canvas tool classes

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

@@ -16,7 +16,7 @@ import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'
 import { CanvasProgressImageModule } from 'features/controlLayers/konva/CanvasProgressImageModule';
 import { CanvasStageModule } from 'features/controlLayers/konva/CanvasStageModule';
 import { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStagingAreaModule';
-import { CanvasToolModule } from 'features/controlLayers/konva/CanvasToolModule';
+import { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
 import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import type { CanvasEntityIdentifier, CanvasEntityType } from 'features/controlLayers/store/types';

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolBrush.ts

@@ -1,12 +1,12 @@
 import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
-import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasToolModule';
+import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
 import { alignCoordForTool, getPrefixedId } from 'features/controlLayers/konva/util';
 import Konva from 'konva';
 import type { Logger } from 'roarr';
 
-type BrushToolPreviewConfig = {
+type CanvasToolBrushConfig = {
   /**
    * The inner border color for the brush tool preview.
    */
@@ -17,7 +17,7 @@ type BrushToolPreviewConfig = {
   BORDER_OUTER_COLOR: string;
 };
 
-const DEFAULT_CONFIG: BrushToolPreviewConfig = {
+const DEFAULT_CONFIG: CanvasToolBrushConfig = {
   BORDER_INNER_COLOR: 'rgba(0,0,0,1)',
   BORDER_OUTER_COLOR: 'rgba(255,255,255,0.8)',
 };
@@ -25,15 +25,15 @@ const DEFAULT_CONFIG: BrushToolPreviewConfig = {
 /**
  * Renders a preview of the brush tool on the canvas.
  */
-export class CanvasBrushToolPreview extends CanvasModuleBase {
-  readonly type = 'brush_tool_preview';
+export class CanvasToolBrush extends CanvasModuleBase {
+  readonly type = 'brush_tool';
   readonly id: string;
   readonly path: string[];
   readonly parent: CanvasToolModule;
   readonly manager: CanvasManager;
   readonly log: Logger;
 
-  config: BrushToolPreviewConfig = DEFAULT_CONFIG;
+  config: CanvasToolBrushConfig = DEFAULT_CONFIG;
 
   /**
    * The Konva objects that make up the brush tool preview:

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolColorPicker.ts

@@ -1,12 +1,12 @@
 import { rgbColorToString } from 'common/util/colorCodeTransformers';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
-import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasToolModule';
+import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import Konva from 'konva';
 import type { Logger } from 'roarr';
 
-type ColorPickerToolConfig = {
+type CanvasToolColorPickerConfig = {
   /**
    * The inner radius of the ring.
    */
@@ -23,7 +23,6 @@ type ColorPickerToolConfig = {
    * The outer border color of the outside edge of ring.
    */
   RING_BORDER_OUTER_COLOR: string;
-
   /**
    * The radius of the space between the center of the ring and start of the crosshair lines.
    */
@@ -50,7 +49,7 @@ type ColorPickerToolConfig = {
   CROSSHAIR_BORDER_COLOR: string;
 };
 
-const DEFAULT_CONFIG: ColorPickerToolConfig = {
+const DEFAULT_CONFIG: CanvasToolColorPickerConfig = {
   RING_INNER_RADIUS: 25,
   RING_OUTER_RADIUS: 35,
   RING_BORDER_INNER_COLOR: 'rgba(0,0,0,1)',
@@ -66,15 +65,15 @@ const DEFAULT_CONFIG: ColorPickerToolConfig = {
 /**
  * Renders a preview of the color picker tool on the canvas.
  */
-export class CanvasColorPickerToolPreview extends CanvasModuleBase {
-  readonly type = 'color_picker_tool_preview';
+export class CanvasToolColorPicker extends CanvasModuleBase {
+  readonly type = 'color_picker_tool';
   readonly id: string;
   readonly path: string[];
   readonly parent: CanvasToolModule;
   readonly manager: CanvasManager;
   readonly log: Logger;
 
-  config: ColorPickerToolConfig = DEFAULT_CONFIG;
+  config: CanvasToolColorPickerConfig = DEFAULT_CONFIG;
 
   /**
    * The Konva objects that make up the color picker tool preview:

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolEraser.ts

@@ -1,11 +1,11 @@
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
-import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasToolModule';
+import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
 import { alignCoordForTool, getPrefixedId } from 'features/controlLayers/konva/util';
 import Konva from 'konva';
 import type { Logger } from 'roarr';
 
-type EraserToolPreviewConfig = {
+type CanvasToolEraserConfig = {
   /**
    * The inner border color for the eraser tool preview.
    */
@@ -16,20 +16,20 @@ type EraserToolPreviewConfig = {
   BORDER_OUTER_COLOR: string;
 };
 
-const DEFAULT_CONFIG: EraserToolPreviewConfig = {
+const DEFAULT_CONFIG: CanvasToolEraserConfig = {
   BORDER_INNER_COLOR: 'rgba(0,0,0,1)',
   BORDER_OUTER_COLOR: 'rgba(255,255,255,0.8)',
 };
 
-export class CanvasEraserToolPreview extends CanvasModuleBase {
-  readonly type = 'eraser_tool_preview';
+export class CanvasToolEraser extends CanvasModuleBase {
+  readonly type = 'eraser_tool';
   readonly id: string;
   readonly path: string[];
   readonly parent: CanvasToolModule;
   readonly manager: CanvasManager;
   readonly log: Logger;
 
-  config: EraserToolPreviewConfig = DEFAULT_CONFIG;
+  config: CanvasToolEraserConfig = DEFAULT_CONFIG;
 
   konva: {
     group: Konva.Group;

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

@@ -1,8 +1,8 @@
-import { CanvasBrushToolPreview } from 'features/controlLayers/konva/CanvasBrushToolPreview';
-import { CanvasColorPickerToolPreview } from 'features/controlLayers/konva/CanvasColorPickerToolPreview';
-import { CanvasEraserToolPreview } from 'features/controlLayers/konva/CanvasEraserToolPreview';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
+import { CanvasToolBrush } from 'features/controlLayers/konva/CanvasTool/CanvasToolBrush';
+import { CanvasToolColorPicker } from 'features/controlLayers/konva/CanvasTool/CanvasToolColorPicker';
+import { CanvasToolEraser } from 'features/controlLayers/konva/CanvasTool/CanvasToolEraser';
 import {
   alignCoordForTool,
   calculateNewBrushSizeFromWheelDelta,
@@ -51,9 +51,9 @@ export class CanvasToolModule extends CanvasModuleBase {
 
   config: CanvasToolModuleConfig = DEFAULT_CONFIG;
 
-  brushToolPreview: CanvasBrushToolPreview;
-  eraserToolPreview: CanvasEraserToolPreview;
-  colorPickerToolPreview: CanvasColorPickerToolPreview;
+  brushToolPreview: CanvasToolBrush;
+  eraserToolPreview: CanvasToolEraser;
+  colorPickerToolPreview: CanvasToolColorPicker;
 
   /**
    * The currently selected tool.
@@ -92,9 +92,9 @@ export class CanvasToolModule extends CanvasModuleBase {
 
     this.log.debug('Creating tool module');
 
-    this.brushToolPreview = new CanvasBrushToolPreview(this);
-    this.eraserToolPreview = new CanvasEraserToolPreview(this);
-    this.colorPickerToolPreview = new CanvasColorPickerToolPreview(this);
+    this.brushToolPreview = new CanvasToolBrush(this);
+    this.eraserToolPreview = new CanvasToolEraser(this);
+    this.colorPickerToolPreview = new CanvasToolColorPicker(this);
 
     this.konva = {
       stage: this.manager.stage.konva.stage,
@@ -483,10 +483,7 @@ export class CanvasToolModule extends CanvasModuleBase {
       const tool = this.$tool.get();
 
       if (tool === 'brush') {
-        if (
-          selectedEntity.bufferRenderer.state?.type === 'brush_line' &&
-          selectedEntity.bufferRenderer.hasBuffer()
-        ) {
+        if (selectedEntity.bufferRenderer.state?.type === 'brush_line' && selectedEntity.bufferRenderer.hasBuffer()) {
           selectedEntity.bufferRenderer.commitBuffer();
         } else {
           selectedEntity.bufferRenderer.clearBuffer();
@@ -494,10 +491,7 @@ export class CanvasToolModule extends CanvasModuleBase {
       }
 
       if (tool === 'eraser') {
-        if (
-          selectedEntity.bufferRenderer.state?.type === 'eraser_line' &&
-          selectedEntity.bufferRenderer.hasBuffer()
-        ) {
+        if (selectedEntity.bufferRenderer.state?.type === 'eraser_line' && selectedEntity.bufferRenderer.hasBuffer()) {
           selectedEntity.bufferRenderer.commitBuffer();
         } else {
           selectedEntity.bufferRenderer.clearBuffer();