From 85b23784cf936a1981770479ce9d495acab20cc0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:27:55 +1000
Subject: [PATCH] feat(ui): add delete button to each layer

---
 .../components/ControlLayer/ControlLayer.tsx  |  6 ++--
 .../components/IPAdapter/IPAdapter.tsx        |  6 ++--
 .../components/InpaintMask/InpaintMask.tsx    |  6 ++--
 .../components/RasterLayer/RasterLayer.tsx    |  6 ++--
 .../RegionalGuidance/RegionalGuidance.tsx     |  6 ++--
 .../common/CanvasEntityDeleteButton.tsx       | 31 +++++++++++++++++++
 .../common/CanvasEntityEnabledToggle.tsx      |  3 +-
 .../CanvasEntityHeaderCommonActions.tsx       | 20 ++++++++++++
 .../common/CanvasEntityIsLockedToggle.tsx     |  3 +-
 9 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
index 5db974dd42..fe65a54e6b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
@@ -1,8 +1,7 @@
 import { Spacer } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
+import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
@@ -29,8 +28,7 @@ export const ControlLayer = memo(({ id }: Props) => {
             <CanvasEntityEditableTitle />
             <Spacer />
             <ControlLayerBadges />
-            <CanvasEntityIsLockedToggle />
-            <CanvasEntityEnabledToggle />
+            <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
           <CanvasEntitySettingsWrapper>
             <ControlLayerControlAdapter />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
index 01b08f4356..9fac78cd22 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
@@ -1,7 +1,7 @@
 import { Spacer } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
+import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
@@ -18,10 +18,10 @@ export const IPAdapter = memo(({ id }: Props) => {
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <CanvasEntityContainer>
-        <CanvasEntityHeader ps={4}>
+        <CanvasEntityHeader ps={4} py={5}>
           <CanvasEntityEditableTitle />
           <Spacer />
-          <CanvasEntityEnabledToggle />
+          <CanvasEntityHeaderCommonActions />
         </CanvasEntityHeader>
         <IPAdapterSettings />
       </CanvasEntityContainer>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx
index 9dcd945505..6f489a14fc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx
@@ -1,8 +1,7 @@
 import { Spacer } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
+import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { EntityMaskAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
@@ -25,8 +24,7 @@ export const InpaintMask = memo(({ id }: Props) => {
             <CanvasEntityPreviewImage />
             <CanvasEntityEditableTitle />
             <Spacer />
-            <CanvasEntityIsLockedToggle />
-            <CanvasEntityEnabledToggle />
+            <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
         </CanvasEntityContainer>
       </EntityMaskAdapterGate>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
index bf64f5dd5b..493b3cf373 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
@@ -1,8 +1,7 @@
 import { Spacer } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
+import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { EntityLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
@@ -25,8 +24,7 @@ export const RasterLayer = memo(({ id }: Props) => {
             <CanvasEntityPreviewImage />
             <CanvasEntityEditableTitle />
             <Spacer />
-            <CanvasEntityIsLockedToggle />
-            <CanvasEntityEnabledToggle />
+            <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
         </CanvasEntityContainer>
       </EntityLayerAdapterGate>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
index e788cfba5f..7f86fcda05 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
@@ -1,8 +1,7 @@
 import { Spacer } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
+import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges';
@@ -28,8 +27,7 @@ export const RegionalGuidance = memo(({ id }: Props) => {
             <CanvasEntityEditableTitle />
             <Spacer />
             <RegionalGuidanceBadges />
-            <CanvasEntityIsLockedToggle />
-            <CanvasEntityEnabledToggle />
+            <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
           <RegionalGuidanceSettings />
         </CanvasEntityContainer>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
new file mode 100644
index 0000000000..82cbf65a9a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
@@ -0,0 +1,31 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiTrashSimpleFill } from 'react-icons/pi';
+
+export const CanvasEntityDeleteButton = memo(() => {
+  const { t } = useTranslation();
+  const entityIdentifier = useEntityIdentifierContext();
+  const dispatch = useAppDispatch();
+  const onClick = useCallback(() => {
+    dispatch(entityDeleted({ entityIdentifier }));
+  }, [dispatch, entityIdentifier]);
+
+  return (
+    <IconButton
+      size="sm"
+      aria-label={t('common.delete')}
+      tooltip={t('common.delete')}
+      variant="link"
+      alignSelf="stretch"
+      icon={<PiTrashSimpleFill />}
+      onClick={onClick}
+      colorScheme='error'
+    />
+  );
+});
+
+CanvasEntityDeleteButton.displayName = 'CanvasEntityDeleteButton';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
index 1ff1a8cdba..ba2db50182 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
@@ -21,7 +21,8 @@ export const CanvasEntityEnabledToggle = memo(() => {
       size="sm"
       aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
       tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
-      variant="ghost"
+      variant="link"
+      alignSelf="stretch"
       icon={isEnabled ? <PiCircleFill /> : <PiCircleBold />}
       onClick={onClick}
     />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx
new file mode 100644
index 0000000000..7ae614cb09
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx
@@ -0,0 +1,20 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
+import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
+import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { memo } from 'react';
+
+export const CanvasEntityHeaderCommonActions = memo(() => {
+  const entityIdentifier = useEntityIdentifierContext();
+
+  return (
+    <Flex alignSelf="stretch">
+      {entityIdentifier.type !== 'ip_adapter' && <CanvasEntityIsLockedToggle />}
+      <CanvasEntityEnabledToggle />
+      <CanvasEntityDeleteButton />
+    </Flex>
+  );
+});
+
+CanvasEntityHeaderCommonActions.displayName = 'CanvasEntityHeaderCommonActions';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
index 0c7689a0cf..e41a1d89e7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
@@ -21,7 +21,8 @@ export const CanvasEntityIsLockedToggle = memo(() => {
       size="sm"
       aria-label={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
       tooltip={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
-      variant="ghost"
+      variant="link"
+      alignSelf="stretch"
       icon={isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />}
       onClick={onClick}
     />