Feature: Canvas Blend and Boolean modes

[dunkeroni]

Summary

Adds Blend Modes and Boolean merge operations to the canvas raster layers.
Both of these are handled with the globalCompositeOperation feature, and due to some technical limitations on how we render things, blend modes are implemented as a non-destructive state of the raster layer and boolean merges are a destructive action.

Blend Modes are a common feature of other image creation platforms, used for easy creation of light, shadows, textures, and recoloring objects.

Technical Info:

Because we're using the features built into Konva and CSS rendering already, the effect fits nicely into the pipeline after all pixel information is resolved (e.g. Adjustments panel) and before layer transparency is applied. This means that users can enable a blend mode, and then continue to adjust the brightness and tone, and also leverage the layer transparency to control the strength of the effect. Users can also draw and erase on a layer with an active blend mode without any additional overhead.

We use and interact with raster layer information supported as Konva objects; and when merging or combining layers for img2img actions this PR uses the Konva global composite operation to resolve those layers. However, the live view is handled through the HTMLCanvasElement's mixBlendMode, which is functionally identical for the color modes we are using but doesn't support the boolean operations. Hence booleans are an independent action submenu instead.

Some caveats of using the HTML mixBlendMode:

1. Blend modes visually interact with the checkerboard pattern background of the canvas when there are no underlying layers, but that effect is not included when merging or using the layers.
2. Blend mode also applies to the blue border around a raster layer when using the Move tool.

QA Instructions

Create some layers and mash them together.

Boolean Operations:

Booleans are accessible via the right click menu. They work on the current layer and the layer directly below it (similar to "Merge Down").
Intersect: Returns the top layer where it overlaps the bottom layer.
Cut Out: Returns the bottom layer where it overlaps the top layer.
Cut Away: Returns the top layer where it does not overlap the bottom layer.
Exclude: Returns both layers where they do not overlap.

Blend Modes:

Blend mode is accessible via the right click menu.

Example: Adding glow effect

Example: Adding half-tone dot matrix texture
Texture got from: https://texturelabs.org/textures/grunge_265/ and applied with Overlay mode.

Merge Plan

Ready to merge. Most of the PR is just new menus that interact with our existing features.

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

[lstein]

Just tested this and it works as expected. I did find a minor bug however:

1. Add two raster layers
2. Perform a boolean operation on the topmost layer
3. Press ^Z to undo the operation
4. Unexpectedly, the topmost raster layer (listed in the layers panel) now has its Blend Mode enabled with the menu set to Color. The Color operation is not applied, however.

[lstein]

There's a minor bug when the user performs an undo and redo. See comment above.

[blessedcoolant]

I've started looking into this PR starting with the implementation of Blend Modes. The functionality seems great but I felt the UX could be improved. So I made a few changes listed below. Try them out and see how they feel. If you cool, we'll move forward with the other things in this PR or rework the Blend Modes implementation further.

Changes made so far along with syncing up with main.

• 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.

[dunkeroni]

Trying out some adjustments to the boolean operations. Now it does a special merge that results in a new layer and disables the inputs, but doesn't delete them. That helps make it a little clearer to the user what happened, and is less destructive in case they wanted to perform further operations with the original layers.

[blessedcoolant]

The new layer is definitely preferred. Keeps things non-destructive but I noticed a few issues.

1. Intersect is basically the top layer. It really doesn't do much beyond that. It only can be really used for cropping extra parts. This could be more handy if it actually respects the Blend Modes which it currently does not.
2. Cut Away is giving me an empty layer. I thought it was supposed to give me the bottom layer with the top layer cut away but I realize that's what exclude does. So I am not sure what Cut Away is meant to do.

Apart from that functionality seems fine.

[dunkeroni]

You shouldn't get any duplicate or empty layers unless the inputs fully overlap.
Sources (blue is on top):

Intersect:

Cut Out:

Cut Away:

Exclude:

[blessedcoolant]

We good to go on this. @lstein

[blessedcoolant]

@dunkeroni If possible can you find a better icon or fix the spacing with CgPathCrop on the sub menu. It is off center because it is from a different set compared to the rest of them and it feels off on the UI.