@itsthecsguy/linework 0.0.0-stage → 0.1.1

package/dist/drawio/merge.js

@@ -0,0 +1,309 @@
+import { absBox } from './read.js';
+import { manualEdits, toDiagram } from './show.js';
+import { autoAttr, diagramMeta, edgeAttrs, edgeCellId, edgeStyleFor, nodeChildren, styleFor, groupAttrs, groupStyleFor, nodeAttrs, routeAttr } from './write.js';
+import { palette } from './theme.js';
+import { kindDef } from '../spec/model.js';
+const GAP = 24;
+const PAD = { top: 40, left: 20, right: 20, bottom: 20 };
+const center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
+const overlaps = (a, b, m = 0) => a.x < b.x + b.w + m && b.x < a.x + a.w + m && a.y < b.y + b.h + m && b.y < a.y + a.h + m;
+const PORT_KEYS = ['exitX', 'exitY', 'exitDx', 'exitDy', 'exitPerimeter', 'entryX', 'entryY', 'entryDx', 'entryDy', 'entryPerimeter'];
+function withoutKeys(style, keys) {
+    return style
+        .split(';')
+        .filter((p) => p && !keys.includes(p.split('=')[0]))
+        .join(';') + ';';
+}
+function ownAttrs(c) {
+    // color/highlight come from the spec every time, so dropping one in the spec drops it here.
+    const { id: _id, value: _value, aiviz_auto: _auto, aiviz_color: _c, aiviz_highlight: _h, ...rest } = c.attrs;
+    return rest;
+}
+const sameLookOf = (a, b) => (a?.color ?? '') === (b?.color ?? '') && !!a?.highlight === !!b?.highlight;
+export function merge(d, old, fresh, opts = {}) {
+    const shown = toDiagram(old);
+    const cellOf = new Map();
+    for (const [cellId, specId] of shown.idMap)
+        cellOf.set(specId, old.byId.get(cellId));
+    const oldNodes = new Map(shown.diagram.nodes.map((n) => [n.id, n]));
+    const oldGroups = new Map(shown.diagram.groups.map((g) => [g.id, g]));
+    const handEdits = new Map(manualEdits(old).map((e) => [e.id, e.what]));
+    // A theme change restyles everything; positions still stay.
+    const themeChanged = shown.diagram.theme !== d.theme;
+    const isTable = (n) => kindDef(d.type, n.kind).shape === 'table';
+    const abs = new Map(); // final absolute boxes for nodes
+    const changed = new Set(); // nodes whose box differs from the old file
+    const stats = { kept: 0, handMoved: 0, placed: [], grown: [], removed: [], rerouted: 0, carried: 0, keptUnknown: [] };
+    // 1. Existing nodes stay put.
+    for (const n of d.nodes) {
+        const c = cellOf.get(n.id);
+        if (!c || !oldNodes.has(n.id))
+            continue;
+        const b = absBox(old, c.id);
+        if (!b)
+            continue;
+        const prev = oldNodes.get(n.id);
+        const f = fresh.natural.get(n.id); // its own size, not the diagram-wide width
+        let box = b;
+        const kindChanged = prev.kind !== n.kind;
+        const textChanged = prev.label !== n.label || prev.tech !== n.tech;
+        const handSized = handEdits.get(c.id) === 'resized';
+        if (isTable(n)) {
+            // Tables are as tall as their fields; keep any extra width someone gave them.
+            const w = Math.max(b.w, f.w);
+            if (Math.abs(f.h - b.h) > 1 || w > b.w + 1) {
+                box = { x: b.x, y: b.y, w, h: f.h };
+                changed.add(n.id);
+                stats.grown.push(n.id);
+            }
+        }
+        else if (kindChanged || (textChanged && !handSized && (f.w > b.w + 1 || f.h > b.h + 1))) {
+            const w = kindChanged ? f.w : Math.max(b.w, f.w);
+            const h = kindChanged ? f.h : Math.max(b.h, f.h);
+            const cc = center(b);
+            box = { x: cc.x - w / 2, y: cc.y - h / 2, w, h };
+            changed.add(n.id);
+            stats.grown.push(n.id);
+        }
+        if (handEdits.has(c.id))
+            stats.handMoved++;
+        stats.kept++;
+        abs.set(n.id, box);
+    }
+    // 2. New nodes go next to a neighbour.
+    const preds = (id) => d.edges.filter((e) => e.to === id).map((e) => e.from);
+    const succs = (id) => d.edges.filter((e) => e.from === id).map((e) => e.to);
+    const ancestors = (gid) => {
+        const s = new Set();
+        for (let g = gid; g; g = d.groups.find((x) => x.id === g)?.parent)
+            s.add(g);
+        return s;
+    };
+    const oldGroupBox = (gid) => {
+        const c = cellOf.get(gid);
+        return c && oldGroups.has(gid) ? absBox(old, c.id) : undefined;
+    };
+    // New box-like nodes match the most common width already in the diagram.
+    const widths = new Map();
+    for (const [id, b] of abs) {
+        const k = d.nodes.find((n) => n.id === id)?.kind;
+        if (k && !['start', 'end', 'decision'].includes(k))
+            widths.set(b.w, (widths.get(b.w) ?? 0) + 1);
+    }
+    const commonW = [...widths].sort((a, b) => b[1] - a[1])[0]?.[0] ?? 0;
+    const sizeOf = (n) => {
+        const nat = fresh.natural.get(n.id);
+        const boxy = !['start', 'end', 'decision'].includes(n.kind);
+        return { w: boxy ? Math.max(nat.w, commonW) : nat.w, h: nat.h };
+    };
+    const pending = d.nodes.filter((n) => !abs.has(n.id));
+    while (pending.length) {
+        let i = pending.findIndex((n) => [...preds(n.id), ...succs(n.id)].some((m) => abs.has(m)));
+        if (i < 0)
+            i = 0;
+        const n = pending.splice(i, 1)[0];
+        const f = { ...fresh.nodes.get(n.id), ...sizeOf(n) };
+        const anchor = [...preds(n.id), ...succs(n.id)].find((m) => abs.has(m));
+        let cand;
+        if (anchor) {
+            const fa = center(fresh.nodes.get(anchor)), a = center(abs.get(anchor)), fc = center(f);
+            cand = { x: a.x + (fc.x - fa.x) - f.w / 2, y: a.y + (fc.y - fa.y) - f.h / 2, w: f.w, h: f.h };
+        }
+        else {
+            cand = fallbackSpot(n, f, abs, fresh, oldGroupBox(n.parent ?? ''));
+        }
+        abs.set(n.id, freeSpot(cand, n, abs, d, ancestors(n.parent), oldGroupBox));
+        changed.add(n.id);
+        stats.placed.push(n.id);
+    }
+    // 3. Groups: keep their box, grow to fit members, deepest first.
+    const depth = (gid) => ancestors(gid).size;
+    const gabs = new Map();
+    for (const g of [...d.groups].sort((a, b) => depth(b.id) - depth(a.id))) {
+        const kids = [
+            ...d.nodes.filter((n) => n.parent === g.id).map((n) => abs.get(n.id)),
+            ...d.groups.filter((x) => x.parent === g.id).map((x) => gabs.get(x.id)),
+        ].filter(Boolean);
+        const need = kids.length ? padded(union(kids)) : undefined;
+        const prev = oldGroupBox(g.id);
+        const box = prev ? (need ? union([prev, need]) : prev) : need ?? { x: 0, y: 0, w: 200, h: 120 };
+        if (prev && (box.w > prev.w + 1 || box.h > prev.h + 1))
+            stats.grown.push(g.id);
+        gabs.set(g.id, box);
+    }
+    // 4. Build the scene.
+    const absOf = (id) => abs.get(id) ?? gabs.get(id);
+    const rel = (id, parent) => {
+        const a = absOf(id);
+        if (!parent)
+            return a;
+        const p = gabs.get(parent);
+        return { ...a, x: a.x - p.x, y: a.y - p.y };
+    };
+    const vertices = [];
+    for (const g of d.groups) {
+        const c = oldGroups.has(g.id) ? cellOf.get(g.id) : undefined;
+        const box = rel(g.id, g.parent);
+        const prev = oldGroups.get(g.id);
+        const attrs = { ...(c ? ownAttrs(c) : {}), ...groupAttrs(g, d.theme) };
+        const groupSame = !!c && !themeChanged && sameLookOf(prev, g) && prev?.parent === g.parent;
+        if (c && prev?.label === g.label && c.attrs.label != null && !themeChanged)
+            attrs.label = c.attrs.label;
+        attrs.aiviz_auto = autoAttr(box); // hand moves are now part of the layout
+        vertices.push({ id: g.id, parent: g.parent ?? '1', attrs, style: groupSame ? c.styleRaw : groupStyleFor(d, g), box });
+    }
+    for (const n of d.nodes) {
+        const c = oldNodes.has(n.id) ? cellOf.get(n.id) : undefined;
+        const prev = oldNodes.get(n.id);
+        const box = rel(n.id, n.parent);
+        const attrs = { ...(c ? ownAttrs(c) : {}), ...nodeAttrs(d, n) };
+        const lookSame = sameLookOf(prev, n);
+        if (c && prev && prev.label === n.label && prev.tech === n.tech && !themeChanged && lookSame)
+            attrs.label = c.attrs.label ?? c.label;
+        attrs.aiviz_auto = autoAttr(box);
+        // Keep a person's styling, unless the kind changed or it's a shape they added
+        // without picking any colours (draw.io's default black outline).
+        const unstyled = c && !c.attrs.aiviz_kind && !c.style.fillColor && !c.style.strokeColor;
+        const style = c && prev?.kind === n.kind && prev?.icon === n.icon && lookSame && !unstyled && !themeChanged ? c.styleRaw : styleFor(d, n);
+        vertices.push({ id: n.id, parent: n.parent ?? '1', attrs, style, box });
+        vertices.push(...nodeChildren(d, n, box));
+    }
+    const outIds = new Set(vertices.map((v) => v.id));
+    const reroute = [];
+    const edges = [];
+    for (const e of d.edges) {
+        const oldCellId = shown.edgeCells.get(e.id);
+        const oc = oldCellId ? old.byId.get(oldCellId) : undefined;
+        const prev = shown.diagram.edges.find((x) => x.id === e.id);
+        const id = edgeCellId(e.id);
+        const sameEnds = !!prev && !changed.has(e.from) && !changed.has(e.to);
+        // A route nobody adjusted is stale once a person moves either end.
+        const endMovedByHand = [e.from, e.to].some((n) => {
+            const c = cellOf.get(n);
+            return c && handEdits.has(c.id);
+        });
+        const routeUntouched = !oc?.attrs.aiviz_auto || oc.attrs.aiviz_auto === routeAttr(oc.geom?.points ?? []);
+        const stale = endMovedByHand && routeUntouched;
+        const keepParent = oc?.parent && (oc.parent === '1' || outIds.has(oc.parent)) ? oc.parent : undefined;
+        const attrs = { ...(oc ? ownAttrs(oc) : {}), ...edgeAttrs(e) };
+        if (oc && (prev?.label ?? '') === (e.label ?? '') && oc.attrs.label != null)
+            attrs.label = oc.attrs.label;
+        let style;
+        const unstyledEdge = oc && !oc.attrs.aiviz_edge && !oc.style.strokeColor;
+        const sameLook = prev?.style === e.style && JSON.stringify(prev?.card) === JSON.stringify(e.card) && sameLookOf(prev, e);
+        if (oc && sameLook && !unstyledEdge && !themeChanged)
+            style = oc.styleRaw;
+        else {
+            // Arrow style or theme changed: take the theme style, keep where the edge attaches.
+            const ports = oc ? PORT_KEYS.filter((k) => k in oc.style).map((k) => `${k}=${oc.style[k]};`).join('') : '';
+            style = edgeStyleFor(d, e) + ports;
+        }
+        if (oc && sameEnds && keepParent && !stale) {
+            edges.push({ id, parent: keepParent, attrs, style, source: e.from, target: e.to, geomRaw: oc.geomRaw });
+        }
+        else {
+            edges.push({ id, parent: '1', attrs, style: withoutKeys(style, PORT_KEYS), source: e.from, target: e.to, points: [] });
+            reroute.push(id);
+        }
+    }
+    stats.rerouted = reroute.length;
+    // 5. Carry over what the spec can't express.
+    const raw = [];
+    // A spec written before someone added shapes by hand doesn't know about them.
+    // Deleting them would silently destroy their work, so keep them.
+    if (!opts.specIsCurrent) {
+        const specIds = new Set(d.nodes.map((n) => n.id));
+        for (const [cellId, specId] of shown.idMap) {
+            const c = old.byId.get(cellId);
+            if (specIds.has(specId) || c.attrs.aiviz_kind || c.attrs.aiviz_type || outIds.has(cellId))
+                continue;
+            raw.push(c.raw);
+            outIds.add(cellId);
+            stats.keptUnknown.push(specId);
+        }
+        const specEdges = new Set(d.edges.map((e) => e.id));
+        for (const [eid, cellId] of shown.edgeCells) {
+            const c = old.byId.get(cellId);
+            if (specEdges.has(eid) || c.attrs.aiviz_edge)
+                continue;
+            if (c.source && c.target && outIds.has(c.source) && outIds.has(c.target))
+                raw.push(c.raw);
+        }
+    }
+    for (const cid of shown.skipped) {
+        const c = old.byId.get(cid);
+        const parentOk = !c.parent || c.parent === '1' || outIds.has(c.parent);
+        const endsOk = (!c.source || outIds.has(c.source)) && (!c.target || outIds.has(c.target));
+        if (parentOk && endsOk && !outIds.has(cid))
+            raw.push(c.raw);
+    }
+    stats.carried = raw.length - stats.keptUnknown.length;
+    const kept = new Set([...outIds, ...stats.keptUnknown]);
+    for (const id of [...oldNodes.keys(), ...oldGroups.keys()])
+        if (!kept.has(id))
+            stats.removed.push(id);
+    const { id: _id, label: _label, ...oldMeta } = old.meta;
+    return {
+        scene: {
+            name: d.title ?? old.name,
+            meta: { ...withoutTheme(oldMeta), ...diagramMeta(d, { aiviz_layout: 'manual' }) },
+            background: palette(d.theme).canvas,
+            vertices,
+            edges,
+            raw,
+        },
+        reroute,
+        stats,
+    };
+}
+function union(boxes) {
+    const x = Math.min(...boxes.map((b) => b.x)), y = Math.min(...boxes.map((b) => b.y));
+    const x2 = Math.max(...boxes.map((b) => b.x + b.w)), y2 = Math.max(...boxes.map((b) => b.y + b.h));
+    return { x, y, w: x2 - x, h: y2 - y };
+}
+function padded(b) {
+    return { x: b.x - PAD.left, y: b.y - PAD.top, w: b.w + PAD.left + PAD.right, h: b.h + PAD.top + PAD.bottom };
+}
+/** No placed neighbour: put it after everything else, in the layout direction. */
+function fallbackSpot(n, f, abs, fresh, groupBox) {
+    const all = [...abs.values()];
+    const area = groupBox ? { ...groupBox, y: groupBox.y + PAD.top, h: groupBox.h - PAD.top } : all.length ? union(all) : { x: 0, y: 0, w: 0, h: 0 };
+    if (fresh.direction === 'LR' || fresh.direction === 'RL')
+        return { x: area.x + area.w + GAP * 2, y: area.y, w: f.w, h: f.h };
+    return { x: area.x, y: area.y + area.h + GAP * 2, w: f.w, h: f.h };
+}
+/** Nearest spot to `cand` on a 8px grid that doesn't collide with placed nodes or foreign groups. */
+function freeSpot(cand, n, abs, d, myGroups, groupBox) {
+    const obstacles = [];
+    for (const [id, b] of abs)
+        if (id !== n.id)
+            obstacles.push(b);
+    for (const g of d.groups) {
+        if (myGroups.has(g.id))
+            continue;
+        const b = groupBox(g.id);
+        if (b)
+            obstacles.push(b);
+    }
+    const ok = (b) => obstacles.every((o) => !overlaps(b, o, GAP));
+    const snap = (v) => Math.round(v / 8) * 8;
+    const start = { ...cand, x: snap(cand.x), y: snap(cand.y) };
+    if (ok(start))
+        return start;
+    for (let r = 1; r <= 80; r++) {
+        const ring = [];
+        for (let k = -r; k <= r; k++) {
+            ring.push({ ...start, x: start.x + k * 16, y: start.y - r * 16 }, { ...start, x: start.x + k * 16, y: start.y + r * 16 });
+            ring.push({ ...start, x: start.x - r * 16, y: start.y + k * 16 }, { ...start, x: start.x + r * 16, y: start.y + k * 16 });
+        }
+        ring.sort((a, b) => Math.hypot(a.x - start.x, a.y - start.y) - Math.hypot(b.x - start.x, b.y - start.y));
+        const hit = ring.find(ok);
+        if (hit)
+            return hit;
+    }
+    return start;
+}
+function withoutTheme(meta) {
+    const { aiviz_theme: _t, ...rest } = meta;
+    return rest;
+}

package/dist/drawio/read.js

@@ -0,0 +1,180 @@
+// Read .drawio.svg / .drawio / plain mxfile XML into a flat list of cells.
+import zlib from 'node:zlib';
+import { createHash } from 'node:crypto';
+import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
+export function extractMxfile(text) {
+    const t = text.trimStart();
+    if (t.startsWith('<mxfile') || t.startsWith('<mxGraphModel'))
+        return text;
+    if (t.startsWith('<?xml') || t.startsWith('<svg') || t.startsWith('<!DOCTYPE')) {
+        const m = /<svg\b[^>]*\scontent="([^"]*)"/s.exec(text);
+        if (!m)
+            throw new Error('this SVG has no embedded draw.io diagram (no content attribute). Was it exported without "include a copy of my diagram"?');
+        return decodeEntities(m[1]);
+    }
+    throw new Error('not a draw.io file: expected .drawio.svg, .drawio or mxfile XML');
+}
+function decodeEntities(s) {
+    return s
+        .replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(+n))
+        .replace(/&#x([0-9a-f]+);/gi, (_, n) => String.fromCodePoint(parseInt(n, 16)))
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'")
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+}
+/** draw.io stores pages compressed by default: base64(deflateRaw(encodeURIComponent(xml))). */
+export function inflatePage(data) {
+    const buf = zlib.inflateRawSync(Buffer.from(data.trim(), 'base64'));
+    return decodeURIComponent(buf.toString('utf8'));
+}
+export function readDrawio(text) {
+    let xml = extractMxfile(text);
+    const doc = new DOMParser().parseFromString(xml, 'text/xml');
+    let modelEl = null;
+    let name = 'Page-1';
+    const rootEl = doc.documentElement;
+    if (rootEl.nodeName === 'mxGraphModel')
+        modelEl = rootEl;
+    else {
+        const diagrams = rootEl.getElementsByTagName('diagram');
+        if (diagrams.length === 0)
+            throw new Error('mxfile has no <diagram>');
+        if (diagrams.length > 1)
+            process.emitWarning?.('linework: file has several pages; only the first is used');
+        const diag = diagrams[0];
+        name = diag.getAttribute('name') ?? name;
+        const inner = diag.getElementsByTagName('mxGraphModel')[0];
+        if (inner)
+            modelEl = inner;
+        else {
+            const pageXml = inflatePage(diag.textContent ?? '');
+            modelEl = new DOMParser().parseFromString(pageXml, 'text/xml').documentElement;
+            // Normalise to an uncompressed mxfile so downstream tools can read it.
+            xml = `<mxfile><diagram id="${diag.getAttribute('id') ?? 'p1'}" name="${(diag.getAttribute('name') ?? 'Page-1').replace(/"/g, '&quot;')}">${pageXml}</diagram></mxfile>`;
+        }
+    }
+    const root = modelEl.getElementsByTagName('root')[0];
+    if (!root)
+        throw new Error('mxGraphModel has no <root>');
+    const cells = [];
+    const ser = new XMLSerializer();
+    let meta = {};
+    for (let n = root.firstChild; n; n = n.nextSibling) {
+        if (n.nodeType !== 1)
+            continue;
+        const el = n;
+        let attrs = {};
+        let cellEl = el;
+        if (el.nodeName === 'object' || el.nodeName === 'UserObject') {
+            attrs = attrMap(el);
+            const inner = firstChildEl(el, 'mxCell');
+            if (!inner)
+                continue;
+            cellEl = inner;
+        }
+        else if (el.nodeName !== 'mxCell')
+            continue;
+        const c = attrMap(cellEl);
+        const id = attrs.id ?? c.id;
+        if (id == null)
+            continue;
+        if (id === '0') {
+            meta = attrs;
+            continue;
+        }
+        const label = attrs.label ?? c.value ?? '';
+        const styleRaw = c.style ?? '';
+        const g = firstChildEl(cellEl, 'mxGeometry');
+        let geom;
+        if (g) {
+            const ga = attrMap(g);
+            const arr = firstChildEl(g, 'Array');
+            const points = [];
+            if (arr)
+                for (let p = arr.firstChild; p; p = p.nextSibling)
+                    if (p.nodeType === 1) {
+                        const pa = attrMap(p);
+                        points.push({ x: +(pa.x ?? 0), y: +(pa.y ?? 0) });
+                    }
+            geom = { x: +(ga.x ?? 0), y: +(ga.y ?? 0), w: +(ga.width ?? 0), h: +(ga.height ?? 0), points };
+        }
+        cells.push({
+            raw: ser.serializeToString(el),
+            geomRaw: g ? ser.serializeToString(g) : undefined,
+            id,
+            attrs: Object.keys(attrs).length ? attrs : { value: label },
+            label,
+            style: parseStyle(styleRaw),
+            styleRaw,
+            vertex: c.vertex === '1',
+            edge: c.edge === '1',
+            parent: c.parent,
+            source: c.source,
+            target: c.target,
+            geom,
+        });
+    }
+    return { xml, cells, byId: new Map(cells.map((c) => [c.id, c])), meta, name };
+}
+export function parseStyle(s) {
+    const out = {};
+    for (const part of s.split(';')) {
+        if (!part)
+            continue;
+        const i = part.indexOf('=');
+        if (i < 0)
+            out[part] = '1'; // bare names like "ellipse" or "rhombus"
+        else
+            out[part.slice(0, i)] = part.slice(i + 1);
+    }
+    return out;
+}
+function attrMap(el) {
+    const out = {};
+    for (let i = 0; i < el.attributes.length; i++) {
+        const a = el.attributes.item(i);
+        out[a.name] = a.value;
+    }
+    return out;
+}
+function firstChildEl(el, name) {
+    for (let n = el.firstChild; n; n = n.nextSibling)
+        if (n.nodeType === 1 && n.nodeName === name)
+            return n;
+    return null;
+}
+/** Visible text lines of an HTML label. */
+export function labelLines(html) {
+    return html
+        .replace(/<br\s*\/?>/gi, '\n')
+        .replace(/<\/(div|p|li)>/gi, '\n')
+        .replace(/<\/t[dh]>/gi, ' ')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, '&')
+        .split('\n')
+        .map((s) => s.trim())
+        .filter(Boolean);
+}
+/** Absolute box of a vertex, summing the offsets of the groups it sits in. */
+export function absBox(m, id) {
+    const c = m.byId.get(id);
+    if (!c?.geom)
+        return undefined;
+    let { x, y } = c.geom;
+    for (let p = c.parent ? m.byId.get(c.parent) : undefined; p?.geom && p.vertex; p = p.parent ? m.byId.get(p.parent) : undefined) {
+        x += p.geom.x;
+        y += p.geom.y;
+    }
+    return { x, y, w: c.geom.w, h: c.geom.h };
+}
+/** Short fingerprint of a diagram's content; `show` stamps it so `build` can tell a stale spec. */
+export function fingerprint(m) {
+    return createHash('sha1').update(m.cells.map((c) => c.raw).join('')).digest('hex').slice(0, 12);
+}
+const BASE_RE = /^#\s*(?:linework|aiviz)-base:\s*([0-9a-f]{6,40})/m;
+export function specBase(specText) {
+    return BASE_RE.exec(specText)?.[1];
+}