angular-my-report 0.1.0 → 0.1.1

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

@@ -1,140 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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 });
-  }
-}