From d67480d92ca56f33a2fdc4e23cea36fa85ba7a42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 2 May 2024 20:52:49 +1000
Subject: [PATCH] feat(ui): add layerwrapper component

---
 .../components/CALayer/CALayer.tsx            | 40 +++++++---------
 .../components/IPALayer/IPALayer.tsx          | 27 +++++------
 .../components/LayerCommon/LayerWrapper.tsx   | 21 +++++++++
 .../components/RGLayer/RGLayer.tsx            | 47 +++++++++----------
 4 files changed, 73 insertions(+), 62 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
index 24de817df2..984331a050 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
@@ -5,6 +5,7 @@ import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon
 import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
 import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import { layerSelected, selectCALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useCallback } from 'react';
 
@@ -17,37 +18,28 @@ type Props = {
 export const CALayer = memo(({ layerId }: Props) => {
   const dispatch = useAppDispatch();
   const isSelected = useAppSelector((s) => selectCALayerOrThrow(s.controlLayers.present, layerId).isSelected);
-  const onClickCapture = useCallback(() => {
+  const onClick = useCallback(() => {
     // Must be capture so that the layer is selected before deleting/resetting/etc
     dispatch(layerSelected(layerId));
   }, [dispatch, layerId]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
   return (
-    <Flex
-      gap={2}
-      onClickCapture={onClickCapture}
-      bg={isSelected ? 'base.400' : 'base.800'}
-      px={2}
-      borderRadius="base"
-      py="1px"
-    >
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="control_adapter_layer" />
-          <Spacer />
-          <CALayerOpacity layerId={layerId} />
-          <LayerMenu layerId={layerId} />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            <CALayerControlAdapterWrapper layerId={layerId} />
-          </Flex>
-        )}
+    <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
+      <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
+        <LayerVisibilityToggle layerId={layerId} />
+        <LayerTitle type="control_adapter_layer" />
+        <Spacer />
+        <CALayerOpacity layerId={layerId} />
+        <LayerMenu layerId={layerId} />
+        <LayerDeleteButton layerId={layerId} />
       </Flex>
-    </Flex>
+      {isOpen && (
+        <Flex flexDir="column" gap={3} px={3} pb={3}>
+          <CALayerControlAdapterWrapper layerId={layerId} />
+        </Flex>
+      )}
+    </LayerWrapper>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
index 715e538679..02a161608d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
@@ -3,6 +3,7 @@ import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPAL
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
 import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import { memo } from 'react';
 
 type Props = {
@@ -12,21 +13,19 @@ type Props = {
 export const IPALayer = memo(({ layerId }: Props) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
   return (
-    <Flex gap={2} bg="base.800" borderRadius="base" p="1px" px={2}>
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="ip_adapter_layer" />
-          <Spacer />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            <IPALayerIPAdapterWrapper layerId={layerId} />
-          </Flex>
-        )}
+    <LayerWrapper borderColor="base.800">
+      <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
+        <LayerVisibilityToggle layerId={layerId} />
+        <LayerTitle type="ip_adapter_layer" />
+        <Spacer />
+        <LayerDeleteButton layerId={layerId} />
       </Flex>
-    </Flex>
+      {isOpen && (
+        <Flex flexDir="column" gap={3} px={3} pb={3}>
+          <IPALayerIPAdapterWrapper layerId={layerId} />
+        </Flex>
+      )}
+    </LayerWrapper>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
new file mode 100644
index 0000000000..9d5fb6ea4b
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
@@ -0,0 +1,21 @@
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+type Props = PropsWithChildren<{
+  onClick?: () => void;
+  borderColor: ChakraProps['bg'];
+}>;
+
+export const LayerWrapper = memo(({ onClick, borderColor, children }: Props) => {
+  return (
+    <Flex gap={2} onClick={onClick} bg={borderColor} px={2} borderRadius="base" py="1px">
+      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
+        {children}
+      </Flex>
+    </Flex>
+  );
+});
+
+LayerWrapper.displayName = 'LayerWrapper';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx
index baed22f6ca..a6bce5316e 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx
@@ -7,6 +7,7 @@ import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon
 import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
 import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import {
   isRegionalGuidanceLayer,
   layerSelected,
@@ -52,32 +53,30 @@ export const RGLayer = memo(({ layerId }: Props) => {
     dispatch(layerSelected(layerId));
   }, [dispatch, layerId]);
   return (
-    <Flex gap={2} onClick={onClick} bg={isSelected ? color : 'base.800'} px={2} borderRadius="base" py="1px">
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-          <LayerVisibilityToggle layerId={layerId} />
-          <LayerTitle type="regional_guidance_layer" />
-          <Spacer />
-          {autoNegative === 'invert' && (
-            <Badge color="base.300" bg="transparent" borderWidth={1} userSelect="none">
-              {t('controlLayers.autoNegative')}
-            </Badge>
-          )}
-          <RGLayerColorPicker layerId={layerId} />
-          <RGLayerSettingsPopover layerId={layerId} />
-          <LayerMenu layerId={layerId} />
-          <LayerDeleteButton layerId={layerId} />
-        </Flex>
-        {isOpen && (
-          <Flex flexDir="column" gap={3} px={3} pb={3}>
-            {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
-            {hasPositivePrompt && <RGLayerPositivePrompt layerId={layerId} />}
-            {hasNegativePrompt && <RGLayerNegativePrompt layerId={layerId} />}
-            {hasIPAdapters && <RGLayerIPAdapterList layerId={layerId} />}
-          </Flex>
+    <LayerWrapper onClick={onClick} borderColor={isSelected ? color : 'base.800'}>
+      <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
+        <LayerVisibilityToggle layerId={layerId} />
+        <LayerTitle type="regional_guidance_layer" />
+        <Spacer />
+        {autoNegative === 'invert' && (
+          <Badge color="base.300" bg="transparent" borderWidth={1} userSelect="none">
+            {t('controlLayers.autoNegative')}
+          </Badge>
         )}
+        <RGLayerColorPicker layerId={layerId} />
+        <RGLayerSettingsPopover layerId={layerId} />
+        <LayerMenu layerId={layerId} />
+        <LayerDeleteButton layerId={layerId} />
       </Flex>
-    </Flex>
+      {isOpen && (
+        <Flex flexDir="column" gap={3} px={3} pb={3}>
+          {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
+          {hasPositivePrompt && <RGLayerPositivePrompt layerId={layerId} />}
+          {hasNegativePrompt && <RGLayerNegativePrompt layerId={layerId} />}
+          {hasIPAdapters && <RGLayerIPAdapterList layerId={layerId} />}
+        </Flex>
+      )}
+    </LayerWrapper>
   );
 });