feat(ui): abstract out CanvasEntityAdapterBase

Things were getting to complex to reason about & classes a bit complicated. Trying to simplify...

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

@@ -1,86 +1,73 @@
 import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import type { CanvasControlLayerAdapter } from 'features/controlLayers/konva/CanvasControlLayerAdapter';
-import type { CanvasInpaintMaskAdapter } from 'features/controlLayers/konva/CanvasInpaintMaskAdapter';
-import type { CanvasRasterLayerAdapter } from 'features/controlLayers/konva/CanvasRasterLayerAdapter';
-import type { CanvasRegionalGuidanceAdapter } from 'features/controlLayers/konva/CanvasRegionalGuidanceAdapter';
+import type { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntityAdapterBase';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsCounterClockwiseBold, PiArrowsOutBold, PiCheckBold, PiXBold } from 'react-icons/pi';
 
-const TransformBox = memo(
-  ({
-    adapter,
-  }: {
-    adapter:
-      | CanvasRasterLayerAdapter
-      | CanvasControlLayerAdapter
-      | CanvasInpaintMaskAdapter
-      | CanvasRegionalGuidanceAdapter;
-  }) => {
-    const { t } = useTranslation();
-    const isProcessing = useStore(adapter.transformer.$isProcessing);
+const TransformBox = memo(({ adapter }: { adapter: CanvasEntityAdapterBase }) => {
+  const { t } = useTranslation();
+  const isProcessing = useStore(adapter.transformer.$isProcessing);
 
-    return (
-      <Flex
-        bg="base.800"
-        borderRadius="base"
-        p={4}
-        flexDir="column"
-        gap={4}
-        w={420}
-        h="auto"
-        shadow="dark-lg"
-        transitionProperty="height"
-        transitionDuration="normal"
-      >
-        <Heading size="md" color="base.300" userSelect="none">
-          {t('controlLayers.transform.transform')}
-        </Heading>
-        <ButtonGroup isAttached={false} size="sm" w="full">
-          <Button
-            leftIcon={<PiArrowsOutBold />}
-            onClick={adapter.transformer.fitProxyRectToBbox}
-            isLoading={isProcessing}
-            loadingText={t('controlLayers.transform.reset')}
-            variant="ghost"
-          >
-            {t('controlLayers.transform.fitToBbox')}
-          </Button>
-          <Spacer />
-          <Button
-            leftIcon={<PiArrowsCounterClockwiseBold />}
-            onClick={adapter.transformer.resetTransform}
-            isLoading={isProcessing}
-            loadingText={t('controlLayers.reset')}
-            variant="ghost"
-          >
-            {t('controlLayers.transform.reset')}
-          </Button>
-          <Button
-            leftIcon={<PiCheckBold />}
-            onClick={adapter.transformer.applyTransform}
-            isLoading={isProcessing}
-            loadingText={t('common.apply')}
-            variant="ghost"
-          >
-            {t('controlLayers.transform.apply')}
-          </Button>
-          <Button
-            leftIcon={<PiXBold />}
-            onClick={adapter.transformer.stopTransform}
-            isLoading={isProcessing}
-            loadingText={t('common.cancel')}
-            variant="ghost"
-          >
-            {t('controlLayers.transform.cancel')}
-          </Button>
-        </ButtonGroup>
-      </Flex>
-    );
-  }
-);
+  return (
+    <Flex
+      bg="base.800"
+      borderRadius="base"
+      p={4}
+      flexDir="column"
+      gap={4}
+      w={420}
+      h="auto"
+      shadow="dark-lg"
+      transitionProperty="height"
+      transitionDuration="normal"
+    >
+      <Heading size="md" color="base.300" userSelect="none">
+        {t('controlLayers.transform.transform')}
+      </Heading>
+      <ButtonGroup isAttached={false} size="sm" w="full">
+        <Button
+          leftIcon={<PiArrowsOutBold />}
+          onClick={adapter.transformer.fitProxyRectToBbox}
+          isLoading={isProcessing}
+          loadingText={t('controlLayers.transform.reset')}
+          variant="ghost"
+        >
+          {t('controlLayers.transform.fitToBbox')}
+        </Button>
+        <Spacer />
+        <Button
+          leftIcon={<PiArrowsCounterClockwiseBold />}
+          onClick={adapter.transformer.resetTransform}
+          isLoading={isProcessing}
+          loadingText={t('controlLayers.reset')}
+          variant="ghost"
+        >
+          {t('controlLayers.transform.reset')}
+        </Button>
+        <Button
+          leftIcon={<PiCheckBold />}
+          onClick={adapter.transformer.applyTransform}
+          isLoading={isProcessing}
+          loadingText={t('common.apply')}
+          variant="ghost"
+        >
+          {t('controlLayers.transform.apply')}
+        </Button>
+        <Button
+          leftIcon={<PiXBold />}
+          onClick={adapter.transformer.stopTransform}
+          isLoading={isProcessing}
+          loadingText={t('common.cancel')}
+          variant="ghost"
+        >
+          {t('controlLayers.transform.cancel')}
+        </Button>
+      </ButtonGroup>
+    </Flex>
+  );
+});
 
 TransformBox.displayName = 'Transform';