reladraw 0.17.1 → 0.19.0

package/dist/parser.js

@@ -3,9 +3,36 @@ import { CHECK_DEFAULTS, CHECK_KINDS, setCheck } from './checks.js';
 import { SourceError } from './errors.js';
 import { STATEMENT_KEYWORDS } from './grammar.js';
 import { isAttrKey, nameMark, OpenString, tokenizeLine } from './lexer.js';
+import { SHAPE_SETTINGS } from './outline.js';
 import { checkOpacity } from './place.js';
+/** The settings a shape's bracket takes as a word on its own: `cylinder (lying)`. */
+const SHAPE_FLAGS = [...new Set(Object.values(SHAPE_SETTINGS).flatMap((one) => Object.entries(one).filter(([, kind]) => kind === 'flag').map(([name]) => name)))];
 import { readSize, SIZE_KEYS, writeSize } from './size.js';
 import { THEME_COLORS, THEME_NAMES, THEMES } from './themes.js';
+/**
+ * Set while `clausesOf` runs: the first token of every clause the parser
+ * reads, so the formatter can tell where one clause ends and the next begins
+ * without a second grammar of its own. Clauses inside brackets are recorded
+ * too, and the formatter passes over them.
+ */
+let clauseStarts = null;
+/**
+ * Parse a source for the formatter: each statement as gathered, and the first
+ * token of each clause read. Throws as `parse` does, so a file that does not
+ * parse is never rewritten.
+ */
+export function clausesOf(source) {
+    const statements = [];
+    const starts = new Set();
+    clauseStarts = starts;
+    try {
+        parse(source, (statement) => statements.push(statement));
+    }
+    finally {
+        clauseStarts = null;
+    }
+    return { statements, starts };
+}
 /**
  * Parse a whole source file. A statement starts on an unindented line and runs
  * on through any line that starts with whitespace; a blank line or the next
@@ -21,16 +48,18 @@ import { THEME_COLORS, THEME_NAMES, THEMES } from './themes.js';
  * are its own, blank or not, and a line opening with one continues the
  * statement above without being indented.
  */
-export function parse(source) {
+export function parse(source, seen) {
     const statements = [];
-    /** The statement being gathered, and the line it starts on. */
+    /** The statement being gathered, the line it starts on, and its lines' tokens. */
     let open = null;
     // Brackets may close on a later line, and the lexer only reads `)` as a
     // bracket while one is open, so the depth is carried from line to line.
     let depth = 0;
     const close = () => {
-        if (open)
+        if (open) {
+            seen?.({ line: open.line, lines: open.lines });
             statements.push(parseStatement(open.tokens, open.line));
+        }
         open = null;
         depth = 0;
     };
@@ -71,7 +100,7 @@ export function parse(source) {
         if (tokens.length === 0)
             continue;
         if (!continues) {
-            open = { tokens, line: lineNumber };
+            open = { tokens: [...tokens], line: lineNumber, lines: [{ line: lineNumber, tokens }] };
         }
         else {
             const first = tokens[0];
@@ -87,6 +116,7 @@ export function parse(source) {
                     `the one before it, so remove the indentation to start a new statement`, lineNumber);
             }
             open.tokens.push(...tokens);
+            open.lines.push({ line: lineNumber, tokens });
         }
         for (const token of tokens) {
             if (token.quoted)
@@ -253,6 +283,7 @@ function parseTail(tokens, start, line, subject, other) {
     let i = start;
     while (i < tokens.length) {
         const token = tokens[i];
+        clauseStarts?.add(token);
         if (isAttrKey(token)) {
             i = readAttr(tokens, i, attrs, line, subject);
             continue;
@@ -321,6 +352,7 @@ function setOnce(attrs, key, value, subject, line, shown = { key, value: (v) =>
 /** Read one `key: value` pair, and refuse the words that used to be keys. */
 function readAttr(tokens, at, attrs, line, subject) {
     const keyToken = tokens[at];
+    clauseStarts?.add(keyToken);
     const key = keyToken.text.slice(0, -1);
     if (key === 'gap') {
         throw new SourceError(`${subject}: a node has no gap:, only a placement does — write it in the placement's bracket, ` +
@@ -601,6 +633,53 @@ function readAttr(tokens, at, attrs, line, subject) {
         }
         return next;
     }
+    if (key === 'shape' && follows(tokens, at + 2, '(')) {
+        // `shape: cylinder (cap: 1.5, lying)` — a value, then its settings. Which
+        // settings the shape takes is checked once its shape is known, since a
+        // style may carry the shape and a node the bracket's other half.
+        const value = tokens[at + 1];
+        if (value.quoted || isAttrKey(value)) {
+            throw new SourceError(`${subject}: shape: names an outline, such as diamond, before its settings`, line);
+        }
+        setOnce(attrs, 'shape', value.text, subject, line);
+        // A flag stands alone, `lying`; read it as `lying: true`.
+        const inner = [];
+        let depth = 0;
+        let end = at + 2;
+        for (; end < tokens.length; end++) {
+            const token = tokens[end];
+            if (!token.quoted && token.text === '(')
+                depth += 1;
+            if (!token.quoted && token.text === ')')
+                depth -= 1;
+            const bare = token.text.replace(/,$/, '');
+            if (depth === 1 && !token.quoted && SHAPE_FLAGS.includes(bare) && !isAttrKey(tokens[end - 1])) {
+                inner.push({ ...token, text: `${bare}:` }, { ...token, text: token.text.endsWith(',') ? 'true,' : 'true' });
+            }
+            else {
+                inner.push(token);
+            }
+            if (depth === 0)
+                break;
+        }
+        const takes = Object.keys(SHAPE_SETTINGS[value.text] ?? {});
+        if (takes.length === 0) {
+            throw new SourceError(`${subject}: \`shape: ${value.text}\` takes no settings, so it has no bracket`, line);
+        }
+        const read = readBracket(inner, 0, takes, {
+            subject,
+            what: `\`shape: ${value.text}\``,
+            kind: `a ${value.text}`,
+            example: `${takes[0]}: …`,
+            line,
+        });
+        if (Object.keys(read.values).length === 0) {
+            throw new SourceError(`${subject}: \`shape: ${value.text}\` opens empty brackets`, line);
+        }
+        for (const [inside, set] of Object.entries(read.values))
+            setOnce(attrs, `shape.${inside}`, set, subject, line);
+        return end + 1;
+    }
     const bracketKeys = BRACKET_KEYS[key];
     if (bracketKeys !== undefined && follows(tokens, at + 1, '(')) {
         // `text: (color: theme-muted)` — the whole bracket belongs to one part, and it is
@@ -1177,7 +1256,7 @@ function parseNode(head, line) {
  * A node's text takes the look keys and `reads:` (design.org 7.2). `at` is
  * read only to be refused with the side form, so it isn't listed as one it takes.
  */
-const NODE_TEXT_KEYS = [...TEXT_KEYS, 'reads'];
+const NODE_TEXT_KEYS = [...TEXT_KEYS, 'reads', 'fill'];
 const NODE_TEXT_LISTED = NODE_TEXT_KEYS.filter((key) => key !== 'at');
 /** A node's text turns a quarter turn; `along` follows a line, and a box has none. */
 function refuseNodeReads(reads, subject, line, whose = "a node's text") {
@@ -1461,7 +1540,7 @@ function eachChildAt(head) {
     return found;
 }
 /** Whether a token is an arrow, or begins one: a bracketed mark, or a run of dashes with marks at its ends. */
-function looksLikeArrow(token) {
+export function looksLikeArrow(token) {
     if (token.quoted)
         return false;
     if (token.text === '(' || /^\[[^\]]*\]-*$/.test(token.text))
@@ -1708,6 +1787,7 @@ function parsePoint(head, line) {
     if (!head[start] || isAttrKey(head[start])) {
         throw new SourceError(`${subject} says where it is, such as \`point ${name}  between a and b\``, line);
     }
+    clauseStarts?.add(head[start]);
     const read = readOneTarget(head, start, subject, line, true);
     if (read.listed)
         throw new SourceError(`${subject} is one point, so it takes no list`, line);
@@ -1726,6 +1806,7 @@ function parseRegion(head, line) {
     if (!head[start] || isAttrKey(head[start])) {
         throw new SourceError(`${subject} says what it covers: two corners, \`region ${name}  a top-left to b bottom-right\`, or \`region ${name}  between a and b\``, line);
     }
+    clauseStarts?.add(head[start]);
     const first = readOneTarget(head, start, subject, line, true);
     if (first.listed)
         throw new SourceError(`${subject}: a region runs from one point to another, written with "to", not a list`, line);
@@ -1938,8 +2019,12 @@ function refuseNameMark(token, where, line) {
  * helps and never demanded. Shorthands added later extend this without
  * disturbing what it already reads.
  */
-function readPlacement(tokens, at, line, subject) {
+function readPlacement(tokens, at, line, subject, nested = false) {
     const word = tokens[at];
+    // A placement read after its own distance or part (`6 above x`) is still
+    // the clause that word began, so only the outermost read starts one.
+    if (!nested)
+        clauseStarts?.add(word);
     if (word.quoted) {
         throw new SourceError(`${subject}: unexpected text "${word.text}"`, line);
     }
@@ -1948,7 +2033,7 @@ function readPlacement(tokens, at, line, subject) {
     // the distance is required.
     if (!word.quoted && isPart(word.text) && !follows(tokens, at + 1, 'of') && !follows(tokens, at + 1, 'even')) {
         if (opensPartPlacement(tokens, at)) {
-            const read = readPlacement(tokens, at + 1, line, subject);
+            const read = readPlacement(tokens, at + 1, line, subject, true);
             if (read.placement.kind !== 'offset')
                 return read;
             return { placement: { ...read.placement, own: word.text }, next: read.next };
@@ -1981,7 +2066,7 @@ function readPlacement(tokens, at, line, subject) {
                 throw new SourceError(`${subject}: "${word.text} ${first} and ${other.text} ${second}" gives two distances, one for each axis, ` +
                     'so one direction is above or below and the other left or right', line);
             }
-            const read = readPlacement(tokens, at + 3, line, subject);
+            const read = readPlacement(tokens, at + 3, line, subject, true);
             if (read.placement.kind !== 'offset')
                 return read;
             const y = vertical(first) ? first : second;
@@ -1993,7 +2078,7 @@ function readPlacement(tokens, at, line, subject) {
                 next: read.next,
             };
         }
-        const read = readPlacement(tokens, at + 1, line, subject);
+        const read = readPlacement(tokens, at + 1, line, subject, true);
         if (read.placement.kind !== 'offset')
             return read;
         if (read.placement.gap !== undefined) {

package/dist/place.d.ts

@@ -253,6 +253,11 @@ export declare class Placer {
      * the part it names, or the whole box.
      */
     private ownPart;
+    /**
+     * For a node that is not a rectangle, where the line from its middle toward
+     * a point of its box meets its outline, from the box's top-left.
+     */
+    private outlineOf;
     private overStated;
     /** Every statement a node's placements make about one axis. */
     private statements;

package/dist/place.js

@@ -2,6 +2,7 @@ import { describePlacement, describePoint, fractionAxis, nameTarget, PART_SIDES,
 import { DECK_STEP, GAPS, HEADER_GAP, UNIT } from './constants.js';
 import { SourceError } from './errors.js';
 import { isWithin, joinedToText } from './model.js';
+import { isBoxy, middleOf, shapeOf, towardOutline } from './outline.js';
 import { SIZE_KEYS, storedSize } from './size.js';
 /**
  * How a region grows to hold its text, on one axis (design.org 7.4). Inside,
@@ -546,7 +547,29 @@ export class Placer {
             }
             return this.textOf(node, axis, 0);
         }
-        return narrow(whole, placement.own, axis, this.facts.get(node).circle, this.size(node, 'x'));
+        return narrow(whole, placement.own, axis, this.outlineOf(node));
+    }
+    /**
+     * For a node that is not a rectangle, where the line from its middle toward
+     * a point of its box meets its outline, from the box's top-left.
+     */
+    outlineOf(node) {
+        const body = node.body;
+        if (body.kind !== 'shape' || isBoxy(body.outline))
+            return undefined;
+        return (across, down) => {
+            const width = this.size(node, 'x');
+            const height = this.size(node, 'y');
+            if (body.outline === 'circle') {
+                // An ellipse, round when the two are equal; exact rather than sampled.
+                const dx = (across - 0.5) * width;
+                const dy = (down - 0.5) * height;
+                const scale = dx === 0 && dy === 0 ? 0 : 1 / Math.hypot((dx * 2) / width, (dy * 2) / height);
+                return { x: width / 2 + dx * scale, y: height / 2 + dy * scale };
+            }
+            const middle = middleOf(body.outline, body.look, width, height);
+            return towardOutline(shapeOf(body.outline, body.look, width, height).polygon, middle, { x: across * width, y: down * height });
+        };
     }
     overStated(node, axis, statements) {
         const said = [...new Set(statements.map((statement) => statement.placement))]
@@ -730,7 +753,7 @@ export class Placer {
             if (target.part === 'text') {
                 throw new SourceError(`"${node.name}" is placed against "${nameTarget(target)}", and a ${defined.kind} has no text`, placement.line);
             }
-            return this.alongFraction(whole, target, axis, () => narrow(whole, target.part, axis, false, 0));
+            return this.alongFraction(whole, target, axis, () => narrow(whole, target.part, axis));
         }
         if (target.fraction) {
             const whole = this.extentOf(node, { name: target.name }, axis, placement);
@@ -1004,7 +1027,7 @@ export class Placer {
             }
             return text;
         }
-        return narrow(whole, target.part, axis, this.facts.get(named).circle, this.size(named, 'x'));
+        return narrow(whole, target.part, axis, this.outlineOf(named));
     }
     /** A node's text on one axis, given where the node starts. */
     textOf(node, axis, start) {
@@ -1546,7 +1569,7 @@ export class Placer {
                 const whole = { start: this.start(child, axis), size: this.size(child, axis) };
                 const at = target.part === 'text'
                     ? this.textOf(child, axis, whole.start)
-                    : narrow(whole, target.part, axis, this.facts.get(child).circle, this.size(child, 'x'));
+                    : narrow(whole, target.part, axis, this.outlineOf(child));
                 start = Math.min(start, at.start);
                 end = Math.max(end, at.start + at.size);
             }
@@ -2089,6 +2112,11 @@ export class Placer {
             width: box.width,
             height: box.height,
         };
+        if (node.body.kind === 'shape' && !isBoxy(node.body.outline) && node.body.outline !== 'circle' && (node.textAttrs['place'] === undefined || title.how === 'center')) {
+            // At the shape's own middle, which moves with its size: a triangle's stays a third of the way up.
+            const middle = middleOf(node.body.outline, node.body.look, width, height);
+            return { x: middle.x - box.width / 2, y: middle.y - box.height / 2, width: box.width, height: box.height };
+        }
         if (node.textAttrs['place'] === undefined || title.how === 'center' || facts.circle || node.body.kind === 'icon') {
             return centered;
         }
@@ -2204,9 +2232,11 @@ function commonFrame(a, b) {
 /**
  * Narrow an extent to the part a placement named. A side leaves the axis it
  * doesn't name alone (`right` is the whole right edge); a point is a point on
- * both. On a circle a corner is the point on it halfway between its sides.
+ * both. On a shape other than a rectangle, a point is where the line from the
+ * shape's middle toward that point of its box meets the outline: on a circle
+ * a corner is halfway between its sides, on a diamond the middle of an edge.
  */
-function narrow(whole, part, axis, circle, diameter) {
+function narrow(whole, part, axis, onOutline) {
     if (part === undefined || part === 'text')
         return whole;
     const words = part.split('-');
@@ -2215,12 +2245,12 @@ function narrow(whole, part, axis, circle, diameter) {
     const named = words.includes(near) ? 0 : words.includes(far) ? whole.size : undefined;
     if (named === undefined && isSide)
         return whole;
-    let at = whole.start + (named ?? whole.size / 2);
-    const across = words.includes('left') || words.includes('right');
-    const down = words.includes('top') || words.includes('bottom');
-    if (circle && across && down) {
-        const pull = (diameter / 2) * (1 - Math.SQRT1_2);
-        at += named === 0 ? pull : -pull;
-    }
-    return { start: at, size: 0 };
+    if (onOutline) {
+        // Where on the box the point is, as fractions across and down.
+        const across = words.includes('left') ? 0 : words.includes('right') ? 1 : 0.5;
+        const down = words.includes('top') ? 0 : words.includes('bottom') ? 1 : 0.5;
+        const point = onOutline(across, down);
+        return { start: whole.start + (axis === 'x' ? point.x : point.y), size: 0 };
+    }
+    return { start: whole.start + (named ?? whole.size / 2), size: 0 };
 }

package/dist/render.js

@@ -1,6 +1,7 @@
 import { ARROW_LENGTH, ARROW_MARKER_WIDTH, DEFAULT_FONT_SIZE, ICON_LINES, LINE_WIDTH, PAD, arrowLength, fontSizeFor, textStyleFor, widestLine, } from './constants.js';
 import { SourceError } from './errors.js';
 import { ICON_STROKE } from './icons.js';
+import { insideOutline, isBoxy, isRound, placePath, shapeOf, SUBPROCESS_INSET } from './outline.js';
 import { monospaceMeasurer } from './measure.js';
 import { joinedToText } from './model.js';
 import { DARK_THEME, THEMES, overlapFill, regionTint, textOnFill, themeColor } from './themes.js';
@@ -246,6 +247,8 @@ function patchSvg(patch, beneath, theme) {
         return `  <rect ${rect} fill="${themeColor(patch.fill, theme)}"/>`;
     const { x, y } = patch.center;
     const under = beneath.flatMap((drawn) => drawn.fills ?? []).filter((fill) => {
+        if (fill.polygon)
+            return insideOutline(fill.polygon, { x, y });
         if (!fill.round)
             return x >= fill.x && x <= fill.x + fill.width && y >= fill.y && y <= fill.y + fill.height;
         const r = Math.min(fill.width, fill.height) / 2;
@@ -362,7 +365,7 @@ function borderSvg(node, theme) {
         return '';
     const face = faceOf(node);
     const border = borderOf(node.appearance, theme, theme.containerStroke);
-    return `  <path d="${outlinePath(node.body.outline, face.x, face.y, face.width, face.height, node.corners)}" fill="none" stroke="${border}"/>`;
+    return `  <path d="${outlinePath(node.body.outline, face.x, face.y, face.width, face.height, node.corners, node.body.look)}" fill="none" stroke="${border}"/>`;
 }
 /** What a node draws of its own, without its children, which are drawn as items of their own. */
 function nodeSvg(node, theme, measurer, fontSize, markup) {
@@ -409,6 +412,7 @@ function nodeSvg(node, theme, measurer, fontSize, markup) {
         return drawn;
     }
     const outline = node.body.outline;
+    const look = node.body.look;
     const parts = [];
     const face = faceOf(node);
     // A node with children is colored as a backdrop however they are placed,
@@ -432,12 +436,12 @@ function nodeSvg(node, theme, measurer, fontSize, markup) {
         const room = PAD / 2;
         const hole = node.textBox;
         const grown = { x: face.x - PAD, y: face.y - PAD, w: face.width + PAD * 2, h: face.height + PAD * 2 };
-        parts.push(`  <mask id="${id}" maskUnits="userSpaceOnUse" x="${round(grown.x)}" y="${round(grown.y)}" width="${round(grown.w)}" height="${round(grown.h)}">`, `    <rect x="${round(grown.x)}" y="${round(grown.y)}" width="${round(grown.w)}" height="${round(grown.h)}" fill="white"/>`, `    <rect x="${round(node.x + hole.x - room)}" y="${round(node.y + hole.y)}" width="${round(hole.width + room * 2)}" height="${round(hole.height)}" fill="black"/>`, '  </mask>', `  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners)}" fill="${fill}" stroke="none"/>`, `  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners)}" fill="none" stroke="${border}" mask="url(#${id})"/>`);
+        parts.push(`  <mask id="${id}" maskUnits="userSpaceOnUse" x="${round(grown.x)}" y="${round(grown.y)}" width="${round(grown.w)}" height="${round(grown.h)}">`, `    <rect x="${round(grown.x)}" y="${round(grown.y)}" width="${round(grown.w)}" height="${round(grown.h)}" fill="white"/>`, `    <rect x="${round(node.x + hole.x - room)}" y="${round(node.y + hole.y)}" width="${round(hole.width + room * 2)}" height="${round(hole.height)}" fill="black"/>`, '  </mask>', `  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners, look)}" fill="${fill}" stroke="none"/>`, `  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners, look)}" fill="none" stroke="${border}" mask="url(#${id})"/>`);
     }
     else {
-        parts.push(`  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners)}" fill="${fill}" stroke="${border}"/>`);
+        parts.push(`  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height, node.corners, look)}" fill="${fill}" stroke="${border}"/>`);
     }
-    for (const extra of outlineDetail(outline, face.x, face.y, face.width, face.height)) {
+    for (const extra of outlineDetail(outline, face.x, face.y, face.width, face.height, look)) {
         parts.push(`  <path d="${extra}" fill="none" stroke="${border}"/>`);
     }
     // A leaf's text defaults to the middle of its box, a container's to the top
@@ -447,6 +451,15 @@ function nodeSvg(node, theme, measurer, fontSize, markup) {
     // colors: a badged leaf is a backdrop but its text still centers. A box
     // whose only children are joined to its text is a leaf, and its lines center
     // against each other as a leaf's do.
+    // Collate's text sits on the point where its two triangles meet, so the
+    // lines break behind it on a patch of its own fill, as a line's text does.
+    const patch = node.textAttrs['fill'];
+    if (outline === 'flow-collate' && patch !== 'none' && node.lines.length > 0) {
+        const box = node.textBox;
+        const reach = 4;
+        const color = patch !== undefined ? themeColor(patch, theme) : fill === 'none' ? theme.background : fill;
+        parts.push(`  <rect x="${round(node.x + box.x - reach)}" y="${round(node.y + box.y)}" width="${round(box.width + reach * 2)}" height="${round(box.height)}" fill="${color}"/>`);
+    }
     const titled = node.banded && container;
     const textStyle = textStyleFor(node.textAttrs, node.line, titled ? 'start' : 'middle', titled ? 'top-left' : 'center');
     parts.push(sized(textBlock(node.lines, node.x, node.y, textHeight, size, node.textBox, {
@@ -630,12 +643,15 @@ const FOLD = CORNER * 2;
  * corners and a document's three round ones; the fold and the circle are as
  * they are either way.
  */
-function outlinePath(shape, x, y, w, h, corners) {
+function outlinePath(shape, x, y, w, h, corners, look = {}) {
     const r = CORNER;
+    const fold = shape === 'document' ? (look.fold ?? FOLD) : FOLD;
+    if (!isBoxy(shape) && !isRound(shape, w, h))
+        return placePath(shapeOf(shape, look, w, h).path, x, y);
     if (corners === 'sharp' && shape !== 'circle') {
         return [
             `M${round(x)} ${round(y)}`,
-            ...(shape === 'document' ? [`H${round(x + w - FOLD)}`, `L${round(x + w)} ${round(y + FOLD)}`] : [`H${round(x + w)}`]),
+            ...(shape === 'document' ? [`H${round(x + w - fold)}`, `L${round(x + w)} ${round(y + fold)}`] : [`H${round(x + w)}`]),
             `V${round(y + h)}`,
             `H${round(x)}`,
             'Z',
@@ -655,8 +671,8 @@ function outlinePath(shape, x, y, w, h, corners) {
         // Every corner rounded but the top-right one, which is cut away and folded.
         return [
             `M${round(x + r)} ${round(y)}`,
-            `H${round(x + w - FOLD)}`,
-            `L${round(x + w)} ${round(y + FOLD)}`,
+            `H${round(x + w - fold)}`,
+            `L${round(x + w)} ${round(y + fold)}`,
             `V${round(y + h - r)}`,
             `a${r} ${r} 0 0 1 ${-r} ${r}`,
             `H${round(x + r)}`,
@@ -679,14 +695,19 @@ function outlinePath(shape, x, y, w, h, corners) {
         'Z',
     ].join(' ');
 }
-/** Lines drawn inside the outline: the flap of a fold, and nothing else so far. */
-function outlineDetail(shape, x, y, w, h) {
-    void h;
-    if (shape !== 'document')
+/** Lines drawn inside the outline: the flap of a fold, a subprocess's bars, a cylinder's near rim. */
+function outlineDetail(shape, x, y, w, h, look = {}) {
+    if (shape === 'document') {
+        const fold = look.fold ?? FOLD;
+        return [`M${round(x + w - fold)} ${round(y)} V${round(y + fold)} H${round(x + w)}`];
+    }
+    if (shape === 'flow-subprocess') {
+        const inset = SUBPROCESS_INSET;
+        return [`M${round(x + inset)} ${round(y)} V${round(y + h)} M${round(x + w - inset)} ${round(y)} V${round(y + h)}`];
+    }
+    if (isBoxy(shape) || isRound(shape, w, h))
         return [];
-    return [
-        `M${round(x + w - FOLD)} ${round(y)} V${round(y + FOLD)} H${round(x + w)}`,
-    ];
+    return shapeOf(shape, look, w, h).detail.map((d) => placePath(d, x, y));
 }
 /** One icon, scaled from its own grid onto a square of `side` at `x, y`. */
 function drawIcon(icon, x, y, side, theme) {
@@ -1093,15 +1114,19 @@ function markMarker(mark, color, background, free) {
 function markerId(mark, color, free) {
     return `${mark}-${color.replace(/[^a-zA-Z0-9]/g, '')}${free && (mark === 'dot' || mark === 'odot') ? '-free' : ''}`;
 }
-/** The rectangle drawn, and whether it is round. */
+/** The rectangle drawn, and whether it is round or another shape. */
 function faceOf(node) {
-    return {
+    const box = {
         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) && !box.round) {
+        box.polygon = shapeOf(node.body.outline, node.body.look, node.width, node.height).polygon.map((p) => ({ x: node.x + p.x, y: node.y + p.y }));
+    }
+    return box;
 }
 /**
  * Wrap a block of text in its own size, but only when that differs from the

package/dist/resolve.js

@@ -4,6 +4,7 @@ import { DEFAULT_FONT_SIZE, DEFAULT_MARGIN, GAPS, ICON_GAP, ICON_LINES, LINE_WID
 import { SourceError } from './errors.js';
 import { bodyFor, pastedIcon } from './icons.js';
 import { monospaceMeasurer } from './measure.js';
+import { isBoxy, middleOf, sizeFor, SUBPROCESS_INSET } from './outline.js';
 import { markupStyles, parseMarkup, plain, splitRuns, wrapLine } from './text.js';
 import { joinedToText } from './model.js';
 import { checkOpacity, gapPixels, Placer, regionTextAt } from './place.js';
@@ -47,6 +48,11 @@ function factsFor(node, measurer, fontSize) {
         }
         pad[side] = gapPixels(written, `"${node.name}" padding-${side}:`, node.line);
     }
+    // A subprocess's bars stand inside its sides, so its text keeps its padding clear of them.
+    if (node.body.kind === 'shape' && node.body.outline === 'flow-subprocess') {
+        pad.left += SUBPROCESS_INSET;
+        pad.right += SUBPROCESS_INSET;
+    }
     node.textSide = 'center';
     const measures = {
         lineHeight,
@@ -83,6 +89,26 @@ function factsFor(node, measurer, fontSize) {
             circle,
         };
     }
+    if (node.body.kind === 'shape' && !circle && !isBoxy(node.body.outline)) {
+        if (node.children.length > 0) {
+            throw new SourceError(`"${node.name}" is a ${node.body.outline} and has children. Only a rectangle, a document or a circle holds other nodes so far`, node.line);
+        }
+        // Grown until the padded text fits at the shape's middle: a diamond twice
+        // the block each way, a triangle's text a third of the way from its base.
+        const block = { width: textWidth + pad.left + pad.right, height: textHeight + pad.top + pad.bottom };
+        const natural = sizeFor(node.body.outline, node.body.look, block.width, block.height);
+        const middle = middleOf(node.body.outline, node.body.look, natural.width, natural.height);
+        return {
+            natural,
+            textBox: { x: middle.x - textWidth / 2, y: middle.y - textHeight / 2, width: textWidth, height: textHeight },
+            hasText,
+            padding,
+            pad,
+            ...measures,
+            title,
+            circle,
+        };
+    }
     if (layout && node.children.length === 0) {
         throw new SourceError(`"${node.name}" has layout: but no children — a node with no children is not a container`, node.line);
     }
@@ -611,6 +637,10 @@ function over(base, top) {
     if (top['shape'] === undefined && top['icon'] === undefined)
         return { ...base, ...top };
     const { shape: _shape, icon: _icon, ...rest } = base;
+    // A shape's settings belong to the shape they were written with.
+    for (const key of Object.keys(rest))
+        if (key.startsWith('shape.'))
+            delete rest[key];
     return { ...rest, ...top };
 }
 /** A file holds one diagram, so a second `diagram` statement is a mistake. */
@@ -702,6 +732,12 @@ function buildTree(statements, styles, defaults, icons) {
                 ...(stmt.attrs['heading.align'] !== undefined ? { align: stmt.attrs['heading.align'] } : {}),
             }
             : { ...bracketOf('text', appearance), ...stmt.textAttrs };
+        // The patch behind a text is a line's text's, and flow-collate's, whose
+        // text sits on the point where its two halves meet.
+        if (stmt.textAttrs['fill'] !== undefined && !(body.kind === 'shape' && body.outline === 'flow-collate')) {
+            throw new SourceError(`"${stmt.name}" has fill: in its text's brackets, which is the patch behind a text on a line or on a flow-collate — ` +
+                'a box\'s own color is fill: outside the brackets', stmt.line);
+        }
         // A card's text sits at its top left, where it shows above the card in
         // front of it, unless it says where.
         const deck = byName.get(stmt.name.slice(0, Math.max(stmt.name.lastIndexOf('.'), 0)));
@@ -1113,9 +1149,13 @@ function cornersOf(node, value, written) {
     if (!NODE_CORNERS.includes(value)) {
         throw new SourceError(`"${node.name}" has corners: ${value}, which is not a way to draw corners — use ${NODE_CORNERS.join(' or ')}`, node.line);
     }
-    if (written && node.body.outline === 'circle') {
-        throw new SourceError(`"${node.name}" is a circle and has corners: ${value}. A circle has no corners to make ${value} — ` +
-            '`corners:` takes a `rectangle` or a `document`', node.line);
+    if (!isBoxy(node.body.outline)) {
+        // A circle has no corners, and a diamond's or a hexagon's are drawn as
+        // points; only a box's are rounded. From a style it lands where it can.
+        if (!written)
+            return NODE_CORNERS[0];
+        throw new SourceError(`"${node.name}" is a ${node.body.outline} and has corners: ${value}. Only a box's corners are rounded or sharp — ` +
+            '`corners:` takes a `rectangle`, a `document` or a `flow-subprocess`', node.line);
     }
     return value;
 }

package/package.json

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