@adecore/drawing 0.0.1 → 0.17.0-beta.2

package/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @adecore/drawing
+
+[![npm](https://img.shields.io/npm/v/@adecore/drawing)](https://www.npmjs.com/package/@adecore/drawing)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/drawing/)
+
+Hand-drawn shapes, arrows, freehand strokes, text and sticky notes as plain JSON, with hit tests and resizing for an editor, paths for a painter, an SVG export and a reading of a drawing as lines of text. It needs no DOM, so a backend exports a stored drawing the same way a page draws it.
+
+**[Documentation with live demos](https://adecore.dev/drawing/)**
+
+## Install
+
+```sh
+bun add @adecore/drawing
+```
+
+## Use
+
+```ts
+import { DEFAULT_PALETTE, readingOrder, toSvg } from '@adecore/drawing';
+import { duplicateElementIdIn, migrateDrawing } from '@adecore/drawing/protocol';
+
+const drawing = migrateDrawing(JSON.parse(file));
+if (drawing === null || duplicateElementIdIn(drawing.elements) !== null) {
+    throw new Error('Not a drawing');
+}
+
+const svg = toSvg(drawing.elements, { palette: DEFAULT_PALETTE });
+const lines = readingOrder(drawing.elements);
+```
+
+## Entry points
+
+| Import | What it holds |
+|---|---|
+| `@adecore/drawing` | Geometry, paths, SVG export, text and reading order |
+| `@adecore/drawing/protocol` | The Zod schemas and types of a drawing; loads nothing else |
+
+## Documentation
+
+| Page | What it covers |
+|---|---|
+| [Documents](https://adecore.dev/drawing/documents) | The document, the seven element kinds and reading a file |
+| [Geometry](https://adecore.dev/drawing/geometry) | Bounds, hit tests, selection and resizing |
+| [Paths and SVG](https://adecore.dev/drawing/rendering) | `toSvg` and the paths of one element for a painter of your own |
+| [Text and reading order](https://adecore.dev/drawing/text) | Wrapping, measuring and `readingOrder` |
+
+## License
+
+FSL-1.1-MIT, see [LICENSE](./LICENSE). Rough.js and perfect-freehand keep their own licenses.

package/dist/geometry.d.ts

@@ -0,0 +1,32 @@
+import type { DrawingElement } from './protocol.ts';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export declare const RESIZE_HANDLES: readonly ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+export type ResizeHandle = (typeof RESIZE_HANDLES)[number];
+export declare function boundsOf(element: Pick<DrawingElement, 'x' | 'y' | 'w' | 'h'>): Rect;
+export declare function centerOf(rect: Rect): Point;
+export declare function roundPoint(point: Point): Point;
+export declare function rotatePoint(point: Point, around: Point, angle: number): Point;
+export declare function toLocal(element: DrawingElement, point: Point): Point;
+export declare function unionOf(rects: readonly Rect[]): Rect | null;
+export declare function boundsOfElements(elements: readonly DrawingElement[]): Rect | null;
+export declare function intersects(a: Rect, b: Rect): boolean;
+export declare function rectFromPoints(from: Point, to: Point): Rect;
+export declare function distanceToSegment(point: Point, a: Point, b: Point): number;
+export declare function absolutePoints(element: DrawingElement): Point[];
+export declare function hitsElement(element: DrawingElement, point: Point, tolerance: number): boolean;
+export declare function elementAt(elements: readonly DrawingElement[], point: Point, tolerance: number): DrawingElement | undefined;
+export declare function elementsIn(elements: readonly DrawingElement[], rect: Rect): DrawingElement[];
+export declare function handlePoint(rect: Rect, handle: ResizeHandle): Point;
+export declare function resizeRect(rect: Rect, handle: ResizeHandle, point: Point, aspect?: boolean): Rect;
+export declare function scaleElement(element: DrawingElement, from: Rect, to: Rect): DrawingElement;
+export declare function arrowHead(tip: Point, from: Point, size: number): [Point, Point][];
+export declare function arrowHeadSize(strokeWidth: number): number;

package/dist/geometry.js

@@ -0,0 +1,233 @@
+export const RESIZE_HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+export function boundsOf(element) {
+    return { x: element.x, y: element.y, w: element.w, h: element.h };
+}
+export function centerOf(rect) {
+    return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 };
+}
+/* A point on the whole pixel, for a layout that lines its boxes and its lines up on a pixel grid. */
+export function roundPoint(point) {
+    return { x: Math.round(point.x), y: Math.round(point.y) };
+}
+export function rotatePoint(point, around, angle) {
+    if (angle === 0) {
+        return point;
+    }
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const dx = point.x - around.x;
+    const dy = point.y - around.y;
+    return { x: around.x + dx * cos - dy * sin, y: around.y + dx * sin + dy * cos };
+}
+/* A point in the element's own frame, so every hit test can pretend nothing is turned. */
+export function toLocal(element, point) {
+    return rotatePoint(point, centerOf(boundsOf(element)), -(element.angle ?? 0));
+}
+export function unionOf(rects) {
+    if (rects.length === 0) {
+        return null;
+    }
+    let left = Infinity;
+    let top = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    for (const rect of rects) {
+        left = Math.min(left, rect.x, rect.x + rect.w);
+        top = Math.min(top, rect.y, rect.y + rect.h);
+        right = Math.max(right, rect.x, rect.x + rect.w);
+        bottom = Math.max(bottom, rect.y, rect.y + rect.h);
+    }
+    return { x: left, y: top, w: right - left, h: bottom - top };
+}
+export function boundsOfElements(elements) {
+    return unionOf(elements.map(boundsOf));
+}
+export function intersects(a, b) {
+    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+export function rectFromPoints(from, to) {
+    return {
+        x: Math.min(from.x, to.x),
+        y: Math.min(from.y, to.y),
+        w: Math.abs(to.x - from.x),
+        h: Math.abs(to.y - from.y)
+    };
+}
+export function distanceToSegment(point, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const length = dx * dx + dy * dy;
+    if (length === 0) {
+        return Math.hypot(point.x - a.x, point.y - a.y);
+    }
+    const t = Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / length));
+    return Math.hypot(point.x - (a.x + t * dx), point.y - (a.y + t * dy));
+}
+export function absolutePoints(element) {
+    if (element.kind !== 'line' && element.kind !== 'freehand') {
+        return [];
+    }
+    return element.points.map(([x, y]) => ({ x: element.x + x, y: element.y + y }));
+}
+function isFilled(element) {
+    return element.fill !== undefined && element.fill !== 'none';
+}
+function cornersOfDiamond(rect) {
+    return [
+        { x: rect.x + rect.w / 2, y: rect.y },
+        { x: rect.x + rect.w, y: rect.y + rect.h / 2 },
+        { x: rect.x + rect.w / 2, y: rect.y + rect.h },
+        { x: rect.x, y: rect.y + rect.h / 2 }
+    ];
+}
+function insidePolygon(point, polygon) {
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const a = polygon[i];
+        const b = polygon[j];
+        if (a.y > point.y !== b.y > point.y && point.x < ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+function nearPolygon(point, polygon, tolerance) {
+    return polygon.some((corner, index) => distanceToSegment(point, corner, polygon[(index + 1) % polygon.length]) <= tolerance);
+}
+function nearPolyline(point, points, tolerance) {
+    if (points.length === 1) {
+        return Math.hypot(point.x - points[0].x, point.y - points[0].y) <= tolerance;
+    }
+    return points.slice(0, -1).some((from, index) => distanceToSegment(point, from, points[index + 1]) <= tolerance);
+}
+function insideRect(point, rect) {
+    return point.x >= rect.x && point.x <= rect.x + rect.w && point.y >= rect.y && point.y <= rect.y + rect.h;
+}
+/*
+ * Whether a point lands on an element. A shape with a fill is hit anywhere inside it, one without
+ * only near its outline, which is what makes an empty rectangle easy to draw inside of.
+ */
+export function hitsElement(element, point, tolerance) {
+    const local = toLocal(element, point);
+    const rect = boundsOf(element);
+    const reach = Math.max(tolerance, element.strokeWidth);
+    switch (element.kind) {
+        // Both are their own sheet: anywhere on it is on them.
+        case 'text':
+        case 'note':
+            return insideRect(local, rect);
+        case 'rect': {
+            const corners = [
+                { x: rect.x, y: rect.y },
+                { x: rect.x + rect.w, y: rect.y },
+                { x: rect.x + rect.w, y: rect.y + rect.h },
+                { x: rect.x, y: rect.y + rect.h }
+            ];
+            return isFilled(element) ? insideRect(local, rect) : nearPolygon(local, corners, reach);
+        }
+        case 'diamond': {
+            const corners = cornersOfDiamond(rect);
+            return isFilled(element) ? insidePolygon(local, corners) : nearPolygon(local, corners, reach);
+        }
+        case 'ellipse': {
+            const center = centerOf(rect);
+            const rx = Math.max(rect.w / 2, 0.01);
+            const ry = Math.max(rect.h / 2, 0.01);
+            const distance = Math.hypot((local.x - center.x) / rx, (local.y - center.y) / ry);
+            if (isFilled(element)) {
+                return distance <= 1;
+            }
+            return Math.abs(distance - 1) <= reach / Math.min(rx, ry);
+        }
+        case 'line':
+        case 'freehand':
+            return nearPolyline(local, absolutePoints(element), reach);
+    }
+}
+export function elementAt(elements, point, tolerance) {
+    for (let i = elements.length - 1; i >= 0; i--) {
+        const element = elements[i];
+        if (!element.locked && hitsElement(element, point, tolerance)) {
+            return element;
+        }
+    }
+    return undefined;
+}
+export function elementsIn(elements, rect) {
+    return elements.filter((element) => !element.locked && intersects(boundsOf(element), rect));
+}
+export function handlePoint(rect, handle) {
+    const x = handle.includes('w') ? rect.x : handle.includes('e') ? rect.x + rect.w : rect.x + rect.w / 2;
+    const y = handle.startsWith('n') ? rect.y : handle.startsWith('s') ? rect.y + rect.h : rect.y + rect.h / 2;
+    return { x, y };
+}
+/*
+ * The box a resize drag makes: the handle follows the pointer and the side across from it stays
+ * put. `aspect` keeps the proportions, which is what Shift asks for.
+ */
+export function resizeRect(rect, handle, point, aspect = false) {
+    let { x, y, w, h } = rect;
+    if (handle.includes('w')) {
+        w = rect.x + rect.w - point.x;
+        x = point.x;
+    }
+    if (handle.includes('e')) {
+        w = point.x - rect.x;
+    }
+    if (handle.startsWith('n')) {
+        h = rect.y + rect.h - point.y;
+        y = point.y;
+    }
+    if (handle.startsWith('s')) {
+        h = point.y - rect.y;
+    }
+    if (aspect && rect.w > 0 && rect.h > 0) {
+        const ratio = rect.h / rect.w;
+        // A side handle moves one dimension, which sets the other; a corner follows the smaller pull.
+        const width = handle === 'e' || handle === 'w' ? w : handle === 'n' || handle === 's' ? h / ratio : Math.abs(w) < Math.abs(h / ratio) ? w : h / ratio;
+        const height = width * ratio;
+        if (handle.includes('w')) {
+            x = rect.x + rect.w - width;
+        }
+        if (handle.startsWith('n')) {
+            y = rect.y + rect.h - height;
+        }
+        w = width;
+        h = height;
+    }
+    return { x, y, w, h };
+}
+export function scaleElement(element, from, to) {
+    const scaleX = from.w === 0 ? 1 : to.w / from.w;
+    const scaleY = from.h === 0 ? 1 : to.h / from.h;
+    const placed = {
+        ...element,
+        x: to.x + (element.x - from.x) * scaleX,
+        y: to.y + (element.y - from.y) * scaleY,
+        w: element.w * scaleX,
+        h: element.h * scaleY
+    };
+    if (placed.kind === 'line') {
+        return { ...placed, points: placed.points.map(([x, y]) => [x * scaleX, y * scaleY]) };
+    }
+    if (placed.kind === 'freehand') {
+        return { ...placed, points: placed.points.map(([x, y, pressure]) => [x * scaleX, y * scaleY, pressure]) };
+    }
+    if (placed.kind === 'text') {
+        // From here on the box is the person's, so typing no longer refits it.
+        return { ...placed, sized: true };
+    }
+    return placed;
+}
+export function arrowHead(tip, from, size) {
+    const angle = Math.atan2(tip.y - from.y, tip.x - from.x);
+    const spread = Math.PI / 7;
+    return [
+        [tip, { x: tip.x - size * Math.cos(angle - spread), y: tip.y - size * Math.sin(angle - spread) }],
+        [tip, { x: tip.x - size * Math.cos(angle + spread), y: tip.y - size * Math.sin(angle + spread) }]
+    ];
+}
+/* How long an arrow head is for a given stroke: heavier lines carry a bigger head. */
+export function arrowHeadSize(strokeWidth) {
+    return 12 + strokeWidth * 4;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { type Point, type Rect, RESIZE_HANDLES, type ResizeHandle, boundsOf, centerOf, roundPoint, rotatePoint, toLocal, unionOf, boundsOfElements, intersects, rectFromPoints, distanceToSegment, absolutePoints, hitsElement, elementAt, elementsIn, handlePoint, resizeRect, scaleElement, arrowHead, arrowHeadSize } from './geometry.ts';
+export { type ElementPath, outlineToPath, freehandOutline, pathsOfElement } from './paths.ts';
+export { readingOrder } from './reading-order.ts';
+export { type SvgOptions, DEFAULT_SVG_MARGIN, DEFAULT_PALETTE, DEFAULT_PAPER, DEFAULT_EDGE, toSvg } from './svg.ts';
+export { LINE_HEIGHT, DEFAULT_FONT_STACKS, type WrittenElement, NOTE_PADDING, NOTE_RADIUS, writingFrameOf, textLines, type MeasureLine, approximateMeasure, wrapLines, linesOf, fontOf } from './text.ts';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { RESIZE_HANDLES, boundsOf, centerOf, roundPoint, rotatePoint, toLocal, unionOf, boundsOfElements, intersects, rectFromPoints, distanceToSegment, absolutePoints, hitsElement, elementAt, elementsIn, handlePoint, resizeRect, scaleElement, arrowHead, arrowHeadSize } from './geometry.js';
+export { outlineToPath, freehandOutline, pathsOfElement } from './paths.js';
+export { readingOrder } from './reading-order.js';
+export { DEFAULT_SVG_MARGIN, DEFAULT_PALETTE, DEFAULT_PAPER, DEFAULT_EDGE, toSvg } from './svg.js';
+export { LINE_HEIGHT, DEFAULT_FONT_STACKS, NOTE_PADDING, NOTE_RADIUS, writingFrameOf, textLines, approximateMeasure, wrapLines, linesOf, fontOf } from './text.js';

package/dist/paths.d.ts

@@ -0,0 +1,12 @@
+import type { DrawingElement } from './protocol.ts';
+export interface ElementPath {
+    d: string;
+    role: 'stroke' | 'fill' | 'ink';
+    strokeWidth: number;
+    dash: number[] | null;
+}
+export declare function outlineToPath(outline: readonly (readonly number[])[]): string;
+export declare function freehandOutline(element: DrawingElement & {
+    kind: 'freehand';
+}): string;
+export declare function pathsOfElement(element: DrawingElement): ElementPath[];

package/dist/paths.js

@@ -0,0 +1,129 @@
+import { getStroke } from 'perfect-freehand';
+// Rough's unbundled modules use extensionless imports; its package entry also runs in Node.
+import rough from 'roughjs';
+import { arrowHead, arrowHeadSize } from './geometry.js';
+import { NOTE_RADIUS } from './text.js';
+// Sentinels, not colors: rough hands them back on every path, which is how a path says what it is.
+const STROKE = '#000001';
+const FILL = '#000002';
+let generator;
+function drawingGenerator() {
+    return (generator ??= rough.generator());
+}
+function dashOf(element) {
+    if (element.strokeStyle === 'dashed') {
+        return [element.strokeWidth * 4, element.strokeWidth * 4];
+    }
+    if (element.strokeStyle === 'dotted') {
+        return [element.strokeWidth, element.strokeWidth * 3];
+    }
+    return null;
+}
+/* Architect, Artist, Cartoonist. Absent reads as Artist, which is what a hand-written file gets. */
+function roughnessOf(element) {
+    switch (element.roughness ?? 1) {
+        case 0:
+            return { roughness: 0, bowing: 0, disableMultiStroke: true };
+        case 2:
+            return { roughness: 2.5, bowing: 2 };
+        default:
+            return { roughness: 1, bowing: 1 };
+    }
+}
+function optionsOf(element) {
+    return {
+        seed: element.seed + 1,
+        stroke: STROKE,
+        strokeWidth: element.strokeWidth,
+        ...roughnessOf(element),
+        ...(element.fill && element.fill !== 'none'
+            ? { fill: FILL, fillStyle: element.fill === 'solid' ? 'solid' : 'hachure', fillWeight: element.strokeWidth / 2, hachureGap: 8 }
+            : {})
+    };
+}
+// Rough has no rounded-rectangle primitive.
+function roundedRectPath(w, h, radius) {
+    const r = Math.min(radius, w / 2, h / 2);
+    return `M ${r} 0 L ${w - r} 0 Q ${w} 0 ${w} ${r} L ${w} ${h - r} Q ${w} ${h} ${w - r} ${h} L ${r} ${h} Q 0 ${h} 0 ${h - r} L 0 ${r} Q 0 0 ${r} 0 Z`;
+}
+export function outlineToPath(outline) {
+    if (outline.length === 0) {
+        return '';
+    }
+    const [first, ...rest] = outline;
+    return `M ${first[0]} ${first[1]} ${rest.map((point) => `L ${point[0]} ${point[1]}`).join(' ')} Z`;
+}
+export function freehandOutline(element) {
+    const points = element.points.map(([x, y, pressure]) => [x, y, pressure ?? 0.5]);
+    const outline = getStroke(points, {
+        size: element.strokeWidth * 4 + 2,
+        thinning: 0.6,
+        smoothing: 0.5,
+        streamline: 0.5,
+        // A pressure of exactly 0.5 on every point is a mouse; the stroke gets its taper from speed.
+        simulatePressure: element.points.every((point) => point[2] === undefined)
+    });
+    return outlineToPath(outline);
+}
+function linesToPath(segments) {
+    return segments.map(([from, to]) => `M ${from.x} ${from.y} L ${to.x} ${to.y}`).join(' ');
+}
+/*
+ * One element as paths in its own frame: the origin is the element's own (x, y), so the painter
+ * translates and turns, and a path can be cached until the element's shape itself changes.
+ */
+export function pathsOfElement(element) {
+    if (element.kind === 'text') {
+        return [];
+    }
+    // A note is a sheet of paper, not a drawn shape: no wobble, and an edge of its own paper color.
+    if (element.kind === 'note') {
+        const d = roundedRectPath(element.w, element.h, NOTE_RADIUS);
+        return [
+            { d, role: 'fill', strokeWidth: 0, dash: null },
+            { d, role: 'stroke', strokeWidth: element.strokeWidth, dash: null }
+        ];
+    }
+    const options = optionsOf(element);
+    const dash = dashOf(element);
+    if (element.kind === 'freehand') {
+        return [{ d: freehandOutline(element), role: 'ink', strokeWidth: 0, dash: null }];
+    }
+    const generator = drawingGenerator();
+    const drawable = (() => {
+        switch (element.kind) {
+            case 'rect':
+                return element.radius
+                    ? generator.path(roundedRectPath(element.w, element.h, element.radius), options)
+                    : generator.rectangle(0, 0, element.w, element.h, options);
+            case 'diamond':
+                return generator.polygon([
+                    [element.w / 2, 0],
+                    [element.w, element.h / 2],
+                    [element.w / 2, element.h],
+                    [0, element.h / 2]
+                ], options);
+            case 'ellipse':
+                return generator.ellipse(element.w / 2, element.h / 2, element.w, element.h, options);
+            case 'line':
+                return generator.linearPath(element.points.map(([x, y]) => [x, y]), options);
+        }
+    })();
+    const paths = generator.toPaths(drawable).map((path) => ({
+        d: path.d,
+        role: path.fill === FILL ? 'fill' : path.stroke === FILL ? 'fill' : 'stroke',
+        strokeWidth: path.strokeWidth,
+        dash: path.stroke === STROKE ? dash : null
+    }));
+    if (element.kind !== 'line') {
+        return paths;
+    }
+    const points = element.points.map(([x, y]) => ({ x, y }));
+    const size = arrowHeadSize(element.strokeWidth);
+    const heads = [
+        ...(element.arrowEnd ? arrowHead(points.at(-1), points.at(-2), size) : []),
+        ...(element.arrowStart ? arrowHead(points[0], points[1], size) : [])
+    ];
+    // The head is always solid: a dashed arrow still points at something.
+    return heads.length === 0 ? paths : [...paths, { d: linesToPath(heads), role: 'stroke', strokeWidth: element.strokeWidth, dash: null }];
+}