@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/spacing-handles.ts

@@ -0,0 +1,166 @@
+/**
+ * @file       spacing-handles.ts — Stage J (feature-element-editing-robustness)
+ * @purpose    Pure geometry + value math for the on-canvas padding + gap drag
+ *             overlay. Framework-free (unit-testable without a DOM), mirroring
+ *             `equal-spacing-detector.ts`'s screen-coordinate midpoint shape so
+ *             the two spacing affordances (read-only equal-spacing dots vs this
+ *             draggable padding/gap overlay) share a visual vocabulary.
+ *
+ *             Padding: 4 edge lines inset from the element's screen border-box by
+ *             its resolved padding × zoom, one per side, each carrying a drag axis
+ *             (top/bottom = vertical, left/right = horizontal).
+ *             Gap: midpoints between consecutive DIRECT children along the flex
+ *             main axis (row → x, column → y) — flex-only in v1; CSS-Grid gap
+ *             editing is deferred to `feature-grid-track-editor.md` (Stage M3).
+ */
+
+export interface ScreenRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export type PaddingSide = 'top' | 'right' | 'bottom' | 'left';
+
+export interface PaddingLine {
+  side: PaddingSide;
+  /** Drag axis: top/bottom edges scrub vertically, left/right horizontally. */
+  axis: 'x' | 'y';
+  /** Line midpoint in screen coords (the handle's paint position). */
+  x: number;
+  y: number;
+  /** Line length in screen px (spans the box's inner width/height on that side). */
+  length: number;
+}
+
+/**
+ * Compute the 4 padding-edge handle positions from the element's screen
+ * border-box rect + its resolved padding (WORLD px, pre-zoom) + the render
+ * zoom. A handle sits at the midpoint of its edge, INSET from the border by
+ * `padding × zoom` — i.e. right on the padding/content boundary, so dragging it
+ * outward (toward the border) shrinks padding, inward (toward center) grows it.
+ */
+export function computePaddingLines(
+  rect: ScreenRect,
+  padding: { top: number; right: number; bottom: number; left: number },
+  zoom: number
+): PaddingLine[] {
+  const z = zoom > 0 ? zoom : 1;
+  const pt = padding.top * z;
+  const pr = padding.right * z;
+  const pb = padding.bottom * z;
+  const pl = padding.left * z;
+  return [
+    { side: 'top', axis: 'y', x: rect.x + rect.w / 2, y: rect.y + pt, length: rect.w - pl - pr },
+    {
+      side: 'right',
+      axis: 'x',
+      x: rect.x + rect.w - pr,
+      y: rect.y + rect.h / 2,
+      length: rect.h - pt - pb,
+    },
+    {
+      side: 'bottom',
+      axis: 'y',
+      x: rect.x + rect.w / 2,
+      y: rect.y + rect.h - pb,
+      length: rect.w - pl - pr,
+    },
+    { side: 'left', axis: 'x', x: rect.x + pl, y: rect.y + rect.h / 2, length: rect.h - pt - pb },
+  ];
+}
+
+/**
+ * New padding value (WORLD px, clamped ≥ 0) for a drag on `side`, given the
+ * screen-space cursor delta and the render zoom. Top/bottom respond to
+ * vertical delta, left/right to horizontal — and the SIGN flips for
+ * bottom/right (dragging toward the element's center — up for bottom, left for
+ * right — GROWS that side's padding, mirroring how top/left already grow when
+ * dragged down/right).
+ */
+export function computePaddingDrag(
+  side: PaddingSide,
+  startValue: number,
+  dxScreen: number,
+  dyScreen: number,
+  zoom: number
+): number {
+  const z = zoom > 0 ? zoom : 1;
+  const d = side === 'top' || side === 'bottom' ? dyScreen / z : dxScreen / z;
+  const signed = side === 'bottom' || side === 'right' ? -d : d;
+  return Math.max(0, round2(startValue + signed));
+}
+
+export type FlexAxis = 'x' | 'y';
+
+/** Row/row-reverse → x (horizontal main axis); column/column-reverse → y. */
+export function flexMainAxis(flexDirection: string | null | undefined): FlexAxis {
+  const dir = (flexDirection || 'row').trim();
+  return dir.startsWith('column') ? 'y' : 'x';
+}
+
+/**
+ * Midpoints between consecutive DIRECT children's screen rects, along `axis`.
+ * Mirrors `detectEqualSpacing`'s midpoint shape but needs no equal-spacing
+ * DETECTION (there's exactly one `gap` value to visualize, not several to
+ * confirm) — just the geometric midpoint of each adjacent pair's facing edges.
+ * Fewer than 2 children → no gaps to show.
+ */
+export function computeGapMidpoints(
+  childRects: ScreenRect[],
+  axis: FlexAxis
+): Array<{ x: number; y: number }> {
+  if (childRects.length < 2) return [];
+  const sorted = [...childRects].sort((a, b) => (axis === 'x' ? a.x - b.x : a.y - b.y));
+  const out: Array<{ x: number; y: number }> = [];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i] as ScreenRect;
+    const b = sorted[i + 1] as ScreenRect;
+    if (axis === 'x') {
+      out.push({ x: (a.x + a.w + b.x) / 2, y: a.y + a.h / 2 });
+    } else {
+      out.push({ x: a.x + a.w / 2, y: (a.y + a.h + b.y) / 2 });
+    }
+  }
+  return out;
+}
+
+/** New `gap` value (WORLD px, clamped ≥ 0) for a drag along `axis`. Gap is a
+ *  single shared CSS value, so every handle drags the SAME number 1:1 with the
+ *  cursor (no doubling/halving — dragging a handle N screen px outward should
+ *  feel like N world px of extra breathing room). */
+export function computeGapDrag(
+  axis: FlexAxis,
+  startValue: number,
+  dxScreen: number,
+  dyScreen: number,
+  zoom: number
+): number {
+  const z = zoom > 0 ? zoom : 1;
+  const d = axis === 'x' ? dxScreen / z : dyScreen / z;
+  return Math.max(0, round2(startValue + d));
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+/**
+ * Which padding sides a drag on `side` touches, given the held modifiers —
+ * matches the CSS-panel box-model widget's OWN scrub grammar exactly (`side()`
+ * in `client/app.jsx`, `title="drag to scrub · alt = symmetric · alt+shift =
+ * all sides"`): plain drag = just this side; Alt = the symmetric axis PAIR
+ * (top+bottom, or left+right); Alt+Shift = all four. Every touched side is set
+ * to the SAME value (not each grown by its own delta) — same semantics as the
+ * panel's `sidesFor`/`last` write.
+ */
+export function paddingSideSet(
+  side: PaddingSide,
+  altKey: boolean,
+  shiftKey: boolean
+): PaddingSide[] {
+  if (altKey && shiftKey) return ['top', 'right', 'bottom', 'left'];
+  if (altKey) return side === 'top' || side === 'bottom' ? ['top', 'bottom'] : ['left', 'right'];
+  return [side];
+}