@grafloria/element 0.3.19 → 0.3.20

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

@@ -0,0 +1,160 @@
+/**
+ * ER diagram kit — typed builders for database entity-relationship diagrams.
+ *
+ * The packaged form of what demos/diagrams/table-er.html and er-advanced.html
+ * hand-composed: HTML "table" cards (header, typed columns, PK/FK badges),
+ * crow's-foot cardinality edges, and field-level FK→PK connections via
+ * absolute-layout ports. An embedder writes data:
+ *
+ * ```ts
+ * const spec = erDiagram({
+ *   entities: [
+ *     { id: 'CUSTOMER', columns: [{ name: 'id', type: 'int', pk: true }, …] },
+ *     { id: 'ORDER',    columns: [{ name: 'customer_id', type: 'int', fk: true }, …] },
+ *   ],
+ *   relationships: [
+ *     { from: 'CUSTOMER', to: 'ORDER', label: 'places' },              // table-level
+ *     { from: 'ORDER.customer_id', to: 'CUSTOMER.id' },                // field-level
+ *   ],
+ * });
+ * render(spec, container);
+ * ```
+ */
+import { ensureDiagramKitStyles } from './styles';
+import { bindRowInteractions } from './rows';
+import { entityCardContent, entityAutoHeight, erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card';
+import { bindCardEditing } from './editing';
+// Layout constants + the row-centre helper live in card.ts now (the ONE source
+// of truth shared with update.ts). Re-exported here so `import … from './er'`
+// keeps working.
+export { erRowCenterY, ER_ROW_H, ER_HEAD_H };
+const DEFAULT_WIDTH = 190;
+const CARDINALITY = {
+    'one-to-many': { tail: 'one', head: 'crow-foot' },
+    'one-to-one': { tail: 'one', head: 'one' },
+    'many-to-many': { tail: 'crow-foot', head: 'crow-foot' },
+    'one-to-zero-or-many': { tail: 'one', head: 'zero-or-many' },
+    'one-to-one-or-many': { tail: 'one', head: 'one-or-many' },
+};
+function parseEnd(ref, byId) {
+    const dot = ref.indexOf('.');
+    const entityId = dot === -1 ? ref : ref.slice(0, dot);
+    const entity = byId.get(entityId);
+    if (!entity)
+        throw new Error(`erDiagram: unknown entity "${entityId}" in relationship end "${ref}"`);
+    if (dot === -1)
+        return { entity };
+    const column = ref.slice(dot + 1);
+    const rowIndex = entity.columns.findIndex((c) => c.name === column);
+    if (rowIndex === -1) {
+        throw new Error(`erDiagram: entity "${entityId}" has no column "${column}" (relationship end "${ref}")`);
+    }
+    return { entity, column, rowIndex };
+}
+/**
+ * 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 function erDiagram(options) {
+    var _a;
+    ensureDiagramKitStyles();
+    const byId = new Map(options.entities.map((e) => [e.id, e]));
+    // Field-level ports are accumulated per entity while walking relationships.
+    const portsByEntity = new Map();
+    // How many edges already landed on a given entity row+side — drives the
+    // spread (dy) so shared columns (a PK referenced twice) don't stack.
+    const rowLandings = new Map();
+    const width = (e) => { var _a; return (_a = e.width) !== null && _a !== void 0 ? _a : DEFAULT_WIDTH; };
+    const fieldPort = (end, side) => {
+        var _a, _b;
+        const entity = end.entity;
+        const key = `${entity.id}#${end.rowIndex}#${side}`;
+        const landing = (_a = rowLandings.get(key)) !== null && _a !== void 0 ? _a : 0;
+        rowLandings.set(key, landing + 1);
+        // Spread repeat landings ±5px around the row centre: 0, -5, +5, -10, …
+        const dy = landing === 0 ? 0 : (landing % 2 === 1 ? -1 : 1) * Math.ceil(landing / 2) * 5;
+        const id = `${entity.id}__${end.column}__${side}__${landing}`;
+        const w = width(entity);
+        const port = {
+            id,
+            side,
+            visible: false,
+            layout: {
+                strategy: 'absolute',
+                args: {
+                    units: 'px',
+                    x: side === 'right' ? w : side === 'left' ? 0 : w / 2,
+                    y: erRowCenterY(end.rowIndex),
+                    dy,
+                },
+            },
+        };
+        const bucket = (_b = portsByEntity.get(entity.id)) !== null && _b !== void 0 ? _b : [];
+        bucket.push(port);
+        portsByEntity.set(entity.id, bucket);
+        return id;
+    };
+    const edges = ((_a = options.relationships) !== null && _a !== void 0 ? _a : []).map((rel, i) => {
+        var _a, _b, _c, _d, _e;
+        const from = parseEnd(rel.from, byId);
+        const to = parseEnd(rel.to, byId);
+        const fromSide = (_a = rel.fromSide) !== null && _a !== void 0 ? _a : 'right';
+        const toSide = (_b = rel.toSide) !== null && _b !== void 0 ? _b : 'left';
+        const markers = typeof rel.cardinality === 'object'
+            ? rel.cardinality
+            : CARDINALITY[(_c = rel.cardinality) !== null && _c !== void 0 ? _c : 'one-to-many'];
+        return {
+            id: (_d = rel.id) !== null && _d !== void 0 ? _d : `er-rel-${i + 1}`,
+            source: from.entity.id,
+            target: to.entity.id,
+            label: rel.label,
+            type: 'orthogonal',
+            sourceHandle: from.column !== undefined ? fieldPort(from, fromSide) : fromSide,
+            targetHandle: to.column !== undefined ? fieldPort(to, toSide) : toSide,
+            style: {
+                stroke: (_e = rel.color) !== null && _e !== void 0 ? _e : '#64748b',
+                strokeWidth: 1.5,
+                arrowTail: { type: markers.tail, size: 8, filled: false },
+                arrowHead: { type: markers.head, size: 9, filled: false },
+            },
+        };
+    });
+    const editable = options.editable === true;
+    const nodes = options.entities.map((entity, i) => {
+        var _a;
+        return (Object.assign({ id: entity.id, position: (_a = entity.position) !== null && _a !== void 0 ? _a : { x: 60 + (i % 3) * 340, y: 60 + Math.floor(i / 3) * 280 }, size: { width: width(entity), height: entityAutoHeight(entity, editable) }, 
+            // interactive: rows are real DOM targets (hover, row selection, inline
+            // editing) — node drag/select stay geometric in the binder.
+            metadata: Object.assign({ html: { content: entityCardContent(entity, editable), interactive: true }, kitEntity: entity, kitEditable: editable }, (options.rowSelection === false ? { kitRowSelection: false } : {})), 
+            // The card draws its own border — the node's default rectangle is hidden
+            // (and re-suppressed on selection by the kit stylesheet).
+            shape: { type: 'rect', fill: 'none', stroke: 'none' }, style: { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 } }, (portsByEntity.has(entity.id) ? { ports: portsByEntity.get(entity.id) } : {})));
+    });
+    return {
+        nodes,
+        edges,
+        finalize: (api) => {
+            var _a, _b, _c, _d;
+            const a = api;
+            // The card draws its OWN selection ring — suppress the node resize handles
+            // on the live model (they'd frame the card in a SECOND rectangle). Set here
+            // because the render-input path does not honour a spec-level `behavior`.
+            const model = (_a = a === null || a === void 0 ? void 0 : a.getModel) === null || _a === void 0 ? void 0 : _a.call(a);
+            if (model)
+                for (const e of options.entities)
+                    (_d = (_c = (_b = model.getNode) === null || _b === void 0 ? void 0 : _b.call(model, e.id)) === null || _c === void 0 ? void 0 : _c.setBehavior) === null || _d === void 0 ? void 0 : _d.call(_c, { resizable: false });
+            if (options.rowSelection !== false && (a === null || a === void 0 ? void 0 : a.container))
+                bindRowInteractions(a);
+            // Editing chrome (dbl-click rename, add/delete column) — opt-in, and safe
+            // to run alongside row selection (it claims control clicks in the capture
+            // phase before the selection handler sees them).
+            if (editable && (a === null || a === void 0 ? void 0 : a.container))
+                bindCardEditing(a);
+        },
+    };
+}
+//# sourceMappingURL=er.js.map

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

@@ -0,0 +1,312 @@
+import { __awaiter } from "tslib";
+import { updateEntity, updateClass } from './update';
+const deep = (v) => JSON.parse(JSON.stringify(v));
+// ---------------------------------------------------------------------------
+// Base
+// ---------------------------------------------------------------------------
+export class CardHandle {
+    constructor(api, id) {
+        this.api = api;
+        this.id = id;
+    }
+    /** The live node, or undefined once deleted. Handles never cache it. */
+    liveNode() {
+        return this.api.getModel().getNode(this.id);
+    }
+    get exists() {
+        return this.liveNode() !== undefined;
+    }
+    /** Escape hatch to the underlying NodeModel (typed loosely on purpose). */
+    get node() {
+        return this.liveNode();
+    }
+    get width() {
+        var _a, _b;
+        return (_b = (_a = this.liveNode()) === null || _a === void 0 ? void 0 : _a.size.width) !== null && _b !== void 0 ? _b : 0;
+    }
+    get height() {
+        var _a, _b;
+        return (_b = (_a = this.liveNode()) === null || _a === void 0 ? void 0 : _a.size.height) !== null && _b !== void 0 ? _b : 0;
+    }
+    select() {
+        var _a, _b, _c;
+        const model = this.api.getModel();
+        const node = model.getNode(this.id);
+        if (node)
+            (_a = model.selectNode) === null || _a === void 0 ? void 0 : _a.call(model, node);
+        (_c = (_b = this.api).renderNow) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+    undo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            yield ((_c = (_b = (_a = this.api).getEngine) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.undo());
+            (_e = (_d = this.api).renderNow) === null || _e === void 0 ? void 0 : _e.call(_d);
+        });
+    }
+    redo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            yield ((_c = (_b = (_a = this.api).getEngine) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.redo());
+            (_e = (_d = this.api).renderNow) === null || _e === void 0 ? void 0 : _e.call(_d);
+        });
+    }
+    /**
+     * Row-selection events for THIS card only (the kit's `axk:row-select`,
+     * filtered). ER cards resolve the selection to a typed {@link ErField} when
+     * possible. Returns an unbind function.
+     */
+    onRowSelect(cb) {
+        const handler = (event) => {
+            var _a, _b, _c;
+            const selected = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : null;
+            if (selected && selected.nodeId !== this.id)
+                return; // another card
+            if (!selected) {
+                cb({ field: null, selected: null });
+                return;
+            }
+            const field = this instanceof ErTable && selected.name !== undefined
+                ? ((_c = this.columns.get(selected.name)) !== null && _c !== void 0 ? _c : null)
+                : null;
+            cb({ field, selected });
+        };
+        this.api.container.addEventListener('axk:row-select', handler);
+        return () => this.api.container.removeEventListener('axk:row-select', handler);
+    }
+}
+// ---------------------------------------------------------------------------
+// ER
+// ---------------------------------------------------------------------------
+/** A column of an {@link ErTable} — itself just (table, name): stateless. */
+export class ErField {
+    constructor(table, columnName) {
+        this.table = table;
+        this.columnName = columnName;
+    }
+    col() {
+        return this.table.spec.columns.find((c) => c.name === this.columnName);
+    }
+    get exists() {
+        return this.col() !== undefined;
+    }
+    get name() {
+        return this.columnName;
+    }
+    get index() {
+        return this.table.spec.columns.findIndex((c) => c.name === this.columnName);
+    }
+    get type() {
+        var _a;
+        return (_a = this.col()) === null || _a === void 0 ? void 0 : _a.type;
+    }
+    get pk() {
+        var _a;
+        return ((_a = this.col()) === null || _a === void 0 ? void 0 : _a.pk) === true;
+    }
+    get fk() {
+        var _a;
+        return ((_a = this.col()) === null || _a === void 0 ? void 0 : _a.fk) === true;
+    }
+    /** Rename — the field port keeps its id, so attached edges stay glued. */
+    rename(name) {
+        return this.table.columns.renameAt(this.index, name);
+    }
+    setType(type) {
+        return this.table.columns.patchAt(this.index, { type });
+    }
+    setKeys(keys) {
+        return this.table.columns.patchAt(this.index, keys);
+    }
+    /** Remove this column (its ports and attached edges are dropped). */
+    remove() {
+        return this.table.columns.removeAt(this.index);
+    }
+}
+/** The columns collection of an {@link ErTable}. Iterable of {@link ErField}. */
+export class ErColumnList {
+    constructor(table) {
+        this.table = table;
+    }
+    cols() {
+        return this.table.spec.columns;
+    }
+    get length() {
+        return this.cols().length;
+    }
+    names() {
+        return this.cols().map((c) => c.name);
+    }
+    at(index) {
+        const c = this.cols()[index];
+        return c ? new ErField(this.table, c.name) : undefined;
+    }
+    get(name) {
+        return this.cols().some((c) => c.name === name) ? new ErField(this.table, name) : undefined;
+    }
+    [Symbol.iterator]() {
+        return this.cols()
+            .map((c) => new ErField(this.table, c.name))[Symbol.iterator]();
+    }
+    add(column, opts = {}) {
+        var _a;
+        const next = [...this.cols()];
+        next.splice((_a = opts.at) !== null && _a !== void 0 ? _a : next.length, 0, Object.assign({}, column));
+        return this.table.update({ columns: next });
+    }
+    removeAt(index) {
+        const next = this.cols().filter((_, i) => i !== index);
+        return this.table.update({ columns: next });
+    }
+    renameAt(index, name) {
+        return this.patchAt(index, { name });
+    }
+    patchAt(index, patch) {
+        const next = this.cols().map((c, i) => (i === index ? Object.assign(Object.assign({}, c), patch) : c));
+        return this.table.update({ columns: next });
+    }
+    move(from, to) {
+        const next = [...this.cols()];
+        const [c] = next.splice(from, 1);
+        next.splice(to, 0, c);
+        return this.table.update({ columns: next });
+    }
+}
+export class ErTable extends CardHandle {
+    constructor() {
+        super(...arguments);
+        this.columns = new ErColumnList(this);
+    }
+    /** A deep COPY of the stored entity spec — never a live reference. */
+    get spec() {
+        var _a, _b;
+        const raw = (_b = (_a = this.liveNode()) === null || _a === void 0 ? void 0 : _a.getMetadata) === null || _b === void 0 ? void 0 : _b.call(_a, 'kitEntity');
+        if (!raw)
+            throw new Error(`erTable('${this.id}'): the node is gone`);
+        return deep(raw);
+    }
+    get name() {
+        var _a;
+        return (_a = this.spec.name) !== null && _a !== void 0 ? _a : this.id;
+    }
+    rename(name) {
+        return this.update({ name });
+    }
+    resize(size) {
+        return this.update(size);
+    }
+    /** The raw delta path — everything above funnels through here. */
+    update(delta) {
+        return updateEntity(this.api, this.id, delta);
+    }
+}
+// ---------------------------------------------------------------------------
+// UML
+// ---------------------------------------------------------------------------
+/** attributes / methods of a {@link UmlClass} (members are plain strings). */
+export class UmlMemberList {
+    constructor(cls, kind) {
+        this.cls = cls;
+        this.kind = kind;
+    }
+    list() {
+        var _a;
+        return (_a = this.cls.spec[this.kind]) !== null && _a !== void 0 ? _a : [];
+    }
+    get length() {
+        return this.list().length;
+    }
+    at(index) {
+        return this.list()[index];
+    }
+    add(member, opts = {}) {
+        var _a;
+        const next = [...this.list()];
+        next.splice((_a = opts.at) !== null && _a !== void 0 ? _a : next.length, 0, member);
+        return this.cls.update({ [this.kind]: next });
+    }
+    removeAt(index) {
+        return this.cls.update({ [this.kind]: this.list().filter((_, i) => i !== index) });
+    }
+    renameAt(index, member) {
+        return this.cls.update({ [this.kind]: this.list().map((m, i) => (i === index ? member : m)) });
+    }
+}
+export class UmlClass extends CardHandle {
+    constructor() {
+        super(...arguments);
+        this.attributes = new UmlMemberList(this, 'attributes');
+        this.methods = new UmlMemberList(this, 'methods');
+    }
+    /** A deep COPY of the stored class spec — never a live reference. */
+    get spec() {
+        var _a, _b;
+        const raw = (_b = (_a = this.liveNode()) === null || _a === void 0 ? void 0 : _a.getMetadata) === null || _b === void 0 ? void 0 : _b.call(_a, 'kitClass');
+        if (!raw)
+            throw new Error(`umlClass('${this.id}'): the node is gone`);
+        return deep(raw);
+    }
+    get name() {
+        var _a;
+        return (_a = this.spec.name) !== null && _a !== void 0 ? _a : this.id;
+    }
+    get abstract() {
+        return this.spec.abstract === true;
+    }
+    get stereotype() {
+        return this.spec.stereotype;
+    }
+    rename(name) {
+        return this.update({ name });
+    }
+    resize(size) {
+        return this.update(size);
+    }
+    setAbstract(abstract) {
+        return this.update({ abstract });
+    }
+    setStereotype(stereotype) {
+        return this.update({ stereotype });
+    }
+    update(delta) {
+        return updateClass(this.api, this.id, delta);
+    }
+}
+// ---------------------------------------------------------------------------
+// Factories
+// ---------------------------------------------------------------------------
+function requireKit(api, id, key, what) {
+    var _a;
+    const node = api.getModel().getNode(id);
+    if (!node)
+        throw new Error(`${what}('${id}'): no node with that id`);
+    if (!((_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, key))) {
+        throw new Error(`${what}('${id}'): that node is not an ${what === 'erTable' ? 'ER table' : 'UML class'} (missing metadata.${key})`);
+    }
+}
+/** Typed handle for a kit ER table. Throws for unknown ids / non-kit nodes. */
+export function erTable(api, id) {
+    requireKit(api, id, 'kitEntity', 'erTable');
+    return new ErTable(api, id);
+}
+/** Typed handle for a kit UML class. Throws for unknown ids / non-kit nodes. */
+export function umlClass(api, id) {
+    requireKit(api, id, 'kitClass', 'umlClass');
+    return new UmlClass(api, id);
+}
+/** Every kit ER table in the diagram, as handles. */
+export function erTables(api) {
+    var _a, _b;
+    const model = api.getModel();
+    return ((_b = (_a = model.getNodes) === null || _a === void 0 ? void 0 : _a.call(model)) !== null && _b !== void 0 ? _b : [])
+        .filter((n) => { var _a; return (_a = n.getMetadata) === null || _a === void 0 ? void 0 : _a.call(n, 'kitEntity'); })
+        .map((n) => new ErTable(api, n.id));
+}
+/** Every kit UML class in the diagram, as handles. */
+export function umlClasses(api) {
+    var _a, _b;
+    const model = api.getModel();
+    return ((_b = (_a = model.getNodes) === null || _a === void 0 ? void 0 : _a.call(model)) !== null && _b !== void 0 ? _b : [])
+        .filter((n) => { var _a; return (_a = n.getMetadata) === null || _a === void 0 ? void 0 : _a.call(n, 'kitClass'); })
+        .map((n) => new UmlClass(api, n.id));
+}
+//# sourceMappingURL=handles.js.map

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

@@ -0,0 +1,15 @@
+export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './er';
+export { umlDiagram, } from './uml';
+export { ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID } from './styles';
+export { bindRowInteractions } from './rows';
+export { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, } from './update';
+export { bindCardEditing } from './editing';
+export { matchColumns, rowIndexFromY } from './card';
+// The card CONTENT builders — shared with the stencil palette so a dropped
+// "Entity"/"Class" is the identical card erDiagram()/umlDiagram() produce.
+export { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight } from './card';
+// Live join guidance — score every other table's columns against a connection
+// drag's source column and tint the kit rows by fit (the query-builder story).
+export { scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './join-guidance';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './handles';
+//# sourceMappingURL=index.js.map