@peter.prib/renderengine 0.2.5 → 0.2.7

package/src/charting/diagrams/DataModelDiagram.js

@@ -1,86 +1,160 @@
-import { Diagram } from '../Diagram.js';
-import { DataModelNotation } from '../../datamodel.js';
-import { RelationshipAsEdgeStrategy, RelationshipAsNodeStrategy } from './DataModelRelationshipStrategy.js';
-
-/**
- * DataModelDiagram — builds entity-relationship nodes/edges and renders them
- * through the shared GraphDiagram engine.
- */
-export class DataModelDiagram extends Diagram {
-    static diagramType = 'dataModel';
-
-    constructor(renderer, entities, relationships, options = {}, engine = null) {
-        super(renderer, { entities, relationships }, options);
-        this.engine = engine;
-    }
-
-    static _strategyFor(notation) {
-        return notation.relationshipAsNode
-            ? new RelationshipAsNodeStrategy()
-            : new RelationshipAsEdgeStrategy();
-    }
-
-    render() {
-        const { entities, relationships } = this.data;
-        const options = this.options;
-        const { level = 'logical', notation: notationName = 'crowsfoot', ...rest } = options;
-        const notation = DataModelNotation.notation(notationName);
-        const nodes = entities.map(entity => DataModelDiagram.buildNode(entity, { level, notation }));
-        const strategy = DataModelDiagram._strategyFor(notation);
-        const { nodes: relNodes, edges } = strategy.apply(relationships, {
-            buildEdge: DataModelDiagram.buildEdge,
-            notation,
-        });
-        nodes.push(...relNodes);
-        this.engine.graphDiagram(nodes, edges, { edgeColor: '#666666', ...rest });
-    }
-
-    static typeGroup(type) {
-        if (!type) return 'UNKNOWN';
-        const t = String(type).toUpperCase();
-        if (/^(INT|INTEGER|BIGINT|SMALLINT|TINYINT|DECIMAL|NUMERIC|FLOAT|DOUBLE|REAL|NUMBER|SERIAL)/.test(t)) return 'NUMBER';
-        if (/^(VARCHAR|CHAR|TEXT|STRING|CLOB|UUID)/.test(t)) return 'TEXT';
-        if (/^(TIMESTAMP|DATE|DATETIME|TIME)/.test(t)) return 'TIMESTAMP';
-        if (/^(BOOL|BOOLEAN)/.test(t)) return 'BOOLEAN';
-        if (/^(JSON|JSONB)/.test(t)) return 'JSON';
-        return 'UNKNOWN';
-    }
-
-    static buildNode(entity, { level, notation }) {
-        const levelData = entity[level] || {};
-        const attributes = levelData.attributes;
-        if (notation.entityShape === 'table' && attributes?.length) {
-            return {
-                id: entity.id,
-                label: levelData.tableName || entity.name,
-                shape: 'table',
-                x: entity.x,
-                y: entity.y,
-                color: entity.color,
-                columns: attributes.map(a => ({ name: a.name, typeGroup: DataModelDiagram.typeGroup(a.type), isPK: !!a.isPK, isFK: !!a.isFK })),
-            };
-        }
-        return {
-            id: entity.id,
-            label: entity.name,
-            shape: entity.shape || 'rect',
-            x: entity.x,
-            y: entity.y,
-            color: entity.color,
-            description: entity.description,
-            labelPosition: entity.labelPosition || 'inside',
-        };
-    }
-
-    static buildEdge(relationship, notation) {
-        return {
-            ...relationship,
-            label: relationship.name,
-            lineStyle: relationship.identifying === false ? 'dashed' : 'solid',
-            arrowheadStart: notation.cardinalityArrowhead(relationship.sourceCardinality) || 'none',
-            arrowhead: notation.cardinalityArrowhead(relationship.targetCardinality) || 'none',
-            sourceLabel: notation.cardinalityLabel(relationship.sourceCardinality),
-            targetLabel: notation.cardinalityLabel(relationship.targetCardinality),
-        };
-    }
-}
+import { Diagram } from '../Diagram.js';
+import { DataModelNotation } from '../../datamodel.js';
+import { RelationshipAsEdgeStrategy, RelationshipAsNodeStrategy } from './DataModelRelationshipStrategy.js';
+import { NodeGeometry } from './NodeGeometry.js';
+
+/**
+ * DataModelDiagram — builds entity-relationship nodes/edges and renders them
+ * through the shared GraphDiagram engine.
+ */
+export class DataModelDiagram extends Diagram {
+    static diagramType = 'dataModel';
+
+    /** The size of an entity drawn as a box with its name inside (an entity's own width/height win). */
+    static ENTITY_BOX = Object.freeze({ width: 140, height: 56 });
+
+    /** The size of an annotation's note. */
+    static NOTE = Object.freeze({ width: 180, height: 64 });
+
+    /** The size of a shape with no size of its own (a person, a pin), and the room its name takes below it. */
+    static SHAPE_SIZE = 50;
+    static LABEL_BELOW = 18;
+
+    constructor(renderer, entities, relationships, options = {}, engine = null) {
+        super(renderer, { entities, relationships }, options);
+        this.engine = engine;
+    }
+
+    static _strategyFor(notation) {
+        return notation.relationshipAsNode
+            ? new RelationshipAsNodeStrategy()
+            : new RelationshipAsEdgeStrategy();
+    }
+
+    render() {
+        const { entities, relationships } = this.data;
+        const options = this.options;
+        const { level = 'logical', notation: notationName = 'crowsfoot', annotations = [], links = [], ...rest } = options;
+        const notation = DataModelNotation.notation(notationName);
+        const nodes = entities.map(entity => DataModelDiagram.buildNode(entity, { level, notation }));
+        const strategy = DataModelDiagram._strategyFor(notation);
+        const byId = new Map(entities.map(e => [e.id, e]));
+        const notes = annotations.map(annotation => DataModelDiagram.buildAnnotation(annotation, byId));
+        const { nodes: relNodes, edges } = strategy.apply(relationships, {
+            buildEdge: DataModelDiagram.buildEdge,
+            notation,
+            entity: (id) => byId.get(id),
+            occupied: [...nodes, ...notes.map(n => n.node)].map(DataModelDiagram.boxOf).filter(Boolean),
+        });
+        nodes.push(...relNodes);
+        for (const { node, edges: lines } of notes) {
+            nodes.push(node);
+            edges.push(...lines);
+        }
+        edges.push(...links.map(link => DataModelDiagram.buildLink(link)));
+        this.engine.graphDiagram(nodes, edges, { edgeColor: '#666666', ...rest });
+    }
+
+    /**
+     * Where a built node is drawn, as a box {x0, y0, x1, y1} (a table as tall
+     * as its columns; a shape with its name below, the name too), or null
+     * when it has no place yet.
+     */
+    static boxOf(node) {
+        if (!Number.isFinite(node?.x) || !Number.isFinite(node?.y)) return null;
+        const { w, h } = node.shape === 'table'
+            ? NodeGeometry.tableNodeSize(node)
+            : { w: node.width ?? DataModelDiagram.SHAPE_SIZE, h: (node.height ?? DataModelDiagram.SHAPE_SIZE) + (node.labelPosition === 'inside' ? 0 : DataModelDiagram.LABEL_BELOW) };
+        return { x0: node.x - w / 2, x1: node.x + w / 2, y0: node.y - h / 2, y1: node.y + h / 2 };
+    }
+
+    /**
+     * A note on the diagram (a rule, a remark) and a dotted line to each entity
+     * it is about, the same in every notation. Without its own place it sits
+     * above the first entity it is about.
+     * @param {{id: string, text: string, attachTo?: string[], x?: number, y?: number, color?: string}} annotation
+     * @param {Map<string, Object>} entities - By id (where they are)
+     */
+    static buildAnnotation(annotation, entities) {
+        const attachTo = annotation.attachTo ?? [];
+        const first = entities.get(attachTo[0]);
+        const place = Number.isFinite(annotation.x) ? { x: annotation.x, y: annotation.y }
+            : Number.isFinite(first?.x) ? { x: first.x, y: first.y - 110 } : {};
+        return {
+            node: {
+                id: annotation.id, label: annotation.text, shape: 'note', labelPosition: 'inside',
+                color: annotation.color ?? '#fff8c5', ...DataModelDiagram.NOTE, ...place,
+            },
+            edges: attachTo.filter(id => entities.has(id)).map(id => DataModelDiagram.buildLink({ source: annotation.id, target: id })),
+        };
+    }
+
+    /**
+     * A plain dotted line between two boxes, the same in every notation: a
+     * note to what it is about, or (the `links` option) a mapping between levels.
+     * @param {{id?: string, source: string, target: string, label?: string}} link
+     */
+    static buildLink({ id, source, target, label }) {
+        return { ...(id && { id }), source, target, ...(label && { label }), lineStyle: 'dotted', arrowhead: 'none', arrowheadStart: 'none' };
+    }
+
+    static typeGroup(type) {
+        if (!type) return 'UNKNOWN';
+        const t = String(type).toUpperCase();
+        if (/^(INT|INTEGER|BIGINT|SMALLINT|TINYINT|DECIMAL|NUMERIC|FLOAT|DOUBLE|REAL|NUMBER|SERIAL)/.test(t)) return 'NUMBER';
+        if (/^(VARCHAR|CHAR|TEXT|STRING|CLOB|UUID)/.test(t)) return 'TEXT';
+        if (/^(TIMESTAMP|DATE|DATETIME|TIME)/.test(t)) return 'TIMESTAMP';
+        if (/^(BOOL|BOOLEAN)/.test(t)) return 'BOOLEAN';
+        if (/^(JSON|JSONB)/.test(t)) return 'JSON';
+        return 'UNKNOWN';
+    }
+
+    /** An entity drawn at a level: its own `level` (a view of several levels) else the diagram's. */
+    static buildNode(entity, { level, notation }) {
+        const levelData = entity[entity.level ?? level] || {};
+        const attributes = levelData.attributes;
+        if (notation.entityShape === 'table' && attributes?.length) {
+            return {
+                id: entity.id,
+                label: levelData.tableName || entity.name,
+                shape: 'table',
+                x: entity.x,
+                y: entity.y,
+                color: entity.color,
+                description: entity.description,
+                ...entity.details,
+                columns: attributes.map(a => ({ name: a.name, typeGroup: DataModelDiagram.typeGroup(a.type), isPK: !!a.isPK, isFK: !!a.isFK })),
+            };
+        }
+        const labelPosition = entity.labelPosition || 'inside';
+        // A name inside the box needs room; a shape with its name beside it keeps its own size.
+        const box = labelPosition === 'inside' ? DataModelDiagram.ENTITY_BOX : {};
+        const width = entity.width ?? box.width;
+        const height = entity.height ?? box.height;
+        return {
+            id: entity.id,
+            label: entity.name,
+            shape: entity.shape || 'rect',
+            x: entity.x,
+            y: entity.y,
+            color: entity.color,
+            description: entity.description,
+            ...entity.details,
+            labelPosition,
+            ...(width !== undefined && { width }),
+            ...(height !== undefined && { height }),
+        };
+    }
+
+    static buildEdge(relationship, notation) {
+        return {
+            ...relationship,
+            label: relationship.name,
+            lineStyle: relationship.identifying === false ? 'dashed' : 'solid',
+            arrowheadStart: notation.cardinalityArrowhead(relationship.sourceCardinality) || 'none',
+            arrowhead: notation.cardinalityArrowhead(relationship.targetCardinality) || 'none',
+            sourceLabel: notation.cardinalityLabel(relationship.sourceCardinality),
+            targetLabel: notation.cardinalityLabel(relationship.targetCardinality),
+        };
+    }
+}

package/src/charting/diagrams/DataModelRelationshipStrategy.js

@@ -1,38 +1,94 @@
-/**
- * Strategy interface for turning data-model relationships into diagram nodes
- * and edges. Crow's Foot and UML keep relationships as direct edges; Chen
- * turns each relationship into a diamond node plus two connecting edges.
- */
-export class DataModelRelationshipStrategy {
-    /**
-     * @param {Array<object>} relationships
-     * @param {object} context
-     * @param {Function} context.buildEdge
-     * @returns {{nodes: Array<object>, edges: Array<object>}}
-     */
-    apply(relationships, context) {
-        throw new Error(`${this.constructor.name} must implement apply()`);
-    }
-}
-
-export class RelationshipAsEdgeStrategy extends DataModelRelationshipStrategy {
-    apply(relationships, { buildEdge, notation }) {
-        const edges = relationships.map(r => buildEdge(r, notation));
-        return { nodes: [], edges };
-    }
-}
-
-export class RelationshipAsNodeStrategy extends DataModelRelationshipStrategy {
-    apply(relationships, { notation }) {
-        const nodes = [];
-        const edges = [];
-        relationships.forEach((relationship, i) => {
-            const relId = relationship.id || `${relationship.source}__${relationship.target}__rel${i}`;
-            const lineStyle = relationship.identifying === false ? 'dashed' : 'solid';
-            nodes.push({ id: relId, label: relationship.name || '', shape: 'diamond', color: relationship.color || '#f6c344' });
-            edges.push({ source: relationship.source, target: relId, label: notation.cardinalityLabel(relationship.sourceCardinality), lineStyle });
-            edges.push({ source: relId, target: relationship.target, label: notation.cardinalityLabel(relationship.targetCardinality), lineStyle });
-        });
-        return { nodes, edges };
-    }
-}
+/**
+ * Strategy interface for turning data-model relationships into diagram nodes
+ * and edges. Crow's Foot and UML keep relationships as direct edges; Chen
+ * turns each relationship into a diamond node plus two connecting edges.
+ */
+export class DataModelRelationshipStrategy {
+    /**
+     * @param {Array<object>} relationships
+     * @param {object} context
+     * @param {Function} context.buildEdge
+     * @param {(id: string) => object|undefined} [context.entity] - An entity by id (where it is)
+     * @param {Array<{x0, y0, x1, y1}>} [context.occupied] - What is already drawn where (boxes, notes), to keep clear of
+     * @returns {{nodes: Array<object>, edges: Array<object>}}
+     */
+    apply(relationships, context) {
+        throw new Error(`${this.constructor.name} must implement apply()`);
+    }
+}
+
+export class RelationshipAsEdgeStrategy extends DataModelRelationshipStrategy {
+    apply(relationships, { buildEdge, notation }) {
+        const edges = relationships.map(r => buildEdge(r, notation));
+        return { nodes: [], edges };
+    }
+}
+
+/**
+ * Chen: each relationship a diamond holding its name, between its two entities
+ * when both have a place (else laid out with the rest): midway, or when
+ * something is drawn there already, the nearest clear spot to one side of the
+ * line (spotFor). Joined to each by a plain line (no arrowhead) labelled with
+ * that end's cardinality.
+ */
+export class RelationshipAsNodeStrategy extends DataModelRelationshipStrategy {
+    /** A relationship diamond's size. */
+    static DIAMOND = Object.freeze({ width: 110, height: 60 });
+
+    /** How far each try steps to the side of the line, and how many tries each way. */
+    static STEP = 45;
+    static TRIES = 6;
+
+    /**
+     * Where a diamond between two places goes: their midpoint when it is clear
+     * of everything in `occupied`, else the nearest clear spot stepping out
+     * across the line, one side then the other; when none is clear, the least covered.
+     * @returns {{x: number, y: number}}
+     */
+    static spotFor(from, to, occupied) {
+        const { width, height } = RelationshipAsNodeStrategy.DIAMOND;
+        const mid = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+        const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
+        const across = { x: -(to.y - from.y) / length, y: (to.x - from.x) / length };
+        // How much of a diamond at a spot is covered by what is there (0: clear).
+        const covered = ({ x, y }) => occupied.reduce((sum, o) => {
+            const w = Math.min(x + width / 2, o.x1) - Math.max(x - width / 2, o.x0);
+            const h = Math.min(y + height / 2, o.y1) - Math.max(y - height / 2, o.y0);
+            return sum + (w > 0 && h > 0 ? w * h : 0);
+        }, 0);
+        let best = mid, least = Infinity;
+        for (let k = 0; k <= RelationshipAsNodeStrategy.TRIES; k++) {
+            for (const side of k ? [1, -1] : [0]) {
+                const at = { x: mid.x + across.x * side * k * RelationshipAsNodeStrategy.STEP, y: mid.y + across.y * side * k * RelationshipAsNodeStrategy.STEP };
+                const c = covered(at);
+                if (c === 0) return at;
+                if (c < least) { best = at; least = c; }
+            }
+        }
+        return best;   // none clear: the least covered
+    }
+
+    apply(relationships, { notation, entity = () => undefined, occupied = [] }) {
+        const nodes = [];
+        const edges = [];
+        const taken = [...occupied];
+        const { width, height } = RelationshipAsNodeStrategy.DIAMOND;
+        relationships.forEach((relationship, i) => {
+            const relId = relationship.id || `${relationship.source}__${relationship.target}__rel${i}`;
+            const lineStyle = relationship.identifying === false ? 'dashed' : 'solid';
+            const [from, to] = [entity(relationship.source), entity(relationship.target)];
+            const placed = [from, to].every(e => Number.isFinite(e?.x) && Number.isFinite(e?.y));
+            const at = placed ? RelationshipAsNodeStrategy.spotFor(from, to, taken) : null;
+            if (at) taken.push({ x0: at.x - width / 2, x1: at.x + width / 2, y0: at.y - height / 2, y1: at.y + height / 2 });
+            nodes.push({
+                id: relId, label: relationship.name || '', shape: 'diamond', color: relationship.color || '#f6c344',
+                labelPosition: 'inside', ...RelationshipAsNodeStrategy.DIAMOND,
+                ...(at && { x: at.x, y: at.y }),
+            });
+            const line = { lineStyle, arrowhead: 'none', arrowheadStart: 'none' };
+            edges.push({ source: relationship.source, target: relId, label: notation.cardinalityLabel(relationship.sourceCardinality), ...line });
+            edges.push({ source: relId, target: relationship.target, label: notation.cardinalityLabel(relationship.targetCardinality), ...line });
+        });
+        return { nodes, edges };
+    }
+}