@peter.prib/renderengine 0.10.0 → 0.13.0

package/src/charting/diagrams/DeleteFromModelCommand.js

@@ -0,0 +1,81 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * DeleteFromModelCommand — elements taken out of the model (Archi's "Delete
+ * from Model"), not just off one view: their relationships go too (and any
+ * relationship ending on one of those), and with them every box and line
+ * drawing them on every view, and every view's own line (a connection) to
+ * one of those boxes. Undo puts everything back as it was, ids and all.
+ *
+ * What goes is ArchimateModel#usage's: say it before asking.
+ */
+export class DeleteFromModelCommand extends Command {
+    /**
+     * @param {ArchimateModel} model
+     * @param {Array<string>} elementIds
+     */
+    constructor(model, elementIds) {
+        const ids = elementIds.filter(id => model.getElement(id));
+        const first = model.getElement(ids[0]);
+        super(ids.length === 1 ? `Delete "${first?.name || ids[0]}" from model` : `Delete ${ids.length} elements from model`);
+        this.model = model;
+        this.elementIds = ids;
+        this._before = null;
+    }
+
+    execute() {
+        const { model } = this;
+        if (!this.elementIds.length) return;
+        this._before = this._snapshot();
+        const { relationships } = model.usage(this.elementIds);
+        const goneElements = new Set(this.elementIds);
+        const goneRelationships = new Set(relationships.map(r => r.id));
+        for (const view of model.views()) {
+            if (Array.isArray(view.elementIds)) view.elementIds = view.elementIds.filter(id => !goneElements.has(id));
+            const goneBoxes = new Set();
+            for (const inst of [...(view.elementInstances?.values() ?? [])]) {
+                if (goneElements.has(inst.elementId)) { goneBoxes.add(inst.id); view.elementInstances.delete(inst.id); }
+            }
+            for (const inst of [...(view.relationshipInstances?.values() ?? [])]) {
+                if (goneRelationships.has(inst.relationshipId)) view.relationshipInstances.delete(inst.id);
+            }
+            for (const line of [...(view.viewConnections?.values() ?? [])]) {
+                if (goneBoxes.has(line.sourceInstanceId) || goneBoxes.has(line.targetInstanceId)) view.viewConnections.delete(line.id);
+            }
+        }
+        for (const id of goneRelationships) model.removeRelationship(id);
+        for (const id of goneElements) model.removeElement(id);
+    }
+
+    undo() {
+        if (!this._before) return;
+        const { model } = this;
+        const b = this._before;
+        model._elements = new Map(b.elements);
+        model._elementFolder = new Map(b.folders);
+        model._relationships = new Map(b.relationships);
+        for (const v of b.views) {
+            v.view.elementIds = v.elementIds;
+            if (v.instances) v.view.elementInstances = new Map(v.instances);
+            if (v.lines) v.view.relationshipInstances = new Map(v.lines);
+            if (v.connections) v.view.viewConnections = new Map(v.connections);
+        }
+    }
+
+    /** Everything the delete changes, to put back (the objects themselves, so ids and state are kept). @private */
+    _snapshot() {
+        const { model } = this;
+        return {
+            elements: [...model._elements],
+            folders: [...model._elementFolder],
+            relationships: [...model._relationships],
+            views: model.views().map(view => ({
+                view,
+                elementIds: Array.isArray(view.elementIds) ? [...view.elementIds] : view.elementIds,
+                instances: view.elementInstances ? [...view.elementInstances] : null,
+                lines: view.relationshipInstances ? [...view.relationshipInstances] : null,
+                connections: view.viewConnections ? [...view.viewConnections] : null,
+            })),
+        };
+    }
+}

package/src/charting/diagrams/EdgeGeometry.js

@@ -91,6 +91,22 @@ export class EdgeGeometry {
         return denom > 0 ? 1 / denom : Math.max(hw, hh);
     }
 
+    /** Pure. Where two boxes ({left, top, right, bottom}) face each other
+     *  across a gap with their x ranges (or y ranges) overlapping, the
+     *  shortest line between them runs straight across, at the middle of the
+     *  overlap: `{axis: 'v', at: x, forward}` (a vertical line, `forward` when
+     *  `a` is above `b`) or `{axis: 'h', at: y, forward}` (`a` left of `b`).
+     *  Null when they overlap neither way, or each other. */
+    static acrossOverlap(a, b) {
+        const left = Math.max(a.left, b.left), right = Math.min(a.right, b.right);
+        const top = Math.max(a.top, b.top), bottom = Math.min(a.bottom, b.bottom);
+        const apartV = a.bottom <= b.top || b.bottom <= a.top;
+        const apartH = a.right <= b.left || b.right <= a.left;
+        if (left < right && apartV) return { axis: 'v', at: (left + right) / 2, forward: a.bottom <= b.top };
+        if (top < bottom && apartH) return { axis: 'h', at: (top + bottom) / 2, forward: a.right <= b.left };
+        return null;
+    }
+
     /** Pure. Anchor for one end of an edge. A node that knows its own outline
      *  supplies `info.boundaryPoint(dx, dy) → {x, y}` (DiagramEditor templates
      *  do, rotation included), and the anchor is where the ray toward the other

package/src/charting/edgeStyle/EdgeStyleSchema.js

@@ -20,8 +20,12 @@ export const EDGE_STYLE_PROPERTIES = Object.freeze([
         choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
     },
     {
-        key: 'attach', label: 'Attach to', type: 'select', default: 'floating',
-        choices: [['floating', 'Outline, aimed at the other end'], ['sides', 'Middle of the facing side']],
+        key: 'attach', label: 'Attach to', type: 'select', default: 'shortest',
+        choices: [
+            ['shortest', 'Shortest: straight across where the shapes overlap, else aimed at the other end'],
+            ['floating', 'Outline, aimed at the other end'],
+            ['sides', 'Middle of the facing side'],
+        ],
     },
     {
         key: 'lineStyle', label: 'Line', type: 'select', default: 'solid',

package/src/charting/pivot/PivotChart.js

@@ -0,0 +1,50 @@
+import { ChartChooser } from '../ChartChooser.js';
+
+/**
+ * PivotChart — a chart linked to a pivot grid (Alphablox's ChartBlox): it charts what the grid shows
+ * (PivotView.chartData: the members not broken down further, no totals), follows every change to the
+ * grid, and a click on a bar, point or slice drills the grid there (PivotView.drillFrom: expand a
+ * collapsed member, or ask the host to drill a level down). Which chart is ChartChooser's, from the
+ * charts that fit; the chart's own menu changes it. Kept apart from drawing, as PivotView is;
+ * RenderEngine.pivotChart draws it.
+ */
+export class PivotChart {
+    /**
+     * @param {PivotView} view the grid's state
+     * @param {object} [options]
+     * @param {string} [options.type] a catalog key to prefer while it fits (else ChartChooser's best)
+     * @param {ChartChooser} [options.chooser]
+     */
+    constructor(view, { type = null, chooser = null } = {}) {
+        this.view = view;
+        this.type = type;
+        this.chooser = chooser ?? new ChartChooser();
+    }
+
+    /** The charts that fit what the grid shows, best first. The grid itself is the table. */
+    choices() {
+        const { rows, columns, complete } = this.view.chartData();
+        return this.chooser.choose(rows, columns, { complete }).filter(c => c.key !== 'table');
+    }
+
+    /** The chart to draw: the one asked for while it still fits, else the best; null when none fits. */
+    chosen() {
+        const choices = this.choices();
+        return choices.find(c => c.key === this.type) ?? choices[0] ?? null;
+    }
+
+    /** The chart's menu: "Chart as" each chart that fits, the one showing ticked. */
+    menu(redraw) {
+        const current = this.chosen()?.key;
+        return [{
+            label: 'Chart as',
+            items: this.choices().map(c => ({
+                label: `${c.label}${c.key === current ? ' ✓' : ''}`,
+                action: () => { this.type = c.key; redraw(); },
+            })),
+        }];
+    }
+
+    /** A click on a charted value: drill the grid at its member. */
+    click(datum) { return this.view.drillFrom(datum.label); }
+}

package/src/charting/pivot/PivotGridChart.js

@@ -0,0 +1,191 @@
+import { TableChart } from '../charts/TableChart.js';
+import { TableViewChart } from '../table/TableViewChart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { PivotView } from './PivotView.js';
+
+/**
+ * PivotGridChart — a pivot grid drawn from a PivotView's state, whose parts answer clicks: the
+ * column-axis members across the top (spanning the members beneath them), the row-axis members down
+ * the side (indented by level), and the measures in the cells. A member's ▸ / ▾ collapses or expands
+ * it; its label opens its menu (expand, collapse, drill down or up); the corner ⋮ opens the grid's
+ * menu (swap the axes, expand all, copy). Each change goes through the view, whose `onChange` redraws.
+ * With the view's `onLayout`, a layout strip above the grid shows the rows, the columns, the page
+ * filters and the dimensions that may be added, each a chip whose menu moves, filters or removes it.
+ *
+ * It shares the interactive table's drawing and click plumbing (TableViewChart). Interaction needs a
+ * renderer whose shapes are DOM elements (SVG); anywhere else the same grid is drawn without clicks.
+ */
+export class PivotGridChart extends TableViewChart {
+    static INDENT = 14;
+    /** A value column is never narrower: past it the grid is drawn wider than its container, which scrolls. */
+    static MIN_COL_W = 88;
+    /** What a container that scrolls sideways adds for its scrollbar (and its border). */
+    static SCROLLBAR_H = 20;
+    static TOTAL_FILL = '#eef2f8';
+    static EXPANDED = '▾';
+    static COLLAPSED = '▸';
+
+    /** Lines the layout strip takes, when the view's layout is the host's to change. */
+    static layoutLines(view) { return view.onLayout ? 2 : 0; }
+
+    /** The height this draws: title, layout strip, the column headers' lines, a line per row, and a note if any. */
+    static heightFor(view, { title } = {}) {
+        const { top, bottom } = TableChart.margins(title);
+        const notes = (view.unplaced > 0 ? 1 : 0) + (view.lights ? 1 : 0);
+        const lines = PivotGridChart.layoutLines(view) + view.columnHeaders().length + view.visibleRows().length + notes;
+        return top + lines * TableChart.ROW_H + bottom;
+    }
+
+    /** The row headers' width: room for the deepest indent and a label, within a third of the grid. */
+    static rowHeaderWidth(view, width) {
+        const depth = Math.max(0, view.rowAxis.length - 1);
+        return Math.min(Math.max(120, 110 + depth * PivotGridChart.INDENT), 240, Math.max(90, width / 3));
+    }
+
+    /**
+     * The width this draws in a container `available` wide: that width, or wider when the value
+     * columns would otherwise be narrower than MIN_COL_W (a value cut short would mislead).
+     */
+    static widthFor(view, available) {
+        const { left, right } = TableChart.margins();
+        const columns = view.visibleColumns().length;
+        let width = available;
+        for (let pass = 0; pass < 2; pass++) {   // the side's width depends on the total; twice settles it
+            width = Math.max(available, left + right + PivotGridChart.rowHeaderWidth(view, width) + columns * PivotGridChart.MIN_COL_W);
+        }
+        return width;
+    }
+
+    _render() {
+        const { view } = this;
+        const { title, nullText = '—' } = this.options;
+        const { ROW_H, PAD_X } = TableChart;
+        const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(title));
+        const interactive = this.renderer.supportsSceneGraph === true;
+        const lines = view.columnHeaders();
+        const columns = view.visibleColumns();
+        const sideW = PivotGridChart.rowHeaderWidth(view, box.width);
+        const colW = Math.max(PivotGridChart.MIN_COL_W, columns.length > 0 ? (box.width - sideW) / columns.length : box.width - sideW);
+        const x0 = box.x + sideW;
+        const end = { align: 'end' };
+
+        new ChartLabels({ title }).draw(this.renderer, { x: box.x, y: box.y, width: box.width, height: box.height });
+
+        // The corner: the grid's menu, and what each axis holds.
+        let top = box.y;
+        if (view.onLayout) top = this._layoutStrip(box, top, interactive);
+        const corner = this.renderer.rect(box.x, top, sideW, lines.length * ROW_H, TableChart.HEADER_FILL, null);
+        const glyph = this._text(TableViewChart.TABLE_GLYPH, box.x + PAD_X + 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' });
+        this._on(interactive, [corner, glyph], (e) => this.showMenu(e.clientX, e.clientY, view.gridMenu()), 'Grid menu');
+        if (view.columnAxis.length > 0 && lines.length > 1) {
+            this._cell(view.columnAxis.join(' › '), end, box.x + 16, top, sideW - 16, { fill: '#666', fontSize: '11px' });
+        }
+        if (view.rowAxis.length > 0) {
+            this._cell(view.rowAxis.join(' › '), {}, box.x + 12, top + (lines.length - 1) * ROW_H, sideW - 12, { fontWeight: 'bold', fill: '#333' });
+        }
+
+        // The column headers: a line per level, a member spanning the columns beneath it.
+        for (const line of lines) {
+            let left = x0;
+            for (const cell of line) {
+                const w = cell.span * colW;
+                this.renderer.rect(left, top, w, ROW_H, TableChart.HEADER_FILL, null);
+                this._member('columns', cell.node, cell.text, left, top, w, interactive, { fontWeight: 'bold', fill: '#333' });
+                left += w;
+            }
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+        }
+
+        // The rows: a member (indented, with its ▸ / ▾) and its cells; members with members below are totals.
+        const cuts = view.lights && view.lights !== 'rules' ? view.thirds() : null;   // once per drawing, not per cell
+        view.visibleRows().forEach(({ node, depth }, r) => {
+            const total = node.children.size > 0 || node.path.length === 0;
+            if (total) this.renderer.rect(box.x, top, box.width, ROW_H, PivotGridChart.TOTAL_FILL, null);
+            else if (r % 2 === 1) this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null);
+            const indent = node.path.length === 0 ? 0 : depth * PivotGridChart.INDENT;
+            const weight = total ? { fontWeight: 'bold' } : {};
+            this._member('rows', node.path.length === 0 ? null : node, PivotView.label(node), box.x + indent, top, sideW - indent, interactive, { fill: '#222', ...weight });
+            columns.forEach((c, i) => {
+                const lit = view.cellFill(node, c, cuts);
+                if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
+                const row = view.cell(node, c.node);
+                const text = row === null ? '' : view.valueText(c.measure, row[c.measure], nullText);
+                const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
+                // A cell with a value opens its menu (drill-through) where the host gives one.
+                if (row !== null && view.cellHasMenu()) {
+                    const hit = this.renderer.rect(x0 + i * colW, top, colW, ROW_H, 'transparent', null);
+                    this._on(interactive, [hit, shown], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(node, c)), 'Cell menu');
+                }
+            });
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+        });
+
+        if (view.unplaced > 0) {
+            this._text(`${view.unplaced} row(s) total an outer level but not an inner one, and are not shown`, box.x + PAD_X, top,
+                { textAnchor: 'start', fill: '#888', fontSize: '11px' });
+            top += ROW_H;
+        }
+        const legend = view.lightsLegend();
+        if (legend) this._text(legend, box.x + PAD_X, top, { textAnchor: 'start', fill: '#666', fontSize: '11px' });
+    }
+
+    /**
+     * The layout strip: "Rows" and "Columns" with their dimensions, then "Filters" (each held to a
+     * member, or All) and "Add" (the dimensions not placed). Each dimension is a chip; a click opens
+     * its layout menu. Returns where the grid starts.
+     */
+    _layoutStrip(box, top, interactive) {
+        const { view } = this;
+        const zones = [
+            [['Rows', view.rowAxis.map(d => [d, d + view.memberFilterText(d)])], ['Columns', view.columnAxis.map(d => [d, d + view.memberFilterText(d)])]],
+            [['Filters', view.pageAxis.map(p => [p.dimension, `${p.dimension}: ${p.value === null ? 'All' : TableChart.cellText(p.value)}`])],
+                ['Add', view.addable().map(d => [d, `+ ${d}`])]],
+        ];
+        const measure = (s) => this.renderer.measureText?.(s, { fontSize: '12px' }) ?? s.length * 12 * 0.55;
+        for (const line of zones) {
+            let x = box.x + TableChart.PAD_X;
+            for (const [name, chips] of line) {
+                this._text(name, x, top, { textAnchor: 'start', fill: '#666', fontSize: '11px', fontWeight: 'bold' });
+                x += measure(name) + 8;
+                if (chips.length === 0) {
+                    this._text('—', x, top, { textAnchor: 'start', fill: '#aaa' });
+                    x += 16;
+                }
+                for (const [dimension, text] of chips) {
+                    const label = `${text} ▾`;
+                    const w = measure(label) + 14;
+                    const chip = this.renderer.rect(x, top + 3, w, TableChart.ROW_H - 6, PivotGridChart.TOTAL_FILL, { color: '#c5cde0', width: 1 });
+                    const t = this._text(label, x + 7, top, { textAnchor: 'start', fill: '#2b3f66' });
+                    this._on(interactive, [chip, t], (e) => this.showMenu(e.clientX, e.clientY, view.layoutMenu(dimension)), `${dimension}: move, filter or remove`);
+                    x += w + 6;
+                }
+                x += 18;
+            }
+            top += TableChart.ROW_H;
+        }
+        return top;
+    }
+
+    /**
+     * A member's header: ▸ / ▾ when it can collapse onto its total (a click toggles it), then its label
+     * (a click opens its menu). Without a member (a total's or a blank header) just the text.
+     */
+    _member(axis, node, text, left, top, width, interactive, attrs) {
+        const { PAD_X } = TableChart;
+        if (node === null) {
+            this._cell(text, {}, left, top, width, attrs);
+            return;
+        }
+        // Room for the ▸ / ▾ on every member, so a level down is indented whether or not it has one.
+        const labelLeft = left + 14;
+        if (this.view.collapsible(node)) {
+            const sign = this.view.isCollapsed(axis, node) ? PivotGridChart.COLLAPSED : PivotGridChart.EXPANDED;
+            const toggle = this._text(sign, left + PAD_X + 3, top, { textAnchor: 'middle', fill: '#555' });
+            this._on(interactive, [toggle], () => this.view.toggle(axis, node), this.view.isCollapsed(axis, node) ? 'Expand' : 'Collapse');
+        }
+        const label = this._cell(text, {}, labelLeft, top, width - (labelLeft - left), attrs);
+        this._on(interactive, [label], (e) => this.showMenu(e.clientX, e.clientY, this.view.memberMenu(axis, node)), `${text} menu`);
+    }
+}