Merge pull request #865 from gridaco/feat/svg-editor-shift-edge-aspect-resize

feat(svg-editor): Shift + side-edge resize aspect-locks about the opposite-edge center

Author: softmarshmallow

packages/grida-canvas-hud/__tests__/apply-resize-aspect.test.ts

@@ -0,0 +1,87 @@
+// `applyResize` — aspect-lock under `{ aspect: true }` (Shift). A corner takes
+// the max-magnitude axis factor; a side edge drives the perpendicular axis by
+// the same factor about the perpendicular center. This variant drives the
+// dashed resize *preview* so it matches an aspect-locking host (the emitted
+// intent stays opposite-anchored / free — see state.ts). Composes with
+// `fromCenter` (Alt) for uniform-about-center.
+
+import { describe, it, expect } from "vitest";
+import { applyResize } from "../event/gesture";
+import type { SelectionShape } from "../event";
+
+function rect(x: number, y: number, w: number, h: number): SelectionShape {
+  return { kind: "rect", rect: { x, y, width: w, height: h } };
+}
+function bbox(s: SelectionShape) {
+  if (s.kind !== "rect") throw new Error("expected rect");
+  return s.rect;
+}
+function center(r: { x: number; y: number; width: number; height: number }) {
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+}
+
+describe("applyResize — aspect off is unchanged (regression guard)", () => {
+  it("e edge stays free (perpendicular unchanged) without aspect", () => {
+    expect(bbox(applyResize(rect(0, 0, 100, 50), "e", 20, 0))).toEqual({
+      x: 0,
+      y: 0,
+      width: 120,
+      height: 50,
+    });
+  });
+});
+
+describe("applyResize — aspect (Shift) on a side edge follows the perpendicular", () => {
+  it("e: left edge pinned, height scales with width about the vertical center", () => {
+    const r = bbox(
+      applyResize(rect(0, 0, 100, 50), "e", 20, 0, { aspect: true })
+    );
+    expect(r).toEqual({ x: 0, y: -5, width: 120, height: 60 }); // s = 1.2
+    expect(r.y + r.height / 2).toBe(25); // vertical center preserved
+    expect(r.x).toBe(0); // left edge pinned
+  });
+
+  it("n: bottom edge pinned, width scales with height about the horizontal center", () => {
+    const r = bbox(
+      applyResize(rect(0, 0, 100, 50), "n", 0, -10, { aspect: true })
+    );
+    expect(r).toEqual({ x: -10, y: -10, width: 120, height: 60 }); // s = 1.2
+    expect(r.x + r.width / 2).toBe(50); // horizontal center preserved
+    expect(r.y + r.height).toBe(50); // bottom edge pinned
+  });
+
+  it("e: crossing the opposite edge clamps (no flip), matching core", () => {
+    // Drag the E edge far left, past the left edge → free width would be -50.
+    // Core clamps sx/sy to 0.001 (a thin box pinned at the left edge); the
+    // preview must match, not mirror.
+    const r = bbox(
+      applyResize(rect(0, 0, 100, 50), "e", -150, 0, { aspect: true })
+    );
+    expect(r.width).toBeCloseTo(0.1, 6); // 100 * 0.001, never negative
+    expect(r.height).toBeCloseTo(0.05, 6); // 50 * 0.001, followed
+    expect(r.x).toBe(0); // left edge still pinned
+  });
+});
+
+describe("applyResize — aspect (Shift) on a corner is max-magnitude uniform", () => {
+  it("se collapses to the larger axis factor, origin pinned", () => {
+    // sx = 1.2, sy = 1.1 → mag 1.2.
+    const r = bbox(
+      applyResize(rect(0, 0, 100, 50), "se", 20, 5, { aspect: true })
+    );
+    expect(r).toEqual({ x: 0, y: 0, width: 120, height: 60 });
+  });
+});
+
+describe("applyResize — Shift+Alt is uniform about the bbox center", () => {
+  it("e edge: both opposite edges move, center stays put", () => {
+    const r = bbox(
+      applyResize(rect(0, 0, 100, 50), "e", 20, 0, {
+        fromCenter: true,
+        aspect: true,
+      })
+    );
+    expect(r).toEqual({ x: -20, y: -10, width: 140, height: 70 }); // s = 1.4
+    expect(center(r)).toEqual({ x: 50, y: 25 }); // initial center
+  });
+});

packages/grida-canvas-hud/__tests__/chrome-aspect-guide.test.ts

@@ -0,0 +1,120 @@
+// Aspect-ratio guide — the diagonal dashed line drawn across the resize
+// preview box while Shift aspect-locks the gesture. Mirrors the main editor's
+// `AspectRatioGuide`; geometry comes from `cmath.ui.diagonalForDirection`
+// (the corner opposite the dragged handle). Lives in `decoration.lines`,
+// alongside the dashed preview rect/polyline.
+
+import { describe, it, expect } from "vitest";
+import cmath from "@grida/cmath";
+import { SurfaceState } from "../event/state";
+import { buildChrome } from "../surface/chrome";
+import { DEFAULT_STYLE } from "../surface/style";
+import type { NodeId, Rect } from "../event/gesture";
+import type { SelectionShape, ResizeDirection } from "../event";
+
+const IDENTITY_CAMERA: cmath.Transform = [
+  [1, 0, 0],
+  [0, 1, 0],
+];
+
+function resizeChrome(
+  shape: SelectionShape,
+  direction: ResizeDirection,
+  opts: { shift: boolean }
+) {
+  const state = new SurfaceState();
+  state.setSelection(["a"]);
+  state.setTransform(IDENTITY_CAMERA);
+  state.modifiers.shift = opts.shift;
+  state.gesture = {
+    kind: "resize",
+    ids: ["a"],
+    direction,
+    initial_shape: shape,
+    anchor_doc: [0, 0],
+    last_doc: [0, 0],
+    current_shape: shape,
+    preview_shape: shape,
+  };
+  const shapeOf = (_: NodeId): SelectionShape | null => null;
+  const { decoration } = buildChrome({
+    state,
+    shapeOf,
+    style: DEFAULT_STYLE,
+    width: 1000,
+    height: 1000,
+  });
+  return decoration;
+}
+
+const RECT: Rect = { x: 0, y: 0, width: 100, height: 50 };
+
+describe("aspect-ratio guide — Shift draws the diagonal of the preview box", () => {
+  it("is absent without Shift", () => {
+    const decoration = resizeChrome({ kind: "rect", rect: RECT }, "se", {
+      shift: false,
+    });
+    expect(decoration.lines ?? []).toHaveLength(0);
+  });
+
+  it("'se' draws TL→BR (the corner opposite the dragged handle)", () => {
+    const decoration = resizeChrome({ kind: "rect", rect: RECT }, "se", {
+      shift: true,
+    });
+    const lines = decoration.lines ?? [];
+    expect(lines).toHaveLength(1);
+    const l = lines[0];
+    expect(l.dashed).toBe(true);
+    // toCorners = [TL, TR, BR, BL]; "se" → TL→BR.
+    expect([l.x1, l.y1]).toEqual([0, 0]);
+    expect([l.x2, l.y2]).toEqual([100, 50]);
+  });
+
+  it("'e' edge uses the same SE diagonal (TL→BR)", () => {
+    const decoration = resizeChrome({ kind: "rect", rect: RECT }, "e", {
+      shift: true,
+    });
+    const l = (decoration.lines ?? [])[0];
+    expect([l.x1, l.y1, l.x2, l.y2]).toEqual([0, 0, 100, 50]);
+  });
+
+  it("'ne' draws BL→TR", () => {
+    const decoration = resizeChrome({ kind: "rect", rect: RECT }, "ne", {
+      shift: true,
+    });
+    const l = (decoration.lines ?? [])[0];
+    // "ne" → BL(0,50) → TR(100,0).
+    expect([l.x1, l.y1, l.x2, l.y2]).toEqual([0, 50, 100, 0]);
+  });
+
+  it("transformed shape: the diagonal is projected through the matrix", () => {
+    const local: Rect = { x: 0, y: 0, width: 100, height: 100 };
+    const matrix = cmath.transform.rotate(
+      cmath.transform.identity,
+      30,
+      [50, 50]
+    );
+    const decoration = resizeChrome(
+      { kind: "transformed", local, matrix },
+      "se",
+      { shift: true }
+    );
+    const l = (decoration.lines ?? [])[0];
+    expect(l.dashed).toBe(true);
+    // "se" → local TL(0,0) → BR(100,100), each projected by the matrix.
+    const [ex1, ey1] = cmath.vector2.transform([0, 0], matrix);
+    const [ex2, ey2] = cmath.vector2.transform([100, 100], matrix);
+    expect(l.x1).toBeCloseTo(ex1, 9);
+    expect(l.y1).toBeCloseTo(ey1, 9);
+    expect(l.x2).toBeCloseTo(ex2, 9);
+    expect(l.y2).toBeCloseTo(ey2, 9);
+  });
+
+  it("coexists with the dashed preview rect (both are emitted)", () => {
+    const decoration = resizeChrome({ kind: "rect", rect: RECT }, "se", {
+      shift: true,
+    });
+    expect((decoration.rects ?? []).filter((r) => r.dashed)).toHaveLength(1);
+    expect(decoration.lines ?? []).toHaveLength(1);
+  });
+});

packages/grida-canvas-hud/event/gesture.ts

@@ -410,13 +410,21 @@ export function applyResize(
   direction: ResizeDirection,
   dx: number,
   dy: number,
-  opts?: { fromCenter?: boolean }
+  opts?: { fromCenter?: boolean; aspect?: boolean }
 ): SelectionShape {
   const fromCenter = opts?.fromCenter ?? false;
+  const aspect = opts?.aspect ?? false;
   if (initial.kind === "rect") {
     return {
       kind: "rect",
-      rect: applyResizeRect(initial.rect, direction, dx, dy, fromCenter),
+      rect: applyResizeRect(
+        initial.rect,
+        direction,
+        dx,
+        dy,
+        fromCenter,
+        aspect
+      ),
     };
   }
   if (initial.kind === "transformed") {
@@ -435,7 +443,14 @@ export function applyResize(
     // for rotated / sheared selections.
     return {
       kind: "transformed",
-      local: applyResizeRect(initial.local, direction, ldx, ldy, fromCenter),
+      local: applyResizeRect(
+        initial.local,
+        direction,
+        ldx,
+        ldy,
+        fromCenter,
+        aspect
+      ),
       matrix: m,
     };
   }
@@ -450,13 +465,19 @@ export function applyResize(
  * `fromCenter` (Alt), the resize is symmetric about the rect's center:
  * the dragged edge moves by the delta and the opposite edge mirrors it,
  * so the size delta doubles and the center stays put.
+ *
+ * With `aspect` (Shift), the resize is uniform: a corner takes the
+ * max-magnitude axis factor; a side edge drives the perpendicular axis by
+ * the same factor about the perpendicular center. This mirrors the host's
+ * core `compute_factors`, so the dashed preview tracks what gets written.
  */
 function applyResizeRect(
   initial: Rect,
   direction: ResizeDirection,
   dx: number,
   dy: number,
-  fromCenter = false
+  fromCenter = false,
+  aspect = false
 ): Rect {
   let { x, y, width, height } = initial;
 
@@ -486,5 +507,49 @@ function applyResizeRect(
     height -= k * dy;
   }
 
-  return { x, y, width, height };
+  if (!aspect) return { x, y, width, height };
+
+  // Aspect-lock (Shift). Take the signed per-axis factors the free math
+  // produced, lock them to one magnitude, then rebuild the box about the
+  // anchor the free math pins — the opposite edge/corner, or the bbox
+  // center under `fromCenter`. A side edge has only one driven axis, so the
+  // perpendicular follows it about the perpendicular center.
+  const affectsX = hasE || hasW;
+  const affectsY = hasN || hasS;
+  // Per-axis anchor: bbox center under Alt or on the free (perpendicular)
+  // axis; else the pinned far edge — `pinLo` (moving the high edge) pins the
+  // low coordinate, otherwise the high one.
+  const anchorAxis = (
+    affected: boolean,
+    lo: number,
+    size: number,
+    pinLo: boolean
+  ) => (fromCenter || !affected ? lo + size / 2 : pinLo ? lo : lo + size);
+  const ax = anchorAxis(affectsX, initial.x, initial.width, hasE);
+  const ay = anchorAxis(affectsY, initial.y, initial.height, hasS);
+
+  const sxRaw = initial.width !== 0 ? width / initial.width : 1;
+  const syRaw = initial.height !== 0 ? height / initial.height : 1;
+  let sx: number;
+  let sy: number;
+  if (affectsX && affectsY) {
+    const mag = Math.max(Math.abs(sxRaw), Math.abs(syRaw));
+    sx = sxRaw >= 0 ? mag : -mag;
+    sy = syRaw >= 0 ? mag : -mag;
+  } else if (affectsX) {
+    sx = sxRaw;
+    sy = sxRaw;
+  } else {
+    sx = syRaw;
+    sy = syRaw;
+  }
+
+  // Clamp to the same positive floor as core `compute_factors`. When the drag
+  // crosses the opposite edge the core commits a degenerate-thin box pinned at
+  // the anchor (not a mirror), so the aspect preview must too — otherwise the
+  // dashed box flips while the committed geometry collapses.
+  sx = Math.max(0.001, sx);
+  sy = Math.max(0.001, sy);
+
+  return cmath.rect.scale(initial, [ax, ay], [sx, sy]);
 }

packages/grida-canvas-hud/event/state.ts

@@ -483,10 +483,12 @@ export class SurfaceState {
         return this.onPointerUp(event.x, event.y, event.button, deps);
       case "modifiers": {
         this.modifiers = event.mods;
-        // A mid-drag Alt toggle (no pointer move) switches the resize anchor
-        // opposite<->center, so the dashed preview must refresh now —
-        // otherwise it stays stale until the next move. `current_shape` (the
-        // intent dims) is anchor-independent, so only `preview_shape` changes.
+        // A mid-drag Alt toggle (anchor opposite<->center) or Shift toggle
+        // (aspect-lock on/off) — both with no pointer move — change the
+        // dashed preview, so it must refresh now or it stays stale until the
+        // next move. `current_shape` (the intent dims) is modifier-independent
+        // (the host applies anchor/aspect itself), so only `preview_shape`
+        // changes.
         if (this.gesture.kind === "resize") {
           const g = this.gesture;
           const dx = g.last_doc[0] - g.anchor_doc[0];
@@ -509,19 +511,23 @@ export class SurfaceState {
     }
   }
 
-  /** The dashed-preview shape for a resize: center-symmetric under Alt,
-   *  else the opposite-anchored `opposite` shape (which the intent carries).
-   *  One rule, shared by the pointer-move handler and the modifier-toggle
-   *  refresh so the preview can't go stale on a mid-drag Alt flip. */
+  /** The dashed-preview shape for a resize: aspect-locked under Shift
+   *  and/or center-symmetric under Alt (the two compose), else the
+   *  opposite-anchored `opposite` shape (which the intent carries). One
+   *  rule, shared by the pointer-move handler and the modifier-toggle
+   *  refresh so the preview can't go stale on a mid-drag Shift/Alt flip. */
   private resizePreviewShape(
     g: Extract<SurfaceGesture, { kind: "resize" }>,
     dx: number,
     dy: number,
     opposite: SelectionShape
   ): SelectionShape {
-    return this.modifiers.alt
-      ? applyResize(g.initial_shape, g.direction, dx, dy, { fromCenter: true })
-      : opposite;
+    const { alt, shift } = this.modifiers;
+    if (!alt && !shift) return opposite;
+    return applyResize(g.initial_shape, g.direction, dx, dy, {
+      fromCenter: alt,
+      aspect: shift,
+    });
   }
 
   // ── Pointer move ─────────────────────────────────────────────────────────