@zentto/report-designer 1.5.5 → 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;
@@ -1988,6 +1996,27 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
                 this._pasteClipboard();
             }
         }
+        // Arrow keys to move selected elements (hold Ctrl for 0.5mm precision)
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) && this._selectedElementIds.size > 0 && this._selectedBandId) {
+            e.preventDefault();
+            const step = e.ctrlKey ? 0.5 : (this.gridSnap || 1);
+            const band = this._layout.bands.find(b => b.id === this._selectedBandId);
+            if (band) {
+                for (const el of band.elements) {
+                    if (!this._selectedElementIds.has(el.id))
+                        continue;
+                    if (e.key === 'ArrowLeft')
+                        el.x = Math.max(0, el.x - step);
+                    if (e.key === 'ArrowRight')
+                        el.x += step;
+                    if (e.key === 'ArrowUp')
+                        el.y = Math.max(0, el.y - step);
+                    if (e.key === 'ArrowDown')
+                        el.y += step;
+                }
+                this._commitChange();
+            }
+        }
         // Escape to deselect or close context menu
         if (e.key === 'Escape') {
             if (this._contextMenu) {
@@ -2299,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>
 
@@ -2940,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);
@@ -2983,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>
@@ -2991,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))}
@@ -3011,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);
@@ -3052,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' : ''}"
@@ -3128,32 +3278,68 @@ REGLAS:
         if (!this._contextMenu)
             return nothing;
         const { x, y, elementId, bandId } = this._contextMenu;
+        const el = this._layout.bands.find(b => b.id === bandId)?.elements.find(e => e.id === elementId);
+        const elType = el?.type || '';
         return html `
       <div class="overlay-dismiss" @click=${() => { this._contextMenu = null; this.requestUpdate(); }}></div>
       <div class="context-menu" style="left:${x}px;top:${y}px;">
+        ${el ? html `
+          <div class="context-menu-item" style="font-weight:600;color:var(--zrd-accent);pointer-events:none;font-size:11px;">
+            ${elType.toUpperCase()} — ${el.id}
+          </div>
+          <div class="context-menu-sep"></div>
+        ` : nothing}
         <div class="context-menu-item" @click=${() => { this._copySelected(); this._contextMenu = null; this.requestUpdate(); }}>
-          Copy <span class="context-menu-shortcut">Ctrl+C</span>
+          Copiar <span class="context-menu-shortcut">Ctrl+C</span>
         </div>
         <div class="context-menu-item" @click=${() => { this._pasteClipboard(); this._contextMenu = null; this.requestUpdate(); }}>
-          Paste <span class="context-menu-shortcut">Ctrl+V</span>
+          Pegar <span class="context-menu-shortcut">Ctrl+V</span>
+        </div>
+        <div class="context-menu-item" @click=${() => {
+            if (el && bandId) {
+                const band = this._layout.bands.find(b => b.id === bandId);
+                if (band) {
+                    const clone = JSON.parse(JSON.stringify(el));
+                    clone.id = `${el.id}_dup_${this._idCounter++}`;
+                    clone.x += 2;
+                    clone.y += 2;
+                    band.elements.push(clone);
+                    this._selectedElementIds = new Set([clone.id]);
+                    this._commitChange();
+                }
+            }
+            this._contextMenu = null;
+        }}>
+          Duplicar <span class="context-menu-shortcut">Alt+Drag</span>
         </div>
         <div class="context-menu-sep"></div>
         <div class="context-menu-item" @click=${() => { this._changeZOrder(elementId, bandId, 'front'); this._contextMenu = null; }}>
-          Bring to Front
+          Traer al frente
         </div>
         <div class="context-menu-item" @click=${() => { this._changeZOrder(elementId, bandId, 'forward'); this._contextMenu = null; }}>
-          Bring Forward
+          Adelante
         </div>
         <div class="context-menu-item" @click=${() => { this._changeZOrder(elementId, bandId, 'backward'); this._contextMenu = null; }}>
-          Send Backward
+          Atras
         </div>
         <div class="context-menu-item" @click=${() => { this._changeZOrder(elementId, bandId, 'back'); this._contextMenu = null; }}>
-          Send to Back
+          Enviar al fondo
         </div>
+        ${el ? html `
+          <div class="context-menu-sep"></div>
+          <div class="context-menu-item" @click=${() => {
+            this._selectedElementIds = new Set([elementId]);
+            this._selectedBandId = bandId;
+            this._contextMenu = null;
+            this.requestUpdate();
+        }}>
+            Propiedades...
+          </div>
+        ` : nothing}
         <div class="context-menu-sep"></div>
         <div class="context-menu-item" style="color:var(--zrd-danger);"
              @click=${() => { this._deleteSelectedElements(); this._contextMenu = null; }}>
-          Delete <span class="context-menu-shortcut">Del</span>
+          Eliminar <span class="context-menu-shortcut">Del</span>
         </div>
       </div>
     `;
@@ -3721,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);
@@ -3769,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);