@adecore/drawing 0.21.0 → 0.21.2

package/dist/geometry.js

@@ -60,8 +60,8 @@ export function distanceToSegment(point, a, b) {
     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));
+    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));
 }
 export function absolutePoints(element) {
     if (element.kind !== 'line' && element.kind !== 'freehand') {
@@ -82,10 +82,10 @@ function cornersOfDiamond(rect) {
 }
 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) {
+    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;
         }
     }

package/dist/paths.js

@@ -43,8 +43,8 @@ function optionsOf(element) {
 }
 // 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`;
+    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`;
 }
 export function outlineToPath(outline) {
     if (outline.length === 0) {
@@ -78,10 +78,10 @@ export function pathsOfElement(element) {
     }
     // 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);
+        const sheet = roundedRectPath(element.w, element.h, NOTE_RADIUS);
         return [
-            { d, role: 'fill', strokeWidth: 0, dash: null },
-            { d, role: 'stroke', strokeWidth: element.strokeWidth, dash: null }
+            { d: sheet, role: 'fill', strokeWidth: 0, dash: null },
+            { d: sheet, role: 'stroke', strokeWidth: element.strokeWidth, dash: null }
         ];
     }
     const options = optionsOf(element);
@@ -111,7 +111,7 @@ export function pathsOfElement(element) {
     })();
     const paths = generator.toPaths(drawable).map((path) => ({
         d: path.d,
-        role: path.fill === FILL ? 'fill' : path.stroke === FILL ? 'fill' : 'stroke',
+        role: path.fill === FILL || path.stroke === FILL ? 'fill' : 'stroke',
         strokeWidth: path.strokeWidth,
         dash: path.stroke === STROKE ? dash : null
     }));

package/dist/reading-order.js

@@ -41,7 +41,7 @@ function labelAt(point, elements, arrowId) {
 }
 /*
  * A drawing as lines an agent can read: the texts top to bottom and left to right, then every
- * arrow as the two things it connects. A diagram becomes a list without anyone looking at it.
+ * arrow as the two things it connects.
  */
 export function readingOrder(elements) {
     // A row is measured from its top text, so a staircase of texts cannot chain into one long line.

package/dist/svg.js

@@ -66,30 +66,29 @@ function textSvg(element, options) {
         .join('');
     return `<text font-family="${escapeXml(family)}" font-size="${element.size}" fill="${options.palette[element.stroke]}" text-anchor="${anchor}">${lines}</text>`;
 }
-function elementSvg(element, options) {
+function pathSvg(path, element, options) {
     const note = element.kind === 'note';
-    const paper = options.paper ?? DEFAULT_PAPER;
-    const edge = options.edge ?? DEFAULT_EDGE;
+    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}"/>`
+        : `<path d="${path.d}" fill="${color}" stroke="none"/>`;
+}
+function elementSvg(element, options) {
     const body = element.kind === 'text'
         ? textSvg(element, options)
         : pathsOfElement(element)
-            .map((path) => {
-            const dash = path.dash ? ` stroke-dasharray="${path.dash.join(' ')}"` : '';
-            if (path.role === 'stroke') {
-                const line = note ? 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 ? 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}"/>`
-                : `<path d="${path.d}" fill="${color}" stroke="none"/>`;
-        })
+            .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 = note ? textSvg(element, options) : '';
+    const written = element.kind === 'note' ? textSvg(element, options) : '';
     return `<g transform="${transformOf(element)}">${body}${written}</g>`;
 }
 /*

package/dist/text.js

@@ -20,10 +20,7 @@ export function writingFrameOf(element) {
 export function textLines(text) {
     return text.split('\n');
 }
-/*
- * A measure for where no font exists, such as the daemon writing an SVG for an agent: a glyph is
- * a little over half its size wide, which is what most faces come to on average.
- */
+/* 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;
     return (line) => line.length * size * glyph;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/drawing",
-  "version": "0.21.0",
+  "version": "0.21.2",
   "description": "Drawing schemas, geometry, deterministic paths, SVG export and reading order.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/geometry.ts

@@ -85,8 +85,8 @@ export function distanceToSegment(point: Point, a: Point, b: Point): number {
     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));
+    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));
 }
 
 export function absolutePoints(element: DrawingElement): Point[] {
@@ -111,10 +111,10 @@ function cornersOfDiamond(rect: Rect): Point[] {
 
 function insidePolygon(point: Point, polygon: readonly Point[]): boolean {
     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) {
+    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;
         }
     }

package/src/paths.ts

@@ -66,8 +66,8 @@ function optionsOf(element: DrawingElement): Options {
 
 // Rough has no rounded-rectangle primitive.
 function roundedRectPath(w: number, h: number, radius: number): string {
-    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`;
+    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`;
 }
 
 export function outlineToPath(outline: readonly (readonly number[])[]): string {
@@ -105,10 +105,10 @@ export function pathsOfElement(element: DrawingElement): ElementPath[] {
     }
     // 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);
+        const sheet = roundedRectPath(element.w, element.h, NOTE_RADIUS);
         return [
-            { d, role: 'fill', strokeWidth: 0, dash: null },
-            { d, role: 'stroke', strokeWidth: element.strokeWidth, dash: null }
+            { d: sheet, role: 'fill', strokeWidth: 0, dash: null },
+            { d: sheet, role: 'stroke', strokeWidth: element.strokeWidth, dash: null }
         ];
     }
     const options = optionsOf(element);
@@ -144,7 +144,7 @@ export function pathsOfElement(element: DrawingElement): ElementPath[] {
     })();
     const paths: ElementPath[] = generator.toPaths(drawable).map((path) => ({
         d: path.d,
-        role: path.fill === FILL ? 'fill' : path.stroke === FILL ? 'fill' : 'stroke',
+        role: path.fill === FILL || path.stroke === FILL ? 'fill' : 'stroke',
         strokeWidth: path.strokeWidth,
         dash: path.stroke === STROKE ? dash : null
     }));

package/src/reading-order.ts

@@ -48,7 +48,7 @@ function labelAt(point: Point, elements: readonly DrawingElement[], arrowId: str
 
 /*
  * A drawing as lines an agent can read: the texts top to bottom and left to right, then every
- * arrow as the two things it connects. A diagram becomes a list without anyone looking at it.
+ * arrow as the two things it connects.
  */
 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.

package/src/svg.ts

@@ -1,6 +1,6 @@
 import type { DrawingColor, DrawingElement, DrawingFont } from './protocol.ts';
 import { boundsOfElements, type Rect } from './geometry.ts';
-import { pathsOfElement } from './paths.ts';
+import { pathsOfElement, type ElementPath } from './paths.ts';
 import { DEFAULT_FONT_STACKS, LINE_HEIGHT, approximateMeasure, fontOf, linesOf, writingFrameOf, type MeasureLine, type WrittenElement } from './text.ts';
 
 export interface SvgOptions {
@@ -93,31 +93,31 @@ function textSvg(element: WrittenElement, options: SvgOptions): string {
     return `<text font-family="${escapeXml(family)}" font-size="${element.size}" fill="${options.palette[element.stroke]}" text-anchor="${anchor}">${lines}</text>`;
 }
 
-function elementSvg(element: DrawingElement, options: SvgOptions): string {
+function pathSvg(path: ElementPath, element: DrawingElement, options: SvgOptions): string {
     const note = element.kind === 'note';
-    const paper = options.paper ?? DEFAULT_PAPER;
-    const edge = options.edge ?? DEFAULT_EDGE;
+    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}"/>`
+        : `<path d="${path.d}" fill="${color}" stroke="none"/>`;
+}
+
+function elementSvg(element: DrawingElement, options: SvgOptions): string {
     const body =
         element.kind === 'text'
             ? textSvg(element, options)
             : pathsOfElement(element)
-                  .map((path) => {
-                      const dash = path.dash ? ` stroke-dasharray="${path.dash.join(' ')}"` : '';
-                      if (path.role === 'stroke') {
-                          const line = note ? 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 ? 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}"/>`
-                          : `<path d="${path.d}" fill="${color}" stroke="none"/>`;
-                  })
+                  .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 = note ? textSvg(element, options) : '';
+    const written = element.kind === 'note' ? textSvg(element, options) : '';
     return `<g transform="${transformOf(element)}">${body}${written}</g>`;
 }
 

package/src/text.ts

@@ -32,10 +32,7 @@ export function textLines(text: string): string[] {
 
 export type MeasureLine = (line: string) => number;
 
-/*
- * A measure for where no font exists, such as the daemon writing an SVG for an agent: a glyph is
- * a little over half its size wide, which is what most faces come to on average.
- */
+/* 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;