@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/Legend.js

@@ -0,0 +1,58 @@
+/**
+ * Legend — a simple vertical list of colored marker squares + labels.
+ *
+ * Supports both per-data-item legends (barChart) and per-series legends
+ * (lineChart/areaChart). Items with `hidden: true` render grayed out.
+ */
+export class Legend {
+    /**
+     * @param {object} options
+     * @param {Array<{label?:string, name?:string, color:string, hidden?:boolean, dataIndex?:number}>} options.items
+     * @param {number} options.x top-left x
+     * @param {number} options.y top-left y
+     * @param {number} [options.itemHeight=20]
+     * @param {number} [options.markerSize=10]
+     * @param {string} [options.fontSize='12px']
+     */
+    constructor({ items, x, y, itemHeight = 20, markerSize = 10, fontSize = '12px' }) {
+        this.items = items;
+        this.x = x;
+        this.y = y;
+        this.itemHeight = itemHeight;
+        this.markerSize = markerSize;
+        this.fontSize = fontSize;
+    }
+
+    /** Label text for an item — uses `label` or `name`. */
+    _label(item) {
+        return item.label ?? item.name ?? '';
+    }
+
+    /**
+     * Render the legend onto `renderer`.
+     * @param {*} renderer a renderer implementing .rect() and .text()
+     */
+    draw(renderer) {
+        let currentY = this.y;
+        for (const item of this.items) {
+            const hidden = !!item.hidden;
+            const color = hidden ? '#ccc' : item.color;
+            const textColor = hidden ? '#ccc' : '#333';
+            const attrs = {};
+            if (item.dataIndex !== undefined) {
+                attrs.legendItem = true;
+                attrs.dataIndex = item.dataIndex;
+            }
+
+            renderer.rect(this.x, currentY, this.markerSize, this.markerSize, color, null, attrs);
+            renderer.text(this._label(item), this.x + this.markerSize + 5, currentY + this.markerSize / 2, {
+                textAnchor: 'start',
+                verticalAlign: 'middle',
+                fontSize: this.fontSize,
+                fill: textColor,
+                ...attrs,
+            });
+            currentY += this.itemHeight;
+        }
+    }
+}

package/src/charting/MenuBar.js

@@ -0,0 +1,62 @@
+import { render as renderSpecs } from '../workspace/dom.js';
+
+/**
+ * MenuBar — renders a row of ToolbarItems (menus, buttons, selects, toggles).
+ *
+ * It has no controls of its own: each editor contributes its items through
+ * `menuBarItems()` (and a host may add more), so the template editor and the
+ * ArchiMate editor share one toolbar implementation. After an item acts the bar
+ * re-renders, and live items refresh whenever the editor re-renders.
+ */
+export class MenuBar {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} [options.container] - Element to render into
+     * @param {string} [options.menuBarId] - Or the id of that element
+     * @param {Array<ToolbarItem>} options.items
+     * @param {DiagramEditor} [options.editor] - Refresh live items when it renders
+     * @param {Document} [options.document]
+     */
+    constructor({ container = null, menuBarId = 'menu-bar', items = [], editor = null, document: doc = globalThis.document } = {}) {
+        this.doc = doc;
+        this.container = container;
+        this.menuBarId = menuBarId;
+        this.items = items;
+        this._nodes = [];
+        this._unsubscribe = editor?.onRendered?.(() => this.refresh()) ?? null;
+    }
+
+    render() {
+        const host = this.container ?? this.doc.getElementById(this.menuBarId);
+        if (!host) throw new Error(`MenuBar: no container (#${this.menuBarId})`);
+        this.container = host;
+        Object.assign(host.style, {
+            display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '8px', padding: '6px 12px',
+            background: '#f0f0f0', borderBottom: '1px solid #ccc', fontFamily: 'sans-serif', fontSize: '13px',
+        });
+        host.setAttribute('role', 'toolbar');
+        this._nodes = [];
+        renderSpecs(host, this.items.map((item) => {
+            const spec = item.spec(this);
+            const own = spec.ref;
+            return { ...spec, ref: (n) => { own?.(n); this._nodes.push([item, n]); } };
+        }), this.doc);
+        return this;
+    }
+
+    /** Run an item's action, then re-render so labels reflect the new state. */
+    run(action) {
+        const result = action();
+        if (this.container?.isConnected) this.render();
+        return result;
+    }
+
+    /** Update live items (e.g. the zoom %) without rebuilding the bar. */
+    refresh() {
+        for (const [item, node] of this._nodes) item.refresh(node);
+    }
+
+    dispose() {
+        this._unsubscribe?.();
+    }
+}

package/src/charting/ModelFileFormat.js

@@ -0,0 +1,115 @@
+import { pickFile } from './toolbar/pickFile.js';
+import { downloadBlob } from '../exportImage.js';
+
+/**
+ * ModelFileFormat — one file format a model is exported to and imported
+ * from. A subclass per format says what it is (`label`, `accept`,
+ * `fileName`, whether import reads bytes) and does the two conversions;
+ * `modelFileMenuItems` makes the File menu's Export and Import items from a
+ * list of them, so every editor offers the same formats the same way.
+ *
+ * `featureName` names the editor `features` flags that switch it on:
+ * `export<featureName>` and `import<featureName>`.
+ */
+export class ModelFileFormat {
+    constructor() {
+        if (new.target === ModelFileFormat) throw new TypeError('ModelFileFormat is abstract — subclass it');
+    }
+
+    /** The format's name in menus ('.archimate', 'CSV', ...). @abstract */
+    get label() { throw new Error(`${this.constructor.name} must define label`); }
+
+    /** The file chooser's filter ('.xml', '.archimate,.xml'). */
+    get accept() { return ''; }
+
+    /** The name an exported file is saved under. */
+    get fileName() { return 'model'; }
+
+    /** Whether files in this format can be imported (opened) as well as exported. A subclass that only exports says no. */
+    get imports() { return true; }
+
+    /** True when import takes the file's bytes (a zip archive), else its text. */
+    get readsBytes() { return false; }
+
+    /** The suffix of the editor feature flags for this format (see the class). */
+    get featureName() { return this.constructor.name.replace(/FileFormat$/, ''); }
+
+    /** Whether a file's contents (text or bytes, as `readsBytes` says) are in this format. Yes unless a subclass checks. */
+    recognizes(data) {
+        return true;
+    }
+
+    /** Whether a file name has one of this format's extensions (`accept`). */
+    acceptsName(name) {
+        const lower = String(name ?? '').toLowerCase();
+        return this.accept.split(',').map(e => e.trim().toLowerCase()).filter(Boolean).some(ext => lower.endsWith(ext));
+    }
+
+    /**
+     * The model as a file.
+     * @abstract
+     * @returns {{data: string|Uint8Array, mimeType: string}}
+     */
+    export(model) {
+        throw new Error(`${this.constructor.name} must implement export()`);
+    }
+
+    /**
+     * A new model from a file's text (or bytes, when `readsBytes`).
+     * @abstract
+     */
+    import(data) {
+        throw new Error(`${this.constructor.name} must implement import()`);
+    }
+}
+
+/**
+ * The File menu's Export and Import items for some formats, one group per
+ * format. Export downloads the file; Import asks for a file, reads it and
+ * hands the new model to `onImport` (a failure is reported, the model kept).
+ * @param {Array<ModelFileFormat>} formats
+ * @param {Object} options
+ * @param {() => Object} options.model - The model to export
+ * @param {(model) => void} options.onImport - Replace the model with an imported one
+ * @param {(format, direction: 'export'|'import') => boolean} [options.enabled] - Which items to offer (default all)
+ * @param {() => Document} [options.document]
+ * @param {(file: {data, mimeType}, fileName: string) => void} [options.download] - Default: downloadBlob
+ * @param {(accept: string) => Promise<File|null>} [options.chooseFile] - Default: pickFile
+ * @param {(message: string) => void} [options.report] - Default: alert
+ * @param {'export'|'import'} [options.only] - Only the Export items, or only the Import ones (no separators then)
+ * @returns {Array<Object>} menu items (with separators between formats)
+ */
+export function modelFileMenuItems(formats, {
+    model, onImport, enabled = () => true, document: doc = () => globalThis.document,
+    download = null, chooseFile = null, report = null, only = null,
+} = {}) {
+    const save = download ?? (({ data, mimeType }, fileName) => downloadBlob(new (doc().defaultView ?? globalThis).Blob([data], { type: mimeType }), fileName));
+    const choose = chooseFile ?? ((accept) => pickFile(accept, doc()));
+    const tell = report ?? ((message) => (doc().defaultView ?? globalThis).alert(message));
+    const groups = formats.map(format => [
+        only !== 'import' && enabled(format, 'export') && { label: only ? format.label : `Export ${format.label}`, action: () => save(format.export(model()), format.fileName) },
+        only !== 'export' && format.imports && enabled(format, 'import') && {
+            label: only ? `${format.label}…` : `Import ${format.label}…`,
+            action: () => importFile(format, { choose, onImport, report: tell }),
+        },
+    ].filter(Boolean)).filter(group => group.length);
+    if (only) return groups.flat();
+    return groups.flatMap((group, i) => (i ? [{ separator: true }, ...group] : group));
+}
+
+/**
+ * Ask for a file and import it in `format`; resolves to the new model, or
+ * null when no file was chosen or it could not be read (reported).
+ */
+export async function importFile(format, { choose, onImport, report }) {
+    const file = await choose(format.accept);
+    if (!file) return null;
+    try {
+        const model = format.import(format.readsBytes ? new Uint8Array(await file.arrayBuffer()) : await file.text());
+        onImport(model);
+        return model;
+    } catch (err) {
+        report(`Import failed: ${err.message}`);
+        return null;
+    }
+}

package/src/charting/OrbitControls.js

@@ -0,0 +1,77 @@
+/**
+ * OrbitControls — mouse/wheel controls for an orbit-camera 3D chart.
+ *
+ * The logic used to live inside RenderEngine._addOrbit3DListeners; it is
+ * collected here so 3D chart classes can attach their own camera controls
+ * without going through the engine façade.
+ */
+export class OrbitControls {
+    constructor(container, getCamera, redraw, resetView, isActive = () => true) {
+        this.container = container;
+        this.getCamera = getCamera;
+        this.redraw = redraw;
+        this.resetView = resetView;
+        this.isActive = isActive;
+        this._dragging = false;
+        this._last = { x: 0, y: 0 };
+
+        this.ROTATE_SPEED = 0.006;
+        this.PHI_LIMIT = 1.5; // radians — stay short of straight up/down to avoid gimbal flip
+        this.DISTANCE_MIN = 0.6;
+        this.DISTANCE_MAX = 8;
+
+        this._onMouseDown = this._onMouseDown.bind(this);
+        this._onMouseMove = this._onMouseMove.bind(this);
+        this._onMouseUp = this._onMouseUp.bind(this);
+        this._onWheel = this._onWheel.bind(this);
+        this._onDblClick = this._onDblClick.bind(this);
+
+        container.addEventListener('mousedown', this._onMouseDown);
+        container.addEventListener('mousemove', this._onMouseMove);
+        container.addEventListener('mouseup', this._onMouseUp);
+        container.addEventListener('mouseleave', this._onMouseUp);
+        container.addEventListener('wheel', this._onWheel, { passive: false });
+        container.addEventListener('dblclick', this._onDblClick);
+    }
+
+    _onMouseDown(event) {
+        const camera = this.getCamera();
+        if (!this.isActive() || !camera || event.button !== 0 || event.altKey) return;
+        event.preventDefault();
+        this._dragging = true;
+        this._last = { x: event.clientX, y: event.clientY };
+        this.container.style.cursor = 'grabbing';
+    }
+
+    _onMouseMove(event) {
+        const camera = this.getCamera();
+        if (!this.isActive() || !this._dragging || !camera) return;
+        const dx = event.clientX - this._last.x;
+        const dy = event.clientY - this._last.y;
+        this._last = { x: event.clientX, y: event.clientY };
+
+        camera.theta += dx * this.ROTATE_SPEED;
+        camera.phi = Math.min(this.PHI_LIMIT, Math.max(-this.PHI_LIMIT, camera.phi + dy * this.ROTATE_SPEED));
+        this.redraw?.();
+    }
+
+    _onMouseUp() {
+        if (!this._dragging) return;
+        this._dragging = false;
+        this.container.style.cursor = 'default';
+    }
+
+    _onWheel(event) {
+        const camera = this.getCamera();
+        if (!this.isActive() || !camera) return;
+        event.preventDefault();
+        const factor = event.deltaY > 0 ? 1.1 : 1 / 1.1;
+        camera.distance = Math.min(this.DISTANCE_MAX, Math.max(this.DISTANCE_MIN, camera.distance * factor));
+        this.redraw?.();
+    }
+
+    _onDblClick() {
+        if (!this.isActive()) return;
+        this.resetView?.();
+    }
+}

package/src/charting/Palette.js

@@ -0,0 +1,119 @@
+import { render } from '../workspace/dom.js';
+import { CreateTemplateCommand } from './DiagramEditorCommands.js';
+
+/**
+ * Palette — category picker plus a grid of draggable shapes.
+ *
+ * Previews are drawn by the templates themselves (Template#renderPreview), so a
+ * palette tile always matches what lands on the canvas.
+ */
+export class Palette {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container - Element the palette renders into (contents replaced)
+     * @param {TemplateCatalog} options.catalog - Shapes offered in the current category
+     * @param {DiagramEditor} options.editor - Editor receiving drops
+     * @param {Array<{group: string, types: Array<{key: string, name: string, description?: string}>}>} [options.categories]
+     *        Grouped categories for the picker; omit to hide the picker
+     * @param {string} [options.category] - Selected category key
+     * @param {(key: string) => void} [options.onCategoryChange]
+     */
+    constructor(options = {}) {
+        this.container = options.container;
+        this.catalog = options.catalog;
+        this.editor = options.editor;
+        this.categories = options.categories ?? [];
+        this.category = options.category ?? null;
+        this.onCategoryChange = options.onCategoryChange ?? (() => {});
+    }
+
+    render() {
+        if (!this.container) return;
+        const doc = this.container.ownerDocument;
+        render(this.container, [
+            this.categories.length ? this._pickerSpec() : '',
+            {
+                style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '6px', overflowY: 'auto', flex: '1 1 auto', alignContent: 'start' },
+                children: this.catalog.getAll().map(entry => this._tileSpec(entry, doc)),
+            },
+        ], doc);
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', gap: '8px', minHeight: '0' });
+    }
+
+    _pickerSpec() {
+        const selected = this.categories.flatMap(g => g.types).find(t => t.key === this.category);
+        return {
+            tag: 'select',
+            attrs: { 'aria-label': 'Diagram type', title: selected?.description },
+            style: { width: '100%', padding: '6px', fontSize: '12px', flex: '0 0 auto' },
+            on: { change: (e) => this.onCategoryChange(e.target.value) },
+            children: this.categories.map(({ group, types }) => ({
+                tag: 'optgroup',
+                attrs: { label: group },
+                children: types.map(t => ({
+                    tag: 'option',
+                    attrs: { value: t.key, selected: t.key === this.category, title: t.description },
+                    text: t.name,
+                })),
+            })),
+        };
+    }
+
+    _tileSpec(entry, doc) {
+        return {
+            attrs: { draggable: 'true', title: `Drag to add ${entry.name}` },
+            style: {
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
+                padding: '6px 4px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px',
+                cursor: 'grab', userSelect: 'none',
+            },
+            on: { dragstart: (e) => this._startDrag(e, entry) },
+            children: [
+                entry.factory('__preview', 0, 0).renderPreview(40, doc),
+                {
+                    text: entry.name,
+                    style: { fontSize: '11px', color: '#333', textAlign: 'center', lineHeight: '1.2', overflowWrap: 'anywhere' },
+                },
+            ],
+        };
+    }
+
+    _startDrag(e, entry) {
+        if (!e.dataTransfer) return;
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData('templateType', entry.type);
+    }
+
+    /**
+     * Create the dragged shape at a drop point given in SVG viewBox coordinates,
+     * snapping to the grid when it is shown.
+     */
+    handleDrop(e, x, y) {
+        const templateType = e.dataTransfer.getData('templateType');
+        if (!templateType) return false;
+
+        let snapX = x, snapY = y;
+        if (this.editor.showGrid && this.editor.gridSize) {
+            const gridSize = this.editor.gridSize;
+            snapX = Math.round(x / gridSize) * gridSize;
+            snapY = Math.round(y / gridSize) * gridSize;
+        }
+
+        const template = this.catalog.create(templateType, this._generateId(templateType), snapX, snapY);
+        if (!template) return false;
+
+        if (this.editor.history) {
+            this.editor.history.execute(new CreateTemplateCommand(this.editor, template));
+        } else {
+            this.editor.addTemplate(template);
+        }
+        this.editor.render();
+        return true;
+    }
+
+    _generateId(templateType) {
+        let counter = 1;
+        while (this.editor.getTemplate(`${templateType}_${counter}`)) counter++;
+        return `${templateType}_${counter}`;
+    }
+}

package/src/charting/PopupMenu.js

@@ -0,0 +1,117 @@
+import { el } from '../workspace/dom.js';
+
+/**
+ * PopupMenu — the one popup/context menu: a small menu at a screen position,
+ * closed by choosing an item or clicking elsewhere. One is open at a time.
+ * Editor menus, the graph engine's ContextMenu and the model tree's menus all
+ * render through it.
+ *
+ * Items: `{ label, action, danger?, checked?, disabled? }`,
+ * `{ label, items: [...] }` for a submenu, or `{ separator: true }`.
+ */
+export class PopupMenu {
+    static _open = null;
+
+    static show(x, y, items, doc = document) {
+        PopupMenu.close();
+        if (!items.length) return null;
+        const menu = el({
+            ...PopupMenu._panel(items, doc),
+            style: { ...PopupMenu._panelStyle, position: 'fixed', left: `${x}px`, top: `${y}px` },
+        }, doc);
+        doc.body.appendChild(menu);
+        // Opened near the window's right or bottom edge, it moves back into the window.
+        const win = doc.defaultView;
+        const box = menu.getBoundingClientRect?.();
+        if (win && box?.width) {
+            const at = PopupMenu.fit(x, y, box.width, box.height, win.innerWidth, win.innerHeight);
+            Object.assign(menu.style, { left: `${at.x}px`, top: `${at.y}px` });
+        }
+        // Registered after the opening click has finished propagating.
+        const dismiss = () => PopupMenu.close();
+        setTimeout(() => doc.addEventListener('click', dismiss, { once: true }), 0);
+        PopupMenu._open = { menu, dismiss, doc };
+        return menu;
+    }
+
+    /**
+     * Where a menu of a size goes, asked for at (x, y), to be all inside a
+     * window of a size: left of the point when it would pass the right edge,
+     * above it when it would pass the bottom, never past the top-left.
+     */
+    static fit(x, y, width, height, windowWidth, windowHeight, margin = 4) {
+        const left = x + width + margin > windowWidth ? x - width : x;
+        const top = y + height + margin > windowHeight ? y - height : y;
+        return {
+            x: Math.max(margin, Math.min(left, windowWidth - width - margin)),
+            y: Math.max(margin, Math.min(top, windowHeight - height - margin)),
+        };
+    }
+
+    static close() {
+        const open = PopupMenu._open;
+        if (!open) return;
+        open.menu.remove();
+        open.doc.removeEventListener('click', open.dismiss);
+        PopupMenu._open = null;
+    }
+
+    static get isOpen() {
+        return !!PopupMenu._open;
+    }
+
+    static _panelStyle = {
+        background: '#fff', border: '1px solid #ccc', borderRadius: '3px', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+        zIndex: '10000', minWidth: '170px', fontSize: '12px', fontFamily: 'sans-serif', padding: '4px 0',
+    };
+
+    static _panel(items, doc) {
+        return { attrs: { role: 'menu' }, children: items.map(item => PopupMenu._item(item, doc)) };
+    }
+
+    static _item(item, doc) {
+        if (item.separator) return { attrs: { role: 'separator' }, style: { borderTop: '1px solid #ddd', margin: '4px 0' } };
+        const hover = item.danger ? '#ffe8e8' : '#f0f0f0';
+        const base = {
+            attrs: { role: 'menuitem', 'aria-disabled': item.disabled ? 'true' : null, 'aria-checked': item.checked != null ? String(!!item.checked) : null },
+            style: {
+                padding: '7px 14px', cursor: item.disabled ? 'default' : 'pointer', position: 'relative', whiteSpace: 'nowrap',
+                color: item.disabled ? '#aaa' : item.danger ? '#cc3333' : '', background: item.checked ? '#e3f2fd' : '',
+            },
+        };
+        if (item.items) {
+            let sub;
+            return {
+                ...base,
+                attrs: { ...base.attrs, 'aria-haspopup': 'menu' },
+                on: {
+                    mouseenter: (e) => { e.currentTarget.style.background = hover; sub.style.display = 'block'; },
+                    mouseleave: (e) => { e.currentTarget.style.background = ''; sub.style.display = 'none'; },
+                    click: (e) => e.stopPropagation(),
+                },
+                children: [
+                    `${item.label} ▸`,
+                    {
+                        ...PopupMenu._panel(item.items, doc),
+                        style: { ...PopupMenu._panelStyle, position: 'absolute', left: '100%', top: '-4px', display: 'none' },
+                        ref: (n) => { sub = n; },
+                    },
+                ],
+            };
+        }
+        return {
+            ...base,
+            text: item.label,
+            on: {
+                mouseenter: (e) => { if (!item.disabled) e.currentTarget.style.background = hover; },
+                mouseleave: (e) => { e.currentTarget.style.background = item.checked ? '#e3f2fd' : ''; },
+                click: (e) => {
+                    e.stopPropagation();
+                    if (item.disabled) return;
+                    PopupMenu.close();
+                    item.action();
+                },
+            },
+        };
+    }
+}