{slider.label}
diff --git a/docker/frontend/src/ui/ImageStage.tsx b/docker/frontend/src/ui/ImageStage.tsx
index 3d1720c..e1c27c9 100644
--- a/docker/frontend/src/ui/ImageStage.tsx
+++ b/docker/frontend/src/ui/ImageStage.tsx
@@ -167,7 +167,10 @@ const maskFromDrag = (
// is projected onto the axis the handle rides, so a hand that wanders across it
// does not shrink it — and its rotation handle sits on the +ry axis, so the
// angle is simply the direction from the centre to the pointer, one quarter turn
-// back. 'move' takes the whole of it, the pin's own drag.
+// back. A line has no angle to store, so turning one is moving its two ends
+// about its own middle by the same turn, which keeps the ramp's length and its
+// place — the gradient falls in the new direction and nowhere else changes.
+// 'move' takes the whole of it, the pin's own drag.
const maskDragged = (
m: GradientMask,
part: MaskPart,
@@ -188,8 +191,26 @@ const maskDragged = (
const ddy = p.fy - m.y;
return { ...m, x: p.fx, y: p.fy, ex: m.ex + ddx, ey: m.ey + ddy };
}
- case 'rot':
- return { ...m, angle: Math.atan2(dy, dx) - Math.PI / 2 };
+ case 'rot': {
+ if (m.kind === 'radial') return { ...m, angle: Math.atan2(dy, dx) - Math.PI / 2 };
+ const cx = (m.x + m.ex) / 2;
+ const cy = (m.y + m.ey) / 2;
+ // The turn is asked for in the photo's own pixels, so the angle the hand
+ // asks for and the angle the ramp lies at are measured the same way.
+ const turn =
+ Math.atan2((p.fy - cy) * box.height, (p.fx - cx) * box.width) -
+ Math.atan2((m.ey - cy) * box.height, (m.ex - cx) * box.width);
+ const ca = Math.cos(turn);
+ const sa = Math.sin(turn);
+ const spin = (x: number, y: number) => {
+ const ox = (x - cx) * box.width;
+ const oy = (y - cy) * box.height;
+ return { x: cx + (ox * ca - oy * sa) / box.width, y: cy + (ox * sa + oy * ca) / box.height };
+ };
+ const s = spin(m.x, m.y);
+ const e = spin(m.ex, m.ey);
+ return { ...m, x: s.x, y: s.y, ex: e.x, ey: e.y };
+ }
case 'rx':
return { ...m, rx: Math.max(MASK_MIN, Math.abs(dx * Math.cos(m.angle) + dy * Math.sin(m.angle)) / box.width) };
default:
@@ -991,19 +1012,30 @@ export function ImageStage({
// renderer's own measurement, so an ellipse stays the same ellipse on any
// photo shape), which is why a y offset is turned back into a fraction of the
// height here. The rotation handle rides just outside the +ry axis, a fixed
- // number of SCREEN pixels clear of the rim, so it stays reachable at any zoom.
+ // number of SCREEN pixels clear of the rim, so it stays reachable at any zoom;
+ // a linear mask has no ry to hang it on, so it rides clear of the ramp's
+ // middle along the ramp's own normal, the direction the gradient falls in.
const maskGeom = (m: GradientMask) => {
const u = { x: Math.cos(m.angle), y: Math.sin(m.angle) };
const v = { x: -Math.sin(m.angle), y: Math.cos(m.angle) };
const w = box?.width ?? 0;
+ const h = box?.height ?? 0;
const k = box && box.height > 0 ? box.width / box.height : 1;
const clear = 24 / Math.max(1, view.s) / Math.max(1, w);
- const at = (dx: number, dy: number) => ({ x: m.x + dx, y: m.y + dy * k });
+ // The point a shape is moved by: an ellipse's centre, the middle of a ramp —
+ // which is what the pin sits on and what the handles are placed around.
+ const pin = m.kind === 'linear' ? { x: (m.x + m.ex) / 2, y: (m.y + m.ey) / 2 } : { x: m.x, y: m.y };
+ const at = (dx: number, dy: number) => ({ x: pin.x + dx, y: pin.y + dy * k });
+ const rx = (m.ex - m.x) * w;
+ const ry = (m.ey - m.y) * h;
+ const len = Math.hypot(rx, ry) || 1;
return {
- at,
axis: (sx: number, sy: number) =>
at(sx * m.rx * u.x + sy * m.ry * v.x, sx * m.rx * u.y + sy * m.ry * v.y),
- rot: at(v.x * (m.ry + clear), v.y * (m.ry + clear)),
+ rot:
+ m.kind === 'linear'
+ ? at((-ry / len) * clear, (rx / len) * clear)
+ : at(v.x * (m.ry + clear), v.y * (m.ry + clear)),
};
};
@@ -1615,7 +1647,8 @@ export function ImageStage({
them is chosen at all — and the chosen one adds the outline of what
the render will do (the two ends of a linear ramp and the ramp
between them; an ellipse and the inner ellipse its feather fades
- to) plus the handles that resize it. */}
+ to) plus the handles that resize it and the one that turns it: the
+ angle of an ellipse, or the direction a ramp falls in. */}
{maskTool && !cropEditing && box ? (
))}
{selMask && selGeom
- ? selMask.kind === 'linear'
- ? ([
- { part: 'p0' as const, at: { x: selMask.x, y: selMask.y }, k: 'l0' },
- { part: 'p1' as const, at: { x: selMask.ex, y: selMask.ey }, k: 'l1' },
- ].map(({ part, at, k }) => (
- grabMask(maskSel as number, part, e)}
- onPointerMove={moveMask}
- onPointerUp={endMask}
- onPointerCancel={endMask}
- />
- )))
- : ([
- { part: 'rx' as const, at: selGeom.axis(1, 0), k: 'x1' },
- { part: 'rx' as const, at: selGeom.axis(-1, 0), k: 'x2' },
- { part: 'ry' as const, at: selGeom.axis(0, 1), k: 'y1' },
- { part: 'ry' as const, at: selGeom.axis(0, -1), k: 'y2' },
- { part: 'rot' as const, at: selGeom.rot, k: 'rot' },
- ].map(({ part, at, k }) => (
- grabMask(maskSel as number, part, e)}
- onPointerMove={moveMask}
- onPointerUp={endMask}
- onPointerCancel={endMask}
- />
- )))
+ ? (selMask.kind === 'linear'
+ ? [
+ { part: 'p0' as const, at: { x: selMask.x, y: selMask.y }, k: 'p0' },
+ { part: 'p1' as const, at: { x: selMask.ex, y: selMask.ey }, k: 'p1' },
+ // The ramp's angle, which is the direction it falls in.
+ { part: 'rot' as const, at: selGeom.rot, k: 'rot' },
+ ]
+ : [
+ { part: 'rx' as const, at: selGeom.axis(1, 0), k: 'rx-x1' },
+ { part: 'rx' as const, at: selGeom.axis(-1, 0), k: 'rx-x2' },
+ { part: 'ry' as const, at: selGeom.axis(0, 1), k: 'ry-y1' },
+ { part: 'ry' as const, at: selGeom.axis(0, -1), k: 'ry-y2' },
+ { part: 'rot' as const, at: selGeom.rot, k: 'rot-rot' },
+ ]
+ ).map(({ part, at, k }) => (
+ grabMask(maskSel as number, part, e)}
+ onPointerMove={moveMask}
+ onPointerUp={endMask}
+ onPointerCancel={endMask}
+ />
+ ))
: null}
) : null}