tidy(ui): remove unused naming objects/utils

The canvas manager means we don't need to worry about konva node names as we never directly select konva nodes.

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

@@ -1,10 +1,5 @@
 import { roundToMultiple, roundToMultipleMin } from 'common/util/roundDownToMultiple';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import {
-  PREVIEW_GENERATION_BBOX_DUMMY_RECT,
-  PREVIEW_GENERATION_BBOX_GROUP,
-  PREVIEW_GENERATION_BBOX_TRANSFORMER,
-} from 'features/controlLayers/konva/naming';
 import Konva from 'konva';
 import type { IRect } from 'konva/lib/types';
 import { atom } from 'nanostores';
@@ -38,9 +33,8 @@ export class CanvasBbox {
 
     // Use a transformer for the generation bbox. Transformers need some shape to transform, we will use a fully
     // transparent rect for this purpose.
-    this.group = new Konva.Group({ id: PREVIEW_GENERATION_BBOX_GROUP, listening: false });
+    this.group = new Konva.Group({ id: 'bbox_group', listening: false });
     this.rect = new Konva.Rect({
-      id: PREVIEW_GENERATION_BBOX_DUMMY_RECT,
       listening: false,
       strokeEnabled: false,
       draggable: true,
@@ -61,7 +55,6 @@ export class CanvasBbox {
     });
 
     this.transformer = new Konva.Transformer({
-      id: PREVIEW_GENERATION_BBOX_TRANSFORMER,
       borderDash: [5, 5],
       borderStroke: 'rgba(212,216,234,1)',
       borderEnabled: true,

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

@@ -4,7 +4,7 @@ import { CanvasEraserLine } from 'features/controlLayers/konva/CanvasEraserLine'
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasRect } from 'features/controlLayers/konva/CanvasRect';
 import { getNodeBboxFast } from 'features/controlLayers/konva/entityBbox';
-import { getObjectGroupId, INPAINT_MASK_LAYER_ID } from 'features/controlLayers/konva/naming';
+import { getObjectGroupId } from 'features/controlLayers/konva/naming';
 import { mapId } from 'features/controlLayers/konva/util';
 import type { BrushLine, EraserLine, InpaintMaskEntity, RectShape } from 'features/controlLayers/store/types';
 import { isDrawingTool, RGBA_RED } from 'features/controlLayers/store/types';
@@ -25,9 +25,9 @@ export class CanvasInpaintMask {
   private inpaintMaskState: InpaintMaskEntity;
 
   constructor(entity: InpaintMaskEntity, manager: CanvasManager) {
-    this.id = INPAINT_MASK_LAYER_ID;
+    this.id = 'inpaint_mask';
     this.manager = manager;
-    this.layer = new Konva.Layer({ id: INPAINT_MASK_LAYER_ID });
+    this.layer = new Konva.Layer({ id: this.id });
 
     this.group = new Konva.Group({
       id: getObjectGroupId(this.layer.id(), uuidv4()),

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

@@ -1,11 +1,5 @@
 import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
-import {
+import { getLayerBboxId } from 'features/controlLayers/konva/naming';
-  CA_LAYER_IMAGE_NAME,
-  getLayerBboxId,
-  LAYER_BBOX_NAME,
-  RASTER_LAYER_OBJECT_GROUP_NAME,
-  RG_LAYER_OBJECT_GROUP_NAME,
-} from 'features/controlLayers/konva/naming';
 import { imageDataToDataURL } from 'features/controlLayers/konva/util';
 import type {
   BboxChangedArg,
@@ -26,7 +20,7 @@ import { assert } from 'tsafe';
 export const createBboxRect = (entity: CanvasEntity, konvaLayer: Konva.Layer): Konva.Rect => {
   const rect = new Konva.Rect({
     id: getLayerBboxId(entity.id),
-    name: LAYER_BBOX_NAME,
+    name: 'bbox',
     strokeWidth: 1,
     visible: false,
   });
@@ -191,9 +185,10 @@ export const getNodeBboxFast = (node: Konva.Node): IRect => {
   return bbox;
 };
 
-const filterRGChildren = (node: Konva.Node): boolean => node.name() === RG_LAYER_OBJECT_GROUP_NAME;
+// TODO(psyche): fix this
-const filterLayerChildren = (node: Konva.Node): boolean => node.name() === RASTER_LAYER_OBJECT_GROUP_NAME;
+const filterRGChildren = (node: Konva.Node): boolean => true;
-const filterCAChildren = (node: Konva.Node): boolean => node.name() === CA_LAYER_IMAGE_NAME;
+const filterLayerChildren = (node: Konva.Node): boolean => true;
+const filterCAChildren = (node: Konva.Node): boolean => true;
 
 /**
  * Calculates the bbox of each regional guidance layer. Only calculates if the mask has changed.
@@ -213,7 +208,7 @@ export const updateBboxes = (
     assert(konvaLayer, `Layer ${entityState.id} not found in stage`);
     // We only need to recalculate the bbox if the layer has changed
     if (entityState.bboxNeedsUpdate) {
-      const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(entityState, konvaLayer);
+      const bboxRect = konvaLayer.findOne<Konva.Rect>('.bbox') ?? createBboxRect(entityState, konvaLayer);
 
       // Hide the bbox while we calculate the new bbox, else the bbox will be included in the calculation
       const visible = bboxRect.visible();

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

@@ -2,59 +2,14 @@
  * This file contains IDs, names, and ID getters for konva layers and objects.
  */
 
-// IDs for singleton Konva layers and objects
-export const PREVIEW_LAYER_ID = 'preview_layer';
-export const PREVIEW_TOOL_GROUP_ID = `${PREVIEW_LAYER_ID}.tool_group`;
-export const PREVIEW_BRUSH_GROUP_ID = `${PREVIEW_LAYER_ID}.brush_group`;
-export const PREVIEW_BRUSH_FILL_ID = `${PREVIEW_LAYER_ID}.brush_fill`;
-export const PREVIEW_BRUSH_BORDER_INNER_ID = `${PREVIEW_LAYER_ID}.brush_border_inner`;
-export const PREVIEW_BRUSH_BORDER_OUTER_ID = `${PREVIEW_LAYER_ID}.brush_border_outer`;
-export const PREVIEW_RECT_ID = `${PREVIEW_LAYER_ID}.rect`;
-export const PREVIEW_GENERATION_BBOX_GROUP = `${PREVIEW_LAYER_ID}.gen_bbox_group`;
-export const PREVIEW_GENERATION_BBOX_TRANSFORMER = `${PREVIEW_LAYER_ID}.gen_bbox_transformer`;
-export const PREVIEW_GENERATION_BBOX_DUMMY_RECT = `${PREVIEW_LAYER_ID}.gen_bbox_dummy_rect`;
-export const PREVIEW_DOCUMENT_SIZE_GROUP = `${PREVIEW_LAYER_ID}.doc_size_group`;
-export const PREVIEW_DOCUMENT_SIZE_STAGE_RECT = `${PREVIEW_LAYER_ID}.doc_size_stage_rect`;
-export const PREVIEW_DOCUMENT_SIZE_DOCUMENT_RECT = `${PREVIEW_LAYER_ID}.doc_size_doc_rect`;
-
-// Names for Konva layers and objects (comparable to CSS classes)
-export const LAYER_BBOX_NAME = 'layer_bbox';
-export const COMPOSITING_RECT_NAME = 'compositing_rect';
-export const IMAGE_PLACEHOLDER_NAME = 'image_placeholder';
-
-export const CA_LAYER_NAME = 'control_adapter';
-export const CA_LAYER_OBJECT_GROUP_NAME = `${CA_LAYER_NAME}.object_group`;
-export const CA_LAYER_IMAGE_NAME = `${CA_LAYER_NAME}.image`;
-
-export const RG_LAYER_NAME = 'regional_guidance_layer';
-export const RG_LAYER_OBJECT_GROUP_NAME = `${RG_LAYER_NAME}.object_group`;
-export const RG_LAYER_BRUSH_LINE_NAME = `${RG_LAYER_NAME}.brush_line`;
-export const RG_LAYER_ERASER_LINE_NAME = `${RG_LAYER_NAME}.eraser_line`;
-export const RG_LAYER_RECT_SHAPE_NAME = `${RG_LAYER_NAME}.rect_shape`;
-
-export const RASTER_LAYER_NAME = 'raster_layer';
-export const RASTER_LAYER_OBJECT_GROUP_NAME = `${RASTER_LAYER_NAME}.object_group`;
-export const RASTER_LAYER_BRUSH_LINE_NAME = `${RASTER_LAYER_NAME}.brush_line`;
-export const RASTER_LAYER_ERASER_LINE_NAME = `${RASTER_LAYER_NAME}.eraser_line`;
-export const RASTER_LAYER_RECT_SHAPE_NAME = `${RASTER_LAYER_NAME}.rect_shape`;
-export const RASTER_LAYER_IMAGE_NAME = `${RASTER_LAYER_NAME}.image`;
-
-export const INPAINT_MASK_LAYER_ID = 'inpaint_mask_layer';
-export const INPAINT_MASK_LAYER_OBJECT_GROUP_NAME = `${INPAINT_MASK_LAYER_ID}.object_group`;
-export const INPAINT_MASK_LAYER_BRUSH_LINE_NAME = `${INPAINT_MASK_LAYER_ID}.brush_line`;
-export const INPAINT_MASK_LAYER_ERASER_LINE_NAME = `${INPAINT_MASK_LAYER_ID}.eraser_line`;
-export const INPAINT_MASK_LAYER_RECT_SHAPE_NAME = `${INPAINT_MASK_LAYER_ID}.rect_shape`;
-
-export const BACKGROUND_LAYER_ID = 'background_layer';
-
 // Getters for non-singleton layer and object IDs
-export const getRGId = (entityId: string) => `${RG_LAYER_NAME}_${entityId}`;
+export const getRGId = (entityId: string) => `region_${entityId}`;
-export const getLayerId = (entityId: string) => `${RASTER_LAYER_NAME}_${entityId}`;
+export const getLayerId = (entityId: string) => `layer_${entityId}`;
 export const getBrushLineId = (entityId: string, lineId: string) => `${entityId}.brush_line_${lineId}`;
 export const getEraserLineId = (entityId: string, lineId: string) => `${entityId}.eraser_line_${lineId}`;
 export const getRectShapeId = (entityId: string, rectId: string) => `${entityId}.rect_${rectId}`;
 export const getImageObjectId = (entityId: string, imageId: string) => `${entityId}.image_${imageId}`;
 export const getObjectGroupId = (entityId: string, groupId: string) => `${entityId}.objectGroup_${groupId}`;
 export const getLayerBboxId = (entityId: string) => `${entityId}.bbox`;
-export const getCAId = (entityId: string) => `${CA_LAYER_NAME}_${entityId}`;
+export const getCAId = (entityId: string) => `control_adapter_${entityId}`;
 export const getIPAId = (entityId: string) => `ip_adapter_${entityId}`;

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

@@ -1,18 +1,5 @@
 import { getImageDataTransparency } from 'common/util/arrayBuffer';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import {
-  CA_LAYER_NAME,
-  INPAINT_MASK_LAYER_ID,
-  RASTER_LAYER_BRUSH_LINE_NAME,
-  RASTER_LAYER_ERASER_LINE_NAME,
-  RASTER_LAYER_IMAGE_NAME,
-  RASTER_LAYER_NAME,
-  RASTER_LAYER_RECT_SHAPE_NAME,
-  RG_LAYER_BRUSH_LINE_NAME,
-  RG_LAYER_ERASER_LINE_NAME,
-  RG_LAYER_NAME,
-  RG_LAYER_RECT_SHAPE_NAME,
-} from 'features/controlLayers/konva/naming';
 import type { GenerationMode, Rect, RgbaColor } from 'features/controlLayers/store/types';
 import { isValidLayer } from 'features/nodes/util/graph/generation/addLayers';
 import Konva from 'konva';
@@ -120,35 +107,6 @@ export const getIsFocused = (stage: Konva.Stage): boolean => stage.container().c
  */
 export const mapId = (object: { id: string }): string => object.id;
 
-/**
- * Konva selection callback to select all renderable layers. This includes RG, CA II and Raster layers.
- * This can be provided to the `find` or `findOne` konva node methods.
- */
-export const selectRenderableLayers = (node: Konva.Node): boolean =>
-  node.name() === RG_LAYER_NAME ||
-  node.name() === CA_LAYER_NAME ||
-  node.name() === RASTER_LAYER_NAME ||
-  node.name() === INPAINT_MASK_LAYER_ID;
-
-/**
- * Konva selection callback to select RG mask objects. This includes lines and rects.
- * This can be provided to the `find` or `findOne` konva node methods.
- */
-export const selectVectorMaskObjects = (node: Konva.Node): boolean =>
-  node.name() === RG_LAYER_BRUSH_LINE_NAME ||
-  node.name() === RG_LAYER_ERASER_LINE_NAME ||
-  node.name() === RG_LAYER_RECT_SHAPE_NAME;
-
-/**
- * Konva selection callback to select raster layer objects. This includes lines and rects.
- * This can be provided to the `find` or `findOne` konva node methods.
- */
-export const selectRasterObjects = (node: Konva.Node): boolean =>
-  node.name() === RASTER_LAYER_BRUSH_LINE_NAME ||
-  node.name() === RASTER_LAYER_ERASER_LINE_NAME ||
-  node.name() === RASTER_LAYER_RECT_SHAPE_NAME ||
-  node.name() === RASTER_LAYER_IMAGE_NAME;
-
 /**
  * Convert a Blob to a data URL.
  */

invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts

@@ -3,7 +3,6 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
-import { INPAINT_MASK_LAYER_ID } from 'features/controlLayers/konva/naming';
 import { bboxReducers } from 'features/controlLayers/store/bboxReducers';
 import { compositingReducers } from 'features/controlLayers/store/compositingReducers';
 import { controlAdaptersReducers } from 'features/controlLayers/store/controlAdaptersReducers';
@@ -26,14 +25,14 @@ import { RGBA_RED } from './types';
 
 const initialState: CanvasV2State = {
   _version: 3,
-  selectedEntityIdentifier: { type: 'inpaint_mask', id: INPAINT_MASK_LAYER_ID },
+  selectedEntityIdentifier: { type: 'inpaint_mask', id: 'inpaint_mask' },
   layers: { entities: [], imageCache: null },
   controlAdapters: { entities: [] },
   ipAdapters: { entities: [] },
   regions: { entities: [] },
   loras: [],
   inpaintMask: {
-    id: INPAINT_MASK_LAYER_ID,
+    id: 'inpaint_mask',
     type: 'inpaint_mask',
     bbox: null,
     bboxNeedsUpdate: false,
@@ -187,6 +186,7 @@ export const canvasV2Slice = createSlice({
       state.selectedEntityIdentifier = deepClone(initialState.selectedEntityIdentifier);
       state.session = deepClone(initialState.session);
       state.tool = deepClone(initialState.tool);
+      state.inpaintMask = deepClone(initialState.inpaintMask);
     },
   },
 });