Closed
Conversation
…menu; support per-layer globalCompositeOperation in compositor; UI to toggle and select color blend modes (multiply, screen, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, hue, saturation, color, luminosity).
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for per-layer blend modes (global composite operations) to raster and control layers. Users can now apply different blending operations to individual layers and perform boolean operations between layers.
- Adds a new
globalCompositeOperationoptional field to raster and control layer states - Implements UI components for selecting and managing blend modes
- Adds boolean operation support (intersection, cutout, cut-away, exclude) using composite operations
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| compositeOperations.ts | Defines available composite operations as a constant array and exports the CompositeOperation type |
| types.ts | Adds globalCompositeOperation field to CanvasRasterLayerState schema using the new COMPOSITE_OPERATIONS enum |
| canvasSlice.ts | Adds reducer action for updating the globalCompositeOperation field on raster layers |
| CanvasEntityAdapterRasterLayer.ts | Implements syncing of composite operation to canvas element's mix-blend-mode CSS property for live preview |
| CanvasCompositorModule.ts | Updates compositing logic to apply per-layer composite operations with proper priority handling |
| RasterLayerMenuItemsCompositeOperation.tsx | New component for toggling blend mode on/off from layer menu |
| RasterLayerMenuItemsBooleanSubMenu.tsx | New component providing boolean operations submenu using composite operations |
| RasterLayerCompositeOperationSettings.tsx | New component for selecting specific blend mode from a dropdown |
| RasterLayer.tsx | Integrates composite operation settings panel into layer UI |
| RasterLayerMenuItems.tsx | Adds new menu items for composite operations and boolean operations |
| en.json | Adds translation strings for blend mode and boolean operation UI labels |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
invokeai/frontend/web/src/features/controlLayers/store/types.ts
Outdated
Show resolved
Hide resolved
.../src/features/controlLayers/components/RasterLayer/RasterLayerCompositeOperationSettings.tsx
Outdated
Show resolved
Hide resolved
.../src/features/controlLayers/components/RasterLayer/RasterLayerCompositeOperationSettings.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer.ts
Outdated
Show resolved
Hide resolved
.../src/features/controlLayers/components/RasterLayer/RasterLayerCompositeOperationSettings.tsx
Outdated
Show resolved
Hide resolved
- Blend Modes are not right click menu options anymore. Instead they rest above the layer panel as they do in other art programs readily available for each layer. - Blend Modes have been resorted to match the listings of other art programs so users can avail their muscle memory. - Blend Mode now defaults to `Normal` for each layer as it should. - The extra layer operations have now been moved down to the `Operations Bar` at the bottom of the layer stack. This is to increase familiarity again with other art programs and also to make space for us in the top action bar. - The Operations Bars operations have been resorted in order of usage that makes sense.
* translationBot(ui): update translation (Italian) Currently translated at 98.0% (2205 of 2250 strings) Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com> Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/ Translation: InvokeAI/Web UI * translationBot(ui): update translation files Updated by "Remove blank strings" hook in Weblate. Co-authored-by: Hosted Weblate <hosted@weblate.org> Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ Translation: InvokeAI/Web UI --------- Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
) * Adding gradient tool to canvas. Lineara and radial. * Formatting again... * Formatting again 2... * Minor bug fix * Some button design tweaking * Fixed icorrect wording where Circular was used instead of Radial. * Update invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectGradient.ts Co-authored-by: dunkeroni <dunkeroni@gmail.com> * Update invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com> * Update invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com> * Update invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com> * Autocommit fix on mouse leaving canvas area * feature(canvas): move gradient mode controls to top toolbar; remove popover mode buttons and group clip+mode cluster * (chore) prettier * remove fixed icon size --------- Co-authored-by: dunkeroni <dunkeroni@gmail.com> Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds two new features that expose utility of the globalCompositeOperation to the canvas raster layers.
Color Blend mode can be enabled on a layer via the right click menu, and will persistently update with layer changes as the user draws/edits. Merging, creating a raster layer out of the current view, or applying booleans will bake the composite view in.
Boolean operations are exposed via a submenu on right click. They are:
Related Issues / Discussions
QA Instructions
Merge Plan