feat(ui): Raster Layer Color Adjusters #8420
+1,182
−7
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,230 @@ | ||||||
| import { | ||||||
| Button, | ||||||
| ButtonGroup, | ||||||
| CompositeNumberInput, | ||||||
| CompositeSlider, | ||||||
| Flex, | ||||||
| FormControl, | ||||||
| FormLabel, | ||||||
| IconButton, | ||||||
| Switch, | ||||||
| Text, | ||||||
| } from '@invoke-ai/ui-library'; | ||||||
| import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; | ||||||
| import { RasterLayerCurvesEditor } from 'features/controlLayers/components/RasterLayer/RasterLayerCurvesEditor'; | ||||||
| import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; | ||||||
| import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; | ||||||
| import { | ||||||
| rasterLayerAdjustmentsCurvesUpdated, | ||||||
| rasterLayerAdjustmentsSet, | ||||||
| rasterLayerAdjustmentsSimpleUpdated, | ||||||
| } from 'features/controlLayers/store/canvasSlice'; | ||||||
| import { selectEntity } from 'features/controlLayers/store/selectors'; | ||||||
| import React, { memo, useCallback, useMemo } from 'react'; | ||||||
| import { useTranslation } from 'react-i18next'; | ||||||
| import { PiCaretDownBold } from 'react-icons/pi'; | ||||||
|
|
||||||
| export const RasterLayerAdjustmentsPanel = memo(() => { | ||||||
| const dispatch = useAppDispatch(); | ||||||
| const entityIdentifier = useEntityIdentifierContext<'raster_layer'>(); | ||||||
| const canvasManager = useCanvasManager(); | ||||||
| const layer = useAppSelector((s) => selectEntity(s.canvas.present, entityIdentifier)); | ||||||
| const { t } = useTranslation(); | ||||||
|
|
||||||
| const hasAdjustments = Boolean(layer?.adjustments); | ||||||
| const enabled = Boolean(layer?.adjustments?.enabled); | ||||||
| const collapsed = Boolean(layer?.adjustments?.collapsed); | ||||||
| const mode = layer?.adjustments?.mode ?? 'simple'; | ||||||
| const simple = layer?.adjustments?.simple ?? { | ||||||
| brightness: 0, | ||||||
| contrast: 0, | ||||||
| saturation: 0, | ||||||
| temperature: 0, | ||||||
| tint: 0, | ||||||
| sharpness: 0, | ||||||
| }; | ||||||
|
|
||||||
| 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] | ||||||
| ); | ||||||
|
Comment on lines
+47
to
+53
There was a problem hiding this comment. this logic and be merged in to |
||||||
|
|
||||||
| const onReset = useCallback(() => { | ||||||
| // Reset values to defaults but keep adjustments present; preserve enabled/collapsed/mode | ||||||
| dispatch( | ||||||
| rasterLayerAdjustmentsSimpleUpdated({ | ||||||
| entityIdentifier, | ||||||
| simple: { | ||||||
| brightness: 0, | ||||||
| contrast: 0, | ||||||
| saturation: 0, | ||||||
| temperature: 0, | ||||||
| tint: 0, | ||||||
| sharpness: 0, | ||||||
| }, | ||||||
| }) | ||||||
| ); | ||||||
| const defaultPoints: Array<[number, number]> = [ | ||||||
| [0, 0], | ||||||
| [255, 255], | ||||||
| ]; | ||||||
| dispatch(rasterLayerAdjustmentsCurvesUpdated({ entityIdentifier, channel: 'master', points: defaultPoints })); | ||||||
| dispatch(rasterLayerAdjustmentsCurvesUpdated({ entityIdentifier, channel: 'r', points: defaultPoints })); | ||||||
| dispatch(rasterLayerAdjustmentsCurvesUpdated({ entityIdentifier, channel: 'g', points: defaultPoints })); | ||||||
| dispatch(rasterLayerAdjustmentsCurvesUpdated({ entityIdentifier, channel: 'b', points: defaultPoints })); | ||||||
| }, [dispatch, entityIdentifier]); | ||||||
|
|
||||||
| const onToggleCollapsed = useCallback(() => { | ||||||
| dispatch( | ||||||
| rasterLayerAdjustmentsSet({ | ||||||
| entityIdentifier, | ||||||
| adjustments: { collapsed: !collapsed }, | ||||||
| }) | ||||||
| ); | ||||||
| }, [dispatch, entityIdentifier, collapsed]); | ||||||
|
|
||||||
| const onSetMode = useCallback( | ||||||
| (nextMode: 'simple' | 'curves') => { | ||||||
| if (!layer?.adjustments) { | ||||||
| return; | ||||||
| } | ||||||
| if (nextMode === mode) { | ||||||
| return; | ||||||
| } | ||||||
| dispatch( | ||||||
| rasterLayerAdjustmentsSet({ | ||||||
| entityIdentifier, | ||||||
| adjustments: { mode: nextMode }, | ||||||
| }) | ||||||
| ); | ||||||
| }, | ||||||
| [dispatch, entityIdentifier, layer?.adjustments, mode] | ||||||
| ); | ||||||
|
|
||||||
| // Memoized click handlers to avoid inline arrow functions in JSX | ||||||
| const onClickModeSimple = useCallback(() => onSetMode('simple'), [onSetMode]); | ||||||
| const onClickModeCurves = useCallback(() => onSetMode('curves'), [onSetMode]); | ||||||
|
|
||||||
| 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 /> | ||||||
|
Comment on lines
+120
to
+122
There was a problem hiding this comment. Shoudl add |
||||||
| </FormControl> | ||||||
| ), | ||||||
| }) as const, | ||||||
| [] | ||||||
| ); | ||||||
|
Comment on lines
+111
to
+127
There was a problem hiding this comment. This should just be a separate component not a memoized object |
||||||
|
|
||||||
| const onBrightness = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { brightness: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
| const onContrast = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { contrast: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
| const onSaturation = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { saturation: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
| const onTemperature = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { temperature: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
| const onTint = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { tint: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
| const onSharpness = useCallback( | ||||||
| (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { sharpness: v } })), | ||||||
| [dispatch, entityIdentifier] | ||||||
| ); | ||||||
|
|
||||||
| const handleToggleEnabled = useCallback( | ||||||
| (e: React.ChangeEvent<HTMLInputElement>) => onToggleEnabled(e.target.checked), | ||||||
| [onToggleEnabled] | ||||||
| ); | ||||||
|
|
||||||
| const onFinish = useCallback(async () => { | ||||||
| // Bake current visual into layer pixels, then clear adjustments | ||||||
| const adapter = canvasManager.getAdapter(entityIdentifier); | ||||||
| if (!adapter || adapter.type !== 'raster_layer_adapter') { | ||||||
| return; | ||||||
| } | ||||||
| const rect = adapter.transformer.getRelativeRect(); | ||||||
| try { | ||||||
| await adapter.renderer.rasterize({ rect, replaceObjects: true }); | ||||||
| // Clear adjustments after baking | ||||||
| dispatch(rasterLayerAdjustmentsSet({ entityIdentifier, adjustments: null })); | ||||||
| } catch { | ||||||
| // no-op; leave state unchanged on failure | ||||||
| } | ||||||
| }, [canvasManager, entityIdentifier, dispatch]); | ||||||
|
|
||||||
| // Hide the panel entirely until adjustments are added via context menu | ||||||
| if (!hasAdjustments) { | ||||||
| return null; | ||||||
| } | ||||||
|
|
||||||
| return ( | ||||||
| <> | ||||||
| <Flex alignItems="center" gap={3} mt={2} mb={2}> | ||||||
| <IconButton | ||||||
| aria-label={collapsed ? t('controlLayers.adjustments.expand') : t('controlLayers.adjustments.collapse')} | ||||||
| size="sm" | ||||||
| variant="ghost" | ||||||
| onClick={onToggleCollapsed} | ||||||
| icon={ | ||||||
| <PiCaretDownBold | ||||||
| style={{ transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }} | ||||||
| /> | ||||||
| } | ||||||
| /> | ||||||
| <Text fontWeight={600} flex={1}> | ||||||
| Adjustments | ||||||
| </Text> | ||||||
| <ButtonGroup size="sm" isAttached variant="outline"> | ||||||
| <Button onClick={onClickModeSimple} isActive={mode === 'simple'}> | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| {t('controlLayers.adjustments.simple')} | ||||||
| </Button> | ||||||
| <Button onClick={onClickModeCurves} isActive={mode === 'curves'}> | ||||||
| {t('controlLayers.adjustments.curves')} | ||||||
| </Button> | ||||||
| </ButtonGroup> | ||||||
| <Switch isChecked={enabled} onChange={handleToggleEnabled} /> | ||||||
| <Button size="sm" onClick={onReset} isDisabled={!layer?.adjustments} colorScheme="red"> | ||||||
| {t('controlLayers.adjustments.reset')} | ||||||
| </Button> | ||||||
| <Button size="sm" onClick={onFinish} isDisabled={!layer?.adjustments} colorScheme="green"> | ||||||
| {t('controlLayers.adjustments.finish')} | ||||||
| </Button> | ||||||
| </Flex> | ||||||
|
|
||||||
| {!collapsed && mode === 'simple' && ( | ||||||
| <> | ||||||
| {slider.row(t('controlLayers.adjustments.brightness'), simple.brightness, onBrightness)} | ||||||
| {slider.row(t('controlLayers.adjustments.contrast'), simple.contrast, onContrast)} | ||||||
| {slider.row(t('controlLayers.adjustments.saturation'), simple.saturation, onSaturation)} | ||||||
| {slider.row(t('controlLayers.adjustments.temperature'), simple.temperature, onTemperature)} | ||||||
| {slider.row(t('controlLayers.adjustments.tint'), simple.tint, onTint)} | ||||||
| {slider.row(t('controlLayers.adjustments.sharpness'), simple.sharpness, onSharpness, 0, 1, 0.01)} | ||||||
| </> | ||||||
| )} | ||||||
|
|
||||||
| {!collapsed && mode === 'curves' && <RasterLayerCurvesEditor />} | ||||||
| </> | ||||||
| ); | ||||||
| }); | ||||||
|
|
||||||
| RasterLayerAdjustmentsPanel.displayName = 'RasterLayerAdjustmentsPanel'; | ||||||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggest splitting this component into 3 components: