ts-prorm-orm 1.1.0

package/dist/diagrams/chen-diagram.js

@@ -0,0 +1,354 @@
+"use strict";
+/**
+ * ChenDiagram — renders a classic Chen-notation Entity-Relationship diagram
+ * as SVG, built against a real DOM document (via svg-dom) rather than
+ * concatenated markup.
+ *
+ * Chen notation (distinct from crow's-foot):
+ *   - Entities       → rectangles (weak entities get a double border)
+ *   - Relationships  → diamonds placed between the two entities they connect,
+ *                      with cardinality labels (1, N, M) on the connecting lines
+ *   - Attributes     → ellipses connected to their entity by a line; key
+ *                      attributes have underlined text, multivalued get a double
+ *                      ellipse, derived get a dashed ellipse.
+ *
+ * Options honor `theme` (light|dark canvas/text) and `color` (accent for
+ * entities/diamonds) via resolveTheme/resolveAccent, so both flags change the
+ * generated output. The viewBox is auto-sized to the laid-out geometry.
+ *
+ * Usage:
+ *   const diag = new ChenDiagram({ entities: [...], relationships: [...] });
+ *   diag.save('./diagrams/er.svg');   // or: diag.generate()
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChenDiagram = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const palette_1 = require("./palette");
+const svg_dom_1 = require("./svg-dom");
+class ChenDiagram {
+    constructor(options) {
+        this.opts = {
+            entities: options.entities ?? [],
+            relationships: options.relationships ?? [],
+            title: options.title ?? '',
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+        };
+    }
+    // ── Attribute anchor positions radially around an entity center ──────────
+    attributePositions(center, count) {
+        const D = ChenDiagram.ATTR_DIST;
+        const pts = [];
+        if (count === 0)
+            return pts;
+        // Distribute attributes on an arc above the entity so they don't collide
+        // with the horizontal relationship lines flowing left/right.
+        const start = -Math.PI * 0.92;
+        const end = -Math.PI * 0.08;
+        for (let i = 0; i < count; i++) {
+            const t = count === 1 ? 0.5 : i / (count - 1);
+            const a = start + (end - start) * t;
+            pts.push({ x: center.x + Math.cos(a) * D * 1.35, y: center.y + Math.sin(a) * D });
+        }
+        return pts;
+    }
+    drawAttribute(svg, from, at, attr, accent, t) {
+        // connector line entity → attribute
+        svg.child('line', {
+            x1: from.x,
+            y1: from.y,
+            x2: at.x,
+            y2: at.y,
+            stroke: t.textSecondary,
+            'stroke-width': 1.5,
+        });
+        const rx = ChenDiagram.ATTR_RX;
+        const ry = ChenDiagram.ATTR_RY;
+        // derived attributes use a dashed outline
+        const strokeDash = attr.derived ? '5 4' : undefined;
+        // multivalued attributes get a double ellipse (outer ring)
+        if (attr.multivalued) {
+            svg.child('ellipse', {
+                cx: at.x,
+                cy: at.y,
+                rx: rx + 5,
+                ry: ry + 5,
+                fill: 'none',
+                stroke: accent.mid,
+                'stroke-width': 1.5,
+                'stroke-dasharray': strokeDash,
+            });
+        }
+        svg.child('ellipse', {
+            cx: at.x,
+            cy: at.y,
+            rx,
+            ry,
+            fill: t.cardBg,
+            stroke: accent.mid,
+            'stroke-width': 1.8,
+            'stroke-dasharray': strokeDash,
+        });
+        const label = attr.name.length > 14 ? attr.name.slice(0, 13) + '…' : attr.name;
+        svg
+            .child('text', {
+            x: at.x,
+            y: at.y + 4,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 12,
+            'font-weight': attr.key ? 700 : 500,
+            fill: t.textPrimary,
+            'text-anchor': 'middle',
+            // key attributes are underlined in Chen notation
+            'text-decoration': attr.key ? 'underline' : undefined,
+        })
+            .text(label);
+    }
+    drawEntity(svg, p, accent, t) {
+        const W = ChenDiagram.ENT_W;
+        const H = ChenDiagram.ENT_H;
+        const x = p.center.x - W / 2;
+        const y = p.center.y - H / 2;
+        // weak entities → double rectangle border
+        if (p.entity.weak) {
+            svg.child('rect', {
+                x: x - 5,
+                y: y - 5,
+                width: W + 10,
+                height: H + 10,
+                rx: 4,
+                fill: 'none',
+                stroke: accent.from,
+                'stroke-width': 1.6,
+            });
+        }
+        svg.child('rect', {
+            x,
+            y,
+            width: W,
+            height: H,
+            rx: 4,
+            fill: accent.light,
+            stroke: accent.from,
+            'stroke-width': 2.2,
+        });
+        svg
+            .child('text', {
+            x: p.center.x,
+            y: p.center.y + 5,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 16,
+            'font-weight': 700,
+            fill: accent.text,
+            'text-anchor': 'middle',
+        })
+            .text(p.entity.name);
+    }
+    drawRelationship(svg, rel, a, b, accent, t) {
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        const DW = ChenDiagram.DIA_W;
+        const DH = ChenDiagram.DIA_H;
+        // connecting lines: entity-a → diamond → entity-b
+        svg.child('line', {
+            x1: a.x,
+            y1: a.y,
+            x2: mid.x,
+            y2: mid.y,
+            stroke: t.textPrimary,
+            'stroke-width': 1.6,
+        });
+        svg.child('line', {
+            x1: mid.x,
+            y1: mid.y,
+            x2: b.x,
+            y2: b.y,
+            stroke: t.textPrimary,
+            'stroke-width': 1.6,
+        });
+        // diamond (polygon) centered on mid
+        const pts = [
+            `${mid.x},${mid.y - DH / 2}`,
+            `${mid.x + DW / 2},${mid.y}`,
+            `${mid.x},${mid.y + DH / 2}`,
+            `${mid.x - DW / 2},${mid.y}`,
+        ].join(' ');
+        svg.child('polygon', {
+            points: pts,
+            fill: accent.to,
+            stroke: accent.from,
+            'stroke-width': 2.2,
+        });
+        svg
+            .child('text', {
+            x: mid.x,
+            y: mid.y + 5,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 13,
+            'font-weight': 700,
+            fill: accent.text,
+            'text-anchor': 'middle',
+        })
+            .text(rel.name);
+        // cardinality labels near each entity end
+        const label = (from, card) => {
+            if (!card)
+                return;
+            const lx = from.x + (mid.x - from.x) * 0.32;
+            const ly = from.y + (mid.y - from.y) * 0.32 - 8;
+            svg
+                .child('text', {
+                x: lx,
+                y: ly,
+                'font-family': "'SF Mono',monospace",
+                'font-size': 14,
+                'font-weight': 700,
+                fill: t.textPrimary,
+                'text-anchor': 'middle',
+            })
+                .text(card);
+        };
+        label(a, rel.fromCardinality);
+        label(b, rel.toCardinality);
+    }
+    // ── Generate the full SVG string (built via a real DOM document) ──────────
+    generate() {
+        const { entities, relationships, title, theme, color } = this.opts;
+        const accent = (0, palette_1.resolveAccent)(color);
+        const t = (0, palette_1.resolveTheme)(theme);
+        const PAD = ChenDiagram.PAD;
+        const COL_GAP = ChenDiagram.COL_GAP;
+        const ROW_GAP = ChenDiagram.ROW_GAP;
+        // ── Place entities on a grid (2 per row) ────────────────────────────
+        const perRow = Math.min(2, Math.max(1, entities.length));
+        const originX = PAD + COL_GAP / 2;
+        const originY = PAD + (title ? ChenDiagram.TITLE_H : 0) + ROW_GAP / 2;
+        const placed = entities.map((entity, i) => {
+            const col = i % perRow;
+            const row = Math.floor(i / perRow);
+            return {
+                entity,
+                center: { x: originX + col * COL_GAP, y: originY + row * ROW_GAP },
+            };
+        });
+        const byName = new Map();
+        for (const p of placed)
+            byName.set(p.entity.name, p);
+        // ── Compute bounds (attributes extend furthest) ─────────────────────
+        let maxX = 0;
+        let maxY = 0;
+        const attrTargets = [];
+        for (const p of placed) {
+            const attrs = p.entity.attributes ?? [];
+            const pos = this.attributePositions(p.center, attrs.length);
+            attrs.forEach((attr, i) => {
+                attrTargets.push({ from: p.center, at: pos[i], attr });
+            });
+            maxX = Math.max(maxX, p.center.x + ChenDiagram.ENT_W / 2);
+            maxY = Math.max(maxY, p.center.y + ChenDiagram.ENT_H / 2);
+            for (const a of pos) {
+                maxX = Math.max(maxX, a.x + ChenDiagram.ATTR_RX + 8);
+                maxY = Math.max(maxY, a.y + ChenDiagram.ATTR_RY + 8);
+            }
+        }
+        for (const rel of relationships) {
+            const A = byName.get(rel.from);
+            const B = byName.get(rel.to);
+            if (A && B) {
+                maxX = Math.max(maxX, (A.center.x + B.center.x) / 2 + ChenDiagram.DIA_W / 2);
+                maxY = Math.max(maxY, (A.center.y + B.center.y) / 2 + ChenDiagram.DIA_H / 2);
+            }
+        }
+        const svgW = Math.ceil(maxX + PAD);
+        const svgH = Math.ceil(maxY + PAD);
+        const doc = new svg_dom_1.SvgDocument(svgW, svgH);
+        const svg = doc.root;
+        // ── Background ──────────────────────────────────────────────────────
+        svg.child('rect', { width: svgW, height: svgH, fill: t.canvasBg });
+        // ── Title ───────────────────────────────────────────────────────────
+        if (title) {
+            svg
+                .child('text', {
+                x: PAD,
+                y: PAD,
+                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-size': 22,
+                'font-weight': 800,
+                fill: t.textPrimary,
+            })
+                .text(title);
+        }
+        // ── Relationships first (so lines/diamonds sit under entities) ──────
+        for (const rel of relationships) {
+            const A = byName.get(rel.from);
+            const B = byName.get(rel.to);
+            if (A && B)
+                this.drawRelationship(svg, rel, A.center, B.center, accent, t);
+        }
+        // ── Attributes (connectors + ellipses) ──────────────────────────────
+        for (const target of attrTargets) {
+            this.drawAttribute(svg, target.from, target.at, target.attr, accent, t);
+        }
+        // ── Entities on top ─────────────────────────────────────────────────
+        for (const p of placed)
+            this.drawEntity(svg, p, accent, t);
+        return doc.toString('Generated by ts-prorm-orm ChenDiagram');
+    }
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath) {
+        const resolved = path.resolve(outputPath);
+        const dir = path.dirname(resolved);
+        if (!fs.existsSync(dir))
+            fs.mkdirSync(dir, { recursive: true });
+        fs.writeFileSync(resolved, this.generate(), 'utf-8');
+        return resolved;
+    }
+}
+exports.ChenDiagram = ChenDiagram;
+// Layout constants (px)
+ChenDiagram.PAD = 48;
+ChenDiagram.TITLE_H = 44;
+ChenDiagram.ENT_W = 150;
+ChenDiagram.ENT_H = 66;
+ChenDiagram.DIA_W = 130;
+ChenDiagram.DIA_H = 74;
+ChenDiagram.ATTR_RX = 52;
+ChenDiagram.ATTR_RY = 24;
+ChenDiagram.ATTR_DIST = 96; // center-of-entity → center-of-attribute
+ChenDiagram.COL_GAP = 300; // horizontal spacing between entity centers
+ChenDiagram.ROW_GAP = 320; // vertical spacing between entity rows