ui elements isolated per tab/canvas

Author: Attila Cseh

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -15,6 +15,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { typedMemo } from 'common/util/typedMemo';
+import { selectActiveCanvasId, selectActiveTab } from 'features/controlLayers/store/selectors';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import { selectPickerCompactViewStates } from 'features/ui/store/uiSelectors';
 import { pickerCompactViewStateChanged } from 'features/ui/store/uiSlice';
@@ -893,7 +894,10 @@ GroupToggleButtons.displayName = 'GroupToggleButtons';
 const CompactViewToggleButton = typedMemo(<T extends object>() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { isCompactView, pickerId } = usePickerContext<T>();
+  const { isCompactView, pickerId: id } = usePickerContext<T>();
+  const activeTab = useAppSelector(selectActiveTab);
+  const activeCanvasId = useAppSelector(selectActiveCanvasId);
+  const pickerId = activeTab === 'canvas' ? `${activeCanvasId}-${id}` : `${activeTab}-${id}`;
 
   const onClick = useCallback(() => {
     if (pickerId) {

invokeai/frontend/web/src/common/hooks/usePersistedTextareaSize.ts

@@ -1,5 +1,6 @@
-import { useAppStore } from 'app/store/storeHooks';
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { debounce } from 'es-toolkit/compat';
+import { selectActiveCanvasId, selectActiveTab } from 'features/controlLayers/store/selectors';
 import type { Dimensions } from 'features/controlLayers/store/types';
 import { selectUiSlice, textAreaSizesStateChanged } from 'features/ui/store/uiSlice';
 import { type RefObject, useCallback, useEffect, useMemo } from 'react';
@@ -22,12 +23,15 @@ type Options = {
  */
 export const usePersistedTextAreaSize = (id: string, ref: RefObject<HTMLTextAreaElement>, options: Options) => {
   const { dispatch, getState } = useAppStore();
+  const activeTab = useAppSelector(selectActiveTab);
+  const activeCanvasId = useAppSelector(selectActiveCanvasId);
+  const textAreaSizesId = activeTab === 'canvas' ? `${activeCanvasId}-${id}` : `${activeTab}-${id}`;
 
   const onResize = useCallback(
     (size: Partial<Dimensions>) => {
-      dispatch(textAreaSizesStateChanged({ id, size }));
+      dispatch(textAreaSizesStateChanged({ id: textAreaSizesId, size }));
     },
-    [dispatch, id]
+    [dispatch, textAreaSizesId]
   );
 
   const debouncedOnResize = useMemo(() => debounce(onResize, 300), [onResize]);

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

@@ -19,7 +19,7 @@ export const getInitialTabInstanceParamsState = (): TabInstanceParamsState => ({
 });
 
 const getInitialTabState = (): TabState => ({
-  activeTab: 'generate' as const,
+  activeTab: 'canvas' as const,
   generate: getInitialTabInstanceParamsState(),
   upscaling: getInitialTabInstanceParamsState(),
   video: getInitialTabInstanceParamsState(),

invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx

@@ -79,7 +79,7 @@ export const AdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
   const { isOpen, onToggle } = useStandaloneAccordionToggle({
-    id: `'advanced-settings-generate`,
+    id: 'advanced-settings-generate',
     defaultIsOpen: false,
   });
 

invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/UpscaleTabAdvancedSettingsAccordion.tsx

@@ -69,7 +69,7 @@ export const UpscaleTabAdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
   const { isOpen, onToggle } = useStandaloneAccordionToggle({
-    id: `'advanced-settings-upscaling`,
+    id: 'advanced-settings-upscaling',
     defaultIsOpen: false,
   });
 

invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectActiveCanvasId, selectActiveTab } from 'features/controlLayers/store/selectors';
 import { expanderStateChanged, selectUiSlice } from 'features/ui/store/uiSlice';
 import { useCallback, useMemo } from 'react';
 
@@ -10,13 +11,17 @@ type UseExpanderToggleArg = {
 
 export const useExpanderToggle = (arg: UseExpanderToggleArg) => {
   const dispatch = useAppDispatch();
+  const activeTab = useAppSelector(selectActiveTab);
+  const activeCanvasId = useAppSelector(selectActiveCanvasId);
+  const expanderId = activeTab === 'canvas' ? `${activeCanvasId}-${arg.id}` : `${activeTab}-${arg.id}`;
   const selectIsOpen = useMemo(
-    () => createSelector(selectUiSlice, (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen),
-    [arg]
+    () => createSelector(selectUiSlice, (ui) => ui.expanders[expanderId] ?? arg.defaultIsOpen),
+    [expanderId, arg]
   );
   const isOpen = useAppSelector(selectIsOpen);
+
   const onToggle = useCallback(() => {
-    dispatch(expanderStateChanged({ id: arg.id, isOpen: !isOpen }));
-  }, [dispatch, arg.id, isOpen]);
+    dispatch(expanderStateChanged({ id: expanderId, isOpen: !isOpen }));
+  }, [dispatch, expanderId, isOpen]);
   return { isOpen, onToggle };
 };

invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectActiveCanvasId, selectActiveTab } from 'features/controlLayers/store/selectors';
 import { accordionStateChanged, selectUiSlice } from 'features/ui/store/uiSlice';
 import { useCallback, useMemo } from 'react';
 
@@ -10,14 +11,18 @@ type UseStandaloneAccordionToggleArg = {
 
 export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleArg) => {
   const dispatch = useAppDispatch();
+  const activeTab = useAppSelector(selectActiveTab);
+  const activeCanvasId = useAppSelector(selectActiveCanvasId);
+  const accordionId = activeTab === 'canvas' ? `${activeCanvasId}-${arg.id}` : `${activeTab}-${arg.id}`;
   const selectIsOpen = useMemo(
-    () => createSelector(selectUiSlice, (ui) => ui.accordions[arg.id] ?? arg.defaultIsOpen),
-    [arg]
+    () => createSelector(selectUiSlice, (ui) => ui.accordions[accordionId] ?? arg.defaultIsOpen),
+    [accordionId, arg]
   );
   const isOpen = useAppSelector(selectIsOpen);
+
   const onToggle = useCallback(() => {
-    dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
-  }, [arg.id, dispatch, isOpen]);
+    dispatch(accordionStateChanged({ id: accordionId, isOpen: !isOpen }));
+  }, [dispatch, accordionId, isOpen]);
 
   return { isOpen, onToggle };
 };

invokeai/frontend/web/src/features/ui/layouts/use-navigation-api.tsx

@@ -1,6 +1,7 @@
+import type { AppStore } from 'app/store/store';
 import { useAppStore } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { selectActiveTab } from 'features/controlLayers/store/selectors';
+import { selectActiveCanvasId, selectActiveTab } from 'features/controlLayers/store/selectors';
 import { setActiveTab } from 'features/controlLayers/store/tabSlice';
 import type { TabName } from 'features/controlLayers/store/types';
 import { dockviewStorageKeyChanged } from 'features/ui/store/uiSlice';
@@ -9,6 +10,14 @@ import type { JsonObject } from 'type-fest';
 
 import { navigationApi } from './navigation-api';
 
+const createStorageId = (store: AppStore, id: string) => {
+  const state = store.getState();
+  const activeTab = selectActiveTab(state);
+  const activeCanvasId = selectActiveCanvasId(state);
+
+  return activeTab === 'canvas' ? `${activeCanvasId}-${id}` : `${activeTab}-${id}`;
+};
+
 /**
  * Hook that initializes the global navigation API with callbacks to access and modify the active tab and handle
  * stored panel states.
@@ -29,13 +38,16 @@ export const useNavigationApi = () => {
       },
       storage: {
         get: (id: string) => {
-          return store.getState().ui.panels[id];
+          const storageId = createStorageId(store, id);
+          return store.getState().ui.panels[storageId];
         },
         set: (id: string, state: JsonObject) => {
-          store.dispatch(dockviewStorageKeyChanged({ id, state }));
+          const storageId = createStorageId(store, id);
+          store.dispatch(dockviewStorageKeyChanged({ id: storageId, state }));
         },
         delete: (id: string) => {
-          store.dispatch(dockviewStorageKeyChanged({ id, state: undefined }));
+          const storageId = createStorageId(store, id);
+          store.dispatch(dockviewStorageKeyChanged({ id: storageId, state: undefined }));
         },
       },
     }),