@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/ArchimateSpecializationSelector.js

@@ -0,0 +1,134 @@
+/**
+ * ArchimateSpecializationSelector — OO abstraction for building specialization
+ * selector UI with type-based filtering and icon display.
+ *
+ * Responsibilities:
+ * - Filter specializations by element type (baseTypes)
+ * - Build HTML with icons and descriptions
+ * - Wire type-change callbacks to reset selection
+ */
+
+export class ArchimateSpecializationSelector {
+    constructor(registry, { doc = document } = {}) {
+        this.registry = registry;
+        this.doc = doc;
+    }
+
+    /**
+     * Get specializations allowed for a given type.
+     * If baseTypes is empty [], the specialization applies to any type.
+     */
+    allowedFor(elementType) {
+        if (!elementType) return [];
+        return this.registry.list().filter(spec => {
+            // Empty baseTypes = applies to all
+            if (spec.baseTypes.length === 0) return true;
+            return spec.baseTypes.includes(elementType);
+        });
+    }
+
+    /**
+     * Build a <select> element for specialization picker.
+     * @param {Object} opts
+     * @param {string} opts.value - current specialization id/name
+     * @param {string} opts.elementType - current element type (for filtering)
+     * @param {Function} opts.onTypeChange - callback when type changes (should reset specialization)
+     * @returns {HTMLSelectElement}
+     */
+    buildSelect({ value = '', elementType = null, onTypeChange = () => {} } = {}) {
+        const select = this.doc.createElement('select');
+        select.style.cssText = 'flex:1 1 auto; padding:3px 6px; border:1px solid #ccc; border-radius:3px; background:#fff; color:#222;';
+
+        // Track current type so we can detect changes
+        let currentType = elementType;
+
+        // Callback to rebuild when type changes (for external type inputs)
+        const onTypeChangedExternally = (newType) => {
+            if (newType !== currentType) {
+                currentType = newType;
+                // Reset selection when type changes
+                select.value = '';
+                // Rebuild options for new type
+                this._rebuildOptions(select, newType);
+                onTypeChange(newType);
+            }
+        };
+
+        // Expose callback for caller to wire up
+        select._onTypeChanged = onTypeChangedExternally;
+
+        // Build initial options
+        this._rebuildOptions(select, elementType, value);
+
+        return select;
+    }
+
+    /**
+     * Rebuild options in a select element based on element type.
+     * @private
+     */
+    _rebuildOptions(select, elementType, value = '') {
+        select.innerHTML = '';
+
+        // Empty option
+        const emptyOpt = this.doc.createElement('option');
+        emptyOpt.value = '';
+        emptyOpt.textContent = '(none)';
+        select.appendChild(emptyOpt);
+
+        // Allowed specializations for this type
+        const allowed = this.allowedFor(elementType);
+        for (const spec of allowed) {
+            const opt = this.doc.createElement('option');
+            opt.value = spec.id;
+            const label = spec.icon ? `${spec.icon} ${spec.name}` : spec.name;
+            opt.textContent = label;
+            opt.title = spec.description || '';
+            select.appendChild(opt);
+        }
+
+        // Restore previous value if it's still valid
+        if (value) {
+            const selected = allowed.find(s => s.id === value || s.name === value);
+            select.value = selected?.id ?? '';
+        }
+    }
+
+    /**
+     * Build a <datalist> of specialization names (for autocomplete).
+     * @param {string} elementType - filter to this type
+     * @returns {HTMLDatalistElement}
+     */
+    buildDatalist({ elementType = null } = {}) {
+        const datalist = this.doc.createElement('datalist');
+        const allowed = this.allowedFor(elementType);
+        for (const spec of allowed) {
+            datalist.appendChild(new Option(spec.name));
+        }
+        return datalist;
+    }
+
+    /**
+     * Build a reference description/help text for a specialization.
+     * Shows icon, color, description, base types.
+     * @param {string} idOrName - specialization id or name
+     * @returns {HTMLElement} - a div with formatted content
+     */
+    buildHelp(idOrName) {
+        const div = this.doc.createElement('div');
+        const spec = this.registry.resolve(idOrName);
+
+        if (!spec) {
+            div.innerHTML = `<strong>${idOrName || '(none)'}</strong><p style="margin:4px 0 0;">Not a registered specialization. Use the <strong>Specializations…</strong> button to define it.</p>`;
+            return div;
+        }
+
+        const bases = spec.baseTypes.length ? spec.baseTypes.join(', ') : 'any type';
+        const icon = spec.icon ? ` <span style="font-size:18px;">${spec.icon}</span>` : '';
+        const color = spec.color ? ` &middot; <strong>Colour:</strong> <span style="display:inline-block; width:16px; height:16px; background:${spec.color}; border:1px solid #ccc; border-radius:2px; vertical-align:middle;"></span>` : '';
+
+        div.innerHTML = `<strong>${spec.name}${icon}</strong><p style="margin:4px 0 0;">${spec.description || 'User-defined specialization.'}</p><p style="margin:4px 0 0; color:#666;"><strong>Base types:</strong> ${bases}${color}</p>`;
+
+        return div;
+    }
+}

package/src/charting/Axis.js

@@ -0,0 +1,68 @@
+/**
+ * Axis — reusable cartesian-axis drawing.
+ *
+ * Currently focused on the numeric y-axis used by most 2D charts. The
+ * tick-layout math (`niceTicks`, `formatValue`) is static and DOM-free.
+ */
+export class Axis {
+    /**
+     * Compute evenly-spaced "nice" ticks that cover at least `maxVal`.
+     * @param {number} maxVal
+     * @param {number} [count=4] desired number of intervals
+     * @returns {number[]}
+     */
+    static niceTicks(maxVal, count = 4) {
+        if (!maxVal || maxVal <= 0) return [0];
+        const raw = maxVal / count;
+        const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+        const frac = raw / mag;
+        const step = frac < 1.5 ? mag : frac < 3.5 ? 2 * mag : frac < 7.5 ? 5 * mag : 10 * mag;
+        const yMax = Math.ceil(maxVal / step) * step;
+        const ticks = [];
+        let v = 0;
+        while (v <= yMax + step * 1e-9) {
+            ticks.push(parseFloat(v.toFixed(10)));
+            v += step;
+        }
+        return ticks;
+    }
+
+    /**
+     * Format a numeric value for axis labels (k/M suffixes, fixed decimals).
+     * @param {number} v
+     * @returns {string}
+     */
+    static formatValue(v) {
+        if (v === 0) return '0';
+        if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(2) + 'M';
+        if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(2) + 'k';
+        if (Math.abs(v) >= 100) return v.toFixed(0);
+        if (Math.abs(v) >= 10) return v.toFixed(1);
+        if (Math.abs(v) >= 1) return v.toFixed(2);
+        return v.toPrecision(2);
+    }
+
+    /**
+     * Draw numeric y-axis tick marks, value labels, and horizontal gridlines.
+     *
+     * @param {*} renderer a renderer implementing .path() and .text()
+     * @param {{x:number, y:number, width:number, height:number}} box plot-area box
+     * @param {number} rawMax the raw (un-rounded) data maximum
+     * @returns {number} the nice domain max the ticks actually span
+     */
+    drawYAxis(renderer, box, rawMax) {
+        const ticks = Axis.niceTicks(rawMax);
+        const niceMax = ticks[ticks.length - 1] || 1;
+        for (const t of ticks) {
+            const ty = box.y + box.height - (t / niceMax) * box.height;
+            renderer.path(`M${box.x - 5},${ty} L${box.x},${ty}`, 'none', { color: '#999', width: 1 });
+            if (t > 0) {
+                renderer.path(`M${box.x},${ty} L${box.x + box.width},${ty}`, 'none', { color: '#eee', width: 1 });
+            }
+            renderer.text(Axis.formatValue(t), box.x - 10, ty, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
+            });
+        }
+        return niceMax;
+    }
+}

package/src/charting/CameraSeeder.js

@@ -0,0 +1,30 @@
+/**
+ * CameraSeeder — shared orbit-camera default state and seeding logic.
+ *
+ * Used by both Chart3D and Diagram3D so the seedCamera() implementation isn't
+ * duplicated across two unrelated inheritance hierarchies.
+ */
+export class CameraSeeder {
+    constructor(defaults = CameraSeeder.DEFAULTS) {
+        this._defaults = defaults;
+    }
+
+    static DEFAULTS = { theta: -0.6, phi: 0.35, distance: 2.2 };
+
+    /**
+     * Ensure `camera` is an object, filling it with defaults if missing.
+     * Mutates the target object when one is supplied.
+     * @param {{theta?:number, phi?:number, distance?:number}|null} camera
+     * @param {{theta?:number, phi?:number, distance?:number}} [defaults]
+     * @returns {{theta:number, phi:number, distance:number}}
+     */
+    seed(camera, defaults = this._defaults) {
+        const result = camera || {};
+        for (const key of Object.keys(defaults)) {
+            if (result[key] == null) {
+                result[key] = defaults[key];
+            }
+        }
+        return result;
+    }
+}

package/src/charting/CatalogDialog.js

@@ -0,0 +1,92 @@
+import { FormDialog } from './FormDialog.js';
+import { el } from '../workspace/dom.js';
+
+/**
+ * CatalogDialog — edit a list of entries a user keeps (specializations,
+ * viewpoints, ...): a row per entry with Edit and Delete, and "New …". An
+ * entry is edited in its own FormDialog, whose fields, checks and saving the
+ * caller gives; the list redraws after each change. Nothing here knows what
+ * an entry is.
+ */
+export class CatalogDialog {
+    /**
+     * @param {Object} options
+     * @param {string} options.title
+     * @param {string} [options.description]
+     * @param {string} options.noun - What one entry is called ('specialization')
+     * @param {() => Array<Object>} options.items - The entries, as they are now
+     * @param {(item) => string} options.label - An entry's row text
+     * @param {(item: Object|null) => Array<Object>} options.fields - The form for an entry (null: a new one)
+     * @param {(item: Object|null, values: Object) => (string|null|undefined)} [options.validate] - A problem, shown in the form
+     * @param {(item: Object|null, values: Object) => void} options.save - Keep a new or edited entry
+     * @param {(item: Object) => void} options.remove - Delete an entry
+     * @param {() => void} [options.onChange] - After any change
+     * @param {Document} [options.document]
+     */
+    constructor({ title, description = '', noun, items, label, fields, validate = () => null, save, remove, onChange = () => {}, document: doc = globalThis.document }) {
+        Object.assign(this, { title, description, noun, items, label, fields, validate, save, remove, onChange, doc });
+        this.list = null;
+    }
+
+    /** Show the list. */
+    open() {
+        this.list = el({ style: { display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '360px' } }, this.doc);
+        this.refresh();
+        this.dialog = new FormDialog({
+            title: this.title,
+            description: this.description,
+            fields: [{ key: '__catalog', label: '', type: 'custom', element: this.list, read: () => null }],
+            submitLabel: 'Done',
+            idPrefix: 'catalog-',
+            document: this.doc,
+            onApply: () => {},
+        }).open();
+        return this;
+    }
+
+    /** Redraw the rows from `items()`. */
+    refresh() {
+        if (!this.list) return;
+        const button = (text, on, title) => ({ tag: 'button', attrs: { type: 'button', title: title ?? text }, text, style: { padding: '2px 8px', fontSize: '12px' }, on: { click: on } });
+        const rows = this.items().map(item => ({
+            attrs: { 'data-catalog-entry': this.label(item) },
+            style: { display: 'flex', alignItems: 'center', gap: '6px', padding: '3px 0', borderBottom: '1px solid #eee' },
+            children: [
+                { text: this.label(item), style: { flex: '1 1 auto' } },
+                button('Edit…', () => this.edit(item)),
+                button('Delete', () => this.delete(item)),
+            ],
+        }));
+        this.list.replaceChildren(
+            ...(rows.length ? rows : [{ text: `No ${this.noun}s yet.`, style: { color: '#888', padding: '4px 0' } }]).map(spec => el(spec, this.doc)),
+            el({ style: { marginTop: '8px' }, children: [button(`+ New ${this.noun}…`, () => this.edit(null))] }, this.doc),
+        );
+    }
+
+    /** Edit an entry (null: a new one) in its own form; saving redraws the list. */
+    edit(item) {
+        return new FormDialog({
+            title: item ? `Edit ${this.noun}: ${this.label(item)}` : `New ${this.noun}`,
+            fields: this.fields(item),
+            submitLabel: 'Save',
+            idPrefix: 'catalog-entry-',
+            document: this.doc,
+            validate: (values) => this.validate(item, values),
+            onApply: (values) => {
+                this.save(item, values);
+                this.onChange();
+                this.refresh();
+            },
+        }).open();
+    }
+
+    /** Delete an entry, once confirmed. */
+    delete(item) {
+        const confirm = this.doc?.defaultView?.confirm ?? (() => true);
+        if (!confirm(`Delete ${this.noun} "${this.label(item)}"?`)) return false;
+        this.remove(item);
+        this.onChange();
+        this.refresh();
+        return true;
+    }
+}

package/src/charting/Chart.js

@@ -0,0 +1,37 @@
+/**
+ * Chart — abstract base class for one chart type.
+ *
+ * Subclasses implement `_render()` and are instantiated by RenderEngine's
+ * chart methods. Keeping each chart in its own class removes the giant
+ * RenderEngine God class one chart at a time.
+ */
+export class Chart {
+    /** Registry key / catalog key for this chart type. Subclasses override. */
+    static chartType = null;
+
+    constructor(renderer, data, options = {}) {
+        if (new.target === Chart) {
+            throw new TypeError('Chart is abstract — subclass it');
+        }
+        this.renderer = renderer;
+        this.data = data;
+        this.options = options;
+    }
+
+    /** Render the chart. Subclasses implement `_render()`. */
+    render() {
+        if (!this.renderer) return;
+        this.renderer.clear();
+        this._render();
+    }
+
+    /** Subclasses implement the actual drawing here. */
+    _render() {
+        throw new Error(`${this.constructor.name} must implement _render()`);
+    }
+
+    /** Optional click handler; subclasses override to respond to hits. */
+    onClick(event, hitShape) {
+        // no-op by default
+    }
+}

package/src/charting/Chart3D.js

@@ -0,0 +1,99 @@
+import { Chart } from './Chart.js';
+import { OrbitCamera } from '../OrbitCamera.js';
+import { ColorPalette } from './ColorPalette.js';
+import { ChartBox } from './ChartBox.js';
+import { CameraSeeder } from './CameraSeeder.js';
+
+/**
+ * Chart3D — abstract base class for orbit-camera 3D charts.
+ *
+ * Centralizes camera storage, projection, viewport scaling, and the shared
+ * box-drawing helper used by the orbit bar/bubble charts.
+ */
+export class Chart3D extends Chart {
+    constructor(renderer, data, options = {}, camera = null) {
+        if (new.target === Chart3D) {
+            throw new TypeError('Chart3D is abstract — subclass it');
+        }
+        super(renderer, data, options);
+        this.camera = camera;
+        this._cameraSeeder = new CameraSeeder();
+    }
+
+    /**
+     * Seed an orbit-camera state object if one isn't already present.
+     * @param {{theta?:number, phi?:number, distance?:number}} defaults
+     * @returns {{theta:number, phi:number, distance:number}}
+     */
+    seedCamera(defaults = CameraSeeder.DEFAULTS) {
+        this.camera = this._cameraSeeder.seed(this.camera, defaults);
+        return this.camera;
+    }
+
+    /**
+     * Project a normalized 3D point through the orbit camera.
+     * @returns {{sx:number, sy:number, depth:number, scale:number}}
+     */
+    project(x, y, z) {
+        return new OrbitCamera(this.camera).project({ x, y, z }, 1);
+    }
+
+    /**
+     * Compute the viewport center/radius and return a function that maps
+     * normalized 3D coordinates to screen coordinates.
+     * @returns {{cx:number, cy:number, pixelRadius:number, toScreen:Function, box:ChartBox}}
+     */
+    _viewport() {
+        const box = ChartBox.fromRenderer(this.renderer);
+        const { x: bx, y: by, width, height } = box;
+        const cx = bx + width / 2;
+        const cy = by + height / 2;
+        const pixelRadius = Math.min(width, height) / 2 - 30;
+        const toScreen = (nx, ny, nz) => {
+            const p = this.project(nx, ny, nz);
+            return { x: cx + p.sx * pixelRadius, y: cy - p.sy * pixelRadius, depth: p.depth, scale: p.scale };
+        };
+        return { cx, cy, pixelRadius, toScreen, box };
+    }
+
+    /**
+     * Groups flat {x, z, ...} data into grid indices/labels for orbit bar charts.
+     * @returns {{xLabels: string[], zLabels: string[], xIndex: Map, zIndex: Map}}
+     */
+    bucketGrid(data) {
+        const xLabels = [], zLabels = [];
+        const xIndex = new Map(), zIndex = new Map();
+        for (const d of data) {
+            if (!xIndex.has(d.x)) { xIndex.set(d.x, xLabels.length); xLabels.push(d.x); }
+            if (!zIndex.has(d.z)) { zIndex.set(d.z, zLabels.length); zLabels.push(d.z); }
+        }
+        return { xLabels, zLabels, xIndex, zIndex };
+    }
+
+    /**
+     * Draw one 3D box through the orbit camera. Returns average corner depth.
+     */
+    drawBox(renderer, x0, x1, y0, y1, z0, z1, color, toScreen) {
+        const camera = this.camera;
+        const faceXSign = Math.sin(camera.theta) >= 0 ? 1 : -1;
+        const faceZSign = Math.cos(camera.theta) >= 0 ? 1 : -1;
+        const xf = faceXSign > 0 ? x1 : x0;
+        const zf = faceZSign > 0 ? z1 : z0;
+
+        const c = (x, y, z) => toScreen(x, y, z);
+        const top = [c(x0, y1, z0), c(x1, y1, z0), c(x1, y1, z1), c(x0, y1, z1)];
+        const xSide = [c(xf, y0, z0), c(xf, y1, z0), c(xf, y1, z1), c(xf, y0, z1)];
+        const zSide = [c(x0, y0, zf), c(x1, y0, zf), c(x1, y1, zf), c(x0, y1, zf)];
+
+        const drawFace = (pts, shade) => {
+            const d = `M${pts[0].x},${pts[0].y} L${pts[1].x},${pts[1].y} L${pts[2].x},${pts[2].y} L${pts[3].x},${pts[3].y} Z`;
+            renderer.path(d, ColorPalette.lighten(color, shade), { color: '#333', width: 1 });
+        };
+        drawFace(top, 0.15);
+        drawFace(xSide, faceXSign > 0 ? -0.05 : -0.2);
+        drawFace(zSide, faceZSign > 0 ? -0.1 : -0.25);
+
+        const allDepths = [...top, ...xSide, ...zSide].map(p => p.depth);
+        return allDepths.reduce((s, d) => s + d, 0) / allDepths.length;
+    }
+}

package/src/charting/ChartBox.js

@@ -0,0 +1,80 @@
+/**
+ * ChartBox — computes the plot-area box for a cartesian chart.
+ *
+ * The defaults mirror the historical `_defaultChartBox()` values in
+ * RenderEngine so existing charts keep the same layout.
+ */
+export class ChartBox {
+    /**
+     * @param {object} options
+     * @param {number} options.width total renderer/container width
+     * @param {number} options.height total renderer/container height
+     * @param {object} [options.margins]
+     * @param {number} [options.margins.left=70]
+     * @param {number} [options.margins.top=60]
+     * @param {number} [options.margins.right=20]
+     * @param {number} [options.margins.bottom=70]
+     */
+    constructor({ width, height, margins = {} }) {
+        const left = margins.left ?? 70;
+        const top = margins.top ?? 60;
+        const right = margins.right ?? 20;
+        const bottom = margins.bottom ?? 70;
+        this.x = left;
+        this.y = top;
+        this.width = Math.max(120, width - left - right);
+        this.height = Math.max(80, height - top - bottom);
+    }
+
+    /**
+     * Build a ChartBox from a renderer's dimensions.
+     * @param {{width:number, height:number}} renderer
+     */
+    static fromRenderer(renderer, margins) {
+        const width = renderer?.width ?? 640;
+        const height = renderer?.height ?? 400;
+        return new ChartBox({ width, height, margins });
+    }
+}
+
+/**
+ * ChartLabels — draws the title and axis labels that sit outside the
+ * plot-area box. Keeping this with ChartBox makes the shared chart-chrome
+ * easy to reuse once each chart becomes its own class.
+ */
+export class ChartLabels {
+    /**
+     * @param {object} options
+     * @param {string} [options.title]
+     * @param {string} [options.xAxisLabel]
+     * @param {string} [options.yAxisLabel]
+     */
+    constructor({ title, xAxisLabel, yAxisLabel }) {
+        this.title = title;
+        this.xAxisLabel = xAxisLabel;
+        this.yAxisLabel = yAxisLabel;
+    }
+
+    /**
+     * Draw the labels onto `renderer` relative to `box`.
+     * @param {*} renderer
+     * @param {{x:number, y:number, width:number, height:number}} box
+     */
+    draw(renderer, box) {
+        if (this.title) {
+            renderer.text(this.title, box.x + box.width / 2, box.y - 30, {
+                textAnchor: 'middle', fontSize: '18px', fill: '#333',
+            });
+        }
+        if (this.yAxisLabel) {
+            renderer.text(this.yAxisLabel, box.x - 40, box.y + box.height / 2, {
+                textAnchor: 'middle', rotation: -Math.PI / 2,
+            });
+        }
+        if (this.xAxisLabel) {
+            renderer.text(this.xAxisLabel, box.x + box.width / 2, box.y + box.height + 45, {
+                textAnchor: 'middle', fontSize: '14px', fill: '#333',
+            });
+        }
+    }
+}

package/src/charting/ChartData.js

@@ -0,0 +1,27 @@
+import { compileFormula } from '../kernelExpr.js';
+
+/**
+ * ChartData — small data-access helpers shared by chart subclasses.
+ *
+ * These used to live on RenderEngine; they are collected here so Chart
+ * subclasses can read their own encoding fields without going through the
+ * engine façade.
+ */
+export class ChartData {
+    /** Reads whatever `colorCol` names for one data point — a plain field
+     *  name (unchanged behavior: `d[colorCol]`), or a compiled
+     *  `{formula, params}` expression evaluated over the point's own fields
+     *  (`kernelExpr.js`, the same small grammar sqlengine's compiled UDFs
+     *  use). Shared by every chart with a `colorCol` option
+     *  (scatterChart/bubbleChart/bubbleChart3D) so a formula means the same
+     *  thing wherever it's written, and each distinct value it returns gets
+     *  its own palette color exactly as a plain field's distinct values
+     *  already do. */
+    static readColorCol(d, colorCol) {
+        if (colorCol && typeof colorCol === 'object') {
+            colorCol._compiled ??= compileFormula(colorCol.formula, colorCol.params);
+            return colorCol._compiled(...colorCol.params.map(p => d[p]));
+        }
+        return d[colorCol];
+    }
+}

package/src/charting/ChartRegistry.js

@@ -0,0 +1,76 @@
+/**
+ * ChartRegistry — object-oriented catalog of supported chart types.
+ *
+ * Wraps the flat CHART_CATALOG array with register/lookup/list helpers,
+ * making the catalog extensible at runtime while preserving the existing
+ * export shape for backward compatibility.
+ */
+export class ChartRegistry {
+    constructor(entries = []) {
+        this._entries = entries.slice();
+        this._index = new Map(entries.map(e => [e.key, e]));
+    }
+
+    /** Number of registered chart types. */
+    get size() {
+        return this._entries.length;
+    }
+
+    /** Register a new chart type (or replace an existing one). */
+    register(entry) {
+        if (!entry || typeof entry.key !== 'string') {
+            throw new TypeError('ChartRegistry entry must have a string key');
+        }
+        if (this._index.has(entry.key)) {
+            const i = this._entries.findIndex(e => e.key === entry.key);
+            this._entries[i] = entry;
+        } else {
+            this._entries.push(entry);
+        }
+        this._index.set(entry.key, entry);
+        return this;
+    }
+
+    /** Remove a chart type by key. */
+    unregister(key) {
+        const i = this._entries.findIndex(e => e.key === key);
+        if (i >= 0) this._entries.splice(i, 1);
+        this._index.delete(key);
+        return this;
+    }
+
+    /** Look up one entry by key. */
+    get(key) {
+        return this._index.get(key);
+    }
+
+    /** All entries, in registration order. */
+    list() {
+        return this._entries.slice();
+    }
+
+    /** All entry keys. */
+    keys() {
+        return this._entries.map(e => e.key);
+    }
+
+    /** All RenderEngine method names used by the registered entries. */
+    methods() {
+        return this._entries.map(e => e.method);
+    }
+
+    /** Find entries matching a predicate. */
+    filter(predicate) {
+        return this._entries.filter(predicate);
+    }
+
+    /** Find entries in a given category. */
+    byCategory(category) {
+        return this._entries.filter(e => e.category === category);
+    }
+
+    /** Whether a key is registered. */
+    has(key) {
+        return this._index.has(key);
+    }
+}