chore(ui): lint (circular dependency)

Had to shuffle around the canvas right panel tabs state.

Author: psychedelicious

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

@@ -4,7 +4,7 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import type { SerializableObject } from 'common/types';
 import type { Result } from 'common/util/result';
 import { withResult, withResultAsync } from 'common/util/result';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildFLUXGraph } from 'features/nodes/util/graph/generation/buildFLUXGraph';
 import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';

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

@@ -12,9 +12,9 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useBoolean } from 'common/hooks/useBoolean';
 import {
-  setRightPanelTabToGallery,
-  setRightPanelTabToLayers,
-} from 'features/controlLayers/components/CanvasRightPanel';
+  selectCanvasRightPanelGalleryTab,
+  selectCanvasRightPanelLayersTab,
+} from 'features/controlLayers/store/ephemeral';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination';
 import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice';
@@ -29,7 +29,7 @@ const ActivateImageViewerButton = (props: PropsWithChildren) => {
   const imageViewer = useImageViewer();
   const onClick = useCallback(() => {
     imageViewer.open();
-    setRightPanelTabToGallery();
+    selectCanvasRightPanelGalleryTab();
   }, [imageViewer]);
   return (
     <Button onClick={onClick} size="sm" variant="link" color="base.50">
@@ -69,7 +69,7 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
   const imageViewer = useImageViewer();
   const onClick = useCallback(() => {
     dispatch(setActiveTab('canvas'));
-    setRightPanelTabToLayers();
+    selectCanvasRightPanelLayersTab();
     imageViewer.close();
   }, [dispatch, imageViewer]);
   return (

invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx

@@ -4,35 +4,34 @@ import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
+import {
+  $canvasRightPanelTabIndex,
+  selectCanvasRightPanelGalleryTab,
+  selectCanvasRightPanelLayersTab,
+} from 'features/controlLayers/store/ephemeral';
 import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { atom, computed } from 'nanostores';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
-const $tabIndex = atom(0);
-export const $canvasRightPanelTab = computed($tabIndex, (index) => (index === 0 ? 'layers' : 'gallery'));
-export const setRightPanelTabToLayers = () => $tabIndex.set(0);
-export const setRightPanelTabToGallery = () => $tabIndex.set(1);
-
 export const CanvasRightPanel = memo(() => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
-  const tabIndex = useStore($tabIndex);
+  const tabIndex = useStore($canvasRightPanelTabIndex);
   useScopeOnFocus('gallery', ref);
   const imageViewer = useImageViewer();
   const onClickViewerToggleButton = useCallback(() => {
-    if ($tabIndex.get() !== 1) {
-      $tabIndex.set(1);
+    if ($canvasRightPanelTabIndex.get() !== 1) {
+      $canvasRightPanelTabIndex.set(1);
     }
     imageViewer.toggle();
   }, [imageViewer]);
   useHotkeys('z', imageViewer.toggle);
 
   return (
-    <Tabs index={tabIndex} onChange={$tabIndex.set} w="full" h="full" display="flex" flexDir="column">
+    <Tabs index={tabIndex} onChange={$canvasRightPanelTabIndex.set} w="full" h="full" display="flex" flexDir="column">
       <TabList alignItems="center">
         <PanelTabs />
         <Spacer />
@@ -63,15 +62,15 @@ const PanelTabs = memo(() => {
   const onOnMouseOverLayersTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToLayers();
+        selectCanvasRightPanelLayersTab();
       }
     }, 300);
   }, [dndCtx.active]);
 
   const onOnMouseOverGalleryTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToGallery();
+        selectCanvasRightPanelGalleryTab();
       }
     }, 300);
   }, [dndCtx.active]);

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx

@@ -1,7 +1,7 @@
 import { $alt, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext } from 'react';
 import { assert } from 'tsafe';

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts

@@ -1,9 +1,9 @@
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { $canvasRightPanelTab } from 'features/controlLayers/components/CanvasRightPanel';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
+import { $canvasRightPanelTab } from 'features/controlLayers/store/ephemeral';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { useCallback, useMemo } from 'react';

invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts

@@ -3,7 +3,7 @@ import { logger } from 'app/logging/logger';
 import { useAppStore } from 'app/store/nanostores/store';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import Konva from 'konva';
 import { useLayoutEffect, useState } from 'react';
 import { $socket } from 'services/events/stores';

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

@@ -18,7 +18,7 @@ import { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStag
 import { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule';
 import { CanvasWorkerModule } from 'features/controlLayers/konva/CanvasWorkerModule.js';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import type { CanvasEntityIdentifier, CanvasEntityType } from 'features/controlLayers/store/types';
 import {
   isControlLayerEntityIdentifier,

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

@@ -4,7 +4,6 @@ import type { PersistConfig } from 'app/store/store';
 import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
 import { deepClone } from 'common/util/deepClone';
 import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple';
-import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { canvasReset } from 'features/controlLayers/store/actions';
 import { modelChanged } from 'features/controlLayers/store/paramsSlice';
@@ -28,7 +27,6 @@ import { ASPECT_RATIO_MAP } from 'features/parameters/components/Bbox/constants'
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import type { IRect } from 'konva/lib/types';
 import { merge, omit } from 'lodash-es';
-import { atom } from 'nanostores';
 import type { UndoableOptions } from 'redux-undo';
 import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { assert } from 'tsafe';
@@ -1234,8 +1232,3 @@ function actionsThrottlingFilter(action: UnknownAction) {
   }, THROTTLE_MS);
   return true;
 }
-
-/**
- * The global canvas manager instance.
- */
-export const $canvasManager = atom<CanvasManager | null>(null);

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

@@ -0,0 +1,22 @@
+import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
+import { atom, computed } from 'nanostores';
+
+// Ephemeral state for canvas - not persisted across sessions.
+
+/**
+ * The global canvas manager instance.
+ */
+export const $canvasManager = atom<CanvasManager | null>(null);
+
+/**
+ * The index of the active tab in the canvas right panel.
+ */
+export const $canvasRightPanelTabIndex = atom(0);
+/**
+ * The name of the active tab in the canvas right panel.
+ */
+export const $canvasRightPanelTab = computed($canvasRightPanelTabIndex, (index) =>
+  index === 0 ? 'layers' : 'gallery'
+);
+export const selectCanvasRightPanelLayersTab = () => $canvasRightPanelTabIndex.set(0);
+export const selectCanvasRightPanelGalleryTab = () => $canvasRightPanelTabIndex.set(1);