angular-my-report 0.0.0-stage → 0.1.0

package/src/lib/ui/designer/canvas.component.ts

@@ -0,0 +1,281 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import type { Band, ReportElement } from '../../model/types';
+import { BAND_LABELS, FOOTER_TYPES, contentWidth, createElement, createTable, orderedBands } from '../../model/defaults';
+import { createColumn } from '../../engine/table';
+import { createBarcode, createChart, createCrosstab, createQr, type FieldRef } from '../../model/factories';
+import { DesignerStore } from '../designer.store';
+import { ElementBoxComponent } from './element-box.component';
+
+export const DRAG_MIME = 'application/x-report-item';
+export type DragPayload =
+  | { kind: 'text' | 'line' | 'rect' | 'image' }
+  | { kind: 'table' | 'chart' | 'barcode' | 'qrcode' | 'crosstab'; fields: FieldRef[] }
+  | { kind: 'field'; field: string; type?: string; template?: string };
+
+const BAND_TITLE_H = 20;
+type DragMode = 'move' | 'e' | 's' | 'se';
+
+/** Builds the element a toolbox/field drop creates, adjusted for the target band. */
+export function elementFromPayload(p: DragPayload, band: Band, x: number, y: number, width: number): ReportElement {
+  if (p.kind === 'table') return createTable(x, y, Math.max(120, width - x), p.fields);
+  if (p.kind === 'chart') return createChart(x, y, Math.max(160, width - x), p.fields);
+  if (p.kind === 'crosstab') return createCrosstab(x, y, Math.max(200, width - x), p.fields);
+  if (p.kind === 'barcode') return createBarcode(x, y, p.fields);
+  if (p.kind === 'qrcode') return createQr(x, y, p.fields);
+  if (p.kind !== 'field') return createElement(p.kind, x, y);
+  if (p.template) return createElement('field', x, y, { text: p.template });
+  const numeric = p.type === 'number';
+  const inFooter = FOOTER_TYPES.includes(band.type);
+  return createElement('field', x, y, {
+    text: numeric && inFooter ? `{sum(${p.field})}` : `{${p.field}}`,
+    format: p.type === 'date' ? { kind: 'date' } : numeric && inFooter ? { kind: 'number', decimals: 2 } : {},
+    style: numeric ? { align: 'right' } : {},
+  });
+}
+
+@Component({
+  selector: 'rpt-canvas',
+  standalone: true,
+  imports: [ElementBoxComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="canvas-scroll" (pointerdown)="onBackgroundDown($event)">
+      <div class="canvas-sizer" [style.width.px]="width() * store.zoom() + 2" [style.height.px]="totalHeight() * store.zoom() + 2">
+        <div class="canvas" [style.width.px]="width()" [style.transform]="'scale(' + store.zoom() + ')'">
+          @for (band of bands(); track band.id) {
+            <div class="band">
+              <div
+                class="band-title band-{{ band.type }}"
+                [class.selected]="isBandSelected(band)"
+                [style.height.px]="titleHeight"
+                (pointerdown)="store.select({ elementIds: [], bandId: band.id })"
+              >
+                {{ labels[band.type] }}
+                @if (groupField(band); as g) {
+                  <span class="band-group">: {{ g }}</span>
+                }
+              </div>
+              <div
+                class="band-body"
+                [attr.data-band-id]="band.id"
+                [style.height.px]="band.height"
+                [style.width.px]="width()"
+                (dragover)="onDragOver($event)"
+                (drop)="onDrop($event, band)"
+                (pointerdown)="onBodyDown($event, band)"
+              >
+                @for (el of band.elements; track el.id) {
+                  <rpt-element
+                    [el]="el"
+                    [content]="el.text"
+                    [design]="true"
+                    class="design-el kind-{{ el.kind }}"
+                    [class.selected]="isSelected(el)"
+                    [attr.title]="el.text || null"
+                    (pointerdown)="onElementDown($event, el, band)"
+                  >
+                    @if (isSelected(el) && store.selection().elementIds.length === 1) {
+                      <div class="handle handle-e" (pointerdown)="onHandleDown($event, el, band, 'e')"></div>
+                      @if (el.kind !== 'table') {
+                        <div class="handle handle-s" (pointerdown)="onHandleDown($event, el, band, 's')"></div>
+                        <div class="handle handle-se" (pointerdown)="onHandleDown($event, el, band, 'se')"></div>
+                      }
+                    }
+                  </rpt-element>
+                }
+              </div>
+              <div class="band-resizer" title="Drag to resize band" (pointerdown)="startBandResize($event, band)"></div>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class CanvasComponent {
+  protected readonly store = inject(DesignerStore);
+  protected readonly labels = BAND_LABELS;
+  protected readonly titleHeight = BAND_TITLE_H;
+
+  protected readonly width = computed(() => contentWidth(this.store.report().page));
+  protected readonly bands = computed(() => orderedBands(this.store.report()).filter((b) => b.visible));
+  protected readonly totalHeight = computed(() => this.bands().reduce((h, b) => h + b.height + BAND_TITLE_H + 6, 0));
+
+  protected isSelected(el: ReportElement): boolean {
+    return this.store.selection().elementIds.includes(el.id);
+  }
+
+  protected isBandSelected(band: Band): boolean {
+    const s = this.store.selection();
+    return s.bandId === band.id && s.elementIds.length === 0;
+  }
+
+  protected groupField(band: Band): string | null {
+    if (!band.groupId) return null;
+    const g = this.store.report().groups.find((x) => x.id === band.groupId);
+    return g ? g.field || '(no field)' : null;
+  }
+
+  protected onBackgroundDown(e: PointerEvent): void {
+    if (e.target === e.currentTarget) this.store.select({ elementIds: [], bandId: null });
+  }
+
+  protected onBodyDown(e: PointerEvent, band: Band): void {
+    if (e.target === e.currentTarget) this.store.select({ elementIds: [], bandId: band.id });
+  }
+
+  protected onDragOver(e: DragEvent): void {
+    if (e.dataTransfer?.types.includes(DRAG_MIME)) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+    }
+  }
+
+  protected onDrop(e: DragEvent, band: Band): void {
+    const raw = e.dataTransfer?.getData(DRAG_MIME);
+    if (!raw) return;
+    e.preventDefault();
+    const store = this.store;
+    const zoom = store.zoom();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const px = (e.clientX - rect.left) / zoom;
+    const py = (e.clientY - rect.top) / zoom;
+    const payload: DragPayload = JSON.parse(raw);
+
+    // A field dropped onto a table adds a column to it.
+    const target = band.elements.find((t) => t.kind === 'table' && px >= t.x && px <= t.x + t.w && py >= t.y && py <= t.y + t.h);
+    if (target && payload.kind === 'field') {
+      store.update((r) => {
+        const t = r.bands.find((b) => b.id === band.id)!.elements.find((x) => x.id === target.id)!.table!;
+        const col = createColumn(payload.field, payload.type);
+        if (payload.template) Object.assign(col, { header: '', text: payload.template });
+        if (payload.type === 'number') col.footer = `{sum(${payload.field})}`;
+        t.columns.push(col);
+      });
+      store.select({ elementIds: [target.id], bandId: band.id });
+      return;
+    }
+
+    const width = this.width();
+    const el = elementFromPayload(payload, band, store.snapValue(px), store.snapValue(py), width);
+    el.x = Math.max(0, Math.min(el.x, width - el.w));
+    el.y = Math.max(0, Math.min(el.y, Math.max(0, band.height - el.h)));
+    store.update((r) => {
+      const b = r.bands.find((bb) => bb.id === band.id)!;
+      b.elements.push(el);
+      if (b.height < el.y + el.h) b.height = el.y + el.h;
+    });
+    store.select({ elementIds: [el.id], bandId: band.id });
+  }
+
+  protected startBandResize(e: PointerEvent, band: Band): void {
+    e.preventDefault();
+    e.stopPropagation();
+    const store = this.store;
+    const zoom = store.zoom();
+    const startY = e.clientY;
+    const startH = band.height;
+    store.checkpoint();
+    const move = (ev: PointerEvent) => {
+      const h = Math.max(0, store.snapValue(startH + (ev.clientY - startY) / zoom));
+      store.update((r) => {
+        r.bands.find((b) => b.id === band.id)!.height = h;
+      }, false);
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  }
+
+  protected onElementDown(e: PointerEvent, el: ReportElement, band: Band): void {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    const selected = this.isSelected(el);
+    let ids = this.store.selection().elementIds;
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      ids = selected ? ids.filter((i) => i !== el.id) : [...ids, el.id];
+      this.store.select({ elementIds: ids, bandId: band.id });
+      return;
+    }
+    if (!selected) {
+      ids = [el.id];
+      this.store.select({ elementIds: ids, bandId: band.id });
+    }
+    this.beginDrag(e, el, band, ids, 'move');
+  }
+
+  protected onHandleDown(e: PointerEvent, el: ReportElement, band: Band, mode: DragMode): void {
+    e.stopPropagation();
+    this.beginDrag(e, el, band, [el.id], mode);
+  }
+
+  private beginDrag(e: PointerEvent, el: ReportElement, band: Band, ids: string[], mode: DragMode): void {
+    const store = this.store;
+    const zoom = store.zoom();
+    const width = this.width();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const targets = band.elements.filter((x) => (mode === 'move' ? ids.includes(x.id) : x.id === el.id)).map((x) => ({ ...x }));
+    const sourceBody = (e.currentTarget as HTMLElement).closest('.band-body') as HTMLElement;
+    let moved = false;
+
+    const move = (ev: PointerEvent) => {
+      const dx = (ev.clientX - startX) / zoom;
+      const dy = (ev.clientY - startY) / zoom;
+      if (!moved) {
+        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) return;
+        moved = true;
+        store.checkpoint();
+      }
+      store.update((r) => {
+        const b = r.bands.find((bb) => bb.id === band.id)!;
+        for (const s of targets) {
+          const t = b.elements.find((x) => x.id === s.id);
+          if (!t) continue;
+          if (mode === 'move') {
+            t.x = Math.max(0, Math.min(store.snapValue(s.x + dx), width - t.w));
+            t.y = store.snapValue(s.y + dy);
+          } else {
+            if (mode !== 's') t.w = Math.max(4, Math.min(store.snapValue(s.w + dx), width - t.x));
+            if (mode !== 'e') t.h = Math.max(2, store.snapValue(s.h + dy));
+          }
+        }
+      }, false);
+    };
+
+    const up = (ev: PointerEvent) => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      if (!moved || mode !== 'move') return;
+      // Dropped over another band? Move the elements there, keeping their on-screen position.
+      const targetBody = document.elementsFromPoint(ev.clientX, ev.clientY).find((n) => n.classList.contains('band-body')) as
+        | HTMLElement
+        | undefined;
+      const targetId = targetBody?.dataset['bandId'];
+      const srcTop = sourceBody.getBoundingClientRect().top;
+      store.update((r) => {
+        const src = r.bands.find((b) => b.id === band.id)!;
+        const dst = targetId && targetId !== band.id ? r.bands.find((b) => b.id === targetId) : undefined;
+        for (const s of targets) {
+          const i = src.elements.findIndex((x) => x.id === s.id);
+          if (i < 0) continue;
+          const t = src.elements[i];
+          if (dst && targetBody) {
+            const dstTop = targetBody.getBoundingClientRect().top;
+            src.elements.splice(i, 1);
+            t.y = Math.max(0, Math.min(store.snapValue((srcTop + t.y * zoom - dstTop) / zoom), Math.max(0, dst.height - t.h)));
+            dst.elements.push(t);
+          } else {
+            t.y = Math.max(0, Math.min(t.y, Math.max(0, src.height - t.h)));
+          }
+        }
+      }, false);
+      if (targetId && targetId !== band.id) store.select({ elementIds: targets.map((t) => t.id), bandId: targetId });
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  }
+}

package/src/lib/ui/designer/data-source-dialog.component.ts

@@ -0,0 +1,201 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import type { DataSourceDef } from '../../model/types';
+import { buildODataUrl, detectDataSource, loadData, loadODataEntitySets, type LoadResult } from '../../engine/dataSources';
+import { DesignerStore } from '../designer.store';
+
+@Component({
+  selector: 'rpt-data-source-dialog',
+  standalone: true,
+  imports: [FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="modal-backdrop" (pointerdown)="onBackdropDown($event)">
+      <div class="modal">
+        <header>
+          <h2>Data source</h2>
+          <button class="link" (click)="closed.emit()">✕</button>
+        </header>
+        <div class="modal-body">
+          <label class="field">
+            URL — paste a JSON API, OData service or OData entity-set URL to configure everything automatically
+            <div class="inline">
+              <input
+                [(ngModel)]="ds.url"
+                (paste)="onPaste($event)"
+                (keydown.enter)="detect()"
+                placeholder="https://jsonplaceholder.typicode.com/posts  ·  https://services.odata.org/V4/Northwind/Northwind.svc/Orders"
+              />
+              <button [disabled]="detecting() || !ds.url.trim()" (click)="detect()">{{ detecting() ? 'Detecting…' : 'Detect' }}</button>
+            </div>
+            @if (detectMsg(); as m) {
+              <span [class.ok]="!m.error" [class.error]="m.error">{{ m.text }}</span>
+            }
+          </label>
+
+          <div class="tabs">
+            <span class="muted tabs-label">Type:</span>
+            <button [class.on]="ds.type === 'json'" (click)="ds.type = 'json'">JSON</button>
+            <button [class.on]="ds.type === 'odata'" (click)="ds.type = 'odata'">OData</button>
+          </div>
+
+          @if (ds.type === 'json') {
+            <label class="field">
+              Or paste JSON (used instead of the URL when filled)
+              <textarea rows="6" [(ngModel)]="ds.inline" placeholder='[{"Name":"A","Amount":10}]'></textarea>
+            </label>
+            <label class="field">
+              Array path (optional)
+              <input [(ngModel)]="ds.dataPath" placeholder="e.g. data.items — blank = auto-detect" />
+            </label>
+          } @else {
+            <label class="field">
+              Entity set (leave empty if the URL already points to one)
+              <div class="inline">
+                <input list="entity-sets" [(ngModel)]="ds.entitySet" placeholder="e.g. Orders" />
+                <button [disabled]="!ds.url.trim()" (click)="fetchSets()">Load entity sets</button>
+              </div>
+              @if (setsMsg()) {
+                <span class="muted">{{ setsMsg() }}</span>
+              }
+              <datalist id="entity-sets">
+                @for (s of sets(); track s) {
+                  <option [value]="s"></option>
+                }
+              </datalist>
+            </label>
+            <div class="grid2">
+              <label class="field">$select <input [(ngModel)]="ds.select" placeholder="OrderID,ShipCountry,Freight" /></label>
+              <label class="field">$filter <input [(ngModel)]="ds.filter" placeholder="Freight gt 50" /></label>
+              <label class="field">$orderby <input [(ngModel)]="ds.orderby" placeholder="OrderDate desc" /></label>
+              <label class="field">$expand <input [(ngModel)]="ds.expand" placeholder="Customer" /></label>
+              <label class="field">$top <input type="number" min="1" [(ngModel)]="ds.top" /></label>
+              <label class="field">Max rows (paging cap) <input type="number" min="1" [(ngModel)]="ds.maxRows" /></label>
+            </div>
+            <div class="muted url-preview">{{ odataUrl() }}</div>
+          }
+
+          <label class="field">
+            Request headers (one per line)
+            <textarea rows="2" [(ngModel)]="ds.headers" placeholder="Authorization: Bearer …"></textarea>
+          </label>
+
+          <div class="test-area">
+            <button [disabled]="busy()" (click)="runTest()">{{ busy() ? 'Testing…' : 'Test connection' }}</button>
+            @if (error()) {
+              <div class="error">{{ error() }}</div>
+            }
+            @if (result(); as res) {
+              <div class="ok">{{ res.rows.length }} rows · fields: {{ fieldSummary(res) }}</div>
+              @if (res.warning) {
+                <div class="error">{{ res.warning }}</div>
+              }
+            }
+          </div>
+          <p class="hint">The browser fetches the data directly, so the API must allow CORS from this page.</p>
+        </div>
+        <footer>
+          <button (click)="closed.emit()">Cancel</button>
+          <button class="primary" (click)="apply()">Apply</button>
+        </footer>
+      </div>
+    </div>
+  `,
+})
+export class DataSourceDialogComponent {
+  private readonly store = inject(DesignerStore);
+  readonly closed = output<void>();
+
+  /** Working copy, edited with two-way binding and applied on "Apply". */
+  protected ds: DataSourceDef = structuredClone(this.store.report().dataSource);
+  protected readonly busy = signal(false);
+  protected readonly result = signal<LoadResult | null>(null);
+  protected readonly error = signal('');
+  protected readonly sets = signal<string[]>([]);
+  protected readonly setsMsg = signal('');
+
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  /**
+   * Closes when clicking outside the dialog. Must return nothing: an Angular event handler that
+   * returns `false` calls preventDefault(), which would stop clicks from focusing the inputs.
+   */
+  protected onBackdropDown(e: PointerEvent): void {
+    if (e.target === e.currentTarget) this.closed.emit();
+  }
+  protected readonly detecting = signal(false);
+  protected readonly detectMsg = signal<{ text: string; error: boolean } | null>(null);
+
+  /** Pasting a URL into the URL field configures the source straight away. */
+  protected onPaste(e: ClipboardEvent): void {
+    const text = e.clipboardData?.getData('text').trim() ?? '';
+    if (!/^(https?:\/\/|\/)\S+$/i.test(text)) return;
+    e.preventDefault();
+    this.ds = { ...this.ds, url: text };
+    this.detect();
+  }
+
+  /** Fetches the URL, decides JSON vs OData, fills in the whole form and tests it. */
+  protected async detect(): Promise<void> {
+    const url = this.ds.url.trim();
+    if (!url || this.detecting()) return;
+    this.detecting.set(true);
+    this.detectMsg.set(null);
+    this.result.set(null);
+    this.error.set('');
+    try {
+      const { dataSource, note } = await detectDataSource(url, this.ds.headers);
+      this.ds = dataSource;
+      this.cdr.markForCheck();
+      this.detectMsg.set({ text: note, error: false });
+      if (dataSource.type === 'odata' && dataSource.entitySet) this.fetchSets();
+      await this.runTest();
+    } catch (e) {
+      this.detectMsg.set({ text: String((e as Error).message ?? e), error: true });
+    } finally {
+      this.detecting.set(false);
+    }
+  }
+
+  protected odataUrl(): string {
+    return buildODataUrl(this.normalized());
+  }
+
+  protected fieldSummary(res: LoadResult): string {
+    return res.fields.map((f) => `${f.name} (${f.type})`).join(', ');
+  }
+
+  private normalized(): DataSourceDef {
+    return { ...this.ds, top: this.ds.top ? Number(this.ds.top) : null, maxRows: Number(this.ds.maxRows) || 5000 };
+  }
+
+  protected async runTest(): Promise<void> {
+    this.busy.set(true);
+    this.error.set('');
+    this.result.set(null);
+    try {
+      this.result.set(await loadData(this.normalized()));
+    } catch (e) {
+      this.error.set(String((e as Error).message ?? e));
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  protected async fetchSets(): Promise<void> {
+    this.setsMsg.set('Loading…');
+    try {
+      const list = await loadODataEntitySets(this.ds.url, this.ds.headers);
+      this.sets.set(list);
+      this.setsMsg.set(list.length ? '' : 'No entity sets found');
+    } catch (e) {
+      this.setsMsg.set(String((e as Error).message ?? e));
+    }
+  }
+
+  protected apply(): void {
+    const ds = this.normalized();
+    this.store.update((r) => (r.dataSource = ds));
+    this.closed.emit();
+  }
+}

package/src/lib/ui/designer/element-box.component.ts

@@ -0,0 +1,138 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { renderTemplate, type Row } from '../../engine/expressions';
+import { crosstabAsTable } from '../../engine/crosstab';
+import { DesignerStore } from '../designer.store';
+import { BarcodeViewComponent, ChartViewComponent, QrViewComponent } from './graphics.components';
+import { SafeImagePipe } from './safe-image.pipe';
+import type { ReportElement } from '../../model/types';
+import { LINE_HEIGHT } from '../../engine/measure';
+import { css } from '../css';
+import { TableViewComponent, designTableData, type TableRenderData } from './table-view.component';
+
+const JUSTIFY = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
+const ALIGN_ITEMS = { top: 'flex-start', middle: 'center', bottom: 'flex-end' } as const;
+
+/** Draws one report element. Used by both the designer canvas and the preview. */
+@Component({
+  selector: 'rpt-element',
+  standalone: true,
+  imports: [TableViewComponent, ChartViewComponent, BarcodeViewComponent, QrViewComponent, SafeImagePipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '[style]': 'hostStyle()' },
+  template: `
+    @switch (el().kind) {
+      @case ('table') {
+        @if (el().table) {
+          <rpt-table-view [el]="el()" [data]="tableData() ?? designData()" />
+        }
+      }
+      @case ('crosstab') {
+        @if (crosstab(); as x) {
+          <rpt-table-view [el]="x.table" [data]="tableData() ?? x.render" />
+        }
+      }
+      @case ('chart') {
+        <rpt-chart-view [el]="el()" [rows]="chartRows()" />
+      }
+      @case ('barcode') {
+        <rpt-barcode-view [el]="el()" [value]="codeValue()" />
+      }
+      @case ('qrcode') {
+        <rpt-qr-view [el]="el()" [value]="codeValue()" />
+      }
+      @case ('line') {
+        <div [style]="lineStyle()"></div>
+      }
+      @case ('rect') {}
+      @case ('image') {
+        @if (content()) {
+          <img [src]="content() | safeImage" alt="" draggable="false" style="width:100%;height:100%;display:block" [style.object-fit]="el().imageFit ?? 'contain'" />
+        } @else if (design()) {
+          <div class="image-placeholder">Image</div>
+        }
+      }
+      @default {
+        <span style="width:100%">{{ content() }}</span>
+      }
+    }
+    <ng-content />
+  `,
+})
+export class ElementBoxComponent {
+  readonly el = input.required<ReportElement>();
+  readonly content = input('');
+  readonly design = input(false);
+  /** Overrides for grown/shifted elements in the preview. */
+  readonly top = input<number | undefined>(undefined);
+  readonly height = input<number | undefined>(undefined);
+  /** Rows to draw for a table; omitted in the designer (templates are shown). */
+  readonly tableData = input<TableRenderData | undefined>(undefined);
+
+  /** Rows for a chart / cross table in the preview (its band's scope). */
+  readonly rows = input<Row[] | undefined>(undefined);
+
+  private readonly store = inject(DesignerStore);
+  readonly designData = computed(() => designTableData(this.el()));
+
+  /** In the designer, charts and cross tables show the loaded data. */
+  readonly chartRows = computed(() => this.rows() ?? this.store.data().rows);
+  readonly crosstab = computed(() => (this.el().crosstab ? crosstabAsTable(this.el(), this.chartRows()) : null));
+
+  /** Barcode/QR value: the evaluated text in the preview; in the designer, evaluated on the first data row. */
+  readonly codeValue = computed(() => {
+    if (!this.design()) return this.content();
+    const rows = this.store.data().rows;
+    const ctx = { row: rows[0], rows, allRows: rows, pageRows: rows, rowNumber: 1, pageNumber: 1, totalPages: 1, reportName: this.store.report().name, params: this.store.params() };
+    return renderTemplate(this.el().text, ctx, this.el().format);
+  });
+
+  readonly hostStyle = computed(() => {
+    const el = this.el();
+    const s = el.style;
+    const box = {
+      position: 'absolute',
+      left: el.x,
+      top: this.top() ?? el.y,
+      width: el.w,
+      height: this.height() ?? el.h,
+      boxSizing: 'border-box',
+    };
+    if (el.kind === 'rect') {
+      return css({ ...box, display: 'block', border: `${s.borderWidth}px ${el.dash ?? 'solid'} ${s.borderColor}`, background: s.background });
+    }
+    if (el.kind !== 'text' && el.kind !== 'field') return css({ ...box, display: 'block' });
+    return css({
+      ...box,
+      display: 'flex',
+      justifyContent: JUSTIFY[s.align],
+      alignItems: ALIGN_ITEMS[s.vAlign],
+      textAlign: s.align,
+      fontFamily: s.fontFamily,
+      fontSize: s.fontSize,
+      fontWeight: s.bold ? 700 : 400,
+      fontStyle: s.italic ? 'italic' : 'normal',
+      textDecoration: s.underline ? 'underline' : 'none',
+      color: s.color,
+      background: s.background,
+      padding: s.padding,
+      overflow: 'hidden',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      lineHeight: LINE_HEIGHT,
+      border: s.borderWidth > 0 ? `${s.borderWidth}px solid ${s.borderColor}` : undefined,
+    });
+  });
+
+  readonly lineStyle = computed(() => {
+    const el = this.el();
+    const t = Math.max(1, el.style.borderWidth);
+    const horizontal = el.w >= el.h;
+    const stroke = `${t}px ${el.dash ?? 'solid'} ${el.style.borderColor}`;
+    return css({
+      position: 'absolute',
+      ...(horizontal
+        ? { left: 0, right: 0, top: `calc(50% - ${t / 2}px)`, height: 0, borderTop: stroke }
+        : { top: 0, bottom: 0, left: `calc(50% - ${t / 2}px)`, width: 0, borderLeft: stroke }),
+    });
+  });
+}