@adecore/drawing 0.38.0 → 0.40.0

package/dist/geometry.d.ts

@@ -22,6 +22,7 @@ export declare function drawnBoundsOfElements(elements: readonly DrawingElement[
 export declare function intersects(a: Rect, b: Rect): boolean;
 export declare function rectFromPoints(from: Point, to: Point): Rect;
 export declare function absolutePoints(element: DrawingElement): Point[];
+export declare function isFilled(element: DrawingElement): boolean;
 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[];

package/dist/geometry.js

@@ -42,6 +42,14 @@ export function unionOf(rects) {
 export function boundsOfElements(elements) {
     return unionOf(elements.map(boundsOf));
 }
+function cornersOf(rect) {
+    return [
+        { 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 }
+    ];
+}
 /* The box around an element as it is drawn: the stored box, turned by its angle. */
 export function drawnBoundsOf(element) {
     const rect = boundsOf(element);
@@ -50,12 +58,7 @@ export function drawnBoundsOf(element) {
         return rect;
     }
     const center = centerOf(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 }
-    ].map((corner) => rotatePoint(corner, center, angle));
+    const corners = cornersOf(rect).map((corner) => rotatePoint(corner, center, angle));
     const xs = corners.map((corner) => corner.x);
     const ys = corners.map((corner) => corner.y);
     const left = Math.min(...xs);
@@ -92,7 +95,7 @@ export function absolutePoints(element) {
     }
     return element.points.map(([x, y]) => ({ x: element.x + x, y: element.y + y }));
 }
-function isFilled(element) {
+export function isFilled(element) {
     return element.fill !== undefined && element.fill !== 'none';
 }
 function cornersOfDiamond(rect) {
@@ -139,15 +142,8 @@ export function hitsElement(element, point, tolerance) {
         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 'rect':
+            return isFilled(element) ? insideRect(local, rect) : nearPolygon(local, cornersOf(rect), reach);
         case 'diamond': {
             const corners = cornersOfDiamond(rect);
             return isFilled(element) ? insidePolygon(local, corners) : nearPolygon(local, corners, reach);

package/dist/paths.js

@@ -1,7 +1,7 @@
 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 { arrowHead, arrowHeadSize, isFilled } 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';
@@ -19,7 +19,6 @@ function dashOf(element) {
     }
     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:
@@ -36,7 +35,7 @@ function optionsOf(element) {
         stroke: STROKE,
         strokeWidth: element.strokeWidth,
         ...roughnessOf(element),
-        ...(element.fill && element.fill !== 'none'
+        ...(isFilled(element)
             ? { fill: FILL, fillStyle: element.fill === 'solid' ? 'solid' : 'hachure', fillWeight: element.strokeWidth / 2, hachureGap: 8 }
             : {})
     };
@@ -84,11 +83,11 @@ export function pathsOfElement(element) {
             { d: sheet, 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 options = optionsOf(element);
+    const dash = dashOf(element);
     const generator = drawingGenerator();
     const drawable = (() => {
         switch (element.kind) {

package/dist/protocol.js

@@ -1,8 +1,6 @@
 import { z } from 'zod';
 export const DrawingFontSchema = z.enum(['hand', 'sans', 'mono']);
-/*
- * Palette names keep a document independent of the theme that renders it.
- */
+/* Palette names keep a document independent of the theme that renders it. */
 export const DrawingColorSchema = z.enum(['ink', 'muted', 'accent', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']);
 /* In the order the color menu shows them. */
 export const DRAWING_COLORS = DrawingColorSchema.options;

package/dist/reading-order.js

@@ -28,8 +28,7 @@ function labelAt(point, elements, arrowId) {
         }
         const center = centerOf(boundsOf(element));
         const distance = Math.hypot(center.x - point.x, center.y - point.y);
-        const inside = hitsElement({ ...element, fill: 'solid' }, point, LABEL_REACH);
-        if (!inside && distance > LABEL_REACH) {
+        if (distance > LABEL_REACH && !hitsElement({ ...element, fill: 'solid' }, point, LABEL_REACH)) {
             continue;
         }
         const label = labelOf(element) ?? labelInside(element, elements);

package/dist/rebase.js

@@ -57,16 +57,16 @@ export function rebaseDrawingElements(base, mine, theirs) {
     const [leading, following] = mineLeads ? [mine, theirs] : [theirs, mine];
     const order = leading.map((element) => element.id).filter((id) => resolved.has(id));
     const placed = new Set(order);
-    following.forEach((element, i) => {
-        if (placed.has(element.id) || !resolved.has(element.id)) {
-            return;
+    // The last element before this one on the following side that has a place, which it goes just above.
+    let below;
+    for (const element of following) {
+        if (!placed.has(element.id) && resolved.has(element.id)) {
+            order.splice(below === undefined ? 0 : order.indexOf(below) + 1, 0, element.id);
+            placed.add(element.id);
         }
-        const below = following
-            .slice(0, i)
-            .map((candidate) => candidate.id)
-            .findLast((id) => placed.has(id));
-        order.splice(below === undefined ? 0 : order.indexOf(below) + 1, 0, element.id);
-        placed.add(element.id);
-    });
+        if (placed.has(element.id)) {
+            below = element.id;
+        }
+    }
     return { ok: true, elements: order.flatMap((id) => resolved.get(id) ?? []) };
 }

package/dist/svg.js

@@ -56,7 +56,8 @@ function transformOf(element) {
     return `translate(${round(element.x)} ${round(element.y)})${turn}`;
 }
 function textSvg(element, options) {
-    const family = options.fonts?.[fontOf(element.font)] ?? DEFAULT_FONT_STACKS[fontOf(element.font)];
+    const font = fontOf(element.font);
+    const family = options.fonts?.[font] ?? DEFAULT_FONT_STACKS[font];
     const anchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
     const frame = writingFrameOf(element);
     const dx = frame.x + (element.align === 'center' ? frame.w / 2 : element.align === 'right' ? frame.w : 0);

package/dist/text.d.ts

@@ -11,7 +11,6 @@ export declare function writingFrameOf(element: WrittenElement): {
     y: number;
     w: number;
 };
-export declare function textLines(text: string): string[];
 export type MeasureLine = (line: string) => number;
 export declare function approximateMeasure(size: number, font: DrawingFont | undefined): MeasureLine;
 export declare function wrapLines(text: string, maxWidth: number, measure: MeasureLine): string[];

package/dist/text.js

@@ -17,9 +17,6 @@ export const NOTE_RADIUS = 8;
 export function writingFrameOf(element) {
     return element.kind === 'note' ? { x: NOTE_PADDING, y: NOTE_PADDING, w: Math.max(1, element.w - NOTE_PADDING * 2) } : { x: 0, y: 0, w: element.w };
 }
-export function textLines(text) {
-    return text.split('\n');
-}
 /* A measure for where no font exists, such as on a server: most faces average a glyph a little over half its size wide. */
 export function approximateMeasure(size, font) {
     const glyph = fontOf(font) === 'mono' ? 0.6 : 0.55;
@@ -56,14 +53,14 @@ function wrapParagraph(paragraph, maxWidth, measure) {
     return lines;
 }
 export function wrapLines(text, maxWidth, measure) {
-    return textLines(text).flatMap((paragraph) => wrapParagraph(paragraph, maxWidth, measure));
+    return text.split('\n').flatMap((paragraph) => wrapParagraph(paragraph, maxWidth, measure));
 }
 // An unsized text element follows its content; once sized, its box controls wrapping.
 export function linesOf(element, measure) {
     if (element.kind === 'note') {
         return wrapLines(element.text, writingFrameOf(element).w, measure);
     }
-    return element.sized ? wrapLines(element.text, element.w, measure) : textLines(element.text);
+    return element.sized ? wrapLines(element.text, element.w, measure) : element.text.split('\n');
 }
 /* Absent means hand: a drawing is written by hand unless it says otherwise. */
 export function fontOf(font) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/drawing",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "description": "Drawing schemas, geometry, deterministic paths, SVG export and reading order.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -40,13 +40,13 @@
     "test": "bun test --conditions=source"
   },
   "devDependencies": {
-    "@types/bun": "^1.4.2",
-    "@types/node": "^24.13.6",
+    "@types/bun": "^1.4.4",
+    "@types/node": "^24.19.2",
     "typescript": "^7.0.2"
   },
   "dependencies": {
     "perfect-freehand": "^1.2.3",
     "roughjs": "^4.6.6",
-    "zod": "^4.6.5"
+    "zod": "^4.6.7"
   }
 }

package/src/edits.ts

@@ -115,8 +115,10 @@ function touched(edit: DrawingEdit): number {
 function idProblems(byId: ReadonlyMap<string, DrawingElement>, edit: DrawingEdit): DrawingEditProblem[] {
     const problems: DrawingEditProblem[] = [];
     const named = new Set<string>();
+
     const check = (id: string, path: (string | number)[]): void => {
         const element = byId.get(id);
+
         if (element === undefined) {
             problems.push({ path, message: `the drawing has no element ${id}` });
         } else if (element.locked === true) {
@@ -124,21 +126,27 @@ function idProblems(byId: ReadonlyMap<string, DrawingElement>, edit: DrawingEdit
         } else if (named.has(id)) {
             problems.push({ path, message: `${id} is named twice in this edit` });
         }
+
         named.add(id);
     };
+
     edit.update?.forEach((patch, i) => check(patch.id, ['update', i, 'id']));
     edit.remove?.forEach((id, i) => check(id, ['remove', i]));
+
     return problems;
 }
 
 /* The problems of fields a patch sets that its element's kind does not have. */
 function kindProblems(byId: ReadonlyMap<string, DrawingElement>, edit: DrawingEdit): DrawingEditProblem[] {
     const shared = new Set(Object.keys(placed));
+
     return (edit.update ?? []).flatMap((patch, i) => {
         const element = byId.get(patch.id);
+
         if (element === undefined) {
             return [];
         }
+
         return Object.keys(patch)
             .filter((key) => key !== 'id' && !shared.has(key) && !KIND_FIELDS[element.kind].includes(key))
             .map((key) => ({ path: ['update', i, key], message: `${patch.id} is a ${element.kind}, which has no field ${key}` }));
@@ -147,6 +155,7 @@ function kindProblems(byId: ReadonlyMap<string, DrawingElement>, edit: DrawingEd
 
 function created(element: NewDrawingElement, mint: DrawingEditMint): DrawingElement {
     const base = { stroke: 'ink' as const, strokeWidth: 2 as const, ...element, id: mint.id(), seed: mint.seed() };
+
     return DrawingElementSchema.parse(base.kind === 'text' || base.kind === 'note' ? { size: 20, ...base } : base);
 }
 
@@ -159,42 +168,56 @@ export function applyDrawingEdit(elements: readonly DrawingElement[], edit: Draw
     if (touched(edit) > DRAWING_EDIT_LIMITS.perEdit) {
         return { ok: false, problems: [{ path: [], message: `an edit touches at most ${DRAWING_EDIT_LIMITS.perEdit} elements; split it` }] };
     }
+
     const byId = new Map(elements.map((element) => [element.id, element]));
     const problems = [...idProblems(byId, edit), ...kindProblems(byId, edit)];
     const patches = new Map((edit.update ?? []).map((patch) => [patch.id, patch]));
     const removed = new Set(edit.remove ?? []);
     const next: DrawingElement[] = [];
+
     for (const element of elements) {
         if (removed.has(element.id)) {
             continue;
         }
+
         const patch = patches.get(element.id);
+
         if (patch === undefined) {
             next.push(element);
+
             continue;
         }
+
         const parsed = DrawingElementSchema.safeParse({ ...element, ...patch });
+
         if (!parsed.success) {
             const index = edit.update!.indexOf(patch);
+
             problems.push(
                 ...parsed.error.issues.map((issue) => ({
                     path: ['update', index, ...issue.path.map((key) => (typeof key === 'number' ? key : String(key)))],
                     message: issue.message
                 }))
             );
+
             continue;
         }
+
         next.push(parsed.data);
     }
+
     const added = (edit.add ?? []).map((element) => created(element, mint));
+
     if (next.length + added.length > DRAWING_EDIT_LIMITS.elements) {
         problems.push({
             path: ['add'],
             message: `a drawing holds at most ${DRAWING_EDIT_LIMITS.elements} elements, and this edit would leave it at ${next.length + added.length}`
         });
     }
+
     if (problems.length > 0) {
         return { ok: false, problems };
     }
+
     return { ok: true, elements: [...next, ...added], added: added.map((element) => element.id) };
 }

package/src/geometry.ts

@@ -32,10 +32,12 @@ export function rotatePoint(point: Point, around: Point, angle: number): Point {
     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 };
 }
 
@@ -48,16 +50,19 @@ export function unionOf(rects: readonly Rect[]): Rect | null {
     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 };
 }
 
@@ -65,24 +70,31 @@ export function boundsOfElements(elements: readonly DrawingElement[]): Rect | nu
     return unionOf(elements.map(boundsOf));
 }
 
+function cornersOf(rect: Rect): Point[] {
+    return [
+        { 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 }
+    ];
+}
+
 /* The box around an element as it is drawn: the stored box, turned by its angle. */
 export function drawnBoundsOf(element: DrawingElement): Rect {
     const rect = boundsOf(element);
     const angle = element.angle ?? 0;
+
     if (angle === 0) {
         return rect;
     }
+
     const center = centerOf(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 }
-    ].map((corner) => rotatePoint(corner, center, angle));
+    const corners = cornersOf(rect).map((corner) => rotatePoint(corner, center, angle));
     const xs = corners.map((corner) => corner.x);
     const ys = corners.map((corner) => corner.y);
     const left = Math.min(...xs);
     const top = Math.min(...ys);
+
     return { x: left, y: top, w: Math.max(...xs) - left, h: Math.max(...ys) - top };
 }
 
@@ -107,10 +119,13 @@ function distanceToSegment(point: Point, a: Point, b: Point): number {
     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 along = Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / length));
+
     return Math.hypot(point.x - (a.x + along * dx), point.y - (a.y + along * dy));
 }
 
@@ -118,10 +133,11 @@ export function absolutePoints(element: DrawingElement): Point[] {
     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: DrawingElement): boolean {
+export function isFilled(element: DrawingElement): boolean {
     return element.fill !== undefined && element.fill !== 'none';
 }
 
@@ -136,13 +152,16 @@ function cornersOfDiamond(rect: Rect): Point[] {
 
 function insidePolygon(point: Point, polygon: readonly Point[]): boolean {
     let inside = false;
+
     for (let i = 0, previous = polygon.length - 1; i < polygon.length; previous = i++) {
         const corner = polygon[i]!;
         const before = polygon[previous]!;
+
         if (corner.y > point.y !== before.y > point.y && point.x < ((before.x - corner.x) * (point.y - corner.y)) / (before.y - corner.y) + corner.x) {
             inside = !inside;
         }
     }
+
     return inside;
 }
 
@@ -154,6 +173,7 @@ function nearPolyline(point: Point, points: readonly Point[], tolerance: number)
     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);
 }
 
@@ -169,22 +189,17 @@ export function hitsElement(element: DrawingElement, point: Point, tolerance: nu
     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 'rect':
+            return isFilled(element) ? insideRect(local, rect) : nearPolygon(local, cornersOf(rect), reach);
         case 'diamond': {
             const corners = cornersOfDiamond(rect);
+
             return isFilled(element) ? insidePolygon(local, corners) : nearPolygon(local, corners, reach);
         }
         case 'ellipse': {
@@ -192,9 +207,11 @@ export function hitsElement(element: DrawingElement, point: Point, tolerance: nu
             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':
@@ -206,10 +223,12 @@ export function hitsElement(element: DrawingElement, point: Point, tolerance: nu
 export function elementAt(elements: readonly DrawingElement[], point: Point, tolerance: number): DrawingElement | undefined {
     for (let i = elements.length - 1; i >= 0; i--) {
         const element = elements[i]!;
+
         if (!element.locked && hitsElement(element, point, tolerance)) {
             return element;
         }
     }
+
     return undefined;
 }
 
@@ -220,6 +239,7 @@ export function elementsIn(elements: readonly DrawingElement[], rect: Rect): Dra
 export function handlePoint(rect: Rect, handle: ResizeHandle): Point {
     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 };
 }
 
@@ -229,40 +249,50 @@ export function handlePoint(rect: Rect, handle: ResizeHandle): Point {
  */
 export function resizeRect(rect: Rect, handle: ResizeHandle, point: Point, aspect = false): Rect {
     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: DrawingElement, from: Rect, to: Rect): DrawingElement {
     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,
@@ -270,22 +300,27 @@ export function scaleElement(element: DrawingElement, from: Rect, to: Rect): Dra
         w: element.w * scaleX,
         h: element.h * scaleY
     };
+
     if (placed.kind === 'line') {
         return { ...placed, points: placed.points.map(([x, y]) => [x * scaleX, y * scaleY] as [number, number]) };
     }
+
     if (placed.kind === 'freehand') {
         return { ...placed, points: placed.points.map(([x, y, pressure]) => [x * scaleX, y * scaleY, pressure] as [number, number, number?]) };
     }
+
     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: Point, from: Point, size: number): [Point, Point][] {
     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) }]

package/src/paths.ts

@@ -4,7 +4,7 @@ import { getStroke } from 'perfect-freehand';
 import rough from 'roughjs';
 import type { RoughGenerator } from 'roughjs/bin/generator.js';
 import type { Options } from 'roughjs/bin/core.js';
-import { arrowHead, arrowHeadSize, type Point } from './geometry.ts';
+import { arrowHead, arrowHeadSize, isFilled, type Point } from './geometry.ts';
 import { NOTE_RADIUS } from './text.ts';
 
 /*
@@ -34,13 +34,14 @@ function dashOf(element: DrawingElement): number[] | null {
     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: DrawingElement): Pick<Options, 'roughness' | 'bowing' | 'disableMultiStroke'> {
     switch (element.roughness ?? 1) {
         case 0:
@@ -58,7 +59,7 @@ function optionsOf(element: DrawingElement): Options {
         stroke: STROKE,
         strokeWidth: element.strokeWidth,
         ...roughnessOf(element),
-        ...(element.fill && element.fill !== 'none'
+        ...(isFilled(element)
             ? { fill: FILL, fillStyle: element.fill === 'solid' ? 'solid' : 'hachure', fillWeight: element.strokeWidth / 2, hachureGap: 8 }
             : {})
     };
@@ -67,6 +68,7 @@ function optionsOf(element: DrawingElement): Options {
 // Rough has no rounded-rectangle primitive.
 function roundedRectPath(w: number, h: number, radius: number): string {
     const corner = Math.min(radius, w / 2, h / 2);
+
     return `M ${corner} 0 L ${w - corner} 0 Q ${w} 0 ${w} ${corner} L ${w} ${h - corner} Q ${w} ${h} ${w - corner} ${h} L ${corner} ${h} Q 0 ${h} 0 ${h - corner} L 0 ${corner} Q 0 0 ${corner} 0 Z`;
 }
 
@@ -74,12 +76,15 @@ function outlineToPath(outline: readonly (readonly number[])[]): string {
     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`;
 }
 
 function freehandOutline(element: DrawingElement & { kind: 'freehand' }): string {
     const points = element.points.map(([x, y, pressure]) => [x, y, pressure ?? 0.5] as [number, number, number]);
+
     const outline = getStroke(points, {
         size: element.strokeWidth * 4 + 2,
         thinning: 0.6,
@@ -88,6 +93,7 @@ function freehandOutline(element: DrawingElement & { kind: 'freehand' }): string
         // 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);
 }
 
@@ -103,20 +109,25 @@ export function pathsOfElement(element: DrawingElement): ElementPath[] {
     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 sheet = roundedRectPath(element.w, element.h, NOTE_RADIUS);
+
         return [
             { d: sheet, role: 'fill', strokeWidth: 0, dash: null },
             { d: sheet, 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 options = optionsOf(element);
+    const dash = dashOf(element);
     const generator = drawingGenerator();
+
     const drawable = (() => {
         switch (element.kind) {
             case 'rect':
@@ -142,21 +153,26 @@ export function pathsOfElement(element: DrawingElement): ElementPath[] {
                 );
         }
     })();
+
     const paths: ElementPath[] = generator.toPaths(drawable).map((path) => ({
         d: path.d,
         role: path.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: [Point, Point][] = [
         ...(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 }];
 }

package/src/protocol.ts

@@ -3,9 +3,7 @@ import { z } from 'zod';
 export const DrawingFontSchema = z.enum(['hand', 'sans', 'mono']);
 export type DrawingFont = z.infer<typeof DrawingFontSchema>;
 
-/*
- * Palette names keep a document independent of the theme that renders it.
- */
+/* Palette names keep a document independent of the theme that renders it. */
 export const DrawingColorSchema = z.enum(['ink', 'muted', 'accent', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']);
 export type DrawingColor = z.infer<typeof DrawingColorSchema>;
 
@@ -111,6 +109,7 @@ export const EMPTY_DRAWING: DrawingDocument = { version: 1, rev: 0, elements: []
 /* One version so far, so reading is a parse. A file that is not a drawing at all reads as null. */
 export function migrateDrawing(value: unknown): DrawingDocument | null {
     const parsed = DrawingDocumentSchema.safeParse(value);
+
     return parsed.success ? parsed.data : null;
 }
 
@@ -120,11 +119,14 @@ export function migrateDrawing(value: unknown): DrawingDocument | null {
  */
 export function duplicateElementIdIn(elements: DrawingElement[]): string | null {
     const seen = new Set<string>();
+
     for (const element of elements) {
         if (seen.has(element.id)) {
             return element.id;
         }
+
         seen.add(element.id);
     }
+
     return null;
 }

package/src/reading-order.ts

@@ -17,32 +17,40 @@ function labelInside(element: DrawingElement, elements: readonly DrawingElement[
         if (candidate.kind !== 'text' || candidate.id === element.id) {
             continue;
         }
+
         const center = centerOf(boundsOf(candidate));
+
         if (hitsElement({ ...element, fill: 'solid' }, center, 0)) {
             return labelOf(candidate);
         }
     }
+
     return null;
 }
 
 /* What an arrow points at: the text at that end, or the shape there and the text it holds. */
 function labelAt(point: Point, elements: readonly DrawingElement[], arrowId: string): string | null {
     let best: { label: string; distance: number } | null = null;
+
     for (const element of elements) {
         if (element.id === arrowId || element.kind === 'line' || element.kind === 'freehand') {
             continue;
         }
+
         const center = centerOf(boundsOf(element));
         const distance = Math.hypot(center.x - point.x, center.y - point.y);
-        const inside = hitsElement({ ...element, fill: 'solid' }, point, LABEL_REACH);
-        if (!inside && distance > LABEL_REACH) {
+
+        if (distance > LABEL_REACH && !hitsElement({ ...element, fill: 'solid' }, point, LABEL_REACH)) {
             continue;
         }
+
         const label = labelOf(element) ?? labelInside(element, elements);
+
         if (label && (!best || distance < best.distance)) {
             best = { label, distance };
         }
     }
+
     return best?.label ?? null;
 }
 
@@ -54,29 +62,37 @@ export function readingOrder(elements: readonly DrawingElement[]): string[] {
     // A row is measured from its top text, so a staircase of texts cannot chain into one long line.
     const rows: DrawingElement[][] = [];
     const labeled = elements.filter((element) => labelOf(element) !== null).sort((left, right) => left.y - right.y || left.x - right.x);
+
     for (const element of labeled) {
         const row = rows.at(-1);
+
         if (row && element.y - row[0]!.y <= ROW_TOLERANCE) {
             row.push(element);
         } else {
             rows.push([element]);
         }
     }
+
     const texts = rows.flatMap((row) => row.sort((left, right) => left.x - right.x || left.y - right.y)).map((element) => labelOf(element)!);
 
     const arrows: string[] = [];
+
     for (const element of elements) {
         if (element.kind !== 'line' || (!element.arrowEnd && !element.arrowStart)) {
             continue;
         }
+
         const points = absolutePoints(element);
         const from = labelAt(points[0]!, elements, element.id);
         const to = labelAt(points.at(-1)!, elements, element.id);
+
         if (!from || !to || from === to) {
             continue;
         }
+
         // An arrow that only has a head at its start reads the other way around.
         arrows.push(element.arrowEnd ? `${from} -> ${to}` : `${to} -> ${from}`);
     }
+
     return [...texts, ...arrows];
 }

package/src/rebase.ts

@@ -7,12 +7,15 @@ function canonical(value: unknown): string {
     if (Array.isArray(value)) {
         return `[${value.map(canonical).join(',')}]`;
     }
+
     if (value !== null && typeof value === 'object') {
         const entries = Object.entries(value as Record<string, unknown>)
             .filter(([, entry]) => entry !== undefined)
             .sort(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0));
+
         return `{${entries.map(([key, entry]) => `${JSON.stringify(key)}:${canonical(entry)}`).join(',')}}`;
     }
+
     return JSON.stringify(value);
 }
 
@@ -26,6 +29,7 @@ function restacked(base: readonly DrawingElement[], side: readonly DrawingElemen
     const order = side.map((element) => element.id).filter((id) => shared.has(id));
     const inSide = new Set(order);
     const before = base.map((element) => element.id).filter((id) => inSide.has(id));
+
     return order.some((id, i) => id !== before[i]);
 }
 
@@ -42,38 +46,48 @@ export function rebaseDrawingElements(base: readonly DrawingElement[], mine: rea
     const ids = new Set([...baseById.keys(), ...mineById.keys(), ...theirsById.keys()]);
     const resolved = new Map<string, DrawingElement>();
     const conflicts: string[] = [];
+
     for (const id of ids) {
         const original = baseById.get(id)?.text;
         const ours = mineById.get(id);
         const their = theirsById.get(id);
         const oursChanged = ours?.text !== original;
         const theirsChanged = their?.text !== original;
+
         if (oursChanged && theirsChanged && ours?.text !== their?.text) {
             conflicts.push(id);
+
             continue;
         }
+
         const kept = oursChanged ? ours : their;
+
         if (kept !== undefined) {
             resolved.set(id, kept.element);
         }
     }
+
     if (conflicts.length > 0) {
         return { ok: false, conflicts };
     }
+
     const mineLeads = restacked(base, mine) && !restacked(base, theirs);
     const [leading, following] = mineLeads ? [mine, theirs] : [theirs, mine];
     const order = leading.map((element) => element.id).filter((id) => resolved.has(id));
     const placed = new Set(order);
-    following.forEach((element, i) => {
-        if (placed.has(element.id) || !resolved.has(element.id)) {
-            return;
+    // The last element before this one on the following side that has a place, which it goes just above.
+    let below: string | undefined;
+
+    for (const element of following) {
+        if (!placed.has(element.id) && resolved.has(element.id)) {
+            order.splice(below === undefined ? 0 : order.indexOf(below) + 1, 0, element.id);
+            placed.add(element.id);
         }
-        const below = following
-            .slice(0, i)
-            .map((candidate) => candidate.id)
-            .findLast((id) => placed.has(id));
-        order.splice(below === undefined ? 0 : order.indexOf(below) + 1, 0, element.id);
-        placed.add(element.id);
-    });
+
+        if (placed.has(element.id)) {
+            below = element.id;
+        }
+    }
+
     return { ok: true, elements: order.flatMap((id) => resolved.get(id) ?? []) };
 }

package/src/svg.ts

@@ -80,31 +80,39 @@ function round(value: number): number {
 function transformOf(element: DrawingElement): string {
     // After the translate the paths are in the element's own frame, so its center is half its size.
     const turn = element.angle ? ` rotate(${round((element.angle * 180) / Math.PI)} ${round(element.w / 2)} ${round(element.h / 2)})` : '';
+
     return `translate(${round(element.x)} ${round(element.y)})${turn}`;
 }
 
 function textSvg(element: WrittenElement, options: PaintOptions): string {
-    const family = options.fonts?.[fontOf(element.font)] ?? DEFAULT_FONT_STACKS[fontOf(element.font)];
+    const font = fontOf(element.font);
+    const family = options.fonts?.[font] ?? DEFAULT_FONT_STACKS[font];
     const anchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
     const frame = writingFrameOf(element);
     const dx = frame.x + (element.align === 'center' ? frame.w / 2 : element.align === 'right' ? frame.w : 0);
     const measure = options.measure?.(element) ?? approximateMeasure(element.size, element.font);
+
     const lines = linesOf(element, measure)
         .map((line, index) => `<tspan x="${round(dx)}" y="${round(frame.y + (index + 0.8) * element.size * LINE_HEIGHT)}">${escapeXml(line)}</tspan>`)
         .join('');
+
     return `<text font-family="${escapeXml(family)}" font-size="${element.size}" fill="${options.palette[element.stroke]}" text-anchor="${anchor}">${lines}</text>`;
 }
 
 function pathSvg(path: ElementPath, element: DrawingElement, options: PaintOptions): string {
     const note = element.kind === 'note';
+
     if (path.role === 'stroke') {
         const dash = path.dash ? ` stroke-dasharray="${path.dash.join(' ')}"` : '';
         const line = note ? (options.edge ?? DEFAULT_EDGE)[element.fillColor ?? element.stroke] : options.palette[element.stroke];
+
         return `<path d="${path.d}" fill="none" stroke="${line}" stroke-width="${path.strokeWidth}" stroke-linecap="round"${dash}/>`;
     }
+
     // A note is filled with its paper, which is a palette of pale sheets of its own.
     const fill = note ? (options.paper ?? DEFAULT_PAPER) : options.palette;
     const color = path.role === 'ink' ? options.palette[element.stroke] : fill[element.fillColor ?? element.stroke];
+
     // A hachure fill is a bundle of lines, so it arrives as a stroke with its own width.
     return path.strokeWidth > 0 && path.role === 'fill' && element.fill === 'hachure'
         ? `<path d="${path.d}" fill="none" stroke="${color}" stroke-width="${path.strokeWidth}"/>`
@@ -118,8 +126,10 @@ function elementSvg(element: DrawingElement, options: PaintOptions): string {
             : pathsOfElement(element)
                   .map((path) => pathSvg(path, element, options))
                   .join('');
+
     // The paper is drawn first and the note's own words go on top of it.
     const written = element.kind === 'note' ? textSvg(element, options) : '';
+
     return `<g transform="${transformOf(element)}">${body}${written}</g>`;
 }
 
@@ -137,5 +147,6 @@ export function toSvg(elements: readonly DrawingElement[], options: SvgOptions =
     const h = round(bounds.h + margin * 2);
     const paper = options.background ? `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${options.background}"/>` : '';
     const body = elements.map((element) => elementSvg(element, paint)).join('');
+
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${x} ${y} ${w} ${h}">${paper}${body}</svg>`;
 }

package/src/text.ts

@@ -26,51 +26,59 @@ export function writingFrameOf(element: WrittenElement): { x: number; y: number;
     return element.kind === 'note' ? { x: NOTE_PADDING, y: NOTE_PADDING, w: Math.max(1, element.w - NOTE_PADDING * 2) } : { x: 0, y: 0, w: element.w };
 }
 
-export function textLines(text: string): string[] {
-    return text.split('\n');
-}
-
 export type MeasureLine = (line: string) => number;
 
 /* A measure for where no font exists, such as on a server: most faces average a glyph a little over half its size wide. */
 export function approximateMeasure(size: number, font: DrawingFont | undefined): MeasureLine {
     const glyph = fontOf(font) === 'mono' ? 0.6 : 0.55;
+
     return (line) => line.length * size * glyph;
 }
 
 function wrapParagraph(paragraph: string, maxWidth: number, measure: MeasureLine): string[] {
     const lines: string[] = [];
     let line = '';
+
     const push = (): void => {
         lines.push(line);
         line = '';
     };
+
     for (const word of paragraph.split(' ')) {
         const candidate = line === '' ? word : `${line} ${word}`;
+
         if (measure(candidate) <= maxWidth) {
             line = candidate;
+
             continue;
         }
+
         if (line !== '') {
             push();
         }
+
         if (measure(word) <= maxWidth) {
             line = word;
+
             continue;
         }
+
         for (const glyph of word) {
             if (line !== '' && measure(line + glyph) > maxWidth) {
                 push();
             }
+
             line += glyph;
         }
     }
+
     lines.push(line);
+
     return lines;
 }
 
 export function wrapLines(text: string, maxWidth: number, measure: MeasureLine): string[] {
-    return textLines(text).flatMap((paragraph) => wrapParagraph(paragraph, maxWidth, measure));
+    return text.split('\n').flatMap((paragraph) => wrapParagraph(paragraph, maxWidth, measure));
 }
 
 // An unsized text element follows its content; once sized, its box controls wrapping.
@@ -78,7 +86,8 @@ export function linesOf(element: WrittenElement, measure: MeasureLine): string[]
     if (element.kind === 'note') {
         return wrapLines(element.text, writingFrameOf(element).w, measure);
     }
-    return element.sized ? wrapLines(element.text, element.w, measure) : textLines(element.text);
+
+    return element.sized ? wrapLines(element.text, element.w, measure) : element.text.split('\n');
 }
 
 /* Absent means hand: a drawing is written by hand unless it says otherwise. */