@peter.prib/renderengine 0.5.0 → 0.8.0

package/src/charting/Dialog.js

@@ -0,0 +1,195 @@
+import { el } from '../workspace/dom.js';
+
+/**
+ * Dialog — the one dialog frame: a title (the handle that moves it), an
+ * optional ✕, a body that scrolls between the title and the buttons (which
+ * stay in view), and Escape or a click outside to close. It fits the window.
+ * A subclass (FormDialog) or a host gives it its content: `content()` and
+ * `buttons` as specs, or fill `body` after open(). `titleBar` takes more
+ * beside the title (a link); `footer`, more beside the buttons.
+ *
+ * open() shows it over the page; open(host) places it in `host` instead, with
+ * no overlay — a dialog's content shown as a pane or a tab, which has a frame
+ * and a close control of its own.
+ */
+export class Dialog {
+    /**
+     * @param {Object} options
+     * @param {string} options.title
+     * @param {Array<{label: string, action: (dialog: Dialog) => void, primary?: boolean, submit?: boolean}>} [options.buttons]
+     * @param {boolean} [options.closeButton] - A ✕ in the title bar
+     * @param {'tall'|'wide'} [options.size] - Tall: most of the window's height; wide: most of its width
+     * @param {string|string[]} [options.cls] - Extra class names on the frame
+     * @param {Document} [options.document]
+     * @param {(applied: boolean) => void} [options.onClose] - Once, when it closes: whether it was applied
+     */
+    constructor({ title, buttons = [], closeButton = false, size = null, cls = null, document: doc = globalThis.document, onClose = null } = {}) {
+        this.title = title;
+        this.buttons = buttons;
+        this.closeButton = closeButton;
+        this.size = size;
+        this.cls = cls;
+        this.doc = doc;
+        this.onClose = onClose;
+        this._applied = false;
+        /** The page-covering backdrop, while open over the page. */
+        this.overlay = null;
+        /** The dialog itself. */
+        this.frame = null;
+        this.titleBar = null;
+        this.body = null;
+        this.footer = null;
+        this._host = null;
+    }
+
+    /** The frame's tag: a FormDialog's is a <form>. @protected */
+    get frameTag() { return 'div'; }
+
+    /** The body's specs (empty: a host fills `body` after open()). @protected */
+    content() { return []; }
+
+    /** Events on the frame itself (a form's submit). @protected */
+    frameEvents() { return {}; }
+
+    /** Open over the page, or in `host` (no overlay, not moved, no ✕). */
+    open(host = null) {
+        this._host = host;
+        const inline = !!host;
+        const frame = {
+            tag: this.frameTag,
+            cls: ['re-dialog', this.size && `re-dialog-${this.size}`, inline && 're-dialog-inline', ...[].concat(this.cls ?? [])],
+            attrs: { role: inline ? null : 'dialog', 'aria-label': this.title },
+            style: inline ? Dialog.INLINE_STYLE : { ...Dialog.FRAME_STYLE, ...(Dialog.SIZE_STYLE[this.size] ?? {}) },
+            ref: (n) => { this.frame = n; },
+            on: {
+                ...this.frameEvents(),
+                keydown: (e) => { if (e.key === 'Escape' && !inline) this.close(); },
+            },
+            children: [
+                {
+                    cls: 're-dialog-title', ref: (n) => { this.titleBar = n; },
+                    style: { display: 'flex', alignItems: 'center', gap: '8px', margin: '0 0 8px', flex: '0 0 auto' },
+                    children: [
+                        {
+                            // The title is the handle that moves the dialog.
+                            tag: 'h3', text: this.title, attrs: { title: inline ? null : 'Drag to move' },
+                            style: { margin: '0', fontSize: '14px', cursor: inline ? 'default' : 'move', userSelect: 'none', flex: '1 1 auto' },
+                            on: inline ? {} : { mousedown: (e) => this._startMove(e) },
+                        },
+                        this.closeButton && !inline && {
+                            tag: 'button', cls: 're-dialog-close', text: '✕', attrs: { type: 'button', title: 'Close', 'aria-label': 'Close' },
+                            style: { border: 'none', background: 'transparent', fontSize: '16px', cursor: 'pointer', color: '#666', padding: '0 4px' },
+                            on: { click: () => this.close() },
+                        },
+                    ].filter(Boolean),
+                },
+                {
+                    // The content scrolls; the title and the buttons stay in view.
+                    cls: 're-dialog-body', ref: (n) => { this.body = n; },
+                    style: { overflowY: 'auto', flex: '1 1 auto', minHeight: '0', paddingRight: '4px' },
+                    children: this.content(),
+                },
+                {
+                    cls: 're-dialog-footer', ref: (n) => { this.footer = n; },
+                    style: { display: this.buttons.length ? 'flex' : 'none', justifyContent: 'flex-end', alignItems: 'center', gap: '8px', marginTop: '16px', flex: '0 0 auto' },
+                    children: this.buttons.map(b => ({
+                        tag: 'button', text: b.label, attrs: { type: b.submit ? 'submit' : 'button' },
+                        style: b.primary ? Dialog.PRIMARY_BUTTON_STYLE : null,
+                        on: b.submit ? {} : { click: () => b.action(this) },
+                    })),
+                },
+            ],
+        };
+        if (inline) {
+            host.appendChild(el(frame, this.doc));
+        } else {
+            this.overlay = el({
+                cls: 're-dialog-overlay', style: Dialog.OVERLAY_STYLE,
+                on: { mousedown: (e) => { if (e.target === this.overlay) this.close(); } },
+                children: [frame],
+            }, this.doc);
+            this.doc.body.appendChild(this.overlay);
+        }
+        this.frame.querySelector?.('input:not([type=checkbox]), select, textarea')?.focus();
+        return this;
+    }
+
+    /** Add to the footer (a host's own buttons, a pager), and show it. */
+    addToFooter(...nodes) {
+        this.footer.append(...nodes);
+        this.footer.style.display = 'flex';
+        return this;
+    }
+
+    /** Add beside the title (a link), before the ✕. */
+    addToTitle(...nodes) {
+        const close = this.titleBar.children[1] ?? null;
+        for (const node of nodes) this.titleBar.insertBefore(node, close);
+        return this;
+    }
+
+    /** Whether it is showing. */
+    get isOpen() { return !!(this.overlay || (this._host && this.frame?.parentNode)); }
+
+    /** Close it (once), telling onClose whether it was applied. */
+    close() {
+        if (!this.isOpen) return;
+        (this.overlay ?? this.frame).remove();
+        this.overlay = null;
+        this._host = null;
+        this.onClose?.(this._applied);
+    }
+
+    /**
+     * Move the dialog by its title: from then on it sits where it was dropped
+     * (fixed position), kept inside the window.
+     * @protected
+     */
+    _startMove(e) {
+        if (e.button !== 0 || !this.frame) return;
+        e.preventDefault();
+        const view = this.doc.defaultView;
+        const box = this.frame.getBoundingClientRect();
+        const grab = { x: e.clientX - box.left, y: e.clientY - box.top };
+        Object.assign(this.frame.style, { position: 'fixed', margin: '0', left: `${box.left}px`, top: `${box.top}px` });
+        const move = (ev) => {
+            const width = view?.innerWidth ?? Infinity, height = view?.innerHeight ?? Infinity;
+            const left = Math.min(Math.max(0, ev.clientX - grab.x), Math.max(0, width - box.width));
+            const top = Math.min(Math.max(0, ev.clientY - grab.y), Math.max(0, height - 40));
+            this.frame.style.left = `${left}px`;
+            this.frame.style.top = `${top}px`;
+        };
+        const end = () => {
+            this.doc.removeEventListener('mousemove', move);
+            this.doc.removeEventListener('mouseup', end);
+        };
+        this.doc.addEventListener('mousemove', move);
+        this.doc.addEventListener('mouseup', end);
+    }
+
+    static OVERLAY_STYLE = {
+        position: 'fixed', inset: '0', background: 'rgba(0,0,0,0.25)', zIndex: '10001',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'sans-serif',
+    };
+
+    static FRAME_STYLE = {
+        background: '#fff', color: '#222', border: '1px solid #bbb', borderRadius: '6px', padding: '16px 18px',
+        minWidth: '360px', maxWidth: '90vw', maxHeight: '90vh', boxSizing: 'border-box',
+        display: 'flex', flexDirection: 'column',
+        boxShadow: '0 6px 24px rgba(0,0,0,0.2)', fontSize: '12px',
+    };
+
+    static SIZE_STYLE = {
+        tall: { height: '85vh', width: 'min(1100px, 90vw)' },
+        wide: { width: '90vw' },
+    };
+
+    /** In a host: fills it, as content, not a floating box. */
+    static INLINE_STYLE = {
+        display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box', padding: '10px 12px', fontSize: '12px',
+    };
+
+    static PRIMARY_BUTTON_STYLE = {
+        background: '#0066cc', color: '#fff', border: '1px solid #0066cc', borderRadius: '3px', padding: '4px 14px',
+    };
+}

package/src/charting/DuplicatesDialog.js

@@ -0,0 +1,108 @@
+import { el } from '../workspace/dom.js';
+import { Dialog } from './Dialog.js';
+
+/**
+ * DuplicatesDialog — the groups Find likely duplicates… found, a row each:
+ * a box to tick it, its message (choosing it shows it: `onReveal`), and
+ * Merge…. It stays open while they are merged: **Merge selected** merges the
+ * ticked groups one after another, and after each merge the list is found
+ * again (`refind`), so what was merged leaves it. Any modeller lists its
+ * duplicates this way.
+ *
+ * `merge(group)` does one group's merge (asking what it must: MergeCompareDialog)
+ * and resolves to whether it merged.
+ */
+export class DuplicatesDialog extends Dialog {
+    /**
+     * @param {Object} options
+     * @param {Array<{ids: string[], message: string}>} options.groups - What was found (model-check findings)
+     * @param {(group) => (boolean|Promise<boolean>)} options.merge
+     * @param {() => Array<Object>} [options.refind] - The groups found again, after a merge (else those left)
+     * @param {(group) => void} [options.onReveal]
+     * @param {string} [options.empty] - What an empty list says
+     * @param {Document} [options.document]
+     */
+    constructor({ groups, merge, refind = null, onReveal = () => {}, empty = 'No likely duplicates.', document: doc = globalThis.document }) {
+        super({
+            title: DuplicatesDialog.titleFor(groups),
+            closeButton: true,
+            document: doc,
+            buttons: [
+                { label: 'Merge selected', primary: true, action: () => this.mergeSelected() },
+                { label: 'Close', action: (dialog) => dialog.close() },
+            ],
+        });
+        Object.assign(this, { groups, mergeGroup: merge, refind, onReveal, empty });
+        /** The groups ticked, by key. */
+        this.ticked = new Set();
+    }
+
+    /** "Likely duplicates: n groups". */
+    static titleFor(groups) {
+        return `Likely duplicates: ${groups.length} group${groups.length === 1 ? '' : 's'}`;
+    }
+
+    /** A group's key: its members. */
+    static keyOf(group) {
+        return group.ids.join('\u0000');
+    }
+
+    content() {
+        return [this._list()];
+    }
+
+    /** The rows. @private */
+    _list() {
+        return {
+            cls: 're-duplicates', style: { display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '440px' },
+            children: this.groups.length ? this.groups.map(group => {
+                const key = DuplicatesDialog.keyOf(group);
+                return {
+                    attrs: { 'data-group': key }, style: { display: 'flex', gap: '6px', alignItems: 'center' },
+                    children: [
+                        {
+                            tag: 'input', attrs: { type: 'checkbox', 'aria-label': 'Merge this group', checked: this.ticked.has(key) || null },
+                            on: { change: (e) => { if (e.target.checked) this.ticked.add(key); else this.ticked.delete(key); } },
+                        },
+                        {
+                            tag: 'button', attrs: { type: 'button', title: 'Show it' }, text: `⚠ ${group.message}`,
+                            style: { flex: '1', textAlign: 'left', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', background: '#fff6e5', cursor: 'pointer' },
+                            on: { click: () => this.onReveal(group) },
+                        },
+                        { tag: 'button', attrs: { type: 'button', 'data-action': 'Merge…' }, text: 'Merge…', style: { padding: '4px 8px', cursor: 'pointer' }, on: { click: () => this.mergeOne(group) } },
+                    ],
+                };
+            }) : [{ text: this.empty }],
+        };
+    }
+
+    /** Merge one group (asking what it must); the list is found again. Resolves to whether it merged. */
+    async mergeOne(group) {
+        const merged = await this.mergeGroup(group);
+        if (merged) this.refresh([group]);
+        return !!merged;
+    }
+
+    /** Merge the ticked groups, one after another; the list is found again. Resolves to how many merged. */
+    async mergeSelected() {
+        const chosen = this.groups.filter(g => this.ticked.has(DuplicatesDialog.keyOf(g)));
+        const done = [];
+        for (const group of chosen) {
+            if (await this.mergeGroup(group)) done.push(group);
+        }
+        if (done.length) this.refresh(done);
+        return done.length;
+    }
+
+    /** Show the groups as they are now: found again, or without those merged. */
+    refresh(merged = []) {
+        const gone = new Set(merged.map(DuplicatesDialog.keyOf));
+        this.groups = this.refind ? this.refind() : this.groups.filter(g => !gone.has(DuplicatesDialog.keyOf(g)));
+        const still = new Set(this.groups.map(DuplicatesDialog.keyOf));
+        this.ticked = new Set([...this.ticked].filter(k => still.has(k)));
+        this.title = DuplicatesDialog.titleFor(this.groups);
+        const heading = this.titleBar?.querySelector?.('h3') ?? this.titleBar?.children?.[0];
+        if (heading) heading.textContent = this.title;
+        this.body?.replaceChildren(el(this._list(), this.doc));
+    }
+}

package/src/charting/FormDialog.js

@@ -1,4 +1,5 @@
 import { el } from '../workspace/dom.js';
+import { Dialog } from './Dialog.js';
 import { ColorField } from './ColorField.js';
 import { RowsField } from './RowsField.js';
 
@@ -34,15 +35,16 @@ const INHERIT = '__inherit__';
  *   inherited field reads as `undefined`. `FormDialog.many` uses it for a form
  *   that edits several items at once.
  *
- * The dialog fits the window: its fields scroll between the title and the
- * buttons, which stay in view, and it moves by dragging its title. A textarea
- * scrolls inside its own box and can be resized taller.
+ * A Dialog (its frame: it fits the window, its fields scroll between the
+ * title and the buttons, which stay in view, and it moves by dragging its
+ * title), built as a <form>. A textarea scrolls inside its own box and can be
+ * resized taller.
  *
  * `validate(values)` may return a message to show inline instead of closing.
  * After open(), `controls[key]` is each field's control, for wiring fields that
  * depend on one another.
  */
-export class FormDialog {
+export class FormDialog extends Dialog {
     /**
      * @param {Object} options
      * @param {string} options.title
@@ -58,7 +60,13 @@ export class FormDialog {
      *   applied (false for Cancel, Escape or a click outside)
      */
     constructor({ title, description, fields, onApply, validate, submitLabel = 'Apply', cancelLabel = 'Cancel', idPrefix = 'form-dialog-', document: doc = document, onClose = null }) {
-        this.title = title;
+        super({
+            title, document: doc, onClose,
+            buttons: [
+                { label: cancelLabel, action: (dialog) => dialog.close() },
+                { label: submitLabel, primary: true, submit: true },
+            ],
+        });
         this.description = description;
         this.fields = fields;
         this.onApply = onApply;
@@ -66,107 +74,30 @@ export class FormDialog {
         this.submitLabel = submitLabel;
         this.cancelLabel = cancelLabel;
         this.idPrefix = idPrefix;
-        this.doc = doc;
-        this.onClose = onClose;
-        this._applied = false;
-        this.overlay = null;
         /** @type {Object<string, HTMLElement>} */
         this.controls = {};
         this._readers = [];
         this._error = null;
     }
 
-    open() {
-        this._readers = [];
-        this.controls = {};
-        const rows = this.fields.map(f => this._row(f));
-        this.overlay = el({
-            style: {
-                position: 'fixed', inset: '0', background: 'rgba(0,0,0,0.25)', zIndex: '10001',
-                display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'sans-serif',
-            },
-            on: { mousedown: (e) => { if (e.target === this.overlay) this.close(); } },
-            children: [{
-                tag: 'form',
-                attrs: { role: 'dialog', 'aria-label': this.title },
-                style: {
-                    background: '#fff', color: '#222', border: '1px solid #bbb', borderRadius: '6px', padding: '16px 18px',
-                    minWidth: '360px', maxWidth: '90vw', maxHeight: '90vh', boxSizing: 'border-box',
-                    display: 'flex', flexDirection: 'column',
-                    boxShadow: '0 6px 24px rgba(0,0,0,0.2)', fontSize: '12px',
-                },
-                ref: (n) => { this.form = n; },
-                on: {
-                    submit: (e) => { e.preventDefault(); this._apply(); },
-                    keydown: (e) => { if (e.key === 'Escape') this.close(); },
-                },
-                children: [
-                    {
-                        // The title is the handle that moves the dialog.
-                        tag: 'h3', text: this.title, attrs: { title: 'Drag to move' },
-                        style: { margin: '0 0 8px', fontSize: '14px', cursor: 'move', userSelect: 'none', flex: '0 0 auto' },
-                        on: { mousedown: (e) => this._startMove(e) },
-                    },
-                    {
-                        // The fields scroll; the title and the buttons stay in view.
-                        style: { overflowY: 'auto', flex: '1 1 auto', minHeight: '0', paddingRight: '4px' },
-                        ref: (n) => { this.body = n; },
-                        children: [
-                            this.description && { text: this.description, style: { fontSize: '11px', color: '#666', margin: '0 0 10px', whiteSpace: 'pre-line' } },
-                            { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '8px 12px', alignItems: 'center' }, children: rows.flat() },
-                            { attrs: { role: 'alert' }, style: { color: '#c0392b', fontSize: '12px', marginTop: '8px', display: 'none' }, ref: (n) => { this._error = n; } },
-                        ].filter(Boolean),
-                    },
-                    {
-                        style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '16px', flex: '0 0 auto' },
-                        children: [
-                            { tag: 'button', attrs: { type: 'button' }, text: this.cancelLabel, on: { click: () => this.close() } },
-                            {
-                                tag: 'button', attrs: { type: 'submit' }, text: this.submitLabel,
-                                style: { background: '#0066cc', color: '#fff', border: '1px solid #0066cc', borderRadius: '3px', padding: '4px 14px' },
-                            },
-                        ],
-                    },
-                ].filter(Boolean),
-            }],
-        }, this.doc);
-        this.doc.body.appendChild(this.overlay);
-        this.overlay.querySelector('input:not([type=checkbox]), select, textarea')?.focus();
-        return this;
-    }
+    get frameTag() { return 'form'; }
 
-    /**
-     * Move the dialog by its title: from then on it sits where it was dropped
-     * (fixed position), kept inside the window.
-     * @protected
-     */
-    _startMove(e) {
-        if (e.button !== 0 || !this.form) return;
-        e.preventDefault();
-        const view = this.doc.defaultView;
-        const box = this.form.getBoundingClientRect();
-        const grab = { x: e.clientX - box.left, y: e.clientY - box.top };
-        Object.assign(this.form.style, { position: 'fixed', margin: '0', left: `${box.left}px`, top: `${box.top}px` });
-        const move = (ev) => {
-            const width = view?.innerWidth ?? Infinity, height = view?.innerHeight ?? Infinity;
-            const left = Math.min(Math.max(0, ev.clientX - grab.x), Math.max(0, width - box.width));
-            const top = Math.min(Math.max(0, ev.clientY - grab.y), Math.max(0, height - 40));
-            this.form.style.left = `${left}px`;
-            this.form.style.top = `${top}px`;
-        };
-        const end = () => {
-            this.doc.removeEventListener('mousemove', move);
-            this.doc.removeEventListener('mouseup', end);
-        };
-        this.doc.addEventListener('mousemove', move);
-        this.doc.addEventListener('mouseup', end);
+    /** The dialog's <form>: its frame. */
+    get form() { return this.frame; }
+
+    frameEvents() {
+        return { submit: (e) => { e.preventDefault(); this._apply(); } };
     }
 
-    close() {
-        if (!this.overlay) return;
-        this.overlay.remove();
-        this.overlay = null;
-        this.onClose?.(this._applied);
+    content() {
+        this._readers = [];
+        this.controls = {};
+        const rows = this.fields.map(f => this._row(f));
+        return [
+            this.description && { text: this.description, style: { fontSize: '11px', color: '#666', margin: '0 0 10px', whiteSpace: 'pre-line' } },
+            { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '8px 12px', alignItems: 'center' }, children: rows.flat() },
+            { attrs: { role: 'alert' }, style: { color: '#c0392b', fontSize: '12px', marginTop: '8px', display: 'none' }, ref: (n) => { this._error = n; } },
+        ].filter(Boolean);
     }
 
     values() {

package/src/charting/InteractionManager.js

@@ -624,8 +624,11 @@ export class InteractionManager {
         const engine = this._engine;
         if (!engine.renderer || !engine.renderer.svg) return;
         if (!engine.renderer.supportsSceneGraph) return;
+        const zoom = engine.options?.zoom;
+        if (zoom === false) return;
 
         engine._svgZoom = new SvgZoom(engine.container, engine.renderer.svg, {
+            wheelModifier: zoom?.wheelModifier ?? null,
             clientToSvgPoint: (clientX, clientY) => engine._clientToSvgPoint(clientX, clientY),
             hitTest: (clientX, clientY) => engine.hitTest(clientX, clientY),
             is3D: () => engine._chart3D,

package/src/charting/Legend.js

@@ -13,14 +13,49 @@ export class Legend {
      * @param {number} [options.itemHeight=20]
      * @param {number} [options.markerSize=10]
      * @param {string} [options.fontSize='12px']
+     * @param {'square'|'circle'} [options.marker='square'] - A circle for a chart of points (scatter, bubble)
+     * @param {boolean} [options.inset=false] - Drawn over the plot: on a backing, so it reads over the data
      */
-    constructor({ items, x, y, itemHeight = 20, markerSize = 10, fontSize = '12px' }) {
+    constructor({ items, x, y, itemHeight = 20, markerSize = 10, fontSize = '12px', marker = 'square', inset = false }) {
         this.items = items;
         this.x = x;
         this.y = y;
         this.itemHeight = itemHeight;
         this.markerSize = markerSize;
         this.fontSize = fontSize;
+        this.marker = marker;
+        this.inset = inset;
+    }
+
+    /**
+     * A legend for a plot `box` on a drawing `drawingWidth` wide: to the right
+     * of the plot when it fits there, otherwise inside the plot's top-right
+     * corner (inset, on a backing). A chart's plot usually fills its drawing,
+     * so "to the right" alone would put the legend off the edge.
+     * @param {{x:number, y:number, width:number}} box - The plot area
+     * @param {number} drawingWidth - The renderer's width
+     * @param {object} options - As the constructor's, without x and y
+     */
+    static beside(box, drawingWidth, options) {
+        const legend = new Legend({ ...options, x: 0, y: 0 });
+        const { width } = legend.size();
+        const outside = box.x + box.width + 20;
+        if (!(drawingWidth > 0) || outside + width <= drawingWidth) {
+            legend.x = outside;
+            legend.y = box.y;
+        } else {
+            legend.inset = true;
+            legend.x = box.x + box.width - width - 10;
+            legend.y = box.y + 10;
+        }
+        return legend;
+    }
+
+    /** Its size: the marker and the widest label (a character is about 0.6 em), a row per item. */
+    size() {
+        const px = parseFloat(this.fontSize) || 12;
+        const longest = Math.max(0, ...this.items.map(item => String(this._label(item)).length));
+        return { width: this.markerSize + 5 + longest * px * 0.6, height: this.items.length * this.itemHeight };
     }
 
     /** Label text for an item — uses `label` or `name`. */
@@ -33,6 +68,10 @@ export class Legend {
      * @param {*} renderer a renderer implementing .rect() and .text()
      */
     draw(renderer) {
+        if (this.inset) {
+            const { width, height } = this.size();
+            renderer.rect(this.x - 6, this.y - 6, width + 12, height + 2, 'rgba(255,255,255,0.85)', '#ddd');
+        }
         let currentY = this.y;
         for (const item of this.items) {
             const hidden = !!item.hidden;
@@ -44,7 +83,11 @@ export class Legend {
                 attrs.dataIndex = item.dataIndex;
             }
 
-            renderer.rect(this.x, currentY, this.markerSize, this.markerSize, color, null, attrs);
+            if (this.marker === 'circle') {
+                renderer.circle(this.x + this.markerSize / 2, currentY + this.markerSize / 2, this.markerSize / 2, color, null, attrs);
+            } else {
+                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',

package/src/charting/MergeCompareDialog.js

@@ -0,0 +1,81 @@
+import { el } from '../workspace/dom.js';
+import { FormDialog } from './FormDialog.js';
+
+/**
+ * MergeCompareDialog — things about to be merged, side by side: a column
+ * each, a row for each thing they have (type, documentation, each property,
+ * relationships …), the rows where they differ marked; under it, the choices
+ * a merge needs (which one is kept, which documentation, which value of a
+ * property). OK merges; Cancel leaves them be. Any modeller's merge asks this
+ * way (the ArchiMate canvas's elements, a data model's entities).
+ *
+ * `ask()` resolves to the choices' values, or null when cancelled.
+ */
+export class MergeCompareDialog {
+    /**
+     * @param {Object} options
+     * @param {string} options.title
+     * @param {string[]} options.columns - Each thing's heading
+     * @param {Array<{label: string, values: string[]}>} options.rows - What each has, in column order ('' for nothing)
+     * @param {Array<Object>} [options.fields] - The choices (FormDialog fields)
+     * @param {string} [options.description]
+     * @param {Document} [options.document]
+     */
+    constructor({ title, columns, rows, fields = [], description = '', document: doc = globalThis.document }) {
+        Object.assign(this, { title, columns, rows, fields, description, document: doc });
+    }
+
+    /** Whether a row's values are not all the same. */
+    static differs(row) {
+        return new Set(row.values.map(v => String(v ?? '').trim())).size > 1;
+    }
+
+    /** Whether any row differs: if none does, there is nothing to look at before merging. */
+    get hasDifferences() {
+        return this.rows.some(row => MergeCompareDialog.differs(row));
+    }
+
+    /** The side-by-side table. */
+    table() {
+        const cell = (text, extra = {}) => ({
+            tag: 'td', text: text || '—',
+            style: { padding: '3px 6px', borderBottom: '1px solid #eee', verticalAlign: 'top', whiteSpace: 'pre-wrap', color: text ? null : '#999', ...extra },
+        });
+        return el({
+            style: { gridColumn: '1 / -1', overflowX: 'auto', maxWidth: '80vw' },
+            children: [{
+                tag: 'table', attrs: { 'data-merge-compare': '' }, style: { borderCollapse: 'collapse', fontSize: '12px', minWidth: '420px' },
+                children: [
+                    { tag: 'thead', children: [{ tag: 'tr', children: [{ tag: 'th', text: '' }, ...this.columns.map(c => ({ tag: 'th', text: c, style: { textAlign: 'left', padding: '3px 6px', borderBottom: '2px solid #ccc' } }))] }] },
+                    {
+                        tag: 'tbody',
+                        children: this.rows.map(row => {
+                            const differs = MergeCompareDialog.differs(row);
+                            return {
+                                tag: 'tr', attrs: { 'data-differs': differs ? '' : null }, style: { background: differs ? '#fff3cd' : null },
+                                children: [cell(`${differs ? '≠ ' : ''}${row.label}`, { fontWeight: 'bold', color: '#333' }), ...row.values.map(v => cell(v))],
+                            };
+                        }),
+                    },
+                ],
+            }],
+        }, this.document);
+    }
+
+    /** Show it (over the page, or in `host`); resolves to the choices' values on OK, null on Cancel. */
+    ask(host = null) {
+        return new Promise((resolve) => {
+            new FormDialog({
+                title: this.title,
+                description: this.description,
+                fields: [{ key: 'compare', label: '', type: 'custom', element: this.table(), read: () => null }, ...this.fields],
+                submitLabel: 'OK, merge',
+                idPrefix: 'merge-compare-',
+                document: this.document,
+                onApply: ({ compare, ...choices }) => resolve(choices),
+                // A form closes before it applies: closed unapplied (Cancel, Escape, a click outside) is no.
+                onClose: (applied) => { if (!applied) resolve(null); },
+            }).open(host);
+        });
+    }
+}