nicevg 0.19.0 → 0.20.1

package/README.md

@@ -33,14 +33,29 @@ It reads the SVG from stdin and writes the fixed one to stdout. The issues it co
 ### Library
 
 ```ts
-import { render, svg, text } from "nicevg";
+import { render } from "nicevg";
+import { box, circle } from "nicevg/style/simple";
 
 const image = render({
   nodes: [
-    { id: "order", x: 20, y: 20, width: 120, height: 56, label: "Order" },
-    { id: "orders", class: "pill", x: 300, y: 160, label: "Orders" },
+    { id: "user", class: "circle", x: 20, y: 20, width: 60, height: 60, label: "User" },
+    { id: "order", class: "box", x: 200, y: 22, width: 120, height: 56, label: "Order" },
   ],
-  edges: [{ from: "order", to: "orders", label: "save" }],
+  edges: [{ from: "user", to: "order", label: "place" }],
+  style: { box, circle },
+});
+await image.write("diagram.svg");
+```
+
+### Styling
+
+A style is a function that draws its nodes as SVG, with `svg` for the markup and `text` for labels measured the way nicevg measures them.
+
+```ts
+import { render, svg, text } from "nicevg";
+
+const image = render({
+  nodes: [{ id: "orders", class: "pill", x: 20, y: 20, label: "Orders" }],
   style: {
     pill: ({ label }) => {
       const name = text(label);
@@ -71,11 +86,8 @@ Fixes the diagram, nudges its nodes into a cleaner layout and returns an `Svg`.
 | Node field | |
 |---|---|
 | `id`, `x`, `y` | Its id and its top left corner. |
-| `width`, `height` | Its size. Not used with `class`. |
-| `label`, `fontSize` | Its text, lines split at `\n`. |
-| `shape` | `"rect"` (the default) or `"circle"`. |
+| `class` | The `style` that draws it; every node has one. Other fields you add are passed to that style. |
 | `parent` | The id of the node it sits inside. |
-| `class` | The `style` that draws it. Other fields you add are passed to that style. |
 | `allowOverlap` | `true` if it overlaps other nodes on purpose. |
 
 | Edge field | |
@@ -99,6 +111,8 @@ Fixes the diagram, nudges its nodes into a cleaner layout and returns an `Svg`.
 | Function | |
 |---|---|
 | `` svg`...` `` | SVG markup. Embedded strings are escaped; `svg` fragments, texts and arrays of them go in as they are. |
-| `text(content, size = 14)` | One line of text, with the `width` and `height` nicevg measures it at. |
+| `text(content, size = 14)` | A text, lines split at `\n`, with the `width` and `height` nicevg measures it at: its widest line, and 1.2 font sizes a line. |
 | `text(...).at({ left \| cx \| right, top \| cy \| bottom })` | Places the text so that point of its box sits at those coordinates. |
 | `` svg`...`.at(x, y) `` | The fragment with its origin moved to `x`, `y`. |
+
+`nicevg/style/simple` has `box` and `circle`, white shapes outlined in black with the label centred, growing to fit their label: `import { box, circle } from "nicevg/style/simple"`, then `style: { box, circle }`. Their nodes take `width`, `height`, `label` (lines split at `\n`) and `fontSize`; a circle sits in the middle of its `width` and `height`.

package/dist/draw.d.ts

@@ -23,6 +23,7 @@ export declare class SvgFragment {
 }
 /** SVG markup with values embedded: strings escaped, fragments, texts and arrays of them as they are. */
 export declare function svg(strings: TemplateStringsArray, ...values: unknown[]): SvgFragment;
+export declare const WIDE: RegExp;
 /** Where a text goes: one of `left`, `cx`, `right` across, one of `top`, `cy`, `bottom` down. */
 export type TextPlace = ({
     left: number;
@@ -37,20 +38,20 @@ export type TextPlace = ({
 } | {
     bottom: number;
 });
-/** A line of text, sized the way nicevg measures text, placed with `at`. */
+/** A text of one or more lines (split at `\n`), sized the way nicevg measures text, placed with `at`. */
 export declare class Text {
     readonly content: string;
     readonly size: number;
     readonly place: TextPlace;
-    /** Its width, wide characters one font size each and others 0.59. */
+    /** Its widest line's width, wide characters one font size each and others 0.59. */
     readonly width: number;
-    /** Its line's height, 1.2 font sizes. */
+    /** Its lines' height, 1.2 font sizes each. */
     readonly height: number;
     constructor(content: string, size?: number, place?: TextPlace);
     /** This text with the point of its box named in `place` at the coordinates given. */
     at(place: TextPlace): Text;
-    /** The `<text>` element, centred on its line by `dominant-baseline`. */
+    /** The `<text>` element, each line centred on itself by `dominant-baseline`, more than one as `<tspan>`s. */
     toString(): string;
 }
-/** A line of text at `size` (14 by default), to embed in `svg` once placed with `at`. */
+/** A text at `size` (14 by default), lines split at `\n`, to embed in `svg` once placed with `at`. */
 export declare function text(content: string, size?: number): Text;

package/dist/draw.js

@@ -42,26 +42,29 @@ export function svg(strings, ...values) {
     return new SvgFragment(strings.reduce((markup, string, index) => markup + embed(values[index - 1]) + string));
 }
 // shortcut: the common wide ranges (CJK, kana, hangul, fullwidth forms), not every East Asian Wide character; widen it if a script measures short.
-const WIDE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]|[\u{20000}-\u{3fffd}]/u;
-/** A line of text, sized the way nicevg measures text, placed with `at`. */
+export const WIDE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]|[\u{20000}-\u{3fffd}]/u;
+/** A text of one or more lines (split at `\n`), sized the way nicevg measures text, placed with `at`. */
 export class Text {
     content;
     size;
     place;
-    /** Its width, wide characters one font size each and others 0.59. */
+    /** Its widest line's width, wide characters one font size each and others 0.59. */
     width;
-    /** Its line's height, 1.2 font sizes. */
+    /** Its lines' height, 1.2 font sizes each. */
     height;
     constructor(content, size = 14, place = { left: 0, top: 0 }) {
         this.content = content;
         this.size = size;
         this.place = place;
-        let width = 0;
-        for (const character of content) {
-            width += WIDE.test(character) ? size : character.length * size * 0.59;
-        }
-        this.width = Math.ceil(width);
-        this.height = Math.ceil(size * 1.2);
+        const widths = content.split("\n").map((line) => {
+            let width = 0;
+            for (const character of line) {
+                width += WIDE.test(character) ? size : character.length * size * 0.59;
+            }
+            return width;
+        });
+        this.width = Math.ceil(Math.max(...widths));
+        this.height = Math.ceil(widths.length * size * 1.2);
     }
     /** This text with the point of its box named in `place` at the coordinates given. */
     at(place) {
@@ -72,15 +75,26 @@ export class Text {
         }
         return new Text(this.content, this.size, place);
     }
-    /** The `<text>` element, centred on its line by `dominant-baseline`. */
+    /** The `<text>` element, each line centred on itself by `dominant-baseline`, more than one as `<tspan>`s. */
     toString() {
         const place = this.place;
         const [x, anchor] = "cx" in place ? [place.cx, "middle"] : "right" in place ? [place.right, "end"] : [place.left, "start"];
         const y = "cy" in place ? place.cy : "top" in place ? place.top + this.height / 2 : place.bottom - this.height / 2;
-        return `<text x="${x}" y="${y}" font-size="${this.size}" text-anchor="${anchor}" dominant-baseline="central">${escape(this.content)}</text>`;
+        const attributes = `font-size="${this.size}" text-anchor="${anchor}" dominant-baseline="central"`;
+        const lines = this.content.split("\n");
+        if (lines.length === 1) {
+            return `<text x="${x}" y="${y}" ${attributes}>${escape(this.content)}</text>`;
+        }
+        // A tspan with its own x and y is a line of its own, to nicevg as to the renderer.
+        const step = this.size * 1.2;
+        const tspans = lines.map((line, index) => {
+            const lineY = Math.round((y + (index - (lines.length - 1) / 2) * step) * 100) / 100;
+            return `<tspan x="${x}" y="${lineY}">${escape(line)}</tspan>`;
+        });
+        return `<text x="${x}" ${attributes}>${tspans.join("")}</text>`;
     }
 }
-/** A line of text at `size` (14 by default), to embed in `svg` once placed with `at`. */
+/** A text at `size` (14 by default), lines split at `\n`, to embed in `svg` once placed with `at`. */
 export function text(content, size = 14) {
     return new Text(content, size);
 }

package/dist/draw.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw.js","sourceRoot":"","sources":["../src/draw.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"draw.js","sourceRoot":"","sources":["../src/draw.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -5,13 +5,15 @@
  *
  * ```ts
  * import { render } from "nicevg";
+ * import { box } from "nicevg/style/simple";
  *
  * const svg = render({
  *   nodes: [
- *     { id: "order", x: 20, y: 20, width: 120, height: 56, label: "Order" },
- *     { id: "bill", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
+ *     { id: "order", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" },
+ *     { id: "bill", class: "box", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
  *   ],
- *   connectors: [{ from: "order", to: "bill", label: "invoice" }],
+ *   edges: [{ from: "order", to: "bill", label: "invoice" }],
+ *   style: { box },
  * });
  * await svg.write("diagram.svg");
  * svg.report.diagram.connectors; // where the routes ended up, in the order given
@@ -32,22 +34,6 @@ export interface Bounds {
     width: number;
     height: number;
 }
-/** A box, or a circle whose bounds are the square around it. */
-export interface SketchNode {
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    shape?: "rect" | "circle";
-    /** Its text, lines split at `\n`: at the top left of a node with children, centred in any other. */
-    label?: string;
-    fontSize?: number;
-    /** The node this one sits inside. */
-    parent?: string;
-    /** Whether it may overlap other nodes on purpose. */
-    allowOverlap?: boolean;
-}
 /**
  * A connector from one node to another, along `points` when given. Without
  * them it runs between the nodes' centres, which rendering reroutes from
@@ -64,10 +50,13 @@ export interface SketchConnector {
 }
 /**
  * A node drawn by the style its `class` names, with its origin at `x`, `y`.
- * It lies around what the style draws, and rendering moves it but never
- * resizes it. Its other fields, such as `label`, are for the style to use.
+ * It lies around what the style draws, or the rect or circle the style marks
+ * `data-bounds="true"`, and rendering moves it but never resizes it. Its
+ * other fields, such as `label`, are for the style to use: `box` and
+ * `circle` from `nicevg/style/simple` take `width`, `height`, `label` and
+ * `fontSize`.
  */
-export interface StyledNode {
+export interface SketchNode {
     id: string;
     x: number;
     y: number;
@@ -78,16 +67,16 @@ export interface StyledNode {
     allowOverlap?: boolean;
     [field: string]: unknown;
 }
-/** Draws a styled node's picture, from its own origin, with `svg` and `text`. */
-export type Style<Node extends StyledNode = StyledNode> = (node: Node) => SvgFragment;
+/** Draws a node's picture, from its own origin, with `svg` and `text`. */
+export type Style<Node extends SketchNode = SketchNode> = (node: Node) => SvgFragment;
 /** A style for each class the nodes name, each given the nodes of its class. */
-export type Styles<Node extends SketchNode | StyledNode> = {
-    [Class in Extract<Node, StyledNode>["class"]]: Style<Extract<Node, {
+export type Styles<Node extends SketchNode> = {
+    [Class in Node["class"]]: Style<Extract<Node, {
         class: Class;
     }>>;
 };
 /** A diagram as nodes and the edges (connectors) between them. */
-export interface Sketch<Node extends SketchNode | StyledNode = SketchNode | StyledNode> {
+export interface Sketch<Node extends SketchNode = SketchNode> {
     nodes: readonly Node[];
     edges?: SketchConnector[];
     /** The same as `edges`, its name before; pass one or the other. */
@@ -101,7 +90,7 @@ export interface Sketch<Node extends SketchNode | StyledNode = SketchNode | Styl
     rootAttrs?: Record<string, string | number>;
 }
 /** A diagram to render: a sketch, SVG text following nicevg's SVG contract, or an Svg rendered before. */
-export type Input<Node extends SketchNode | StyledNode = SketchNode | StyledNode> = Sketch<Node> | {
+export type Input<Node extends SketchNode = SketchNode> = Sketch<Node> | {
     svg: string;
 } | Svg;
 export interface DiagramNode {
@@ -111,6 +100,8 @@ export interface DiagramNode {
     labelBounds: Bounds[];
     parentId?: string;
     allowOverlap?: boolean;
+    /** Drawn by a style: its texts are kept clear of, but not checked to fit. */
+    custom?: boolean;
 }
 export interface DiagramConnector {
     /** Its id in an SVG; a sketch's connectors get one for their labels to refer to. */
@@ -177,4 +168,4 @@ export declare class NicevgError extends Error {
  * routes through nodes, stray labels and more), routes the connectors given
  * no points, and moves nodes a little where that reads better.
  */
-export declare function render<const Node extends SketchNode | StyledNode>(input: Input<Node>): Svg;
+export declare function render<const Node extends SketchNode>(input: Input<Node>): Svg;

package/dist/index.js

@@ -5,13 +5,15 @@
  *
  * ```ts
  * import { render } from "nicevg";
+ * import { box } from "nicevg/style/simple";
  *
  * const svg = render({
  *   nodes: [
- *     { id: "order", x: 20, y: 20, width: 120, height: 56, label: "Order" },
- *     { id: "bill", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
+ *     { id: "order", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" },
+ *     { id: "bill", class: "box", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
  *   ],
- *   connectors: [{ from: "order", to: "bill", label: "invoice" }],
+ *   edges: [{ from: "order", to: "bill", label: "invoice" }],
+ *   style: { box },
  * });
  * await svg.write("diagram.svg");
  * svg.report.diagram.connectors; // where the routes ended up, in the order given
@@ -63,7 +65,7 @@ export function render(input) {
     }
     return new Svg(reply.ok.svg, reply.ok.changes, reply.ok.report);
 }
-/** The sketch as the native library reads it: styled nodes drawn, edges as connectors. */
+/** The sketch as the native library reads it: nodes drawn by their styles, edges as connectors. */
 function sketchRequest({ nodes, edges, connectors, style, rootAttrs }) {
     // Each style is called only with nodes of its own class.
     const styles = (style ?? {});
@@ -72,8 +74,8 @@ function sketchRequest({ nodes, edges, connectors, style, rootAttrs }) {
     }
     return {
         nodes: nodes.map((node, index) => {
-            if (!("class" in node)) {
-                return node;
+            if (typeof node.class !== "string") {
+                throw new NicevgError(`nodes[${index}].class: every node needs the class of the style that draws it`);
             }
             const draw = Object.hasOwn(styles, node.class) ? styles[node.class] : undefined;
             if (!draw) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/style/simple.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Boxes and circles drawn the way nicevg draws a sketch's rect and circle
+ * nodes: white, outlined in black, the label centred in lines. A label
+ * too big for its node grows it as fixing grows those, so a diagram
+ * drawn with these styles arranges as the same diagram without them.
+ *
+ * ```ts
+ * import { render } from "nicevg";
+ * import { box, circle } from "nicevg/style/simple";
+ *
+ * render({ nodes: [{ id: "a", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" }], style: { box, circle } });
+ * ```
+ */
+import { type SvgFragment } from "../draw.ts";
+/** A node a simple style draws: the box it takes, and its text. */
+export interface SimpleNode {
+    width: number;
+    height: number;
+    /** Its text, lines split at `\n`, centred. */
+    label?: string;
+    fontSize?: number;
+}
+/** A box, grown to keep its label 12px inside it. */
+export declare function box({ width, height, label: content, fontSize }: SimpleNode): SvgFragment;
+/** A circle in the middle of the box it is given, grown to keep its label 12px inside it. */
+export declare function circle({ width, height, label: content, fontSize }: SimpleNode): SvgFragment;

package/dist/style/simple.js

@@ -0,0 +1,80 @@
+/**
+ * Boxes and circles drawn the way nicevg draws a sketch's rect and circle
+ * nodes: white, outlined in black, the label centred in lines. A label
+ * too big for its node grows it as fixing grows those, so a diagram
+ * drawn with these styles arranges as the same diagram without them.
+ *
+ * ```ts
+ * import { render } from "nicevg";
+ * import { box, circle } from "nicevg/style/simple";
+ *
+ * render({ nodes: [{ id: "a", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" }], style: { box, circle } });
+ * ```
+ */
+import { WIDE, svg } from "../draw.js";
+const LINE_HEIGHT = 1.2;
+/** How far a label keeps inside its node. */
+const PADDING = 12;
+/** nicevg's rounding: half up. */
+const round = (value) => (value - Math.floor(value) >= 0.5 ? Math.floor(value) + 1 : Math.floor(value));
+/** A line's width as nicevg estimates it: wide characters one font size, others 0.59, rounded. */
+function lineWidth(line, size) {
+    let wide = 0;
+    let narrow = 0;
+    for (const character of line) {
+        if (WIDE.test(character)) {
+            wide += 1;
+        }
+        else {
+            narrow += character.length;
+        }
+    }
+    return round(narrow * size * 0.59 + wide * size);
+}
+/** A label centred on `cx`, `cy` as nicevg writes one, and the box nicevg measures around it. */
+function label(content, cx, cy, size) {
+    const lines = content.split("\n");
+    const first = cy - ((lines.length - 1) * size * LINE_HEIGHT) / 2 + size * 0.35;
+    const ys = lines.map((_, index) => first + index * size * LINE_HEIGHT);
+    const boxes = lines.map((line, index) => {
+        const width = lineWidth(line, size);
+        return { x: cx - width / 2, y: ys[index] - size, width, height: round(size * LINE_HEIGHT) };
+    });
+    const left = Math.min(...boxes.map((b) => b.x));
+    const top = Math.min(...boxes.map((b) => b.y));
+    const right = Math.max(...boxes.map((b) => b.x + b.width));
+    const bottom = Math.max(...boxes.map((b) => b.y + b.height));
+    return {
+        markup: svg `<text text-anchor="middle" font-size="${size}">${lines.map((line, index) => svg `<tspan x="${cx}" y="${ys[index]}">${line}</tspan>`)}</text>`,
+        bounds: { x: left, y: top, width: right - left, height: bottom - top },
+    };
+}
+/** A box, grown to keep its label 12px inside it. */
+export function box({ width, height, label: content, fontSize = 14 }) {
+    if (content === undefined) {
+        return svg `<rect data-bounds="true" x="0" y="0" width="${width}" height="${height}" fill="white" stroke="black"/>`;
+    }
+    const text = label(content, width / 2, height / 2, fontSize);
+    const left = Math.min(0, text.bounds.x - PADDING);
+    const top = Math.min(0, text.bounds.y - PADDING);
+    const right = Math.max(width, text.bounds.x + text.bounds.width + PADDING);
+    const bottom = Math.max(height, text.bounds.y + text.bounds.height + PADDING);
+    return svg `<rect data-bounds="true" x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" fill="white" stroke="black"/>${text.markup}`;
+}
+/** A circle in the middle of the box it is given, grown to keep its label 12px inside it. */
+export function circle({ width, height, label: content, fontSize = 14 }) {
+    const [cx, cy] = [width / 2, height / 2];
+    let radius = Math.min(width, height) / 2;
+    if (content === undefined) {
+        return svg `<circle data-bounds="true" cx="${cx}" cy="${cy}" r="${radius}" fill="white" stroke="black"/>`;
+    }
+    const text = label(content, cx, cy, fontSize);
+    const dx = Math.max(Math.abs(text.bounds.x - cx), Math.abs(text.bounds.x + text.bounds.width - cx));
+    const dy = Math.max(Math.abs(text.bounds.y - cy), Math.abs(text.bounds.y + text.bounds.height - cy));
+    const needed = Math.hypot(dx, dy) + PADDING;
+    if (needed > radius) {
+        radius = Math.ceil(needed);
+    }
+    return svg `<circle data-bounds="true" cx="${cx}" cy="${cy}" r="${radius}" fill="white" stroke="black"/>${text.markup}`;
+}
+//# sourceMappingURL=simple.js.map

package/dist/style/simple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.js","sourceRoot":"","sources":["../../src/style/simple.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nicevg",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Deterministic checks and repairs for diagrams, given as shapes or SVG, on Bun and Node through native FFI.",
   "keywords": [
     "diagram",
@@ -28,11 +28,17 @@
       "types": "./dist/index.d.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
+    },
+    "./style/simple": {
+      "types": "./dist/style/simple.d.ts",
+      "bun": "./src/style/simple.ts",
+      "default": "./dist/style/simple.js"
     }
   },
   "files": [
     "dist",
     "src/*.ts",
+    "src/style/*.ts",
     "native"
   ],
   "engines": {

package/src/draw.ts

@@ -51,17 +51,17 @@ export function svg(strings: TemplateStringsArray, ...values: unknown[]): SvgFra
 }
 
 // shortcut: the common wide ranges (CJK, kana, hangul, fullwidth forms), not every East Asian Wide character; widen it if a script measures short.
-const WIDE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]|[\u{20000}-\u{3fffd}]/u;
+export const WIDE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]|[\u{20000}-\u{3fffd}]/u;
 
 /** Where a text goes: one of `left`, `cx`, `right` across, one of `top`, `cy`, `bottom` down. */
 export type TextPlace = ({ left: number } | { cx: number } | { right: number }) &
   ({ top: number } | { cy: number } | { bottom: number });
 
-/** A line of text, sized the way nicevg measures text, placed with `at`. */
+/** A text of one or more lines (split at `\n`), sized the way nicevg measures text, placed with `at`. */
 export class Text {
-  /** Its width, wide characters one font size each and others 0.59. */
+  /** Its widest line's width, wide characters one font size each and others 0.59. */
   readonly width: number;
-  /** Its line's height, 1.2 font sizes. */
+  /** Its lines' height, 1.2 font sizes each. */
   readonly height: number;
 
   constructor(
@@ -69,12 +69,15 @@ export class Text {
     readonly size = 14,
     readonly place: TextPlace = { left: 0, top: 0 },
   ) {
-    let width = 0;
-    for (const character of content) {
-      width += WIDE.test(character) ? size : character.length * size * 0.59;
-    }
-    this.width = Math.ceil(width);
-    this.height = Math.ceil(size * 1.2);
+    const widths = content.split("\n").map((line) => {
+      let width = 0;
+      for (const character of line) {
+        width += WIDE.test(character) ? size : character.length * size * 0.59;
+      }
+      return width;
+    });
+    this.width = Math.ceil(Math.max(...widths));
+    this.height = Math.ceil(widths.length * size * 1.2);
   }
 
   /** This text with the point of its box named in `place` at the coordinates given. */
@@ -89,17 +92,28 @@ export class Text {
     return new Text(this.content, this.size, place);
   }
 
-  /** The `<text>` element, centred on its line by `dominant-baseline`. */
+  /** The `<text>` element, each line centred on itself by `dominant-baseline`, more than one as `<tspan>`s. */
   toString(): string {
     const place = this.place as Record<string, number>;
     const [x, anchor] =
       "cx" in place ? [place.cx!, "middle"] : "right" in place ? [place.right!, "end"] : [place.left!, "start"];
     const y = "cy" in place ? place.cy! : "top" in place ? place.top! + this.height / 2 : place.bottom! - this.height / 2;
-    return `<text x="${x}" y="${y}" font-size="${this.size}" text-anchor="${anchor}" dominant-baseline="central">${escape(this.content)}</text>`;
+    const attributes = `font-size="${this.size}" text-anchor="${anchor}" dominant-baseline="central"`;
+    const lines = this.content.split("\n");
+    if (lines.length === 1) {
+      return `<text x="${x}" y="${y}" ${attributes}>${escape(this.content)}</text>`;
+    }
+    // A tspan with its own x and y is a line of its own, to nicevg as to the renderer.
+    const step = this.size * 1.2;
+    const tspans = lines.map((line, index) => {
+      const lineY = Math.round((y + (index - (lines.length - 1) / 2) * step) * 100) / 100;
+      return `<tspan x="${x}" y="${lineY}">${escape(line)}</tspan>`;
+    });
+    return `<text x="${x}" ${attributes}>${tspans.join("")}</text>`;
   }
 }
 
-/** A line of text at `size` (14 by default), to embed in `svg` once placed with `at`. */
+/** A text at `size` (14 by default), lines split at `\n`, to embed in `svg` once placed with `at`. */
 export function text(content: string, size = 14): Text {
   return new Text(content, size);
 }

package/src/index.ts

@@ -5,13 +5,15 @@
  *
  * ```ts
  * import { render } from "nicevg";
+ * import { box } from "nicevg/style/simple";
  *
  * const svg = render({
  *   nodes: [
- *     { id: "order", x: 20, y: 20, width: 120, height: 56, label: "Order" },
- *     { id: "bill", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
+ *     { id: "order", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" },
+ *     { id: "bill", class: "box", x: 300, y: 160, width: 120, height: 56, label: "Bill" },
  *   ],
- *   connectors: [{ from: "order", to: "bill", label: "invoice" }],
+ *   edges: [{ from: "order", to: "bill", label: "invoice" }],
+ *   style: { box },
  * });
  * await svg.write("diagram.svg");
  * svg.report.diagram.connectors; // where the routes ended up, in the order given
@@ -40,23 +42,6 @@ export interface Bounds {
   height: number;
 }
 
-/** A box, or a circle whose bounds are the square around it. */
-export interface SketchNode {
-  id: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  shape?: "rect" | "circle";
-  /** Its text, lines split at `\n`: at the top left of a node with children, centred in any other. */
-  label?: string;
-  fontSize?: number;
-  /** The node this one sits inside. */
-  parent?: string;
-  /** Whether it may overlap other nodes on purpose. */
-  allowOverlap?: boolean;
-}
-
 /**
  * A connector from one node to another, along `points` when given. Without
  * them it runs between the nodes' centres, which rendering reroutes from
@@ -74,10 +59,13 @@ export interface SketchConnector {
 
 /**
  * A node drawn by the style its `class` names, with its origin at `x`, `y`.
- * It lies around what the style draws, and rendering moves it but never
- * resizes it. Its other fields, such as `label`, are for the style to use.
+ * It lies around what the style draws, or the rect or circle the style marks
+ * `data-bounds="true"`, and rendering moves it but never resizes it. Its
+ * other fields, such as `label`, are for the style to use: `box` and
+ * `circle` from `nicevg/style/simple` take `width`, `height`, `label` and
+ * `fontSize`.
  */
-export interface StyledNode {
+export interface SketchNode {
   id: string;
   x: number;
   y: number;
@@ -89,16 +77,16 @@ export interface StyledNode {
   [field: string]: unknown;
 }
 
-/** Draws a styled node's picture, from its own origin, with `svg` and `text`. */
-export type Style<Node extends StyledNode = StyledNode> = (node: Node) => SvgFragment;
+/** Draws a node's picture, from its own origin, with `svg` and `text`. */
+export type Style<Node extends SketchNode = SketchNode> = (node: Node) => SvgFragment;
 
 /** A style for each class the nodes name, each given the nodes of its class. */
-export type Styles<Node extends SketchNode | StyledNode> = {
-  [Class in Extract<Node, StyledNode>["class"]]: Style<Extract<Node, { class: Class }>>;
+export type Styles<Node extends SketchNode> = {
+  [Class in Node["class"]]: Style<Extract<Node, { class: Class }>>;
 };
 
 /** A diagram as nodes and the edges (connectors) between them. */
-export interface Sketch<Node extends SketchNode | StyledNode = SketchNode | StyledNode> {
+export interface Sketch<Node extends SketchNode = SketchNode> {
   nodes: readonly Node[];
   edges?: SketchConnector[];
   /** The same as `edges`, its name before; pass one or the other. */
@@ -113,7 +101,7 @@ export interface Sketch<Node extends SketchNode | StyledNode = SketchNode | Styl
 }
 
 /** A diagram to render: a sketch, SVG text following nicevg's SVG contract, or an Svg rendered before. */
-export type Input<Node extends SketchNode | StyledNode = SketchNode | StyledNode> = Sketch<Node> | { svg: string } | Svg;
+export type Input<Node extends SketchNode = SketchNode> = Sketch<Node> | { svg: string } | Svg;
 
 export interface DiagramNode {
   id: string;
@@ -122,6 +110,8 @@ export interface DiagramNode {
   labelBounds: Bounds[];
   parentId?: string;
   allowOverlap?: boolean;
+  /** Drawn by a style: its texts are kept clear of, but not checked to fit. */
+  custom?: boolean;
 }
 
 export interface DiagramConnector {
@@ -201,7 +191,7 @@ export class NicevgError extends Error {
  * routes through nodes, stray labels and more), routes the connectors given
  * no points, and moves nodes a little where that reads better.
  */
-export function render<const Node extends SketchNode | StyledNode>(input: Input<Node>): Svg {
+export function render<const Node extends SketchNode>(input: Input<Node>): Svg {
   const request = new TextEncoder().encode(
     JSON.stringify(input instanceof Svg ? { svg: input.toString() } : "svg" in input ? input : sketchRequest(input)),
   );
@@ -214,8 +204,8 @@ export function render<const Node extends SketchNode | StyledNode>(input: Input<
   return new Svg(reply.ok.svg, reply.ok.changes, reply.ok.report);
 }
 
-/** The sketch as the native library reads it: styled nodes drawn, edges as connectors. */
-function sketchRequest<Node extends SketchNode | StyledNode>({ nodes, edges, connectors, style, rootAttrs }: Sketch<Node>) {
+/** The sketch as the native library reads it: nodes drawn by their styles, edges as connectors. */
+function sketchRequest<Node extends SketchNode>({ nodes, edges, connectors, style, rootAttrs }: Sketch<Node>) {
   // Each style is called only with nodes of its own class.
   const styles = (style ?? {}) as Record<string, Style>;
   if (edges && connectors) {
@@ -223,8 +213,8 @@ function sketchRequest<Node extends SketchNode | StyledNode>({ nodes, edges, con
   }
   return {
     nodes: nodes.map((node, index) => {
-      if (!("class" in node)) {
-        return node;
+      if (typeof node.class !== "string") {
+        throw new NicevgError(`nodes[${index}].class: every node needs the class of the style that draws it`);
       }
       const draw = Object.hasOwn(styles, node.class) ? styles[node.class] : undefined;
       if (!draw) {

package/src/style/simple.ts

@@ -0,0 +1,101 @@
+/**
+ * Boxes and circles drawn the way nicevg draws a sketch's rect and circle
+ * nodes: white, outlined in black, the label centred in lines. A label
+ * too big for its node grows it as fixing grows those, so a diagram
+ * drawn with these styles arranges as the same diagram without them.
+ *
+ * ```ts
+ * import { render } from "nicevg";
+ * import { box, circle } from "nicevg/style/simple";
+ *
+ * render({ nodes: [{ id: "a", class: "box", x: 20, y: 20, width: 120, height: 56, label: "Order" }], style: { box, circle } });
+ * ```
+ */
+
+import { type SvgFragment, WIDE, svg } from "../draw.ts";
+
+/** A node a simple style draws: the box it takes, and its text. */
+export interface SimpleNode {
+  width: number;
+  height: number;
+  /** Its text, lines split at `\n`, centred. */
+  label?: string;
+  fontSize?: number;
+}
+
+const LINE_HEIGHT = 1.2;
+/** How far a label keeps inside its node. */
+const PADDING = 12;
+
+/** nicevg's rounding: half up. */
+const round = (value: number) => (value - Math.floor(value) >= 0.5 ? Math.floor(value) + 1 : Math.floor(value));
+
+/** A line's width as nicevg estimates it: wide characters one font size, others 0.59, rounded. */
+function lineWidth(line: string, size: number): number {
+  let wide = 0;
+  let narrow = 0;
+  for (const character of line) {
+    if (WIDE.test(character)) {
+      wide += 1;
+    } else {
+      narrow += character.length;
+    }
+  }
+  return round(narrow * size * 0.59 + wide * size);
+}
+
+interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** A label centred on `cx`, `cy` as nicevg writes one, and the box nicevg measures around it. */
+function label(content: string, cx: number, cy: number, size: number): { markup: SvgFragment; bounds: Box } {
+  const lines = content.split("\n");
+  const first = cy - ((lines.length - 1) * size * LINE_HEIGHT) / 2 + size * 0.35;
+  const ys = lines.map((_, index) => first + index * size * LINE_HEIGHT);
+  const boxes = lines.map((line, index) => {
+    const width = lineWidth(line, size);
+    return { x: cx - width / 2, y: ys[index]! - size, width, height: round(size * LINE_HEIGHT) };
+  });
+  const left = Math.min(...boxes.map((b) => b.x));
+  const top = Math.min(...boxes.map((b) => b.y));
+  const right = Math.max(...boxes.map((b) => b.x + b.width));
+  const bottom = Math.max(...boxes.map((b) => b.y + b.height));
+  return {
+    markup: svg`<text text-anchor="middle" font-size="${size}">${lines.map((line, index) => svg`<tspan x="${cx}" y="${ys[index]!}">${line}</tspan>`)}</text>`,
+    bounds: { x: left, y: top, width: right - left, height: bottom - top },
+  };
+}
+
+/** A box, grown to keep its label 12px inside it. */
+export function box({ width, height, label: content, fontSize = 14 }: SimpleNode): SvgFragment {
+  if (content === undefined) {
+    return svg`<rect data-bounds="true" x="0" y="0" width="${width}" height="${height}" fill="white" stroke="black"/>`;
+  }
+  const text = label(content, width / 2, height / 2, fontSize);
+  const left = Math.min(0, text.bounds.x - PADDING);
+  const top = Math.min(0, text.bounds.y - PADDING);
+  const right = Math.max(width, text.bounds.x + text.bounds.width + PADDING);
+  const bottom = Math.max(height, text.bounds.y + text.bounds.height + PADDING);
+  return svg`<rect data-bounds="true" x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" fill="white" stroke="black"/>${text.markup}`;
+}
+
+/** A circle in the middle of the box it is given, grown to keep its label 12px inside it. */
+export function circle({ width, height, label: content, fontSize = 14 }: SimpleNode): SvgFragment {
+  const [cx, cy] = [width / 2, height / 2];
+  let radius = Math.min(width, height) / 2;
+  if (content === undefined) {
+    return svg`<circle data-bounds="true" cx="${cx}" cy="${cy}" r="${radius}" fill="white" stroke="black"/>`;
+  }
+  const text = label(content, cx, cy, fontSize);
+  const dx = Math.max(Math.abs(text.bounds.x - cx), Math.abs(text.bounds.x + text.bounds.width - cx));
+  const dy = Math.max(Math.abs(text.bounds.y - cy), Math.abs(text.bounds.y + text.bounds.height - cy));
+  const needed = Math.hypot(dx, dy) + PADDING;
+  if (needed > radius) {
+    radius = Math.ceil(needed);
+  }
+  return svg`<circle data-bounds="true" cx="${cx}" cy="${cy}" r="${radius}" fill="white" stroke="black"/>${text.markup}`;
+}