diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBbox.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBbox.ts index 7ab216c4bf..797c97aba2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBbox.ts +++ b/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, diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts index f9bd9895be..4dcd7be36b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasInpaintMask.ts +++ b/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()), diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/entityBbox.ts b/invokeai/frontend/web/src/features/controlLayers/konva/entityBbox.ts index 0dcb9d2d3c..e68131c386 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/entityBbox.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/entityBbox.ts @@ -1,11 +1,5 @@ import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; -import { - CA_LAYER_IMAGE_NAME, - getLayerBboxId, - LAYER_BBOX_NAME, - RASTER_LAYER_OBJECT_GROUP_NAME, - RG_LAYER_OBJECT_GROUP_NAME, -} from 'features/controlLayers/konva/naming'; +import { getLayerBboxId } 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; -const filterLayerChildren = (node: Konva.Node): boolean => node.name() === RASTER_LAYER_OBJECT_GROUP_NAME; -const filterCAChildren = (node: Konva.Node): boolean => node.name() === CA_LAYER_IMAGE_NAME; +// TODO(psyche): fix this +const filterRGChildren = (node: Konva.Node): boolean => true; +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(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(entityState, konvaLayer); + const bboxRect = konvaLayer.findOne('.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(); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/naming.ts b/invokeai/frontend/web/src/features/controlLayers/konva/naming.ts index c96464092c..c9888d27df 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/naming.ts +++ b/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 getLayerId = (entityId: string) => `${RASTER_LAYER_NAME}_${entityId}`; +export const getRGId = (entityId: string) => `region_${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}`; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts b/invokeai/frontend/web/src/features/controlLayers/konva/util.ts index e4d52922f1..c5971d7b99 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts +++ b/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. */ diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts index 8b6a80fe67..c98486fb5f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts +++ b/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); }, }, });