@peter.prib/renderengine 0.4.0 → 0.7.0

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);
+        });
+    }
+}

package/src/charting/PopupMenu.js

@@ -2,7 +2,8 @@ import { el } from '../workspace/dom.js';
 
 /**
  * PopupMenu — the one popup/context menu: a small menu at a screen position,
- * closed by choosing an item or clicking elsewhere. One is open at a time.
+ * closed by choosing an item, clicking elsewhere, Escape, or scrolling (it
+ * would no longer be beside what it was opened on). One is open at a time.
  * Editor menus, the graph engine's ContextMenu and the model tree's menus all
  * render through it.
  *
@@ -29,8 +30,14 @@ export class PopupMenu {
         }
         // Registered after the opening click has finished propagating.
         const dismiss = () => PopupMenu.close();
-        setTimeout(() => doc.addEventListener('click', dismiss, { once: true }), 0);
-        PopupMenu._open = { menu, dismiss, doc };
+        const onKey = (e) => { if (e.key === 'Escape') PopupMenu.close(); };
+        setTimeout(() => {
+            if (PopupMenu._open?.menu !== menu) return;   // closed meanwhile
+            doc.addEventListener('click', dismiss, { once: true });
+            doc.addEventListener('scroll', dismiss, { once: true, capture: true });
+            doc.addEventListener('keydown', onKey);
+        }, 0);
+        PopupMenu._open = { menu, dismiss, onKey, doc };
         return menu;
     }
 
@@ -68,6 +75,8 @@ export class PopupMenu {
         if (!open) return;
         open.menu.remove();
         open.doc.removeEventListener('click', open.dismiss);
+        open.doc.removeEventListener('scroll', open.dismiss, { capture: true });
+        open.doc.removeEventListener('keydown', open.onKey);
         PopupMenu._open = null;
     }
 

package/src/charting/SettingsDialog.js

@@ -1,5 +1,5 @@
 import { FormDialog } from './FormDialog.js';
-import { MODEL_SETTINGS_PROPERTIES } from './SettingsManager.js';
+import { MODEL_SETTINGS_PROPERTIES, TREE_SETTINGS_PROPERTIES } from './SettingsManager.js';
 import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
 
 /** Settings a model sets or inherits from the tool, and the tool sets for every model. */
@@ -33,6 +33,7 @@ export function showGlobalSettingsDialog(doc, settingsManager, modelId = 'defaul
             { type: 'heading', label: 'Tool' },
             { key: 'theme', label: 'Theme', type: 'select', value: tool.theme, choices: [['light', 'light'], ['dark', 'dark']] },
             { key: 'toolInvalidRelationships', label: checking.label, type: 'select', value: tool.invalidRelationships ?? checking.default, choices: checking.choices },
+            ...TREE_SETTINGS_PROPERTIES.map(({ key, label, type, min }) => ({ key, label, type, min, value: tool[key] })),
             { type: 'heading', label: 'Model' },
             ...inheritableFields(CHECKING, modelOwn, fromTool),
             { key: 'edgeRouting', label: 'Default edge routing', type: 'select', value: model.edgeRouting, choices: ROUTING_CHOICES },
@@ -43,7 +44,10 @@ export function showGlobalSettingsDialog(doc, settingsManager, modelId = 'defaul
         idPrefix: 'global-settings-',
         document: doc,
         onApply: ({ theme, toolInvalidRelationships, edgeRouting, gridSize, showGrid, ...rest }) => {
-            settingsManager.saveToolSettings({ theme, invalidRelationships: toolInvalidRelationships });
+            // A tree setting left empty keeps its value.
+            const tree = Object.fromEntries(TREE_SETTINGS_PROPERTIES.map(({ key }) => [key, rest[key]])
+                .filter(([, value]) => Number.isFinite(value)).map(([key, value]) => [key, Math.max(1, Math.trunc(value))]));
+            settingsManager.saveToolSettings({ theme, invalidRelationships: toolInvalidRelationships, ...tree });
             // The model's own choice, or undefined to inherit the tool's.
             settingsManager.saveModelSettings(modelId, readInheritableFields(CHECKING, rest));
             // Observers (e.g. DiagramTabs) re-render on these notifications.

package/src/charting/SettingsManager.js

@@ -1,12 +1,13 @@
 import { SettingsCascade } from './SettingsCascade.js';
 import { LocalJsonStore } from './storage/LocalJsonStore.js';
+import { ModelTree } from './modelTree/ModelTree.js';
 
 /**
  * SettingsManager — editor settings across tool, model and view levels.
  *
  * Hierarchy: Tool (global) ← Model (per model) ← View (per tab, overrides)
  *
- * Tool settings (localStorage): theme, zoom
+ * Tool settings (localStorage): theme, zoom, how the model tree searches and shows
  * Model settings (localStorage, per model id): edge routing, grid, watermark
  * View settings (on the view object): overrides of model settings, plus title/background
  *
@@ -43,9 +44,16 @@ export const VIEW_SETTINGS_DEFAULTS = Object.freeze({
     backgroundImage: '',
 });
 
+/** How the model tree searches and shows, for every model (the tool level); `option` is ModelTree's name for it. */
+export const TREE_SETTINGS_PROPERTIES = Object.freeze([
+    { key: 'treeLeafLimit', option: 'leafLimit', label: 'Tree: leaves shown per folder', type: 'number', default: ModelTree.LEAF_LIMIT, min: 1 },
+    { key: 'treeSearchMinChars', option: 'minFilterChars', label: 'Tree: search from (characters)', type: 'number', default: ModelTree.MIN_FILTER_CHARS, min: 1 },
+]);
+
 export const TOOL_SETTINGS_DEFAULTS = Object.freeze({
     theme: 'light',
     defaultZoom: 1,
+    ...Object.fromEntries(TREE_SETTINGS_PROPERTIES.map(p => [p.key, p.default])),
 });
 
 export class SettingsManager {
@@ -93,6 +101,11 @@ export class SettingsManager {
         return { ...this._toolSettings };
     }
 
+    /** The model tree's options from the tool settings ({leafLimit, minFilterChars}), for ModelTree. */
+    treeOptions() {
+        return Object.fromEntries(TREE_SETTINGS_PROPERTIES.map(p => [p.option, this._toolSettings[p.key] ?? p.default]));
+    }
+
     // ── Model Settings (per-model defaults) ──
 
     /** The model level holds only what is set on it; unset settings come from the tool level, then defaults. */