feat(ui): Raster Layer Color Adjusters #8420

dunkeroni · 2025-08-13T07:34:36Z

Summary

Client-side support for making image adjustments in the canvas raster layers. These effects are applied using konva filters. They can be kept on to automatically apply to any new edits of the layer or finalized to bake the results in with the Finish button. Can be collapsed to take up less space or temporarily disabled to compare against the original.

Generating, creating from bounding box, and saving the canvas will use the current visible state of the layer (no need to finalize). If a saved canvas is recalled with the Remix option, the original layer with any pending adjustments will appear again. Duplicating a layer creates a duplicate with identical pending adjustments if they exist. Select Object will persist any pending adjustments if the user selects Apply, but not Save As (select object uses the underlying layer data directly instead of the view).

Has two modes:
Simple: Brightness, Contrast, Saturation, Temperature, Tint, Sharpness
"Brightness" is an absolute shift applied to all pixels and causes clipping on the ends. Some users might expect that to be called "Exposure" depending on the software they are coming from. Open to suggestions if we want to swap terms.

Curves: Master, Red, Green, Blue

Right click menu to access:

Related Issues / Discussions

Similar to the filters exposed in #7594 but in the frontend. Backend filters can still be useful for specific colorspace actions, but most of the common use cases should be solved with these settings.

A note on performance: For large layers, the filters can take noticeable time to complete. Konva filters re-apply any time the settings are changed or when the layer has its data updated. If a layer has pending adjustments, they will recalculate when:

User finishes drawing a line or erasing on that layer
User clicks Apply on a transformation edit

Moving layers, generating new layers, or making edits to other layers does not trigger recalculation.

QA Instructions

Demo video of interactions (uses old right-click menu)
Screencast From 2025-08-13 02-22-58.webm

Merge Plan

Ready to merge

Checklist

The PR has a short but descriptive title, suitable for a changelog
Tests added / updated (if applicable)
Documentation added / updated (if applicable)
Updated What's New copy (if doing a release after this PR)

psychedelicious

Super nice to have this in the app, thanks for working on it.

As you noted, perf is not great as layer size increases. It seems easy to accidentally end up with a super big layer and stack of adjustments that bogs the system down. I think this is OK for a v1 implementation but we should do our best to make it faster ASAP. I imagine the only real way to do that is native code. Maybe https://wasm-vips.kleisauke.nl/ or port to a diff lang and compile to wasm.
I ended up with a full UI crash at some point. Somethign was trying to access a property of undefined. IIRC I was adjusting sharpness. I refreshed the page and it started working again. Sorry but I didn't capture the error; I am unable to reproduce it now.

Some UI/UX feedback:

It's not clear if you have selected simple or curves. Suggest setting the colorScheme on the button to invokeBlue to indicate active mode. Added code suggestion
When disabled, you can still fiddle w/ the sliders and curves editor but they don't do anything. Suggest disabling the knobs n dials when disabled
There's no way to dismiss the adjustment without applying/finishing it. And finishing always rasterizes the layer. Suggest comparing selected adjust mode and its settings and if unchagned from defaults, when finishing, do not rasterize
Layout is a bit wonky when panel is at min width - also needs some padding:
Curves editor canvas does not scale when resizing panel, resulting in stretched appearance:
The font size for channel labels in curve editor is too small
Curves editor needs padding around it
Some wonkiness when dragging a point across the x coord of another point:

Screen.Recording.2025-08-15.at.1.09.56.pm.mov
Some awkward behaviour w/ doubleclicking, I see we are calculating the nearest point and remvoing it on double click but it's awkward when double clicking away from an existing point:

Screen.Recording.2025-08-15.at.1.12.21.pm.mov
Some wonkiness when clicking on the top-right point:

Screen.Recording.2025-08-15.at.1.13.41.pm.mov

psychedelicious · 2025-08-15T02:32:06Z

...ontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

+  const slider = useMemo(
+    () =>
+      ({
+        row: (label: string, value: number, onChange: (v: number) => void, min = -1, max = 1, step = 0.01) => (
+          <FormControl pr={2}>
+            <Flex alignItems="center" gap={3} mb={1}>
+              <FormLabel m={0} flexShrink={0} minW="90px">
+                {label}
+              </FormLabel>
+              <CompositeNumberInput value={value} onChange={onChange} min={min} max={max} step={step} flex="0 0 96px" />
+            </Flex>
+            <CompositeSlider value={value} onChange={onChange} min={min} max={max} step={step} marks />
+          </FormControl>
+        ),
+      }) as const,
+    []
+  );


This should just be a separate component not a memoized object

psychedelicious · 2025-08-15T02:33:38Z

...i/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor.tsx

+  const width = 256;
+  const height = 160;
+  // inner margins to keep a small buffer from edges (left/right/bottom)
+  const MARGIN_LEFT = 8;
+  const MARGIN_RIGHT = 8;
+  const MARGIN_TOP = 8;
+  const MARGIN_BOTTOM = 10;
+  const INNER_WIDTH = width - MARGIN_LEFT - MARGIN_RIGHT;
+  const INNER_HEIGHT = height - MARGIN_TOP - MARGIN_BOTTOM;
+
+  // helpers to map value-space [0..255] to canvas pixels (respecting inner margins)
+  const valueToCanvasX = useCallback(
+    (x: number) => MARGIN_LEFT + (clamp(x, 0, 255) / 255) * INNER_WIDTH,
+    [INNER_WIDTH]
+  );
+  const valueToCanvasY = useCallback(
+    (y: number) => MARGIN_TOP + INNER_HEIGHT - (clamp(y, 0, 255) / 255) * INNER_HEIGHT,
+    [INNER_HEIGHT]
+  );
+  const canvasToValueX = useCallback(
+    (cx: number) => clamp(Math.round(((cx - MARGIN_LEFT) / INNER_WIDTH) * 255), 0, 255),
+    [INNER_WIDTH]
+  );
+  const canvasToValueY = useCallback(
+    (cy: number) => clamp(Math.round(255 - ((cy - MARGIN_TOP) / INNER_HEIGHT) * 255), 0, 255),
+    [INNER_HEIGHT]
+  );


I think all of these can be extracted outside the component.

psychedelicious · 2025-08-15T02:35:07Z

...i/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor.tsx

+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>


Use the chakra components e.g. <Flex flexDir='column' gap={4} />

psychedelicious · 2025-08-15T02:40:43Z

...i/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor.tsx

+  const layer = useAppSelector((s) => selectEntity(s.canvas.present, entityIdentifier)) as
+    | CanvasRasterLayerState
+    | undefined;


The type cast here is unnecessary, selectEntity already narrows it based on the identifier (which is itself narrowed).

psychedelicious · 2025-08-15T02:42:54Z

...i/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor.tsx

+  const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
+  const adapter = useEntityAdapterContext<'raster_layer'>('raster_layer');
+  const { t } = useTranslation();
+  const layer = useAppSelector((s) => selectEntity(s.canvas.present, entityIdentifier)) as


This creates a new selector function on every render, which borks memoization. Instead, create a selector wtih a stable ref in memory:

const selectLayer = useMemo( () => createSelector(selectCanvasSlice, (canvas) => selectEntity(canvas, entityIdentifier)), [entityIdentifier] ); const layer = useAppSelector(selectLayer);

psychedelicious · 2025-08-15T03:16:41Z

...ontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

+              <CompositeNumberInput value={value} onChange={onChange} min={min} max={max} step={step} flex="0 0 96px" />
+            </Flex>
+            <CompositeSlider value={value} onChange={onChange} min={min} max={max} step={step} marks />


Shoudl add defaultValue to each of these

psychedelicious · 2025-08-15T03:18:37Z

...ontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

Suggest splitting this component into 3 components:

Main adjustments panel

Simple adjustment editor

Curves adjustment editor

psychedelicious · 2025-08-15T03:22:31Z

...ontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

+  const onToggleEnabled = useCallback(
+    (v: boolean) => {
+      // Only toggle the enabled state; preserve current mode/collapsed so users can A/B compare
+      dispatch(rasterLayerAdjustmentsSet({ entityIdentifier, adjustments: { enabled: v } }));
+    },
+    [dispatch, entityIdentifier]
+  );


this logic and be merged in to handleToggleEnabled as it is not used anywhere else

psychedelicious · 2025-08-15T03:23:33Z

...ontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

+          Adjustments
+        </Text>
+        <ButtonGroup size="sm" isAttached variant="outline">
+          <Button onClick={onClickModeSimple} isActive={mode === 'simple'}>


Suggested change

<Button onClick={onClickModeSimple} isActive={mode === 'simple'}>

<Button onClick={onClickModeSimple} colorScheme={mode === 'simple' ? 'invokeBlue' : undefined}>

psychedelicious · 2025-08-15T03:28:29Z

...i/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor.tsx

+  [255, 255],
+];
+
+type Channel = 'master' | 'r' | 'g' | 'b';


if the zod schemas and types are split up as suggested below then we can use them as the source of truth for this type and others in this file

dunkeroni · 2025-08-15T06:27:52Z

Thanks for the thorough feedback while I bumble my way through frontend code like a hog in a chandelier showroom. It'll take me some time to work through it, and I might ping you for thoughts as I go.

Some points for right now:

There's no way to dismiss the adjustment without applying/finishing it. And finishing always rasterizes the layer. Suggest comparing selected adjust mode and its settings and if unchanged from defaults, when finishing, do not rasterize

It can be removed without finishing with the Right Click menu. I had wanted a Cancel button, but it's already quite cluttered when the panel is shrunk, and Reset felt more important to have there. Another trashcan/X button on the layer is small but might trip users up.
Maybe the Simple/Curves selector should be moved down into the collapsible area to keep Enable/Reset/Finish/Cancel at the top? Not super happy with the layout as it is. Also it's more colorful than other layers are, but that kinda helps because it nags my attention to either finish or remove it instead of leaving them on.

Layout is a bit wonky when panel is at min width - also needs some padding:

This one confused me because I was sure I checked that, but it turns out to be browser-specific.
Fine on Chrome:

Wonky on Firefox:

I'm guessing there is some better more general way that I should be defining those to fit correctly in all cases. I'll play with it and check on both for the future.

dunkeroni added 10 commits August 10, 2025 00:47

visual adjustment filters

82f3992

apply filters to operations

8259268

keep adjustments on duplicate

47ccd33

curves editor

eb5648a

log scale and panel width compatibility

0ec08f0

fix disable toggle reverts to simple view

8a5906b

Fix tint not shifting green in negative direction

1df81e9

Finish button on adjustments

dba956b

remove extra title

ea2f953

remove redundant en.json colors

613c915

dunkeroni requested review from psychedelicious, blessedcoolant, maryhipp and hipsterusername as code owners August 13, 2025 07:34

github-actions bot added the frontend PRs that change frontend files label Aug 13, 2025

dunkeroni added 2 commits August 13, 2025 03:35

Merge branch 'invoke-ai:main' into raster_layer_adjustments

f39fbde

clean up right click menu

23e5dca

psychedelicious requested changes Aug 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): Raster Layer Color Adjusters #8420

feat(ui): Raster Layer Color Adjusters #8420

Uh oh!

dunkeroni commented Aug 13, 2025

Uh oh!

psychedelicious left a comment

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

psychedelicious Aug 15, 2025

Uh oh!

dunkeroni commented Aug 15, 2025

Uh oh!

Uh oh!

	<Button onClick={onClickModeSimple} isActive={mode === 'simple'}>
	<Button onClick={onClickModeSimple} colorScheme={mode === 'simple' ? 'invokeBlue' : undefined}>

feat(ui): Raster Layer Color Adjusters #8420

Are you sure you want to change the base?

feat(ui): Raster Layer Color Adjusters #8420

Uh oh!

Conversation

dunkeroni commented Aug 13, 2025

Summary

Related Issues / Discussions

QA Instructions

Merge Plan

Checklist

Uh oh!

psychedelicious left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dunkeroni commented Aug 15, 2025

Uh oh!

Uh oh!