ts-prorm-orm 1.1.0

package/dist/diagrams/package-diagram.js

@@ -0,0 +1,376 @@
+"use strict";
+/**
+ * PackageDiagram — a UML package / namespace grouping diagram.
+ *
+ * Groups models/tables into packages (schemas, modules, bounded-contexts).
+ * Each package is drawn as the classic UML "folder" shape: a small tab rect
+ * on the top-left plus a body rect beneath it. Package members are laid out
+ * as small labeled boxes in a grid inside the body. Dashed dependency arrows
+ * (e.g. «import») connect packages.
+ *
+ * Each package receives a distinct accent from `rotatedPalettes`; the theme
+ * drives the canvas/text colors. Both `color` and `theme` options genuinely
+ * change fill/stroke values in the produced SVG, and the viewBox is auto-sized.
+ *
+ * Usage:
+ *   const diag = new PackageDiagram({ packages: [...], dependencies: [...] });
+ *   diag.save('./diagrams/packages.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.PackageDiagram = 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 PackageDiagram {
+    constructor(options) {
+        this.opts = {
+            dependencies: options.dependencies ?? [],
+            title: options.title ?? '',
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+            columns: options.columns ?? 0,
+            ...options,
+        };
+    }
+    /** Compute the pixel size of a single package folder. */
+    packageSize(pkg) {
+        const P = PackageDiagram;
+        const memberCount = Math.max(pkg.members.length, 1);
+        const cols = Math.min(P.MEMBER_COLS, memberCount);
+        const rows = Math.ceil(memberCount / cols);
+        const innerW = cols * P.MEMBER_W + (cols - 1) * P.MEMBER_GAP;
+        const innerH = rows * P.MEMBER_H + (rows - 1) * P.MEMBER_GAP;
+        const w = Math.max(innerW + 2 * P.BODY_PAD, P.TAB_W + 20);
+        const h = P.HDR_H + innerH + 2 * P.BODY_PAD;
+        return { w, h };
+    }
+    generate() {
+        const P = PackageDiagram;
+        const { packages, dependencies, title, theme, color, columns } = this.opts;
+        const t = (0, palette_1.resolveTheme)(theme);
+        const palettes = (0, palette_1.rotatedPalettes)(color);
+        // ── Grid layout of package folders ───────────────────────────────────
+        const gridCols = columns > 0 ? columns : Math.ceil(Math.sqrt(Math.max(packages.length, 1)));
+        // Measure every package first.
+        const sizes = packages.map((p) => this.packageSize(p));
+        // Row heights + column widths for a uniform grid.
+        const rowCount = Math.ceil(packages.length / gridCols);
+        const colWidths = new Array(gridCols).fill(0);
+        const rowHeights = new Array(rowCount).fill(0);
+        packages.forEach((_, i) => {
+            const c = i % gridCols;
+            const r = Math.floor(i / gridCols);
+            colWidths[c] = Math.max(colWidths[c], sizes[i].w);
+            rowHeights[r] = Math.max(rowHeights[r], sizes[i].h);
+        });
+        const titleH = title ? P.TITLE_H : 0;
+        // Cumulative offsets.
+        const colX = [];
+        let accX = P.PAD;
+        for (let c = 0; c < gridCols; c++) {
+            colX[c] = accX;
+            accX += colWidths[c] + P.GAP_X;
+        }
+        const rowY = [];
+        let accY = P.PAD + titleH + P.TAB_H;
+        for (let r = 0; r < rowCount; r++) {
+            rowY[r] = accY;
+            accY += rowHeights[r] + P.GAP_Y;
+        }
+        // Place packages, assigning each a rotated accent.
+        const placed = packages.map((pkg, i) => {
+            const c = i % gridCols;
+            const r = Math.floor(i / gridCols);
+            const { w, h } = sizes[i];
+            return {
+                pkg,
+                x: colX[c],
+                y: rowY[r],
+                w,
+                h,
+                bodyY: rowY[r] + P.TAB_H,
+                accent: palettes[i % palettes.length],
+            };
+        });
+        const byName = new Map();
+        for (const pl of placed)
+            byName.set(pl.pkg.name, pl);
+        // ── Canvas size ──────────────────────────────────────────────────────
+        const totalW = colX[gridCols - 1] + colWidths[gridCols - 1] + P.PAD;
+        const totalH = rowY[rowCount - 1] + rowHeights[rowCount - 1] + P.PAD;
+        const doc = new svg_dom_1.SvgDocument(totalW, totalH);
+        const svg = doc.root;
+        // ── Background ───────────────────────────────────────────────────────
+        svg.child('rect', { class: 'canvas', width: totalW, height: totalH, fill: t.canvasBg });
+        // ── Arrow marker (in defs) ───────────────────────────────────────────
+        const marker = doc.defs().child('marker', {
+            id: 'pkgArrow',
+            markerWidth: 12,
+            markerHeight: 12,
+            refX: 9,
+            refY: 4,
+            orient: 'auto',
+            markerUnits: 'userSpaceOnUse',
+        });
+        marker.child('path', {
+            d: 'M0,0 L9,4 L0,8',
+            fill: 'none',
+            stroke: t.textSecondary,
+            'stroke-width': 1.4,
+        });
+        // ── Title ────────────────────────────────────────────────────────────
+        if (title) {
+            svg
+                .child('text', {
+                class: 'title',
+                x: P.PAD,
+                y: P.PAD + 26,
+                'font-family': 'system-ui,-apple-system,sans-serif',
+                'font-size': 22,
+                'font-weight': 800,
+                fill: t.textPrimary,
+            })
+                .text(title);
+        }
+        // ── Dependency arrows (drawn under packages) ─────────────────────────
+        for (const dep of dependencies) {
+            const a = byName.get(dep.from);
+            const b = byName.get(dep.to);
+            if (!a || !b)
+                continue;
+            const [start, end] = this.edgePoints(a, b);
+            svg.child('line', {
+                class: 'dependency',
+                x1: start.x,
+                y1: start.y,
+                x2: end.x,
+                y2: end.y,
+                stroke: t.textSecondary,
+                'stroke-width': 1.6,
+                'stroke-dasharray': '7 5',
+                'marker-end': 'url(#pkgArrow)',
+            });
+            const mx = (start.x + end.x) / 2;
+            const my = (start.y + end.y) / 2;
+            const label = dep.label ?? '«import»';
+            svg
+                .child('text', {
+                class: 'dependency-label',
+                x: mx,
+                y: my - 6,
+                'font-family': 'system-ui,sans-serif',
+                'font-size': 11,
+                'font-style': 'italic',
+                fill: t.textSecondary,
+                'text-anchor': 'middle',
+            })
+                .text(label);
+        }
+        // ── Package folders ──────────────────────────────────────────────────
+        for (const pl of placed) {
+            this.drawPackage(svg, pl, t);
+        }
+        return doc.toString('Generated by ts-prorm-orm PackageDiagram');
+    }
+    /** Compute connection points on the borders of two package boxes. */
+    edgePoints(a, b) {
+        const ac = { x: a.x + a.w / 2, y: a.bodyY + (a.h) / 2 };
+        const bc = { x: b.x + b.w / 2, y: b.bodyY + (b.h) / 2 };
+        const clamp = (c, box, toward) => {
+            const dx = toward.x - c.x;
+            const dy = toward.y - c.y;
+            const hw = box.w / 2;
+            const hh = box.h / 2;
+            if (dx === 0 && dy === 0)
+                return c;
+            const scaleX = dx !== 0 ? hw / Math.abs(dx) : Infinity;
+            const scaleY = dy !== 0 ? hh / Math.abs(dy) : Infinity;
+            const s = Math.min(scaleX, scaleY);
+            return { x: c.x + dx * s, y: c.y + dy * s };
+        };
+        return [clamp(ac, a, bc), clamp(bc, b, ac)];
+    }
+    /** Draw one UML folder-shaped package with its member grid. */
+    drawPackage(svg, pl, t) {
+        const P = PackageDiagram;
+        const { pkg, x, y, w, bodyY, accent } = pl;
+        const bodyH = pl.h;
+        // Folder tab (top-left small rect).
+        svg.child('rect', {
+            class: 'package-tab',
+            x,
+            y,
+            width: P.TAB_W,
+            height: P.TAB_H,
+            rx: 4,
+            fill: accent.mid,
+            stroke: accent.from,
+            'stroke-width': 1.5,
+        });
+        // Body rect.
+        svg.child('rect', {
+            class: 'package-body',
+            x,
+            y: bodyY,
+            width: w,
+            height: bodyH,
+            rx: 6,
+            fill: t.cardBg,
+            stroke: accent.from,
+            'stroke-width': 1.8,
+        });
+        // Header strip inside body (accent tint).
+        svg.child('rect', {
+            class: 'package-header',
+            x,
+            y: bodyY,
+            width: w,
+            height: P.HDR_H,
+            rx: 6,
+            fill: accent.light,
+        });
+        // Cover bottom radius of header so it butts the members.
+        svg.child('rect', {
+            x,
+            y: bodyY + P.HDR_H - 6,
+            width: w,
+            height: 6,
+            fill: accent.light,
+        });
+        svg.child('line', {
+            x1: x,
+            y1: bodyY + P.HDR_H,
+            x2: x + w,
+            y2: bodyY + P.HDR_H,
+            stroke: accent.from,
+            'stroke-width': 1,
+        });
+        // Package name (in the tab-aligned header).
+        svg
+            .child('text', {
+            class: 'package-name',
+            x: x + P.BODY_PAD,
+            y: bodyY + 26,
+            'font-family': 'system-ui,-apple-system,sans-serif',
+            'font-size': 15,
+            'font-weight': 800,
+            fill: accent.text,
+        })
+            .text(pkg.name);
+        // Member boxes in a grid.
+        const startY = bodyY + P.HDR_H + P.BODY_PAD;
+        const startX = x + P.BODY_PAD;
+        pkg.members.forEach((m, i) => {
+            const c = i % P.MEMBER_COLS;
+            const r = Math.floor(i / P.MEMBER_COLS);
+            const mx = startX + c * (P.MEMBER_W + P.MEMBER_GAP);
+            const my = startY + r * (P.MEMBER_H + P.MEMBER_GAP);
+            svg.child('rect', {
+                class: 'member',
+                x: mx,
+                y: my,
+                width: P.MEMBER_W,
+                height: P.MEMBER_H,
+                rx: 5,
+                fill: t.rowAlt,
+                stroke: accent.mid,
+                'stroke-width': 1,
+            });
+            // Left accent stripe.
+            svg.child('rect', {
+                class: 'member-stripe',
+                x: mx,
+                y: my,
+                width: 4,
+                height: P.MEMBER_H,
+                fill: accent.mid,
+            });
+            const nameDisp = m.name.length > 18 ? m.name.slice(0, 17) + '…' : m.name;
+            svg
+                .child('text', {
+                class: 'member-name',
+                x: mx + 14,
+                y: m.kind ? my + 18 : my + 25,
+                'font-family': "'SF Mono','Fira Code',monospace",
+                'font-size': 12,
+                'font-weight': 700,
+                fill: t.textPrimary,
+            })
+                .text(nameDisp);
+            if (m.kind) {
+                svg
+                    .child('text', {
+                    class: 'member-kind',
+                    x: mx + 14,
+                    y: my + 32,
+                    'font-family': 'system-ui,sans-serif',
+                    'font-size': 9,
+                    fill: t.textSecondary,
+                })
+                    .text(m.kind);
+            }
+        });
+    }
+    /**
+     * 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.PackageDiagram = PackageDiagram;
+// Layout constants (px)
+PackageDiagram.PAD = 32;
+PackageDiagram.GAP_X = 56;
+PackageDiagram.GAP_Y = 64;
+PackageDiagram.TAB_H = 26;
+PackageDiagram.TAB_W = 120;
+PackageDiagram.HDR_H = 40;
+PackageDiagram.MEMBER_W = 150;
+PackageDiagram.MEMBER_H = 40;
+PackageDiagram.MEMBER_GAP = 12;
+PackageDiagram.BODY_PAD = 16;
+PackageDiagram.MEMBER_COLS = 2;
+PackageDiagram.TITLE_H = 48;

package/dist/diagrams/palette.js

@@ -0,0 +1,85 @@
+"use strict";
+/**
+ * Shared accent-color and theme resolution for the diagram generators.
+ *
+ * `--color <name>` (or a custom hex string) picks an accent palette used for
+ * header gradients / banners / entity colors.
+ * `--theme light|dark` picks a background/text theme.
+ *
+ * Both are genuinely applied by ModelDiagram, ERDiagram and MigrationDiagram —
+ * changing either flag changes real fill/stroke values in the generated SVG.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCENT_PALETTES = void 0;
+exports.resolveAccent = resolveAccent;
+exports.rotatedPalettes = rotatedPalettes;
+exports.resolveTheme = resolveTheme;
+// Named palette entries. Order matters: it is also the default cycling order
+// used by ERDiagram when no explicit --color is given.
+exports.ACCENT_PALETTES = [
+    { name: 'blue', from: '#1E3A8A', mid: '#2563EB', to: '#60A5FA', light: '#DBEAFE', text: '#1E3A8A' },
+    { name: 'violet', from: '#5B21B6', mid: '#7C3AED', to: '#A78BFA', light: '#EDE9FE', text: '#5B21B6' },
+    { name: 'emerald', from: '#065F46', mid: '#059669', to: '#34D399', light: '#D1FAE5', text: '#065F46' },
+    { name: 'amber', from: '#92400E', mid: '#D97706', to: '#FBBF24', light: '#FEF3C7', text: '#92400E' },
+    { name: 'pink', from: '#831843', mid: '#DB2777', to: '#F472B6', light: '#FCE7F3', text: '#831843' },
+    { name: 'sky', from: '#0C4A6E', mid: '#0284C7', to: '#38BDF8', light: '#E0F2FE', text: '#0C4A6E' },
+    { name: 'indigo', from: '#1E1B4B', mid: '#4338CA', to: '#818CF8', light: '#E0E7FF', text: '#1E1B4B' },
+    { name: 'purple', from: '#4A1942', mid: '#9333EA', to: '#C084FC', light: '#F3E8FF', text: '#4A1942' },
+    { name: 'red', from: '#7F1D1D', mid: '#DC2626', to: '#F87171', light: '#FEE2E2', text: '#7F1D1D' },
+    { name: 'teal', from: '#134E4A', mid: '#0D9488', to: '#2DD4BF', light: '#CCFBF1', text: '#134E4A' },
+    { name: 'green', from: '#14532D', mid: '#16A34A', to: '#4ADE80', light: '#DCFCE7', text: '#14532D' },
+    { name: 'stone', from: '#1C1917', mid: '#44403C', to: '#A8A29E', light: '#F5F5F4', text: '#1C1917' },
+];
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+/**
+ * Resolve a `--color` flag value to a concrete palette.
+ * Accepts a named palette (case-insensitive) or a hex color string.
+ * Falls back to the default "blue" palette.
+ */
+function resolveAccent(color) {
+    if (color) {
+        const named = exports.ACCENT_PALETTES.find((p) => p.name === color.toLowerCase());
+        if (named)
+            return named;
+        if (HEX_RE.test(color)) {
+            return { name: color, from: color, mid: color, to: color, light: `${color}22`, text: color };
+        }
+    }
+    return exports.ACCENT_PALETTES[0];
+}
+/**
+ * Rotate the palette list so it starts at the resolved accent (used by
+ * ERDiagram to color multiple entities while still honoring --color for the
+ * first/primary entity).
+ */
+function rotatedPalettes(color) {
+    if (!color)
+        return exports.ACCENT_PALETTES;
+    const idx = exports.ACCENT_PALETTES.findIndex((p) => p.name === color.toLowerCase());
+    if (idx <= 0)
+        return exports.ACCENT_PALETTES;
+    return [...exports.ACCENT_PALETTES.slice(idx), ...exports.ACCENT_PALETTES.slice(0, idx)];
+}
+const LIGHT_THEME = {
+    canvasBg: '#EFF6FF',
+    cardBg: '#FFFFFF',
+    rowAlt: '#F8FAFC',
+    colHeaderBg: '#F1F5F9',
+    textPrimary: '#1E293B',
+    textSecondary: '#64748B',
+    border: '#E2E8F0',
+    footerBg: '#1E293B',
+};
+const DARK_THEME = {
+    canvasBg: '#0B1120',
+    cardBg: '#1E293B',
+    rowAlt: '#26374B',
+    colHeaderBg: '#111827',
+    textPrimary: '#F1F5F9',
+    textSecondary: '#94A3B8',
+    border: '#334155',
+    footerBg: '#020617',
+};
+function resolveTheme(theme) {
+    return theme === 'dark' ? DARK_THEME : LIGHT_THEME;
+}