angular-my-report 0.0.0-stage → 0.1.0

package/src/lib/ui/designer/graphics.components.ts

@@ -0,0 +1,140 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import type { ReportElement } from '../../model/types';
+import type { Row } from '../../engine/expressions';
+import { layoutChart } from '../../engine/chartLayout';
+import { encodeBarcode } from '../../engine/barcode';
+import { encodeQr } from '../../engine/qr';
+
+/** Chart element: SVG drawn from the engine's layout primitives. Marks carry a hover tooltip. */
+@Component({
+  selector: 'rpt-chart-view',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'position:absolute;inset:0;display:block' },
+  template: `
+    <svg [attr.width]="el().w" [attr.height]="el().h" [attr.viewBox]="'0 0 ' + el().w + ' ' + el().h" [attr.font-family]="el().style.fontFamily" style="display:block;overflow:visible">
+      @for (p of prims(); track $index) {
+        @switch (p.t) {
+          @case ('path') {
+            <path [attr.d]="p.d" [attr.fill]="p.fill" [attr.stroke]="p.stroke ?? null" [attr.stroke-width]="p.sw ?? null" [attr.fill-opacity]="p.opacity ?? null">
+              @if (p.title) { <title>{{ p.title }}</title> }
+            </path>
+          }
+          @case ('line') {
+            <line [attr.x1]="p.x1" [attr.y1]="p.y1" [attr.x2]="p.x2" [attr.y2]="p.y2" [attr.stroke]="p.stroke" [attr.stroke-width]="p.sw" shape-rendering="crispEdges" />
+          }
+          @case ('poly') {
+            <polyline [attr.points]="p.points" fill="none" [attr.stroke]="p.stroke" [attr.stroke-width]="p.sw" stroke-linejoin="round" stroke-linecap="round" />
+          }
+          @case ('circle') {
+            <circle [attr.cx]="p.cx" [attr.cy]="p.cy" [attr.r]="p.r" [attr.fill]="p.fill" [attr.stroke]="p.stroke" [attr.stroke-width]="p.sw">
+              @if (p.title) { <title>{{ p.title }}</title> }
+            </circle>
+          }
+          @case ('text') {
+            <text [attr.x]="p.x" [attr.y]="p.y" [attr.text-anchor]="p.anchor" [attr.font-size]="p.size" [attr.font-weight]="p.weight" [attr.fill]="p.fill">{{ p.text }}</text>
+          }
+        }
+      }
+    </svg>
+  `,
+})
+export class ChartViewComponent {
+  readonly el = input.required<ReportElement>();
+  readonly rows = input<Row[]>([]);
+  readonly prims = computed(() => {
+    const el = this.el();
+    return el.chart ? layoutChart(el.chart, this.rows(), el.w, el.h, el.style.fontSize, el.style.color) : [];
+  });
+}
+
+/** Barcode element (Code 128 / EAN-13): bars as one crisp SVG path, optional human-readable text. */
+@Component({
+  selector: 'rpt-barcode-view',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'position:absolute;inset:0;display:block' },
+  template: `
+    <svg [attr.width]="el().w" [attr.height]="el().h" style="display:block">
+      @if (model(); as m) {
+        @if (m.error) {
+          <text [attr.x]="el().w / 2" [attr.y]="el().h / 2" text-anchor="middle" font-size="11" fill="#c4372f">{{ m.error }}</text>
+        } @else {
+          <path [attr.d]="m.d" [attr.fill]="color()" shape-rendering="crispEdges" />
+          @if (m.showText) {
+            <text [attr.x]="el().w / 2" [attr.y]="el().h - 2" text-anchor="middle" [attr.font-size]="el().style.fontSize" [attr.font-family]="el().style.fontFamily" [attr.fill]="el().style.color">{{ m.text }}</text>
+          }
+        }
+      }
+    </svg>
+  `,
+})
+export class BarcodeViewComponent {
+  readonly el = input.required<ReportElement>();
+  readonly value = input('');
+  readonly color = computed(() => this.el().barcode?.color || '#000000');
+  readonly model = computed(() => {
+    const el = this.el();
+    const spec = el.barcode ?? { symbology: 'code128' as const, showText: true, color: '#000' };
+    const res = encodeBarcode(spec.symbology, this.value());
+    if (res.error) return { error: res.error, d: '', text: '', showText: false };
+    const quiet = 10; // quiet zone in modules, each side
+    const total = res.modules.length + quiet * 2;
+    const mw = el.w / total;
+    const textH = spec.showText ? el.style.fontSize + 4 : 0;
+    const barH = Math.max(4, el.h - textH);
+    let d = '';
+    let i = 0;
+    while (i < res.modules.length) {
+      if (res.modules[i] !== '1') {
+        i++;
+        continue;
+      }
+      let j = i;
+      while (j < res.modules.length && res.modules[j] === '1') j++;
+      const x = +((quiet + i) * mw).toFixed(3);
+      const bw = +((j - i) * mw).toFixed(3);
+      d += `M${x},0h${bw}v${barH}h${-bw}Z`;
+      i = j;
+    }
+    return { error: '', d, text: res.text, showText: spec.showText };
+  });
+}
+
+/** QR code element: dark modules as one SVG path, centred, with a 4-module quiet zone. */
+@Component({
+  selector: 'rpt-qr-view',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'position:absolute;inset:0;display:block' },
+  template: `
+    <svg [attr.width]="el().w" [attr.height]="el().h" style="display:block">
+      @if (model(); as m) {
+        @if (m.error) {
+          <text [attr.x]="el().w / 2" [attr.y]="el().h / 2" text-anchor="middle" font-size="11" fill="#c4372f">{{ m.error }}</text>
+        } @else {
+          <path [attr.d]="m.d" [attr.fill]="el().qr?.color || '#000000'" shape-rendering="crispEdges" />
+        }
+      }
+    </svg>
+  `,
+})
+export class QrViewComponent {
+  readonly el = input.required<ReportElement>();
+  readonly value = input('');
+  readonly model = computed(() => {
+    const el = this.el();
+    const res = encodeQr(this.value(), el.qr?.errorCorrection ?? 'M');
+    if (res.error) return { error: res.error, d: '' };
+    const quiet = 4;
+    const cell = Math.min(el.w, el.h) / (res.size + quiet * 2);
+    const ox = (el.w - cell * res.size) / 2;
+    const oy = (el.h - cell * res.size) / 2;
+    const c3 = +cell.toFixed(3);
+    let d = '';
+    for (let r = 0; r < res.size; r++)
+      for (let c = 0; c < res.size; c++)
+        if (res.modules[r][c]) d += `M${+(ox + c * cell).toFixed(3)},${+(oy + r * cell).toFixed(3)}h${c3}v${c3}h${-c3}Z`;
+    return { error: '', d };
+  });
+}

package/src/lib/ui/designer/left-panel.component.ts

@@ -0,0 +1,189 @@
+import { ChangeDetectionStrategy, Component, computed, inject, output } from '@angular/core';
+import { contentWidth } from '../../model/defaults';
+import { DesignerStore } from '../designer.store';
+import { DRAG_MIME, elementFromPayload, type DragPayload } from './canvas.component';
+
+const TOOLS: { kind: 'text' | 'line' | 'rect' | 'image'; label: string; icon: string }[] = [
+  { kind: 'text', label: 'Label', icon: 'A' },
+  { kind: 'line', label: 'Line', icon: '―' },
+  { kind: 'rect', label: 'Rectangle', icon: '▭' },
+  { kind: 'image', label: 'Image', icon: '🖼' },
+];
+
+type DataToolKind = 'table' | 'chart' | 'crosstab' | 'barcode' | 'qrcode';
+const DATA_TOOLS: { kind: DataToolKind; label: string; icon: string; hint: string }[] = [
+  { kind: 'chart', label: 'Chart', icon: '📊', hint: 'Bar, line, area, pie or doughnut chart over the rows of its band' },
+  { kind: 'crosstab', label: 'Cross table', icon: '⊞', hint: 'Pivot: rows × columns of a value, with totals' },
+  { kind: 'barcode', label: 'Barcode', icon: '║', hint: 'Code 128 or EAN-13; value can be a field like {OrderID}' },
+  { kind: 'qrcode', label: 'QR code', icon: '▣', hint: 'QR code; value can contain fields' },
+];
+
+const SPECIALS: { label: string; template: string }[] = [
+  { label: 'Page N of M', template: 'Page {PageNumber} of {TotalPages}' },
+  { label: 'Page number', template: '{PageNumber}' },
+  { label: 'Current date/time', template: '{Now}' },
+  { label: 'Row number', template: '{RowNumber}' },
+  { label: 'Report name', template: '{ReportName}' },
+  { label: 'Record count', template: '{count()}' },
+];
+
+const TYPE_ICON: Record<string, string> = { number: '#', string: 'Ab', date: '📅', boolean: '✓', object: '{}' };
+
+@Component({
+  selector: 'rpt-left-panel',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <aside class="panel left-panel">
+      <section>
+        <h3>Toolbox</h3>
+        <div class="toolbox">
+          <div
+            class="tool"
+            draggable="true"
+            title="Self-contained table: lists the rows of its band (all rows in Report Header/Footer, group rows in group bands)"
+            (dragstart)="dragStart($event, dataPayload('table'))"
+            (click)="add(dataPayload('table'))"
+          >
+            <span class="tool-icon">▦</span>Table
+          </div>
+          <div class="tool" title="Column titles in the header band, one field per column in Detail" (click)="openBandedTable.emit()">
+            <span class="tool-icon">☰</span>Header/Detail
+          </div>
+          @for (t of dataTools; track t.kind) {
+            <div class="tool" draggable="true" [title]="t.hint" (dragstart)="dragStart($event, dataPayload(t.kind))" (click)="add(dataPayload(t.kind))">
+              <span class="tool-icon">{{ t.icon }}</span>{{ t.label }}
+            </div>
+          }
+          @for (t of tools; track t.kind) {
+            <div class="tool" draggable="true" (dragstart)="dragStart($event, { kind: t.kind })" (click)="add({ kind: t.kind })">
+              <span class="tool-icon">{{ t.icon }}</span>{{ t.label }}
+            </div>
+          }
+        </div>
+      </section>
+
+      <section class="grow">
+        <h3>
+          Data
+          <button class="link" (click)="openDataSource.emit()">Configure…</button>
+        </h3>
+        <div class="ds-summary">
+          {{ ds().type === 'odata' ? 'OData' : 'JSON' }}:
+          <span class="muted">{{ dsLabel() }}</span>
+          @if (ds().entitySet) {
+            <span class="muted"> / {{ ds().entitySet }}</span>
+          }
+        </div>
+        <div class="ds-status {{ data().status }}">
+          @switch (data().status) {
+            @case ('loading') { Loading… }
+            @case ('ready') { {{ data().rows.length }} rows, {{ data().fields.length }} fields }
+            @case ('error') { {{ data().error }} }
+            @default { No data source configured }
+          }
+          @if (data().status !== 'idle') {
+            <button class="link" (click)="store.reloadData()">Refresh</button>
+          }
+        </div>
+        <div class="field-list">
+          @for (f of data().fields; track f.name) {
+            <div
+              class="field-item"
+              draggable="true"
+              title="Drag onto a band or table (double-click adds to selected band). Numbers dropped in footers become sum()."
+              (dragstart)="dragStart($event, { kind: 'field', field: f.name, type: f.type })"
+              (dblclick)="add({ kind: 'field', field: f.name, type: f.type })"
+            >
+              <span class="field-type">{{ typeIcon[f.type] }}</span>{{ f.name }}
+            </div>
+          }
+        </div>
+        @if (data().docFields?.length) {
+          <h4>Document fields</h4>
+          <div class="field-list">
+            @for (f of data().docFields; track f.name) {
+              <div
+                class="field-item"
+                draggable="true"
+                title="A value of the whole document (not per row), e.g. a receipt number or shop name"
+                (dragstart)="dragStart($event, { kind: 'field', field: f.name, type: f.type })"
+                (dblclick)="add({ kind: 'field', field: f.name, type: f.type })"
+              >
+                <span class="field-type">{{ typeIcon[f.type] }}</span>{{ f.name.slice(5) }}
+              </div>
+            }
+          </div>
+        }
+        @if (params().length) {
+          <h4>Parameters</h4>
+          <div class="field-list">
+            @for (p of params(); track p.name) {
+              <div
+                class="field-item special"
+                draggable="true"
+                (dragstart)="dragStart($event, { kind: 'field', field: '', template: '{@' + p.name + '}' })"
+                (dblclick)="add({ kind: 'field', field: '', template: '{@' + p.name + '}' })"
+              >
+                <span class="field-type">&#64;</span>{{ p.label || p.name }}
+              </div>
+            }
+          </div>
+        }
+        <h4>Special fields</h4>
+        <div class="field-list">
+          @for (s of specials; track s.label) {
+            <div
+              class="field-item special"
+              draggable="true"
+              (dragstart)="dragStart($event, { kind: 'field', field: '', template: s.template })"
+              (dblclick)="add({ kind: 'field', field: '', template: s.template })"
+            >
+              <span class="field-type">ƒ</span>{{ s.label }}
+            </div>
+          }
+        </div>
+      </section>
+    </aside>
+  `,
+})
+export class LeftPanelComponent {
+  protected readonly store = inject(DesignerStore);
+  readonly openDataSource = output<void>();
+  readonly openBandedTable = output<void>();
+  protected readonly dataTools = DATA_TOOLS;
+
+  protected readonly tools = TOOLS;
+  protected readonly specials = SPECIALS;
+  protected readonly typeIcon = TYPE_ICON;
+  protected readonly data = this.store.data;
+  protected readonly params = computed(() => (this.store.report().parameters ?? []).filter((p) => p.name));
+  protected readonly ds = computed(() => this.store.report().dataSource);
+  protected readonly dsLabel = computed(() => {
+    const ds = this.ds();
+    return ds.type === 'json' && ds.inline.trim() ? '(pasted JSON)' : ds.url || '(not set)';
+  });
+  /** Toolbox items that are pre-configured from the current data fields. */
+  protected dataPayload(kind: DataToolKind): DragPayload {
+    return { kind, fields: this.data().fields.filter((f) => f.type !== 'object') };
+  }
+
+  protected dragStart(e: DragEvent, payload: DragPayload): void {
+    e.dataTransfer?.setData(DRAG_MIME, JSON.stringify(payload));
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy';
+  }
+
+  /** Click / double-click: add to the selected band (or Detail) at the top-left. */
+  protected add(payload: DragPayload): void {
+    const report = this.store.report();
+    const band =
+      report.bands.find((b) => b.id === this.store.selection().bandId) ?? report.bands.find((b) => b.type === 'detail')!;
+    const el = elementFromPayload(payload, band, 0, 0, contentWidth(report.page));
+    this.store.update((r) => {
+      const b = r.bands.find((bb) => bb.id === band.id)!;
+      b.elements.push(el);
+      b.height = Math.max(b.height, el.h);
+    });
+    this.store.select({ elementIds: [el.id], bandId: band.id });
+  }
+}

package/src/lib/ui/designer/safe-image.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, type SafeUrl } from '@angular/platform-browser';
+
+/**
+ * Image source for <img [src]>. Angular's sanitizer rejects some data: images (e.g. SVG); uploads
+ * are embedded as data:image/… URLs, so those are trusted here. An <img> never runs scripts.
+ */
+@Pipe({ name: 'safeImage', standalone: true })
+export class SafeImagePipe implements PipeTransform {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  transform(url: string | null | undefined): SafeUrl | string {
+    if (!url) return '';
+    return /^data:image\//i.test(url) ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
+  }
+}

package/src/lib/ui/designer/table-view.component.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import type { ReportElement } from '../../model/types';
+import { columnWidths, hasGrid, type TableRenderData } from '../../engine/table';
+import { LINE_HEIGHT } from '../../engine/measure';
+import { css } from '../css';
+
+export type { TableRenderData };
+
+/** Data for drawing a table in the designer: the column templates themselves. */
+export function designTableData(el: ReportElement): TableRenderData {
+  const t = el.table!;
+  return {
+    header: t.showHeader ? t.columns.map((c) => c.header) : null,
+    headerHeight: t.headerHeight,
+    rows: [{ cells: t.columns.map((c) => c.text), height: t.rowHeight, index: 0 }],
+    footer: t.showFooter ? t.columns.map((c) => c.footer) : null,
+    footerHeight: t.rowHeight,
+  };
+}
+
+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 the inside of a table element (fills its parent box). Shared by designer and preview. */
+@Component({
+  selector: 'rpt-table-view',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '[style]': 'hostStyle()' },
+  template: `
+    @if (data().header; as header) {
+      <div [style]="headerRowStyle()">
+        @for (h of header; track $index) {
+          <div [style]="cellStyles()[$index]"><span style="width:100%">{{ h }}</span></div>
+        }
+      </div>
+    }
+    @for (r of data().rows; track r.index) {
+      <div [style]="rowStyle(r.index, r.height)">
+        @for (c of r.cells; track $index) {
+          <div [style]="cellStyles()[$index]"><span style="width:100%">{{ c }}</span></div>
+        }
+      </div>
+    }
+    @if (data().footer; as footer) {
+      <div [style]="footerRowStyle()">
+        @for (f of footer; track $index) {
+          <div [style]="cellStyles()[$index]"><span style="width:100%">{{ f }}</span></div>
+        }
+      </div>
+    }
+  `,
+})
+export class TableViewComponent {
+  readonly el = input.required<ReportElement>();
+  readonly data = input.required<TableRenderData>();
+
+  private readonly line = computed(() => {
+    const t = this.el().table!;
+    return hasGrid(t) ? `1px solid ${t.gridColor}` : undefined;
+  });
+
+  readonly hostStyle = computed(() => {
+    const s = this.el().style;
+    return css({
+      position: 'absolute',
+      inset: 0,
+      display: 'block',
+      borderTop: this.line(),
+      borderLeft: this.line(),
+      fontFamily: s.fontFamily,
+      fontSize: s.fontSize,
+      fontWeight: s.bold ? 700 : 400,
+      fontStyle: s.italic ? 'italic' : 'normal',
+      color: s.color,
+      overflow: 'hidden',
+    });
+  });
+
+  readonly cellStyles = computed(() => {
+    const el = this.el();
+    const t = el.table!;
+    const widths = columnWidths(el);
+    return t.columns.map((c, i) =>
+      css({
+        width: widths[i],
+        flex: 'none',
+        display: 'flex',
+        justifyContent: JUSTIFY[c.align],
+        alignItems: ALIGN_ITEMS[el.style.vAlign],
+        textAlign: c.align,
+        padding: el.style.padding,
+        borderRight: this.line(),
+        borderBottom: this.line(),
+        overflow: 'hidden',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: LINE_HEIGHT,
+        boxSizing: 'border-box',
+      }),
+    );
+  });
+
+  readonly headerRowStyle = computed(() => {
+    const t = this.el().table!;
+    return css({ display: 'flex', height: this.data().headerHeight, background: t.headerBackground, color: t.headerColor, fontWeight: 700 });
+  });
+
+  readonly footerRowStyle = computed(() => {
+    const t = this.el().table!;
+    const border = hasGrid(t) ? t.gridColor : this.el().style.color;
+    return css({ display: 'flex', height: this.data().footerHeight, fontWeight: 700, borderTop: `2px solid ${border}`, boxSizing: 'border-box' });
+  });
+
+  rowStyle(index: number, height: number): string {
+    const t = this.el().table!;
+    const bg = index % 2 === 1 && t.stripeBackground !== 'transparent' ? t.stripeBackground : this.el().style.background;
+    return css({ display: 'flex', height, background: bg });
+  }
+}