ts-prorm-orm 1.1.0

package/dist/diagrams/tree-diagram.js

@@ -0,0 +1,250 @@
+"use strict";
+/**
+ * TreeDiagram — renders a recursive hierarchical tree / mind-map as SVG.
+ *
+ * A `TreeNode` tree of arbitrary depth is laid out with a classic "tidy tree"
+ * algorithm: each node's cross-axis span equals the number of its leaf
+ * descendants, so siblings never overlap. The main axis is driven by depth
+ * (columns for `horizontal`, rows for `vertical`). Parents connect to children
+ * with smooth cubic-Bezier <path> connectors. Nodes are rounded label boxes,
+ * colored by depth from a rotated accent palette; the canvas/text use the
+ * light/dark theme.
+ *
+ * Usage:
+ *   const diag = new TreeDiagram({ root: { name: 'db', children: [...] } });
+ *   diag.save('./diagrams/tree.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.TreeDiagram = 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 TreeDiagram {
+    constructor(options) {
+        this.opts = {
+            title: options.title ?? '',
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+            direction: options.direction ?? 'horizontal',
+            ...options,
+        };
+    }
+    // ── Recursive subtree-height layout ──────────────────────────────────────
+    // A node's cross span = the sum of its leaf descendants. `nextLeaf` tracks
+    // the running leaf-slot cursor so siblings tile without overlap.
+    layout(node, depth, cursor) {
+        const kids = node.children ?? [];
+        if (kids.length === 0) {
+            const cross = cursor.n;
+            cursor.n += 1;
+            return { node, depth, cross, leaves: 1, children: [], x: 0, y: 0 };
+        }
+        const children = kids.map((k) => this.layout(k, depth + 1, cursor));
+        const leaves = children.reduce((s, c) => s + c.leaves, 0);
+        // Center the parent across the span of its first..last child.
+        const cross = (children[0].cross + children[children.length - 1].cross) / 2;
+        return { node, depth, cross, leaves, children, x: 0, y: 0 };
+    }
+    flatten(n, out) {
+        out.push(n);
+        for (const c of n.children)
+            this.flatten(c, out);
+    }
+    // ── Smooth cubic-Bezier connector between two centers ─────────────────────
+    connectorPath(parent, child, horizontal) {
+        if (horizontal) {
+            const x1 = parent.x + TreeDiagram.BOX_W / 2;
+            const y1 = parent.y;
+            const x2 = child.x - TreeDiagram.BOX_W / 2;
+            const y2 = child.y;
+            const mx = (x1 + x2) / 2;
+            return `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
+        }
+        const x1 = parent.x;
+        const y1 = parent.y + TreeDiagram.BOX_H / 2;
+        const x2 = child.x;
+        const y2 = child.y - TreeDiagram.BOX_H / 2;
+        const my = (y1 + y2) / 2;
+        return `M ${x1} ${y1} C ${x1} ${my}, ${x2} ${my}, ${x2} ${y2}`;
+    }
+    generate() {
+        const { root, title, theme, color, direction } = this.opts;
+        const horizontal = direction !== 'vertical';
+        const accent = (0, palette_1.resolveAccent)(color);
+        const t = (0, palette_1.resolveTheme)(theme);
+        const palettes = (0, palette_1.rotatedPalettes)(color);
+        const BOX_W = TreeDiagram.BOX_W;
+        const BOX_H = TreeDiagram.BOX_H;
+        const R = TreeDiagram.R;
+        const PAD = TreeDiagram.PAD;
+        const DEPTH_GAP = TreeDiagram.DEPTH_GAP;
+        const LEAF_GAP = TreeDiagram.LEAF_GAP;
+        const titleH = title ? TreeDiagram.TITLE_H : 0;
+        // 1. Compute abstract layout (depth + leaf-slot cross axis).
+        const tree = this.layout(root, 0, { n: 0 });
+        const nodes = [];
+        this.flatten(tree, nodes);
+        const maxDepth = nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+        const totalLeaves = tree.leaves;
+        // 2. Map abstract coords → pixels.
+        const originX = PAD + BOX_W / 2;
+        const originY = PAD + titleH + BOX_H / 2;
+        for (const n of nodes) {
+            const depthPx = n.depth * DEPTH_GAP;
+            const crossPx = n.cross * LEAF_GAP;
+            if (horizontal) {
+                n.x = originX + depthPx;
+                n.y = originY + crossPx;
+            }
+            else {
+                n.x = originX + crossPx;
+                n.y = originY + depthPx;
+            }
+        }
+        // 3. Auto-size viewBox.
+        const spanDepth = maxDepth * DEPTH_GAP;
+        const spanCross = Math.max(0, totalLeaves - 1) * LEAF_GAP;
+        const svgW = horizontal
+            ? 2 * PAD + BOX_W + spanDepth
+            : 2 * PAD + BOX_W + spanCross;
+        const svgH = horizontal
+            ? 2 * PAD + titleH + BOX_H + spanCross
+            : 2 * PAD + titleH + BOX_H + spanDepth;
+        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 + 24,
+                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-size': 20,
+                'font-weight': 800,
+                fill: t.textPrimary,
+            })
+                .text(title);
+        }
+        // ── Connectors (drawn first so boxes sit on top) ─────────────────────
+        const drawConnectors = (n) => {
+            const depthPalette = palettes[(n.depth + 1) % palettes.length];
+            for (const c of n.children) {
+                svg.child('path', {
+                    d: this.connectorPath(n, c, horizontal),
+                    fill: 'none',
+                    stroke: depthPalette.mid,
+                    'stroke-width': 2,
+                    'stroke-opacity': 0.55,
+                    'stroke-linecap': 'round',
+                });
+                drawConnectors(c);
+            }
+        };
+        drawConnectors(tree);
+        // ── Node boxes ───────────────────────────────────────────────────────
+        for (const n of nodes) {
+            const pal = palettes[n.depth % palettes.length];
+            const x = n.x - BOX_W / 2;
+            const y = n.y - BOX_H / 2;
+            // Root box uses the primary accent's gradient-ish solid; deeper nodes use
+            // their depth palette. `light`/`text` keep contrast readable per theme.
+            const isRoot = n.depth === 0;
+            const boxFill = isRoot ? accent.from : pal.light;
+            const boxStroke = isRoot ? accent.mid : pal.mid;
+            const labelFill = isRoot ? '#FFFFFF' : pal.text;
+            svg.child('rect', {
+                x,
+                y,
+                width: BOX_W,
+                height: BOX_H,
+                rx: R,
+                fill: boxFill,
+                stroke: boxStroke,
+                'stroke-width': isRoot ? 2 : 1.5,
+            });
+            const label = n.node.name.length > 20 ? n.node.name.slice(0, 19) + '…' : n.node.name;
+            svg
+                .child('text', {
+                x: n.x,
+                y: n.y + (n.node.badge ? -1 : 5),
+                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-size': 14,
+                'font-weight': 700,
+                fill: labelFill,
+                'text-anchor': 'middle',
+            })
+                .text(label);
+            if (n.node.badge) {
+                svg
+                    .child('text', {
+                    x: n.x,
+                    y: n.y + 15,
+                    'font-family': "'SF Mono','Fira Code',monospace",
+                    'font-size': 10,
+                    'font-weight': 600,
+                    fill: isRoot ? 'rgba(255,255,255,0.8)' : pal.mid,
+                    'text-anchor': 'middle',
+                })
+                    .text(n.node.badge);
+            }
+        }
+        return doc.toString('Generated by ts-prorm-orm TreeDiagram');
+    }
+    /** Write the SVG to a file, creating parent directories as 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.TreeDiagram = TreeDiagram;
+// Layout constants (px)
+TreeDiagram.BOX_W = 168;
+TreeDiagram.BOX_H = 46;
+TreeDiagram.R = 12;
+TreeDiagram.PAD = 40;
+TreeDiagram.TITLE_H = 44;
+/** Distance between successive depth columns/rows (center-to-center). */
+TreeDiagram.DEPTH_GAP = 250;
+/** Distance between successive leaf slots (center-to-center). */
+TreeDiagram.LEAF_GAP = 72;
+exports.default = TreeDiagram;