@zentto/report-designer 1.6.5 → 1.6.7

package/dist/data-panel/er-diagram.js

@@ -1,5 +1,5 @@
 // @zentto/report-designer — Visual ER Diagram
-// Interactive SVG canvas showing tables as boxes with relation lines
+// Interactive SVG canvas: tables, drag-to-link fields, relation arrows with cardinality
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -8,20 +8,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css, svg, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-// ─── Layout Constants ─────────────────────────────────────────────
-const TABLE_WIDTH = 180;
-const TABLE_HEADER_HEIGHT = 28;
-const FIELD_ROW_HEIGHT = 20;
-const TABLE_PADDING = 12;
+// ─── Constants ────────────────────────────────────────────────────
+const TW = 190; // table width
+const TH_HEADER = 30; // header height
+const TH_FIELD = 18; // field row height
+const TH_PAD = 8; // bottom padding
 const GRID_COLS = 3;
-const GRID_GAP_X = 220;
-const GRID_GAP_Y = 40;
+const GAP_X = 230;
+const GAP_Y = 40;
 const JOIN_COLORS = {
-    inner: '#1976d2',
-    left: '#2e7d32',
-    right: '#e65100',
-    full: '#7b1fa2',
+    inner: '#1976d2', left: '#2e7d32', right: '#e65100', full: '#7b1fa2',
 };
+const CARDINALITY = {
+    inner: { start: '1', end: '1' },
+    left: { start: '1', end: '*' },
+    right: { start: '*', end: '1' },
+    full: { start: '*', end: '*' },
+};
+// ─── Component ────────────────────────────────────────────────────
 let ErDiagram = class ErDiagram extends LitElement {
     constructor() {
         super(...arguments);
@@ -29,145 +33,102 @@ let ErDiagram = class ErDiagram extends LitElement {
         this.relations = [];
         this._tables = [];
         this._dragging = null;
-        this._hoveredRelation = null;
-        this._svgWidth = 800;
-        this._svgHeight = 600;
+        this._linkDrag = null;
+        this._hoveredRel = null;
+        this._selectedRel = null;
+        this._svgW = 800;
+        this._svgH = 600;
+        this._tool = 'select';
     }
     static { this.styles = css `
-    :host {
-      display: block;
-      height: 100%;
-      overflow: hidden;
-      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
-    }
-
-    .er-container {
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      background:
-        linear-gradient(90deg, var(--zrd-grid-line, #f0f0f0) 1px, transparent 1px),
-        linear-gradient(var(--zrd-grid-line, #f0f0f0) 1px, transparent 1px);
-      background-size: 20px 20px;
-      cursor: default;
-    }
+    :host { display: flex; flex-direction: column; height: 100%; overflow: hidden; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
 
-    svg {
-      display: block;
+    /* ─── Toolbar ─────────────────────────────── */
+    .er-toolbar {
+      display: flex; align-items: center; gap: 4px;
+      padding: 6px 10px; background: #f5f5f5;
+      border-bottom: 1px solid #ddd; flex-shrink: 0;
     }
-
-    /* ─── Table Box ───────────────────────────── */
-    .table-box {
-      cursor: move;
-    }
-    .table-box:hover .table-border {
-      stroke: var(--zrd-primary, #1976d2);
-      stroke-width: 2;
+    .tb-btn {
+      padding: 4px 10px; border: 1px solid #ccc; border-radius: 4px;
+      background: #fff; cursor: pointer; font-size: 11px; font-weight: 500;
+      display: flex; align-items: center; gap: 4px;
     }
+    .tb-btn:hover { background: #e3f2fd; border-color: #1976d2; }
+    .tb-btn.active { background: #1976d2; color: #fff; border-color: #1976d2; }
+    .tb-btn.danger { color: #c62828; }
+    .tb-btn.danger:hover { background: #ffebee; }
+    .tb-sep { width: 1px; height: 20px; background: #ddd; margin: 0 4px; }
+    .tb-spacer { flex: 1; }
+    .tb-info { font-size: 10px; color: #999; }
 
-    .table-border {
-      fill: var(--zrd-panel-bg, #fff);
-      stroke: var(--zrd-border, #ccc);
-      stroke-width: 1;
-      rx: 6;
-      ry: 6;
-      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
-    }
-
-    .table-header-bg {
-      rx: 6;
-      ry: 6;
-    }
-    .table-header-mask {
-      fill: var(--zrd-panel-bg, #fff);
+    /* ─── Canvas ──────────────────────────────── */
+    .er-canvas {
+      flex: 1; overflow: auto; cursor: default;
+      background:
+        linear-gradient(90deg, #f5f5f5 1px, transparent 1px),
+        linear-gradient(#f5f5f5 1px, transparent 1px);
+      background-size: 20px 20px; background-color: #fafafa;
     }
+    .er-canvas.link-mode { cursor: crosshair; }
+    svg { display: block; }
 
-    .table-name {
-      font-size: 11px;
-      font-weight: 600;
-      fill: #fff;
+    /* ─── Table ───────────────────────────────── */
+    .tbl { cursor: move; }
+    .tbl:hover .tbl-border { stroke: #1976d2; stroke-width: 2; }
+    .tbl-border {
+      fill: #fff; stroke: #ccc; stroke-width: 1; rx: 6; ry: 6;
+      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
     }
+    .tbl-hdr { rx: 6; ry: 6; }
+    .tbl-hdr-mask { fill: #fff; }
+    .tbl-name { font-size: 11px; font-weight: 600; fill: #fff; }
+    .tbl-count { font-size: 9px; fill: rgba(255,255,255,0.7); }
 
-    .field-name {
-      font-size: 10px;
-      fill: var(--zrd-text, #333);
-    }
-    .field-type {
-      font-size: 9px;
-      fill: var(--zrd-text-muted, #999);
-    }
-    .field-pk {
-      font-size: 9px;
-      fill: #ff9800;
-    }
+    .fld-row { cursor: default; }
+    .fld-row:hover rect { fill: rgba(25,118,210,0.06); }
+    .fld-name { font-size: 10px; fill: #333; }
+    .fld-type { font-size: 8.5px; fill: #999; }
+    .fld-pk { font-size: 9px; fill: #ff9800; }
+    .fld-sep { stroke: #eee; stroke-width: 0.5; }
 
-    .field-row:hover {
-      opacity: 0.8;
-    }
-
-    .field-separator {
-      stroke: var(--zrd-border, #eee);
-      stroke-width: 0.5;
+    /* Link handle (dot on field) */
+    .fld-link-dot {
+      fill: #1976d2; opacity: 0; cursor: crosshair; transition: opacity 0.15s;
     }
+    .tbl:hover .fld-link-dot, .er-canvas.link-mode .fld-link-dot { opacity: 0.6; }
+    .fld-link-dot:hover { opacity: 1 !important; r: 5; }
 
     /* ─── Relation Lines ──────────────────────── */
-    .relation-line {
-      fill: none;
-      stroke-width: 1.5;
-      cursor: pointer;
-      transition: stroke-width 0.15s;
-    }
-    .relation-line:hover,
-    .relation-line.hovered {
-      stroke-width: 3;
-    }
+    .rel-path { fill: none; stroke-width: 1.8; transition: stroke-width 0.15s; }
+    .rel-path.hovered, .rel-path.selected { stroke-width: 3; }
+    .rel-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
+    .rel-label { font-size: 9px; font-weight: 600; pointer-events: none; }
+    .rel-label-bg { rx: 3; ry: 3; }
+    .rel-card { font-size: 10px; font-weight: 700; pointer-events: none; }
 
-    .relation-label {
-      font-size: 9px;
-      font-weight: 600;
-      pointer-events: none;
-    }
-    .relation-label-bg {
-      fill: var(--zrd-panel-bg, #fff);
-      rx: 3;
-      ry: 3;
-    }
+    /* Link drag preview line */
+    .link-preview { stroke: #1976d2; stroke-width: 2; stroke-dasharray: 6 3; fill: none; }
 
-    /* ─── Empty State ─────────────────────────── */
-    .empty-state {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      color: var(--zrd-text-muted, #999);
-      font-size: 12px;
-      text-align: center;
-      padding: 20px;
-    }
+    .empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 12px; text-align: center; padding: 20px; }
   `; }
     // ─── Lifecycle ────────────────────────────────────────────────
     updated(changed) {
-        if (changed.has('dataSources')) {
+        if (changed.has('dataSources'))
             this._layoutTables();
-        }
     }
-    // ─── Auto Layout ──────────────────────────────────────────────
     _layoutTables() {
         const tables = [];
-        let col = 0;
-        let row = 0;
+        let col = 0, row = 0;
         for (const ds of this.dataSources) {
-            const fieldCount = ds.fields?.length || 0;
-            const height = TABLE_HEADER_HEIGHT + fieldCount * FIELD_ROW_HEIGHT + TABLE_PADDING;
-            // Check if existing position is stored (preserve user moves)
+            const fc = ds.fields?.length || 0;
+            const h = TH_HEADER + fc * TH_FIELD + TH_PAD;
             const existing = this._tables.find(t => t.dsId === ds.id);
             tables.push({
                 dsId: ds.id,
-                x: existing?.x ?? (TABLE_PADDING + col * GRID_GAP_X),
-                y: existing?.y ?? (TABLE_PADDING + row * (Math.max(height, 120) + GRID_GAP_Y)),
-                width: TABLE_WIDTH,
-                height,
-                ds,
+                x: existing?.x ?? (12 + col * GAP_X),
+                y: existing?.y ?? (12 + row * (Math.max(h, 100) + GAP_Y)),
+                width: TW, height: h, ds,
             });
             col++;
             if (col >= GRID_COLS) {
@@ -176,224 +137,284 @@ let ErDiagram = class ErDiagram extends LitElement {
             }
         }
         this._tables = tables;
-        this._updateSvgSize();
+        this._updateSize();
     }
-    _updateSvgSize() {
-        let maxX = 400;
-        let maxY = 300;
+    _updateSize() {
+        let mx = 600, my = 400;
         for (const t of this._tables) {
-            maxX = Math.max(maxX, t.x + t.width + 40);
-            maxY = Math.max(maxY, t.y + t.height + 40);
+            mx = Math.max(mx, t.x + t.width + 60);
+            my = Math.max(my, t.y + t.height + 60);
         }
-        this._svgWidth = maxX;
-        this._svgHeight = maxY;
+        this._svgW = mx;
+        this._svgH = my;
     }
-    // ─── Drag Handling ────────────────────────────────────────────
-    _onMouseDown(e, dsId) {
-        const table = this._tables.find(t => t.dsId === dsId);
-        if (!table)
+    // ─── Table Drag ───────────────────────────────────────────────
+    _onTableDown(e, dsId) {
+        if (this._tool === 'link')
+            return; // in link mode, don't drag tables
+        const t = this._tables.find(t => t.dsId === dsId);
+        if (!t)
             return;
         e.preventDefault();
-        const svgEl = this.renderRoot.querySelector('svg');
-        if (!svgEl)
-            return;
-        const rect = svgEl.getBoundingClientRect();
-        this._dragging = {
-            dsId,
-            offsetX: e.clientX - rect.left - table.x,
-            offsetY: e.clientY - rect.top - table.y,
-        };
+        e.stopPropagation();
+        const svgRect = this.renderRoot.querySelector('svg').getBoundingClientRect();
+        this._dragging = { dsId, ox: e.clientX - svgRect.left - t.x, oy: e.clientY - svgRect.top - t.y };
         const onMove = (ev) => {
             if (!this._dragging)
                 return;
-            const newX = Math.max(0, ev.clientX - rect.left - this._dragging.offsetX);
-            const newY = Math.max(0, ev.clientY - rect.top - this._dragging.offsetY);
-            this._tables = this._tables.map(t => t.dsId === this._dragging.dsId ? { ...t, x: newX, y: newY } : t);
-            this._updateSvgSize();
+            const nx = Math.max(0, ev.clientX - svgRect.left - this._dragging.ox);
+            const ny = Math.max(0, ev.clientY - svgRect.top - this._dragging.oy);
+            this._tables = this._tables.map(tb => tb.dsId === this._dragging.dsId ? { ...tb, x: nx, y: ny } : tb);
+            this._updateSize();
+        };
+        const onUp = () => { this._dragging = null; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    // ─── Link Drag (create relation by dragging field to field) ──
+    _onFieldLinkStart(e, dsId, fieldName) {
+        e.preventDefault();
+        e.stopPropagation();
+        const svgRect = this.renderRoot.querySelector('svg').getBoundingClientRect();
+        const x = e.clientX - svgRect.left;
+        const y = e.clientY - svgRect.top;
+        this._linkDrag = { fromDsId: dsId, fromField: fieldName, fromX: x, fromY: y, currentX: x, currentY: y };
+        const onMove = (ev) => {
+            if (!this._linkDrag)
+                return;
+            this._linkDrag = { ...this._linkDrag, currentX: ev.clientX - svgRect.left, currentY: ev.clientY - svgRect.top };
         };
-        const onUp = () => {
-            this._dragging = null;
+        const onUp = (ev) => {
             document.removeEventListener('mousemove', onMove);
             document.removeEventListener('mouseup', onUp);
+            if (!this._linkDrag)
+                return;
+            // Find drop target field
+            const target = this._findFieldAt(ev.clientX - svgRect.left, ev.clientY - svgRect.top);
+            if (target && target.dsId !== this._linkDrag.fromDsId) {
+                this._createRelation(this._linkDrag.fromDsId, this._linkDrag.fromField, target.dsId, target.fieldName);
+            }
+            this._linkDrag = null;
         };
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onUp);
     }
-    _onRelationClick(rel) {
-        this.dispatchEvent(new CustomEvent('relation-edit', {
+    _findFieldAt(x, y) {
+        for (const t of this._tables) {
+            if (x < t.x || x > t.x + t.width)
+                continue;
+            const fields = t.ds.fields || [];
+            for (let i = 0; i < fields.length; i++) {
+                const fy = t.y + TH_HEADER + i * TH_FIELD;
+                if (y >= fy && y <= fy + TH_FIELD) {
+                    return { dsId: t.dsId, fieldName: fields[i].name };
+                }
+            }
+        }
+        return null;
+    }
+    _createRelation(parentDs, parentField, childDs, childField) {
+        const rel = {
+            id: `rel_${Date.now()}`,
+            parentSource: parentDs,
+            childSource: childDs,
+            joins: [{ parentField, childField }],
+            joinType: 'inner',
+        };
+        this.dispatchEvent(new CustomEvent('relation-create', {
             detail: { relation: rel },
             bubbles: true, composed: true,
         }));
     }
-    _onTableDoubleClick(dsId) {
-        this.dispatchEvent(new CustomEvent('table-focus', {
-            detail: { dataSourceId: dsId },
-            bubbles: true, composed: true,
-        }));
+    // ─── Relation Actions ─────────────────────────────────────────
+    _onRelClick(rel) {
+        this._selectedRel = this._selectedRel === rel.id ? null : rel.id;
+    }
+    _editRelation() {
+        const rel = (this.relations || []).find(r => r.id === this._selectedRel);
+        if (rel) {
+            this.dispatchEvent(new CustomEvent('relation-edit', { detail: { relation: rel }, bubbles: true, composed: true }));
+        }
+    }
+    _deleteRelation() {
+        if (this._selectedRel) {
+            this.dispatchEvent(new CustomEvent('relation-delete', { detail: { relationId: this._selectedRel }, bubbles: true, composed: true }));
+            this._selectedRel = null;
+        }
+    }
+    _emit(action) {
+        this.dispatchEvent(new CustomEvent(action, { bubbles: true, composed: true }));
+    }
+    // ─── Connection Points (field-level) ──────────────────────────
+    _getFieldY(dsId, fieldName) {
+        const t = this._tables.find(tb => tb.dsId === dsId);
+        if (!t)
+            return null;
+        const fields = t.ds.fields || [];
+        const idx = fields.findIndex(f => f.name === fieldName);
+        if (idx < 0)
+            return t.y + t.height / 2; // fallback to center
+        return t.y + TH_HEADER + idx * TH_FIELD + TH_FIELD / 2;
     }
-    // ─── Relation Line Geometry ───────────────────────────────────
-    _getConnectionPoints(rel) {
-        const parent = this._tables.find(t => t.dsId === rel.parentSource);
-        const child = this._tables.find(t => t.dsId === rel.childSource);
-        if (!parent || !child)
+    _getRelPoints(rel) {
+        const pt = this._tables.find(t => t.dsId === rel.parentSource);
+        const ct = this._tables.find(t => t.dsId === rel.childSource);
+        if (!pt || !ct)
             return null;
-        // Connect from right edge of parent to left edge of child (or vice versa)
-        const parentCenterY = parent.y + parent.height / 2;
-        const childCenterY = child.y + child.height / 2;
+        const pField = rel.joins[0]?.parentField;
+        const cField = rel.joins[0]?.childField;
+        const py = this._getFieldY(rel.parentSource, pField) ?? (pt.y + pt.height / 2);
+        const cy = this._getFieldY(rel.childSource, cField) ?? (ct.y + ct.height / 2);
+        // Determine connection sides
         let x1, x2;
-        if (parent.x + parent.width < child.x) {
-            // Parent is to the left
-            x1 = parent.x + parent.width;
-            x2 = child.x;
+        if (pt.x + pt.width + 20 < ct.x) {
+            x1 = pt.x + pt.width;
+            x2 = ct.x;
         }
-        else if (child.x + child.width < parent.x) {
-            // Child is to the left
-            x1 = parent.x;
-            x2 = child.x + child.width;
+        else if (ct.x + ct.width + 20 < pt.x) {
+            x1 = pt.x;
+            x2 = ct.x + ct.width;
         }
         else {
-            // Overlapping horizontally — connect from bottom/top
-            x1 = parent.x + parent.width / 2;
-            x2 = child.x + child.width / 2;
+            x1 = pt.x + pt.width;
+            x2 = ct.x + ct.width;
         }
-        return { x1, y1: parentCenterY, x2, y2: childCenterY };
+        return { x1, y1: py, x2, y2: cy };
     }
-    // ─── Rendering ────────────────────────────────────────────────
-    _renderTableBox(table) {
-        const fields = table.ds.fields || [];
-        const headerColor = '#1976d2';
-        return svg `
-      <g class="table-box"
-         @mousedown=${(e) => this._onMouseDown(e, table.dsId)}
-         @dblclick=${() => this._onTableDoubleClick(table.dsId)}>
-        <!-- Shadow/border -->
-        <rect class="table-border"
-              x=${table.x} y=${table.y}
-              width=${table.width} height=${table.height} />
-
-        <!-- Header background -->
-        <rect class="table-header-bg"
-              x=${table.x} y=${table.y}
-              width=${table.width} height=${TABLE_HEADER_HEIGHT}
-              fill=${headerColor} />
-        <!-- Mask bottom corners of header -->
-        <rect class="table-header-mask"
-              x=${table.x} y=${table.y + TABLE_HEADER_HEIGHT - 6}
-              width=${table.width} height="6" />
+    // ─── Render ───────────────────────────────────────────────────
+    render() {
+        const hasDS = this.dataSources.length > 0;
+        return html `
+      <!-- Toolbar -->
+      <div class="er-toolbar">
+        <button class="tb-btn ${this._tool === 'select' ? 'active' : ''}"
+                @click=${() => { this._tool = 'select'; }}>\u{1F5B1} Select</button>
+        <button class="tb-btn ${this._tool === 'link' ? 'active' : ''}"
+                @click=${() => { this._tool = 'link'; }}>\u{1F517} Link</button>
+        <span class="tb-sep"></span>
+        <button class="tb-btn" @click=${() => this._emit('add-datasource')}>\u2795 Table</button>
+        <button class="tb-btn" @click=${() => this._emit('add-zentto')}>\u{1F310} Zentto</button>
+        <button class="tb-btn" @click=${() => this._emit('add-rest')}>\u{1F517} REST</button>
+        <span class="tb-sep"></span>
+        ${this._selectedRel ? html `
+          <button class="tb-btn" @click=${this._editRelation}>\u270E Edit Link</button>
+          <button class="tb-btn danger" @click=${this._deleteRelation}>\u{1F5D1} Delete Link</button>
+        ` : nothing}
+        <span class="tb-spacer"></span>
+        <button class="tb-btn" @click=${() => { this._tables = []; this._layoutTables(); }}>\u{2B73} Auto Layout</button>
+        <span class="tb-info">${this.dataSources.length} tables \u2022 ${(this.relations || []).length} relations</span>
+      </div>
 
-        <!-- Table name -->
-        <text class="table-name"
-              x=${table.x + 10} y=${table.y + 18}>
-          ${table.ds.table || table.ds.name}
-        </text>
+      ${!hasDS ? html `
+        <div class="empty">No data sources. Use the toolbar to add tables, Zentto modules, or REST endpoints.</div>
+      ` : html `
+        <div class="er-canvas ${this._tool === 'link' ? 'link-mode' : ''}">
+          <svg width=${this._svgW} height=${this._svgH} xmlns="http://www.w3.org/2000/svg">
+            ${this._renderDefs()}
+            ${(this.relations || []).map(r => this._renderRelLine(r))}
+            ${this._tables.map(t => this._renderTable(t))}
+            ${this._linkDrag ? this._renderLinkPreview() : nothing}
+          </svg>
+        </div>
+      `}
+    `;
+    }
+    _renderDefs() {
+        return svg `<defs>
+      ${Object.entries(JOIN_COLORS).map(([type, color]) => svg `
+        <marker id="arr-${type}" viewBox="0 0 12 8" refX="11" refY="4"
+                markerWidth="10" markerHeight="8" orient="auto-start-reverse">
+          <path d="M 0 0 L 12 4 L 0 8 z" fill=${color} />
+        </marker>
+      `)}
+      <marker id="arr-preview" viewBox="0 0 12 8" refX="11" refY="4"
+              markerWidth="10" markerHeight="8" orient="auto-start-reverse">
+        <path d="M 0 0 L 12 4 L 0 8 z" fill="#1976d2" opacity="0.5" />
+      </marker>
+    </defs>`;
+    }
+    // ─── Table Box ────────────────────────────────────────────────
+    _renderTable(t) {
+        const fields = t.ds.fields || [];
+        const hdrColor = '#1976d2';
+        return svg `
+      <g class="tbl" @mousedown=${(e) => this._onTableDown(e, t.dsId)}>
+        <rect class="tbl-border" x=${t.x} y=${t.y} width=${t.width} height=${t.height} />
+        <rect class="tbl-hdr" x=${t.x} y=${t.y} width=${t.width} height=${TH_HEADER} fill=${hdrColor} />
+        <rect class="tbl-hdr-mask" x=${t.x} y=${t.y + TH_HEADER - 6} width=${t.width} height="6" />
+        <text class="tbl-name" x=${t.x + 8} y=${t.y + 19}>${t.ds.table || t.ds.name}</text>
+        <text class="tbl-count" x=${t.x + t.width - 8} y=${t.y + 19} text-anchor="end">${fields.length}</text>
 
-        <!-- Fields -->
         ${fields.map((f, i) => {
-            const fy = table.y + TABLE_HEADER_HEIGHT + i * FIELD_ROW_HEIGHT;
+            const fy = t.y + TH_HEADER + i * TH_FIELD;
             return svg `
-            <g class="field-row">
-              ${i > 0 ? svg `
-                <line class="field-separator"
-                      x1=${table.x + 4} y1=${fy}
-                      x2=${table.x + table.width - 4} y2=${fy} />
-              ` : nothing}
-              ${f.isPrimaryKey ? svg `
-                <text class="field-pk"
-                      x=${table.x + 6} y=${fy + 14}>\u{1F511}</text>
-              ` : nothing}
-              <text class="field-name"
-                    x=${table.x + (f.isPrimaryKey ? 20 : 8)}
-                    y=${fy + 14}>
-                ${f.label || f.name}
-              </text>
-              <text class="field-type"
-                    x=${table.x + table.width - 8}
-                    y=${fy + 14}
-                    text-anchor="end">
-                ${f.nativeType || f.type}
-              </text>
+            <g class="fld-row">
+              ${i > 0 ? svg `<line class="fld-sep" x1=${t.x + 4} y1=${fy} x2=${t.x + t.width - 4} y2=${fy} />` : nothing}
+              <!-- Hover highlight bg -->
+              <rect x=${t.x + 1} y=${fy} width=${t.width - 2} height=${TH_FIELD} fill="transparent" />
+              ${f.isPrimaryKey ? svg `<text class="fld-pk" x=${t.x + 6} y=${fy + 13}>\u{1F511}</text>` : nothing}
+              <text class="fld-name" x=${t.x + (f.isPrimaryKey ? 20 : 8)} y=${fy + 13}>${f.label || f.name}</text>
+              <text class="fld-type" x=${t.x + t.width - 16} y=${fy + 13} text-anchor="end">${f.nativeType || f.type}</text>
+              <!-- Link dot (right edge) -->
+              <circle class="fld-link-dot" cx=${t.x + t.width - 4} cy=${fy + TH_FIELD / 2} r="4"
+                      @mousedown=${(e) => this._onFieldLinkStart(e, t.dsId, f.name)} />
+              <!-- Link dot (left edge) -->
+              <circle class="fld-link-dot" cx=${t.x + 4} cy=${fy + TH_FIELD / 2} r="4"
+                      @mousedown=${(e) => this._onFieldLinkStart(e, t.dsId, f.name)} />
             </g>
           `;
         })}
       </g>
     `;
     }
-    _renderRelationLine(rel) {
-        const pts = this._getConnectionPoints(rel);
+    // ─── Relation Line ────────────────────────────────────────────
+    _renderRelLine(rel) {
+        const pts = this._getRelPoints(rel);
         if (!pts)
             return nothing;
         const { x1, y1, x2, y2 } = pts;
         const color = JOIN_COLORS[rel.joinType] || '#666';
+        const card = CARDINALITY[rel.joinType];
+        const isHovered = this._hoveredRel === rel.id;
+        const isSelected = this._selectedRel === rel.id;
+        const cx1 = x1 + (x2 - x1) * 0.35;
+        const cx2 = x1 + (x2 - x1) * 0.65;
+        const d = `M ${x1} ${y1} C ${cx1} ${y1}, ${cx2} ${y2}, ${x2} ${y2}`;
         const midX = (x1 + x2) / 2;
         const midY = (y1 + y2) / 2;
-        // Bezier control points for smooth curve
-        const cx1 = x1 + (x2 - x1) * 0.4;
-        const cx2 = x1 + (x2 - x1) * 0.6;
-        const isHovered = this._hoveredRelation === rel.id;
-        const label = rel.joinType.toUpperCase();
+        const joinLabel = rel.joins.map(j => `${j.parentField} = ${j.childField}`).join(', ');
         return svg `
       <g>
-        <!-- Clickable wider path for easier selection -->
-        <path
-          d="M ${x1} ${y1} C ${cx1} ${y1}, ${cx2} ${y2}, ${x2} ${y2}"
-          stroke="transparent" fill="none" stroke-width="12"
-          style="cursor:pointer"
-          @click=${() => this._onRelationClick(rel)}
-          @mouseenter=${() => { this._hoveredRelation = rel.id; }}
-          @mouseleave=${() => { this._hoveredRelation = null; }}
-        />
-        <!-- Visible line -->
-        <path
-          class="relation-line ${isHovered ? 'hovered' : ''}"
-          d="M ${x1} ${y1} C ${cx1} ${y1}, ${cx2} ${y2}, ${x2} ${y2}"
-          stroke=${color}
-          marker-end="url(#arrow-${rel.joinType})"
-        />
-        <!-- Label -->
-        <rect class="relation-label-bg"
-              x=${midX - 18} y=${midY - 8}
-              width="36" height="16"
-              stroke=${color} stroke-width="0.5" />
-        <text class="relation-label"
-              x=${midX} y=${midY + 4}
-              text-anchor="middle"
-              fill=${color}>
-          ${label}
+        <path class="rel-hit" d=${d}
+              @click=${() => this._onRelClick(rel)}
+              @mouseenter=${() => { this._hoveredRel = rel.id; }}
+              @mouseleave=${() => { this._hoveredRel = null; }} />
+        <path class="rel-path ${isHovered ? 'hovered' : ''} ${isSelected ? 'selected' : ''}"
+              d=${d} stroke=${color}
+              marker-start="url(#arr-${rel.joinType})"
+              marker-end="url(#arr-${rel.joinType})" />
+
+        <!-- Cardinality labels near endpoints -->
+        <text class="rel-card" x=${x1 + (x1 < x2 ? 14 : -14)} y=${y1 - 6} fill=${color} text-anchor=${x1 < x2 ? 'start' : 'end'}>${card.start}</text>
+        <text class="rel-card" x=${x2 + (x2 > x1 ? -14 : 14)} y=${y2 - 6} fill=${color} text-anchor=${x2 > x1 ? 'end' : 'start'}>${card.end}</text>
+
+        <!-- Center label -->
+        <rect class="rel-label-bg" x=${midX - 40} y=${midY - 9} width="80" height="18"
+              fill="#fff" stroke=${color} stroke-width="0.5" />
+        <text class="rel-label" x=${midX} y=${midY + 3} text-anchor="middle" fill=${color}>
+          ${rel.joinType.toUpperCase()} ${joinLabel.length < 20 ? joinLabel : ''}
         </text>
       </g>
     `;
     }
-    _renderArrowDefs() {
+    // ─── Link Drag Preview ────────────────────────────────────────
+    _renderLinkPreview() {
+        if (!this._linkDrag)
+            return nothing;
+        const { fromX, fromY, currentX, currentY } = this._linkDrag;
         return svg `
-      <defs>
-        ${Object.entries(JOIN_COLORS).map(([type, color]) => svg `
-            <marker id="arrow-${type}" viewBox="0 0 10 6"
-                    refX="9" refY="3"
-                    markerWidth="8" markerHeight="6"
-                    orient="auto-start-reverse">
-              <path d="M 0 0 L 10 3 L 0 6 z" fill=${color} />
-            </marker>
-          `)}
-      </defs>
-    `;
-    }
-    render() {
-        if (this.dataSources.length === 0) {
-            return html `<div class="empty-state">No data sources to display.<br/>Add tables to see the ER diagram.</div>`;
-        }
-        return html `
-      <div class="er-container">
-        <svg width=${this._svgWidth} height=${this._svgHeight}
-             xmlns="http://www.w3.org/2000/svg">
-          ${this._renderArrowDefs()}
-
-          <!-- Relation lines (behind tables) -->
-          ${(this.relations || []).map(rel => this._renderRelationLine(rel))}
-
-          <!-- Table boxes -->
-          ${this._tables.map(table => this._renderTableBox(table))}
-        </svg>
-      </div>
+      <line class="link-preview" x1=${fromX} y1=${fromY} x2=${currentX} y2=${currentY}
+            marker-end="url(#arr-preview)" />
     `;
     }
 };
@@ -411,13 +432,22 @@ __decorate([
 ], ErDiagram.prototype, "_dragging", void 0);
 __decorate([
     state()
-], ErDiagram.prototype, "_hoveredRelation", void 0);
+], ErDiagram.prototype, "_linkDrag", void 0);
+__decorate([
+    state()
+], ErDiagram.prototype, "_hoveredRel", void 0);
+__decorate([
+    state()
+], ErDiagram.prototype, "_selectedRel", void 0);
+__decorate([
+    state()
+], ErDiagram.prototype, "_svgW", void 0);
 __decorate([
     state()
-], ErDiagram.prototype, "_svgWidth", void 0);
+], ErDiagram.prototype, "_svgH", void 0);
 __decorate([
     state()
-], ErDiagram.prototype, "_svgHeight", void 0);
+], ErDiagram.prototype, "_tool", void 0);
 ErDiagram = __decorate([
     customElement('zrd-er-diagram')
 ], ErDiagram);