canvas slice refactored to support tabbed canvases

Author: Attila Cseh

invokeai/frontend/web/package.json

@@ -48,7 +48,7 @@
     "@invoke-ai/ui-library": "^0.0.47",
     "@nanostores/react": "^1.0.0",
     "@observ33r/object-equals": "^1.1.5",
-    "@reduxjs/toolkit": "2.8.2",
+    "@reduxjs/toolkit": "2.9.0",
     "@roarr/browser-log-writer": "^1.3.0",
     "@xyflow/react": "^12.8.2",
     "ag-psd": "^28.2.2",

invokeai/frontend/web/pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import type { AppStartListening } from 'app/store/store';
 import { selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { selectSelectedCanvas } from 'features/controlLayers/store/selectors';
 import { getImageUsage } from 'features/deleteImageModal/store/state';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
@@ -19,7 +19,7 @@ export const addDeleteBoardAndImagesFulfilledListener = (startAppListening: AppS
 
       const state = getState();
       const nodes = selectNodesSlice(state);
-      const canvas = selectCanvasSlice(state);
+      const canvas = selectSelectedCanvas(state);
       const upscale = selectUpscaleSlice(state);
       const refImages = selectRefImagesSlice(state);
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts

@@ -8,7 +8,7 @@ import { refImageModelChanged, selectReferenceImageEntities } from 'features/con
 import {
   selectAllEntitiesOfType,
   selectBboxModelBase,
-  selectCanvasSlice,
+  selectSelectedCanvas,
 } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { modelSelected } from 'features/parameters/store/actions';
@@ -118,7 +118,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         const newRegionalRefImageModel = selectRegionalRefImageModels(state)[0] ?? null;
 
         // All regional guidance entities are updated to use the same new model.
-        const canvasState = selectCanvasSlice(state);
+        const canvasState = selectSelectedCanvas(state);
         const canvasRegionalGuidanceEntities = selectAllEntitiesOfType(canvasState, 'regional_guidance');
         for (const entity of canvasRegionalGuidanceEntities) {
           for (const refImage of entity.referenceImages) {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -11,7 +11,7 @@ import {
   vaeSelected,
 } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { selectSelectedCanvas } from 'features/controlLayers/store/selectors';
 import {
   getEntityIdentifier,
   isFLUXReduxConfig,
@@ -221,7 +221,7 @@ const handleVideoModels: ModelHandler = (models, state, dispatch, log) => {
 
 const handleControlAdapterModels: ModelHandler = (models, state, dispatch, log) => {
   const caModels = models.filter(isControlLayerModelConfig);
-  selectCanvasSlice(state).controlLayers.entities.forEach((entity) => {
+  selectSelectedCanvas(state).controlLayers.entities.forEach((entity) => {
     const selectedControlAdapterModel = entity.controlAdapter.model;
     // `null` is a valid control adapter model - no need to do anything.
     if (!selectedControlAdapterModel) {
@@ -256,7 +256,7 @@ const handleIPAdapterModels: ModelHandler = (models, state, dispatch, log) => {
     dispatch(refImageModelChanged({ id: entity.id, modelConfig: null }));
   });
 
-  selectCanvasSlice(state).regionalGuidance.entities.forEach((entity) => {
+  selectSelectedCanvas(state).regionalGuidance.entities.forEach((entity) => {
     entity.referenceImages.forEach(({ id: referenceImageId, config }) => {
       if (!isRegionalGuidanceIPAdapterConfig(config)) {
         return;
@@ -299,7 +299,7 @@ const handleFLUXReduxModels: ModelHandler = (models, state, dispatch, log) => {
     dispatch(refImageModelChanged({ id: entity.id, modelConfig: null }));
   });
 
-  selectCanvasSlice(state).regionalGuidance.entities.forEach((entity) => {
+  selectSelectedCanvas(state).regionalGuidance.entities.forEach((entity) => {
     entity.referenceImages.forEach(({ id: referenceImageId, config }) => {
       if (!isRegionalGuidanceFLUXReduxConfig(config)) {
         return;

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -9,8 +9,8 @@ import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
 import { useEntityTypeIsHidden } from 'features/controlLayers/hooks/useEntityTypeIsHidden';
 import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
 import {
-  selectCanvasSlice,
   selectEntityOrThrow,
+  selectSelectedCanvas,
   selectSelectedEntityIdentifier,
 } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
@@ -32,13 +32,13 @@ type AlertData = {
 
 const buildSelectIsEnabled = (entityIdentifier: CanvasEntityIdentifier) =>
   createSelector(
-    selectCanvasSlice,
+    selectSelectedCanvas,
     (canvas) => selectEntityOrThrow(canvas, entityIdentifier, 'CanvasAlertsSelectedEntityStatusContent').isEnabled
   );
 
 const buildSelectIsLocked = (entityIdentifier: CanvasEntityIdentifier) =>
   createSelector(
-    selectCanvasSlice,
+    selectSelectedCanvas,
     (canvas) => selectEntityOrThrow(canvas, entityIdentifier, 'CanvasAlertsSelectedEntityStatusContent').isLocked
   );
 

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx

@@ -20,8 +20,8 @@ import { clamp, round } from 'es-toolkit/compat';
 import { snapToNearest } from 'features/controlLayers/konva/util';
 import { entityOpacityChanged } from 'features/controlLayers/store/canvasSlice';
 import {
-  selectCanvasSlice,
   selectEntity,
+  selectSelectedCanvas,
   selectSelectedEntityIdentifier,
 } from 'features/controlLayers/store/selectors';
 import type { KeyboardEvent } from 'react';
@@ -61,7 +61,7 @@ const sliderDefaultValue = mapRawValueToSliderValue(1);
 
 const snapCandidates = marks.slice(1, marks.length - 1);
 
-const selectOpacity = createSelector(selectCanvasSlice, (canvas) => {
+const selectOpacity = createSelector(selectSelectedCanvas, (canvas) => {
   const selectedEntityIdentifier = canvas.selectedEntityIdentifier;
   if (!selectedEntityIdentifier) {
     return 1; // fallback to 100% opacity

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx

@@ -3,14 +3,14 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityStateGate } from 'features/controlLayers/contexts/CanvasEntityStateGate';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
+import { selectEntityOrThrow, selectSelectedCanvas } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const buildSelectWithTransparencyEffect = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) =>
   createSelector(
-    selectCanvasSlice,
+    selectSelectedCanvas,
     (canvas) => selectEntityOrThrow(canvas, entityIdentifier, 'ControlLayerBadgesContent').withTransparencyEffect
   );
 

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerBadges.tsx

@@ -19,7 +19,7 @@ import {
 } from 'features/controlLayers/store/canvasSlice';
 import { getFilterForModel } from 'features/controlLayers/store/filters';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
+import { selectEntityOrThrow, selectSelectedCanvas } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
 import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
 import { memo, useCallback, useMemo } from 'react';
@@ -33,7 +33,7 @@ import type {
 } from 'services/api/types';
 
 const buildSelectControlAdapter = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) =>
-  createSelector(selectCanvasSlice, (canvas) => {
+  createSelector(selectSelectedCanvas, (canvas) => {
     const layer = selectEntityOrThrow(canvas, entityIdentifier, 'ControlLayerControlAdapter');
     return layer.controlAdapter;
   });

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx

@@ -3,11 +3,11 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityGroupList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityGroupList';
 import { ControlLayer } from 'features/controlLayers/components/ControlLayer/ControlLayer';
-import { selectCanvasSlice, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { selectSelectedCanvas, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 
-const selectEntityIdentifiers = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+const selectEntityIdentifiers = createMemoizedSelector(selectSelectedCanvas, (canvas) => {
   return canvas.controlLayers.entities.map(getEntityIdentifier).toReversed();
 });