@peter.prib/renderengine 0.15.1 → 0.15.3

package/src/kernelExpr.js

@@ -194,13 +194,25 @@ function _parsePrimary(s) {
   throw new Error(`parseKernelExpr: unexpected '${t.value}' at position ${t.pos}`);
 }
 
-// ── JavaScript emission ──────────────────────────────────────────────────────
+// ── JavaScript and WGSL emission ─────────────────────────────────────────────
 
-function _emitJs(node) {
+function _wgslNumber(v) {
+  if (!Number.isFinite(v)) return '0.0';
+  const str = `${v}`;
+  return str.includes('.') || str.includes('e') || str.includes('E') ? str : `${str}.0`;
+}
+
+/**
+ * Emit the AST as a JavaScript scalar expression.
+ * @param {object} node
+ * @param {(name: string) => string} [ref]
+ * @returns {string}
+ */
+export function emitJs(node, ref = (name) => name) {
   const go = (n) => {
     switch (n.kind) {
       case 'literal': return `${n.value}`;
-      case 'param':   return n.name;
+      case 'param':   return ref(n.name);
       case 'neg':     return `(-${go(n.operand)})`;
       case 'not':     return `(${go(n.operand)} === 0 ? 1 : 0)`;
       case 'cond':    return `((${go(n.cond)}) !== 0 ? ${go(n.then)} : ${go(n.else)})`;
@@ -216,12 +228,75 @@ function _emitJs(node) {
         const args = n.args.map(go).join(', ');
         return `${FN_NAMES[n.name]}(${args})`;
       }
-      default: throw new Error(`_emitJs: unknown node '${n.kind}'`);
+      default: throw new Error(`emitJs: unknown node '${n.kind}'`);
+    }
+  };
+  return go(node);
+}
+
+/**
+ * Emit the AST as a WGSL f32 scalar expression.
+ * Comparisons and booleans evaluate to 1.0 or 0.0 via select().
+ * @param {object} node
+ * @param {(name: string) => string} [ref]
+ * @returns {string}
+ */
+export function emitWgsl(node, ref = (name) => name) {
+  const go = (n) => {
+    switch (n.kind) {
+      case 'literal': return _wgslNumber(n.value);
+      case 'param':   return ref(n.name);
+      case 'neg':     return `(-${go(n.operand)})`;
+      case 'not':     return `select(0.0, 1.0, ${go(n.operand)} == 0.0)`;
+      case 'cond':    return `select(${go(n.else)}, ${go(n.then)}, (${go(n.cond)}) != 0.0)`;
+      case 'binary': {
+        const l = go(n.left), r = go(n.right);
+        if (n.op === '&&')
+          return `select(0.0, 1.0, ((${l}) != 0.0) && ((${r}) != 0.0))`;
+        if (n.op === '||')
+          return `select(0.0, 1.0, ((${l}) != 0.0) || ((${r}) != 0.0))`;
+        if (['<', '<=', '>', '>=', '==', '!='].includes(n.op))
+          return `select(0.0, 1.0, ${l} ${n.op} ${r})`;
+        if (n.op === '%')
+          return `(${l} - ${r} * trunc(${l} / ${r}))`;
+        return `(${l} ${n.op} ${r})`;
+      }
+      case 'call': {
+        const args = n.args.map(go).join(', ');
+        return `${n.name}(${args})`;
+      }
+      default: throw new Error(`emitWgsl: unknown node '${n.kind}'`);
     }
   };
   return go(node);
 }
 
+/**
+ * Generate a complete WGSL compute shader executing the kernel across arrays.
+ * @param {object} node
+ * @param {string[]} params
+ * @param {object} [opts]
+ * @param {number} [opts.workgroupSize=64]
+ * @returns {string}
+ */
+export function wgslKernelModule(node, params, { workgroupSize = 64 } = {}) {
+  const bindings = params.map((p, i) =>
+    `@group(0) @binding(${i}) var<storage, read> ${p}_in : array<f32>;`).join('\n');
+  const outBinding = params.length;
+
+  return `${bindings}
+@group(0) @binding(${outBinding}) var<storage, read_write> out_buf : array<f32>;
+@group(0) @binding(${outBinding + 1}) var<uniform> count : vec4<u32>;
+
+@compute @workgroup_size(${workgroupSize})
+fn main(@builtin(global_invocation_id) gid : vec3<u32>) {
+  let i = gid.x;
+  if (i >= count.x) { return; }
+  out_buf[i] = ${emitWgsl(node, (name) => `${name}_in[i]`)};
+}
+`;
+}
+
 /**
  * Compile a formula to a callable JavaScript function — `fn(...paramValues)
  * -> number`. Built with `new Function` from an expression THIS module
@@ -236,7 +311,7 @@ function _emitJs(node) {
 export function compileFormula(source, params) {
   const { ast } = parseKernelExpr(source, params);
   const __clamp = (x, lo, hi) => Math.min(Math.max(x, lo), hi);
-  const body = `return ${_emitJs(ast)};`;
+  const body = `return ${emitJs(ast)};`;
   // eslint-disable-next-line no-new-func
   const fn = new Function('__clamp', ...params, body);
   return (...values) => fn(__clamp, ...values);

package/src/workspace/parts/ArchimateEditorPart.js

@@ -11,8 +11,8 @@ const DEFAULT_FEATURES = Object.freeze({
 });
 
 /**
- * ArchimateEditorPart — the ArchiMate modeller as a workbench part: toolbar,
- * model tree, one tab per open view and the canvas, filling its pane.
+ * ArchimateEditorPart — legacy GraphDiagram-based ArchiMate editor part.
+ * @deprecated Use ArchimateCanvasPart for ArchiMate editing.
  *
  * Spec (JSON): `elements`, `relationships`, `views` (as ArchimateModel takes
  * them), `features` (toolbar controls, see DEFAULT_FEATURES), `analysis`

package/src/workspace/parts/DiagramEditorPart.js

@@ -1,131 +1,146 @@
-import { render } from '../dom.js';
-import { EditorShell } from '../EditorShell.js';
-import { EditorPart } from './EditorPart.js';
-import { DiagramEditor } from '../../charting/DiagramEditor.js';
-import { MenuBar } from '../../charting/MenuBar.js';
-import { DiagramModel } from '../../charting/diagramModel/index.js';
-import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
-import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
-import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-/**
- * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
- * palette, one tab per diagram and the canvas, over a DiagramModel.
- *
- * Spec (JSON): `templateType` (palette category), `tabOrientation`
- * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
- * (localStorage key for the tool-level line style; `null` keeps it in memory).
- *
- * Line styles cascade line → diagram (`view.edgeStyle`) → model
- * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
- * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
- * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
- * BUILTIN_PARTS: register it explicitly.
- */
-export class DiagramEditorPart extends EditorPart {
-    static type = 'diagram-editor';
-    static viewNoun = 'diagram';
-
-    constructor(spec = {}) {
-        super(spec);
-        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
-        // The editor is rebuilt with the canvas on every render, which follows every model change.
-        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
-    }
-
-    createModel(spec) {
-        const store = spec.toolStyleKey === null ? null
-            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
-        this.toolEdgeStyle = store?.load({}) ?? {};
-        const model = new DiagramModel({
-            name: spec.name ?? '',
-            templateType: spec.templateType ?? 'generic',
-            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
-            historyOptions: { onChange: () => store?.save(this.toolEdgeStyle) },
-        });
-        model.createView(spec.diagramTitle ?? 'Diagram 1');
-        return model;
-    }
-
-    render() {
-        const model = this.model;
-        const view = model.currentView;
-        const doc = this.document;
-        const canvasId = `diagram-canvas-${this.id}`;
-
-        const canvas = doc.createElementNS(SVG_NS, 'svg');
-        canvas.id = canvasId;
-        canvas.setAttribute('viewBox', '0 0 800 600');
-        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
-        const elements = doc.createElementNS(SVG_NS, 'g');
-        elements.id = 'elements';
-        canvas.appendChild(elements);
-
-        const tabs = this.viewTabs({ orientation: this.tabOrientation });
-
-        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
-        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
-        palette.classList.add('ws-diagram-palette');
-        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
-        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
-        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
-
-        // The editor is bound to the view's own maps and history: nothing to save back on switch.
-        const previous = this.editor;
-        previous?.dispose();
-        this.editor = new DiagramEditor({
-            diagramContainerId: canvasId,
-            model,
-            templateType: model.templateType,
-            onTemplateTypeChange: (type) => model.setTemplateType(type),
-            templates: view.templates,
-            edges: view.edges,
-            history: view.history,
-            arrangement: view.arrangement,
-            edgeStyleLevels: this.edgeStyleLevels(view),
-        });
-        if (previous) {
-            this.editor.showGrid = previous.showGrid;
-            this.editor.gridSize = previous.gridSize;
-            this.editor.showExportArea = previous.showExportArea;
-            this.editor.exportOptions = previous.exportOptions;
-        }
-        this.editor.initPaletteForDiagramType(palette, model.templateType);
-        this.menuBar?.dispose();
-        this.menuBar = new MenuBar({
-            container: menuBarEl,
-            editor: this.editor,
-            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
-        }).render();
-        this.editor.render();
-    }
-
-    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
-    edgeStyleLevels(view) {
-        return [
-            { key: 'view', label: 'Diagram', style: view.edgeStyle },
-            { key: 'model', label: 'Model', style: this.model.edgeStyle },
-            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
-        ];
-    }
-
-    /** A diagram's properties: name, documentation and its line-style defaults. */
-    showViewProperties(view) {
-        return new DiagramViewPropertiesDialog({
-            model: this.model,
-            view,
-            document: this.document,
-            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
-            // The editor shows the current diagram; a style change there needs a redraw.
-            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
-        }).open();
-    }
-
-    dispose() {
-        this.menuBar?.dispose();
-        this._unsubscribe();
-        super.dispose();
-    }
-}
+import { render } from '../dom.js';
+import { EditorShell } from '../EditorShell.js';
+import { EditorPart } from './EditorPart.js';
+import { DiagramEditor } from '../../charting/DiagramEditor.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { DiagramModel, DiagramJsonFileFormat } from '../../charting/diagramModel/index.js';
+import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
+import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
+import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
+ * palette, one tab per diagram and the canvas, over a DiagramModel.
+ *
+ * Spec (JSON): `templateType` (palette category), `tabOrientation`
+ * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
+ * (localStorage key for the tool-level line style; `null` keeps it in memory).
+ *
+ * Line styles cascade line → diagram (`view.edgeStyle`) → model
+ * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
+ * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
+ * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
+ * BUILTIN_PARTS: register it explicitly.
+ */
+export class DiagramEditorPart extends EditorPart {
+    static type = 'diagram-editor';
+    static viewNoun = 'diagram';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
+        // The editor is rebuilt with the canvas on every render, which follows every model change.
+        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
+    }
+
+    createModel(spec) {
+        if (spec.model instanceof DiagramModel) return spec.model;
+        const store = spec.toolStyleKey === null ? null
+            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
+        this.toolEdgeStyle = store?.load({}) ?? {};
+        const historyOptions = { onChange: () => store?.save(this.toolEdgeStyle) };
+        if (spec.views) {
+            return DiagramModel.fromJSON(spec, historyOptions);
+        }
+        const model = new DiagramModel({
+            name: spec.name ?? '',
+            templateType: spec.templateType ?? 'generic',
+            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
+            historyOptions,
+        });
+        model.createView(spec.diagramTitle ?? 'Diagram 1');
+        return model;
+    }
+
+    fileFormats() {
+        return this.spec.fileFormats ? [new DiagramJsonFileFormat()] : [];
+    }
+
+    saveFormat() {
+        return this.fileFormats()[0];
+    }
+
+    render() {
+        const model = this.model;
+        const view = model.currentView;
+        const doc = this.document;
+        const canvasId = `diagram-canvas-${this.id}`;
+
+        const canvas = doc.createElementNS(SVG_NS, 'svg');
+        canvas.id = canvasId;
+        canvas.setAttribute('viewBox', '0 0 800 600');
+        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
+        const elements = doc.createElementNS(SVG_NS, 'g');
+        elements.id = 'elements';
+        canvas.appendChild(elements);
+
+        const tabs = this.viewTabs({ orientation: this.tabOrientation });
+
+        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
+        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
+        palette.classList.add('ws-diagram-palette');
+        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
+        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
+        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+        // The editor is bound to the view's own maps and history: nothing to save back on switch.
+        const previous = this.editor;
+        previous?.dispose();
+        this.editor = new DiagramEditor({
+            diagramContainerId: canvasId,
+            model,
+            templateType: model.templateType,
+            onTemplateTypeChange: (type) => model.setTemplateType(type),
+            templates: view.templates,
+            edges: view.edges,
+            history: view.history,
+            arrangement: view.arrangement,
+            edgeStyleLevels: this.edgeStyleLevels(view),
+            viewSettings: () => view.viewSettings ?? {},
+        });
+        if (previous) {
+            this.editor.showGrid = previous.showGrid;
+            this.editor.gridSize = previous.gridSize;
+            this.editor.showExportArea = previous.showExportArea;
+            this.editor.exportOptions = previous.exportOptions;
+        }
+        this.editor.initPaletteForDiagramType(palette, model.templateType);
+        this.menuBar?.dispose();
+        this.menuBar = new MenuBar({
+            container: menuBarEl,
+            editor: this.editor,
+            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
+        }).render();
+        this.editor.render();
+    }
+
+    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
+    edgeStyleLevels(view) {
+        return [
+            { key: 'view', label: 'Diagram', style: view.edgeStyle },
+            { key: 'model', label: 'Model', style: this.model.edgeStyle },
+            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
+        ];
+    }
+
+    /** A diagram's properties: name, documentation and its line-style defaults. */
+    showViewProperties(view) {
+        return new DiagramViewPropertiesDialog({
+            model: this.model,
+            view,
+            document: this.document,
+            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
+            // The editor shows the current diagram; a style or appearance change there needs a redraw.
+            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
+            onSettingsChange: () => { if (view === this.model.currentView) this.editor?.render(); },
+        }).open();
+    }
+
+    dispose() {
+        this.menuBar?.dispose();
+        this._unsubscribe();
+        super.dispose();
+    }
+}

package/src/workspace/parts/ViewsPart.js

@@ -26,6 +26,8 @@ import { el } from '../dom.js';
 import { ChartPart } from './ChartPart.js';
 import { ListPart } from './ListPart.js';
 import { CHART_CATALOG } from '../../chartCatalog.js';
+import { ViewsReport } from '../../charting/report/ViewsReport.js';
+import { downloadBlob } from '../../exportImage.js';
 
 /** Chart categories drawn as small tiles across the top of a view rather than as full charts. */
 const TILE_CATEGORIES = new Set(['gauge']);
@@ -40,6 +42,7 @@ export class ViewsPart extends Part {
         super(spec);
         this.views = spec.views ?? [];
         this.allowOpen = spec.open !== false;
+        this.allowExport = spec.export !== false;
         this.empty = spec.empty ?? 'Open a file to show its views.';
         this.active = this.views[0]?.id ?? null;
         /** The chart and notes parts made for the views shown, torn down when they change. @private */
@@ -116,6 +119,27 @@ export class ViewsPart extends Part {
                         { tag: 'input', attrs: { type: 'file', accept: this.constructor.accept }, on: { change: (e) => this.openFile(e.target) } },
                     ]},
                     ...this.controls(),
+                    ...(this.allowExport ? [{
+                        tag: 'span',
+                        cls: 'ws-views-export-group',
+                        style: { display: 'inline-flex', alignItems: 'center', gap: '4px' },
+                        children: [
+                            { tag: 'button', attrs: { type: 'button' }, cls: 'ws-views-export-btn', text: 'Export report', on: { click: () => this.exportReport(this._exportFormatSelect?.value || 'html') } },
+                            {
+                                tag: 'select',
+                                cls: 'ws-views-export-format',
+                                style: { padding: '2px 4px', fontSize: '12px' },
+                                ref: (s) => { this._exportFormatSelect = s; },
+                                children: [
+                                    { tag: 'option', attrs: { value: 'html' }, text: 'HTML' },
+                                    { tag: 'option', attrs: { value: 'word' }, text: 'Word' },
+                                    { tag: 'option', attrs: { value: 'excel' }, text: 'Excel' },
+                                    { tag: 'option', attrs: { value: 'markdown' }, text: 'Markdown' },
+                                    { tag: 'option', attrs: { value: 'csv' }, text: 'CSV' },
+                                ],
+                            },
+                        ],
+                    }] : []),
                     { tag: 'span', cls: 'ws-views-message', style: { opacity: '0.75' }, ref: (n) => { this._message = n; } },
                 ],
             }));
@@ -193,4 +217,86 @@ export class ViewsPart extends Part {
             options: { ...chart.options, title: chart.title, data: chart.data },
         };
     }
+
+    /** Collect SVG markup of currently mounted/drawn charts. */
+    collectPictures() {
+        const pictures = {};
+        const activeView = this.views.find((v) => v.id === this.active);
+        if (!activeView) return pictures;
+        for (let i = 0; i < this._children.length; i++) {
+            const child = this._children[i];
+            if (child instanceof ChartPart) {
+                const svg = child.canvasHost?.querySelector?.('svg')?.outerHTML
+                    || child.engine?.renderer?.svg?.outerHTML
+                    || '';
+                if (svg) {
+                    pictures[`${activeView.id}:${i}`] = svg;
+                    const chart = activeView.charts?.[i];
+                    if (chart?.title) pictures[chart.title] = svg;
+                }
+            }
+        }
+        return pictures;
+    }
+
+    /** Create a ViewsReport for this part's views. */
+    createReport(options = {}) {
+        const pictures = { ...this.collectPictures(), ...(options.pictures || {}) };
+        const title = options.title || this.spec.title || (typeof this.document === 'object' ? (this.document.title || this.document.name || this.document.report?.config) : null) || 'Views Report';
+        return new ViewsReport(this.views, { title, pictures, ...options });
+    }
+
+    /** Export report to HTML, Word, Excel, Markdown or CSV, and trigger download when in DOM. */
+    exportReport(format = 'html', options = {}) {
+        const report = this.createReport(options);
+        const baseName = (report.title || 'views-report').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
+        let data = '';
+        let mimeType = 'text/plain';
+        let fileName = `${baseName}.txt`;
+
+        switch (format.toLowerCase()) {
+            case 'word':
+            case 'doc':
+            case 'docx':
+                data = report.toWord();
+                mimeType = 'application/msword';
+                fileName = `${baseName}.doc`;
+                break;
+            case 'excel':
+            case 'xls':
+            case 'xlsx':
+                data = report.toExcel();
+                mimeType = 'application/vnd.ms-excel';
+                fileName = `${baseName}.xml`;
+                break;
+            case 'csv':
+                data = report.toCsv(options.table || 'views');
+                mimeType = 'text/csv';
+                fileName = `${baseName}-${options.table || 'views'}.csv`;
+                break;
+            case 'markdown':
+            case 'md':
+                data = report.toMarkdown();
+                mimeType = 'text/markdown';
+                fileName = `${baseName}.md`;
+                break;
+            case 'html':
+            default:
+                data = report.toHtml(options);
+                mimeType = 'text/html';
+                fileName = `${baseName}.html`;
+                break;
+        }
+
+        const doc = this.container?.ownerDocument ?? globalThis.document;
+        const BlobClass = doc?.defaultView?.Blob ?? globalThis.Blob;
+        if (BlobClass && typeof downloadBlob === 'function') {
+            try {
+                downloadBlob(new BlobClass([data], { type: mimeType }), fileName);
+            } catch {
+                // Ignore download failure in headless / mock test environments
+            }
+        }
+        return { data, mimeType, fileName };
+    }
 }