feat(ui): add contexts/hooks to access entity adapters directly

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

@@ -7,6 +7,7 @@ import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/c
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { ControlLayerControlAdapter } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapter';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { EntityLayerAdapterProviderGate } from 'features/controlLayers/hooks/useEntityLayerAdapter';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 
@@ -19,6 +20,7 @@ export const ControlLayer = memo(({ id }: Props) => {
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
+      <EntityLayerAdapterProviderGate>
         <CanvasEntityContainer>
           <CanvasEntityHeader>
             <CanvasEntityEnabledToggle />
@@ -30,6 +32,7 @@ export const ControlLayer = memo(({ id }: Props) => {
             <ControlLayerControlAdapter />
           </CanvasEntitySettingsWrapper>
         </CanvasEntityContainer>
+      </EntityLayerAdapterProviderGate>
     </EntityIdentifierContext.Provider>
   );
 });

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

@@ -4,6 +4,7 @@ import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/com
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { EntityMaskAdapterProviderGate } from 'features/controlLayers/hooks/useEntityMaskAdapter';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 
@@ -18,6 +19,7 @@ export const InpaintMask = memo(({ id }: Props) => {
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
+      <EntityMaskAdapterProviderGate>
         <CanvasEntityContainer>
           <CanvasEntityHeader>
             <CanvasEntityEnabledToggle />
@@ -26,6 +28,7 @@ export const InpaintMask = memo(({ id }: Props) => {
             <InpaintMaskMaskFillColorPicker />
           </CanvasEntityHeader>
         </CanvasEntityContainer>
+      </EntityMaskAdapterProviderGate>
     </EntityIdentifierContext.Provider>
   );
 });

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

@@ -5,6 +5,7 @@ import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/com
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { EntityLayerAdapterProviderGate } from 'features/controlLayers/hooks/useEntityLayerAdapter';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 
@@ -17,6 +18,7 @@ export const RasterLayer = memo(({ id }: Props) => {
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
+      <EntityLayerAdapterProviderGate>
         <CanvasEntityContainer>
           <CanvasEntityHeader>
             <CanvasEntityEnabledToggle />
@@ -25,6 +27,7 @@ export const RasterLayer = memo(({ id }: Props) => {
             <CanvasEntityDeleteButton />
           </CanvasEntityHeader>
         </CanvasEntityContainer>
+      </EntityLayerAdapterProviderGate>
     </EntityIdentifierContext.Provider>
   );
 });

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

@@ -7,6 +7,7 @@ import { CanvasEntityEditableTitle } from 'features/controlLayers/components/com
 import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges';
 import { RegionalGuidanceSettings } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { EntityMaskAdapterProviderGate } from 'features/controlLayers/hooks/useEntityMaskAdapter';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
 
@@ -22,6 +23,7 @@ export const RegionalGuidance = memo(({ id }: Props) => {
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
+      <EntityMaskAdapterProviderGate>
         <CanvasEntityContainer>
           <CanvasEntityHeader>
             <CanvasEntityEnabledToggle />
@@ -34,6 +36,7 @@ export const RegionalGuidance = memo(({ id }: Props) => {
           </CanvasEntityHeader>
           <RegionalGuidanceSettings />
         </CanvasEntityContainer>
+      </EntityMaskAdapterProviderGate>
     </EntityIdentifierContext.Provider>
   );
 });

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

@@ -6,12 +6,6 @@ import { assert } from 'tsafe';
 
 const CanvasManagerContext = createContext<CanvasManager | null>(null);
 
-export const useCanvasManager = (): CanvasManager => {
-  const canvasManager = useContext(CanvasManagerContext);
-  assert(canvasManager, 'useCanvasManagerContext must be used within a CanvasManagerContext');
-  return canvasManager;
-};
-
 export const CanvasManagerProviderGate = memo(({ children }: PropsWithChildren) => {
   const canvasManager = useStore($canvasManager);
 
@@ -23,3 +17,9 @@ export const CanvasManagerProviderGate = memo(({ children }: PropsWithChildren)
 });
 
 CanvasManagerProviderGate.displayName = 'CanvasManagerProviderGate';
+
+export const useCanvasManager = (): CanvasManager => {
+  const canvasManager = useContext(CanvasManagerContext);
+  assert(canvasManager, 'useCanvasManagerContext must be used within a CanvasManagerProviderGate');
+  return canvasManager;
+};

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

@@ -1,8 +1,18 @@
-import { useStore } from '@nanostores/react';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
+import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter';
+import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import { useMemo } from 'react';
+import { assert } from 'tsafe';
 
-export const useEntityAdapter = (entityIdentifier: CanvasEntityIdentifier) => {
+export const useEntityAdapter = (entityIdentifier: CanvasEntityIdentifier): CanvasLayerAdapter | CanvasMaskAdapter => {
-  const canvasManager = useStore($canvasManager);
+  const canvasManager = useCanvasManager();
-  console.log(canvasManager);
+
+  const adapter = useMemo(() => {
+    const entity = canvasManager.stateApi.getEntity(entityIdentifier);
+    assert(entity, 'Entity adapter not found');
+    return entity.adapter;
+  }, [canvasManager, entityIdentifier]);
+
+  return adapter;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityLayerAdapter.tsx

@@ -0,0 +1,37 @@
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import type { CanvasLayerAdapter } from 'features/controlLayers/konva/CanvasLayerAdapter';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+import { assert } from 'tsafe';
+
+const EntityLayerAdapterContext = createContext<CanvasLayerAdapter | null>(null);
+
+export const EntityLayerAdapterProviderGate = memo(({ children }: PropsWithChildren) => {
+  const entityIdentifier = useEntityIdentifierContext();
+  const canvasManager = useCanvasManager();
+  const adapter = useMemo(() => {
+    if (entityIdentifier.type === 'raster_layer') {
+      return canvasManager.rasterLayerAdapters.get(entityIdentifier.id) ?? null;
+    } else if (entityIdentifier.type === 'control_layer') {
+      return canvasManager.controlLayerAdapters.get(entityIdentifier.id) ?? null;
+    }
+    assert(false, 'EntityLayerAdapterProviderGate must be used with a valid EntityIdentifierContext');
+  }, [canvasManager, entityIdentifier]);
+
+  if (!canvasManager) {
+    return null;
+  }
+
+  return <EntityLayerAdapterContext.Provider value={adapter}>{children}</EntityLayerAdapterContext.Provider>;
+});
+
+EntityLayerAdapterProviderGate.displayName = 'EntityLayerAdapterProviderGate';
+
+export const useEntityLayerAdapter = (): CanvasLayerAdapter => {
+  const adapter = useContext(EntityLayerAdapterContext);
+
+  assert(adapter, 'useEntityLayerAdapter must be used within a EntityLayerAdapterProviderGate');
+
+  return adapter;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityMaskAdapter.tsx

@@ -0,0 +1,37 @@
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import type { CanvasMaskAdapter } from 'features/controlLayers/konva/CanvasMaskAdapter';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+import { assert } from 'tsafe';
+
+const EntityMaskAdapterContext = createContext<CanvasMaskAdapter | null>(null);
+
+export const EntityMaskAdapterProviderGate = memo(({ children }: PropsWithChildren) => {
+  const entityIdentifier = useEntityIdentifierContext();
+  const canvasManager = useCanvasManager();
+  const adapter = useMemo(() => {
+    if (entityIdentifier.type === 'inpaint_mask') {
+      return canvasManager.inpaintMaskAdapters.get(entityIdentifier.id) ?? null;
+    } else if (entityIdentifier.type === 'regional_guidance') {
+      return canvasManager.regionalGuidanceAdapters.get(entityIdentifier.id) ?? null;
+    }
+    assert(false, 'EntityMaskAdapterProviderGate must be used with a valid EntityIdentifierContext');
+  }, [canvasManager, entityIdentifier]);
+
+  if (!canvasManager) {
+    return null;
+  }
+
+  return <EntityMaskAdapterContext.Provider value={adapter}>{children}</EntityMaskAdapterContext.Provider>;
+});
+
+EntityMaskAdapterProviderGate.displayName = 'EntityMaskAdapterProviderGate';
+
+export const useEntityMaskAdapter = (): CanvasMaskAdapter => {
+  const adapter = useContext(EntityMaskAdapterContext);
+
+  assert(adapter, 'useEntityMaskAdapter must be used within a EntityLayerAdapterProviderGate');
+
+  return adapter;
+};