diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx index 6f6d828c5c..721ddf9d8e 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx @@ -11,7 +11,6 @@ import { $tool, isMaskedGuidanceLayer, layerBboxChanged, - layerSelected, layerTranslated, selectRegionalPromptsSlice, } from 'features/regionalPrompts/store/regionalPromptsSlice'; @@ -66,13 +65,6 @@ const useStageRenderer = ( [dispatch] ); - const onBboxMouseDown = useCallback( - (layerId: string) => { - dispatch(layerSelected(layerId)); - }, - [dispatch] - ); - useLayoutEffect(() => { log.trace('Initializing stage'); if (!container) { @@ -182,8 +174,8 @@ const useStageRenderer = ( // Preview should not display bboxes return; } - renderers.renderBbox(stage, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown); - }, [stage, asPreview, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown, renderers]); + renderers.renderBbox(stage, state.layers, tool, onBboxChanged); + }, [stage, asPreview, state.layers, tool, onBboxChanged, renderers]); useLayoutEffect(() => { log.trace('Rendering background'); diff --git a/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts b/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts index d024c45ae3..88a025b559 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts @@ -142,10 +142,12 @@ export const regionalPromptsSlice = createSlice({ return; }, layerSelected: (state, action: PayloadAction) => { - for (const layer of state.layers) { - if (isRenderableLayer(layer) && layer.id === action.payload) { + for (const layer of state.layers.filter(isRenderableLayer)) { + if (layer.id === action.payload) { layer.isSelected = true; state.selectedLayerId = action.payload; + } else { + layer.isSelected = false; } } }, diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts index 3d2da4ecea..944d996bff 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts +++ b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts @@ -43,8 +43,6 @@ import { assert } from 'tsafe'; import { v4 as uuidv4 } from 'uuid'; const BBOX_SELECTED_STROKE = 'rgba(78, 190, 255, 1)'; -const BBOX_NOT_SELECTED_STROKE = 'rgba(255, 255, 255, 0.353)'; -const BBOX_NOT_SELECTED_MOUSEOVER_STROKE = 'rgba(255, 255, 255, 0.661)'; const BRUSH_BORDER_INNER_COLOR = 'rgba(0,0,0,1)'; const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)'; // This is invokeai/frontend/web/public/assets/images/transparent_bg.png as a dataURL @@ -53,13 +51,6 @@ const STAGE_BG_DATAURL = const mapId = (object: { id: string }) => object.id; -const getIsSelected = (layerId?: string | null) => { - if (!layerId) { - return false; - } - return layerId === getStore().getState().regionalPrompts.present.selectedLayerId; -}; - const selectRenderableLayers = (n: Konva.Node) => n.name() === MASKED_GUIDANCE_LAYER_NAME || n.name() === CONTROLNET_LAYER_NAME; @@ -560,29 +551,12 @@ const renderLayers = ( * @param konvaLayer The konva layer to attach the bounding box to. * @param onBboxMouseDown Callback for when the bounding box is clicked. */ -const createBboxRect = (reduxLayer: Layer, konvaLayer: Konva.Layer, onBboxMouseDown: (layerId: string) => void) => { +const createBboxRect = (reduxLayer: Layer, konvaLayer: Konva.Layer) => { const rect = new Konva.Rect({ id: getLayerBboxId(reduxLayer.id), name: LAYER_BBOX_NAME, strokeWidth: 1, }); - rect.on('mousedown', function () { - onBboxMouseDown(reduxLayer.id); - }); - rect.on('mouseover', function (e) { - if (getIsSelected(e.target.getLayer()?.id())) { - this.stroke(BBOX_SELECTED_STROKE); - } else { - this.stroke(BBOX_NOT_SELECTED_MOUSEOVER_STROKE); - } - }); - rect.on('mouseout', function (e) { - if (getIsSelected(e.target.getLayer()?.id())) { - this.stroke(BBOX_SELECTED_STROKE); - } else { - this.stroke(BBOX_NOT_SELECTED_STROKE); - } - }); konvaLayer.add(rect); return rect; }; @@ -600,10 +574,8 @@ const createBboxRect = (reduxLayer: Layer, konvaLayer: Konva.Layer, onBboxMouseD const renderBbox = ( stage: Konva.Stage, reduxLayers: Layer[], - selectedLayerId: string | null, tool: Tool, - onBboxChanged: (layerId: string, bbox: IRect | null) => void, - onBboxMouseDown: (layerId: string) => void + onBboxChanged: (layerId: string, bbox: IRect | null) => void ) => { // Hide all bboxes so they don't interfere with getClientRect for (const bboxRect of stage.find(`.${LAYER_BBOX_NAME}`)) { @@ -634,18 +606,16 @@ const renderBbox = ( continue; } - const rect = - konvaLayer.findOne(`.${LAYER_BBOX_NAME}`) ?? - createBboxRect(reduxLayer, konvaLayer, onBboxMouseDown); + const rect = konvaLayer.findOne(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(reduxLayer, konvaLayer); rect.setAttrs({ visible: true, - listening: true, + listening: reduxLayer.isSelected, x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height, - stroke: reduxLayer.id === selectedLayerId ? BBOX_SELECTED_STROKE : BBOX_NOT_SELECTED_STROKE, + stroke: reduxLayer.isSelected ? BBOX_SELECTED_STROKE : '', }); } }