@grafloria/element 0.3.20 → 0.3.22

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

@@ -1,453 +0,0 @@
-"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

@@ -1,73 +0,0 @@
-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;
-};