Multiple canvases displayed

Author: Attila Cseh

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

@@ -1,7 +1,7 @@
 import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useSelectedCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { allEntitiesDeleted, inpaintMaskAdded } from 'features/controlLayers/store/canvasSlice';
-import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { paramsReset } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
@@ -12,12 +12,13 @@ export const SessionMenuItems = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const tab = useAppSelector(selectActiveTab);
+  const canvasManager = useSelectedCanvasManagerSafe();
 
   const resetCanvasLayers = useCallback(() => {
     dispatch(allEntitiesDeleted());
     dispatch(inpaintMaskAdded({ isSelected: true, isBookmarked: true }));
-    $canvasManager.get()?.stage.fitBboxToStage();
-  }, [dispatch]);
+    canvasManager?.stage.fitBboxToStage();
+  }, [dispatch, canvasManager]);
   const resetGenerationSettings = useCallback(() => {
     dispatch(paramsReset());
   }, [dispatch]);

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

@@ -2,8 +2,12 @@ import { Box } from '@invoke-ai/ui-library';
 import { useInvokeCanvas } from 'features/controlLayers/hooks/useInvokeCanvas';
 import { memo } from 'react';
 
-export const InvokeCanvasComponent = memo(() => {
-  const ref = useInvokeCanvas();
+interface InvokeCanvasComponent {
+  canvasId: string;
+}
+
+export const InvokeCanvasComponent = memo(({ canvasId }: InvokeCanvasComponent) => {
+  const ref = useInvokeCanvas(canvasId);
 
   return (
     <Box

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx

@@ -6,7 +6,7 @@ import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/Canva
 import { RefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
 import { useNewGlobalReferenceImageFromBbox } from 'features/controlLayers/hooks/saveCanvasHooks';
-import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import {
   refImageAdded,
   selectIsRefImagePanelOpen,
@@ -132,7 +132,7 @@ AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';
 
 const BboxButton = memo(() => {
   const { t } = useTranslation();
-  const isBusy = useCanvasIsBusySafe();
+  const isBusy = useCanvasIsBusy();
   const newGlobalReferenceImageFromBbox = useNewGlobalReferenceImageFromBbox();
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageSettings.tsx

@@ -10,10 +10,7 @@ import { IPAdapterMethod } from 'features/controlLayers/components/RefImage/IPAd
 import { RefImageModel } from 'features/controlLayers/components/RefImage/RefImageModel';
 import { RefImageNoImageState } from 'features/controlLayers/components/RefImage/RefImageNoImageState';
 import { RefImageNoImageStateWithCanvasOptions } from 'features/controlLayers/components/RefImage/RefImageNoImageStateWithCanvasOptions';
-import {
-  CanvasManagerProviderGate,
-  useCanvasManagerSafe,
-} from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { CanvasManagerProviderGate, useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import {

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

@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext } from 'react';
+import { assert } from 'tsafe';
+
+const CanvasInstanceContext = createContext<string | null>(null);
+
+export const CanvasInstanceContextProvider = memo(({ canvasId, children }: PropsWithChildren<{ canvasId: string }>) => {
+  return <CanvasInstanceContext.Provider value={canvasId}>{children}</CanvasInstanceContext.Provider>;
+});
+CanvasInstanceContextProvider.displayName = 'CanvasInstanceContextProvider';
+
+export const useScopedCanvas = () => {
+  const canvasId = useContext(CanvasInstanceContext);
+  assert(canvasId, 'useCanvasInstanceContext must be used within a CanvasInstanceContext');
+  return canvasId;
+};
+
+export const useScopedCanvasSafe = () => {
+  return useContext(CanvasInstanceContext);
+};
+
+export const useHasScopedCanvas = () => {
+  const canvasId = useContext(CanvasInstanceContext);
+
+  return !!canvasId;
+};

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

@@ -1,38 +1,112 @@
 import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { $canvasManager } from 'features/controlLayers/store/ephemeral';
+import { $canvasManagers } from 'features/controlLayers/store/ephemeral';
+import { selectSelectedCanvas } from 'features/controlLayers/store/selectors';
 import type { PropsWithChildren } from 'react';
-import { createContext, memo, useContext } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { assert } from 'tsafe';
 
-const CanvasManagerContext = createContext<CanvasManager | null>(null);
+import { useScopedCanvas, useScopedCanvasSafe } from './CanvasInstanceContextProvider';
+
+const CanvasManagerContext = createContext<{ [canvasId: string]: CanvasManager } | null>(null);
 
 export const CanvasManagerProviderGate = memo(({ children }: PropsWithChildren) => {
-  const canvasManager = useStore($canvasManager);
+  const canvasManagers = useStore($canvasManagers);
+  const selectedCanvas = useAppSelector(selectSelectedCanvas);
 
-  if (!canvasManager) {
+  if((Object.keys(canvasManagers).length === 0) || !canvasManagers[selectedCanvas.id]) {
     return null;
   }
 
-  return <CanvasManagerContext.Provider value={canvasManager}>{children}</CanvasManagerContext.Provider>;
+  return <CanvasManagerContext.Provider value={canvasManagers}>{children}</CanvasManagerContext.Provider>;
 });
 
 CanvasManagerProviderGate.displayName = 'CanvasManagerProviderGate';
 
 /**
- * Consumes the CanvasManager from the context. This hook must be used within the CanvasManagerProviderGate, otherwise
+ * Consumes the scoped CanvasManager from the context. This hook must be used within the CanvasManagerProviderGate, otherwise
+ * it will throw an error.
+ */
+export const useScopedCanvasManager = (): CanvasManager => {
+  const canvasManagers = useContext(CanvasManagerContext);
+  assert(canvasManagers, 'useScopedCanvasManager must be used within a CanvasManagerProviderGate');
+
+  const scopedCanvasId = useScopedCanvas();
+  const canvasManager = useMemo(() => {
+    return canvasManagers[scopedCanvasId];
+  }, [canvasManagers, scopedCanvasId]);
+  assert(canvasManager, 'Scoped canvas manager not initialised');
+
+  return canvasManager;
+};
+
+/**
+ * Consumes the selected CanvasManager from the context. This hook must be used within the CanvasManagerProviderGate, otherwise
  * it will throw an error.
  */
+export const useSelectedCanvasManager = (): CanvasManager => {
+  const canvasManagers = useContext(CanvasManagerContext);
+  assert(canvasManagers, 'useScopedCanvasManager must be used within a CanvasManagerProviderGate');
+
+  const selectedCanvas = useAppSelector(selectSelectedCanvas);
+  const canvasManager = useMemo(() => {
+    return canvasManagers[selectedCanvas.id];
+  }, [canvasManagers, selectedCanvas]);
+  assert(canvasManager, 'Selected canvas manager not initialised');
+
+  return canvasManager;
+};
+
+/**
+ * Consumes the scoped CanvasManager from the context. If the CanvasManager is not available, it will return null.
+ */
+export const useScopedCanvasManagerSafe = (): CanvasManager | null => {
+  const canvasManagers = useStore($canvasManagers);
+  const scopedCanvasId = useScopedCanvasSafe();
+
+  const canvasManager = useMemo(() => {
+    return scopedCanvasId ? canvasManagers[scopedCanvasId] : undefined;
+  }, [canvasManagers, scopedCanvasId]);
+
+  return canvasManager ?? null;
+};
+
+/**
+ * Consumes the selected CanvasManager from the context. If the CanvasManager is not available, it will return null.
+ */
+export const useSelectedCanvasManagerSafe = (): CanvasManager | null => {
+  const canvasManagers = useStore($canvasManagers);
+  const selectedCanvas = useAppSelector(selectSelectedCanvas);
+
+  const canvasManager = useMemo(() => {
+    return canvasManagers[selectedCanvas.id];
+  }, [canvasManagers, selectedCanvas]);
+
+  return canvasManager ?? null;
+};
+
+/**
+ * Consumes the CanvasManager from the context. If the CanvasManager is not available, it will throw an error.
+ */
 export const useCanvasManager = (): CanvasManager => {
-  const canvasManager = useContext(CanvasManagerContext);
-  assert(canvasManager, 'useCanvasManagerContext must be used within a CanvasManagerProviderGate');
+  const canvasManager = useCanvasManagerSafe();
+  assert(canvasManager, 'Selected canvas manager not initialised');
+
   return canvasManager;
 };
 
 /**
  * Consumes the CanvasManager from the context. If the CanvasManager is not available, it will return null.
  */
 export const useCanvasManagerSafe = (): CanvasManager | null => {
-  const canvasManager = useStore($canvasManager);
-  return canvasManager;
+  const canvasManagers = useStore($canvasManagers);
+  const scopedCanvasId = useScopedCanvasSafe();
+  const selectedCanvas = useAppSelector(selectSelectedCanvas);
+
+  const canvasManager = useMemo(() => {
+    return scopedCanvasId ? canvasManagers[scopedCanvasId] : canvasManagers[selectedCanvas.id];
+  }, [canvasManagers, selectedCanvas, scopedCanvasId]);
+
+  return canvasManager ?? null;
 };

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

@@ -1,35 +1,95 @@
 import { useStore } from '@nanostores/react';
 import { $false } from 'app/store/nanostores/util';
-import { useCanvasManager, useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useHasScopedCanvas } from 'features/controlLayers/contexts/CanvasInstanceContextProvider';
+import {
+  useScopedCanvasManager,
+  useScopedCanvasManagerSafe,
+  useSelectedCanvasManager,
+  useSelectedCanvasManagerSafe,
+} from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useMemo } from 'react';
 
 /**
- * Returns a boolena indicating whether the canvas is busy:
+ * Returns a boolena indicating whether the scoped canvas is busy:
  * - While staging
  * - While an entity is transforming
  * - While an entity is filtering
  * - While the canvas is doing some other long-running operation, like rasterizing a layer
  *
  * This hook will throw an error if the canvas manager is not initialized.
  */
-export const useCanvasIsBusy = () => {
-  const canvasManager = useCanvasManager();
+export const useScopedCanvasIsBusy = () => {
+  const canvasManager = useScopedCanvasManager();
   const isBusy = useStore(canvasManager.$isBusy);
 
   return isBusy;
 };
 
 /**
- * Returns a boolena indicating whether the canvas is busy:
+ * Returns a boolena indicating whether the selected canvas is busy:
+ * - While staging
+ * - While an entity is transforming
+ * - While an entity is filtering
+ * - While the canvas is doing some other long-running operation, like rasterizing a layer
+ *
+ * This hook will throw an error if the canvas manager is not initialized.
+ */
+export const useSelectedCanvasIsBusy = () => {
+  const canvasManager = useSelectedCanvasManager();
+  const isBusy = useStore(canvasManager.$isBusy);
+
+  return isBusy;
+};
+
+/**
+ * Returns a boolena indicating whether the scoped canvas is busy:
+ * - While staging
+ * - While an entity is transforming
+ * - While an entity is filtering
+ * - While the canvas is doing some other long-running operation, like rasterizing a layer
+ *
+ * This hook will fall back to false if the canvas manager is not initialized.
+ */
+export const useScopedCanvasIsBusySafe = () => {
+  const canvasManager = useScopedCanvasManagerSafe();
+  const isBusy = useStore(canvasManager?.$isBusy ?? $false);
+
+  return isBusy;
+};
+
+/**
+ * Returns a boolena indicating whether the selected canvas is busy:
  * - While staging
  * - While an entity is transforming
  * - While an entity is filtering
  * - While the canvas is doing some other long-running operation, like rasterizing a layer
  *
  * This hook will fall back to false if the canvas manager is not initialized.
  */
-export const useCanvasIsBusySafe = () => {
-  const canvasManager = useCanvasManagerSafe();
+export const useSelectedCanvasIsBusySafe = () => {
+  const canvasManager = useSelectedCanvasManagerSafe();
   const isBusy = useStore(canvasManager?.$isBusy ?? $false);
 
   return isBusy;
 };
+
+/**
+ * Returns a boolena indicating whether the canvas is busy:
+ * - While staging
+ * - While an entity is transforming
+ * - While an entity is filtering
+ * - While the canvas is doing some other long-running operation, like rasterizing a layer
+ *
+ * This hook will fall back to false if the canvas manager is not initialized.
+ */
+export const useCanvasIsBusy = () => {
+  const hasScopedCanvas = useHasScopedCanvas();
+  const isScopedBusy = useScopedCanvasIsBusySafe();
+  const isSelectedBusy = useSelectedCanvasIsBusySafe();
+
+  const isBusy = useMemo(() => {
+    return hasScopedCanvas ? isScopedBusy : isSelectedBusy;
+  }, [hasScopedCanvas, isScopedBusy, isSelectedBusy]);
+
+  return isBusy;
+};

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

@@ -3,19 +3,19 @@ import { logger } from 'app/logging/logger';
 import { useAppStore } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import Konva from 'konva';
 import { useLayoutEffect, useState } from 'react';
 import { $socket } from 'services/events/stores';
 import { useDevicePixelRatio } from 'use-device-pixel-ratio';
+import { $canvasManagers } from '../store/ephemeral';
 
 const log = logger('canvas');
 
 // This will log warnings when layers > 5
 Konva.showWarnings = import.meta.env.MODE === 'development';
 
-const useKonvaPixelRatioWatcher = () => {
-  useAssertSingleton('useKonvaPixelRatioWatcher');
+const useKonvaPixelRatioWatcher = (canvasId: string) => {
+  useAssertSingleton(`useKonvaPixelRatioWatcher-${canvasId}`);
 
   const dpr = useDevicePixelRatio({ round: false });
 
@@ -24,12 +24,13 @@ const useKonvaPixelRatioWatcher = () => {
   }, [dpr]);
 };
 
-export const useInvokeCanvas = (): ((el: HTMLDivElement | null) => void) => {
-  useAssertSingleton('useInvokeCanvas');
-  useKonvaPixelRatioWatcher();
+export const useInvokeCanvas = (canvasId: string): ((el: HTMLDivElement | null) => void) => {
+  useAssertSingleton(`useInvokeCanvas-${canvasId}`);
+  useKonvaPixelRatioWatcher(canvasId);
   const store = useAppStore();
   const socket = useStore($socket);
   const [container, containerRef] = useState<HTMLDivElement | null>(null);
+  const currentManager = $canvasManagers.get()[canvasId];
 
   useLayoutEffect(() => {
     log.debug('Initializing renderer');
@@ -44,20 +45,18 @@ export const useInvokeCanvas = (): ((el: HTMLDivElement | null) => void) => {
       return () => {};
     }
 
-    const currentManager = $canvasManager.get();
     if (currentManager) {
       currentManager.stage.setContainer(container);
       return;
     }
 
-    const manager = new CanvasManager(container, store, socket);
+    const manager = new CanvasManager(canvasId, container, store, socket);
     manager.initialize();
 
     return () => {
       manager.destroy();
-      $canvasManager.set(null);
     };
-  }, [container, socket, store]);
+  }, [canvasId, container, socket, store, currentManager]);
 
   return containerRef;
 };