Feature/raster blend boolean

invokeai/frontend/web/public/locales/en.json

@@ -2205,6 +2205,35 @@
         "pullBboxIntoReferenceImageError": "Problem Pulling BBox Into ReferenceImage",
         "addAdjustments": "Add Adjustments",
         "removeAdjustments": "Remove Adjustments",
+        "compositeOperation": {
+            "label": "Blend Mode",
+            "add": "Add Blend Mode",
+            "remove": "Remove Blend Mode",
+            "blendModes": {
+                "source-over": "Normal",
+                "color": "Color",
+                "hue": "Hue",
+                "overlay": "Overlay",
+                "soft-light": "Soft Light",
+                "hard-light": "Hard Light",
+                "screen": "Screen",
+                "color-burn": "Color Burn",
+                "color-dodge": "Color Dodge",
+                "multiply": "Multiply",
+                "darken": "Darken",
+                "lighten": "Lighten",
+                "difference": "Difference",
+                "luminosity": "Luminosity",
+                "saturation": "Saturation"
+            }
+        },
+        "booleanOps": {
+            "label": "Boolean Operations",
+            "intersect": "Intersect",
+            "cutout": "Cut Out",
+            "cutaway": "Cut Away",
+            "exclude": "Exclude"
+        },
         "adjustments": {
             "simple": "Simple",
             "curves": "Curves",
@@ -2433,10 +2462,16 @@
             "horizontal": "Horizontal",
             "diagonal": "Diagonal"
         },
+        "gradient": {
+            "linear": "Linear",
+            "radial": "Radial",
+            "clip": "Clip Gradient"
+        },
         "tool": {
             "brush": "Brush",
             "eraser": "Eraser",
             "rectangle": "Rectangle",
+            "gradient": "Gradient",
             "bbox": "Bbox",
             "move": "Move",
             "view": "View",

invokeai/frontend/web/public/locales/it.json

@@ -202,7 +202,8 @@
         "unableToLoad": "Impossibile caricare la Galleria",
         "selectAnImageToCompare": "Seleziona un'immagine da confrontare",
         "openViewer": "Apri Visualizzatore",
-        "closeViewer": "Chiudi Visualizzatore"
+        "closeViewer": "Chiudi Visualizzatore",
+        "usePagedGalleryView": "Utilizza la visualizzazione Galleria a pagine"
     },
     "hotkeys": {
         "searchHotkeys": "Cerca tasti di scelta rapida",
@@ -804,7 +805,9 @@
         "updatePathTooltip": "Aggiorna il percorso del file per questo modello se hai spostato i file del modello in una nuova posizione.",
         "updatePath": "Aggiorna percorso",
         "actions": "Azioni in blocco",
-        "zImageVae": "VAE (opzionale)"
+        "zImageVae": "VAE (opzionale)",
+        "missingFiles": "File mancanti",
+        "missingFilesTooltip": "I file del modello sono mancanti dal disco"
     },
     "parameters": {
         "images": "Immagini",
@@ -1949,6 +1952,20 @@
                 "Off: generazione standard. Auto: abilita automaticamente per immagini > 1536px. 4K: impostazioni ottimizzate per output con risoluzione 4K."
             ],
             "heading": "DyPE (alta risoluzione)"
+        },
+        "fluxDypeScale": {
+            "paragraphs": [
+                "Controlla l'entità della modulazione DyPE. Valori più alti = estrapolazione più forte.",
+                "Predefinito: 2.0. Intervallo: 0.0-8.0."
+            ]
+        },
+        "fluxDypeExponent": {
+            "paragraphs": [
+                "Controlla l'intensità dell'effetto dinamico nel tempo.",
+                "2.0: Consigliato per risoluzioni 4K+. Programmazione aggressiva con transizioni rapide per la pulizia degli artefatti.",
+                "1.0: Buon punto di partenza per risoluzioni ~2K-3K.",
+                "0.5: Programma più delicato per risoluzioni appena superiori a quelle native (1024px)."
+            ]
         }
     },
     "sdxl": {
@@ -2001,7 +2018,6 @@
         "vae": "VAE",
         "parsingFailed": "Analisi non riuscita",
         "recallParameter": "Richiama {{label}}",
-        "dypePreset": "Preimpostazione DyPE",
         "seedVarianceRandomizePercent": "Casualità della varianza del seme %",
         "seedVarianceEnabled": "Varianza seme abilitata",
         "seedVarianceStrength": "Intensità della varianza del seme"

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -1,32 +1,17 @@
-import { Flex, Spacer } from '@invoke-ai/ui-library';
-import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu';
-import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
+import { Flex } from '@invoke-ai/ui-library';
 import { EntityListSelectedEntityActionBarFill } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill';
-import { EntityListSelectedEntityActionBarFilterButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton';
-import { EntityListSelectedEntityActionBarInvertMaskButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton';
 import { EntityListSelectedEntityActionBarOpacity } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity';
-import { EntityListSelectedEntityActionBarSelectObjectButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton';
-import { EntityListSelectedEntityActionBarTransformButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton';
-import { EntityListNonRasterLayerToggle } from 'features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle';
 import { memo } from 'react';
 
-import { EntityListSelectedEntityActionBarSaveToAssetsButton } from './EntityListSelectedEntityActionBarSaveToAssetsButton';
+import { EntityListSelectedEntityActionBarCompositeOperation } from './EntityListSelectedEntityActionBarCompositeOperation';
 
 export const EntityListSelectedEntityActionBar = memo(() => {
   return (
-    <Flex w="full" gap={2} alignItems="center" ps={1}>
-      <EntityListSelectedEntityActionBarOpacity />
-      <Spacer />
-      <EntityListSelectedEntityActionBarFill />
-      <Flex h="full">
-        <EntityListSelectedEntityActionBarSelectObjectButton />
-        <EntityListSelectedEntityActionBarFilterButton />
-        <EntityListSelectedEntityActionBarTransformButton />
-        <EntityListSelectedEntityActionBarInvertMaskButton />
-        <EntityListSelectedEntityActionBarSaveToAssetsButton />
-        <EntityListSelectedEntityActionBarDuplicateButton />
-        <EntityListNonRasterLayerToggle />
-        <EntityListGlobalActionBarAddLayerMenu />
+    <Flex flexDirection="column" gap={2}>
+      <Flex w="full" gap={2} ps={1}>
+        <EntityListSelectedEntityActionBarCompositeOperation />
+        <EntityListSelectedEntityActionBarOpacity />
+        <EntityListSelectedEntityActionBarFill />
       </Flex>
     </Flex>
   );

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarCompositeOperation.tsx

@@ -0,0 +1,74 @@
+import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { rasterLayerGlobalCompositeOperationChanged } from 'features/controlLayers/store/canvasSlice';
+import {
+  selectCanvasSlice,
+  selectEntity,
+  selectSelectedEntityIdentifier,
+} from 'features/controlLayers/store/selectors';
+import type {
+  CanvasEntityIdentifier,
+  CanvasRasterLayerState,
+  CompositeOperation,
+} from 'features/controlLayers/store/types';
+import { COLOR_BLEND_MODES } from 'features/controlLayers/store/types';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectCompositeOperation = createSelector(selectCanvasSlice, (canvas) => {
+  const { selectedEntityIdentifier } = canvas;
+
+  if (selectedEntityIdentifier?.type !== 'raster_layer') {
+    return 'source-over';
+  }
+
+  const entity = selectEntity(canvas, selectedEntityIdentifier);
+
+  return (entity as CanvasRasterLayerState)?.globalCompositeOperation ?? 'source-over';
+});
+
+export const EntityListSelectedEntityActionBarCompositeOperation = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const currentOperation = useAppSelector(selectCompositeOperation);
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      if (selectedEntityIdentifier?.type === 'raster_layer') {
+        const value = e.target.value as CompositeOperation;
+
+        dispatch(
+          rasterLayerGlobalCompositeOperationChanged({
+            entityIdentifier: selectedEntityIdentifier as CanvasEntityIdentifier<'raster_layer'>,
+            globalCompositeOperation: value,
+          })
+        );
+      }
+    },
+    [dispatch, selectedEntityIdentifier]
+  );
+
+  if (selectedEntityIdentifier?.type !== 'raster_layer') {
+    return null;
+  }
+
+  return (
+    <FormControl w="min-content" gap={2}>
+      <FormLabel m={0} mt={1} whiteSpace="nowrap">
+        {t('controlLayers.compositeOperation.label')}
+      </FormLabel>
+      <Select value={currentOperation} onChange={onChange} size="sm" variant="outline" minW="110px">
+        {COLOR_BLEND_MODES.map((op) => (
+          <option key={op} value={op}>
+            {t(`controlLayers.compositeOperation.blendModes.${op}`)}
+          </option>
+        ))}
+      </Select>
+    </FormControl>
+  );
+});
+
+EntityListSelectedEntityActionBarCompositeOperation.displayName = 'EntityListSelectedEntityActionBarCompositeOperation';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx

@@ -132,7 +132,9 @@ export const EntityListSelectedEntityActionBarOpacity = memo(() => {
   return (
     <Popover>
       <FormControl w="min-content" gap={2} isDisabled={selectedEntityIdentifier === null}>
-        <FormLabel m={0}>{t('controlLayers.opacity')}</FormLabel>
+        <FormLabel m={0} mt={1}>
+          {t('controlLayers.opacity')}
+        </FormLabel>
         <PopoverAnchor>
           <NumberInput
             display="flex"

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityOperationsBar.tsx

@@ -0,0 +1,28 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu';
+import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
+import { EntityListSelectedEntityActionBarFilterButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton';
+import { EntityListSelectedEntityActionBarInvertMaskButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton';
+import { EntityListSelectedEntityActionBarSelectObjectButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton';
+import { EntityListSelectedEntityActionBarTransformButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton';
+import { EntityListNonRasterLayerToggle } from 'features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle';
+import { memo } from 'react';
+
+import { EntityListSelectedEntityActionBarSaveToAssetsButton } from './EntityListSelectedEntityActionBarSaveToAssetsButton';
+
+export const EntityListSelectedEntityOperationsBar = memo(() => {
+  return (
+    <Flex w="full" minH="20px" gap={1} alignItems="center" ps={2} pr={2}>
+      <EntityListGlobalActionBarAddLayerMenu />
+      <EntityListSelectedEntityActionBarTransformButton />
+      <EntityListSelectedEntityActionBarDuplicateButton />
+      <EntityListSelectedEntityActionBarSelectObjectButton />
+      <EntityListSelectedEntityActionBarFilterButton />
+      <EntityListSelectedEntityActionBarInvertMaskButton />
+      <EntityListNonRasterLayerToggle />
+      <EntityListSelectedEntityActionBarSaveToAssetsButton />
+    </Flex>
+  );
+});
+
+EntityListSelectedEntityOperationsBar.displayName = 'EntityListSelectedEntityOperationsBar';

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

@@ -7,6 +7,7 @@ import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/Canva
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';
 
+import { EntityListSelectedEntityOperationsBar } from './CanvasEntityList/EntityListSelectedEntityOperationsBar';
 import { ParamDenoisingStrength } from './ParamDenoisingStrength';
 
 export const CanvasLayersPanel = memo(() => {
@@ -15,12 +16,14 @@ export const CanvasLayersPanel = memo(() => {
   return (
     <CanvasManagerProviderGate>
       <Flex flexDir="column" gap={2} w="full" h="full">
-        <EntityListSelectedEntityActionBar />
-        <Divider py={0} />
         <ParamDenoisingStrength />
         <Divider py={0} />
+        <EntityListSelectedEntityActionBar />
+        <Divider py={0} />
         {!hasEntities && <CanvasAddEntityButtons />}
         {hasEntities && <CanvasEntityList />}
+        <Divider py={0} />
+        <EntityListSelectedEntityOperationsBar />
       </Flex>
     </CanvasManagerProviderGate>
   );

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItems.tsx

@@ -10,6 +10,7 @@ import { CanvasEntityMenuItemsSave } from 'features/controlLayers/components/com
 import { CanvasEntityMenuItemsSelectObject } from 'features/controlLayers/components/common/CanvasEntityMenuItemsSelectObject';
 import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/components/common/CanvasEntityMenuItemsTransform';
 import { RasterLayerMenuItemsAdjustments } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsAdjustments';
+import { RasterLayerMenuItemsBooleanSubMenu } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsBooleanSubMenu';
 import { RasterLayerMenuItemsConvertToSubMenu } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsConvertToSubMenu';
 import { RasterLayerMenuItemsCopyToSubMenu } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsCopyToSubMenu';
 import { memo } from 'react';
@@ -28,6 +29,7 @@ export const RasterLayerMenuItems = memo(() => {
       <RasterLayerMenuItemsAdjustments />
       <MenuDivider />
       <CanvasEntityMenuItemsMergeDown />
+      <RasterLayerMenuItemsBooleanSubMenu />
       <RasterLayerMenuItemsCopyToSubMenu />
       <RasterLayerMenuItemsConvertToSubMenu />
       <CanvasEntityMenuItemsCropToBbox />

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItemsBooleanSubMenu.tsx

@@ -0,0 +1,75 @@
+import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useEntityIdentifierBelowThisOne } from 'features/controlLayers/hooks/useNextRenderableEntityIdentifier';
+import { rasterLayerGlobalCompositeOperationChanged } from 'features/controlLayers/store/canvasSlice';
+import type { CanvasEntityIdentifier, CompositeOperation } from 'features/controlLayers/store/types';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CgPathBack, CgPathCrop, CgPathExclude, CgPathFront, CgPathIntersect } from 'react-icons/cg';
+
+export const RasterLayerMenuItemsBooleanSubMenu = memo(() => {
+  const { t } = useTranslation();
+  const subMenu = useSubMenu();
+  const canvasManager = useCanvasManager();
+  const isBusy = useCanvasIsBusy();
+  const dispatch = useAppDispatch();
+  const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
+  const entityIdentifierBelowThisOne = useEntityIdentifierBelowThisOne(entityIdentifier as CanvasEntityIdentifier);
+
+  const perform = useCallback(
+    async (op: CompositeOperation) => {
+      if (!entityIdentifierBelowThisOne) {
+        return;
+      }
+      dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: op }));
+      try {
+        // Use boolean-specific merge which disables the source raster layers instead of deleting them
+        await canvasManager.compositor.mergeBooleanRasterLayers(
+          entityIdentifierBelowThisOne as CanvasEntityIdentifier<'raster_layer'>,
+          entityIdentifier as CanvasEntityIdentifier<'raster_layer'>,
+          true
+        );
+      } finally {
+        dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: undefined }));
+      }
+    },
+    [canvasManager.compositor, dispatch, entityIdentifier, entityIdentifierBelowThisOne]
+  );
+
+  const onIntersect = useCallback(() => perform('source-in'), [perform]);
+  const onCutOut = useCallback(() => perform('destination-in'), [perform]);
+  const onCutAway = useCallback(() => perform('source-out'), [perform]);
+  const onExclude = useCallback(() => perform('xor'), [perform]);
+
+  const disabled = isBusy || !entityIdentifierBelowThisOne;
+
+  return (
+    <MenuItem {...subMenu.parentMenuItemProps} isDisabled={disabled} icon={<CgPathCrop size={18} />}>
+      <Menu {...subMenu.menuProps}>
+        <MenuButton {...subMenu.menuButtonProps}>
+          <SubMenuButtonContent label={t('controlLayers.booleanOps.label')} />
+        </MenuButton>
+        <MenuList {...subMenu.menuListProps}>
+          <MenuItem onClick={onIntersect} isDisabled={disabled} icon={<CgPathIntersect size={18} />}>
+            {t('controlLayers.booleanOps.intersect')}
+          </MenuItem>
+          <MenuItem onClick={onCutOut} isDisabled={disabled} icon={<CgPathBack size={18} />}>
+            {t('controlLayers.booleanOps.cutout')}
+          </MenuItem>
+          <MenuItem onClick={onCutAway} isDisabled={disabled} icon={<CgPathFront size={18} />}>
+            {t('controlLayers.booleanOps.cutaway')}
+          </MenuItem>
+          <MenuItem onClick={onExclude} isDisabled={disabled} icon={<CgPathExclude size={18} />}>
+            {t('controlLayers.booleanOps.exclude')}
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </MenuItem>
+  );
+});
+
+RasterLayerMenuItemsBooleanSubMenu.displayName = 'RasterLayerMenuItemsBooleanSubMenu';