@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/charts/ViolinChart.js

@@ -0,0 +1,37 @@
+import { Statistics } from '../Statistics.js';
+import { GroupedDistributionChart } from './GroupedDistributionChart.js';
+
+/**
+ * ViolinChart — one mirrored Gaussian-KDE silhouette per group in its own
+ * x-slot, the same per-group layout math as BoxPlotChart (same top-level
+ * data shape too). Unlike BoxPlotChart's single flat `boxColor`, each violin
+ * gets its own palette color: a violin's shape is visually larger/more
+ * prominent than a thin box glyph, so per-group color materially helps
+ * distinguish many holdings at a glance. A thin median tick is drawn for
+ * reference — no outlier dots, since showing the full distribution shape
+ * including tails IS the point of a violin.
+ */
+export class ViolinChart extends GroupedDistributionChart {
+    static chartType = 'violin';
+
+    _renderGlyph(cx, slotWidth, i, d) {
+        const color = this._palette.colorAt(i);
+        const curve = Statistics.kernelDensityEstimate(d.values, { min: this._domain.vMin, max: this._domain.vMax });
+        const maxDensity = Math.max(...curve.map(p => p.density)) || 1;
+        const halfWidth = slotWidth * 0.4;
+
+        // Mirrored silhouette: right edge low-to-high value, then left
+        // edge high-to-low, closing into one filled path — the
+        // standard violin construction.
+        const rightPts = curve.map(p => ({ px: cx + (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
+        const leftPts = curve.map(p => ({ px: cx - (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
+        const path = 'M' + rightPts.map(p => `${p.px},${p.py}`).join(' L')
+            + ' L' + [...leftPts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
+        this.renderer.path(path, color, { color: '#333', width: 1 }, {
+            tooltip: `${d.label}: n=${d.values.length}`,
+        });
+
+        const median = Statistics.quantile([...d.values].sort((a, b) => a - b), 0.5);
+        this.renderer.path(`M${cx - halfWidth},${this._toY(median)} L${cx + halfWidth},${this._toY(median)}`, 'none', { color: '#fff', width: 2 });
+    }
+}

package/src/charting/charts/WaterfallChart.js

@@ -0,0 +1,66 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Axis } from '../Axis.js';
+
+/**
+ * WaterfallChart — running-total bars, each floating from the previous
+ * cumulative value to the new one (a "delta" bar), except entries marked
+ * `type:'total'` which draw full-height from zero.
+ */
+export class WaterfallChart extends Chart {
+    static chartType = 'waterfall';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            upColor = '#26a69a', downColor = '#ef5350', totalColor = '#5470c6',
+            title, xAxisLabel, yAxisLabel,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        let running = 0;
+        const bands = data.map(d => {
+            if (d.type === 'total') {
+                const band = { from: 0, to: d.value, isTotal: true };
+                running = d.value;
+                return band;
+            }
+            const from = running;
+            running += d.value;
+            return { from, to: running, isTotal: false };
+        });
+        const allVals = bands.flatMap(b => [b.from, b.to]);
+        const vMax = Math.max(0, ...allVals);
+        const vMin = Math.min(0, ...allVals);
+        const range = (vMax - vMin) || 1;
+        const toY = (v) => y + height - ((v - vMin) / range) * height;
+        const barWidth = width / data.length * 0.7;
+        const barMargin = width / data.length * 0.3;
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        this.renderer.path(`M${x},${toY(0)} L${x + width},${toY(0)}`, 'none', { color: '#ccc', width: 1 });
+        this.renderer.path(`M${x},${y} L${x},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        for (let i = 0; i < bands.length - 1; i++) {
+            const barX = x + i * (barWidth + barMargin);
+            const nextX = barX + barWidth + barMargin;
+            this.renderer.path(`M${barX + barWidth},${toY(bands[i].to)} L${nextX},${toY(bands[i].to)}`, 'none', { color: '#bbb', width: 1 });
+        }
+
+        data.forEach((d, i) => {
+            const band = bands[i];
+            const barX = x + i * (barWidth + barMargin);
+            const top = toY(Math.max(band.from, band.to));
+            const bottom = toY(Math.min(band.from, band.to));
+            const color = band.isTotal ? totalColor : (band.to >= band.from ? upColor : downColor);
+            this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
+                tooltip: `${d.label}: ${band.isTotal ? band.to : (d.value >= 0 ? '+' : '') + d.value} (total: ${Axis.formatValue(band.to)})`,
+            });
+            this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
+        });
+    }
+}

package/src/charting/charts/WordCloudChart.js

@@ -0,0 +1,104 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * WordCloudChart — words sized by value and laid out with a simple spiral
+ * placement that avoids overlaps.
+ *
+ * Data: Array<{text: string, value: number}>
+ * Options:
+ *   - title
+ *   - colors: string[] palette
+ *   - minFontSize, maxFontSize
+ *   - fontFamily
+ *   - padding: extra space around each word for collision detection
+ */
+export class WordCloudChart extends Chart {
+    static chartType = 'wordCloud';
+
+    static estimateBox(text, fontSize) {
+        // Approximate width: each glyph ~0.55em; height ~1.1em.
+        const w = text.length * fontSize * 0.55;
+        const h = fontSize * 1.1;
+        return { w, h };
+    }
+
+    _render() {
+        const data = this.data || [];
+        const options = this.options || {};
+        const w = this.renderer?.width ?? 800;
+        const h = this.renderer?.height ?? 400;
+
+        const {
+            x = 40, y = 40,
+            width = w - x - 40,
+            height = h - y - 60,
+            title,
+            colors,
+            minFontSize = 12,
+            maxFontSize = 48,
+            fontFamily = 'sans-serif',
+            padding = 4,
+        } = options;
+
+        const palette = new ColorPalette(colors);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const sorted = [...data].filter(d => d.text && d.value > 0).sort((a, b) => b.value - a.value);
+        if (sorted.length === 0) return;
+
+        const maxValue = sorted[0].value;
+        const minValue = Math.max(1, sorted[sorted.length - 1].value);
+        const valueRange = Math.max(1, maxValue - minValue);
+        const scale = (v) => minFontSize + ((v - minValue) / valueRange) * (maxFontSize - minFontSize);
+
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const placed = [];
+
+        if (title) {
+            this.renderer.text(title, x + width / 2, y - 10, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        sorted.forEach((d, i) => {
+            const fontSize = scale(d.value);
+            const box = WordCloudChart.estimateBox(d.text, fontSize);
+            const pos = this._findPosition(cx, cy, box.w, box.h, placed, padding, width, height);
+            if (!pos) return; // Could not place; skip.
+            placed.push({ x: pos.x, y: pos.y, w: box.w, h: box.h });
+            const color = palette.colorAt(i);
+            this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
+                textAnchor, fontSize: `${fontSize}px`, fill: color, fontFamily,
+                tooltip: `${d.text}: ${d.value}`,
+            });
+        });
+    }
+
+    _findPosition(cx, cy, w, h, placed, padding, maxW, maxH) {
+        const bounds = { x: cx - maxW / 2, y: cy - maxH / 2, w: maxW, h: maxH };
+        // Try center first.
+        const candidates = [{ x: cx, y: cy }];
+        // Spiral outward.
+        const a = 5; // spiral tightness
+        for (let t = 0; t < 2000; t += 0.5) {
+            const r = a * t;
+            const px = cx + r * Math.cos(t);
+            const py = cy + r * Math.sin(t);
+            candidates.push({ x: px, y: py });
+        }
+
+        for (const p of candidates) {
+            const rect = { x: p.x - w / 2 - padding, y: p.y - h / 2 - padding, w: w + padding * 2, h: h + padding * 2 };
+            if (rect.x < bounds.x || rect.y < bounds.y || rect.x + rect.w > bounds.x + bounds.w || rect.y + rect.h > bounds.y + bounds.h) {
+                continue;
+            }
+            if (!placed.some(other => this._overlap(rect, other))) {
+                return p;
+            }
+        }
+        return null;
+    }
+
+    _overlap(a, b) {
+        return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+    }
+}

package/src/charting/diagramModel/AddViewCommand.js

@@ -0,0 +1,33 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * AddViewCommand — a view added to a model (new, duplicated, generated, a
+ * canvas or template), last in order and, with `current`, shown. Undo takes
+ * it away and shows the view that was in front.
+ */
+export class AddViewCommand extends Command {
+    /** A view added or removed is no edit on a view: undoing it shows no other. */
+    viewId = null;
+
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} view
+     * @param {{current?: boolean, label?: string}} [options]
+     */
+    constructor(model, view, { current = true, label = `Add "${view.title || view.name || view.id}"` } = {}) {
+        super(label);
+        this.model = model;
+        this.view = view;
+        this.current = current;
+        this._before = null;
+    }
+
+    execute() {
+        this._before = this.model.currentViewId;
+        this.model._insertView(this.view, { current: this.current });
+    }
+
+    undo() {
+        this.model._removeView(this.view.id, { next: this._before });
+    }
+}

package/src/charting/diagramModel/DiagramModel.js

@@ -0,0 +1,39 @@
+import { DiagramView } from './DiagramView.js';
+import { ViewSetModel } from './ViewSetModel.js';
+import { DiagramModelSearch } from './DiagramModelSearch.js';
+
+/**
+ * DiagramModel — the template editor's diagrams (views) edited together: the
+ * palette category shared by all of them and model-level line style defaults.
+ * Creating, duplicating, renaming, deleting and switching views come from
+ * ViewSetModel.
+ */
+export class DiagramModel extends ViewSetModel {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.templateType] - Palette category shared by every view
+     * @param {Object} [options.edgeStyle] - Model-level line style defaults
+     * @param {Object} [options.historyOptions] - CommandHistory options for each view (e.g. onChange)
+     * @param {string} [options.name] - What the model is called
+     */
+    constructor({ templateType = 'generic', edgeStyle = {}, historyOptions = {}, name = '' } = {}) {
+        super({ idPrefix: 'view', viewNoun: 'Diagram' });
+        this.name = name;
+        this.templateType = templateType;
+        this.edgeStyle = edgeStyle;
+        this.historyOptions = historyOptions;
+    }
+
+    _newView(id, title) {
+        return new DiagramView({ id, title, historyOptions: this.historyOptions });
+    }
+
+    /** Find and replace: the views, their shapes' names and lines' labels (DiagramModelSearch). */
+    search() {
+        return new DiagramModelSearch(this);
+    }
+
+    setTemplateType(templateType) {
+        this.templateType = templateType;
+    }
+}

package/src/charting/diagramModel/DiagramModelSearch.js

@@ -0,0 +1,22 @@
+import { ModelSearch } from './ModelSearch.js';
+
+/**
+ * DiagramModelSearch — find and replace in the template editor's diagrams: on
+ * top of the model and views (ModelSearch), each shape's name and each line's
+ * label, which belong to their view.
+ */
+export class DiagramModelSearch extends ModelSearch {
+    viewItemTargets(view) {
+        const shapes = [...(view.templates?.values() ?? [])].map(t => ({
+            kind: 'shape', id: t.id, viewId: view.id, owner: t.name || t.id, field: 'name', fieldLabel: 'Name',
+            read: () => t.name ?? '',
+            write: (text) => { t.name = text; },
+        }));
+        const lines = [...(view.edges?.values() ?? [])].filter(e => e.label).map(e => ({
+            kind: 'line', id: e.id, viewId: view.id, owner: e.label, field: 'name', fieldLabel: 'Label',
+            read: () => e.label ?? '',
+            write: (text) => { e.label = text; },
+        }));
+        return [...shapes, ...lines];
+    }
+}

package/src/charting/diagramModel/DiagramView.js

@@ -0,0 +1,50 @@
+import { DiagramEditorState } from '../DiagramEditorState.js';
+
+/**
+ * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
+ * diagram-level line style and its own undo history (from DiagramEditorState).
+ *
+ * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
+ * with nothing to save back, and the history survives the editor being rebuilt.
+ */
+export class DiagramView extends DiagramEditorState {
+    /**
+     * @param {Object} options
+     * @param {string} options.id
+     * @param {string} options.title
+     * @param {Map<string, Template>} [options.templates]
+     * @param {Map<string, Edge>} [options.edges]
+     * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
+     * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
+     * @param {string} [options.documentation]
+     */
+    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
+        super({ historyOptions, arrangement });
+        this.historyOptions = historyOptions;
+        this.id = id;
+        this.title = title;
+        this.documentation = documentation;
+        this.templates = templates;
+        this.edges = edges;
+        this.edgeStyle = edgeStyle;
+    }
+
+    /** The shapes are what stack. */
+    layerItems() {
+        return [...this.templates.values()];
+    }
+
+    /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
+    copy(id, title, historyOptions = this.historyOptions) {
+        return new DiagramView({
+            id,
+            title,
+            templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
+            edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
+            edgeStyle: { ...this.edgeStyle },
+            documentation: this.documentation,
+            historyOptions,
+            arrangement: this.arrangement.copy(),   // template ids are kept
+        });
+    }
+}

package/src/charting/diagramModel/ModelHistory.js

@@ -0,0 +1,43 @@
+import { CommandHistory } from '../CommandHistory.js';
+
+/**
+ * ModelHistory — one undo history for a whole model (Archi's command stack
+ * per model): every view's edits, and the model's own (views added,
+ * renamed, deleted; elements edited from the tree), in the order they were
+ * made. Each edit remembers the view in front when it was made (`viewId`),
+ * and undoing or redoing it shows that view again, so the change is seen.
+ * A command that names no view of its own (a view added or removed) sets
+ * `viewId = null`.
+ */
+export class ModelHistory extends CommandHistory {
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} [options] - CommandHistory options
+     */
+    constructor(model, options = {}) {
+        super(options);
+        this.model = model;
+    }
+
+    execute(cmd) {
+        if (cmd && typeof cmd === 'object' && !('viewId' in cmd)) cmd.viewId = this.model.currentViewId;
+        const done = super.execute(cmd);
+        if (done !== cmd && done && !('viewId' in done)) done.viewId = cmd.viewId;   // merged into the last one
+        return done;
+    }
+
+    undo() {
+        return this._show(super.undo());
+    }
+
+    redo() {
+        return this._show(super.redo());
+    }
+
+    /** Show the view an undone or redone edit was made on (after the change, so it is drawn changed). @private */
+    _show(cmd) {
+        const id = cmd?.viewId;
+        if (id && id !== this.model.currentViewId && this.model.getView(id)) this.model.switchTo(id);
+        return cmd;
+    }
+}

package/src/charting/diagramModel/ModelReport.js

@@ -0,0 +1,153 @@
+/**
+ * ModelReport — what a browsable report of a model holds, as plain JSON
+ * (reportHtml writes it out as a page): a page per item (the model, each
+ * view, and whatever a notation's model adds: elements, relationships, ...)
+ * and the tree the pages are found by.
+ *
+ * Here, what every view set has: the model's page, and a page per view with
+ * its documentation, properties and picture. A notation's model returns a
+ * subclass from `model.report()` that adds its own items (`conceptItems()`),
+ * tree sections (`conceptSections()`) and what a view's page lists
+ * (`viewLists(view)`).
+ *
+ * An item: `{ key, name, kind, type, color?, documentation?, properties:
+ * [{name, value}], facts: [{label, text} | {label, key}], lists: [{title,
+ * rows: [{key, note?}]}], picture? }`; a fact or row with a `key` links to
+ * that item's page. A picture (from the editor, see DiagramEditor#viewPicture)
+ * is `{ svg, viewBox: {x, y, width, height}, areas: [{ref, x, y, width,
+ * height}] }`; an area's `ref` (`{kind, id}`) is the item it opens.
+ */
+export class ModelReport {
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} [options]
+     * @param {Object<string, Object>} [options.pictures] - Each view's picture, by view id
+     * @param {string} [options.title] - Default: the model's name
+     */
+    constructor(model, { pictures = {}, title = null } = {}) {
+        this.model = model;
+        this.pictures = pictures;
+        this._title = title;
+    }
+
+    /** The report's title: the model's name, or what was asked for. */
+    get title() {
+        return this._title || this.model.name || this.model.title || 'Model';
+    }
+
+    /** An item's key: unique across kinds, since a view and an element may share an id. */
+    key(kind, id) {
+        return `${kind}:${id}`;
+    }
+
+    /** The report: `{ title, home, sections, items }` (see the class). */
+    data() {
+        const items = [this.modelItem(), ...this.viewItems(), ...this.conceptItems()];
+        return {
+            title: this.title,
+            home: items[0].key,
+            sections: [...this.conceptSections(), this.viewSection()]
+                .map(s => ({ ...s, groups: s.groups.filter(g => g.keys.length) }))
+                .filter(s => s.groups.length),
+            items: Object.fromEntries(items.map(item => [item.key, item])),
+        };
+    }
+
+    /** The model's own page: its documentation, properties and how much it holds. */
+    modelItem() {
+        const model = this.model;
+        return this.item('model', model.id ?? 'model', {
+            name: this.title, type: 'Model',
+            documentation: model.documentation,
+            properties: model.properties,
+            facts: this.modelFacts(),
+        });
+    }
+
+    /** The model page's counts: its views (a subclass adds its own). */
+    modelFacts() {
+        return [{ label: 'Views', text: String(this.model.views().length) }];
+    }
+
+    /** A page per view. */
+    viewItems() {
+        return this.model.views().map(view => this.item('view', view.id, {
+            name: view.title || view.name || view.id,
+            type: this.viewType(view),
+            documentation: view.documentation,
+            properties: view.properties,
+            facts: this.viewFacts(view),
+            lists: this.viewLists(view),
+            picture: this.picture(view),
+        }));
+    }
+
+    /** What kind of view a view is, as its page says. */
+    viewType(view) {
+        return 'View';
+    }
+
+    /** A view's picture, with its areas' refs turned into item keys (an area with nothing to open is dropped). */
+    picture(view) {
+        const picture = this.pictures[view.id];
+        if (!picture) return undefined;
+        const areas = (picture.areas ?? [])
+            .map(({ ref, ...box }) => ({ ...box, key: ref && this.key(ref.kind, ref.id) }))
+            .filter(area => area.key);
+        return { svg: picture.svg, viewBox: picture.viewBox, areas };
+    }
+
+    /** A view's facts (its viewpoint, ...): none here. */
+    viewFacts(view) {
+        return [];
+    }
+
+    /** What a view's page lists (its elements, ...): none here. */
+    viewLists(view) {
+        return [];
+    }
+
+    /** The tree's Views section. */
+    viewSection() {
+        return { title: 'Views', groups: [{ title: null, keys: this.model.views().map(v => this.key('view', v.id)) }] };
+    }
+
+    /** A notation's own items (elements, relationships): none here. */
+    conceptItems() {
+        return [];
+    }
+
+    /** A notation's own tree sections, before Views: none here. */
+    conceptSections() {
+        return [];
+    }
+
+    /**
+     * An item from its kind, id and fields: empty lists dropped, properties as
+     * `[{name, value}]` whichever way the model keeps them.
+     * @protected
+     */
+    item(kind, id, { name, type, color, documentation, properties, facts = [], lists = [], picture } = {}) {
+        const props = ModelReport.properties(properties);
+        return {
+            key: this.key(kind, id),
+            name: name || id, kind, type,
+            ...(color && { color }),
+            ...(documentation && { documentation: String(documentation) }),
+            ...(props.length && { properties: props }),
+            ...(facts.length && { facts }),
+            ...(lists.some(l => l.rows.length) && { lists: lists.filter(l => l.rows.length) }),
+            ...(picture && { picture }),
+        };
+    }
+
+    /** Properties as `[{name, value}]`, from `[{name|key, value}]`, `[[name, value]]` or `{name: value}`. */
+    static properties(properties) {
+        if (!properties) return [];
+        const list = Array.isArray(properties) ? properties : Object.entries(properties);
+        return list.map(p => (Array.isArray(p)
+            ? { name: String(p[0]), value: String(p[1] ?? '') }
+            : { name: String(p.name ?? p.key ?? ''), value: String(p.value ?? '') }))
+            .filter(p => p.name);
+    }
+}