prettier

Co-authored-by: kent <kent@invoke.ai>

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

@@ -0,0 +1,78 @@
+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, 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.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';

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

@@ -3,6 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 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';
@@ -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>
   );