From 9b39452b3e76149b03c3a6798142d79a845a91a6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:35:49 +1000
Subject: [PATCH] feat(ui): restore context menu for entity list

---
 .../components/CanvasPanelContent.tsx         | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx
index d6691ac271..f14ae8deed 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx
@@ -1,21 +1,37 @@
-import { Divider, Flex } from '@invoke-ai/ui-library';
+import { Box, ContextMenu, Divider, Flex, MenuList } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 import { EntityListActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBar';
+import { CanvasEntityListMenuItems } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuItems';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 export const CanvasPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
+  const renderMenu = useCallback(
+    () => (
+      <MenuList>
+        <CanvasEntityListMenuItems />
+      </MenuList>
+    ),
+    []
+  );
+
   return (
     <CanvasManagerProviderGate>
       <Flex flexDir="column" gap={2} w="full" h="full">
         <EntityListActionBar />
         <Divider py={0} />
-        {!hasEntities && <CanvasAddEntityButtons />}
-        {hasEntities && <CanvasEntityList />}
+        <ContextMenu<HTMLDivElement> renderMenu={renderMenu} stopImmediatePropagation stopPropagation>
+          {(ref) => (
+            <Box ref={ref} w="full" h="full">
+              {!hasEntities && <CanvasAddEntityButtons />}
+              {hasEntities && <CanvasEntityList />}
+            </Box>
+          )}
+        </ContextMenu>
       </Flex>
     </CanvasManagerProviderGate>
   );