reladraw 0.17.1 → 0.19.0

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export * from './grammar.js';
 export * from './measure.js';
 export * from './model.js';
 export { parse } from './parser.js';
+export { format } from './format.js';
+export { DEFAULT_FORMAT, readFormatSettings, SETTINGS, SETTINGS_FILE, settingsFileText, type FormatSettings, } from './format-settings.js';
 export { resolve, type ResolveOptions } from './resolve.js';
 export { render, type RenderOptions } from './render.js';
 export { DARK_THEME, DEFAULT_THEME, THEMES, THEME_NAMES, type Theme } from './themes.js';

package/dist/index.js

@@ -6,6 +6,8 @@ export * from './grammar.js';
 export * from './measure.js';
 export * from './model.js';
 export { parse } from './parser.js';
+export { format } from './format.js';
+export { DEFAULT_FORMAT, readFormatSettings, SETTINGS, SETTINGS_FILE, settingsFileText, } from './format-settings.js';
 export { resolve } from './resolve.js';
 export { render } from './render.js';
 export { DARK_THEME, DEFAULT_THEME, THEMES, THEME_NAMES } from './themes.js';

package/dist/lexer.d.ts

@@ -11,6 +11,14 @@ export interface Token {
      * about the word can quote what the author typed.
      */
     joined?: string;
+    /**
+     * Where the token was written: from `start` up to `end` in the line given to
+     * `tokenizeLine`, quotes included. The formatter copies each token back out
+     * of its line by these, so nothing it writes is respelled. Absent on a token
+     * made up by the parser rather than read from a line.
+     */
+    start?: number;
+    end?: number;
 }
 /**
  * A `"""` string still open at the end of the text given. `parse` catches this

package/dist/lexer.js

@@ -48,13 +48,13 @@ export function tokenizeLine(line, lineNumber, depth = 0) {
             break;
         if (ch === '(') {
             depth += 1;
-            tokens.push({ text: '(', quoted: false });
+            tokens.push({ text: '(', quoted: false, start: i, end: i + 1 });
             i += 1;
             continue;
         }
         if (ch === ')' && depth > 0) {
             depth -= 1;
-            tokens.push({ text: ')', quoted: false });
+            tokens.push({ text: ')', quoted: false, start: i, end: i + 1 });
             i += 1;
             continue;
         }
@@ -65,11 +65,12 @@ export function tokenizeLine(line, lineNumber, depth = 0) {
             const end = line.indexOf('"""', i + 3);
             if (end === -1)
                 throw new OpenString('this """ string is never closed — end it with """', lineNumber);
-            tokens.push({ text: line.slice(i + 3, end), quoted: true, triple: true });
+            tokens.push({ text: line.slice(i + 3, end), quoted: true, triple: true, start: i, end: end + 3 });
             i = end + 3;
             continue;
         }
         if (ch === '"') {
+            const start = i;
             let text = '';
             i += 1;
             let closed = false;
@@ -96,7 +97,7 @@ export function tokenizeLine(line, lineNumber, depth = 0) {
             }
             if (!closed)
                 throw new SourceError('unterminated string', lineNumber);
-            tokens.push({ text, quoted: true });
+            tokens.push({ text, quoted: true, start, end: i });
             continue;
         }
         const start = i;
@@ -111,6 +112,11 @@ export function tokenizeLine(line, lineNumber, depth = 0) {
                 break;
             text += c;
             i += 1;
+            // A comma ends a word, so `rounded,path: square` reads as
+            // `rounded, path: square`. Not inside a word's own bracket, which keeps
+            // `rgb(20,20,20)` whole.
+            if (c === ',' && !text.includes('('))
+                break;
         }
         // `gap:tight` is `gap: tight` with no space, since how much whitespace there
         // is never matters. A word straight after a key is its value and is left
@@ -120,11 +126,18 @@ export function tokenizeLine(line, lineNumber, depth = 0) {
         const previous = tokens[tokens.length - 1];
         const joined = previous && isAttrKey(previous) ? null : JOINED_KEY.exec(text);
         if (joined) {
-            tokens.push({ text: joined[1], quoted: false, joined: text });
+            tokens.push({ text: joined[1], quoted: false, joined: text, start, end: start + joined[1].length });
             i = start + joined[1].length;
             continue;
         }
-        tokens.push({ text, quoted: false });
+        // A comma written apart from its word, `start , above`, is the comma of
+        // `start, above`. A bracket or a quoted text keeps its comma separate, so
+        // neither is changed by what follows it.
+        if (text === ',' && previous && !previous.quoted && !isAttrKey(previous) && !/^[()]$/.test(previous.text) && !previous.text.endsWith(',')) {
+            previous.text += ',';
+            continue;
+        }
+        tokens.push({ text, quoted: false, start, end: i });
     }
     return tokens;
 }

package/dist/lines.d.ts

@@ -11,6 +11,13 @@ export interface Face {
     height: number;
     /** A circle is drawn in this square, so a line meets the circle. */
     round: boolean;
+    /**
+     * Any other outline but a rectangle's, as a polygon on the page, with the
+     * shape's middle: a line meets the polygon, and the lines from the middle
+     * to the box's corners cut it into its four sides.
+     */
+    outline?: Point[];
+    middle?: Point;
 }
 export type Side = 'top' | 'bottom' | 'left' | 'right';
 /** One piece of a drawn line, from where the last one ended: straight, or a cubic. */
@@ -69,6 +76,7 @@ export declare function planSides(layout: Layout): {
 export declare function faceOfNode(node: LayoutNode): Face;
 /** The point a share of the way along a polyline, bends included, or its start or end. */
 export declare function alongLength(trace: Point[], at: number | 'start' | 'end'): Point;
+/** A face's middle: its box's, or a shape's own, which is a triangle's a third of the way from its base. */
 export declare function centerOf(face: Face): Point;
 /** The points with repeats and points in line with both neighbors dropped. */
 export declare function tidyCorners(points: Point[]): Point[];

package/dist/lines.js

@@ -16,6 +16,7 @@ import { GAPS } from './constants.js';
 import { EDGE_ORDER_KEYS, PART_SIDES, WAYS, isPosition } from './ast.js';
 import { SourceError } from './errors.js';
 import { gapPixels } from './place.js';
+import { isBoxy, isRound, lineCrossings, middleOf, rayExit, shapeOf, sideOfPoint, sideStretch, towardOutline } from './outline.js';
 /**
  * How far apart copies of one line run, like lanes on a road (6.5). A fixed
  * step, so adding a copy widens the set by one lane and moves no other lane.
@@ -464,6 +465,9 @@ function meetOutline(face, at, way) {
         if (disc >= 0)
             hits.push(-b - Math.sqrt(disc), -b + Math.sqrt(disc));
     }
+    else if (face.outline) {
+        hits.push(...lineCrossings(face.outline, at, way));
+    }
     else {
         const within = (value, low, size) => value >= low - 0.5 && value <= low + size + 0.5;
         for (const x of [face.x, face.x + face.width]) {
@@ -497,6 +501,10 @@ function leaving(face, from, way) {
         const t = -b + Math.sqrt(Math.max(0, b * b - (fx * fx + fy * fy - r * r)));
         return { x: from.x + way.x * t, y: from.y + way.y * t };
     }
+    if (face.outline) {
+        const t = rayExit(face.outline, from, way) ?? 0;
+        return { x: from.x + way.x * t, y: from.y + way.y * t };
+    }
     const tx = way.x > 1e-9 ? (face.x + face.width - from.x) / way.x : way.x < -1e-9 ? (face.x - from.x) / way.x : Infinity;
     const ty = way.y > 1e-9 ? (face.y + face.height - from.y) / way.y : way.y < -1e-9 ? (face.y - from.y) / way.y : Infinity;
     const t = Math.max(0, Math.min(tx, ty));
@@ -576,13 +584,20 @@ const WAY_VECTOR = {
 const MET_SIDE = { down: 'top', up: 'bottom', left: 'right', right: 'left' };
 /** The drawn rectangle of a node. */
 export function faceOfNode(node) {
-    return {
+    const face = {
         x: node.x,
         y: node.y,
         width: node.width,
         height: node.height,
-        round: node.body.kind === 'shape' && node.body.outline === 'circle',
+        round: node.body.kind === 'shape' && isRound(node.body.outline, node.width, node.height),
     };
+    if (node.body.kind === 'shape' && !isBoxy(node.body.outline) && !face.round) {
+        const { outline, look } = node.body;
+        face.outline = shapeOf(outline, look, node.width, node.height).polygon.map((p) => ({ x: node.x + p.x, y: node.y + p.y }));
+        const middle = middleOf(outline, look, node.width, node.height);
+        face.middle = { x: node.x + middle.x, y: node.y + middle.y };
+    }
+    return face;
 }
 function endOf(edge, which) {
     const node = which === 'from' ? edge.from : edge.to;
@@ -1027,8 +1042,9 @@ function distance(a, b) {
     return Math.hypot(b.x - a.x, b.y - a.y);
 }
 // --- points on a box ------------------------------------------------------------
+/** A face's middle: its box's, or a shape's own, which is a triangle's a third of the way from its base. */
 export function centerOf(face) {
-    return { x: face.x + face.width / 2, y: face.y + face.height / 2 };
+    return face.middle ?? { x: face.x + face.width / 2, y: face.y + face.height / 2 };
 }
 /** The sides a position sits on: `bottom-right` is on the bottom and the right, `top-center` on the top only. */
 function cornerSides(position) {
@@ -1046,9 +1062,12 @@ function positionPoint(face, position) {
         x: horizontal === 'left' ? face.x : horizontal === 'right' ? face.x + face.width : face.x + face.width / 2,
         y: vertical === 'top' ? face.y : vertical === 'bottom' ? face.y + face.height : face.y + face.height / 2,
     };
-    // A circle has no corners; its corner is where the diagonal meets it.
+    // A circle has no corners; its corner is where the diagonal meets it. On
+    // another shape every point is where the line from its middle meets it.
     if (face.round && vertical && horizontal)
         return outlineToward(face, point);
+    if (face.outline)
+        return outlineToward(face, point);
     return point;
 }
 /** A point a fraction of the way along a side, from its left or top end. */
@@ -1066,6 +1085,29 @@ function onSide(face, side, along) {
         const angle = { right: turn, bottom: Math.PI / 2 - turn, left: Math.PI - turn, top: -Math.PI / 2 + turn }[side];
         return { x: center.x + radius * Math.cos(angle), y: center.y + radius * Math.sin(angle) };
     }
+    if (face.outline) {
+        // The side is the stretch of outline between the lines from the middle to
+        // its two corners. `along` lands where the stretch passes it, so a line
+        // down from the middle of one box's bottom meets the next square on; one
+        // past the stretch's ends is placed on it in proportion instead.
+        const stretch = sideStretch(face.outline, centerOf(face), face, side);
+        const key = side === 'top' || side === 'bottom' ? 'x' : 'y';
+        const low = key === 'x' ? face.x : face.y;
+        const size = key === 'x' ? face.width : face.height;
+        const values = stretch.map((p) => p[key]);
+        const lo = Math.min(...values);
+        const hi = Math.max(...values);
+        const target = along >= lo && along <= hi ? along : lo + ((along - low) / size) * (hi - lo);
+        for (let i = 1; i < stretch.length; i++) {
+            const a = stretch[i - 1];
+            const b = stretch[i];
+            if ((a[key] - target) * (b[key] - target) <= 0 && a[key] !== b[key]) {
+                const f = (target - a[key]) / (b[key] - a[key]);
+                return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+            }
+        }
+        return Math.abs(stretch[0][key] - target) < Math.abs(stretch[stretch.length - 1][key] - target) ? stretch[0] : stretch[stretch.length - 1];
+    }
     switch (side) {
         case 'top':
             return { x: along, y: face.y };
@@ -1089,6 +1131,8 @@ function outlineToward(face, target) {
         const length = Math.hypot(dx, dy);
         return { x: center.x + (dx / length) * radius, y: center.y + (dy / length) * radius };
     }
+    if (face.outline)
+        return towardOutline(face.outline, center, target);
     const scale = Math.min(dx === 0 ? Infinity : face.width / 2 / Math.abs(dx), dy === 0 ? Infinity : face.height / 2 / Math.abs(dy));
     return { x: center.x + dx * scale, y: center.y + dy * scale };
 }
@@ -1106,6 +1150,8 @@ function headingAt(face, at) {
         const dy = at.y - center.y;
         return Math.abs(dx) >= Math.abs(dy) ? SIDE_NORMAL[dx >= 0 ? 'right' : 'left'] : SIDE_NORMAL[dy >= 0 ? 'bottom' : 'top'];
     }
+    if (face.outline)
+        return SIDE_NORMAL[sideOfPoint(centerOf(face), face, at)];
     distances.sort((a, b) => a[0] - b[0]);
     return SIDE_NORMAL[distances[0][1]];
 }

package/dist/outline.d.ts

@@ -0,0 +1,123 @@
+/**
+ * The geometry of every outline `shape:` names: where its edge runs, where its
+ * middle is, and how big it grows to hold its text.
+ *
+ * One place knows each shape, and the resolver, the line planner, the checks
+ * and the renderer all ask it, so they cannot disagree about where a diamond's
+ * edge is.
+ *
+ * A shape stretches to fill its box. What the box doesn't decide is at most one
+ * amount and one direction (a parallelogram's slant and which way it leans),
+ * and those are the settings in the shape's bracket. Amounts are fixed
+ * distances, not fractions of the box, as the document's fold always was.
+ *
+ * The rectangle-like outlines (`rectangle`, `document`, `flow-subprocess`) and
+ * a round `circle` keep the exact geometry they always had; every other
+ * outline is worked with as a polygon, its curves sampled finely enough that a
+ * line meeting one lands on the drawn curve to within a fraction of a pixel.
+ */
+/** A point, relative to whatever the caller says. */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** How each setting in a shape's bracket is read. */
+type SettingKind = 'distance' | 'flag' | readonly string[];
+/**
+ * The settings each shape takes in its bracket, by name. A shape not listed
+ * takes none. The first word of a direction is the default.
+ */
+export declare const SHAPE_SETTINGS: Readonly<Record<string, Readonly<Record<string, SettingKind>>>>;
+/** The settings a shape was given, read: distances in pixels, directions as words, flags as true. */
+export interface ShapeLook {
+    fold?: number;
+    slant?: number;
+    lean?: string;
+    point?: number;
+    taper?: number;
+    narrow?: string;
+    aim?: string;
+    cap?: number;
+    lying?: boolean;
+}
+/**
+ * Read a shape's bracket, refusing a setting the shape doesn't take and a
+ * value that isn't one. `written` holds the dotted keys as stored, `shape.slant`.
+ */
+export declare function readShapeLook(outline: string, written: Record<string, string>, subject: string, line: number): ShapeLook;
+/** How far inside each side a subprocess's bars stand. */
+export declare const SUBPROCESS_INSET: number;
+/** Whether an outline is a rectangle as far as placement and lines go. */
+export declare function isBoxy(outline: string): boolean;
+/** Whether an outline is drawn round in a square box, so the exact circle code applies. */
+export declare function isRound(outline: string, width: number, height: number): boolean;
+/** One outline at one size: the polygon it is worked with, and the SVG it is drawn as. Points are relative to the box's top-left. */
+export interface Shape {
+    /** The outline as a closed polygon, for meeting lines and testing what is inside. */
+    polygon: Point[];
+    /** The path data, relative, drawn translated to the box. */
+    path: string;
+    /** Lines drawn inside the outline: a cylinder's near rim, a subprocess's bars. */
+    detail: string[];
+}
+/**
+ * An outline at a size. Rectangle-like outlines and the round circle are
+ * included so a caller can always ask, but the renderer draws those itself.
+ */
+export declare function shapeOf(outline: string, look: ShapeLook, w: number, h: number): Shape;
+/**
+ * A path written relative to a box's top-left, moved to (x, y). Only the
+ * absolute commands `shapeOf` writes are handled: M, L, H, V, Q, T, A and Z.
+ */
+export declare function placePath(d: string, x: number, y: number): string;
+/**
+ * The shape's own middle, where its text sits and its lines aim: the center of
+ * its area. On a symmetric shape that is the middle of its box; a triangle's is
+ * a third of the way from its base.
+ */
+export declare function middleOf(outline: string, look: ShapeLook, w: number, h: number): Point;
+/** Whether a point is inside a polygon, by crossings. */
+export declare function insideOutline(points: Point[], p: Point): boolean;
+/** Whether a point is more than `distance` from every edge of a polygon. */
+export declare function clearOf(points: Point[], p: Point, distance: number): boolean;
+/**
+ * The size an outline takes to hold a block `tw` by `th` (the text with its
+ * padding) at its middle: a first guess that is exact for most shapes, then
+ * grown a step at a time until the block fits. A rectangle-like outline and
+ * the round circle are sized by the resolver, as they always were.
+ */
+export declare function sizeFor(outline: string, look: ShapeLook, tw: number, th: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Where the ray from `from` heading `way` first leaves a polygon, measured as
+ * the distance along the ray, or undefined if it never crosses it.
+ */
+export declare function rayExit(points: Point[], from: Point, way: Point): number | undefined;
+/** Every distance along the line through `from` heading `way`, either direction, at which it crosses a polygon. */
+export declare function lineCrossings(points: Point[], from: Point, way: Point): number[];
+/** Where the line from a polygon's middle toward `target` crosses its outline: the farthest crossing, so a concave outline is met at its rim. */
+export declare function towardOutline(points: Point[], middle: Point, target: Point): Point;
+/**
+ * The stretch of the outline that is one side: from where the line from the
+ * middle to one corner of the box meets it, round to where the line to the
+ * next corner does. Returned in reading order, left to right along a top or
+ * bottom side and top to bottom along a left or right one.
+ */
+export declare function sideStretch(points: Point[], middle: Point, box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, side: 'top' | 'bottom' | 'left' | 'right'): Point[];
+/** The point a fraction of the way along a polyline, by length. */
+export declare function alongPolyline(points: Point[], fraction: number): Point;
+/** Which side of the box a point on the outline is on, by the corner rays from the middle. */
+export declare function sideOfPoint(middle: Point, box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, at: Point): 'top' | 'bottom' | 'left' | 'right';
+export {};