dtourolle/DarkRoom
1
0
Fork 0
Code Issues 39 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Say which photograph the sliders are pointed at

Browse Source 
Selecting a mask layer silently re-points about thirty controls at that layer's
chain. Same panel, same order, same sliders, different meaning — and the only
thing that said so was a sentence in the panel above, which a photographer
reaching for the exposure slider has no reason to read. An exposure change
lands on the whole frame when it was meant for a face, or the reverse; both are
silent, and both are discovered later. `ui-navigation.md` §1.1 calls it the
dangerous one and it is: the others in that document cost time, this one costs
work.

The remedy is the classic one for a modal fault — make the mode visible — and
the application already had the pattern. Crop arms a canvas interaction, draws
an overlay, gives the column one job and is left by the control that entered
it. Local masking is the same animal built as a peer panel, and that is what
created the ambiguity. So `crop-mode` stops being a bare boolean and becomes
one value of a three-state mode, which is the point: two modes could both be on
before, and now that is not a state the interface can be in rather than one it
is tested against.

**One strip, not two.** The mode control was going to sit beside the group
strip that filters the adjustments, which is two controls above one column
answering the same question — what am I working on. They are one control now,
`Crop · Local │ All · Light · Colour`, which is the shape Lightroom Mobile's
bottom strip has for the same reason. The two halves are different kinds of
state and are drawn differently: a mode is a chip that fills with the accent
when it is on, a group is a word with a rule under it. That difference is what
lets both be read at once, which they routinely are — picking Light while a
mask is selected filters *that layer's* chain and does not leave the mode.
Dropping the scope on a group press would be the same fault coming back from
the other end, and would make Light mean two things depending on where it was
pressed.

The strip stays pinned above the develop column rather than moving to the top
of the canvas as the document proposed. The half that filters the column
belongs to the column, and the photograph is the subject. The canvas keeps one
button, which now names the mode it leaves rather than saying "Done" — that was
unambiguous with one mode and would not be with two — because the column can be
closed on a narrow window and no mode may be inescapable.

Entering a mode is a side effect, so Rust owns it rather than the strip writing
the property: crop drops the zoom, local turns the overlay on, and leaving
clears the selection. That last one is the fix. The "Overlay" and "Select"
toggles are gone because they armed things that are simply what the mode *is* —
a mode that has to be switched on separately is one you can enter and have do
nothing. Escape and the Android back gesture join `back_step` as one
`LeaveMode` rather than a second exit concept, and the mode is left before the
zoom is: it was entered later, and it is the bigger step back.

The heading is where the scope goes. Not a caption beside the panel, the
heading *of* the panel that changed — `ADJUST` becomes the layer's name, the
same string the selected row in the stack shows. That is the difference between
describing a hazard and removing it.

**Handles on the photograph.** A linear or radial mask could be created and
then not moved, so a radial sat at the centre of the frame at its default size
for ever. Three faults stood in the way of drawing one.

The first is that a gradient did not render at all until the model had run. The
rasteriser was built on the way out of `segment` and the array's size was read
*off* the segmentation, so a gradient added to an unsegmented photograph
produced nothing — silently, in the same way exports and thumbnails once did:
the shader still emits the layer's block and the empty placeholder multiplies it
by zero. The proxy size is a property of the photograph. Both are derived from
it now, and deliberately at the same size rather than by coincidence, because a
subject's distance field is sampled against that array.

The second is hit-testing. A handle is drawn in output coordinates and stored
in source ones, and between them lie the crop, the zoom, the pan, the
straightening and the turns. `Framing::source_at` is `wgsl_prologue` evaluated
on the CPU, kept in that file beside it so that keeping the two in step is one
file's problem — a handle mapped through anything less drifts off the mask the
moment the view moves, which is exactly what masks are rasterised in source
space to avoid.

The third is that a drag is a displacement, not a destination. Each handle
answers to the movement of the pointer since the press, applied to where the
mask was when the press landed. Snapping the handle to the pointer instead
jerks it by up to half a touch target on the first press, and the target is
finger-sized because a tablet has no hover to reveal a control and no modifier
to qualify it.

A ramp gets three handles — centre, width, angle. An ellipse gets three too:
centre and one per semi-axis, the major one carrying the direction as well as
the length, because where an axis is put says both. It had a fourth, and it is
gone: standing off the shape by a fixed distance, the rotation arm began
outside the photograph at the size a new radial is created at, so the first
thing anyone saw was a control they could not reach without first shrinking the
mask.

Two faults here were found by looking at the screen rather than at the source,
both of the kind that cannot be found any other way. A `1px` rule with a size
and no position is *centred* by Slint, so the seam between the photograph and
the column was a hairline down the middle of the panel, through the histogram
and every slider under it — twice, once in `app.slint` and once in
`AdjustPanel`. And handing Slint a fresh model for the handles on every pointer
event made the repeater rebuild its items, taking the `TouchArea` holding the
gesture with them: the handle jumped once and then went dead under a finger
that was still down. `develop.rs` carries the same warning about the parameter
rows, where it broke slider drags; the model is rewritten in place now.

The tests worth having are the ones about ambiguity and about the map. That the
same row reads the frame's value, then the layer's, then the frame's again is
§1.1 in one assertion. That dragging a handle onto another gradient's matching
handle *produces* that gradient closes the loop between the two directions of
the framing map, through a view that is cropped, zoomed, panned, straightened
and quarter-turned at once — a one-legged map is invisible when the framing is
neutral, because then both legs are the identity.

Not done here: the histogram still reports the whole frame while the sliders
edit a layer. That disagreement is real and is N3's, which this unblocks. The
strip has room for a Brush entry beside Crop and Local when the painted masks
land in the core, and it needs nothing here but the canvas interaction.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dtourolle
2026-08-22 13:20:41 +02:00
co-authored by Claude Opus 5
parent c75863c93f
commit 96a7b405c2
10 changed files with 2171 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dr-ui/ui/adjust.slint
+155 -26
View File
@@ -453,10 +453,6 @@ component ParamControl inherits Rectangle {
// what a bespoke widget for a known stage is entitled to do.
export component GeometryPanel inherits Rectangle {
in property <bool> enabled: true;
/// Whether the crop overlay is up. The button is a toggle, not an action:
/// crop mode is sustained state, and the canvas looks different while it
/// is on.
in property <bool> crop-mode: false;
in property <float> angle: 0.0;
in property <float> max-straighten: 45.0;
in property <bool> flip-h: false;
@@ -464,7 +460,6 @@ export component GeometryPanel inherits Rectangle {
/// Any of crop, angle, rotation or flips differs from neutral.
in property <bool> modified: false;
callback crop-toggled(bool);
callback rotate(int);
callback flip-h-toggled();
callback flip-v-toggled();
@@ -497,13 +492,11 @@ export component GeometryPanel inherits Rectangle {
spacing: Theme.gap-sm;
padding-bottom: Theme.gap-sm;
// Crop first: it is the framing decision the others serve.
Button {
text: root.crop-mode ? "Done Cropping" : "Crop";
active: root.crop-mode;
enabled: root.enabled;
clicked => { root.crop-toggled(!root.crop-mode); }
}
// No crop button. Crop is one value of the view mode now, entered
// and left from the strip pinned at the top of this column — a
// second control that entered the same mode would be a second
// thing that has to agree about which mode the view is in, and
// the whole point of the enum is that there is one answer.
// Rotation and flips. Icons rather than labels: four controls
// named in words would wrap the 280px column, and each of
@@ -629,7 +622,41 @@ export component TransferPanel inherits VerticalLayout {
}
/// The group strip: which kind of adjustment the panel is showing.
/// Which mode the develop view is in.
///
/// `crop` was a bare `bool` on the window and local masking was a panel with
/// two toggles, so nothing stopped both being on at once — and nothing on
/// screen said which of them the canvas and the column were obeying. One value
/// with three states cannot be in two of them, which is the whole reason this
/// is an enum rather than a tidier pair of flags.
export enum ViewMode {
/// The whole photograph. Sliders are global, the canvas pans and zooms.
photo,
/// The crop overlay is up and the canvas shows the uncropped frame.
crop,
/// The region map is drawn, a click on the photograph selects, and the
/// column is the mask stack and the selected layer's adjustments.
local,
}
/// The strip: what the photographer is working on.
///
/// Two kinds of entry, deliberately together.
///
/// **Modes** — crop and local — change the canvas as well as the column. They
/// are drawn as chips and lit with the accent, which means *active* everywhere
/// else in this interface and means exactly that here.
///
/// **Groups** — the rest — filter the adjustments to one kind. They are
/// underlined instead, because the accent is already spoken for and because
/// they are a different sort of state: a mode is something you are *in*, a
/// group is something you are *looking at*.
///
/// Keeping them apart visually is what lets them be independent. Picking a
/// group in local mode filters the selected layer's chain and does not leave
/// the mode, so "Light" means the same thing wherever it is pressed — the
/// alternative, where a group press silently dropped the scope, would be the
/// §1.1 fault reintroduced from the other end.
///
/// **Pinned above the scrolling column, not inside a panel.** It began inside
/// `AdjustPanel`, which put it below five other panels and off the bottom of a
@@ -639,25 +666,100 @@ export component TransferPanel inherits VerticalLayout {
///
/// **This file names no group.** The strings arrive already resolved from
/// whatever the operations declared themselves to be about, so a new operation
/// joins a group without an edit here (FR-DEV-3a).
export component GroupStrip inherits Rectangle {
/// joins a group without an edit here (FR-DEV-3a). The two modes are not
/// operations — crop is a gesture on the canvas and local is a scope — so
/// naming them breaks nothing.
export component ModeStrip inherits Rectangle {
in property <[string]> tabs;
/// Index into `tabs`, or -1 for "everything".
in property <int> active-tab: -1;
in property <ViewMode> mode: ViewMode.photo;
in property <bool> enabled: true;
callback picked(int);
callback mode-picked(ViewMode);
background: Theme.surface;
height: root.enabled && root.tabs.length > 1 ? layout.preferred-height : 0px;
visible: root.enabled && root.tabs.length > 1;
height: root.enabled ? layout.preferred-height : 0px;
visible: root.enabled;
// Scrolls rather than overflowing, exactly as the develop status strip
// does and for the same reason: a `HorizontalLayout` given less width than
// its children need does not shrink them, it runs off the end. Two modes
// plus however many groups the operation set declares is already more than
// a 280px column holds, and the column is where this is pinned.
Flickable {
width: 100%;
height: 100%;
viewport-height: self.height;
viewport-width: max(self.width, layout.preferred-width);
layout := HorizontalLayout {
width: parent.viewport-width;
padding-left: Theme.gap;
padding-right: Theme.gap;
spacing: Theme.gap-sm;
alignment: start;
// A chip per mode. Drawn as an outline that fills when active rather
// than as an underline, so at a glance the strip reads as two runs
// and it is never ambiguous which half a lit entry belongs to.
//
// **Where a brush goes.** Painting a mask is a third mode of exactly
// this shape — it arms a canvas gesture and scopes the column — so it
// joins this list and the `ViewMode` enum, and needs nothing else here.
// `MaskSource::Brush` and the stroke calls on `MaskLayer` land in the
// core separately; what is missing on this side is only the canvas
// interaction, which is the gradient handles' neighbour.
for entry in [
{ label: "Crop", value: ViewMode.crop },
{ label: "Local", value: ViewMode.local },
]: mode-chip := TouchArea {
width: mode-name.preferred-width + 2 * Theme.gap-sm;
height: Theme.touch-target;
mouse-cursor: pointer;
property <bool> on: root.mode == entry.value;
// Pressing the mode you are already in leaves it, which is what
// makes the strip the way out as well as the way in — the same
// control both directions, as the crop button was.
clicked => {
root.mode-picked(self.on ? ViewMode.photo : entry.value);
}
Rectangle {
y: (parent.height - self.height) / 2;
height: Theme.control-height;
width: parent.width;
border-radius: Theme.radius;
border-width: 1px;
border-color: mode-chip.on ? Theme.active : Theme.rule;
background: mode-chip.on
? Theme.active-dim
: (mode-chip.has-hover ? Theme.hover : transparent);
}
mode-name := Text {
text: entry.label;
// Dark on the lit fill, which is near-white: the same
// inversion `Button`'s primary state makes.
color: mode-chip.on ? Theme.ground : Theme.ink-dim;
font-size: Theme.text-sm;
font-weight: 600;
vertical-alignment: center;
horizontal-alignment: center;
}
}
// The divider between the two kinds. One pixel, and it is what stops
// the strip reading as one undifferentiated row of five words.
Rectangle {
width: 1px;
height: Theme.touch-target;
background: Theme.rule;
}
all := TouchArea {
width: 34px;
height: Theme.touch-target;
@@ -691,9 +793,8 @@ export component GroupStrip inherits Rectangle {
horizontal-alignment: center;
}
// Underlined rather than filled: the accent means *modified*
// everywhere else here, and spending it on "which group" would
// blunt the one signal the panel has.
// Underlined rather than filled: the accent is the mode chips'
// now, and spending it on "which group" as well would blunt both.
Rectangle {
y: parent.height - 2px;
height: 2px;
@@ -702,11 +803,25 @@ export component GroupStrip inherits Rectangle {
}
}
}
}
}
export component AdjustPanel inherits Rectangle {
in property <[ParamRow]> rows;
in property <bool> enabled: true;
/// What these controls are pointed at — the whole photograph, or one mask
/// layer by name.
///
/// **The heading, not a caption beside it.** Selecting a layer re-points
/// every one of these controls at that layer's chain, and until now the
/// only sign of it was a sentence in the panel above. Putting the answer
/// in the heading of the thing that changed means the scope cannot be read
/// without also reading what it applies to.
///
/// Supplied already resolved: whether a layer is selected and what it is
/// called are session facts, and deriving them here would need this file
/// to reason about the mask stack.
in property <string> scope: "ADJUST";
/// The tone curve's sampled shape, evaluated in Rust by the same spline
/// the shader runs so the drawn line cannot disagree with the applied one.
in property <[float]> curve-samples;
@@ -737,8 +852,18 @@ export component AdjustPanel inherits Rectangle {
alignment: start;
HorizontalLayout {
PanelHeading { text: "ADJUST"; }
Rectangle { horizontal-stretch: 1; }
PanelHeading {
text: root.scope;
// Elided rather than wrapped. A layer's name is the user's and
// can be any length; a heading that wrapped would change the
// panel's height as the selection moved, and an unwrapped one
// would set the 280px column's minimum width from it.
overflow: elide;
horizontal-stretch: 1;
}
// No spacer: the heading takes the slack itself, so a long layer
// name elides against the reset rather than pushing it off the
// 280px column.
reset := TouchArea {
width: 44px;
height: 20px;
@@ -873,8 +998,12 @@ export component AdjustPanel inherits Rectangle {
}
}
Rectangle {
width: 1px;
background: Theme.rule;
}
// No seam of its own.
//
// There was one — a 1px `rule` rectangle — and being a sized child of a
// plain Rectangle with no position, Slint *centred* it: a hairline drawn
// straight down the middle of the panel, through every slider in it. The
// column that hosts this panel already draws the seam between itself and
// the photograph, so the fix is one rule in one place rather than two that
// were never both wanted.
}
ui/dr-ui/ui/app.slint
+226 -38
View File
@@ -1,6 +1,6 @@
import { Theme } from "theme.slint";
import { AdjustPanel, GeometryPanel, GroupStrip, ParamRow, TransferPanel } from "adjust.slint";
import { MaskPanel, MaskRow, SubjectRow } from "masks.slint";
import { AdjustPanel, GeometryPanel, ModeStrip, ParamRow, TransferPanel, ViewMode } from "adjust.slint";
import { GradientHandle, HandleRole, MaskPanel, MaskRow, SubjectRow } from "masks.slint";
import { LaunchScreen } from "launch.slint";
import { LibraryGrid, LibraryCell, TimelineBar, PhotoRoll } from "library.slint";
import { Button, PanelHeading, Label, Value, Caption, Panel, EmptyState, ProgressBar, ActivityRow } from "widgets.slint";
@@ -9,6 +9,7 @@ import { HistogramPanel, HistogramView } from "histogram.slint";
import { SettingsPage } from "settings.slint";
export { LibraryCell, TimelineBar, CollectionRow, ActivityRow, HistogramView }
export { ViewMode, GradientHandle, HandleRole }
// Status strip — surfaces the GPU backend and adapter, which matters during
// v0.1 because assumption A1 is exactly "does this compositing path work on
@@ -321,10 +322,25 @@ export component AppWindow inherits Window {
/// resolution against the viewport's, which Slint does not know.
in property <bool> magnified: false;
/// Whether the crop overlay is active. While it is, the canvas shows the
/// *whole* frame — otherwise the area being cropped away would not be on
/// screen to drag across — and the surround is greyed.
in-out property <bool> crop-mode: false;
/// TRACES: FR-UI-5
/// What the develop view is currently doing (see `ViewMode`).
///
/// One value rather than a flag per mode, so two modes cannot be on at
/// once — which, with `crop-mode` a bare bool beside a masking panel that
/// armed the canvas through two toggles of its own, they could be. Rust
/// owns it: entering a mode has side effects on the session (crop drops
/// the zoom, local clears nothing and leaving it clears the selection),
/// and a property the interface could set directly would let the view
/// change without them.
///
/// In `crop` the canvas shows the *whole* frame — otherwise the area being
/// cropped away would not be on screen to drag across — and the surround
/// is greyed.
in property <ViewMode> view-mode: ViewMode.photo;
/// Shorthand for the two conditions half this file tests, so a mode
/// comparison is written once rather than at each of a dozen call sites.
property <bool> cropping: root.view-mode == ViewMode.crop;
property <bool> local-mode: root.view-mode == ViewMode.local;
/// The crop rect in fractions of the frame, mirrored from Rust so the
/// overlay draws exactly what the pipeline holds.
@@ -333,7 +349,8 @@ export component AppWindow inherits Window {
in-out property <float> crop-w: 1.0;
in-out property <float> crop-h: 1.0;
callback crop-mode-toggled(bool);
/// Enter a mode, or `photo` to leave whichever one is current.
callback mode-picked(ViewMode);
/// A dragged crop rect, in fractions of the frame.
callback crop-changed(float, float, float, float);
@@ -818,8 +835,15 @@ export component AppWindow inherits Window {
in property <int> overlay-clip-h;
/// The straightening angle, so the overlay turns with the frame.
in property <float> overlay-angle: 0.0;
/// Clicking the canvas selects a region instead of panning.
in property <bool> region-picking: false;
/// Whether a click on the canvas selects a region instead of panning.
///
/// **Derived, not toggled.** It used to be a button in the masking panel,
/// which meant local masking could be open with picking off — a mode
/// entered and doing nothing. Arming a click is part of what local mode
/// *is*, so it follows the mode and the existence of something to pick.
property <bool> region-picking: root.local-mode && root.segmented;
/// Whether shift is down, tracked by the develop key scope below.
///
/// A `TouchArea`'s `clicked` carries no modifiers, so the state has to be
@@ -831,11 +855,26 @@ export component AppWindow inherits Window {
in property <[SubjectRow]> subject-rows;
in property <bool> segmented: false;
in property <bool> segmenting: false;
in property <bool> editing-mask: false;
/// The selected layer's name, already resolved, or "ADJUST" when the
/// controls are global. Names the adjust panel's heading.
in property <string> adjust-scope: "ADJUST";
/// The selected gradient's handles, in fractions of the shown image.
/// Empty unless a gradient layer is selected in local mode.
in property <[GradientHandle]> gradient-handles;
/// A handle dragged: which one, where the press was and where the pointer
/// is now, both in fractions of the shown image.
///
/// The press is carried rather than a running delta because the geometry
/// is re-derived from the position it had when the drag began — which is
/// what stops a drag accumulating rounding error along its length, the
/// same reason the crop handles capture the rect they started from.
callback gradient-handle-dragged(HandleRole, float, float, float, float);
/// A drag finished, so the edit can be recorded as one history step
/// rather than as one per frame of the gesture.
callback gradient-handle-released();
callback segment-image();
callback overlay-toggled(bool);
callback region-picking-toggled(bool);
/// A click on the photograph, in fractions of the shown image, plus
/// whether it should extend the selection rather than replace it.
callback region-picked(float, float, bool);
@@ -1417,7 +1456,7 @@ in property <bool> panel-visible: true;
x: 0; y: 0;
width: 100%;
height: 100%;
enabled: !root.crop-mode;
enabled: !root.cropping;
property <float> last-scale: 1.0;
@@ -1448,7 +1487,7 @@ in property <bool> panel-visible: true;
width: parent.shown-w;
height: parent.shown-h;
mouse-cursor: MouseCursor.crosshair;
enabled: !root.crop-mode;
enabled: !root.cropping;
clicked => {
root.region-picked(
@@ -1468,7 +1507,7 @@ in property <bool> panel-visible: true;
// A pan is only meaningful once there is something outside
// the viewport to reach.
mouse-cursor: root.zoomed ? MouseCursor.grab : MouseCursor.default;
enabled: !root.crop-mode;
enabled: !root.cropping;
property <length> last-x;
property <length> last-y;
@@ -1517,7 +1556,7 @@ in property <bool> panel-visible: true;
// Four dimmed, desaturated panels around the crop, then the
// rect itself with handles. Panels rather than one shape with
// a hole: Slint has no cut-out, and four rectangles are exact.
if root.crop-mode && root.total > 0 && root.load-error == "": crop-overlay := Rectangle {
if root.cropping && root.total > 0 && root.load-error == "": crop-overlay := Rectangle {
x: parent.shown-x;
y: parent.shown-y;
width: parent.shown-w;
@@ -1700,6 +1739,106 @@ in property <bool> panel-visible: true;
}
}
// --- gradient handles ---------------------------------------
//
// TRACES: FR-DEV-3 | FR-UI-3
// A linear or radial mask could be made and then never
// moved: there was nothing to grab, so a radial sat at the
// centre of the frame at its default size for ever.
//
// **Positioned against `shown-*`, like the crop overlay
// and the region picker.** The photograph is letterboxed
// inside this box and Slint does not report the fitted
// rect, so anything that has to land *on* the picture is
// placed against the derived one. Rust supplies the
// positions already mapped through the framing — the same
// map the shader applies — so a handle follows the mask
// through a zoom, a pan, a crop and a straightening rather
// than sitting where the mask used to be.
//
// **Drawn small, grabbed large.** The visible dot is 14px
// because a bigger one would hide the edge it is placed
// on, and the `TouchArea` is a full touch target, centred
// on it — `Button` establishes the same split. These are
// the first controls in the application meant to be
// dragged on the photograph, and a 12-inch tablet has no
// hover to reveal them with and no modifier to qualify
// them by, so what is drawn is all there is (FR-UI-7).
for handle in root.gradient-handles: Rectangle {
x: parent.shown-x + handle.x * parent.shown-w - self.width / 2;
y: parent.shown-y + handle.y * parent.shown-h - self.height / 2;
width: Theme.touch-target;
height: Theme.touch-target;
// The centre moves the whole mask, so it is filled;
// the others shape it and are rings. Shape rather than
// colour, because the handles sit on a photograph and
// any colour they carried would be read as part of it.
property <bool> solid: handle.role == HandleRole.centre;
Rectangle {
width: handle.role == HandleRole.rotate ? 12px : 14px;
height: self.width;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
border-radius: self.width / 2;
border-width: 2px;
// White with a dark ring, so the handle is visible
// against a blown sky and against a black frame —
// one treatment, both extremes, no theme token
// because this is drawn over the image and not over
// the interface.
border-color: #00000099;
background: parent.solid ? #ffffff : #ffffff44;
}
drag := TouchArea {
width: 100%;
height: 100%;
mouse-cursor: parent.solid
? MouseCursor.move
: MouseCursor.crosshair;
// Where the press landed, in the same fractions the
// callback reports in. Captured on the way down so
// the whole gesture is measured from one origin.
property <float> from-x;
property <float> from-y;
function fraction-x(local-x: length) -> float {
return (parent.x + local-x - canvas-area.shown-x)
/ max(canvas-area.shown-w, 1px);
}
function fraction-y(local-y: length) -> float {
return (parent.y + local-y - canvas-area.shown-y)
/ max(canvas-area.shown-h, 1px);
}
pointer-event(ev) => {
if (ev.kind == PointerEventKind.down) {
self.from-x = self.fraction-x(self.pressed-x);
self.from-y = self.fraction-y(self.pressed-y);
}
// One history step per gesture, not per frame.
if (ev.kind == PointerEventKind.up) {
root.gradient-handle-released();
}
}
moved => {
if (self.pressed) {
root.gradient-handle-dragged(
handle.role,
self.from-x,
self.from-y,
self.fraction-x(self.mouse-x),
self.fraction-y(self.mouse-y),
);
}
}
}
}
// Arrow keys and space step through the folder.
//
// Focused on show rather than waiting for a click, exactly
@@ -1757,19 +1896,31 @@ in property <bool> panel-visible: true;
// beside what it is reporting on. Crop moved to the panel
// because it is an edit, and edits live with the other edits.
//
// A crop exit is still reachable from here while cropping —
// the panel may be collapsed on a narrow window, and stranding
// the user in a mode with no visible way out is worse than one
// duplicated control.
// A way out of whichever mode is on is still reachable from
// here — the develop column may be closed on a narrow
// window, and the strip that enters a mode is pinned inside
// it. Stranding the user in a mode with no visible way out
// is worse than one duplicated control, and it is worse
// still now that there are two modes to be stranded in.
if root.total > 0 && root.load-error == "": HorizontalLayout {
x: 12px;
y: parent.height - self.preferred-height - 12px;
// Bounded, or the row takes the canvas's whole width
// and stretches its children across it. With one
// button that read as an odd-looking "Fit"; with two it
// reads as a toolbar laid over the photograph, which is
// the opposite of what a floating control should do.
width: self.preferred-width;
spacing: 6px;
alignment: start;
if root.crop-mode: Button {
text: "Done";
if root.view-mode != ViewMode.photo: Button {
// Names the mode being left rather than saying
// "Done", which was unambiguous while there was
// one mode and would not be with two.
text: root.cropping ? "Done Cropping" : "Done Masking";
active: true;
clicked => { root.crop-mode-toggled(false); }
clicked => { root.mode-picked(ViewMode.photo); }
}
// Zoom is a view state, so its readout doubles as the
@@ -1843,25 +1994,45 @@ in property <bool> panel-visible: true;
// would both sit at its origin and overlap. The strip is pinned by
// being outside the Flickable rather than by any coordinate.
VerticalLayout {
GroupStrip {
ModeStrip {
enabled: root.adjust-enabled;
mode: root.view-mode;
tabs: root.adjust-tabs;
active-tab: root.adjust-active-tab;
picked(i) => { root.adjust-tab-picked(i); }
mode-picked(m) => { root.mode-picked(m); }
}
Flickable {
viewport-height: column.preferred-height;
interactive: !adjust.slider-dragging;
// **What the column holds is the mode's answer.**
//
// In local mode it is the mask stack and then the
// selected layer's adjustments, and nothing else:
// the capture metadata describes the file, copy and
// paste move a whole edit between photographs, and
// framing is a decision about the picture's shape —
// none of the three is a property of a region
// within it, so all three would be controls in
// scope of nothing.
//
// **Each child carries its own condition** rather
// than the three being grouped inside one `if`.
// A nested layout under-reports its height here and
// the panels below it get drawn on top of each
// other — invisible in this file and obvious on
// screen. `masks.slint` carries the same note for
// the same reason.
column := VerticalLayout {
InfoPanel {
if !root.local-mode: InfoPanel {
camera: root.camera;
exposure: root.exposure;
dimensions: root.dimensions;
}
Rectangle {
if !root.local-mode: Rectangle {
height: 1px;
background: Theme.rule;
}
@@ -1872,6 +2043,12 @@ in property <bool> panel-visible: true;
// set by watching this move (FR-DSP-7). An instrument
// below the sliders it reports on would have the
// photographer looking away from it to use it.
//
// Kept in local mode, where it still reports the
// whole frame while the sliders edit a layer. That
// disagreement is real and is N3's to close; taking
// the instrument away instead would be a worse
// answer than an honest one that is not yet scoped.
HistogramPanel {
data: root.histogram;
}
@@ -1885,16 +2062,14 @@ in property <bool> panel-visible: true;
// made rather than how it is applied: the frame is decided
// by eye first and the pipeline runs it last (see
// `dr_pipeline::framing` on the coordinate order).
GeometryPanel {
if !root.local-mode: GeometryPanel {
enabled: root.adjust-enabled;
crop-mode: root.crop-mode;
angle: root.straighten;
max-straighten: root.max-straighten;
flip-h: root.flip-h;
flip-v: root.flip-v;
modified: root.framing-modified;
crop-toggled(on) => { root.crop-mode-toggled(on); }
rotate(turns) => { root.rotate-quarters(turns); }
flip-h-toggled => { root.flip-h-toggled(); }
flip-v-toggled => { root.flip-v-toggled(); }
@@ -1903,7 +2078,7 @@ in property <bool> panel-visible: true;
reset => { root.framing-reset(); }
}
Rectangle {
if !root.local-mode: Rectangle {
height: 1px;
background: Theme.rule;
}
@@ -1913,7 +2088,7 @@ in property <bool> panel-visible: true;
// burying it under thirty sliders would put the one
// control that operates on all of them below all of
// them.
TransferPanel {
if !root.local-mode: TransferPanel {
enabled: root.adjust-enabled;
armed: root.settings-armed;
summary: root.settings-summary;
@@ -1931,19 +2106,19 @@ in property <bool> panel-visible: true;
// those sliders act on. Below it, the photographer
// would set an exposure and only then discover which
// scope it landed in.
MaskPanel {
//
// Only in local mode: it is no longer a panel among
// peers that silently re-points another panel, it is
// what that mode's column *is*. That also takes one
// panel out of a scrolling column that had six.
if root.local-mode: MaskPanel {
enabled: root.adjust-enabled;
masks: root.mask-rows;
subjects: root.subject-rows;
segmented: root.segmented;
segmenting: root.segmenting;
overlay: root.overlay-on;
picking: root.region-picking;
editing-mask: root.editing-mask;
segment => { root.segment-image(); }
overlay-toggled(on) => { root.overlay-toggled(on); }
picking-toggled(on) => { root.region-picking-toggled(on); }
mask-selected(id) => { root.mask-selected(id); }
mask-removed(id) => { root.mask-removed(id); }
mask-toggled(id, on) => { root.mask-toggled(id, on); }
@@ -1969,7 +2144,7 @@ in property <bool> panel-visible: true;
add-subject(i) => { root.add-subject-mask(i); }
}
Rectangle {
if root.local-mode: Rectangle {
height: 1px;
background: Theme.rule;
}
@@ -1977,6 +2152,7 @@ in property <bool> panel-visible: true;
adjust := AdjustPanel {
rows: root.adjust-rows;
enabled: root.adjust-enabled;
scope: root.adjust-scope;
curve-samples: root.curve-samples;
param-changed(op, param, value) => {
root.param-changed(op, param, value);
@@ -1997,8 +2173,20 @@ in property <bool> panel-visible: true;
}
}
// The seam between the photograph and the column.
//
// **`x: 0` is load-bearing.** A child of a plain Rectangle
// that declares a size and no position is *centred* in it,
// so this hairline was being drawn straight down the middle
// of the develop column — over the histogram, the geometry
// controls and every slider below them. Invisible in the
// source and, at one pixel of `rule` grey, quiet enough on
// screen to be read as a divider that was meant to be
// there.
Rectangle {
x: 0;
width: 1px;
height: 100%;
background: Theme.rule;
}
}
ui/dr-ui/ui/masks.slint
+33 -40
View File
@@ -41,6 +41,25 @@ export struct MaskRow {
adjusted: bool,
}
/// Which part of a gradient a canvas handle drags.
///
/// Named by the job rather than by the field, because the two gradients keep
/// different things in the same place: `edge` is a linear ramp's width and a
/// radial's major semi-axis, and `cross` is the radial's minor one.
export enum HandleRole { centre, edge, cross, rotate }
/// One draggable point on the photograph.
///
/// Positioned in fractions of the image **as it is currently shown** — after
/// the crop, the zoom and the pan — because that is the only space this file
/// can draw in. Rust maps the mask's own source-space geometry into it on
/// every frame, so the handle sits on the mask rather than beside it.
export struct GradientHandle {
role: HandleRole,
x: float,
y: float,
}
/// Something the model found.
export struct SubjectRow {
index: int,
@@ -224,19 +243,8 @@ export component MaskPanel inherits Rectangle {
/// One is being computed now.
in property <bool> segmenting: false;
/// Draw the false-coloured region map over the photograph.
in property <bool> overlay: false;
/// Clicking the photograph selects a region rather than panning.
in property <bool> picking: false;
/// A layer is selected, so the adjust panel below is scoped to it.
///
/// Supplied rather than derived: Slint has no `any` over a model, and the
/// core already knows the answer.
in property <bool> editing-mask: false;
callback segment();
callback overlay-toggled(bool);
callback picking-toggled(bool);
callback mask-selected(string);
callback mask-removed(string);
@@ -266,7 +274,7 @@ export component MaskPanel inherits Rectangle {
alignment: start;
HorizontalLayout {
PanelHeading { text: "LOCAL"; }
PanelHeading { text: "MASKS"; }
Rectangle { horizontal-stretch: 1; }
if root.segmented: Value { text: root.subjects.length + (root.subjects.length == 1 ? " subject" : " subjects");
}
@@ -294,25 +302,12 @@ export component MaskPanel inherits Rectangle {
clicked => { root.segment(); }
}
// The overlay the whole map is judged by, and the picking mode that
// makes a click mean "select" instead of "pan".
if root.enabled && root.segmented: HorizontalLayout {
spacing: Theme.gap-sm;
Button {
text: "Overlay";
active: root.overlay;
clicked => { root.overlay-toggled(!root.overlay); }
}
Button {
text: "Select";
active: root.picking;
clicked => { root.picking-toggled(!root.picking); }
}
}
if root.enabled && root.segmented && root.picking: Caption {
// No "Overlay" button and no "Select" button. Both switched on things
// that are now simply what local mode *is*: entering it draws the
// region map and makes a click on the photograph mean "select". A mode
// whose behaviour has to be armed separately is a mode that can be
// entered and still do nothing, which is what these two allowed.
if root.enabled && root.segmented: Caption {
text: "Click a subject in the photograph to mask it.";
wrap: word-wrap;
}
@@ -402,14 +397,12 @@ export component MaskPanel inherits Rectangle {
morph-radius-changed(v) => { root.mask-morph-radius-changed(mask.id, v); }
}
// The one thing this panel has to say about the adjust panel below it,
// because otherwise selecting a layer silently changes what those
// sliders mean — the most confusing thing a scoped panel can do.
if root.enabled && root.masks.length > 0: Caption {
text: root.editing-mask
? "The controls below adjust the selected mask."
: "The controls below adjust the whole photograph.";
wrap: word-wrap;
}
// No caption saying which chain the sliders below are pointed at.
//
// That sentence used to be the *only* indication that selecting a
// layer had silently re-scoped thirty controls, and describing a
// hazard in a caption is not the same as removing it. The adjust
// panel's own heading names the layer it is editing now, which puts
// the answer on the thing that changed rather than above it.
}
}