@adecore/drawing 0.23.0 → 0.24.0

package/dist/geometry.d.ts

@@ -15,12 +15,12 @@ export declare function boundsOf(element: Pick<DrawingElement, 'x' | 'y' | 'w' |
 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 drawnBoundsOf(element: DrawingElement): Rect;
+export declare function drawnBoundsOfElements(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;

package/dist/geometry.js

@@ -20,7 +20,7 @@ export function rotatePoint(point, around, angle) {
     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) {
+function toLocal(element, point) {
     return rotatePoint(point, centerOf(boundsOf(element)), -(element.angle ?? 0));
 }
 export function unionOf(rects) {
@@ -42,6 +42,29 @@ export function unionOf(rects) {
 export function boundsOfElements(elements) {
     return unionOf(elements.map(boundsOf));
 }
+/* The box around an element as it is drawn: the stored box, turned by its angle. */
+export function drawnBoundsOf(element) {
+    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 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 };
+}
+export function drawnBoundsOfElements(elements) {
+    return unionOf(elements.map(drawnBoundsOf));
+}
 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;
 }
@@ -53,7 +76,7 @@ export function rectFromPoints(from, to) {
         h: Math.abs(to.y - from.y)
     };
 }
-export function distanceToSegment(point, a, b) {
+function distanceToSegment(point, a, b) {
     const dx = b.x - a.x;
     const dy = b.y - a.y;
     const length = dx * dx + dy * dy;
@@ -154,7 +177,7 @@ export function elementAt(elements, point, tolerance) {
     return undefined;
 }
 export function elementsIn(elements, rect) {
-    return elements.filter((element) => !element.locked && intersects(boundsOf(element), rect));
+    return elements.filter((element) => !element.locked && intersects(drawnBoundsOf(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;

package/dist/index.d.ts

@@ -1,5 +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 { type Point, type Rect, RESIZE_HANDLES, type ResizeHandle, boundsOf, centerOf, roundPoint, rotatePoint, unionOf, boundsOfElements, drawnBoundsOf, drawnBoundsOfElements, intersects, rectFromPoints, absolutePoints, elementAt, elementsIn, handlePoint, resizeRect, scaleElement } from './geometry.ts';
+export { type ElementPath, 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';
+export { type SvgOptions, DEFAULT_SVG_MARGIN, DEFAULT_PALETTE, DEFAULT_PAPER, DEFAULT_EDGE, escapeXml, toSvg } from './svg.ts';
+export { LINE_HEIGHT, DEFAULT_FONT_STACKS, type WrittenElement, NOTE_PADDING, writingFrameOf, type MeasureLine, approximateMeasure, linesOf, fontOf } from './text.ts';

package/dist/index.js

@@ -1,5 +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 { RESIZE_HANDLES, boundsOf, centerOf, roundPoint, rotatePoint, unionOf, boundsOfElements, drawnBoundsOf, drawnBoundsOfElements, intersects, rectFromPoints, absolutePoints, elementAt, elementsIn, handlePoint, resizeRect, scaleElement } from './geometry.js';
+export { 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';
+export { DEFAULT_SVG_MARGIN, DEFAULT_PALETTE, DEFAULT_PAPER, DEFAULT_EDGE, escapeXml, toSvg } from './svg.js';
+export { LINE_HEIGHT, DEFAULT_FONT_STACKS, NOTE_PADDING, writingFrameOf, approximateMeasure, linesOf, fontOf } from './text.js';

package/dist/paths.d.ts

@@ -5,8 +5,4 @@ export interface ElementPath {
     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

@@ -46,14 +46,14 @@ function roundedRectPath(w, h, radius) {
     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) {
+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) {
+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,

package/dist/svg.d.ts

@@ -1,7 +1,7 @@
 import type { DrawingColor, DrawingElement, DrawingFont } from './protocol.ts';
 import { type MeasureLine, type WrittenElement } from './text.ts';
 export interface SvgOptions {
-    palette: Record<DrawingColor, string>;
+    palette?: Record<DrawingColor, string>;
     background?: string | null;
     margin?: number;
     fonts?: Partial<Record<DrawingFont, string>>;
@@ -13,4 +13,5 @@ export declare const DEFAULT_SVG_MARGIN = 32;
 export declare const DEFAULT_PALETTE: Record<DrawingColor, string>;
 export declare const DEFAULT_PAPER: Record<DrawingColor, string>;
 export declare const DEFAULT_EDGE: Record<DrawingColor, string>;
-export declare function toSvg(elements: readonly DrawingElement[], options: SvgOptions): string;
+export declare function escapeXml(value: string): string;
+export declare function toSvg(elements: readonly DrawingElement[], options?: SvgOptions): string;

package/dist/svg.js

@@ -1,4 +1,4 @@
-import { boundsOfElements } from './geometry.js';
+import { drawnBoundsOfElements } from './geometry.js';
 import { pathsOfElement } from './paths.js';
 import { DEFAULT_FONT_STACKS, LINE_HEIGHT, approximateMeasure, fontOf, linesOf, writingFrameOf } from './text.js';
 export const DEFAULT_SVG_MARGIN = 32;
@@ -44,7 +44,7 @@ export const DEFAULT_EDGE = {
 // XML has no way to write a control character other than tab and the line breaks, not even escaped.
 // oxlint-disable-next-line no-control-regex
 const NOT_XML = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]/g;
-function escapeXml(value) {
+export function escapeXml(value) {
     return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
 }
 function round(value) {
@@ -95,14 +95,15 @@ function elementSvg(element, options) {
  * The whole drawing as one SVG, in the colors of the theme it is exported from. Fonts are named,
  * never embedded: a file that opens outside the app falls back to a system face.
  */
-export function toSvg(elements, options) {
+export function toSvg(elements, options = {}) {
+    const paint = { ...options, palette: options.palette ?? DEFAULT_PALETTE };
     const margin = options.margin ?? DEFAULT_SVG_MARGIN;
-    const bounds = boundsOfElements(elements) ?? { x: 0, y: 0, w: 1, h: 1 };
+    const bounds = drawnBoundsOfElements(elements) ?? { x: 0, y: 0, w: 1, h: 1 };
     const x = round(bounds.x - margin);
     const y = round(bounds.y - margin);
     const w = round(bounds.w + margin * 2);
     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, options)).join('');
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/drawing",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Drawing schemas, geometry, deterministic paths, SVG export and reading order.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -19,6 +19,7 @@
     "dist",
     "src",
     "!src/**/*.test.ts",
+    "!src/**/__snapshots__",
     "!src/fixtures"
   ],
   "exports": {

package/src/geometry.ts

@@ -40,7 +40,7 @@ export function rotatePoint(point: Point, around: Point, angle: number): Point {
 }
 
 /* A point in the element's own frame, so every hit test can pretend nothing is turned. */
-export function toLocal(element: DrawingElement, point: Point): Point {
+function toLocal(element: DrawingElement, point: Point): Point {
     return rotatePoint(point, centerOf(boundsOf(element)), -(element.angle ?? 0));
 }
 
@@ -65,6 +65,31 @@ export function boundsOfElements(elements: readonly DrawingElement[]): Rect | nu
     return unionOf(elements.map(boundsOf));
 }
 
+/* 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 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 };
+}
+
+export function drawnBoundsOfElements(elements: readonly DrawingElement[]): Rect | null {
+    return unionOf(elements.map(drawnBoundsOf));
+}
+
 export function intersects(a: Rect, b: Rect): boolean {
     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;
 }
@@ -78,7 +103,7 @@ export function rectFromPoints(from: Point, to: Point): Rect {
     };
 }
 
-export function distanceToSegment(point: Point, a: Point, b: Point): number {
+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;
@@ -189,7 +214,7 @@ export function elementAt(elements: readonly DrawingElement[], point: Point, tol
 }
 
 export function elementsIn(elements: readonly DrawingElement[], rect: Rect): DrawingElement[] {
-    return elements.filter((element) => !element.locked && intersects(boundsOf(element), rect));
+    return elements.filter((element) => !element.locked && intersects(drawnBoundsOf(element), rect));
 }
 
 export function handlePoint(rect: Rect, handle: ResizeHandle): Point {

package/src/index.ts

@@ -7,36 +7,30 @@ export {
     centerOf,
     roundPoint,
     rotatePoint,
-    toLocal,
     unionOf,
     boundsOfElements,
+    drawnBoundsOf,
+    drawnBoundsOfElements,
     intersects,
     rectFromPoints,
-    distanceToSegment,
     absolutePoints,
-    hitsElement,
     elementAt,
     elementsIn,
     handlePoint,
     resizeRect,
-    scaleElement,
-    arrowHead,
-    arrowHeadSize
+    scaleElement
 } from './geometry.ts';
-export { type ElementPath, outlineToPath, freehandOutline, pathsOfElement } from './paths.ts';
+export { type ElementPath, 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 { type SvgOptions, DEFAULT_SVG_MARGIN, DEFAULT_PALETTE, DEFAULT_PAPER, DEFAULT_EDGE, escapeXml, 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/src/paths.ts

@@ -70,7 +70,7 @@ function roundedRectPath(w: number, h: number, radius: number): string {
     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 {
+function outlineToPath(outline: readonly (readonly number[])[]): string {
     if (outline.length === 0) {
         return '';
     }
@@ -78,7 +78,7 @@ export function outlineToPath(outline: readonly (readonly number[])[]): string {
     return `M ${first![0]} ${first![1]} ${rest.map((point) => `L ${point[0]} ${point[1]}`).join(' ')} Z`;
 }
 
-export function freehandOutline(element: DrawingElement & { kind: 'freehand' }): string {
+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,

package/src/svg.ts

@@ -1,11 +1,11 @@
 import type { DrawingColor, DrawingElement, DrawingFont } from './protocol.ts';
-import { boundsOfElements, type Rect } from './geometry.ts';
+import { drawnBoundsOfElements, type Rect } from './geometry.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 {
-    /* What every palette name is in the theme this export is made in. */
-    palette: Record<DrawingColor, string>;
+    /* What every palette name is in the theme this export is made in; without it the light theme's colors are used. */
+    palette?: Record<DrawingColor, string>;
     /* The paper behind the drawing, or null for a transparent one. */
     background?: string | null;
     /* World units around the drawing, so nothing touches the edge. */
@@ -67,10 +67,12 @@ export const DEFAULT_EDGE: Record<DrawingColor, string> = {
 // oxlint-disable-next-line no-control-regex
 const NOT_XML = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]/g;
 
-function escapeXml(value: string): string {
+export function escapeXml(value: string): string {
     return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
 }
 
+type PaintOptions = SvgOptions & Required<Pick<SvgOptions, 'palette'>>;
+
 function round(value: number): number {
     return Math.round(value * 100) / 100;
 }
@@ -81,7 +83,7 @@ function transformOf(element: DrawingElement): string {
     return `translate(${round(element.x)} ${round(element.y)})${turn}`;
 }
 
-function textSvg(element: WrittenElement, options: SvgOptions): string {
+function textSvg(element: WrittenElement, options: PaintOptions): string {
     const family = options.fonts?.[fontOf(element.font)] ?? DEFAULT_FONT_STACKS[fontOf(element.font)];
     const anchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
     const frame = writingFrameOf(element);
@@ -93,7 +95,7 @@ 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 pathSvg(path: ElementPath, element: DrawingElement, options: SvgOptions): string {
+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(' ')}"` : '';
@@ -109,7 +111,7 @@ function pathSvg(path: ElementPath, element: DrawingElement, options: SvgOptions
         : `<path d="${path.d}" fill="${color}" stroke="none"/>`;
 }
 
-function elementSvg(element: DrawingElement, options: SvgOptions): string {
+function elementSvg(element: DrawingElement, options: PaintOptions): string {
     const body =
         element.kind === 'text'
             ? textSvg(element, options)
@@ -125,14 +127,15 @@ function elementSvg(element: DrawingElement, options: SvgOptions): string {
  * The whole drawing as one SVG, in the colors of the theme it is exported from. Fonts are named,
  * never embedded: a file that opens outside the app falls back to a system face.
  */
-export function toSvg(elements: readonly DrawingElement[], options: SvgOptions): string {
+export function toSvg(elements: readonly DrawingElement[], options: SvgOptions = {}): string {
+    const paint: PaintOptions = { ...options, palette: options.palette ?? DEFAULT_PALETTE };
     const margin = options.margin ?? DEFAULT_SVG_MARGIN;
-    const bounds: Rect = boundsOfElements(elements) ?? { x: 0, y: 0, w: 1, h: 1 };
+    const bounds: Rect = drawnBoundsOfElements(elements) ?? { x: 0, y: 0, w: 1, h: 1 };
     const x = round(bounds.x - margin);
     const y = round(bounds.y - margin);
     const w = round(bounds.w + margin * 2);
     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, options)).join('');
+    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>`;
 }