dtourolleandClaude Opus 5
e6ad906bc1
A photographer cropping for a print, a phone wallpaper or a 16:9 frame is not choosing four edges — they are choosing one edge and a known shape. Free-dragging every corner made them do that arithmetic by eye on every drag, and get it slightly wrong. The panel now offers Free, Original, 1:1, 3:2, 4:3 and 16:9, with a Portrait switch for the ones that have two orientations. Original follows the frame rather than naming a number, so it stays right on the next photograph from another body and after a quarter turn. **The ratio is of output pixels, and the rect is not.** `CropRect` is stored in fractions of a frame that is not itself square, so holding a shape needs the frame's size — `ratio * height / width` of the frame. Skipping that gives a "1:1" crop that is square only on a square photograph, which is the one case nobody would test on, so the conversion lives in `CropRect::with_aspect` where it is explained and pinned by a test that asserts the fractions are *not* equal. Two decisions worth recording: The reshaped rect **grows** onto the ratio rather than shrinking onto it, then scales down only as far as the frame's edge demands. Fitting inside instead makes a one-axis drag do nothing at all — the other axis clamps the first straight back, and the handle simply refuses to move. The overlay now reports **which corner the drag is holding**, because reshaping onto a ratio has to know which corner is nailed down and only the handle that took the press knows that. A move reports no corner and keeps its shape: reshaping about a centre would pull an over-moved rect smaller instead of sliding it along the edge. The lock lives with the window rather than the session. A `DevelopSession` is per image, and cropping a set of frames to one shape is exactly when the lock earns its place. It is not an edit and reaches no sidecar — what is saved is the rectangle it produced. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
255 lines
9.4 KiB
Plaintext
255 lines
9.4 KiB
Plaintext
// TRACES: FR-DEV-4
|
|
// The crop rectangle drawn on the photograph.
|
|
//
|
|
// 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.
|
|
//
|
|
// Sized by the develop view to the fitted image rect, so the fractions below
|
|
// are fractions of the picture and not of the canvas box it is letterboxed
|
|
// inside. The rect itself is mirrored from Rust rather than owned here, for
|
|
// the reason `AppWindow` gives: Rust clamps and squares it, so the overlay
|
|
// must draw what was actually applied and not what the drag asked for.
|
|
//
|
|
// **Every drag is measured in the frame's coordinates, never in the dragged
|
|
// area's own.** This is not a stylistic preference. A `TouchArea` reports
|
|
// `mouse-x` relative to itself, and each of these areas is placed *by the very
|
|
// rect the drag is editing* — so the moment Rust echoes a new rect back, the
|
|
// area moves under the pointer and the reported position drops by the same
|
|
// amount it just rose. Taking `mouse-x - pressed-x` as the movement therefore
|
|
// subtracts the drag from itself: the rect converges on tracking the pointer
|
|
// at half speed, which on screen reads as the crop sliding out from under the
|
|
// cursor and the handle you are holding no longer being the one beneath your
|
|
// finger.
|
|
//
|
|
// The fix is the one `GradientHandles` in masks.slint already uses: convert
|
|
// the pointer to a fraction of the *frame* — `parent.x + mouse-x`, where
|
|
// `parent.x` tracks exactly the movement `mouse-x` lost — and capture the
|
|
// press in those same coordinates on the way down. Both terms then move
|
|
// together and cancel, so the rect follows the pointer exactly.
|
|
|
|
import { Theme } from "theme.slint";
|
|
|
|
export component CropOverlay inherits Rectangle {
|
|
/// The crop rect, in fractions of the frame.
|
|
in property <float> crop-x: 0.0;
|
|
in property <float> crop-y: 0.0;
|
|
in property <float> crop-w: 1.0;
|
|
in property <float> crop-h: 1.0;
|
|
|
|
/// A dragged crop rect — `x`, `y`, `width`, `height`, then the corner the
|
|
/// drag is holding as a `0`/`1` pair, or `-1, -1` where the whole rect is
|
|
/// being moved and its shape must not be touched.
|
|
///
|
|
/// The corner is what an aspect lock needs and cannot infer: reshaping a
|
|
/// rect onto a ratio has to know which of its corners is nailed down, and
|
|
/// only the handle that took the press knows that. It is reported as the
|
|
/// held corner rather than as the fixed one because that is what is
|
|
/// written here — Rust takes the opposite corner.
|
|
callback crop-changed(float, float, float, float, float, float);
|
|
|
|
|
|
property <length> rx: root.crop-x * self.width;
|
|
property <length> ry: root.crop-y * self.height;
|
|
property <length> rw: root.crop-w * self.width;
|
|
property <length> rh: root.crop-h * self.height;
|
|
|
|
// The surround: dimmed and drained of colour, so the crop
|
|
// reads as the photograph and everything else as context
|
|
// being discarded. Slint cannot desaturate a live image,
|
|
// so this is a heavy neutral wash over it — the dimming
|
|
// carries the separation and the neutrality kills the
|
|
// colour cue.
|
|
property <brush> veil: #20242aE0;
|
|
|
|
Rectangle {
|
|
x: 0;
|
|
y: 0;
|
|
width: parent.width;
|
|
height: root.ry;
|
|
background: root.veil;
|
|
}
|
|
Rectangle {
|
|
x: 0;
|
|
y: root.ry + root.rh;
|
|
width: parent.width;
|
|
height: parent.height - root.ry - root.rh;
|
|
background: root.veil;
|
|
}
|
|
Rectangle {
|
|
x: 0;
|
|
y: root.ry;
|
|
width: root.rx;
|
|
height: root.rh;
|
|
background: root.veil;
|
|
}
|
|
Rectangle {
|
|
x: root.rx + root.rw;
|
|
y: root.ry;
|
|
width: parent.width - root.rx - root.rw;
|
|
height: root.rh;
|
|
background: root.veil;
|
|
}
|
|
|
|
// The rect, its thirds, and the handles.
|
|
Rectangle {
|
|
x: parent.rx;
|
|
y: parent.ry;
|
|
width: parent.rw;
|
|
height: parent.rh;
|
|
border-width: 1px;
|
|
border-color: #ffffffCC;
|
|
|
|
// Rule of thirds, the reason a crop overlay is worth
|
|
// drawing at all rather than typing numbers.
|
|
Rectangle {
|
|
x: parent.width / 3;
|
|
y: 0; width: 1px; height: parent.height;
|
|
background: #ffffff44;
|
|
}
|
|
Rectangle {
|
|
x: parent.width * 2 / 3;
|
|
y: 0; width: 1px; height: parent.height;
|
|
background: #ffffff44;
|
|
}
|
|
Rectangle {
|
|
x: 0; y: parent.height / 3;
|
|
width: parent.width; height: 1px;
|
|
background: #ffffff44;
|
|
}
|
|
Rectangle {
|
|
x: 0; y: parent.height * 2 / 3;
|
|
width: parent.width; height: 1px;
|
|
background: #ffffff44;
|
|
}
|
|
|
|
// Drag the whole rect.
|
|
//
|
|
// Measured in the frame's coordinates, not this area's — see the
|
|
// header. This `TouchArea` *is* the rect being dragged, so it is the
|
|
// worst case for the drift: it moves by the whole of every step.
|
|
move-area := TouchArea {
|
|
width: 100%;
|
|
height: 100%;
|
|
mouse-cursor: MouseCursor.move;
|
|
|
|
property <float> start-x;
|
|
property <float> start-y;
|
|
property <float> from-x;
|
|
property <float> from-y;
|
|
|
|
function fraction-x(local-x: length) -> float {
|
|
return (parent.x + local-x) / max(root.width, 1px);
|
|
}
|
|
function fraction-y(local-y: length) -> float {
|
|
return (parent.y + local-y) / max(root.height, 1px);
|
|
}
|
|
|
|
pointer-event(ev) => {
|
|
if (ev.kind == PointerEventKind.down) {
|
|
self.start-x = root.crop-x;
|
|
self.start-y = root.crop-y;
|
|
self.from-x = self.fraction-x(self.pressed-x);
|
|
self.from-y = self.fraction-y(self.pressed-y);
|
|
}
|
|
}
|
|
|
|
moved => {
|
|
if (self.pressed) {
|
|
root.crop-changed(
|
|
self.start-x + self.fraction-x(self.mouse-x) - self.from-x,
|
|
self.start-y + self.fraction-y(self.mouse-y) - self.from-y,
|
|
root.crop-w,
|
|
root.crop-h,
|
|
// No corner: a move keeps the shape it already has,
|
|
// and an over-drag should slide along the edge rather
|
|
// than be reshaped back inside.
|
|
-1,
|
|
-1,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Corner handles. Each drags one corner while the opposite
|
|
// stays put, which is the only behaviour that lets a crop
|
|
// be shaped rather than merely moved.
|
|
for corner in [
|
|
{ hx: 0.0, hy: 0.0 },
|
|
{ hx: 1.0, hy: 0.0 },
|
|
{ hx: 0.0, hy: 1.0 },
|
|
{ hx: 1.0, hy: 1.0 },
|
|
]: Rectangle {
|
|
property <length> size: 18px;
|
|
x: parent.rx + corner.hx * parent.rw - self.size / 2;
|
|
y: parent.ry + corner.hy * parent.rh - self.size / 2;
|
|
width: self.size;
|
|
height: self.size;
|
|
|
|
Rectangle {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #ffffff;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
TouchArea {
|
|
width: 100%;
|
|
height: 100%;
|
|
mouse-cursor: (corner.hx == corner.hy)
|
|
? MouseCursor.nwse-resize
|
|
: MouseCursor.nesw-resize;
|
|
|
|
property <float> ox;
|
|
property <float> oy;
|
|
property <float> ow;
|
|
property <float> oh;
|
|
property <float> from-x;
|
|
property <float> from-y;
|
|
|
|
function fraction-x(local-x: length) -> float {
|
|
return (parent.x + local-x) / max(root.width, 1px);
|
|
}
|
|
function fraction-y(local-y: length) -> float {
|
|
return (parent.y + local-y) / max(root.height, 1px);
|
|
}
|
|
|
|
pointer-event(ev) => {
|
|
if (ev.kind == PointerEventKind.down) {
|
|
self.ox = root.crop-x;
|
|
self.oy = root.crop-y;
|
|
self.ow = root.crop-w;
|
|
self.oh = root.crop-h;
|
|
self.from-x = self.fraction-x(self.pressed-x);
|
|
self.from-y = self.fraction-y(self.pressed-y);
|
|
}
|
|
}
|
|
|
|
// Movement as a fraction of the frame, live while
|
|
// the handle is held.
|
|
property <float> dx: self.fraction-x(self.mouse-x) - self.from-x;
|
|
property <float> dy: self.fraction-y(self.mouse-y) - self.from-y;
|
|
|
|
moved => {
|
|
if (!self.pressed) {
|
|
return;
|
|
}
|
|
// Dragging a left/top handle moves the origin
|
|
// and shrinks the extent by the same amount;
|
|
// a right/bottom handle moves only the extent.
|
|
// Rust clamps the result, so an over-drag
|
|
// slides rather than inverting.
|
|
root.crop-changed(
|
|
corner.hx == 0 ? self.ox + self.dx : self.ox,
|
|
corner.hy == 0 ? self.oy + self.dy : self.oy,
|
|
corner.hx == 0 ? self.ow - self.dx : self.ow + self.dx,
|
|
corner.hy == 0 ? self.oh - self.dy : self.oh + self.dy,
|
|
corner.hx,
|
|
corner.hy,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|