@grafloria/element 0.3.18 → 0.3.20

package/src/libs/element/src/lib/diagram-kit/editing.js

@@ -0,0 +1,453 @@
+"use strict";
+/**
+ * In-canvas editing chrome (P2 title rename + P4 column/member editing).
+ *
+ * Bound once per container by a kit's `finalize(api)` when `editable: true`.
+ * It turns the editing affordances the card already draws (`card.ts` grows them
+ * when editable) into gestures:
+ *
+ *   - double-click the header (`.axk-entity-head` / `.axk-uml-name`) → rename
+ *     the table / class;
+ *   - double-click a column name (`.axk-col`) or a member (`.axk-member`) →
+ *     rename it in place;
+ *   - click the "＋ add column" / "＋ attribute" / "＋ method" affordance → add
+ *     one, then inline-edit its name;
+ *   - click a row's "×" delete control → remove that column / member.
+ *
+ * Every mutation goes through {@link updateEntity} / {@link updateClass} — so it
+ * is ONE undoable step and the card + ports + edges stay consistent.
+ *
+ * The inline editor is a real `<input>` mounted in the renderer's WORLD layer
+ * via `createViewportPortal`, so it pans and zooms WITH the card. When there is
+ * no world layer (a bare jsdom mount, or a host that swapped the renderer) it
+ * falls back to an absolutely-positioned input in the container — the edit
+ * still commits, it just doesn't track the camera.
+ *
+ * Control clicks are claimed in the CAPTURE phase (`stopPropagation`) so the
+ * row-selection handler and the binder's node/​waypoint double-click never also
+ * fire for the same gesture.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ER_TYPE_SUGGESTIONS = void 0;
+exports.dismissInlineEditor = dismissInlineEditor;
+exports.bindCardEditing = bindCardEditing;
+const update_1 = require("./update");
+const bindings = new WeakMap();
+const ROW_SELECTOR = '.axk-row, .axk-member';
+/** Resolve the node id + the clicked row's global index (among selectable rows). */
+function locate(el) {
+    const group = el.closest('[data-node-id]');
+    if (!group)
+        return null;
+    const nodeId = group.getAttribute('data-node-id');
+    if (!nodeId)
+        return null;
+    const rowEl = el.closest(ROW_SELECTOR);
+    const rows = Array.from(group.querySelectorAll(ROW_SELECTOR));
+    const rowIndex = rowEl ? rows.indexOf(rowEl) : -1;
+    return { nodeId, rowIndex, group };
+}
+const kitEntity = (api, nodeId) => { var _a; return (_a = api.getModel().getNode(nodeId)) === null || _a === void 0 ? void 0 : _a.getMetadata('kitEntity'); };
+const kitClass = (api, nodeId) => { var _a; return (_a = api.getModel().getNode(nodeId)) === null || _a === void 0 ? void 0 : _a.getMetadata('kitClass'); };
+/** UML: split a global member index into its compartment + local index. */
+function umlSection(cls, rowIndex) {
+    var _a;
+    const attrs = (_a = cls.attributes) !== null && _a !== void 0 ? _a : [];
+    return rowIndex < attrs.length
+        ? { section: 'attributes', local: rowIndex }
+        : { section: 'methods', local: rowIndex - attrs.length };
+}
+/**
+ * Mount a focused `<input>` over `targetEl`, prefilled with `value`. Commits on
+ * Enter/blur, cancels on Escape. Returns the input (already in the DOM).
+ */
+/**
+ * The inline editor currently open, if any.
+ *
+ * The editor is mounted in the renderer's WORLD layer, not inside the card, so
+ * it does not die when the card re-renders. That is what lets it survive a
+ * re-render mid-edit — and it is also why deleting the very row being edited
+ * used to leave a stray input floating over the canvas: the row vanished, the
+ * portal did not. Any structural edit now dismisses it first.
+ */
+let activeEditor = null;
+/** Dismiss any open inline editor WITHOUT committing. */
+function dismissInlineEditor() {
+    const open = activeEditor;
+    activeEditor = null;
+    open === null || open === void 0 ? void 0 : open.cancel();
+}
+function addrOf(el) {
+    const loc = locate(el);
+    if (!loc || loc.rowIndex < 0)
+        return null;
+    const kind = el.closest('.axk-ty') ? 'type' : 'name';
+    return { nodeId: loc.nodeId, rowIndex: loc.rowIndex, kind };
+}
+/** The cell `dir` steps away in reading order (name → type → next row's name). */
+function neighbourCell(el, dir) {
+    const a = addrOf(el);
+    if (!a)
+        return null;
+    if (dir === 1) {
+        return a.kind === 'name'
+            ? Object.assign(Object.assign({}, a), { kind: 'type' }) : Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex + 1, kind: 'name' });
+    }
+    return a.kind === 'type'
+        ? Object.assign(Object.assign({}, a), { kind: 'name' }) : Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex - 1, kind: 'type' });
+}
+/** The same column, one row down. */
+function cellBelow(el) {
+    const a = addrOf(el);
+    return a ? Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex + 1 }) : null;
+}
+/** Re-open the editor at an address, if that cell still exists. */
+function reopenAt(api, addr) {
+    const card = api.container.querySelector(`[data-node-id="${cssEscape(addr.nodeId)}"]`);
+    const row = card === null || card === void 0 ? void 0 : card.querySelectorAll('.axk-row, .axk-member')[addr.rowIndex];
+    const cell = row === null || row === void 0 ? void 0 : row.querySelector(addr.kind === 'type' ? '.axk-ty' : '.axk-col');
+    if (cell)
+        beginRename(api, cell);
+}
+/** First occurrence wins, order preserved. */
+function dedupe(values) {
+    return [...new Set(values)];
+}
+/** SQL-ish column types offered when editing a type cell. */
+exports.ER_TYPE_SUGGESTIONS = [
+    'uuid', 'int', 'bigint', 'smallint', 'serial', 'decimal', 'numeric', 'real', 'double',
+    'varchar', 'text', 'char', 'boolean', 'date', 'time', 'timestamp', 'timestamptz',
+    'json', 'jsonb', 'bytea', 'enum',
+];
+function openInlineEditor(api, targetEl, value, onCommit, suggestions) {
+    const container = api.container;
+    const doc = container.ownerDocument;
+    const input = doc.createElement('input');
+    input.className = 'axk-edit-input';
+    input.value = value;
+    input.spellcheck = false;
+    input.setAttribute('autocomplete', 'off');
+    // A type is a choice, not free prose. `<datalist>` gives a real combobox —
+    // the browser filters the list AS YOU TYPE and still allows a value that is
+    // not in it, which is what a schema editor needs (custom/domain types).
+    let listEl = null;
+    if (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) {
+        listEl = doc.createElement('datalist');
+        listEl.id = `axk-types-${Math.random().toString(36).slice(2, 8)}`;
+        for (const t of suggestions) {
+            const opt = doc.createElement('option');
+            opt.value = t;
+            listEl.appendChild(opt);
+        }
+        doc.body.appendChild(listEl);
+        input.setAttribute('list', listEl.id);
+    }
+    // POSITIONING — screen space, deliberately.
+    //
+    // This used to mount the input in the renderer's world layer through a
+    // viewport portal so it would scale and pan with the canvas. That produced a
+    // steady trickle of defects: the caret landed between two rows (world/zoom
+    // maths compounding with the card's own scroll offset), and — because the
+    // world layer carries a CSS transform — the browser refused to place the
+    // native <datalist> popup, so the type dropdown never opened.
+    //
+    // An inline editor lives for a few seconds. Pinning it over the cell's actual
+    // screen rect is exact by construction (no maths to get wrong) and keeps it
+    // out of any transformed ancestor, which is what the native popup needs. The
+    // cost is that it does not follow a pan mid-edit; that is a fair trade for an
+    // editor that is reliably WHERE THE CELL IS.
+    const rect = targetEl.getBoundingClientRect();
+    const host = container.getBoundingClientRect();
+    const minW = (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? 132 : 72;
+    let w = Math.max(rect.width, minW);
+    let left = rect.left;
+    // Never spill past the card: slide left to fit, shrink only if the card is
+    // narrower than the floor.
+    const card = targetEl.closest('.axk-entity, .axk-uml');
+    if (card) {
+        const cb = card.getBoundingClientRect();
+        const pad = 4;
+        if (w > cb.width - pad * 2)
+            w = cb.width - pad * 2;
+        const overflow = left + w - (cb.right - pad);
+        if (overflow > 0)
+            left -= overflow;
+        if (left < cb.left + pad)
+            left = cb.left + pad;
+    }
+    // `position: fixed` keys off the viewport, exactly like getBoundingClientRect,
+    // so no ancestor offset or scroll correction can drift it.
+    input.style.cssText =
+        `position:fixed;left:${Math.round(left)}px;top:${Math.round(rect.top)}px;` +
+            `width:${Math.round(w)}px;height:${Math.round(rect.height)}px;z-index:2147483000;`;
+    void host; // container rect intentionally unused: fixed positioning needs none
+    // Mounted on the CONTAINER, not document.body: hosts (and the kit's own
+    // tests) look the editor up inside the diagram container, and moving it out
+    // silently broke every one of those lookups. `position: fixed` still keys off
+    // the viewport, so it stays exact — the point was only ever to escape the
+    // world layer's CSS transform, which is a descendant of the container.
+    container.appendChild(input);
+    /** Guards double-settling (blur fires after Enter/Escape already handled it). */
+    let done = false;
+    const self = { cancel: () => undefined };
+    const cleanup = () => {
+        if (activeEditor === self)
+            activeEditor = null;
+        listEl === null || listEl === void 0 ? void 0 : listEl.remove();
+        input.remove();
+    };
+    const commit = () => {
+        if (done)
+            return;
+        done = true;
+        const next = input.value.trim();
+        cleanup();
+        if (next.length)
+            onCommit(next);
+    };
+    const cancel = () => {
+        if (done)
+            return;
+        done = true;
+        cleanup();
+    };
+    input.addEventListener('keydown', (e) => {
+        // Keyboard navigation: TAB walks the cells (name → type → next row's name,
+        // Shift+Tab back). Enter deliberately does NOT move — it commits and
+        // closes, which is what every other inline editor in the app does and what
+        // a user pressing Enter to "finish" expects. Navigation belongs on Tab.
+        if (e.key === 'Tab') {
+            const next = neighbourCell(targetEl, e.shiftKey ? -1 : 1);
+            if (next) {
+                e.preventDefault();
+                commit();
+                // Re-open on the next cell after the card has re-rendered.
+                setTimeout(() => reopenAt(api, next), 0);
+                return;
+            }
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancel();
+        }
+        e.stopPropagation();
+    });
+    // Registered AFTER commit/cancel exist so a structural edit can dismiss it.
+    self.cancel = cancel;
+    activeEditor = self;
+    input.addEventListener('blur', commit);
+    // Don't let a click INSIDE the input bubble to the canvas (deselect / pan).
+    // Keep the canvas binder OUT of the editor. It listens on POINTER events and
+    // preventDefaults them to own the gesture — which also suppressed the native
+    // <datalist> popup, so the type dropdown either never opened or flashed open
+    // and shut. Guarding `mousedown` alone was not enough: pointerdown fires
+    // first and is what the binder acts on.
+    for (const type of ['pointerdown', 'pointerup', 'mousedown', 'mouseup', 'click', 'dblclick']) {
+        input.addEventListener(type, (e) => e.stopPropagation());
+    }
+    // Focus after mount so select() works.
+    setTimeout(() => {
+        input.focus();
+        input.select();
+    }, 0);
+    return input;
+}
+/** Begin renaming whatever the clicked row/header targets. */
+function beginRename(api, target) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const loc = locate(target);
+    if (!loc)
+        return;
+    const { nodeId, rowIndex } = loc;
+    // Title (ER header / UML name).
+    if (target.closest('.axk-entity-head')) {
+        const ent = kitEntity(api, nodeId);
+        openInlineEditor(api, target.closest('.axk-entity-head'), (_a = ent === null || ent === void 0 ? void 0 : ent.name) !== null && _a !== void 0 ? _a : nodeId, (name) => void (0, update_1.updateEntity)(api, nodeId, { name }));
+        return;
+    }
+    if (target.closest('.axk-uml-name')) {
+        const cls = kitClass(api, nodeId);
+        openInlineEditor(api, target.closest('.axk-uml-name'), (_b = cls === null || cls === void 0 ? void 0 : cls.name) !== null && _b !== void 0 ? _b : nodeId, (name) => void (0, update_1.updateClass)(api, nodeId, { name }));
+        return;
+    }
+    // ER column. Which CELL was double-clicked decides what gets edited and where
+    // the input is mounted: the name span (`.axk-col`) and the type span
+    // (`.axk-ty`) are SIBLINGS inside `.axk-row`. Editing only ever handled the
+    // name and always anchored to it, so double-clicking a type either did
+    // nothing or dropped the caret over the name — the wrong field in the wrong
+    // place. A double-click anywhere else on the row falls back to the name,
+    // anchored to the name cell, so the gesture is predictable everywhere.
+    const typeEl = target.closest('.axk-ty');
+    if (typeEl && rowIndex >= 0) {
+        const ent = kitEntity(api, nodeId);
+        if (!ent)
+            return;
+        openInlineEditor(api, typeEl, (_d = (_c = ent.columns[rowIndex]) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : '', (type) => {
+            const columns = ent.columns.map((c, i) => (i === rowIndex ? Object.assign(Object.assign({}, c), { type }) : c));
+            void (0, update_1.updateEntity)(api, nodeId, { columns });
+        }, 
+        // Offer the types already used in THIS diagram first, then the standards —
+        // a schema is usually internally consistent, so what you just typed
+        // elsewhere is the likeliest next value.
+        dedupe([...ent.columns.map((c) => c.type).filter(Boolean), ...exports.ER_TYPE_SUGGESTIONS]));
+        return;
+    }
+    const rowEl = target.closest('.axk-row');
+    const colEl = (_f = (_e = target.closest('.axk-col')) !== null && _e !== void 0 ? _e : rowEl === null || rowEl === void 0 ? void 0 : rowEl.querySelector('.axk-col')) !== null && _f !== void 0 ? _f : null;
+    if (colEl && rowIndex >= 0) {
+        const ent = kitEntity(api, nodeId);
+        if (!ent)
+            return;
+        openInlineEditor(api, colEl, (_h = (_g = ent.columns[rowIndex]) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : '', (name) => void (0, update_1.updateEntity)(api, nodeId, { columns: (0, update_1.renameColumnAt)(ent.columns, rowIndex, name) }));
+        return;
+    }
+    // UML member rename.
+    const memberEl = target.closest('.axk-member');
+    if (memberEl && rowIndex >= 0) {
+        const cls = kitClass(api, nodeId);
+        if (!cls)
+            return;
+        const { section, local } = umlSection(cls, rowIndex);
+        const list = ((_j = cls[section]) !== null && _j !== void 0 ? _j : []).slice();
+        openInlineEditor(api, (_k = memberEl.querySelector('.axk-mtext')) !== null && _k !== void 0 ? _k : memberEl, (_l = list[local]) !== null && _l !== void 0 ? _l : '', (next) => {
+            list[local] = next;
+            void (0, update_1.updateClass)(api, nodeId, { [section]: list });
+        });
+    }
+}
+/** Add a column / member (then inline-edit the new one). Returns true if handled. */
+function handleAdd(api, target) {
+    var _a;
+    const addEr = target.closest('.axk-entity-add');
+    if (addEr) {
+        const loc = locate(addEr);
+        if (!loc)
+            return true;
+        const ent = kitEntity(api, loc.nodeId);
+        if (!ent)
+            return true;
+        const columns = (0, update_1.addColumnAt)(ent.columns, { name: 'new_column', type: '' });
+        void (0, update_1.updateEntity)(api, loc.nodeId, { columns }).then(() => {
+            const newRow = api.container.querySelectorAll(`[data-node-id="${cssEscape(loc.nodeId)}"] .axk-row`)[columns.length - 1];
+            const col = newRow === null || newRow === void 0 ? void 0 : newRow.querySelector('.axk-col');
+            if (col)
+                beginRename(api, col);
+        });
+        return true;
+    }
+    const addUml = target.closest('.axk-uml-add');
+    if (addUml) {
+        const loc = locate(addUml);
+        if (!loc)
+            return true;
+        const cls = kitClass(api, loc.nodeId);
+        if (!cls)
+            return true;
+        const comps = Array.from(loc.group.querySelectorAll('.axk-uml-comp'));
+        const section = comps.indexOf(addUml.closest('.axk-uml-comp')) === 0 ? 'attributes' : 'methods';
+        const list = [...((_a = cls[section]) !== null && _a !== void 0 ? _a : []), section === 'attributes' ? '+ field: type' : '+ method(): void'];
+        void (0, update_1.updateClass)(api, loc.nodeId, { [section]: list });
+        return true;
+    }
+    return false;
+}
+/** Delete the column / member whose "×" control was clicked. Returns true if handled. */
+function handleDelete(api, target) {
+    var _a;
+    const del = target.closest('.axk-col-del');
+    if (!del)
+        return false;
+    const loc = locate(del);
+    if (!loc || loc.rowIndex < 0)
+        return true;
+    const ent = kitEntity(api, loc.nodeId);
+    if (ent) {
+        void (0, update_1.updateEntity)(api, loc.nodeId, { columns: (0, update_1.removeColumnAt)(ent.columns, loc.rowIndex) });
+        return true;
+    }
+    const cls = kitClass(api, loc.nodeId);
+    if (cls) {
+        const { section, local } = umlSection(cls, loc.rowIndex);
+        const list = ((_a = cls[section]) !== null && _a !== void 0 ? _a : []).slice();
+        list.splice(local, 1);
+        void (0, update_1.updateClass)(api, loc.nodeId, { [section]: list });
+    }
+    return true;
+}
+function cssEscape(id) {
+    return typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+}
+/**
+ * Wire the editing gestures onto a kit container. Idempotent per container
+ * (a re-bind disposes the previous one), matching `bindRowInteractions`.
+ */
+function bindCardEditing(api) {
+    var _a;
+    const container = api.container;
+    (_a = bindings.get(container)) === null || _a === void 0 ? void 0 : _a.dispose();
+    const onClickCapture = (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target)
+            return;
+        // Claim control clicks BEFORE row-selection / canvas handlers see them.
+        // An open editor is dismissed first: its row may be the one being removed,
+        // and committing a rename into a structural change is a race even when it
+        // is not (the card re-renders under the caret).
+        if (target.closest('.axk-col-del') || target.closest('.axk-entity-add') || target.closest('.axk-uml-add')) {
+            dismissInlineEditor();
+        }
+        if (handleDelete(api, target) || handleAdd(api, target)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const onDblClickCapture = (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target)
+            return;
+        if (target.closest('.axk-edit-input'))
+            return; // don't re-open over our own input
+        if (target.closest('.axk-entity-head') ||
+            target.closest('.axk-uml-name') ||
+            target.closest('.axk-col') ||
+            target.closest('.axk-ty') ||
+            target.closest('.axk-row') ||
+            target.closest('.axk-member')) {
+            event.preventDefault();
+            event.stopPropagation();
+            beginRename(api, target);
+        }
+    };
+    // A control press must dismiss the editor BEFORE the browser's focus change
+    // fires `blur` → `commit`. Doing it on `click` was too late: the rename had
+    // already landed, so deleting the row you were editing renamed it first and
+    // then removed a shifted index. preventDefault keeps focus in place too.
+    const onMouseDownCapture = (event) => {
+        const t = event.target instanceof Element ? event.target : null;
+        if (!t)
+            return;
+        if (t.closest('.axk-col-del') || t.closest('.axk-entity-add') || t.closest('.axk-uml-add')) {
+            dismissInlineEditor();
+            event.preventDefault();
+        }
+    };
+    container.addEventListener('mousedown', onMouseDownCapture, true);
+    container.addEventListener('click', onClickCapture, true);
+    container.addEventListener('dblclick', onDblClickCapture, true);
+    const handle = {
+        dispose() {
+            container.removeEventListener('mousedown', onMouseDownCapture, true);
+            container.removeEventListener('click', onClickCapture, true);
+            container.removeEventListener('dblclick', onDblClickCapture, true);
+            if (bindings.get(container) === handle)
+                bindings.delete(container);
+        },
+    };
+    bindings.set(container, handle);
+    return handle;
+}
+//# sourceMappingURL=editing.js.map

package/src/libs/element/src/lib/diagram-kit/er.d.ts

@@ -0,0 +1,73 @@
+import { erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card';
+export { erRowCenterY, ER_ROW_H, ER_HEAD_H };
+export interface ErColumn {
+    name: string;
+    type?: string;
+    pk?: boolean;
+    fk?: boolean;
+}
+export interface ErEntitySpec {
+    id: string;
+    /** Header text. Defaults to the id. */
+    name?: string;
+    columns: ErColumn[];
+    position?: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    /**
+     * Fixed card height. When smaller than the computed height the column list
+     * SCROLLS (the kit body is overflow-y:auto, and the canvas yields the wheel
+     * to it). Omit for auto-height from the column count.
+     */
+    height?: number;
+}
+export type ErCardinality = 'one-to-many' | 'one-to-one' | 'many-to-many' | 'one-to-zero-or-many' | 'one-to-one-or-many';
+export type ErSide = 'left' | 'right' | 'top' | 'bottom';
+export interface ErRelationshipSpec {
+    /** Entity id, or `ENTITY.column` to attach at that column's row. */
+    from: string;
+    to: string;
+    label?: string;
+    /** Named cardinality (default one-to-many) or explicit marker types. */
+    cardinality?: ErCardinality | {
+        tail: string;
+        head: string;
+    };
+    fromSide?: ErSide;
+    toSide?: ErSide;
+    color?: string;
+    id?: string;
+}
+export interface ErDiagramOptions {
+    entities: ErEntitySpec[];
+    relationships?: ErRelationshipSpec[];
+    /**
+     * Rows are selectable by default: click a column to select it (painted with
+     * .axk-row-selected; axk:row-click / axk:row-select CustomEvents fire on the
+     * container). Set false to opt out.
+     */
+    rowSelection?: boolean;
+    /**
+     * In-canvas editing (opt-in, default false — read-only diagrams are
+     * unchanged). When true the card grows editing chrome: double-click the
+     * header to rename the table, double-click a column name to rename it, an
+     * "add column" affordance and a per-row delete control. Every change routes
+     * through {@link updateEntity} as ONE undoable step.
+     */
+    editable?: boolean;
+}
+/**
+ * Build a render() spec for an ER diagram.
+ *
+ * Entities become HTML table cards; relationships become orthogonal edges with
+ * crow's-foot cardinality. A `TABLE.column` end pins the edge to that row via
+ * an absolute-layout port (the FK→PK look). Two edges landing on the same
+ * column are automatically spread apart.
+ */
+export declare function erDiagram(options: ErDiagramOptions): {
+    nodes: Array<Record<string, unknown>>;
+    edges: Array<Record<string, unknown>>;
+    finalize: (api: unknown) => void;
+};