reladraw 0.21.0 → 0.22.1

package/dist/viewer.js

@@ -0,0 +1,185 @@
+/**
+ * The pan and zoom shared by the page `render --page` writes and the
+ * playground, so the two look at a diagram the same way: − and +, Fit, 100%,
+ * the zoom always shown and saying "Fit" while fitted, the wheel, a pinch, a
+ * drag, a double-click, and the keys + - 0 1.
+ *
+ * It is browser code kept as a string, since it runs in a page, not here: the
+ * page writes it into its script, and the playground's build writes it into
+ * its own. Calling `panZoom(view, stage, label, buttons)` returns the controls
+ * the page and the playground need beyond it.
+ *
+ * `view` clips and takes the pointer; `stage` holds the SVG and is moved
+ * inside it; `label` shows the zoom; `buttons` holds the elements for out, in,
+ * fit and 100%, any of which may be missing.
+ */
+export const PAN_ZOOM = String.raw `
+function panZoom(view, stage, label, buttons) {
+  var MIN = 0.05;
+  var MAX = 20;
+  var svg = null;
+  var natural = { w: 1, h: 1 };
+  // The drawing is resized rather than scaled with a transform, so the
+  // browser draws it afresh at every size and it stays sharp.
+  var at = { x: 0, y: 0, s: 1 };
+  // Until the reader pans or zooms, a change of size redraws the view the way
+  // it was asked for: as it opened, or fitted.
+  var fitted = 'open';
+
+  function apply() {
+    if (!svg) {
+      label.textContent = '';
+      return;
+    }
+    svg.setAttribute('width', natural.w * at.s);
+    svg.setAttribute('height', natural.h * at.s);
+    stage.style.transform = 'translate(' + at.x + 'px,' + at.y + 'px)';
+    // The zoom always shows. Fitted, it says so too, since 62% alone doesn't
+    // say whether that is the whole diagram or a zoom that happens to be 62%.
+    // A large diagram opens fitted; a small one opens at 100%, not fitted.
+    var isFit = fitted === 'fit' || (fitted === 'open' && at.s < 1);
+    label.innerHTML = (isFit ? '<span class="fitted">Fit</span> · ' : '') + Math.round(at.s * 100) + '%';
+  }
+
+  function size() {
+    return { w: view.clientWidth, h: view.clientHeight };
+  }
+
+  function center(s) {
+    var room = size();
+    at = { s: s, x: (room.w - natural.w * s) / 2, y: (room.h - natural.h * s) / 2 };
+    apply();
+  }
+
+  function fitScale() {
+    var room = size();
+    return Math.max(MIN, Math.min((room.w - 32) / natural.w, (room.h - 32) / natural.h));
+  }
+
+  function fit() {
+    fitted = 'fit';
+    center(fitScale());
+  }
+
+  function actual() {
+    fitted = false;
+    center(1);
+  }
+
+  // A diagram smaller than the view opens at its own size; a larger one
+  // opens fitted.
+  function open() {
+    fitted = 'open';
+    center(Math.min(1, fitScale()));
+  }
+
+  function refit() {
+    if (!svg) return;
+    if (fitted === 'fit') fit();
+    else if (fitted === 'open') open();
+    else apply();
+  }
+
+  // Zoom about a point of the view, which stays where it is on screen.
+  function zoomAt(factor, px, py) {
+    if (!svg) return;
+    var s = Math.min(MAX, Math.max(MIN, at.s * factor));
+    var k = s / at.s;
+    at = { s: s, x: px - (px - at.x) * k, y: py - (py - at.y) * k };
+    fitted = false;
+    apply();
+  }
+
+  function zoomMiddle(factor) {
+    var room = size();
+    zoomAt(factor, room.w / 2, room.h / 2);
+  }
+
+  function pan(dx, dy) {
+    at.x += dx;
+    at.y += dy;
+    fitted = false;
+    apply();
+  }
+
+  // A new drawing in the stage. The view stays as the reader left it: fitted
+  // stays fitted to the new drawing, and a zoom keeps its scale and place.
+  function show() {
+    svg = stage.querySelector('svg');
+    if (!svg) return apply();
+    var box = svg.viewBox.baseVal;
+    natural = box && box.width ? { w: box.width, h: box.height } : { w: parseFloat(svg.getAttribute('width')) || 1, h: parseFloat(svg.getAttribute('height')) || 1 };
+    refit();
+  }
+
+  if (buttons.out) buttons.out.onclick = function () { zoomMiddle(0.8); };
+  if (buttons.in) buttons.in.onclick = function () { zoomMiddle(1.25); };
+  if (buttons.fit) buttons.fit.onclick = fit;
+  if (buttons.actual) buttons.actual.onclick = actual;
+
+  view.addEventListener('wheel', function (event) {
+    event.preventDefault();
+    var rect = view.getBoundingClientRect();
+    // A pinch on a trackpad arrives as a wheel with ctrl held, in small steps.
+    var step = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+    zoomAt(Math.exp(-step * (event.ctrlKey ? 0.01 : 0.0015)), event.clientX - rect.left, event.clientY - rect.top);
+  }, { passive: false });
+
+  // Dragging pans; two fingers pinch.
+  var pointers = new Map();
+  var pinch = null;
+  view.addEventListener('pointerdown', function (event) {
+    if (event.button !== 0) return;
+    if (event.target.closest('a')) return;
+    view.setPointerCapture(event.pointerId);
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.size === 2) {
+      var two = Array.from(pointers.values());
+      pinch = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+    }
+    view.classList.add('dragging');
+  });
+  view.addEventListener('pointermove', function (event) {
+    var last = pointers.get(event.pointerId);
+    if (!last) return;
+    var now = { x: event.clientX, y: event.clientY };
+    pointers.set(event.pointerId, now);
+    if (pointers.size === 2 && pinch) {
+      var two = Array.from(pointers.values());
+      var apart = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+      var rect = view.getBoundingClientRect();
+      zoomAt(apart / pinch, (two[0].x + two[1].x) / 2 - rect.left, (two[0].y + two[1].y) / 2 - rect.top);
+      pinch = apart;
+      return;
+    }
+    pan(now.x - last.x, now.y - last.y);
+  });
+  function release(event) {
+    pointers.delete(event.pointerId);
+    if (pointers.size < 2) pinch = null;
+    if (pointers.size === 0) view.classList.remove('dragging');
+  }
+  view.addEventListener('pointerup', release);
+  view.addEventListener('pointercancel', release);
+  view.addEventListener('dblclick', function (event) {
+    var rect = view.getBoundingClientRect();
+    zoomAt(event.shiftKey ? 0.5 : 2, event.clientX - rect.left, event.clientY - rect.top);
+  });
+
+  // The view's own size, not the window's: a dragged divider changes it too.
+  new ResizeObserver(refit).observe(view);
+
+  document.addEventListener('keydown', function (event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (event.target.closest && event.target.closest('input, textarea, select, [contenteditable]')) return;
+    if (event.key === '+' || event.key === '=') zoomMiddle(1.25);
+    else if (event.key === '-' || event.key === '_') zoomMiddle(0.8);
+    else if (event.key === '0') fit();
+    else if (event.key === '1') actual();
+    else return;
+    event.preventDefault();
+  });
+
+  return { show: show, open: open, fit: fit, pan: pan };
+}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
+    ".claude/skills",
     "dist",
     "NOTICE",
     "SYNTAX.md"

package/dist/constrain.d.ts

@@ -1,56 +0,0 @@
-import type { Placement } from './ast.js';
-/**
- * The tightest arrangement satisfying a set of relative distances.
- *
- * Every placement in the language turns into the same shape of fact: one thing sits
- * at least so far along an axis from another. Written as `pos[to] >= pos[from]
- * + weight`, a whole diagram is a system of those, and the arrangement the
- * author meant is the one where nothing is further apart than it has to be.
- *
- * That arrangement is unique and is found by longest paths, so no search
- * happens and no alternative is ever weighed. Distances come out of the
- * arithmetic; which side of what a thing sits on came from the author.
- */
-export interface Constraint {
-    from: number;
-    to: number;
-    weight: number;
-    /** The placement this came from, so a failure can be reported in the author's words. */
-    placement?: Placement;
-}
-/** An exact distance, which is two inequalities pointing opposite ways. */
-export declare function fix(from: number, to: number, distance: number, placement?: Placement): Constraint[];
-export interface Contradiction {
-    /** The placements that cannot all hold. Empty if the loop is entirely implicit. */
-    placements: Placement[];
-}
-/**
- * Solve, or report the placements that fight.
- *
- * Longest path from a virtual source joined to everything at zero, which is
- * Bellman-Ford with the comparison flipped. A distance that keeps growing after
- * one pass per node means the constraints run in a circle that demands ever
- * more room, and that circle is exactly the set of placements to quote back.
- */
-export declare function tightest(count: number, constraints: Constraint[]): {
-    positions: number[];
-} | {
-    contradiction: Contradiction;
-};
-/**
- * Which members can be driven apart from which, along one axis.
- *
- * A constraint says `pos[to] >= pos[from] + weight`, so it bounds `to` from
- * below and leaves it free to move further away. Follow those edges and the
- * question "may this one end up beyond that one?" becomes plain reachability:
- * if `j` is reachable from `i` and `i` is not reachable from `j`, then the file
- * lets the distance from `i` to `j` grow without limit and never lets it be
- * closed from the other side. Pushing `j` past `i` is then the one separation
- * the file allows, and no choice was made.
- *
- * Reachable both ways means the two are pinned at a fixed distance, so they
- * cannot be separated along this axis at all. Reachable neither way means the
- * file said nothing that orders them, which is the case the caller must refuse
- * rather than guess at.
- */
-export declare function reachability(count: number, constraints: Constraint[]): boolean[][];

package/dist/constrain.js

@@ -1,95 +0,0 @@
-/** An exact distance, which is two inequalities pointing opposite ways. */
-export function fix(from, to, distance, placement) {
-    return [
-        { from, to, weight: distance, ...(placement ? { placement } : {}) },
-        { from: to, to: from, weight: -distance, ...(placement ? { placement } : {}) },
-    ];
-}
-/**
- * Solve, or report the placements that fight.
- *
- * Longest path from a virtual source joined to everything at zero, which is
- * Bellman-Ford with the comparison flipped. A distance that keeps growing after
- * one pass per node means the constraints run in a circle that demands ever
- * more room, and that circle is exactly the set of placements to quote back.
- */
-export function tightest(count, constraints) {
-    const positions = new Array(count).fill(0);
-    const cameFrom = new Array(count).fill(undefined);
-    for (let pass = 0; pass < count; pass += 1) {
-        let moved = false;
-        for (const constraint of constraints) {
-            const candidate = positions[constraint.from] + constraint.weight;
-            if (candidate > positions[constraint.to] + 1e-9) {
-                positions[constraint.to] = candidate;
-                cameFrom[constraint.to] = constraint;
-                moved = true;
-            }
-        }
-        if (!moved)
-            return { positions };
-    }
-    // Still moving after a full pass per node, so some loop demands more room
-    // every time round it. Walk backwards to find it.
-    for (const constraint of constraints) {
-        if (positions[constraint.from] + constraint.weight > positions[constraint.to] + 1e-9) {
-            return { contradiction: { placements: loopFrom(constraint.to, cameFrom, count) } };
-        }
-    }
-    return { contradiction: { placements: [] } };
-}
-/**
- * Which members can be driven apart from which, along one axis.
- *
- * A constraint says `pos[to] >= pos[from] + weight`, so it bounds `to` from
- * below and leaves it free to move further away. Follow those edges and the
- * question "may this one end up beyond that one?" becomes plain reachability:
- * if `j` is reachable from `i` and `i` is not reachable from `j`, then the file
- * lets the distance from `i` to `j` grow without limit and never lets it be
- * closed from the other side. Pushing `j` past `i` is then the one separation
- * the file allows, and no choice was made.
- *
- * Reachable both ways means the two are pinned at a fixed distance, so they
- * cannot be separated along this axis at all. Reachable neither way means the
- * file said nothing that orders them, which is the case the caller must refuse
- * rather than guess at.
- */
-export function reachability(count, constraints) {
-    const reach = Array.from({ length: count }, () => new Array(count).fill(false));
-    for (const constraint of constraints)
-        reach[constraint.from][constraint.to] = true;
-    for (let via = 0; via < count; via += 1) {
-        for (let from = 0; from < count; from += 1) {
-            if (!reach[from][via])
-                continue;
-            for (let to = 0; to < count; to += 1) {
-                if (reach[via][to])
-                    reach[from][to] = true;
-            }
-        }
-    }
-    return reach;
-}
-/** The placements on the loop reached by following each position back to what set it. */
-function loopFrom(start, cameFrom, count) {
-    let at = start;
-    for (let step = 0; step < count; step += 1) {
-        const previous = cameFrom[at];
-        if (previous === undefined)
-            break;
-        at = previous.from;
-    }
-    const placements = [];
-    const seen = new Set();
-    let cursor = at;
-    while (!seen.has(cursor)) {
-        seen.add(cursor);
-        const previous = cameFrom[cursor];
-        if (previous === undefined)
-            break;
-        if (previous.placement)
-            placements.push(previous.placement);
-        cursor = previous.from;
-    }
-    return placements.reverse();
-}

package/dist/search.d.ts

@@ -1,104 +0,0 @@
-/**
- * Finding a line's way through the open space between boxes.
- *
- * Every box is a wall. A line may turn only where two tracks cross, and the
- * tracks are few: a line a little way out from each side of each wall, one
- * down the middle of each gap between walls, and the lines through the two
- * ends. That is the whole of the open space a right-angled line ever needs,
- * reduced to a grid of a few hundred points for a diagram of ordinary size.
- *
- * The line leaves its start heading straight out and arrives at its end heading
- * straight in, with a straight stretch at each end at least `stub` long, so an
- * arrowhead always lands on a straight piece. Between those two stretches it
- * takes the cheapest way through the grid, where cost is length plus a charge
- * for every turn and for every line already placed that it crosses. On a
- * right-angled grid many ways tie on length — a staircase is exactly as long as
- * one bend — and the turn charge breaks those ties toward the fewest bends,
- * which is the line a person would draw. What still ties after that goes over
- * the top rather than under, and round the right rather than the left.
- *
- * A way through a box is not a losing option here. It is not a way at all.
- */
-export interface SearchPoint {
-    x: number;
-    y: number;
-}
-/** A box the line may not enter, as its extent. Touching its border is allowed. */
-export interface SearchWall {
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
-}
-/** One end of the line: a point on a box's side, and the unit direction out of it. */
-export interface SearchEnd {
-    x: number;
-    y: number;
-    dx: number;
-    dy: number;
-}
-export interface SearchOptions {
-    /** How far the line runs straight out of each end before it may turn. */
-    stub: number;
-    /** How far outside a wall a track runs beside it, where there is room. */
-    clear: number;
-    /** What a turn costs, in the same units as length. */
-    turn: number;
-    /**
-     * Walls the stretches at the two ends may pass through: the line's own boxes,
-     * which it has to cross the margin of to leave, and any box holding an end.
-     */
-    ownStart: SearchWall[];
-    ownEnd: SearchWall[];
-    /**
-     * Lines already placed. A line may cross one but not run along it within
-     * `lane` of it; tracks are added a lane either side of each, so a later line
-     * sharing a stretch takes the next lane out.
-     */
-    taken: SearchPoint[][];
-    lane: number;
-    /**
-     * For each line in `taken`, for each of its stretches, half the depth across
-     * it of a text riding there, and 0 where none does. A line running beside a
-     * stretch carrying a text keeps clear of the text, not just of the line.
-     */
-    takenHalves?: number[][];
-    /**
-     * A gap the line must pass through: somewhere it crosses the line at `at`
-     * on the `run` axis, travelling along `run`, at a level between `lo` and `hi`.
-     */
-    gate?: SearchGate;
-    /**
-     * Half the depth of this line's own text, which rides in the gate: inside it,
-     * the line keeps that much further from the lines beside it.
-     */
-    ownHalf?: number;
-    /**
-     * How far the line may go at all: the diagram with room round it. A wall
-     * reaching past this — a clause's fence, which runs to the edge of the page —
-     * cannot be gone round at its far end.
-     */
-    bounds?: SearchWall;
-    /**
-     * A cost the line is no use at unless it comes in under: the cheapest way
-     * already found between another pair of sides. The search gives up as soon
-     * as it cannot.
-     */
-    limit?: number;
-}
-/** A gap a line must pass through. See `SearchOptions.gate`. */
-export interface SearchGate {
-    run: 'x' | 'y';
-    at: number;
-    lo: number;
-    hi: number;
-}
-export interface SearchResult {
-    points: SearchPoint[];
-    cost: number;
-}
-/**
- * The cheapest right-angled line from `start` to `end` that enters no wall, or
- * undefined when there is none.
- */
-export declare function searchRoute(start: SearchEnd, end: SearchEnd, walls: SearchWall[], options: SearchOptions): SearchResult | undefined;