@zentto/report-designer 1.5.6 → 1.6.0

package/dist/zentto-report-designer.js

@@ -7,7 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 // @zentto/report-designer — WYSIWYG report designer web component
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { createBlankLayout, toPx, PAGE_SIZES } from '@zentto/report-core';
+import { createBlankLayout, toPx, PAGE_SIZES, mergeStyles, styleToCss } from '@zentto/report-core';
+// Data panel components (tree, relation editor, ER diagram, DB connector)
+import './data-panel/data-source-tree.js';
+import './data-panel/relation-editor.js';
+import './data-panel/er-diagram.js';
+import './data-panel/db-connector.js';
 const BAND_LABELS = {
     reportHeader: 'Report Header',
     pageHeader: 'Page Header',
@@ -83,6 +88,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         this.sampleData = null;
         /** Available data sources for the field picker */
         this.dataSources = [];
+        /** Data panel provider for lazy-loading from DB (Studio integration) */
+        this.dataProvider = null;
+        /** DB connector provider — enables native database connections in the web component */
+        this.dbProvider = null;
         /** Grid snap size in layout units (mm) */
         this.gridSnap = 1;
         /** Show live preview panel */
@@ -109,6 +118,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         this._resize = null;
         this._bandResize = null;
         this._activePanel = 'toolbox';
+        this._relationEditorOpen = false;
+        this._editingRelation = null;
+        this._erOverlayOpen = false;
+        this._dbConnectorOpen = false;
         this._undoStack = [];
         this._redoStack = [];
         this._editingReportName = false;
@@ -2961,28 +2974,159 @@ REGLAS:
       `)}
     `;
     }
-    // ─── Data Panel ───────────────────────────────────────────────
+    // ─── Data Panel (Tree + Actions) ─────────────────────────────
     _renderDataPanel() {
-        if (this._layout.dataSources.length === 0) {
-            return html `<div style="color:var(--zrd-text-muted);padding:12px;">No data sources configured.</div>`;
-        }
         return html `
-      ${this._layout.dataSources.map(ds => html `
-        <div class="ds-name">${ds.name} (${ds.type})</div>
-        ${(ds.fields || []).map(f => html `
-          <div class="ds-field" draggable="true"
-               @dragstart=${(e) => {
-            e.dataTransfer?.setData('element-type', 'field');
-            e.dataTransfer?.setData('field-ds', ds.id);
-            e.dataTransfer?.setData('field-name', f.name);
-        }}>
-            <span class="ds-field-icon">F</span>
-            ${f.label || f.name} <span style="color:var(--zrd-text-muted)">(${f.type})</span>
+      <div style="padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--zrd-border,#e0e0e0);flex-shrink:0;">
+        ${this.dbProvider ? html `
+          <button style="flex:1;padding:5px 8px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-primary,#1976d2);"
+                  @click=${() => { this._dbConnectorOpen = true; }}>
+            \u{1F5C4} Connect DB
+          </button>
+        ` : nothing}
+        ${this._layout.dataSources.length > 0 ? html `
+          <button style="flex:1;padding:5px 8px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-text,#555);"
+                  @click=${() => { this._erOverlayOpen = true; }}>
+            \u{1F4CA} ER Diagram
+          </button>
+        ` : nothing}
+      </div>
+      <zrd-data-source-tree
+        .dataSources=${this._layout.dataSources}
+        .relations=${this._layout.relations || []}
+        .dataProvider=${this.dataProvider}
+        @tree-action=${(e) => this._onTreeAction(e.detail)}
+        @field-double-click=${(e) => this._onFieldDoubleClick(e.detail)}
+      ></zrd-data-source-tree>
+      ${this._renderOverlays()}
+    `;
+    }
+    // ─── Overlays (ER Diagram + DB Connector + Relation Editor) ──
+    _renderOverlays() {
+        return html `
+      ${this._erOverlayOpen ? this._renderErOverlay() : nothing}
+      <zrd-relation-editor
+        .dataSources=${this._layout.dataSources}
+        .relation=${this._editingRelation}
+        .open=${this._relationEditorOpen}
+        @relation-save=${(e) => this._onRelationSave(e.detail.relation)}
+        @relation-cancel=${() => { this._relationEditorOpen = false; this._editingRelation = null; }}
+      ></zrd-relation-editor>
+      <zrd-db-connector
+        .open=${this._dbConnectorOpen}
+        .provider=${this.dbProvider}
+        @datasources-ready=${(e) => this._onDatasourcesReady(e.detail)}
+        @connector-close=${() => { this._dbConnectorOpen = false; }}
+      ></zrd-db-connector>
+    `;
+    }
+    _renderErOverlay() {
+        return html `
+      <div style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);"
+           @click=${() => { this._erOverlayOpen = false; }}>
+        <div style="background:var(--zrd-panel-bg,#fff);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);width:85vw;height:80vh;display:flex;flex-direction:column;overflow:hidden;"
+             @click=${(e) => e.stopPropagation()}>
+          <div style="padding:16px 20px;border-bottom:1px solid var(--zrd-border,#eee);display:flex;justify-content:space-between;align-items:center;">
+            <span style="font-size:16px;font-weight:600;">ER Diagram</span>
+            <button style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--zrd-text-muted,#999);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;"
+                    @click=${() => { this._erOverlayOpen = false; }}>\u2715</button>
           </div>
-        `)}
-      `)}
+          <div style="flex:1;overflow:auto;">
+            <zrd-er-diagram
+              .dataSources=${this._layout.dataSources}
+              .relations=${this._layout.relations || []}
+              @relation-edit=${(e) => {
+            this._editingRelation = e.detail.relation;
+            this._relationEditorOpen = true;
+        }}
+              @table-focus=${() => {
+            this._erOverlayOpen = false;
+            this._activePanel = 'data';
+        }}
+            ></zrd-er-diagram>
+          </div>
+        </div>
+      </div>
     `;
     }
+    // ─── DB Connector Event Handler ────────────────────────────────
+    _onDatasourcesReady(detail) {
+        // Merge new data sources with existing ones
+        const existingIds = new Set(this._layout.dataSources.map(ds => ds.id));
+        const newSources = detail.dataSources.filter(ds => !existingIds.has(ds.id));
+        if (newSources.length > 0) {
+            this._layout = {
+                ...this._layout,
+                dataSources: [...this._layout.dataSources, ...newSources],
+            };
+            // Emit sample data for the host app to pick up
+            this.dispatchEvent(new CustomEvent('sample-data-update', {
+                detail: { sampleData: detail.sampleData },
+                bubbles: true, composed: true,
+            }));
+            this._commitChange();
+        }
+        this._dbConnectorOpen = false;
+    }
+    // ─── Tree/Relation Event Handlers ──────────────────────────────
+    _onTreeAction(detail) {
+        switch (detail.action) {
+            case 'create-relation':
+                this._editingRelation = null;
+                this._relationEditorOpen = true;
+                break;
+            case 'show-in-er':
+                this._erOverlayOpen = true;
+                break;
+            case 'add-all-fields': {
+                const dsId = detail.node.dataSourceId;
+                if (!dsId)
+                    return;
+                const ds = this._layout.dataSources.find(d => d.id === dsId);
+                if (!ds?.fields)
+                    return;
+                // Find or create detail band
+                let detailBand = this._layout.bands.find(b => b.type === 'detail');
+                if (!detailBand)
+                    return;
+                let xOffset = 2;
+                for (const f of ds.fields) {
+                    this._addElementToBand(detailBand.id, 'field', {
+                        dataSource: dsId,
+                        field: f.name,
+                        x: xOffset,
+                        y: 2,
+                    });
+                    xOffset += 35;
+                }
+                break;
+            }
+        }
+    }
+    _onFieldDoubleClick(detail) {
+        // Add field to detail band at next available position
+        const detailBand = this._layout.bands.find(b => b.type === 'detail');
+        if (!detailBand)
+            return;
+        this._addElementToBand(detailBand.id, 'field', {
+            dataSource: detail.dataSourceId,
+            field: detail.field.name,
+        });
+    }
+    _onRelationSave(relation) {
+        const relations = [...(this._layout.relations || [])];
+        const idx = relations.findIndex(r => r.id === relation.id);
+        if (idx >= 0) {
+            relations[idx] = relation;
+        }
+        else {
+            relations.push(relation);
+        }
+        this._layout = { ...this._layout, relations };
+        this._relationEditorOpen = false;
+        this._editingRelation = null;
+        this._commitChange();
+    }
     // ─── Band Rendering ───────────────────────────────────────────
     _renderBand(band) {
         const bandHeightPx = this._toPx(band.height);
@@ -3004,7 +3148,7 @@ REGLAS:
         }}>
           <div class="band-header-left">
             <span class="band-type-icon">${BAND_ICONS[band.type] || ''}</span>
-            <span>${BAND_LABELS[band.type] || band.type}</span>
+            <span>${this._getBandLabel(band)}</span>
           </div>
           <span style="font-weight:normal">${band.height}${this._unit}</span>
         </div>
@@ -3012,12 +3156,13 @@ REGLAS:
              style="height:${bandHeightPx}px;background-color:${bgColor};background-size:${gridSizePx}px ${gridSizePx}px;"
              @drop=${(e) => this._onBandDrop(e, band.id)}
              @dragover=${this._onBandDragOver}
-             @click=${(e) => {
-            e.stopPropagation();
-            this._selectedBandId = band.id;
-            this._selectedElementIds = new Set();
-            /* properties panel is always visible on right */
-            this.requestUpdate();
+             @mousedown=${(e) => {
+            // Only deselect if clicking directly on the band body (not on a child element)
+            if (e.target === e.currentTarget) {
+                this._selectedBandId = band.id;
+                this._selectedElementIds = new Set();
+                this.requestUpdate();
+            }
         }}>
           ${band.elements.length === 0 ? html `<div class="band-empty-hint">Drag elements from Toolbox or drop fields from Data panel</div>` : nothing}
           ${band.elements.map(el => this._renderDesignElement(el, band.id))}
@@ -3032,6 +3177,56 @@ REGLAS:
       </div>
     `;
     }
+    // ─── Sub-Band Helpers ──────────────────────────────────────────
+    /** Generate dynamic band label with sub-band suffix (A, B, C…) */
+    _getBandLabel(band) {
+        const base = BAND_LABELS[band.type] || band.type;
+        // Count how many bands of same type exist
+        const siblingsCount = this._layout.bands.filter(b => b.type === band.type && b.visible !== false).length;
+        if (siblingsCount <= 1 && (band.subBandIndex ?? 0) === 0)
+            return base;
+        const suffix = String.fromCharCode(65 + (band.subBandIndex ?? 0)); // A, B, C…
+        return `${base} ${suffix}`;
+    }
+    /** Add a sub-band of the same type below the selected band */
+    _addSubBand(bandId) {
+        const band = this._layout.bands.find(b => b.id === bandId);
+        if (!band)
+            return;
+        const siblings = this._layout.bands.filter(b => b.type === band.type);
+        const maxIdx = Math.max(...siblings.map(b => b.subBandIndex ?? 0));
+        const newBand = {
+            id: `band_${Date.now()}`,
+            type: band.type,
+            height: band.height,
+            elements: [],
+            subBandIndex: maxIdx + 1,
+            dataSource: band.dataSource,
+            groupField: band.groupField,
+        };
+        // Insert after the current band
+        const bands = [...this._layout.bands];
+        const idx = bands.findIndex(b => b.id === bandId);
+        bands.splice(idx + 1, 0, newBand);
+        this._layout = { ...this._layout, bands };
+        this._commitChange();
+    }
+    /** Remove a sub-band (only if there are multiple of same type) */
+    _removeSubBand(bandId) {
+        const band = this._layout.bands.find(b => b.id === bandId);
+        if (!band)
+            return;
+        const siblings = this._layout.bands.filter(b => b.type === band.type);
+        if (siblings.length <= 1)
+            return; // Don't remove the last one
+        this._layout = {
+            ...this._layout,
+            bands: this._layout.bands.filter(b => b.id !== bandId),
+        };
+        if (this._selectedBandId === bandId)
+            this._selectedBandId = null;
+        this._commitChange();
+    }
     // ─── Element Rendering (Canvas) ───────────────────────────────
     _renderDesignElement(el, bandId) {
         const isSingle = this._selectedElementIds.size === 1 && this._selectedElementIds.has(el.id);
@@ -3073,15 +3268,10 @@ REGLAS:
                 break;
             default: content = `[${el.type}]`;
         }
-        const elStyle = `
-      left:${xPx}px;top:${yPx}px;width:${wPx}px;height:${hPx}px;
-      font-size:${style.fontSize || 10}px;
-      font-weight:${style.fontWeight || 'normal'};
-      font-family:${style.fontFamily || 'inherit'};
-      color:${style.color || 'inherit'};
-      background:${style.backgroundColor || 'transparent'};
-      text-align:${style.textAlign || 'left'};
-    `;
+        // Merge default + element style (same as viewer/renderer for pixel-perfect)
+        const merged = mergeStyles(this._layout.defaultStyle, style);
+        const cssStyle = styleToCss(merged);
+        const elStyle = `left:${xPx}px;top:${yPx}px;width:${wPx}px;height:${hPx}px;${cssStyle}`;
         if (el.type === 'line') {
             return html `
         <div class="element ${isSingle ? 'selected' : ''} ${isMulti ? 'multi-selected' : ''}"
@@ -3778,6 +3968,12 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ZenttoReportDesigner.prototype, "dataSources", void 0);
+__decorate([
+    property({ attribute: false })
+], ZenttoReportDesigner.prototype, "dataProvider", void 0);
+__decorate([
+    property({ attribute: false })
+], ZenttoReportDesigner.prototype, "dbProvider", void 0);
 __decorate([
     property({ type: Number, attribute: 'grid-snap' })
 ], ZenttoReportDesigner.prototype, "gridSnap", void 0);
@@ -3826,6 +4022,18 @@ __decorate([
 __decorate([
     state()
 ], ZenttoReportDesigner.prototype, "_activePanel", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_relationEditorOpen", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_editingRelation", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_erOverlayOpen", void 0);
+__decorate([
+    state()
+], ZenttoReportDesigner.prototype, "_dbConnectorOpen", void 0);
 __decorate([
     state()
 ], ZenttoReportDesigner.prototype, "_undoStack", void 0);