@grafloria/element 0.3.18 → 0.3.20

package/src/libs/engine/src/interop/drawio/importDrawio.js

@@ -0,0 +1,940 @@
+"use strict";
+// .drawio (mxGraph XML) IMPORT — import-only, bounded, honest about loss.
+//
+// draw.io / diagrams.net is the largest installed base of free diagramming in
+// existence, and its files are the migration on-ramp: a team does not adopt a
+// new engine by retyping its diagrams. This module reads both shapes of the
+// format —
+//
+//   (a) plain `<mxGraphModel>` XML (what "uncompressed" saves and most
+//       programmatic exporters emit), and
+//   (b) the `<mxfile><diagram>…</diagram></mxfile>` wrapper whose page payload
+//       is base64 → raw-deflate → URI-encoded XML (draw.io's DEFAULT save
+//       format; decoded with `DecompressionStream('deflate-raw')`, global in
+//       Node ≥ 18 and every modern browser)
+//
+// — and maps the mxGraph cell tree onto the engine's own models.
+//
+// THE HONESTY CONTRACT. mxGraph expresses more than this importer maps (exotic
+// stencil shapes, collapsed containers, layers). Nothing unmapped is dropped in
+// silence: every dropped construct appends a NAMED warning to the result, so a
+// user can see exactly what their file lost — the same "never hide the loss"
+// stance TextFormat.ts takes for Mermaid.
+//
+// COORDINATES. mxGraph child geometry is RELATIVE TO ITS PARENT cell; the
+// engine's node positions are world-absolute. The importer walks each cell's
+// parent chain and sums origins, so a node 20px inside a container that sits
+// at (300,80) lands at (320,…) — nested containers nest the sum. Edge
+// waypoints live in the EDGE's parent space and get the same conversion.
+//
+// MULTI-PAGE. A file with more than one `<diagram>` returns every page under
+// `pages[]`, each decoded and compiled INDEPENDENTLY — one corrupt page fails
+// alone with its own `error` entry instead of sinking the file. The top-level
+// `diagram` stays page 1 (back-compatible), and the top-level warnings are
+// page 1's plus the file-level ones.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripHtmlToText = stripHtmlToText;
+exports.importDrawio = importDrawio;
+const tslib_1 = require("tslib");
+const DiagramModel_1 = require("../../models/DiagramModel");
+const NodeModel_1 = require("../../models/NodeModel");
+const GroupModel_1 = require("../../models/GroupModel");
+const xml_1 = require("./xml");
+function parseStyle(style) {
+    const tokens = new Map();
+    let first;
+    let index = 0;
+    for (const part of style.split(';')) {
+        const token = part.trim();
+        if (!token)
+            continue;
+        const eq = token.indexOf('=');
+        if (eq === -1) {
+            if (index === 0)
+                first = token;
+            tokens.set(token, '');
+        }
+        else {
+            tokens.set(token.slice(0, eq), token.slice(eq + 1));
+        }
+        index++;
+    }
+    return { tokens, first };
+}
+/**
+ * mxGraph shape token → engine shape-registry name. The engine's registry
+ * (renderer shape-library) uses its own vocabulary — `rhombus` there is
+ * `diamond` here. Only tokens with a REAL counterpart are mapped; anything
+ * else falls back to `rect` WITH a warning naming the token, because a wrong
+ * silhouette that looks deliberate is worse than a rectangle that looks like
+ * a fallback.
+ */
+const SHAPE_MAP = {
+    ellipse: 'ellipse',
+    rhombus: 'diamond',
+    triangle: 'triangle',
+    hexagon: 'hexagon',
+    cylinder: 'cylinder',
+    cylinder3: 'cylinder', // draw.io's current cylinder is shape=cylinder3
+};
+/**
+ * mxGraph edge-marker token → the engine's ArrowStyle vocabulary. Only tokens
+ * with a REAL counterpart are mapped; an unknown token keeps the engine's
+ * default marker WITH a warning naming it. The `Thin` variants share their
+ * base silhouette — the engine does not model barb thickness.
+ */
+const ARROW_MAP = {
+    classic: 'arrow',
+    classicThin: 'arrow',
+    block: 'arrow',
+    blockThin: 'arrow',
+    open: 'open-arrow',
+    openThin: 'open-arrow',
+    openAsync: 'open-arrow',
+    oval: 'oval',
+    diamond: 'diamond',
+    diamondThin: 'diamond',
+    cross: 'cross',
+    dash: 'bar',
+    box: 'square',
+    circle: 'circle',
+    circlePlus: 'circle',
+    // ER notation — draw.io's ER endpoints map 1:1 onto the engine's ERD arrows.
+    ERone: 'one',
+    ERmandOne: 'one',
+    ERmany: 'crow-foot',
+    ERoneToMany: 'one-or-many',
+    ERzeroToOne: 'zero-or-one',
+    ERzeroToMany: 'zero-or-many',
+    none: 'none',
+};
+/** Markers that are outlines by construction — `startFill`/`endFill` cannot fill them. */
+const OPEN_ARROW_TOKENS = new Set(['open', 'openThin', 'openAsync', 'cross', 'dash']);
+/**
+ * Style keys the importer CONSUMES (mapped into the model). Everything else
+ * lands in one aggregated "unmapped style keys" warning — deduped, because a
+ * 200-cell file repeating `html=1` should say it once, not 200 times.
+ */
+const CONSUMED_STYLE_KEYS = new Set([
+    'shape',
+    'rounded',
+    'arcSize',
+    'absoluteArcSize',
+    'fillColor',
+    'strokeColor',
+    'strokeWidth',
+    'opacity',
+    'dashed',
+    'fontColor',
+    'fontSize',
+    'edgeStyle',
+    'curved',
+    'startArrow',
+    'endArrow',
+    'startFill',
+    'endFill',
+    'text',
+    'swimlane',
+    'group',
+    'edgeLabel',
+    'labelPosition',
+    'verticalLabelPosition',
+    ...Object.keys(SHAPE_MAP),
+]);
+// ---------------------------------------------------------------------------
+// Label text — draw.io `value` attributes are HTML fragments
+// ---------------------------------------------------------------------------
+/**
+ * `value="<b>Start</b><br>here"` must become "Start here", not carry markup
+ * into the label canon. Block/line-break boundaries turn into single spaces so
+ * words do not fuse.
+ *
+ * Entities are decoded a SECOND time here, after the tags are gone. The XML
+ * reader already decoded one level — but with `html=1` (draw.io's default) the
+ * value is an HTML FRAGMENT, so an author's literal `&` was double-encoded on
+ * save (`&amp;amp;`) and one decode still leaves `&amp;` in the label.
+ */
+function stripHtmlToText(value) {
+    return decodeHtmlEntities(value
+        .replace(/<br\s*\/?>/gi, ' ')
+        .replace(/<\/(div|p|li|tr|h[1-6])>/gi, ' ')
+        .replace(/<[^>]*>/g, ''))
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+const HTML_ENTITIES = {
+    amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ',
+};
+function decodeHtmlEntities(text) {
+    return text.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (whole, body) => {
+        var _a;
+        if (body[0] === '#') {
+            const code = body[1] === 'x' || body[1] === 'X'
+                ? parseInt(body.slice(2), 16)
+                : parseInt(body.slice(1), 10);
+            return Number.isFinite(code) ? String.fromCodePoint(code) : whole;
+        }
+        return (_a = HTML_ENTITIES[body]) !== null && _a !== void 0 ? _a : whole; // unknown names stay literal, never vanish
+    });
+}
+// ---------------------------------------------------------------------------
+// The compressed <diagram> payload
+// ---------------------------------------------------------------------------
+/**
+ * base64 → raw-deflate → URI-encoded XML. This is `Graph.decompress` from
+ * draw.io itself, expressed with web-standard primitives only: `atob`,
+ * `DecompressionStream('deflate-raw')`, `TextDecoder`, `decodeURIComponent` —
+ * all global in Node ≥ 18 and modern browsers, so the headless engine needs
+ * no dependency and no DOM. Feature-detected: a runtime without
+ * DecompressionStream gets an error NAMING the missing API, not a crash.
+ */
+function inflateDrawioPayload(b64) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (typeof DecompressionStream === 'undefined') {
+            throw new Error("this runtime has no DecompressionStream('deflate-raw') — compressed .drawio pages need Node >= 18 or a modern browser; export the file uncompressed (File > Properties > Compressed: off) as a workaround");
+        }
+        const bin = atob(b64.replace(/\s+/g, ''));
+        const bytes = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++)
+            bytes[i] = bin.charCodeAt(i);
+        const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('deflate-raw'));
+        const inflated = yield new Response(stream).arrayBuffer();
+        // The inflated bytes are the ASCII of an encodeURIComponent()'d string; the
+        // URI-decode is what restores the actual UTF-8 characters.
+        return decodeURIComponent(new TextDecoder().decode(inflated));
+    });
+}
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+/**
+ * Import a .drawio / mxGraph XML document.
+ *
+ * Accepts plain `<mxGraphModel>` XML or a full `<mxfile>` (compressed or not).
+ * A multi-page file imports EVERY page: `diagram` is page 1 (back-compatible)
+ * and `pages[]` — present only when the file has more than one `<diagram>` —
+ * carries each page's own diagram, warnings, and (for a corrupt page) error.
+ * Never throws: unreadable input comes back as `{ error }`.
+ */
+function importDrawio(text) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const unreadable = (e) => `not a readable .drawio document: ${e.message}`;
+        let root;
+        try {
+            root = (0, xml_1.parseXml)(text.trim());
+        }
+        catch (e) {
+            return { warnings: [], error: unreadable(e) };
+        }
+        // (a) A bare model — one page by construction.
+        if (root.tag === 'mxGraphModel') {
+            const warnings = [];
+            try {
+                return { diagram: buildDiagram(root, warnings), warnings };
+            }
+            catch (e) {
+                return { warnings, error: unreadable(e) };
+            }
+        }
+        if (root.tag !== 'mxfile') {
+            return {
+                warnings: [],
+                error: `not a readable .drawio document: root element is <${root.tag}>, expected <mxGraphModel> or <mxfile>`,
+            };
+        }
+        const pageEls = root.children.filter((c) => c.tag === 'diagram');
+        if (pageEls.length === 0) {
+            return { warnings: [], error: 'not a readable .drawio document: <mxfile> contains no <diagram> page' };
+        }
+        // (b) Single-page <mxfile> — the classic path, no pages[] array.
+        if (pageEls.length === 1) {
+            const warnings = [];
+            try {
+                return { diagram: buildDiagram(yield resolvePageModel(pageEls[0]), warnings), warnings };
+            }
+            catch (e) {
+                return { warnings, error: unreadable(e) };
+            }
+        }
+        // (c) MULTI-PAGE: each page decodes and compiles INDEPENDENTLY, so one
+        // corrupt page fails alone (its own error entry) instead of sinking the file.
+        const pages = [];
+        for (let index = 0; index < pageEls.length; index++) {
+            const el = pageEls[index];
+            const name = (_a = el.attrs['name']) !== null && _a !== void 0 ? _a : `Page ${index + 1}`;
+            const warnings = [];
+            try {
+                pages.push({ name, index, diagram: buildDiagram(yield resolvePageModel(el), warnings), warnings });
+            }
+            catch (e) {
+                pages.push({
+                    name,
+                    index,
+                    warnings,
+                    error: `page ${index + 1} ("${name}") is not readable: ${e.message}`,
+                });
+            }
+        }
+        const first = pages[0];
+        const warnings = [
+            `page 1 of ${pages.length} ("${first.name}") is the primary diagram; all ${pages.length} pages imported under pages[]`,
+            ...first.warnings,
+            // A later page's failure is file-level news, named once here too.
+            ...pages.slice(1).flatMap((p) => (p.error ? [p.error] : [])),
+        ];
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, (first.diagram ? { diagram: first.diagram } : {})), { warnings }), (first.error ? { error: first.error } : {})), { pages });
+    });
+}
+/** Resolve one `<diagram>` element to its `<mxGraphModel>` (inflating a compressed payload). */
+function resolvePageModel(page) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        // Uncompressed save: the model is a literal child element of <diagram>.
+        const inline = page.children.find((c) => c.tag === 'mxGraphModel');
+        if (inline)
+            return inline;
+        // Compressed save: the model travels as the element's TEXT payload.
+        if (!page.text)
+            throw new Error('the <diagram> page is empty');
+        const xml = yield inflateDrawioPayload(page.text);
+        const inner = (0, xml_1.parseXml)(xml.trim());
+        if (inner.tag !== 'mxGraphModel') {
+            throw new Error(`the decompressed page is <${inner.tag}>, expected <mxGraphModel>`);
+        }
+        return inner;
+    });
+}
+// ---------------------------------------------------------------------------
+// Cell tree → engine models
+// ---------------------------------------------------------------------------
+function num(v, fallback = 0) {
+    const n = v === undefined ? NaN : parseFloat(v);
+    return Number.isFinite(n) ? n : fallback;
+}
+/** Read one cell element (or a UserObject/object wrapper around one) into a RawCell. */
+function readCell(el) {
+    var _a, _b, _c, _d, _e;
+    let cellEl = el;
+    let value = (_a = el.attrs['value']) !== null && _a !== void 0 ? _a : '';
+    let link;
+    let data;
+    // UserObject / object wrappers: draw.io moves the label (and any custom
+    // attributes) OUT to the wrapper and nests the mxCell inside. Unwrap; keep
+    // label + link; carry the remaining attributes as data rather than losing them.
+    if (el.tag !== 'mxCell') {
+        const inner = el.children.find((c) => c.tag === 'mxCell');
+        if (!inner)
+            return undefined; // not a cell-shaped element at all
+        cellEl = inner;
+        value = (_b = el.attrs['label']) !== null && _b !== void 0 ? _b : '';
+        link = el.attrs['link'];
+        const rest = Object.entries(el.attrs).filter(([k]) => !['id', 'label', 'link'].includes(k));
+        if (rest.length > 0)
+            data = Object.fromEntries(rest);
+    }
+    const cell = {
+        id: (_d = (_c = el.attrs['id']) !== null && _c !== void 0 ? _c : cellEl.attrs['id']) !== null && _d !== void 0 ? _d : '',
+        parent: cellEl.attrs['parent'],
+        vertex: cellEl.attrs['vertex'] === '1',
+        edge: cellEl.attrs['edge'] === '1',
+        source: cellEl.attrs['source'],
+        target: cellEl.attrs['target'],
+        style: (_e = cellEl.attrs['style']) !== null && _e !== void 0 ? _e : '',
+        value: stripHtmlToText(value),
+        link,
+        data,
+        collapsed: cellEl.attrs['collapsed'] === '1',
+    };
+    const geo = cellEl.children.find((c) => c.tag === 'mxGeometry' && c.attrs['as'] === 'geometry');
+    if (geo) {
+        cell.geometry = {
+            x: num(geo.attrs['x']),
+            y: num(geo.attrs['y']),
+            width: num(geo.attrs['width']),
+            height: num(geo.attrs['height']),
+            relative: geo.attrs['relative'] === '1',
+        };
+        const points = geo.children.find((c) => c.tag === 'Array' && c.attrs['as'] === 'points');
+        if (points) {
+            cell.waypoints = points.children
+                .filter((c) => c.tag === 'mxPoint')
+                .map((p) => ({ x: num(p.attrs['x']), y: num(p.attrs['y']) }));
+        }
+        const alt = geo.children.find((c) => c.tag === 'mxRectangle' && c.attrs['as'] === 'alternateBounds');
+        if (alt)
+            cell.alternate = { width: num(alt.attrs['width']), height: num(alt.attrs['height']) };
+        // FLOATING ENDPOINTS: an edge drawn from/to empty canvas has no source/
+        // target CELL — the fixed end travels as a point in the edge's geometry.
+        const sp = geo.children.find((c) => c.tag === 'mxPoint' && c.attrs['as'] === 'sourcePoint');
+        if (sp)
+            cell.sourcePoint = { x: num(sp.attrs['x']), y: num(sp.attrs['y']) };
+        const tp = geo.children.find((c) => c.tag === 'mxPoint' && c.attrs['as'] === 'targetPoint');
+        if (tp)
+            cell.targetPoint = { x: num(tp.attrs['x']), y: num(tp.attrs['y']) };
+    }
+    return cell;
+}
+function buildDiagram(model, warnings) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const rootEl = model.children.find((c) => c.tag === 'root');
+    if (!rootEl)
+        throw new Error('<mxGraphModel> has no <root>');
+    const cells = new Map();
+    for (const el of rootEl.children) {
+        const cell = readCell(el);
+        if (cell && cell.id)
+            cells.set(cell.id, cell);
+    }
+    // STRUCTURE. The mxGraph tree is: one root cell (no parent) → layer cells
+    // (parent = root) → content (parent = a layer, or a container vertex, or —
+    // for edge labels — an edge).
+    const rootId = (_a = [...cells.values()].find((c) => c.parent === undefined)) === null || _a === void 0 ? void 0 : _a.id;
+    const layerIds = new Set([...cells.values()].filter((c) => c.parent !== undefined && c.parent === rootId).map((c) => c.id));
+    const namedLayers = [...layerIds].filter((id) => !cells.get(id).vertex && !cells.get(id).edge);
+    if (namedLayers.length > 1) {
+        warnings.push(`${namedLayers.length} layers flattened onto one canvas; layers pending`);
+    }
+    // Which cells do other cells name as parent? Those vertices are CONTAINERS.
+    const parentRefs = new Set();
+    for (const c of cells.values()) {
+        if (c.parent && !layerIds.has(c.parent) && c.parent !== rootId)
+            parentRefs.add(c.parent);
+    }
+    const isStructural = (c) => c.id === rootId || layerIds.has(c.id);
+    const isContainer = (c) => {
+        if (!c.vertex || isStructural(c))
+            return false;
+        const style = parseStyle(c.style);
+        return style.first === 'swimlane' || style.tokens.has('group') || parentRefs.has(c.id);
+    };
+    const isEdgeLabel = (c) => {
+        if (!c.vertex || !c.parent)
+            return false;
+        const parent = cells.get(c.parent);
+        return !!(parent === null || parent === void 0 ? void 0 : parent.edge) || parseStyle(c.style).tokens.has('edgeLabel');
+    };
+    // ABSOLUTE ORIGIN of a cell's coordinate space = the summed positions of its
+    // ancestor CONTAINERS. Root and layers contribute nothing; a broken parent
+    // ref contributes nothing rather than exploding.
+    const originMemo = new Map();
+    const absoluteOrigin = (parentId, hops = 0) => {
+        if (!parentId || hops > cells.size)
+            return { x: 0, y: 0 };
+        const parent = cells.get(parentId);
+        if (!parent || isStructural(parent) || !parent.geometry)
+            return { x: 0, y: 0 };
+        const memo = originMemo.get(parentId);
+        if (memo)
+            return memo;
+        const above = absoluteOrigin(parent.parent, hops + 1);
+        const origin = { x: above.x + parent.geometry.x, y: above.y + parent.geometry.y };
+        originMemo.set(parentId, origin);
+        return origin;
+    };
+    const diagram = new DiagramModel_1.DiagramModel('drawio-import');
+    const unmappedStyleKeys = new Set();
+    const groupsById = new Map();
+    const nodesById = new Map();
+    const edgeCells = [];
+    const syntheticLabelNodes = [];
+    // -- pass 1: containers → GroupModels (parents must exist before membership) --
+    for (const cell of cells.values()) {
+        if (!isContainer(cell) || isEdgeLabel(cell))
+            continue;
+        const origin = absoluteOrigin(cell.parent);
+        const geo = (_b = cell.geometry) !== null && _b !== void 0 ? _b : { x: 0, y: 0, width: 200, height: 160, relative: false };
+        // A collapsed container's live geometry is its COLLAPSED pill;
+        // alternateBounds carries the expanded frame. Imported expanded.
+        let { width, height } = geo;
+        if (cell.collapsed) {
+            if (cell.alternate)
+                ({ width, height } = cell.alternate);
+            warnings.push(`collapsed container "${cell.id}" imported expanded; collapse state pending`);
+        }
+        const group = new GroupModel_1.GroupModel({ id: cell.id, name: cell.value || 'Group' });
+        diagram.addGroup(group);
+        group.setFrame({ x: origin.x + geo.x, y: origin.y + geo.y, width, height });
+        collectUnmappedStyleKeys(cell.style, unmappedStyleKeys);
+        groupsById.set(cell.id, group);
+    }
+    // -- pass 2: vertices → NodeModels ------------------------------------------
+    for (const cell of cells.values()) {
+        if (!cell.vertex || isStructural(cell) || groupsById.has(cell.id))
+            continue;
+        if (isEdgeLabel(cell))
+            continue; // consumed by its edge in pass 4
+        if ((_c = cell.geometry) === null || _c === void 0 ? void 0 : _c.relative) {
+            warnings.push(`cell "${cell.id}" has relative geometry outside an edge; imported at its parent's origin`);
+        }
+        const origin = absoluteOrigin(cell.parent);
+        const geo = (_d = cell.geometry) !== null && _d !== void 0 ? _d : { x: 0, y: 0, width: 0, height: 0, relative: false };
+        const node = new NodeModel_1.NodeModel({
+            id: cell.id,
+            type: 'default',
+            position: { x: origin.x + geo.x, y: origin.y + geo.y },
+            size: { width: geo.width || 100, height: geo.height || 50 },
+        });
+        applyVertexStyle(node, cell, warnings, unmappedStyleKeys);
+        if (cell.value)
+            node.setLabel(cell.value);
+        if (cell.link)
+            node.setMetadata('drawioLink', cell.link);
+        if (cell.data)
+            node.setMetadata('drawioData', cell.data);
+        diagram.addNode(node);
+        nodesById.set(cell.id, node);
+        const outside = applyOutsideLabelPlacement(node, cell, diagram);
+        if (outside)
+            syntheticLabelNodes.push({ parent: cell.parent, id: outside.id });
+    }
+    // -- pass 3: membership (groups and nodes both exist now) -------------------
+    for (const cell of cells.values()) {
+        const parentGroup = cell.parent ? groupsById.get(cell.parent) : undefined;
+        if (!parentGroup || cell.id === rootId)
+            continue;
+        if (groupsById.has(cell.id) || nodesById.has(cell.id)) {
+            parentGroup.addMember(cell.id, diagram);
+        }
+    }
+    // A synthesized caption follows its icon into the icon's group, so the frame
+    // that wraps the icon wraps its caption too.
+    for (const synth of syntheticLabelNodes) {
+        if (synth.parent)
+            (_e = groupsById.get(synth.parent)) === null || _e === void 0 ? void 0 : _e.addMember(synth.id, diagram);
+    }
+    // -- pass 4: edges → LinkModels ---------------------------------------------
+    for (const cell of cells.values()) {
+        if (cell.edge)
+            edgeCells.push(cell);
+    }
+    /** World-space center of whatever an endpoint id resolves to (node or container frame). */
+    const endpointCenter = (id) => {
+        if (!id)
+            return undefined;
+        const n = nodesById.get(id);
+        if (n)
+            return { x: n.position.x + n.size.width / 2, y: n.position.y + n.size.height / 2 };
+        const g = groupsById.get(id);
+        if (g) {
+            const f = g.getOuterBounds();
+            return { x: f.x + f.width / 2, y: f.y + f.height / 2 };
+        }
+        return undefined;
+    };
+    for (const cell of edgeCells) {
+        // Waypoints are authored in the EDGE's parent space — same conversion as
+        // vertex geometry (an edge inside a container carries container-relative
+        // waypoints).
+        const edgeOrigin = absoluteOrigin(cell.parent);
+        const absWaypoints = ((_f = cell.waypoints) !== null && _f !== void 0 ? _f : []).map((p) => ({
+            x: p.x + edgeOrigin.x,
+            y: p.y + edgeOrigin.y,
+        }));
+        const endpointResolvable = (id, point) => id ? nodesById.has(id) || groupsById.has(id) : !!point;
+        if (!endpointResolvable(cell.source, cell.sourcePoint) ||
+            !endpointResolvable(cell.target, cell.targetPoint)) {
+            warnings.push(`edge "${cell.id}" skipped: ${describeMissingEndpoint(cell, nodesById)}`);
+            continue;
+        }
+        // CONTAINER ENDPOINTS. draw.io lets an edge end ON a container. The
+        // engine's links connect node ports, and a GroupModel is a frame, not a
+        // node — so the importer synthesizes an INVISIBLE 1×1 anchor node pinned
+        // to the container frame's perimeter nearest the other endpoint (or the
+        // adjacent manual waypoint, which is where draw.io actually aimed the
+        // line). The anchor is group-owned and marked metadata.drawioContainerAnchor,
+        // so round-trips and tooling can tell it from authored content.
+        const resolveEndpoint = (side) => {
+            var _a, _b;
+            const id = side === 'source' ? cell.source : cell.target;
+            if (!id) {
+                // FLOATING ENDPOINT: no cell, just a fixed point (edge-parent space).
+                // An invisible 1×1 anchor node AT the point keeps the edge painting
+                // exactly where draw.io painted it.
+                const p = (side === 'source' ? cell.sourcePoint : cell.targetPoint);
+                const anchor = new NodeModel_1.NodeModel({
+                    id: `drawio-anchor:${cell.id}:${side}`,
+                    type: 'default',
+                    position: { x: p.x + edgeOrigin.x - 0.5, y: p.y + edgeOrigin.y - 0.5 },
+                    size: { width: 1, height: 1 },
+                });
+                anchor.setMetadata('shape', { type: 'rect', fill: 'none', stroke: 'none' });
+                anchor.setMetadata('drawioPointAnchor', Object.assign({}, p));
+                diagram.addNode(anchor);
+                return anchor;
+            }
+            const direct = nodesById.get(id);
+            if (direct)
+                return direct;
+            const group = groupsById.get(id);
+            const frame = group.getOuterBounds();
+            const toward = (_b = (_a = (side === 'source' ? absWaypoints[0] : absWaypoints[absWaypoints.length - 1])) !== null && _a !== void 0 ? _a : endpointCenter(side === 'source' ? cell.target : cell.source)) !== null && _b !== void 0 ? _b : { x: frame.x + frame.width / 2, y: frame.y - 20 };
+            const pin = nearestPerimeterPoint(frame, toward);
+            const anchor = new NodeModel_1.NodeModel({
+                id: `drawio-anchor:${cell.id}:${side}`,
+                type: 'default',
+                position: { x: pin.x - 0.5, y: pin.y - 0.5 },
+                size: { width: 1, height: 1 },
+            });
+            anchor.setMetadata('shape', { type: 'rect', fill: 'none', stroke: 'none' });
+            anchor.setMetadata('drawioContainerAnchor', group.id);
+            diagram.addNode(anchor);
+            group.addMember(anchor.id, diagram);
+            return anchor;
+        };
+        const source = resolveEndpoint('source');
+        const target = resolveEndpoint('target');
+        const style = parseStyle(cell.style);
+        // draw.io's axis-aligned edge family — orthogonal, elbow, segment and
+        // entity-relation styles all route in right angles; carry that hint over.
+        // Everything else routes as the engine's default smooth path. curved=1 is
+        // draw.io's "draw this as a curve" flag, whatever the routing style.
+        const edgeStyleToken = (_h = (_g = style.tokens.get('edgeStyle')) === null || _g === void 0 ? void 0 : _g.toLowerCase()) !== null && _h !== void 0 ? _h : '';
+        const orthogonal = /orthogonal|elbow|segment|entityrelation/.test(edgeStyleToken) &&
+            style.tokens.get('curved') !== '1';
+        const link = diagram.createSmartLink(source, target, orthogonal ? 'orthogonal' : 'smooth');
+        if (!link) {
+            warnings.push(`edge "${cell.id}" skipped: no connectable ports between "${cell.source}" and "${cell.target}"`);
+            continue;
+        }
+        link.setMetadata('drawioId', cell.id);
+        const labelCell = findEdgeLabelChild(cell.id, cells);
+        const labelText = cell.value || (labelCell === null || labelCell === void 0 ? void 0 : labelCell.value) || '';
+        if (labelText)
+            link.setLabel(labelText);
+        applyEdgeStyle(link, cell, labelCell, labelText, warnings, unmappedStyleKeys);
+        if (absWaypoints.length > 0) {
+            // MANUAL WAYPOINTS APPLY. The full polyline is the routed attach points
+            // with the author's waypoints between them; hasManualWaypoints makes the
+            // router respect it (and the layout invalidation clears it the moment a
+            // layout moves an endpoint — the contract that makes applying safe).
+            // The authored points stay under metadata.drawioWaypoints as provenance.
+            link.setMetadata('drawioWaypoints', cell.waypoints);
+            const routed = link.points;
+            const start = (_j = routed[0]) !== null && _j !== void 0 ? _j : endpointCenter(source.id);
+            const end = (_k = routed[routed.length - 1]) !== null && _k !== void 0 ? _k : endpointCenter(target.id);
+            link.setPoints([Object.assign({}, start), ...absWaypoints, Object.assign({}, end)]);
+            link.setMetadata('hasManualWaypoints', true);
+        }
+        collectUnmappedStyleKeys(cell.style, unmappedStyleKeys);
+    }
+    if (unmappedStyleKeys.size > 0) {
+        warnings.push(`unmapped style keys dropped: ${[...unmappedStyleKeys].sort().join(', ')}`);
+    }
+    installAnchorLifecycle(diagram);
+    return diagram;
+}
+/**
+ * Synthesized anchors must DIE WITH what they stand for. Without this, deleting
+ * the container an edge ends on left the invisible 1×1 anchor (and its edge)
+ * painting into the empty space where the frame used to be — an edge to
+ * nowhere a user cannot even select the endpoint of. Two rules, matching what
+ * draw.io itself does:
+ *  - remove a LINK → its anchors go with it (they exist only to carry it);
+ *  - remove the GROUP a container-anchor pins to → the anchor node goes, and
+ *    removeNode cascades the edge away — in draw.io, deleting a shape deletes
+ *    the edges connected to it, and the container IS the endpoint here.
+ * Listeners live on the returned model, so they follow the diagram wherever it
+ * is mounted. Every removal is existence-checked: the two rules trigger each
+ * other (group → node → link → far anchor) and must converge, not recurse.
+ */
+function installAnchorLifecycle(diagram) {
+    const isAnchor = (n) => !!n && (n.getMetadata('drawioContainerAnchor') !== undefined ||
+        n.getMetadata('drawioPointAnchor') !== undefined);
+    diagram.on('link:removed', ((link) => {
+        for (const id of [link.sourceNodeId, link.targetNodeId]) {
+            if (!id)
+                continue;
+            const n = diagram.getNode(id);
+            if (isAnchor(n) && diagram.getLinksForNode(id).length === 0)
+                diagram.removeNode(id);
+        }
+    }));
+    diagram.on('group:removed', ((group) => {
+        for (const n of diagram.getNodes()) {
+            if (n.getMetadata('drawioContainerAnchor') === group.id)
+                diagram.removeNode(n.id);
+        }
+    }));
+}
+/** The closest point ON the PERIMETER of a rectangle to `toward` (inside or out). */
+function nearestPerimeterPoint(frame, toward) {
+    const left = frame.x;
+    const right = frame.x + frame.width;
+    const top = frame.y;
+    const bottom = frame.y + frame.height;
+    const cx = Math.min(Math.max(toward.x, left), right);
+    const cy = Math.min(Math.max(toward.y, top), bottom);
+    if (toward.x !== cx || toward.y !== cy)
+        return { x: cx, y: cy }; // outside: clamp lands on the edge
+    // Inside: push to the nearest of the four edges.
+    const candidates = [
+        { d: cx - left, p: { x: left, y: cy } },
+        { d: right - cx, p: { x: right, y: cy } },
+        { d: cy - top, p: { x: cx, y: top } },
+        { d: bottom - cy, p: { x: cx, y: bottom } },
+    ];
+    candidates.sort((a, b) => a.d - b.d);
+    return candidates[0].p;
+}
+/** Human wording for WHY an edge endpoint failed to resolve. */
+function describeMissingEndpoint(cell, nodes) {
+    const side = (name, id) => {
+        if (!id)
+            return `no ${name}`;
+        if (nodes.has(id))
+            return undefined;
+        return `${name} "${id}" does not exist`;
+    };
+    return [side('source', cell.source), side('target', cell.target)].filter(Boolean).join('; ');
+}
+/** The label a draw.io edge stores as a CHILD cell (style edgeLabel, parent = the edge). */
+function findEdgeLabelChild(edgeId, cells) {
+    for (const c of cells.values()) {
+        if (c.parent === edgeId && c.vertex && c.value)
+            return c;
+    }
+    return undefined;
+}
+/**
+ * `startArrow`/`endArrow` token → the engine's ArrowStyle. `undefined` (token
+ * absent) keeps the engine default — which matches draw.io's own defaults
+ * (classic arrow at the target, nothing at the source). Unknown tokens keep
+ * the default too, WITH a warning naming them.
+ */
+function mapArrowToken(token, fillAttr, edgeId, end, warnings) {
+    if (token === undefined || token === '')
+        return undefined;
+    const mapped = ARROW_MAP[token];
+    if (!mapped) {
+        warnings.push(`unknown ${end}Arrow token "${token}" on edge "${edgeId}"; engine default kept`);
+        return undefined;
+    }
+    const filled = mapped !== 'none' && !OPEN_ARROW_TOKENS.has(token) && fillAttr !== '0';
+    return { type: mapped, size: 10, filled };
+}
+/**
+ * Edge visuals: markers, stroke paints, curvature/corner hints, label style.
+ * Everything here PAINTS through LinkStyle — the renderer's own vocabulary —
+ * rather than riding as inert metadata.
+ */
+function applyEdgeStyle(link, cell, labelCell, labelText, warnings, unmapped) {
+    var _a, _b;
+    const t = parseStyle(cell.style).tokens;
+    const styleBag = {};
+    // Markers. endArrow → arrowHead (target), startArrow → arrowTail (source) —
+    // draw.io edges run source → target exactly like the engine's links.
+    const head = mapArrowToken(t.get('endArrow'), t.get('endFill'), cell.id, 'end', warnings);
+    if (head)
+        styleBag.arrowHead = head;
+    const tail = mapArrowToken(t.get('startArrow'), t.get('startFill'), cell.id, 'start', warnings);
+    if (tail && tail.type !== 'none')
+        styleBag.arrowTail = tail;
+    // Stroke paints.
+    const strokeColor = t.get('strokeColor');
+    if (strokeColor && strokeColor.toLowerCase() !== 'none')
+        styleBag.stroke = strokeColor;
+    if (t.get('strokeWidth'))
+        styleBag.strokeWidth = num(t.get('strokeWidth'), 1);
+    if (t.get('dashed') === '1')
+        styleBag.strokeDasharray = '6,4';
+    if (t.get('opacity'))
+        styleBag.opacity = num(t.get('opacity'), 100) / 100;
+    // rounded=1 on an ORTHOGONAL edge = rounded elbows; rounded=0 explicitly
+    // asks for hard corners. Absent = the engine's default look. For rounded
+    // LINES mxGraph reads arcSize as an absolute diameter (LINE_ARCSIZE
+    // fallback), so radius = arcSize / 2.
+    if (link.pathType === 'orthogonal') {
+        const rounded = t.get('rounded');
+        if (rounded === '1') {
+            link.setConnector('rounded');
+            if (t.get('arcSize'))
+                styleBag.cornerRadius = num(t.get('arcSize'), 20) / 2;
+        }
+        else if (rounded === '0') {
+            link.setConnector('straight');
+        }
+    }
+    // Label style: the edge's own fontColor/fontSize, else the label CHILD
+    // cell's. Carried on a positioned LinkLabel because that is the label model
+    // that owns a style bag (the canonical metadata label is plain text).
+    if (labelText) {
+        const lt = labelCell ? parseStyle(labelCell.style).tokens : undefined;
+        const fontColor = (_a = t.get('fontColor')) !== null && _a !== void 0 ? _a : lt === null || lt === void 0 ? void 0 : lt.get('fontColor');
+        const fontSize = (_b = t.get('fontSize')) !== null && _b !== void 0 ? _b : lt === null || lt === void 0 ? void 0 : lt.get('fontSize');
+        if (fontColor || fontSize) {
+            const labelStyle = {};
+            if (fontColor)
+                labelStyle.color = fontColor;
+            if (fontSize)
+                labelStyle.fontSize = num(fontSize, 12);
+            link.addLabel({ text: labelText, position: 0.5, style: labelStyle });
+        }
+    }
+    if (Object.keys(styleBag).length > 0) {
+        link.style = Object.assign(Object.assign({}, link.style), styleBag);
+    }
+}
+/**
+ * mxGraph's rounded-rect corner radius, faithfully (mxRectangleShape.paintBackground):
+ *   absoluteArcSize=1 → r = min(w/2, h/2, arcSize/2)   (arcSize is a DIAMETER in px;
+ *                        absent, mxGraph falls back to LINE_ARCSIZE/2 = 10)
+ *   else              → r = min(w,h) · (arcSize/100)   (percentage — UNCAPPED,
+ *                        exactly as mxRectangleShape.paintBackground computes it;
+ *                        SVG itself clamps rx at half the side when painting, so
+ *                        capping here would only make the MODEL diverge)
+ * No arcSize and no absolute flag keeps the import's classic fixed 8px, which
+ * reads as "rounded" at every size (draw.io's own default factor is 15%).
+ */
+function roundedCornerRadius(t, width, height) {
+    const absolute = t.get('absoluteArcSize') === '1';
+    const arc = t.get('arcSize');
+    if (arc === undefined && !absolute)
+        return 8;
+    if (absolute) {
+        return Math.min(width / 2, height / 2, num(arc, 20) / 2);
+    }
+    return Math.min(width, height) * (num(arc, 15) / 100);
+}
+/**
+ * draw.io's `labelPosition` / `verticalLabelPosition` place the LABEL BOUNDS
+ * completely beside/below the vertex bounds (mxGraph semantics) — the
+ * icon-with-caption idiom every stencil library uses
+ * (`verticalLabelPosition=bottom;verticalAlign=top` on AWS, Azure, Citrix,
+ * network shapes). The engine's node label always paints INSIDE the
+ * silhouette, which turned those captions into ink ON the icon — black text
+ * on a black laptop stencil is invisible, and a caption on a small icon
+ * covers it.
+ *
+ * Two faithful mappings, no renderer changes:
+ * - a free-standing `text;` cell paints nothing but its label, so the offset
+ *   moves the CELL ITSELF to where the label bounds sit;
+ * - a shaped vertex keeps its silhouette and hands its caption to a
+ *   synthesized borderless text node where the label bounds sit, recorded on
+ *   BOTH sides (`drawioOutsideLabel` on the icon, `drawioLabelFor` on the
+ *   caption) so the pairing is data, never a mystery.
+ *
+ * Returns the synthesized caption node, if one was created.
+ */
+function applyOutsideLabelPlacement(node, cell, diagram) {
+    var _a;
+    const t = parseStyle(cell.style).tokens;
+    const h = t.get('labelPosition'); // left | center | right
+    const v = t.get('verticalLabelPosition'); // top | middle | bottom
+    const horizontal = h === 'left' || h === 'right' ? h : undefined;
+    const vertical = v === 'top' || v === 'bottom' ? v : undefined;
+    if ((!horizontal && !vertical) || !cell.value)
+        return undefined;
+    const { width, height } = node.size;
+    if (parseStyle(cell.style).first === 'text') {
+        // The whole cell IS the label — move it onto the label bounds.
+        node.setPosition(node.position.x + (horizontal === 'right' ? width : horizontal === 'left' ? -width : 0), node.position.y + (vertical === 'bottom' ? height : vertical === 'top' ? -height : 0));
+        node.setMetadata('drawioOutsideLabel', `${horizontal !== null && horizontal !== void 0 ? horizontal : 'center'}/${vertical !== null && vertical !== void 0 ? vertical : 'middle'}`);
+        return undefined;
+    }
+    const gap = 2;
+    // Wide enough for a caption to read without shrink-to-fit crushing it under
+    // a narrow icon, and TWO text lines tall INSIDE the renderer's padded inner
+    // rect: 8px padding top+bottom (defaultInnerRect) + 2 × 16.8px line height
+    // (14px md font × 1.2) ⇒ 50. At 36 only one line fit and every two-word
+    // caption ellipsized ("Thin Client" → "Thin…"). The renderer wraps +
+    // ellipsizes inside the box.
+    const labelW = Math.max(width, 70);
+    const labelH = 50;
+    const cx = node.position.x + width / 2;
+    const cy = node.position.y + height / 2;
+    const label = new NodeModel_1.NodeModel({
+        id: `${cell.id}__label`,
+        type: 'default',
+        position: {
+            x: cx -
+                labelW / 2 +
+                (horizontal === 'right'
+                    ? (width + labelW) / 2 + gap
+                    : horizontal === 'left'
+                        ? -((width + labelW) / 2 + gap)
+                        : 0),
+            y: cy -
+                labelH / 2 +
+                (vertical === 'bottom'
+                    ? (height + labelH) / 2 + gap
+                    : vertical === 'top'
+                        ? -((height + labelH) / 2 + gap)
+                        : 0),
+        },
+        size: { width: labelW, height: labelH },
+    });
+    label.setMetadata('shape', { type: 'rect', fill: 'none', stroke: 'none' });
+    label.setMetadata('drawioLabelFor', cell.id);
+    if (t.get('fontColor'))
+        label.style = Object.assign(Object.assign({}, ((_a = label.style) !== null && _a !== void 0 ? _a : {})), { color: t.get('fontColor') });
+    label.setLabel(cell.value);
+    diagram.addNode(label);
+    node.setLabel('');
+    node.setMetadata('drawioOutsideLabel', `${horizontal !== null && horizontal !== void 0 ? horizontal : 'center'}/${vertical !== null && vertical !== void 0 ? vertical : 'middle'}`);
+    return label;
+}
+/** Style tokens → metadata.shape (+ typed node.style for the paints the renderer honours). */
+function applyVertexStyle(node, cell, warnings, unmapped) {
+    var _a, _b, _c;
+    const style = parseStyle(cell.style);
+    const t = style.tokens;
+    // The shape slot: `shape=X` wins, else the bare leading token, else rect.
+    let shape = 'rect';
+    let cornerRadius;
+    const token = t.get('shape') || (style.first && !t.has('text') ? style.first : undefined);
+    if (token && token !== 'rect' && token !== 'rectangle') {
+        const mapped = SHAPE_MAP[token];
+        if (mapped) {
+            shape = mapped;
+        }
+        else {
+            // Inline stencil payloads (`stencil(base64…)`) can be kilobytes — name
+            // the loss without flooding the warning list with the whole payload.
+            const shown = token.length > 48 ? `${token.slice(0, 45)}…` : token;
+            warnings.push(`unknown shape token "${shown}" on cell "${cell.id}"; imported as rect`);
+        }
+    }
+    if (t.get('rounded') === '1' && shape === 'rect') {
+        cornerRadius = roundedCornerRadius(t, ((_a = cell.geometry) === null || _a === void 0 ? void 0 : _a.width) || 100, ((_b = cell.geometry) === null || _b === void 0 ? void 0 : _b.height) || 50);
+    }
+    const shapeMeta = { type: shape };
+    if (cornerRadius !== undefined)
+        shapeMeta['cornerRadius'] = cornerRadius;
+    if (t.get('fillColor'))
+        shapeMeta['fill'] = t.get('fillColor');
+    if (t.get('strokeColor'))
+        shapeMeta['stroke'] = t.get('strokeColor');
+    if (t.get('strokeWidth'))
+        shapeMeta['strokeWidth'] = num(t.get('strokeWidth'), 1);
+    // A `text` style cell is a free-standing LABEL, not a box: no fill, no border.
+    if (t.has('text')) {
+        shapeMeta['fill'] = 'none';
+        shapeMeta['stroke'] = 'none';
+    }
+    node.setMetadata('shape', shapeMeta);
+    // Paints the typed style bag expresses directly — these actually PAINT
+    // (style-cascade honours node.style), rather than riding as inert data.
+    const styleBag = {};
+    if (t.get('dashed') === '1')
+        styleBag['strokeDasharray'] = '6,4';
+    if (t.get('fontColor'))
+        styleBag['color'] = t.get('fontColor');
+    if (t.get('opacity'))
+        styleBag['opacity'] = num(t.get('opacity'), 100) / 100;
+    if (Object.keys(styleBag).length > 0) {
+        node.style = Object.assign(Object.assign({}, ((_c = node.style) !== null && _c !== void 0 ? _c : {})), styleBag);
+    }
+    collectUnmappedStyleKeys(cell.style, unmapped);
+}
+/** Aggregate the style keys the importer does not consume — one deduped warning per import. */
+function collectUnmappedStyleKeys(styleString, into) {
+    const { tokens, first } = parseStyle(styleString);
+    for (const key of tokens.keys()) {
+        if (CONSUMED_STYLE_KEYS.has(key))
+            continue;
+        if (key === first)
+            continue; // the shape slot is handled (mapped or warned) above
+        into.add(key);
+    }
+}
+//# sourceMappingURL=importDrawio.js.map