reladraw 0.5.0 → 0.7.0

package/dist/resolve.js

@@ -1,5 +1,5 @@
-import { ALL_ATTR_KEYS, ATTR_KEYS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, describePlacement, nameTarget, } from './ast.js';
-import { ARROW_LENGTH, CHILD_GAP, DECK_STEP, DEFAULT_FONT_SIZE, DEFAULT_MARGIN, GAPS, HEADER_GAP, ICON_GAP, ICON_LINES, TEXT_CLEARANCE, PAD, SEPARATION_GAP, fontSizeFor, leafTop, textExtent, textStyleFor, widestLine, } from './constants.js';
+import { ALL_ATTR_KEYS, ATTR_KEYS, PART_SIDES, COLOR_KEYS, COLOR_PARTS, CONTENT_ALIGNMENTS, CONTENT_WIDTHS, LINE_VALUES, describePlacement, nameTarget, } from './ast.js';
+import { CHILD_GAP, DECK_STEP, DEFAULT_FONT_SIZE, DEFAULT_MARGIN, GAPS, HEADER_GAP, ICON_GAP, ICON_LINES, TEXT_CLEARANCE, PAD, SEPARATION_GAP, THICKNESS, arrowLength, fontSizeFor, leafTop, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { fix, reachability, tightest } from './constrain.js';
 import { SourceError } from './errors.js';
 import { bodyFor } from './icons.js';
@@ -457,6 +457,25 @@ function buildEdges(statements, byName, styles, defaults) {
             }),
             ...(stmt.between.axis !== undefined ? { axis: stmt.between.axis } : {}),
         };
+        const passes = stmt.passes?.map((placement) => {
+            const written = describePlacement(placement);
+            return {
+                direction: placement.direction,
+                written,
+                nodes: placement.targets.map(({ name, part }) => {
+                    if (part !== undefined) {
+                        // The line passes a box, and a side or a point has no side of its
+                        // own to be passed on. Refused by name rather than dropped.
+                        throw new SourceError(`edge passes "${written}", and a line passes a whole box — drop "${part}"`, stmt.line);
+                    }
+                    const node = byName.get(name);
+                    if (!node) {
+                        throw new SourceError(`edge passes "${written}", and "${name}" does not exist`, stmt.line);
+                    }
+                    return node;
+                }),
+            };
+        });
         const appearance = { ...defaults.get('edge'), ...appearanceOf(stmt.attrs, styles, stmt.line) };
         const what = `${stmt.from} -> ${stmt.to}`;
         checkAttrs('edge', what, stmt.attrs, stmt.line);
@@ -479,6 +498,8 @@ function buildEdges(statements, byName, styles, defaults) {
                 ? { text: stmt.text, lines: linesFor(stmt.text, textAttrs, `edge ${what}`, stmt.line) }
                 : {}),
             ...(between ? { between } : {}),
+            ...(passes ? { passes } : {}),
+            look: lineLook(stmt.attrs, appearance, what, stmt.line),
             attrs: stmt.attrs,
             appearance,
             line: stmt.line,
@@ -486,6 +507,49 @@ function buildEdges(statements, byName, styles, defaults) {
     }
     return edges;
 }
+/**
+ * The line's bracket, checked, with a default for everything unsaid. A value is
+ * checked wherever it came from — a style's `path: squar` is as much a typo as
+ * an edge's — but `corners: rounded` is refused only when the edge itself says
+ * it on a curved line, which has no corners. From a style or a default it
+ * applies to the edges that have corners, the way a style's `fill:` lands on
+ * the nodes that have an inside.
+ */
+function lineLook(written, appearance, what, line) {
+    const word = (property) => {
+        const value = appearance[`line.${property}`];
+        if (value === undefined)
+            return LINE_VALUES[property][0];
+        if (!LINE_VALUES[property].includes(value)) {
+            throw new SourceError(`edge ${what}: "${property}: ${value}" is not a ${property} — use ${(property === 'thickness' ? ['thin', 'normal', 'thick'] : LINE_VALUES[property]).join(', ')}` +
+                (property === 'thickness' ? ', or a number of pixels' : ''), line);
+        }
+        return value;
+    };
+    const thickness = (() => {
+        const value = appearance['line.thickness'];
+        if (value !== undefined && /^[0-9.]/.test(value)) {
+            if (!/^\d+(\.\d+)?$/.test(value) || Number(value) <= 0) {
+                throw new SourceError(`edge ${what}: "thickness: ${value}" — a thickness is thin, normal, thick, ` +
+                    'or a plain number of pixels greater than zero, such as `thickness: 3`', line);
+            }
+            return Number(value);
+        }
+        return THICKNESS[word('thickness')];
+    })();
+    const look = {
+        path: word('path'),
+        corners: word('corners'),
+        crossing: word('crossing'),
+        pattern: word('pattern'),
+        thickness,
+    };
+    if (look.path === 'curved' && written['line.corners'] === 'rounded') {
+        throw new SourceError(`edge ${what}: a curved line has no corners to round — \`corners: rounded\` takes a ` +
+            '`path: square` or `path: straight` line', line);
+    }
+    return look;
+}
 /**
  * Give a node a width and height, sizing its children first. Also records each
  * child's offset within this node, which pass three turns into absolute
@@ -1268,6 +1332,30 @@ const AXIS_WORD = { x: 'horizontally', y: 'vertically' };
 function memberOn(target, axis) {
     return target.byAxis ? target.byAxis[axis] : target.index;
 }
+/**
+ * The ways named sides can face away from the other end. Opposite sides face
+ * away together or not at all (`left right` with `from` first); sides at right
+ * angles each may, and either is enough (`left top` with `from` first, where
+ * the edge turns back over the top, or with `to` below, where it goes round).
+ */
+function facingAway(fromSide, toSide) {
+    // The axis a side is on, and whether it faces away when its own end is first.
+    const SIDES = {
+        left: { axis: 'x', first: true },
+        right: { axis: 'x', first: false },
+        top: { axis: 'y', first: true },
+        bottom: { axis: 'y', first: false },
+    };
+    const f = SIDES[String(fromSide)];
+    const t = SIDES[String(toSide)];
+    if (!f || !t)
+        return [];
+    const byFrom = { axis: f.axis, fromFirst: f.first };
+    const byTo = { axis: t.axis, fromFirst: !t.first };
+    if (f.axis !== t.axis)
+        return [byFrom, byTo];
+    return byFrom.fromFirst === byTo.fromFirst ? [byFrom] : [];
+}
 /**
  * Where a node sits within the group being solved: which member holds it, and
  * where inside that member. An edge may name anything at any depth, so its ends
@@ -1303,7 +1391,9 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // edge told to pass between two named things carries its text in *that*
         // corridor rather than in the gap between its own ends, so widening this one
         // would make room where the text never goes.
-        if (edge.text === undefined || edge.between)
+        // An edge that says which side of something it passes is routed round it,
+        // and its text rides on that route for the same reason.
+        if (edge.text === undefined || edge.between || edge.passes)
             continue;
         const from = locate(edge.from);
         const to = locate(edge.to);
@@ -1312,11 +1402,18 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // The clearance is doubled because the text is drawn at the *midpoint* of
         // the line, so the room it needs is symmetric about that point whatever sits
         // at either end. The arrowhead is charged on both sides for the same reason:
-        // it covers `ARROW_LENGTH` of the line it arrives on, and reserving that at
-        // one end only would move the midpoint rather than lengthen the run.
+        // it covers the head's length of the line it arrives on, and reserving that
+        // at one end only would move the midpoint rather than lengthen the run. A
+        // thick line's head is longer, and takes the room it needs.
         const extent = (axis) => textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line) +
-            (TEXT_CLEARANCE + ARROW_LENGTH) * 2;
-        corridors.push({ edge, from, to, need: { x: extent('x'), y: extent('y') } });
+            (TEXT_CLEARANCE + arrowLength(edge.look.thickness)) * 2;
+        corridors.push({
+            edge,
+            from,
+            to,
+            need: { x: extent('x'), y: extent('y') },
+            away: facingAway(edge.attrs['from'], edge.attrs['to']),
+        });
     }
     return corridors;
 }
@@ -1658,7 +1755,7 @@ function alignedAt(side, span, own) {
  */
 function room(corridors, constraints, solved, solveAll, made) {
     let added = false;
-    for (const [index, { from, to, need }] of corridors.entries()) {
+    for (const [index, { from, to, need, away }] of corridors.entries()) {
         const clear = (axis) => {
             const at = (end) => solved[axis][end.index] + end.offset[axis];
             const size = (end) => (axis === 'x' ? end.width : end.height);
@@ -1672,6 +1769,11 @@ function room(corridors, constraints, solved, solveAll, made) {
         if (open.length !== 1)
             continue;
         const axis = open[0];
+        // Ends facing away along the only open axis mean the boxes share a row, and
+        // the renderer takes the line over the top with its text — see `planLoops`.
+        // Widening the gap would make room where the text never goes.
+        if (away.some((way) => way.axis === axis && (clear(axis).before === from) === way.fromFirst))
+            continue;
         // Given already, and a minimum stays met: asking again would widen
         // nothing and only keep the caller looking.
         if (made.has(`${index}:${axis}`))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {