@adecore/drawing 0.0.1 → 0.17.0-beta.2

package/src/svg.ts

@@ -0,0 +1,138 @@
+import type { DrawingColor, DrawingElement, DrawingFont } from './protocol.ts';
+import { boundsOfElements, type Rect } from './geometry.ts';
+import { pathsOfElement } 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>;
+    /* The paper behind the drawing, or null for a transparent one. */
+    background?: string | null;
+    /* World units around the drawing, so nothing touches the edge. */
+    margin?: number;
+    fonts?: Partial<Record<DrawingFont, string>>;
+    /* The paper of a note per palette name; without it the light theme's sheets are used. */
+    paper?: Record<DrawingColor, string>;
+    /* The edge of that paper, which is the sheet a step deeper into its own color. */
+    edge?: Record<DrawingColor, string>;
+    /* How wide a line is in the given text, for wrapping a sized text; without it a glyph is estimated. */
+    measure?: (element: WrittenElement) => MeasureLine;
+}
+
+export const DEFAULT_SVG_MARGIN = 32;
+
+// Fallback colors for rendering without a host theme.
+export const DEFAULT_PALETTE: Record<DrawingColor, string> = {
+    ink: '#18181b',
+    muted: '#6f6f78',
+    accent: '#4f46e5',
+    red: '#d64545',
+    orange: '#d97706',
+    yellow: '#b7860b',
+    green: '#2f8a4f',
+    blue: '#2563eb',
+    purple: '#7c3aed',
+    pink: '#db2777'
+};
+
+// Pale note fills for rendering without a host theme.
+export const DEFAULT_PAPER: Record<DrawingColor, string> = {
+    ink: '#f4f4f6',
+    muted: '#ececef',
+    accent: '#e2e5fd',
+    red: '#fddfdf',
+    orange: '#fde9d0',
+    yellow: '#fff3bf',
+    green: '#dcf5e3',
+    blue: '#dbe9ff',
+    purple: '#eadffb',
+    pink: '#fde2ea'
+};
+
+/* The edge of that paper outside the app: every sheet above, a step deeper into its own color. */
+export const DEFAULT_EDGE: Record<DrawingColor, string> = {
+    ink: '#dedee2',
+    muted: '#d6d6da',
+    accent: '#c3cbf7',
+    red: '#f4bebe',
+    orange: '#f3d3a8',
+    yellow: '#f0dc94',
+    green: '#b9e3c6',
+    blue: '#b6cff2',
+    purple: '#d5bef0',
+    pink: '#f3c0d1'
+};
+
+// 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: string): string {
+    return value.replace(NOT_XML, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+}
+
+function round(value: number): number {
+    return Math.round(value * 100) / 100;
+}
+
+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: SvgOptions): 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);
+    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 elementSvg(element: DrawingElement, options: SvgOptions): string {
+    const note = element.kind === 'note';
+    const paper = options.paper ?? DEFAULT_PAPER;
+    const edge = options.edge ?? DEFAULT_EDGE;
+    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"/>`;
+                  })
+                  .join('');
+    // The paper is drawn first and the note's own words go on top of it.
+    const written = note ? textSvg(element, options) : '';
+    return `<g transform="${transformOf(element)}">${body}${written}</g>`;
+}
+
+/*
+ * 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 {
+    const margin = options.margin ?? DEFAULT_SVG_MARGIN;
+    const bounds: Rect = boundsOfElements(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('');
+    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

@@ -0,0 +1,90 @@
+import type { DrawingElement, DrawingFont } from './protocol.ts';
+
+/* A drawing sets its lines the way the app does: a little air, no leading of its own. */
+export const LINE_HEIGHT = 1.25;
+
+/* What each font name means outside the app, where the interface tokens do not exist. */
+export const DEFAULT_FONT_STACKS: Record<DrawingFont, string> = {
+    hand: 'Kalam, "Comic Sans MS", cursive',
+    sans: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, monospace'
+};
+
+export type WrittenElement = DrawingElement & { kind: 'text' | 'note' };
+
+/* How much paper a note keeps free around its text, on every side. */
+export const NOTE_PADDING = 16;
+
+/* The corners of a sheet of paper, which are never quite square. */
+export const NOTE_RADIUS = 8;
+
+/*
+ * Where the glyphs of an element sit inside it: a note writes within its padding, a text is its
+ * own box. Everything that lays out or measures a text goes through this, so both stay in step.
+ */
+export function writingFrameOf(element: WrittenElement): { x: number; y: number; w: 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 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.
+ */
+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));
+}
+
+// An unsized text element follows its content; once sized, its box controls wrapping.
+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);
+}
+
+/* Absent means hand: a drawing is written by hand unless it says otherwise. */
+export function fontOf(font: DrawingFont | undefined): DrawingFont {
+    return font ?? 'hand';
+}