ts-prorm-orm 1.1.0

package/dist/diagrams/flow-diagram.js

@@ -0,0 +1,394 @@
+"use strict";
+/**
+ * FlowDiagram — generates a general flowchart / data-flow SVG.
+ *
+ * Renders a directed graph of typed nodes connected by labeled edges, using a
+ * simple top-to-bottom (or left-to-right) layered layout. Each node type gets a
+ * distinct SVG geometry:
+ *
+ *   - process        → rounded rectangle
+ *   - decision       → diamond (polygon)
+ *   - start / end    → stadium / pill (accent-filled)
+ *   - data / io      → parallelogram (polygon)
+ *   - database       → cylinder (rect + two ellipses)
+ *
+ * Edges are orthogonal-ish connectors with accent-colored arrowheads and
+ * optional labels (e.g. the "yes"/"no" branches of a decision node). Layout is
+ * driven by optional `row`/`col` hints on each node; when omitted, nodes are
+ * placed sequentially, one per layer, forming a clean vertical chain.
+ *
+ * Good for visualizing a query pipeline or a migration flow.
+ *
+ * Usage:
+ *   const diag = new FlowDiagram({ nodes, edges, title: 'Query pipeline' });
+ *   diag.save('./diagrams/pipeline.svg');
+ *   // or:
+ *   const svgString = 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.FlowDiagram = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const palette_1 = require("./palette");
+const svg_dom_1 = require("./svg-dom");
+// ─── Main class ──────────────────────────────────────────────────────────────
+class FlowDiagram {
+    constructor(options) {
+        this.opts = {
+            nodes: options.nodes ?? [],
+            edges: options.edges ?? [],
+            title: options.title ?? '',
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+            direction: options.direction ?? 'vertical',
+        };
+    }
+    // ── Assign nodes to layers, honoring row/col hints ────────────────────────
+    layout() {
+        const { nodes, direction } = this.opts;
+        const NODE_W = FlowDiagram.NODE_W;
+        const NODE_H = FlowDiagram.NODE_H;
+        const HGAP = FlowDiagram.HGAP;
+        const VGAP = FlowDiagram.VGAP;
+        const PAD = FlowDiagram.PAD;
+        const titleH = this.opts.title ? 54 : 0;
+        // Group into layers: explicit `row` hint, else one node per sequential layer.
+        const layers = new Map();
+        nodes.forEach((n, i) => {
+            const layer = n.row ?? i;
+            if (!layers.has(layer))
+                layers.set(layer, []);
+            layers.get(layer).push(n);
+        });
+        const sortedLayers = [...layers.entries()].sort((a, b) => a[0] - b[0]);
+        // Order within a layer by `col` hint, else keep insertion order.
+        for (const [, group] of sortedLayers) {
+            group.forEach((n, idx) => {
+                if (n.col === undefined)
+                    n.__ord = idx;
+            });
+            group.sort((a, b) => (a.col ?? a.__ord) - (b.col ?? b.__ord));
+        }
+        const layerCount = sortedLayers.length;
+        const maxLane = sortedLayers.reduce((m, [, g]) => Math.max(m, g.length), 1);
+        const laneSpanW = maxLane * NODE_W + (maxLane - 1) * HGAP;
+        const laneSpanH = maxLane * NODE_H + (maxLane - 1) * VGAP;
+        let contentW;
+        let contentH;
+        if (direction === 'horizontal') {
+            contentW = layerCount * NODE_W + (layerCount - 1) * HGAP;
+            contentH = laneSpanH;
+        }
+        else {
+            contentW = laneSpanW;
+            contentH = layerCount * NODE_H + (layerCount - 1) * VGAP;
+        }
+        const leftBase = PAD;
+        const topBase = PAD + titleH;
+        const placed = new Map();
+        sortedLayers.forEach(([, group], li) => {
+            const k = group.length;
+            group.forEach((node, j) => {
+                let cx;
+                let cy;
+                if (direction === 'horizontal') {
+                    cx = leftBase + NODE_W / 2 + li * (NODE_W + HGAP);
+                    const colH = k * NODE_H + (k - 1) * VGAP;
+                    const startY = topBase + (contentH - colH) / 2;
+                    cy = startY + j * (NODE_H + VGAP) + NODE_H / 2;
+                }
+                else {
+                    cy = topBase + NODE_H / 2 + li * (NODE_H + VGAP);
+                    const rowW = k * NODE_W + (k - 1) * HGAP;
+                    const startX = leftBase + (contentW - rowW) / 2;
+                    cx = startX + j * (NODE_W + HGAP) + NODE_W / 2;
+                }
+                placed.set(node.id, { node, type: node.type ?? 'process', cx, cy, layer: li });
+            });
+        });
+        return { placed, contentW, contentH, titleH };
+    }
+    // ── Draw a single typed node into the SVG ─────────────────────────────────
+    drawNode(svg, p, accent, t) {
+        const W = FlowDiagram.NODE_W;
+        const H = FlowDiagram.NODE_H;
+        const { cx, cy, type } = p;
+        const left = cx - W / 2;
+        const top = cy - H / 2;
+        const isTerminal = type === 'start' || type === 'end';
+        const fill = isTerminal ? accent.mid : t.cardBg;
+        const stroke = isTerminal ? accent.from : accent.mid;
+        const textFill = isTerminal ? '#FFFFFF' : t.textPrimary;
+        switch (type) {
+            case 'start':
+            case 'end': {
+                // Stadium / pill: rounded rect with rx = half height.
+                svg.child('rect', {
+                    x: left,
+                    y: top,
+                    width: W,
+                    height: H,
+                    rx: H / 2,
+                    ry: H / 2,
+                    fill,
+                    stroke,
+                    'stroke-width': 2,
+                });
+                break;
+            }
+            case 'decision': {
+                // Diamond polygon.
+                const pts = [
+                    `${cx},${top}`,
+                    `${left + W},${cy}`,
+                    `${cx},${top + H}`,
+                    `${left},${cy}`,
+                ].join(' ');
+                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 2 });
+                break;
+            }
+            case 'data': {
+                // Parallelogram polygon (sheared rectangle).
+                const s = FlowDiagram.PARA_SLANT;
+                const pts = [
+                    `${left + s},${top}`,
+                    `${left + W},${top}`,
+                    `${left + W - s},${top + H}`,
+                    `${left},${top + H}`,
+                ].join(' ');
+                svg.child('polygon', { points: pts, fill, stroke, 'stroke-width': 2 });
+                break;
+            }
+            case 'database': {
+                // Cylinder: body rect + top & bottom ellipses.
+                const ry = FlowDiagram.CYL_RY;
+                const rx = W / 2;
+                // Body (between the two ellipse centers).
+                svg.child('rect', {
+                    x: left,
+                    y: top + ry,
+                    width: W,
+                    height: H - 2 * ry,
+                    fill,
+                });
+                // Side walls.
+                svg.child('line', { x1: left, y1: top + ry, x2: left, y2: top + H - ry, stroke, 'stroke-width': 2 });
+                svg.child('line', { x1: left + W, y1: top + ry, x2: left + W, y2: top + H - ry, stroke, 'stroke-width': 2 });
+                // Bottom (front) ellipse.
+                svg.child('ellipse', { cx, cy: top + H - ry, rx, ry, fill, stroke, 'stroke-width': 2 });
+                // Top ellipse (drawn last so its rim sits on top).
+                svg.child('ellipse', { cx, cy: top + ry, rx, ry, fill, stroke, 'stroke-width': 2 });
+                break;
+            }
+            case 'process':
+            default: {
+                svg.child('rect', {
+                    x: left,
+                    y: top,
+                    width: W,
+                    height: H,
+                    rx: 12,
+                    ry: 12,
+                    fill,
+                    stroke,
+                    'stroke-width': 2,
+                });
+                break;
+            }
+        }
+        // Node label (centered). Truncate very long labels.
+        const label = p.node.label ?? p.node.id;
+        const disp = label.length > 24 ? label.slice(0, 23) + '…' : label;
+        svg
+            .child('text', {
+            x: cx,
+            y: cy + 5,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 13,
+            'font-weight': isTerminal ? 700 : 600,
+            fill: textFill,
+            'text-anchor': 'middle',
+        })
+            .text(disp);
+    }
+    // ── Draw one edge (orthogonal-ish connector) with optional label ──────────
+    drawEdge(svg, from, to, edge, markerId, accent, t) {
+        const W = FlowDiagram.NODE_W;
+        const H = FlowDiagram.NODE_H;
+        const vertical = this.opts.direction !== 'horizontal';
+        let d;
+        let labelX;
+        let labelY;
+        const forward = vertical ? to.layer > from.layer : to.layer > from.layer;
+        if (forward) {
+            if (vertical) {
+                const sx = from.cx;
+                const sy = from.cy + H / 2;
+                const ex = to.cx;
+                const ey = to.cy - H / 2;
+                const midY = (sy + ey) / 2;
+                d = `M ${sx} ${sy} L ${sx} ${midY} L ${ex} ${midY} L ${ex} ${ey}`;
+                labelX = (sx + ex) / 2 + 6;
+                labelY = midY - 4;
+            }
+            else {
+                const sx = from.cx + W / 2;
+                const sy = from.cy;
+                const ex = to.cx - W / 2;
+                const ey = to.cy;
+                const midX = (sx + ex) / 2;
+                d = `M ${sx} ${sy} L ${midX} ${sy} L ${midX} ${ey} L ${ex} ${ey}`;
+                labelX = midX + 4;
+                labelY = (sy + ey) / 2 - 4;
+            }
+        }
+        else {
+            // Same-layer or backward edge: route out along the right side.
+            const sx = from.cx + W / 2;
+            const sy = from.cy;
+            const ex = to.cx + W / 2;
+            const ey = to.cy;
+            const bulge = Math.max(sx, ex) + 40;
+            d = `M ${sx} ${sy} L ${bulge} ${sy} L ${bulge} ${ey} L ${ex} ${ey}`;
+            labelX = bulge + 6;
+            labelY = (sy + ey) / 2;
+        }
+        svg.child('path', {
+            d,
+            fill: 'none',
+            stroke: t.textSecondary,
+            'stroke-width': 1.75,
+            'marker-end': `url(#${markerId})`,
+        });
+        if (edge.label) {
+            // Label chip so text stays legible over the canvas.
+            const chipW = edge.label.length * 6.5 + 12;
+            svg.child('rect', {
+                x: labelX - 2,
+                y: labelY - 12,
+                width: chipW,
+                height: 16,
+                rx: 4,
+                fill: accent.light,
+            });
+            svg
+                .child('text', {
+                x: labelX + chipW / 2 - 2,
+                y: labelY,
+                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-size': 10,
+                'font-weight': 700,
+                fill: accent.text,
+                'text-anchor': 'middle',
+            })
+                .text(edge.label);
+        }
+    }
+    // ── Generate full SVG string ──────────────────────────────────────────────
+    generate() {
+        const { title, theme, color } = this.opts;
+        const accent = (0, palette_1.resolveAccent)(color);
+        const t = (0, palette_1.resolveTheme)(theme);
+        const PAD = FlowDiagram.PAD;
+        const { placed, contentW, contentH, titleH } = this.layout();
+        const svgW = contentW + 2 * PAD;
+        const svgH = contentH + titleH + 2 * PAD;
+        const doc = new svg_dom_1.SvgDocument(Math.max(svgW, 320), Math.max(svgH, 160));
+        const svg = doc.root;
+        // ── Canvas background (theme-driven) ───────────────────────────────────
+        svg.child('rect', { width: Math.max(svgW, 320), height: Math.max(svgH, 160), fill: t.canvasBg });
+        // ── Arrowhead marker (accent-colored) ──────────────────────────────────
+        const markerId = 'flowArrow';
+        const marker = doc.defs().child('marker', {
+            id: markerId,
+            viewBox: '0 0 10 10',
+            refX: 9,
+            refY: 5,
+            markerWidth: 7,
+            markerHeight: 7,
+            orient: 'auto-start-reverse',
+        });
+        marker.child('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: accent.mid });
+        // ── Title ──────────────────────────────────────────────────────────────
+        if (title) {
+            svg
+                .child('text', {
+                x: PAD,
+                y: PAD + 26,
+                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-size': 22,
+                'font-weight': 800,
+                fill: t.textPrimary,
+            })
+                .text(title);
+            svg.child('rect', { x: PAD, y: PAD + 36, width: 56, height: 4, rx: 2, fill: accent.mid });
+        }
+        // ── Edges first (so nodes render on top) ───────────────────────────────
+        for (const edge of this.opts.edges) {
+            const from = placed.get(edge.from);
+            const to = placed.get(edge.to);
+            if (!from || !to)
+                continue;
+            this.drawEdge(svg, from, to, edge, markerId, accent, t);
+        }
+        // ── Nodes ──────────────────────────────────────────────────────────────
+        for (const p of placed.values()) {
+            this.drawNode(svg, p, accent, t);
+        }
+        return doc.toString('Generated by ts-prorm-orm FlowDiagram');
+    }
+    /**
+     * 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.FlowDiagram = FlowDiagram;
+// Layout constants (px)
+FlowDiagram.NODE_W = 176;
+FlowDiagram.NODE_H = 62;
+FlowDiagram.HGAP = 56;
+FlowDiagram.VGAP = 68;
+FlowDiagram.PAD = 32;
+FlowDiagram.CYL_RY = 9; // cylinder ellipse radius-y
+FlowDiagram.PARA_SLANT = 18; // parallelogram shear
+exports.default = FlowDiagram;