@zentto/report-designer 1.5.6 → 1.5.7

package/dist/zentto-report-designer.js

@@ -7,7 +7,11 @@ 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)
+import './data-panel/data-source-tree.js';
+import './data-panel/relation-editor.js';
+import './data-panel/er-diagram.js';
 const BAND_LABELS = {
     reportHeader: 'Report Header',
     pageHeader: 'Page Header',
@@ -83,6 +87,8 @@ 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;
         /** Grid snap size in layout units (mm) */
         this.gridSnap = 1;
         /** Show live preview panel */
@@ -109,6 +115,8 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
         this._resize = null;
         this._bandResize = null;
         this._activePanel = 'toolbox';
+        this._relationEditorOpen = false;
+        this._editingRelation = null;
         this._undoStack = [];
         this._redoStack = [];
         this._editingReportName = false;
@@ -2320,10 +2328,13 @@ REGLAS:
                  @click=${() => this._activePanel = 'toolbox'}>Toolbox</div>
             <div class="panel-tab ${this._activePanel === 'data' ? 'active' : ''}"
                  @click=${() => this._activePanel = 'data'}>Data</div>
+            <div class="panel-tab ${this._activePanel === 'er' ? 'active' : ''}"
+                 @click=${() => this._activePanel = 'er'}>ER</div>
           </div>
           <div class="panel-content">
             ${this._activePanel === 'toolbox' ? this._renderToolbox() : null}
             ${this._activePanel === 'data' ? this._renderDataPanel() : null}
+            ${this._activePanel === 'er' ? this._renderErPanel() : null}
           </div>
         </div>
 
@@ -2961,28 +2972,100 @@ REGLAS:
       `)}
     `;
     }
-    // ─── Data Panel ───────────────────────────────────────────────
+    // ─── Data Panel (Tree) ────────────────────────────────────────
     _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>
-        `)}
-      `)}
+      <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>
+      <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>
+    `;
+    }
+    // ─── ER Diagram Panel ──────────────────────────────────────────
+    _renderErPanel() {
+        return html `
+      <zrd-er-diagram
+        .dataSources=${this._layout.dataSources}
+        .relations=${this._layout.relations || []}
+        @relation-edit=${(e) => {
+            this._editingRelation = e.detail.relation;
+            this._relationEditorOpen = true;
+        }}
+        @table-focus=${(e) => {
+            this._activePanel = 'data';
+        }}
+      ></zrd-er-diagram>
     `;
     }
+    // ─── Tree/Relation Event Handlers ──────────────────────────────
+    _onTreeAction(detail) {
+        switch (detail.action) {
+            case 'create-relation':
+                this._editingRelation = null;
+                this._relationEditorOpen = true;
+                break;
+            case 'show-in-er':
+                this._activePanel = 'er';
+                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 +3087,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 +3095,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 +3116,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 +3207,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 +3907,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ZenttoReportDesigner.prototype, "dataSources", void 0);
+__decorate([
+    property({ attribute: false })
+], ZenttoReportDesigner.prototype, "dataProvider", void 0);
 __decorate([
     property({ type: Number, attribute: 'grid-snap' })
 ], ZenttoReportDesigner.prototype, "gridSnap", void 0);
@@ -3826,6 +3958,12 @@ __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, "_undoStack", void 0);