Feature/raster blend boolean

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

@@ -2077,6 +2077,18 @@
         "pullBboxIntoReferenceImageError": "Problem Pulling BBox Into ReferenceImage",
         "addAdjustments": "Add Adjustments",
         "removeAdjustments": "Remove Adjustments",
+        "compositeOperation": {
+            "label": "Blend Mode",
+            "add": "Add Blend Mode",
+            "remove": "Remove Blend Mode"
+        },
+        "booleanOps": {
+            "label": "Boolean Operations",
+            "intersection": "Intersection",
+            "cutout": "Cut Out",
+            "cutAway": "Cut Away",
+            "exclude": "Exclude"
+        },
         "adjustments": {
             "simple": "Simple",
             "curves": "Curves",

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

@@ -5,6 +5,7 @@ import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/componen
 import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { RasterLayerAdjustmentsPanel } from 'features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel';
+import { RasterLayerCompositeOperationSettings } from 'features/controlLayers/components/RasterLayer/RasterLayerCompositeOperationSettings';
 import { CanvasEntityStateGate } from 'features/controlLayers/contexts/CanvasEntityStateGate';
 import { RasterLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
@@ -41,6 +42,7 @@ export const RasterLayer = memo(({ id }: Props) => {
               <CanvasEntityHeaderCommonActions />
             </CanvasEntityHeader>
             <RasterLayerAdjustmentsPanel />
+            <RasterLayerCompositeOperationSettings />
             <DndDropTarget
               dndTarget={replaceCanvasEntityObjectsWithImageDndTarget}
               dndTargetData={dndTargetData}

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

@@ -0,0 +1,69 @@
+import { Flex, FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InpaintMaskDeleteModifierButton } from 'features/controlLayers/components/InpaintMask/InpaintMaskDeleteModifierButton';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { rasterLayerGlobalCompositeOperationChanged } from 'features/controlLayers/store/canvasSlice';
+import { COLOR_BLEND_MODES, type CompositeOperation } from 'features/controlLayers/store/compositeOperations';
+import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const RasterLayerCompositeOperationSettings = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
+
+  const layer = useAppSelector((s) =>
+    s.canvas.present.rasterLayers.entities.find((e: CanvasRasterLayerState) => e.id === entityIdentifier.id)
+  );
+
+  const showSettings = useMemo(() => {
+    return layer?.globalCompositeOperation !== undefined;
+  }, [layer]);
+
+  const currentOperation = useMemo(() => {
+    return layer?.globalCompositeOperation ?? 'source-over';
+  }, [layer]);
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const value = e.target.value as CompositeOperation;
+      dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: value }));
+    },
+    [dispatch, entityIdentifier]
+  );
+
+  const onDelete = useCallback(() => {
+    dispatch(
+      rasterLayerGlobalCompositeOperationChanged({
+        entityIdentifier,
+        globalCompositeOperation: undefined,
+      })
+    );
+  }, [dispatch, entityIdentifier]);
+
+  if (!showSettings) {
+    return null;
+  }
+
+  return (
+    <Flex px={2} pb={2}>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.compositeOperation.label')}</FormLabel>
+        <Flex alignItems="center" mb={1}>
+          <Select value={currentOperation} onChange={onChange} size="sm" flex={1} mr={2}>
+            {COLOR_BLEND_MODES.map((op) => (
+              <option key={op} value={op}>
+                {op}
+              </option>
+            ))}
+          </Select>
+          <InpaintMaskDeleteModifierButton onDelete={onDelete} />
+        </Flex>
+      </FormControl>
+    </Flex>
+  );
+});
+
+RasterLayerCompositeOperationSettings.displayName = 'RasterLayerCompositeOperationSettings';

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

@@ -10,6 +10,8 @@ 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 { RasterLayerMenuItemsCompositeOperation } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsCompositeOperation';
 import { RasterLayerMenuItemsConvertToSubMenu } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsConvertToSubMenu';
 import { RasterLayerMenuItemsCopyToSubMenu } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsCopyToSubMenu';
 import { memo } from 'react';
@@ -26,8 +28,10 @@ export const RasterLayerMenuItems = memo(() => {
       <CanvasEntityMenuItemsFilter />
       <CanvasEntityMenuItemsSelectObject />
       <RasterLayerMenuItemsAdjustments />
+      <RasterLayerMenuItemsCompositeOperation />
       <MenuDivider />
       <CanvasEntityMenuItemsMergeDown />
+      <RasterLayerMenuItemsBooleanSubMenu />
       <RasterLayerMenuItemsCopyToSubMenu />
       <RasterLayerMenuItemsConvertToSubMenu />
       <CanvasEntityMenuItemsCropToBbox />

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

@@ -0,0 +1,71 @@
+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 { CompositeOperation } from 'features/controlLayers/store/compositeOperations';
+import type { CanvasEntityIdentifier } 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 {
+        await canvasManager.compositor.mergeByEntityIdentifiers([entityIdentifierBelowThisOne, entityIdentifier], true);
+      } finally {
+        dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: undefined }));
+      }
+    },
+    [canvasManager.compositor, dispatch, entityIdentifier, entityIdentifierBelowThisOne]
+  );
+
+  const onIntersection = 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={onIntersection} isDisabled={disabled} icon={<CgPathIntersect size={18} />}>
+            {t('controlLayers.booleanOps.intersection')}
+          </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';

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

@@ -0,0 +1,35 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { rasterLayerGlobalCompositeOperationChanged } from 'features/controlLayers/store/canvasSlice';
+import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiDropHalfBold } from 'react-icons/pi';
+
+export const RasterLayerMenuItemsCompositeOperation = memo(() => {
+  const dispatch = useAppDispatch();
+  const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
+  const { t } = useTranslation();
+  const layer = useAppSelector((s) =>
+    s.canvas.present.rasterLayers.entities.find((e: CanvasRasterLayerState) => e.id === entityIdentifier.id)
+  );
+  const hasCompositeOperation = layer?.globalCompositeOperation !== undefined;
+
+  const onToggleCompositeOperationPresence = useCallback(() => {
+    if (hasCompositeOperation) {
+      dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: undefined }));
+    } else {
+      // default to color when enabling blend modes
+      dispatch(rasterLayerGlobalCompositeOperationChanged({ entityIdentifier, globalCompositeOperation: 'color' }));
+    }
+  }, [dispatch, entityIdentifier, hasCompositeOperation]);
+
+  return (
+    <MenuItem onClick={onToggleCompositeOperationPresence} icon={<PiDropHalfBold />}>
+      {hasCompositeOperation ? t('controlLayers.compositeOperation.remove') : t('controlLayers.compositeOperation.add')}
+    </MenuItem>
+  );
+});
+
+RasterLayerMenuItemsCompositeOperation.displayName = 'RasterLayerMenuItemsCompositeOperation';

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -14,6 +14,7 @@ import {
   mapId,
   previewBlob,
 } from 'features/controlLayers/konva/util';
+import type { CompositeOperation } from 'features/controlLayers/store/compositeOperations';
 import {
   selectActiveControlLayerEntities,
   selectActiveInpaintMaskEntities,
@@ -46,7 +47,7 @@ type CompositingOptions = {
    * The global composite operation to use when compositing each entity.
    * See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
    */
-  globalCompositeOperation?: GlobalCompositeOperation;
+  globalCompositeOperation?: CompositeOperation;
 };
 
 /**
@@ -226,12 +227,16 @@ export class CanvasCompositorModule extends CanvasModuleBase {
 
     ctx.imageSmoothingEnabled = false;
 
-    if (compositingOptions?.globalCompositeOperation) {
-      ctx.globalCompositeOperation = compositingOptions.globalCompositeOperation;
-    }
-
     for (const adapter of adapters) {
       this.log.debug({ entityIdentifier: adapter.entityIdentifier }, 'Drawing entity to composite canvas');
+      // Set composite operation for this specific layer
+      // Priority: 1) Per-layer setting, 2) Global compositing option, 3) Default 'source-over'
+      const layerCompositeOp =
+        adapter.state.type === 'raster_layer' || adapter.state.type === 'control_layer'
+          ? adapter.state.globalCompositeOperation
+          : undefined;
+      ctx.globalCompositeOperation = layerCompositeOp || compositingOptions?.globalCompositeOperation || 'source-over';
+
       const adapterCanvas = adapter.getCanvas(rect);
       ctx.drawImage(adapterCanvas, 0, 0);
     }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer.ts

@@ -60,13 +60,48 @@ export class CanvasEntityAdapterRasterLayer extends CanvasEntityAdapterBase<
     if (!prevState || this.state.opacity !== prevState.opacity) {
       this.syncOpacity();
     }
+    if (!prevState || this.state.globalCompositeOperation !== prevState.globalCompositeOperation) {
+      this.syncGlobalCompositeOperation();
+    }
 
     // Apply per-layer adjustments as a Konva filter
     if (!prevState || this.haveAdjustmentsChanged(prevState, this.state)) {
       this.syncAdjustmentsFilter();
     }
   };
 
+  private syncGlobalCompositeOperation = () => {
+    this.log.trace('Syncing globalCompositeOperation');
+    const operation = this.state.globalCompositeOperation ?? 'source-over';
+
+    // Map globalCompositeOperation to CSS mix-blend-mode for live preview
+    const mixBlendModeMap: Record<string, string> = {
+      'source-over': 'normal',
+      multiply: 'multiply',
+      screen: 'screen',
+      overlay: 'overlay',
+      darken: 'darken',
+      lighten: 'lighten',
+      'color-dodge': 'color-dodge',
+      'color-burn': 'color-burn',
+      'hard-light': 'hard-light',
+      'soft-light': 'soft-light',
+      difference: 'difference',
+      exclusion: 'exclusion',
+      hue: 'hue',
+      saturation: 'saturation',
+      color: 'color',
+      luminosity: 'luminosity',
+    };
+
+    const mixBlendMode = mixBlendModeMap[operation] || 'normal';
+
+    const canvasElement = this.konva.layer.getCanvas()._canvas as HTMLCanvasElement | undefined;
+    if (canvasElement) {
+      canvasElement.style.mixBlendMode = mixBlendMode;
+    }
+  };
+
   getCanvas = (rect?: Rect): HTMLCanvasElement => {
     this.log.trace({ rect }, 'Getting canvas');
     // The opacity may have been changed in response to user selecting a different entity category, so we must restore

invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts

@@ -7,6 +7,7 @@ import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMul
 import { merge } from 'es-toolkit/compat';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { canvasReset } from 'features/controlLayers/store/actions';
+import type { CompositeOperation } from 'features/controlLayers/store/compositeOperations';
 import { modelChanged } from 'features/controlLayers/store/paramsSlice';
 import {
   selectAllEntities,
@@ -191,6 +192,21 @@ const slice = createSlice({
       }
       layer.adjustments.collapsed = !layer.adjustments.collapsed;
     },
+    rasterLayerGlobalCompositeOperationChanged: (
+      state,
+      action: PayloadAction<EntityIdentifierPayload<{ globalCompositeOperation?: CompositeOperation }, 'raster_layer'>>
+    ) => {
+      const { entityIdentifier, globalCompositeOperation } = action.payload;
+      const layer = selectEntity(state, entityIdentifier);
+      if (!layer) {
+        return;
+      }
+      if (globalCompositeOperation === undefined) {
+        delete layer.globalCompositeOperation;
+      } else {
+        layer.globalCompositeOperation = globalCompositeOperation;
+      }
+    },
     rasterLayerAdded: {
       reducer: (
         state,
@@ -1719,6 +1735,7 @@ export const {
   rasterLayerAdjustmentsCollapsedToggled,
   rasterLayerAdjustmentsSimpleUpdated,
   rasterLayerAdjustmentsCurvesUpdated,
+  rasterLayerGlobalCompositeOperationChanged,
   entityDeleted,
   entityArrangedForwardOne,
   entityArrangedToFront,