From fdcd26fa12c036d93a6cb8917a0e0918cdffd5be Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:49:40 +1000
Subject: [PATCH] chore(ui): lint (circular dependency)

Had to shuffle around the canvas right panel tabs state.
---
 .../listeners/enqueueRequestedLinear.ts       |  2 +-
 .../CanvasAlerts/CanvasAlertsSendingTo.tsx    | 10 ++++----
 .../components/CanvasRightPanel.tsx           | 23 +++++++++----------
 .../Toolbar/CanvasToolbarResetViewButton.tsx  |  2 +-
 .../contexts/CanvasManagerProviderGate.tsx    |  2 +-
 .../hooks/useCanvasDeleteLayerHotkey.ts       |  2 +-
 .../controlLayers/hooks/useInvokeCanvas.ts    |  2 +-
 .../controlLayers/konva/CanvasManager.ts      |  2 +-
 .../controlLayers/store/canvasSlice.ts        |  7 ------
 .../features/controlLayers/store/ephemeral.ts | 22 ++++++++++++++++++
 .../gallery/hooks/useGalleryHotkeys.ts        |  2 +-
 11 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/store/ephemeral.ts

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
index 7da7ac99de..60a8ea814f 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
index 11df592ad5..1064c4d40f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
+++ b/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 (
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx
index 3ddb9f9bb4..70e1cfbb84 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx
+++ b/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,7 +62,7 @@ const PanelTabs = memo(() => {
   const onOnMouseOverLayersTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToLayers();
+        selectCanvasRightPanelLayersTab();
       }
     }, 300);
   }, [dndCtx.active]);
@@ -71,7 +70,7 @@ const PanelTabs = memo(() => {
   const onOnMouseOverGalleryTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToGallery();
+        selectCanvasRightPanelGalleryTab();
       }
     }, 300);
   }, [dndCtx.active]);
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx
index ed960ac2a4..86f4320dd1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx b/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx
index 6563fd9f95..ca3528c7a0 100644
--- a/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts
index 36ea5f884d..32d33cc139 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts
index 7a1beec882..d6cf71d8fb 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts
+++ b/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';
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
index eca6f1a5bb..b9f995e348 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
+++ b/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,
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts
index 7475e20651..acbe467880 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts
+++ b/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);
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/ephemeral.ts b/invokeai/frontend/web/src/features/controlLayers/store/ephemeral.ts
new file mode 100644
index 0000000000..57d6666e15
--- /dev/null
+++ b/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);
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index 333e00d051..672741e094 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $activeScopes } from 'common/hooks/interactionScopes';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { $canvasRightPanelTab } from 'features/controlLayers/components/CanvasRightPanel';
+import { $canvasRightPanelTab } from 'features/controlLayers/store/ephemeral';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
 import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';