ts-prorm-orm 1.2.2 → 2.0.0

package/dist/diagrams/relational-diagram.js

@@ -1,30 +1,26 @@
 "use strict";
 /**
- * RelationalDiagram — renders a relational schema as entity boxes with their
+ * RelationalDiagram - renders a relational schema as entity boxes with their
  * columns and draws connectors between related tables using proper crow's-foot
  * cardinality notation.
  *
  * Each entity is a box listing its columns; primary-key columns are marked and
  * underlined, foreign-key columns are marked. Relationship connectors terminate
  * with crow's-foot endpoints:
- *   - "one"       → a small perpendicular tick (single bar)
- *   - "many"      → the three-pronged crow's foot
- *   - "optional"  → a small circle just outside the endpoint (zero cardinality)
+ *   - "one"       -> a small perpendicular tick (single bar)
+ *   - "many"      -> the three-pronged crow's foot
  *
  * Supported relationship types: one-to-one, one-to-many, many-to-one,
  * many-to-many. Entities are laid out on a grid and connectors are routed
  * between the nearest entity edges.
  *
- * Everything is built against a real DOM document via the shared `SvgDocument`
- * / `El` builder — never by concatenating markup strings — and the viewBox is
- * auto-sized to the content. Both `theme` and `color` change real fill/stroke
- * values in the output (via `resolveTheme` / `resolveAccent`).
+ * The viewBox is auto-sized to the content.
  *
  * Usage:
  *   const rel = new RelationalDiagram({
  *     title: 'Shop Schema',
- *     entities: [ …RelEntity ],
- *     relationships: [ …RelRelationship ],
+ *     entities: [ ...RelEntity ],
+ *     relationships: [ ...RelRelationship ],
  *   });
  *   rel.save('./diagrams/schema.svg');
  *   // or: const svg = rel.generate();
@@ -66,9 +62,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelationalDiagram = 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 ──────────────────────────────────────────────────────────────
+const svg_1 = require("./core/svg");
+const theme_1 = require("./core/theme");
+const layout_1 = require("./core/layout");
 class RelationalDiagram {
     constructor(options) {
         this.opts = {
@@ -80,12 +76,12 @@ class RelationalDiagram {
             columns: options.columns ?? 3,
         };
     }
-    // ── Box height for an entity ─────────────────────────────────────────────
+    // -- Box height for an entity -----------------------------------------------
     boxHeight(entity) {
         const h = RelationalDiagram.HDR_H + entity.columns.length * RelationalDiagram.ROW_H + 8;
         return Math.max(h, RelationalDiagram.BOX_MIN_H);
     }
-    // ── Grid layout ──────────────────────────────────────────────────────────
+    // -- Grid layout --------------------------------------------------------------
     computeLayout() {
         const { entities, columns } = this.opts;
         const W = RelationalDiagram.BOX_W;
@@ -121,40 +117,23 @@ class RelationalDiagram {
         });
         return layout;
     }
-    // ── Render a single entity box ───────────────────────────────────────────
-    renderBox(doc, svg, box, idx) {
-        void doc;
+    // -- Render a single entity box ------------------------------------------------
+    renderBox(svg, box) {
         const { entity, x, y, w, h } = box;
-        const t = (0, palette_1.resolveTheme)(this.opts.theme);
-        const primary = (0, palette_1.resolveAccent)(this.opts.color);
-        const secondary = (0, palette_1.accent2Of)(primary);
-        // Two-tone blueprint: even entities accent, odd accent-2.
-        const header = idx % 2 === 0 ? primary.mid : secondary.color;
-        const accentText = primary.text;
-        const accent2Text = secondary.text;
         const HDR = RelationalDiagram.HDR_H;
         const ROW = RelationalDiagram.ROW_H;
-        // Surface + hairline frame (square).
-        svg.child('rect', { x, y, width: w, height: h, fill: t.cardBg });
-        svg.child('rect', {
-            x,
-            y,
-            width: w,
-            height: h,
-            fill: 'none',
-            stroke: t.border,
-            'stroke-width': 1,
-        });
-        // Header (solid accent bar).
-        svg.child('rect', { x, y, width: w, height: HDR, fill: header });
+        // Surface + hairline frame.
+        svg.child('rect', { x, y, width: w, height: h, fill: theme_1.INK.ground, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        // Header.
+        svg.child('rect', { x, y, width: w, height: HDR, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
         svg
             .child('text', {
             x: x + 12,
             y: y + 25,
-            'font-family': palette_1.FONTS.heading,
-            'font-size': 16,
-            'font-weight': 600,
-            fill: '#FFFFFF',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.body + 5,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
         })
             .text(entity.name);
         // Column rows.
@@ -164,12 +143,12 @@ class RelationalDiagram {
             const textY = midY + 4;
             const isPK = !!colDef.primaryKey;
             const isFK = !!colDef.foreignKey;
-            const rowBg = ci % 2 === 0 ? t.cardBg : t.rowAlt;
+            const rowBg = ci % 2 === 0 ? theme_1.INK.ground : theme_1.INK.wash;
             svg.child('rect', { x, y: ry, width: w, height: ROW, fill: rowBg });
             // Key marker.
             const markX = x + 14;
             if (isPK) {
-                svg.child('circle', { cx: markX, cy: midY, r: 3.5, fill: primary.mid });
+                svg.child('circle', { cx: markX, cy: midY, r: 3.5, fill: theme_1.INK.line });
             }
             else if (isFK) {
                 svg.child('circle', {
@@ -177,37 +156,36 @@ class RelationalDiagram {
                     cy: midY,
                     r: 3.5,
                     fill: 'none',
-                    stroke: secondary.color,
-                    'stroke-width': 1.6,
+                    stroke: theme_1.INK.line,
+                    'stroke-width': theme_1.STROKE.hair,
                 });
             }
             else {
-                svg.child('circle', { cx: markX, cy: midY, r: 2, fill: palette_1.INDUSTRY.neutral[400] });
+                svg.child('circle', { cx: markX, cy: midY, r: 2, fill: theme_1.INK.muted });
             }
-            // Column name (PK underlined, PK/FK colored+bold).
-            const nameColor = isPK ? accentText : isFK ? accent2Text : t.textPrimary;
-            const nameWeight = isPK ? 600 : isFK ? 600 : 400;
+            // Column name (PK underlined, PK/FK bold).
+            const nameWeight = isPK || isFK ? 'bold' : 'normal';
             const nameX = x + 28;
             svg
                 .child('text', {
                 x: nameX,
                 y: textY,
-                'font-family': palette_1.FONTS.mono,
-                'font-size': 11,
+                'font-family': theme_1.FONT.mono,
+                'font-size': theme_1.FONT.small + 2,
                 'font-weight': nameWeight,
                 'text-decoration': isPK ? 'underline' : undefined,
-                fill: nameColor,
+                fill: theme_1.INK.line,
             })
-                .text(colDef.name);
-            // Type (right-aligned, mono neutral).
+                .text((0, layout_1.truncate)(colDef.name, x + w - 60 - nameX, theme_1.FONT.small + 2, true));
+            // Type (right-aligned, mono muted).
             if (colDef.type) {
                 svg
                     .child('text', {
                     x: x + w - 10,
                     y: textY,
-                    'font-family': palette_1.FONTS.mono,
-                    'font-size': 10,
-                    fill: palette_1.INDUSTRY.neutral[700],
+                    'font-family': theme_1.FONT.mono,
+                    'font-size': theme_1.FONT.small + 1,
+                    fill: theme_1.INK.muted,
                     'text-anchor': 'end',
                 })
                     .text(colDef.type);
@@ -218,25 +196,25 @@ class RelationalDiagram {
                     .child('text', {
                     x: nameX,
                     y: ry + ROW - 4,
-                    'font-family': palette_1.FONTS.heading,
-                    'font-size': 8,
-                    'font-weight': 600,
-                    fill: isPK ? accentText : accent2Text,
+                    'font-family': theme_1.FONT.family,
+                    'font-size': theme_1.FONT.small - 1,
+                    'font-weight': 'bold',
+                    fill: theme_1.INK.muted,
                 })
                     .text(isPK ? 'PK' : 'FK');
             }
-            // Row separator (hairline).
+            // Row separator.
             svg.child('line', {
                 x1: x,
                 y1: ry + ROW,
                 x2: x + w,
                 y2: ry + ROW,
-                stroke: t.border,
-                'stroke-width': 1,
+                stroke: theme_1.INK.line,
+                'stroke-width': theme_1.STROKE.hair,
             });
         });
     }
-    // ── Pick the connection point on the nearest edges of two boxes ──────────
+    // -- Pick the connection point on the nearest edges of two boxes --------------
     edgePoint(box, side) {
         switch (side) {
             case 'left':
@@ -260,8 +238,8 @@ class RelationalDiagram {
         }
         return bMidX >= aMidX ? ['right', 'left'] : ['left', 'right'];
     }
-    // ── Crow's-foot "many" endpoint (three prongs + arc bar) ────────────────
-    crowFoot(parent, x, y, side, color) {
+    // -- Crow's-foot "many" endpoint (three prongs + arc bar) ----------------------
+    crowFoot(parent, x, y, side) {
         // Symbol points AWAY from the box, back along the connector.
         const reach = 13;
         const spread = 7;
@@ -285,34 +263,34 @@ class RelationalDiagram {
             ];
         }
         // Three prongs converging at the box edge.
-        parent.child('line', { x1: x, y1: y, x2: perp[0][0], y2: perp[0][1], stroke: color, 'stroke-width': 1.6 });
-        parent.child('line', { x1: x, y1: y, x2: ex, y2: ey, stroke: color, 'stroke-width': 1.6 });
-        parent.child('line', { x1: x, y1: y, x2: perp[1][0], y2: perp[1][1], stroke: color, 'stroke-width': 1.6 });
+        parent.child('line', { x1: x, y1: y, x2: perp[0][0], y2: perp[0][1], stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        parent.child('line', { x1: x, y1: y, x2: ex, y2: ey, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
+        parent.child('line', { x1: x, y1: y, x2: perp[1][0], y2: perp[1][1], stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
         // Connecting bar across the prongs.
         parent.child('line', {
             x1: perp[0][0],
             y1: perp[0][1],
             x2: perp[1][0],
             y2: perp[1][1],
-            stroke: color,
-            'stroke-width': 1.4,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
     }
-    // ── "One" endpoint (single perpendicular tick) ───────────────────────────
-    oneBar(parent, x, y, side, color) {
+    // -- "One" endpoint (single perpendicular tick) --------------------------------
+    oneBar(parent, x, y, side) {
         const gap = 11;
         const ht = 7;
         if (side === 'left' || side === 'right') {
             const bx = side === 'right' ? x + gap : x - gap;
-            parent.child('line', { x1: bx, y1: y - ht, x2: bx, y2: y + ht, stroke: color, 'stroke-width': 1.8 });
+            parent.child('line', { x1: bx, y1: y - ht, x2: bx, y2: y + ht, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.heavy });
         }
         else {
             const by = side === 'bottom' ? y + gap : y - gap;
-            parent.child('line', { x1: x - ht, y1: by, x2: x + ht, y2: by, stroke: color, 'stroke-width': 1.8 });
+            parent.child('line', { x1: x - ht, y1: by, x2: x + ht, y2: by, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.heavy });
         }
     }
-    // ── Draw one relationship connector with crow's-foot ends ────────────────
-    renderRelationship(svg, rel, byName, color) {
+    // -- Draw one relationship connector with crow's-foot ends ----------------------
+    renderRelationship(svg, rel, byName) {
         const a = byName.get(rel.from);
         const b = byName.get(rel.to);
         if (!a || !b)
@@ -339,21 +317,20 @@ class RelationalDiagram {
         group.child('path', {
             d,
             fill: 'none',
-            stroke: color,
-            'stroke-width': 1.8,
-            opacity: 0.85,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         // Cardinality endpoints.
         const manyAtFrom = rel.type === 'many-to-one' || rel.type === 'many-to-many';
         const manyAtTo = rel.type === 'one-to-many' || rel.type === 'many-to-many';
         if (manyAtFrom)
-            this.crowFoot(group, p.x, p.y, sideA, color);
+            this.crowFoot(group, p.x, p.y, sideA);
         else
-            this.oneBar(group, p.x, p.y, sideA, color);
+            this.oneBar(group, p.x, p.y, sideA);
         if (manyAtTo)
-            this.crowFoot(group, q.x, q.y, sideB, color);
+            this.crowFoot(group, q.x, q.y, sideB);
         else
-            this.oneBar(group, q.x, q.y, sideB, color);
+            this.oneBar(group, q.x, q.y, sideB);
         // Midpoint label (mono, hairline chip).
         const label = rel.label ?? rel.type;
         const mx = (p.x + q.x) / 2;
@@ -364,28 +341,25 @@ class RelationalDiagram {
             y: my - 10,
             width: lw,
             height: 18,
-            rx: 0,
-            fill: (0, palette_1.resolveTheme)(this.opts.theme).cardBg,
-            stroke: color,
-            'stroke-width': 1,
+            fill: theme_1.INK.ground,
+            stroke: theme_1.INK.line,
+            'stroke-width': theme_1.STROKE.hair,
         });
         group
             .child('text', {
             x: mx,
             y: my + 3,
-            'font-family': palette_1.FONTS.mono,
-            'font-size': 10,
-            'font-weight': 600,
-            fill: color,
+            'font-family': theme_1.FONT.mono,
+            'font-size': theme_1.FONT.small + 1,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
             'text-anchor': 'middle',
         })
             .text(label);
     }
-    // ── Generate full SVG ────────────────────────────────────────────────────
-    generate() {
+    // -- Build the SVG document ------------------------------------------------------
+    build() {
         const { title, relationships } = this.opts;
-        const t = (0, palette_1.resolveTheme)(this.opts.theme);
-        const accent = (0, palette_1.resolveAccent)(this.opts.color);
         const MARGIN = RelationalDiagram.MARGIN;
         const BANNER = RelationalDiagram.BANNER_H;
         const layout = this.computeLayout();
@@ -396,30 +370,29 @@ class RelationalDiagram {
         const maxY = layout.length ? Math.max(...layout.map((b) => b.y + b.h)) : BANNER;
         const totalW = maxX + MARGIN;
         const totalH = maxY + MARGIN;
-        const doc = new svg_dom_1.SvgDocument(totalW, totalH);
+        const doc = new svg_1.SvgDocument(totalW, totalH);
         const svg = doc.root;
-        // Web fonts for browser renderers.
-        doc.style(palette_1.FONT_IMPORT);
-        // Canvas ground (theme-driven → responds to `theme`).
-        svg.child('rect', { width: totalW, height: totalH, fill: t.canvasBg });
-        // Banner (solid accent bar so `color` shows here too).
-        svg.child('rect', { width: totalW, height: BANNER, fill: accent.mid });
+        svg.child('rect', { width: totalW, height: totalH, fill: theme_1.INK.ground });
+        // Banner.
+        svg.child('rect', { width: totalW, height: BANNER, fill: theme_1.INK.wash, stroke: theme_1.INK.line, 'stroke-width': theme_1.STROKE.hair });
         svg
             .child('text', {
             x: 24,
             y: 38,
-            'font-family': palette_1.FONTS.heading,
-            'font-size': 24,
-            'font-weight': 600,
-            fill: '#FFFFFF',
+            'font-family': theme_1.FONT.family,
+            'font-size': theme_1.FONT.title + 11,
+            'font-weight': 'bold',
+            fill: theme_1.INK.line,
         })
             .text(title);
-        // Relationship connectors (drawn under the boxes).
-        const relColor = accent.mid;
-        relationships.forEach((rel) => this.renderRelationship(svg, rel, byName, relColor));
+        // Relationship connectors, drawn under the boxes.
+        relationships.forEach((rel) => this.renderRelationship(svg, rel, byName));
         // Entity boxes on top.
-        layout.forEach((box, i) => this.renderBox(doc, svg, box, i));
-        return doc.toString('Generated by ts-prorm-orm RelationalDiagram');
+        layout.forEach((box) => this.renderBox(svg, box));
+        return doc;
+    }
+    generate() {
+        return this.build().toString('Generated by ts-prorm-orm RelationalDiagram');
     }
     /**
      * Write the SVG to a file, creating parent directories as needed.

package/dist/diagrams/schemadoc-diagram.d.ts

@@ -1,19 +1,14 @@
 /**
- * SchemaDocDiagram — generates a print-friendly "data dictionary" / schema
+ * SchemaDocDiagram - generates a print-friendly "data dictionary" / schema
  * documentation sheet as SVG.
  *
  * Where ERDiagram / ModelDiagram render the *visual* shape of a schema, this
  * generator renders the *reference* counterpart: for every table a titled
  * section followed by a tabular grid with one row per column, listing
- * Column · Type · Nullable · Key · Default · Description. Rows are
- * zebra-striped and each grid's header row is painted in the accent color.
+ * Column, Type, Nullable, Key, Default, Description. Rows are zebra-striped.
  * A document title banner and a summary line ("N tables, M columns") top the
  * sheet.
  *
- * All markup is built against a real DOM document (see ./svg-dom) — never by
- * concatenating strings — and both `--theme` and `--color` genuinely change
- * fill/stroke values in the output.
- *
  * Usage:
  *   const doc = new SchemaDocDiagram({ tables: [...], title: 'My Schema' });
  *   doc.save('./diagrams/schema.svg');
@@ -36,8 +31,12 @@ export interface DocTable {
 export interface SchemaDocDiagramOptions {
     tables: DocTable[];
     title?: string;
+    /**
+     * Accepted for backward compatibility and ignored: diagrams render in a
+     * single monochrome theme.
+     */
     theme?: 'light' | 'dark';
-    /** Named palette (e.g. "emerald") or hex color for banner/header rows */
+    /** Accepted for backward compatibility and ignored. */
     color?: string;
 }
 export declare class SchemaDocDiagram {
@@ -47,6 +46,7 @@ export declare class SchemaDocDiagram {
     private totalColumns;
     /** Height of one table's rendered section. */
     private sectionHeight;
+    private build;
     generate(): string;
     /** Draw one table section starting at `y`; returns the y after the section. */
     private drawTable;