@grafloria/element 0.3.23 → 0.4.1

package/esm/src/lib/diagram-kit/rows.js

@@ -1,144 +0,0 @@
-/**
- * Row interactions — "select a column / field" on kit cards (P1 of the
- * ER/UML editing track).
- *
- * Kit cards are `interactive: true` (their rows are real DOM targets — the
- * binder's node click/drag resolution is geometric, so dragging and selecting
- * the TABLE keeps working; proven live before this was built). This module is
- * the runtime the kit's `finalize(api)` binds once per diagram:
- *
- *  - click a row → it becomes THE selected row (one per diagram), painted with
- *    `.axk-row-selected`; click again or click anywhere else → deselected;
- *  - every row click dispatches `axk:row-click` on the container, and every
- *    selection CHANGE dispatches `axk:row-select` — both bubbling
- *    CustomEvents, matching the element package's "DOM events out" contract;
- *  - the selected row survives card re-renders: the renderer keys the
- *    foreignObject by content hash, so an html edit swaps the subtree and
- *    drops the class — a MutationObserver re-applies it by (nodeId, rowIndex);
- *  - selection is EPHEMERAL view state, exactly like node selection: never
- *    serialized, never in the op log, not undoable.
- *
- * Row identity: `rowIndex` is the position among the card's rows (ER columns,
- * or UML members across both compartments); `name` resolves from the spec the
- * kit stored in node metadata (`kitEntity` / `kitClass`), falling back to the
- * row's text.
- */
-const ROW_SELECTOR = '.axk-row, .axk-member';
-const SELECTED_CLASS = 'axk-row-selected';
-/** One binding per container — rebinding disposes the previous one. */
-const bindings = new WeakMap();
-function rowsOfNode(container, nodeId) {
-    const esc = (window.CSS && CSS.escape) ? CSS.escape(nodeId) : nodeId.replace(/"/g, '\\"');
-    const group = container.querySelector(`[data-node-id="${esc}"]`);
-    return group ? Array.from(group.querySelectorAll(ROW_SELECTOR)) : [];
-}
-function resolveRef(container, api, rowEl) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const group = rowEl.closest('[data-node-id]');
-    if (!group)
-        return null;
-    const nodeId = group.getAttribute('data-node-id');
-    const rows = Array.from(group.querySelectorAll(ROW_SELECTOR));
-    const rowIndex = rows.indexOf(rowEl);
-    if (rowIndex === -1)
-        return null;
-    const kind = rowEl.classList.contains('axk-member') ? 'uml' : 'er';
-    const node = (_c = (_a = api.getModel) === null || _a === void 0 ? void 0 : (_b = _a.call(api)).getNode) === null || _c === void 0 ? void 0 : _c.call(_b, nodeId);
-    const meta = (key) => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, key); };
-    if (kind === 'er') {
-        const entity = meta('kitEntity');
-        const name = (_h = (_f = (_e = (_d = entity === null || entity === void 0 ? void 0 : entity.columns) === null || _d === void 0 ? void 0 : _d[rowIndex]) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : (_g = rowEl.querySelector('.axk-col')) === null || _g === void 0 ? void 0 : _g.textContent) !== null && _h !== void 0 ? _h : undefined;
-        return { nodeId, rowIndex, name: name !== null && name !== void 0 ? name : undefined, kind };
-    }
-    const cls = meta('kitClass');
-    const attrCount = (_k = (_j = cls === null || cls === void 0 ? void 0 : cls.attributes) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : countFirstCompartment(rowEl);
-    const section = rowIndex < attrCount ? 'attributes' : 'methods';
-    const name = (_q = (_o = (section === 'attributes' ? (_l = cls === null || cls === void 0 ? void 0 : cls.attributes) === null || _l === void 0 ? void 0 : _l[rowIndex] : (_m = cls === null || cls === void 0 ? void 0 : cls.methods) === null || _m === void 0 ? void 0 : _m[rowIndex - attrCount])) !== null && _o !== void 0 ? _o : (_p = rowEl.textContent) === null || _p === void 0 ? void 0 : _p.trim()) !== null && _q !== void 0 ? _q : undefined;
-    return { nodeId, rowIndex, name, kind, section };
-}
-/** Without spec metadata, the first compartment's member count splits sections. */
-function countFirstCompartment(rowEl) {
-    const card = rowEl.closest('.axk-uml');
-    const firstComp = card === null || card === void 0 ? void 0 : card.querySelector('.axk-uml-comp');
-    return firstComp ? firstComp.querySelectorAll('.axk-member').length : Number.MAX_SAFE_INTEGER;
-}
-export function bindRowInteractions(api) {
-    var _a;
-    const container = api.container;
-    (_a = bindings.get(container)) === null || _a === void 0 ? void 0 : _a.dispose();
-    let selected = null;
-    const paint = () => {
-        var _a;
-        for (const el of Array.from(container.querySelectorAll(`.${SELECTED_CLASS}`))) {
-            el.classList.remove(SELECTED_CLASS);
-        }
-        if (selected)
-            (_a = rowsOfNode(container, selected.nodeId)[selected.rowIndex]) === null || _a === void 0 ? void 0 : _a.classList.add(SELECTED_CLASS);
-    };
-    const emitSelect = () => {
-        container.dispatchEvent(new CustomEvent('axk:row-select', { bubbles: true, detail: { selected } }));
-    };
-    const setSelected = (next) => {
-        const same = (next === null && selected === null) ||
-            (next !== null && selected !== null && next.nodeId === selected.nodeId && next.rowIndex === selected.rowIndex);
-        if (same)
-            return;
-        selected = next;
-        paint();
-        emitSelect();
-    };
-    const onClick = (event) => {
-        var _a;
-        const target = event.target instanceof Element ? event.target : null;
-        const rowEl = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ROW_SELECTOR);
-        if (!rowEl || !container.contains(rowEl)) {
-            setSelected(null);
-            return;
-        }
-        const ref = resolveRef(container, api, rowEl);
-        if (!ref)
-            return;
-        container.dispatchEvent(new CustomEvent('axk:row-click', { bubbles: true, detail: Object.assign({}, ref) }));
-        const isReclick = selected && selected.nodeId === ref.nodeId && selected.rowIndex === ref.rowIndex;
-        setSelected(isReclick ? null : ref);
-    };
-    // Card re-renders replace the foreignObject subtree (content-hash keyed) and
-    // lose the class — re-apply whenever the selected row's paint went missing.
-    const observer = new MutationObserver(() => {
-        if (!selected)
-            return;
-        const el = rowsOfNode(container, selected.nodeId)[selected.rowIndex];
-        if (el && !el.classList.contains(SELECTED_CLASS))
-            paint();
-        else if (!el) {
-            // The row (or its node) is gone — the selection dies with it.
-            setSelected(null);
-        }
-    });
-    container.addEventListener('click', onClick);
-    observer.observe(container, { childList: true, subtree: true });
-    const handle = {
-        getSelected: () => (selected ? Object.assign({}, selected) : null),
-        select: (ref) => {
-            if (ref === null) {
-                setSelected(null);
-                return;
-            }
-            const el = rowsOfNode(container, ref.nodeId)[ref.rowIndex];
-            if (!el)
-                return;
-            const resolved = resolveRef(container, api, el);
-            if (resolved)
-                setSelected(resolved);
-        },
-        dispose: () => {
-            container.removeEventListener('click', onClick);
-            observer.disconnect();
-            if (bindings.get(container) === handle)
-                bindings.delete(container);
-        },
-    };
-    bindings.set(container, handle);
-    return handle;
-}
-//# sourceMappingURL=rows.js.map

package/esm/src/lib/diagram-kit/styles.js

@@ -1,118 +0,0 @@
-/**
- * Diagram-kit stylesheet — injected once, on first use of any kit builder.
- *
- * Everything is prefixed `axk-` and the selection overrides are scoped with
- * `:has(...)` to kit cards only, so embedding the kit can never restyle a
- * host's own nodes. The rules encode the lessons the diagrams/* demos learned
- * the hard way:
- *  - the card fills the node and draws the ONLY border (the node's own rect is
- *    hidden by the builders, and suppressed again on selection because the
- *    theme paints `.selected` with an accent stroke that overrides inline
- *    transparency);
- *  - the default `.selection-highlight` outline (a dashed rect a few px
- *    OUTSIDE the node) reads as a second floating box around a bordered card —
- *    the kit hides it and rings the card itself instead.
- */
-export const DIAGRAM_KIT_STYLE_ID = 'grafloria-diagram-kit-styles';
-const CSS = `
-/* ===== ER entity (table) cards ===== */
-.axk-entity { font: 12px/1.5 system-ui, sans-serif; border: 1px solid #64748b;
-  border-radius: 6px; overflow: hidden; background: #fff;
-  width: 100%; height: 100%; box-sizing: border-box;
-  display: flex; flex-direction: column; }
-.axk-entity-body { flex: 1; min-height: 0; overflow-y: hidden; }
-.axk-entity-body.axk-scroll { overflow-y: auto; scrollbar-width: thin; }
-.axk-entity-head { background: #334155; color: #fff; font-weight: 600;
-  letter-spacing: .3px; padding: 5px 10px; text-transform: uppercase; font-size: 11px; }
-.axk-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px;
-  border-top: 1px solid #e2e8f0; }
-.axk-key { width: 22px; font-size: 9px; font-weight: 700; color: #b45309; }
-.axk-key.axk-fk { color: #6d28d9; }
-.axk-col { flex: 1; color: #0f172a; }
-.axk-ty {
-  color: #64748b; font-size: 11px;
-  /* A new column starts with an EMPTY type, which collapsed the cell to zero
-     width — there was nothing to double-click, so a type could never be set on
-     a field you just added. Reserve a target and hint that it is editable. */
-  min-width: 52px; text-align: right; cursor: text;
-}
-.axk-ty:empty::before { content: 'type'; color: #cbd5e1; font-style: italic; }
-.axk-ty:hover { color: #0f172a; }
-.axk-row.axk-pk .axk-col { font-weight: 600; }
-
-/* ===== UML class cards ===== */
-.axk-uml { font: 12px/1.5 system-ui, sans-serif; border: 1px solid #475569;
-  border-radius: 4px; overflow: hidden; background: #fff;
-  width: 100%; height: 100%; box-sizing: border-box;
-  display: flex; flex-direction: column; }
-.axk-uml-body { flex: 1; min-height: 0; overflow-y: hidden; }
-.axk-uml-body.axk-scroll { overflow-y: auto; scrollbar-width: thin; }
-.axk-uml-name { text-align: center; font-weight: 700; padding: 5px 10px;
-  background: #eef2ff; color: #1e1b4b; }
-.axk-uml-name.axk-abstract { font-style: italic; }
-.axk-uml-stereo { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
-.axk-uml-comp { border-top: 1px solid #475569; padding: 3px 0; }
-.axk-uml-comp.axk-empty { min-height: 8px; }
-.axk-member { padding: 1px 10px; font: 11px/1.5 ui-monospace, Menlo, monospace;
-  color: #0f172a; white-space: nowrap; }
-
-/* ===== Row interactivity (cards are interactive; drag stays geometric) ===== */
-.axk-entity, .axk-uml { user-select: none; -webkit-user-select: none; }
-.axk-row:hover { background: rgba(37, 99, 235, .07); }
-.axk-member:hover { background: rgba(79, 70, 229, .07); }
-.axk-row-selected, .axk-row-selected:hover { background: rgba(37, 99, 235, .16);
-  box-shadow: inset 2px 0 0 #2563eb; }
-.axk-member.axk-row-selected, .axk-member.axk-row-selected:hover {
-  background: rgba(79, 70, 229, .16); box-shadow: inset 2px 0 0 #4f46e5; }
-
-/* ===== Selection: ring the CARD, never a detached rectangle ===== */
-g.node-group:has(.axk-entity) .selection-highlight,
-g.node-group:has(.axk-uml) .selection-highlight { display: none; }
-g.node-group[data-selected="true"] .axk-entity {
-  border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .45); }
-g.node-group[data-selected="true"] .axk-uml {
-  border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, .45); }
-g.node-group[data-selected="true"]:has(.axk-entity) rect.diagram-node,
-g.node-group[data-selected="true"]:has(.axk-uml) rect.diagram-node {
-  stroke: transparent !important; fill: none !important; }
-
-/* ===== In-canvas editing chrome (only present when editable) ===== */
-.axk-col-del { width: 14px; text-align: center; color: #94a3b8; cursor: pointer;
-  font-weight: 700; opacity: 0; transition: opacity .1s; flex: 0 0 auto; }
-.axk-row:hover .axk-col-del, .axk-member:hover .axk-col-del { opacity: 1; }
-.axk-col-del:hover { color: #dc2626; }
-/* Only editable members (which wrap their text in .axk-mtext) go flex — a
-   read-only member stays a plain text div, so its golden never shifts. */
-.axk-member:has(.axk-mtext) { display: flex; align-items: center; }
-.axk-member .axk-mtext { flex: 1; }
-.axk-entity-add, .axk-uml-add { padding: 3px 10px; font-size: 11px; font-weight: 600;
-  color: #2563eb; cursor: pointer; border-top: 1px dashed #cbd5e1; user-select: none; }
-.axk-uml-add { color: #4f46e5; border-top: 1px dashed #c7d2fe; text-align: left; }
-.axk-entity-add:hover, .axk-uml-add:hover { background: rgba(37, 99, 235, .08); }
-.axk-edit-input { font: 12px/1.4 system-ui, sans-serif; box-sizing: border-box;
-  border: 1px solid #2563eb; border-radius: 3px; padding: 1px 6px; margin: 0;
-  background: #fff; color: #0f172a; outline: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
-
-/* ===== Dark mode ===== */
-@media (prefers-color-scheme: dark) {
-  .axk-entity { background: #1e293b; border-color: #475569; }
-  .axk-row { border-top-color: #334155; }
-  .axk-col { color: #e2e8f0; }
-  .axk-uml { background: #1e293b; border-color: #64748b; }
-  .axk-uml-name { background: #312e81; color: #e0e7ff; }
-  .axk-uml-comp { border-top-color: #64748b; }
-  .axk-member { color: #e2e8f0; }
-}
-`;
-/** Inject the kit stylesheet once. Safe to call repeatedly and in SSR. */
-export function ensureDiagramKitStyles(doc = typeof document !== 'undefined' ? document : undefined) {
-    if (!doc)
-        return;
-    if (doc.getElementById(DIAGRAM_KIT_STYLE_ID))
-        return;
-    const style = doc.createElement('style');
-    style.id = DIAGRAM_KIT_STYLE_ID;
-    style.textContent = CSS;
-    doc.head.appendChild(style);
-}
-//# sourceMappingURL=styles.js.map

package/esm/src/lib/diagram-kit/uml.js

@@ -1,135 +0,0 @@
-/**
- * UML class-diagram kit — typed builders for the full relationship vocabulary.
- *
- * The packaged form of demos/diagrams/class-uml.html + uml-relationships.html:
- * three-compartment class cards («stereotype», name, attributes, methods) and
- * every standard relationship with its real notation:
- *
- *   inheritance          ── solid,  hollow triangle at the parent
- *   realization          ┄┄ dashed, hollow triangle at the interface
- *   association          ── plain line (multiplicity chips optional)
- *   directed-association ── open arrow at the target
- *   aggregation          ── hollow diamond at the whole (source)
- *   composition          ── FILLED diamond at the whole (source)
- *   dependency           ┄┄ dashed, open arrow («uses»)
- *
- * ```ts
- * const spec = umlDiagram({
- *   classes: [{ id: 'Shape', abstract: true, attributes: ['# x: float'], methods: ['+ area(): float'] }],
- *   relationships: [{ from: 'Circle', to: 'Shape', kind: 'inheritance' }],
- * });
- * const api = render(spec, container);
- * spec.finalize(api); // attaches multiplicity chips (needs the live model)
- * ```
- */
-import { ensureDiagramKitStyles } from './styles';
-import { bindRowInteractions } from './rows';
-import { classCardContent, classAutoHeight } from './card';
-import { bindCardEditing } from './editing';
-const DEFAULT_WIDTH = 200;
-const STROKE = '#475569';
-const DASH = '6,4';
-/**
- * The notation table. Every kind sets arrowHead EXPLICITLY — a plain line must
- * carry `arrowHead: none`, or the renderer paints its default arrow (the
- * stray-arrowhead bug the demos hit live).
- */
-function edgeStyleFor(kind) {
-    const none = { type: 'none', size: 0, filled: false };
-    switch (kind) {
-        case 'inheritance':
-            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: { type: 'generalization', size: 16, filled: false }, arrowTail: none };
-        case 'realization':
-            return { stroke: STROKE, strokeWidth: 1.5, strokeDasharray: DASH, arrowHead: { type: 'generalization', size: 16, filled: false }, arrowTail: none };
-        case 'association':
-            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: none };
-        case 'directed-association':
-            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: { type: 'open-arrow', size: 12, filled: false }, arrowTail: none };
-        case 'aggregation':
-            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: { type: 'hollow-diamond', size: 14, filled: false } };
-        case 'composition':
-            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: { type: 'filled-diamond', size: 14, filled: true } };
-        case 'dependency':
-            return { stroke: STROKE, strokeWidth: 1.5, strokeDasharray: DASH, arrowHead: { type: 'open-arrow', size: 12, filled: false }, arrowTail: none };
-    }
-}
-/** Multiplicity chip, positioned near an edge end. */
-const chip = (text, slot) => ({
-    text,
-    slot,
-    offset: { x: 0, y: -7 },
-    style: { fontSize: 11, fontWeight: '600', color: '#0f172a', background: '#ffffffdd', padding: 1, borderRadius: 2 },
-});
-/**
- * Build a render() spec for a UML class diagram. Call `spec.finalize(api)`
- * after render() — multiplicity chips are positioned labels, which only the
- * live model's `link.addLabel` can express.
- */
-export function umlDiagram(options) {
-    var _a;
-    ensureDiagramKitStyles();
-    const editable = options.editable === true;
-    const nodes = options.classes.map((cls, i) => {
-        var _a, _b;
-        return {
-            id: cls.id,
-            position: (_a = cls.position) !== null && _a !== void 0 ? _a : { x: 80 + (i % 3) * 320, y: 60 + Math.floor(i / 3) * 260 },
-            size: { width: (_b = cls.width) !== null && _b !== void 0 ? _b : DEFAULT_WIDTH, height: classAutoHeight(cls, editable) },
-            // interactive: members are real DOM targets (hover, row selection, inline
-            // editing); node drag/select stay geometric in the binder.
-            metadata: Object.assign({ html: { content: classCardContent(cls, editable), interactive: true }, kitClass: cls, kitEditable: editable }, (options.rowSelection === false ? { kitRowSelection: false } : {})),
-            shape: { type: 'rect', fill: 'none', stroke: 'none' },
-            style: { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 },
-        };
-    });
-    const rels = (_a = options.relationships) !== null && _a !== void 0 ? _a : [];
-    const edges = rels.map((rel, i) => {
-        var _a, _b;
-        return (Object.assign(Object.assign(Object.assign({ id: (_a = rel.id) !== null && _a !== void 0 ? _a : `uml-rel-${i + 1}`, source: rel.from, target: rel.to, label: rel.label, type: 'orthogonal' }, (rel.fromSide ? { sourceHandle: rel.fromSide } : {})), (rel.toSide ? { targetHandle: rel.toSide } : {})), { style: edgeStyleFor((_b = rel.kind) !== null && _b !== void 0 ? _b : 'association') }));
-    });
-    // finalize is idempotent per api: render() auto-runs it, and a demo may also
-    // call it — chips must not be added twice.
-    const finalized = new WeakSet();
-    const finalize = (api) => {
-        var _a, _b, _c, _d, _e, _f;
-        const a0 = api;
-        // Own card ring only — suppress the node resize handles on the live model
-        // (the render-input path does not honour a spec-level `behavior`).
-        const m0 = (_a = a0 === null || a0 === void 0 ? void 0 : a0.getModel) === null || _a === void 0 ? void 0 : _a.call(a0);
-        if (m0)
-            for (const cls of options.classes)
-                (_d = (_c = (_b = m0.getNode) === null || _b === void 0 ? void 0 : _b.call(m0, cls.id)) === null || _c === void 0 ? void 0 : _c.setBehavior) === null || _d === void 0 ? void 0 : _d.call(_c, { resizable: false });
-        if (options.rowSelection !== false) {
-            const a = api;
-            // bindRowInteractions disposes any prior binding for the container, so it
-            // is safe to run twice.
-            if (a === null || a === void 0 ? void 0 : a.container)
-                bindRowInteractions(a);
-        }
-        if (editable && (a0 === null || a0 === void 0 ? void 0 : a0.container))
-            bindCardEditing(a0);
-        if (api && typeof api === 'object') {
-            if (finalized.has(api))
-                return;
-            finalized.add(api);
-        }
-        const model = (_e = api === null || api === void 0 ? void 0 : api.getModel) === null || _e === void 0 ? void 0 : _e.call(api);
-        if (!model)
-            return;
-        let added = false;
-        rels.forEach((rel, i) => {
-            if (!rel.multiplicity)
-                return;
-            const link = model.getLink(edges[i].id);
-            if (!link)
-                return;
-            link.addLabel(chip(rel.multiplicity[0], 'start'));
-            link.addLabel(chip(rel.multiplicity[1], 'end'));
-            added = true;
-        });
-        if (added)
-            (_f = api === null || api === void 0 ? void 0 : api.renderNow) === null || _f === void 0 ? void 0 : _f.call(api);
-    };
-    return { nodes, edges, finalize };
-}
-//# sourceMappingURL=uml.js.map

package/esm/src/lib/diagram-kit/update.js

@@ -1,244 +0,0 @@
-/**
- * Live editing — `updateEntity` / `updateClass` mutate a rendered kit card in
- * place (P3, the foundation the in-canvas editing chrome is built on).
- *
- * A delta changes the DATA (a table's name, its columns; a class's name,
- * attributes, methods, width/height) and this module:
- *   1. reads the stored spec (`kitEntity` / `kitClass`) — the source of truth;
- *   2. applies the delta to a NEW spec (the caller's objects are never mutated,
- *      so undo can restore the old one cleanly);
- *   3. regenerates the card html from the SAME builder er.ts/uml.ts use
- *      (`card.ts`), so an edited card is identical to a freshly-built one;
- *   4. recomputes the node size;
- *   5. RECONCILES the field ports — every port pinned to a surviving column
- *      moves to that column's new row (`erRowCenterY`), ports on a removed
- *      column are dropped along with their edges. Port ids never change, so an
- *      edge stays glued to its row across inserts/removes/reorders (the exact
- *      failure this solves: a port frozen at the old row while the rows shifted
- *      under it);
- *   6. repaints — as ONE undoable step.
- *
- * ONE UNDO STEP. The change is applied through `api.getEngine().commandManager`
- * — the same public seam `renderer/ext/public-api.ts` uses — wrapped in a
- * single kit-local {@link Command}. There is no `SetNodeMetadataCommand` in the
- * engine (the html/kit-spec mutation has no built-in command), so rather than
- * reach into engine internals or compose a half-undoable macro, the whole edit
- * lives in one Command subclass here (subclassing `Command` is the engine's
- * intended extension point — every basic command does it). When no engine is
- * present the edit still applies, just non-undoably.
- */
-import { __awaiter } from "tslib";
-import { Command, PortModel, LinkModel } from '@grafloria/engine';
-import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, erRowCenterY, rowIndexFromY, matchColumns, } from './card';
-/**
- * The single undoable edit. Captures the card's whole before-state on first
- * execute and restores it on undo, so an edit — however many rows and edges it
- * touched — is one Ctrl+Z.
- */
-class UpdateCardCommand extends Command {
-    constructor(nodeId, kind, build) {
-        super(kind === 'er' ? 'Edit table' : 'Edit class');
-        this.nodeId = nodeId;
-        this.kind = kind;
-        this.build = build;
-        this.captured = false;
-    }
-    execute(context) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const model = context.diagram;
-        const node = model.getNode(this.nodeId);
-        if (!node)
-            return;
-        const kitKey = this.kind === 'er' ? 'kitEntity' : 'kitClass';
-        const oldKit = ((_a = node.getMetadata(kitKey)) !== null && _a !== void 0 ? _a : {});
-        if (!this.captured) {
-            this.captured = true;
-            this.before = {
-                html: node.getMetadata('html'),
-                kit: oldKit,
-                size: Object.assign({}, node.size),
-                ports: node.getPorts().map((p) => p.serialize()),
-                links: [],
-            };
-        }
-        const result = this.build(oldKit);
-        const newWidth = (_b = result.width) !== null && _b !== void 0 ? _b : node.size.width;
-        const removedLinks = [];
-        if (this.kind === 'er') {
-            const oldCols = ((_c = oldKit['columns']) !== null && _c !== void 0 ? _c : []);
-            const newCols = ((_d = result.newKit['columns']) !== null && _d !== void 0 ? _d : []);
-            const map = matchColumns(oldCols, newCols);
-            for (const port of [...node.getPorts()]) {
-                const args = (_e = port.layout) === null || _e === void 0 ? void 0 : _e.args;
-                if (((_f = port.layout) === null || _f === void 0 ? void 0 : _f.strategy) !== 'absolute' || !args || args.units !== 'px' || args.y == null)
-                    continue;
-                const oldIdx = rowIndexFromY(args.y);
-                if (oldIdx < 0 || oldIdx >= oldCols.length)
-                    continue; // not a row-pinned field port
-                const newIdx = map.get(oldIdx);
-                if (newIdx === undefined) {
-                    // The column is gone — drop the port and every edge riding it.
-                    for (const link of model.getLinks()) {
-                        if (link.sourcePortId === port.id || link.targetPortId === port.id)
-                            removedLinks.push(link.serialize());
-                    }
-                    for (const link of model.getLinks().filter((l) => l.sourcePortId === port.id || l.targetPortId === port.id)) {
-                        model.removeLink(link.id);
-                    }
-                    node.removePort(port.id);
-                }
-                else {
-                    // Move the port to its column's NEW row; keep the ±dy spread. x tracks
-                    // the (possibly changed) width by side, so a widened table stays pinned.
-                    args.y = erRowCenterY(newIdx);
-                    const side = (_g = port.alignment) === null || _g === void 0 ? void 0 : _g.side;
-                    args.x = side === 'left' ? 0 : side === 'right' ? newWidth : newWidth / 2;
-                    // A nested-arg mutation is not tracked — nudge the port so the model
-                    // marks it dirty and the renderer repositions it this frame.
-                    port.setOffset(Object.assign({}, ((_h = port.offset) !== null && _h !== void 0 ? _h : { x: 0, y: 0 })));
-                }
-            }
-        }
-        node.setMetadata('html', { content: result.content, interactive: true });
-        node.setMetadata(kitKey, result.newKit);
-        node.setSize(newWidth, result.height);
-        if (this.before)
-            this.before.links = removedLinks;
-    }
-    undo(context) {
-        var _a;
-        const model = context.diagram;
-        const node = model.getNode(this.nodeId);
-        if (!node || !this.before)
-            return;
-        node.setMetadata('html', this.before.html);
-        node.setMetadata(this.kind === 'er' ? 'kitEntity' : 'kitClass', this.before.kit);
-        node.setSize(this.before.size.width, this.before.size.height);
-        const beforeIds = new Set(this.before.ports.map((p) => p['id']));
-        for (const p of [...node.getPorts()])
-            if (!beforeIds.has(p.id))
-                node.removePort(p.id);
-        for (const sp of this.before.ports) {
-            const live = node.getPort(sp['id']);
-            if (live) {
-                live.layout = sp['layout'];
-                live.setOffset(Object.assign({}, ((_a = sp['offset']) !== null && _a !== void 0 ? _a : { x: 0, y: 0 })));
-            }
-            else {
-                node.addPort(PortModel.fromJSON(sp));
-            }
-        }
-        for (const sl of this.before.links) {
-            if (!model.getLink(sl['id']))
-                model.addLink(LinkModel.fromJSON(sl));
-        }
-    }
-    canExecute(context) {
-        var _a;
-        return !!((_a = context.diagram) === null || _a === void 0 ? void 0 : _a.getNode(this.nodeId));
-    }
-    serialize() {
-        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { nodeId: this.nodeId, kind: this.kind } };
-    }
-}
-/** Route a build through the engine's command stack (one undo step) or apply it directly. */
-function runUpdate(api, nodeId, kind, build) {
-    return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e;
-        const model = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api);
-        const node = (_b = model === null || model === void 0 ? void 0 : model.getNode) === null || _b === void 0 ? void 0 : _b.call(model, nodeId);
-        if (!model || !node)
-            return false;
-        const command = new UpdateCardCommand(nodeId, kind, build);
-        const cm = (_d = (_c = api.getEngine) === null || _c === void 0 ? void 0 : _c.call(api)) === null || _d === void 0 ? void 0 : _d.commandManager;
-        if (cm === null || cm === void 0 ? void 0 : cm.execute) {
-            yield cm.execute(command); // ONE undoable step (Command enters history once)
-        }
-        else {
-            command.execute({ diagram: model }); // no engine — apply, non-undoably
-        }
-        (_e = api.renderNow) === null || _e === void 0 ? void 0 : _e.call(api);
-        return true;
-    });
-}
-const isEditable = (node) => (node === null || node === void 0 ? void 0 : node.getMetadata('kitEditable')) === true;
-/**
- * Edit a rendered ER table in place. `delta` may change the name, the column
- * list (add / remove / reorder / rename / retype), and the width/height. Field
- * ports and their edges are reconciled so the diagram stays correct, as ONE
- * undoable step.
- *
- * @returns whether the node existed and the edit was applied.
- */
-export function updateEntity(api, entityId, delta) {
-    var _a, _b, _c;
-    const editable = isEditable((_c = (_b = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api)) === null || _b === void 0 ? void 0 : _b.getNode) === null || _c === void 0 ? void 0 : _c.call(_b, entityId));
-    const build = (oldKit) => {
-        const newEntity = Object.assign({}, oldKit);
-        if (delta.name !== undefined)
-            newEntity.name = delta.name;
-        if (delta.width !== undefined)
-            newEntity.width = delta.width;
-        if (delta.height !== undefined)
-            newEntity.height = delta.height;
-        if (delta.columns !== undefined)
-            newEntity.columns = delta.columns;
-        return {
-            newKit: newEntity,
-            content: entityCardContent(newEntity, editable),
-            height: entityAutoHeight(newEntity, editable),
-            width: newEntity.width,
-        };
-    };
-    return runUpdate(api, entityId, 'er', build);
-}
-/**
- * Edit a rendered UML class in place. `delta` may change the name, stereotype,
- * abstract flag, attributes, methods, and width/height. One undoable step.
- */
-export function updateClass(api, classId, delta) {
-    var _a, _b, _c;
-    const editable = isEditable((_c = (_b = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api)) === null || _b === void 0 ? void 0 : _b.getNode) === null || _c === void 0 ? void 0 : _c.call(_b, classId));
-    const build = (oldKit) => {
-        const newClass = Object.assign({}, oldKit);
-        if (delta.name !== undefined)
-            newClass.name = delta.name;
-        if (delta.stereotype !== undefined)
-            newClass.stereotype = delta.stereotype;
-        if (delta.abstract !== undefined)
-            newClass.abstract = delta.abstract;
-        if (delta.width !== undefined)
-            newClass.width = delta.width;
-        if (delta.height !== undefined)
-            newClass.height = delta.height;
-        if (delta.attributes !== undefined)
-            newClass.attributes = delta.attributes;
-        if (delta.methods !== undefined)
-            newClass.methods = delta.methods;
-        return {
-            newKit: newClass,
-            content: classCardContent(newClass, editable),
-            height: classAutoHeight(newClass, editable),
-            width: newClass.width,
-        };
-    };
-    return runUpdate(api, classId, 'uml', build);
-}
-// -- small column helpers, for the editing chrome and embedders --------------
-/** Append a column (immutably) — returns the new column array. */
-export function addColumnAt(columns, column, at = columns.length) {
-    const next = columns.slice();
-    next.splice(Math.max(0, Math.min(at, next.length)), 0, column);
-    return next;
-}
-/** Remove the column at `index` — returns the new column array. */
-export function removeColumnAt(columns, index) {
-    const next = columns.slice();
-    next.splice(index, 1);
-    return next;
-}
-/** Rename the column at `index` — returns a new array with a NEW object there. */
-export function renameColumnAt(columns, index, name) {
-    return columns.map((c, i) => (i === index ? Object.assign(Object.assign({}, c), { name }) : c));
-}
-//# sourceMappingURL=update.js.map