From 2e43d655ff73c06b9f944afc757dc1cacb412f1b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 27 Jun 2025 00:59:46 +0000
Subject: [PATCH 1/4] Add floating toolbar for canvas layers with entity type
 buttons

Co-authored-by: kent <kent@invoke.ai>
---
 .../CanvasLayersFloatingToolbar.tsx           | 92 +++++++++++++++++++
 .../components/CanvasLayersPanelContent.tsx   |  4 +-
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
new file mode 100644
index 00000000000..5922dfb8307
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
@@ -0,0 +1,92 @@
+import { ButtonGroup, Flex, IconButton, Tooltip } from '@invoke-ai/ui-library';
+import {
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddNewRegionalGuidanceWithARefImage,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useIsEntityTypeEnabled } from 'features/controlLayers/hooks/useIsEntityTypeEnabled';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  PiEraserBold,
+  PiImageBold,
+  PiPaintBrushBold,
+  PiRectangleBold,
+  PiShapesFill,
+} from 'react-icons/pi';
+
+export const CanvasLayersFloatingToolbar = memo(() => {
+  const { t } = useTranslation();
+  const isBusy = useCanvasIsBusy();
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRegionalReferenceImage = useAddNewRegionalGuidanceWithARefImage();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const isRegionalGuidanceEnabled = useIsEntityTypeEnabled('regional_guidance');
+  const isControlLayerEnabled = useIsEntityTypeEnabled('control_layer');
+  const isInpaintLayerEnabled = useIsEntityTypeEnabled('inpaint_mask');
+
+  return (
+    <Flex
+      position="absolute"
+      bottom={2}
+      left="50%"
+      transform="translateX(-50%)"
+      bg="base.800"
+      borderRadius="md"
+      p={1}
+      boxShadow="dark-lg"
+      border="1px solid"
+      borderColor="base.700"
+    >
+      <ButtonGroup variant="ghost" size="sm" spacing={1}>
+        <Tooltip label={t('controlLayers.inpaintMask')} placement="top">
+          <IconButton
+            aria-label={t('controlLayers.inpaintMask')}
+            icon={<PiEraserBold />}
+            onClick={addInpaintMask}
+            isDisabled={!isInpaintLayerEnabled || isBusy}
+          />
+        </Tooltip>
+        <Tooltip label={t('controlLayers.regionalGuidance')} placement="top">
+          <IconButton
+            aria-label={t('controlLayers.regionalGuidance')}
+            icon={<PiShapesFill />}
+            onClick={addRegionalGuidance}
+            isDisabled={!isRegionalGuidanceEnabled || isBusy}
+          />
+        </Tooltip>
+        <Tooltip label={t('controlLayers.regionalReferenceImage')} placement="top">
+          <IconButton
+            aria-label={t('controlLayers.regionalReferenceImage')}
+            icon={<PiImageBold />}
+            onClick={addRegionalReferenceImage}
+            isDisabled={!isRegionalGuidanceEnabled || isBusy}
+          />
+        </Tooltip>
+        <Tooltip label={t('controlLayers.controlLayer')} placement="top">
+          <IconButton
+            aria-label={t('controlLayers.controlLayer')}
+            icon={<PiRectangleBold />}
+            onClick={addControlLayer}
+            isDisabled={!isControlLayerEnabled || isBusy}
+          />
+        </Tooltip>
+        <Tooltip label={t('controlLayers.rasterLayer')} placement="top">
+          <IconButton
+            aria-label={t('controlLayers.rasterLayer')}
+            icon={<PiPaintBrushBold />}
+            onClick={addRasterLayer}
+            isDisabled={isBusy}
+          />
+        </Tooltip>
+      </ButtonGroup>
+    </Flex>
+  );
+});
+
+CanvasLayersFloatingToolbar.displayName = 'CanvasLayersFloatingToolbar';
\ No newline at end of file
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
index 49ae65205b1..91f893dc0bb 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
@@ -2,6 +2,7 @@ import { Divider, Flex } 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 { CanvasLayersFloatingToolbar } from 'features/controlLayers/components/CanvasLayersFloatingToolbar';
 import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
@@ -14,13 +15,14 @@ export const CanvasLayersPanel = memo(() => {
 
   return (
     <CanvasManagerProviderGate>
-      <Flex flexDir="column" gap={2} w="full" h="full" p={2}>
+      <Flex flexDir="column" gap={2} w="full" h="full" p={2} position="relative">
         <EntityListSelectedEntityActionBar />
         <Divider py={0} />
         <ParamDenoisingStrength />
         <Divider py={0} />
         {!hasEntities && <CanvasAddEntityButtons />}
         {hasEntities && <CanvasEntityList />}
+        {hasEntities && <CanvasLayersFloatingToolbar />}
       </Flex>
     </CanvasManagerProviderGate>
   );

From c867be026c0d9cef15b862cf0d3e390e00d1050d Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Sun, 29 Jun 2025 01:01:06 -0400
Subject: [PATCH 2/4] removed reg reference img

---
 .../components/CanvasLayersFloatingToolbar.tsx            | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
index 5922dfb8307..e3aec7e49e7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
@@ -60,14 +60,6 @@ export const CanvasLayersFloatingToolbar = memo(() => {
             isDisabled={!isRegionalGuidanceEnabled || isBusy}
           />
         </Tooltip>
-        <Tooltip label={t('controlLayers.regionalReferenceImage')} placement="top">
-          <IconButton
-            aria-label={t('controlLayers.regionalReferenceImage')}
-            icon={<PiImageBold />}
-            onClick={addRegionalReferenceImage}
-            isDisabled={!isRegionalGuidanceEnabled || isBusy}
-          />
-        </Tooltip>
         <Tooltip label={t('controlLayers.controlLayer')} placement="top">
           <IconButton
             aria-label={t('controlLayers.controlLayer')}

From 8ec6370d1fde0134631da8f40d5b210bbe177b2b Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Sun, 29 Jun 2025 01:09:23 -0400
Subject: [PATCH 3/4] Lint

---
 .../controlLayers/components/CanvasLayersFloatingToolbar.tsx   | 3 +--
 .../controlLayers/components/CanvasLayersPanelContent.tsx      | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
index e3aec7e49e7..5d1f2203e9a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
@@ -12,7 +12,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiEraserBold,
-  PiImageBold,
   PiPaintBrushBold,
   PiRectangleBold,
   PiShapesFill,
@@ -23,7 +22,7 @@ export const CanvasLayersFloatingToolbar = memo(() => {
   const isBusy = useCanvasIsBusy();
   const addInpaintMask = useAddInpaintMask();
   const addRegionalGuidance = useAddRegionalGuidance();
-  const addRegionalReferenceImage = useAddNewRegionalGuidanceWithARefImage();
+  const _addRegionalReferenceImage = useAddNewRegionalGuidanceWithARefImage();
   const addRasterLayer = useAddRasterLayer();
   const addControlLayer = useAddControlLayer();
   const isRegionalGuidanceEnabled = useIsEntityTypeEnabled('regional_guidance');
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
index 91f893dc0bb..d89a0479ab5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
@@ -2,8 +2,8 @@ import { Divider, Flex } 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 { CanvasLayersFloatingToolbar } from 'features/controlLayers/components/CanvasLayersFloatingToolbar';
 import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
+import { CanvasLayersFloatingToolbar } from 'features/controlLayers/components/CanvasLayersFloatingToolbar';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';

From 139cda9aa6787fbccdd13da8b8d8d75f8a2c489b Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Sun, 29 Jun 2025 01:37:54 -0400
Subject: [PATCH 4/4] prettier

---
 .../components/CanvasLayersFloatingToolbar.tsx           | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
index 5d1f2203e9a..c0f4749a4fb 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersFloatingToolbar.tsx
@@ -10,12 +10,7 @@ import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useIsEntityTypeEnabled } from 'features/controlLayers/hooks/useIsEntityTypeEnabled';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiEraserBold,
-  PiPaintBrushBold,
-  PiRectangleBold,
-  PiShapesFill,
-} from 'react-icons/pi';
+import { PiEraserBold, PiPaintBrushBold, PiRectangleBold, PiShapesFill } from 'react-icons/pi';
 
 export const CanvasLayersFloatingToolbar = memo(() => {
   const { t } = useTranslation();
@@ -80,4 +75,4 @@ export const CanvasLayersFloatingToolbar = memo(() => {
   );
 });
 
-CanvasLayersFloatingToolbar.displayName = 'CanvasLayersFloatingToolbar';
\ No newline at end of file
+CanvasLayersFloatingToolbar.displayName = 'CanvasLayersFloatingToolbar';