From 05c2380a8b71d56564a0e5684b6238667910d73a Mon Sep 17 00:00:00 2001 From: 3dtours Date: Fri, 9 Oct 2026 18:20:07 +0700 Subject: [PATCH] fix(studio): leave the tone curve with the graph alone The floating tone-curve card opened with its own row of channel tabs (RGB / R / G / B) and a RESET button. The panel is meant to be a graph, so that row is gone: the card is now the head and the curve, nothing else. The curve edits the composite rgb channel, which is what the row selected by default anyway. - ToneCurvePanel.tsx: drop CURVE_CHANNELS, the channel state and the curve-tabs block; every read and write goes through 'rgb'. - app.css: drop .curve-tabs / .curve-tab / .curve-dot / .curve-reset and the .curve-line.ghost path that only drew the other channels. skipped: selecting a channel other than the composite one, and RESET, add when a channel chooser comes back on purpose. --- docker/frontend/src/styles/app.css | 39 +------------ docker/frontend/src/ui/ToneCurvePanel.tsx | 68 +++++------------------ 2 files changed, 15 insertions(+), 92 deletions(-) diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index 6657c24..5384674 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -556,51 +556,14 @@ button.hint:disabled { cursor: default; } cursor: pointer; } .curve-close:hover { color: var(--fg); } -.curve-tabs { display: flex; gap: 4px; align-items: center; } -.curve-tab { - display: flex; - align-items: center; - gap: 5px; - flex: 1 1 0; - justify-content: center; - padding: 3px 0; - font-family: var(--mono); - font-size: 10px; - letter-spacing: 0.06em; - color: var(--muted); - background: none; - border: 1px solid var(--border); - border-radius: 3px; - cursor: pointer; -} -.curve-tab.on { border-color: var(--accent-line); color: var(--fg); } -/* The dot carries the channel's own colour, so the tab says which line it draws; - it goes amber once that channel has left the diagonal. */ -.curve-dot { width: 7px; height: 7px; border-radius: 999px; } -.curve-tab.moved .curve-dot { box-shadow: 0 0 0 2px var(--accent); } -.curve-reset { - flex: 0 0 auto; - padding: 3px 7px; - font-family: var(--mono); - font-size: 10px; - letter-spacing: 0.06em; - color: var(--muted); - background: none; - border: 1px solid var(--border); - border-radius: 3px; - cursor: pointer; -} -.curve-reset:hover { color: var(--fg); border-color: var(--accent-line); } .curve-graph { display: block; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 3px; cursor: crosshair; } /* The picture's own distribution, the floor the graph is read against. Light on both themes because the graph itself is always the dark box over a photo. */ .curve-hist { fill: rgba(255, 255, 255, 0.22); } .curve-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; } .curve-diagonal { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 3; } -/* The line the active tab draws, and — on a channel tab — the composite curve - under it, so the two moves can be told apart. */ +/* The line the composite curve draws. */ .curve-line { fill: none; stroke-width: 2; stroke-linecap: round; } -.curve-line.ghost { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 3; } .curve-point { fill: var(--bg-elev); stroke-width: 2; cursor: grab; } .curve-point:active { cursor: grabbing; } diff --git a/docker/frontend/src/ui/ToneCurvePanel.tsx b/docker/frontend/src/ui/ToneCurvePanel.tsx index d318831..9d67d1f 100644 --- a/docker/frontend/src/ui/ToneCurvePanel.tsx +++ b/docker/frontend/src/ui/ToneCurvePanel.tsx @@ -1,8 +1,7 @@ import { useEffect, useRef, useState } from 'react'; -import type { ToneCurve, ToneCurveChannel, ToneCurvePoint } from '../../shared/types'; +import type { ToneCurve, ToneCurvePoint } from '../../shared/types'; import { readHistogram, type Histogram } from './Histogram'; import { - CURVE_CHANNELS, CURVE_CHANNEL_COLOR, addCurvePoint, curvePoints, @@ -12,9 +11,10 @@ import { sampleCurve, } from '../../shared/utils/toneCurve'; -// LIGHT > TONE CURVE: the graph that hangs on the photo. Four curves — the -// composite one and one per channel — drawn over a grid, with the points the -// user drags. It reads and writes nothing but the `toneCurve` field, so the +// LIGHT > TONE CURVE: the graph that hangs on the photo. One curve — the +// composite one, the `rgb` key — drawn over a grid, with the points the user +// drags. The per-channel tabs are gone: the card is the graph and nothing else. +// It reads and writes nothing but that one key of the `toneCurve` field, so the // render is the only other thing that has to know what a curve is (see // toneCurve.ts for the table it hands the renderer). // @@ -29,12 +29,7 @@ import { const SIZE = 224; // the graph's own square, in px const STEPS = 64; // how finely the line is drawn const HIT = 11; // px within which the pointer takes hold of a point -const NEEDS = 0.002; // how far off the diagonal counts as a move, as in toneCurve.ts - -const LABEL: Record = { rgb: 'RGB', r: 'R', g: 'G', b: 'B' }; - const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v); -const offDiagonal = (pts: ToneCurvePoint[]) => pts.some((p) => Math.abs(p[1] - p[0]) > NEEDS); export function ToneCurvePanel({ curve, @@ -47,7 +42,6 @@ export function ToneCurvePanel({ onChange: (next: ToneCurve) => void; onClose: () => void; }) { - const [channel, setChannel] = useState('rgb'); const [hist, setHist] = useState(null); const [pos, setPos] = useState<{ x: number; y: number } | null>(null); const [dragging, setDragging] = useState(false); @@ -76,15 +70,14 @@ export function ToneCurvePanel({ }; }, [url]); - const pts = curvePoints(curve, channel); - const master = curvePoints(curve, 'rgb'); + const pts = curvePoints(curve, 'rgb'); - // A channel pulled back to the diagonal stores nothing: the recipe stays as + // A curve pulled back to the diagonal stores nothing: the recipe stays as // small as the curve is flat, and an old recipe reads the same either way. const put = (next: ToneCurvePoint[]): ToneCurve => { const out: ToneCurve = { ...curve }; - if (isFlatCurve(next)) delete out[channel]; - else out[channel] = next; + if (isFlatCurve(next)) delete out.rgb; + else out.rgb = next; return out; }; @@ -231,9 +224,9 @@ export function ToneCurvePanel({ const grid = [0, 1, 2, 3, 4].map((i) => (i * SIZE) / 4); // What the graph is drawn against: the luminance of the picture on the grey - // channel, and that channel's own distribution when a single channel is being - // bent — the histogram follows the tab, the way Lightroom's does. - const bins = hist ? (channel === 'rgb' ? hist.lum : hist[channel]) : null; + // channel — the shape of the whole frame, since the composite curve is the + // only one the card draws. + const bins = hist ? hist.lum : null; return (
-
- {CURVE_CHANNELS.map((ch) => ( - - ))} - -
- {channel !== 'rgb' ? : null} {pts.map((p, i) => ( @@ -348,7 +308,7 @@ export function ToneCurvePanel({ cx={p[0] * SIZE} cy={(1 - p[1]) * SIZE} r={i === 0 || i === pts.length - 1 ? 6 : 5} - style={{ stroke: CURVE_CHANNEL_COLOR[channel] }} + style={{ stroke: CURVE_CHANNEL_COLOR.rgb }} /> ))}