@peter.prib/renderengine 0.5.0 → 0.7.0

package/src/charting/modelTree/ModelTree.js

@@ -1,202 +1,239 @@
-import { treeModeRegistry } from '../../treeModeCatalog.js';
-import { buildTypeCategoryTree, buildPropertyTree } from './buildFilterTrees.js';
-
-/**
- * Pure-logic model tree orchestrator. Holds model, manages grouping mode,
- * filter text, and selection. DOM shells (ModelTreePanel/AnalysisPanel)
- * use this via getters/setters and onSelectionChange callbacks.
- */
-export class ModelTree {
-    constructor(model, { mode = 'byLayer', viewId = null } = {}) {
-        this.model = model;
-        this._filterText = '';
-        this._typeFilter = null;        // Set<string> | null (null = no filter = all types shown)
-        this._specializationFilter = null;
-        this._propertyFilter = null;
-        /** Whether the search text is looked for in descriptions too. */
-        this._inDescriptions = false;
-        /** What the search covers: 'model' (every element) or 'view' (those on the diagram in front). */
-        this._searchScope = 'model';
-        this._selectedId = null;
-        this._selectedKind = null;
-        this._onSelectionChange = [];
-        /** Which tree folders are open, by node id (TreeBuilder openState), kept while the tree is redrawn. */
-        this.openFolders = new Map();
-        this._selectedViewId = viewId || (model.views().length > 0 ? model.views()[0].id : null);
-        this.setMode(mode);
-    }
-
-    getSelectedView() {
-        return this._selectedViewId ? this.model.getView?.(this._selectedViewId) : null;
-    }
-
-    setView(viewId) {
-        // null means "show all elements from the model"
-        if (viewId !== null) {
-            const view = this.model.getView?.(viewId);
-            if (!view) {
-                throw new Error(`Unknown view: "${viewId}"`);
-            }
-        }
-        this._selectedViewId = viewId;
-        this._rebuild();
-    }
-
-    getAvailableViews() {
-        return this.model.views();
-    }
-
-    setMode(key) {
-        const entry = treeModeRegistry.get(key);
-        if (!entry) {
-            throw new Error(`Unknown tree mode: "${key}"`);
-        }
-        this._mode = new entry.TreeModeClass();
-        this._rebuild();
-    }
-
-    setFilter(text) {
-        this._filterText = text;
-        this._rebuild();
-    }
-
-    setTypeFilter(typeIds) {
-        this._typeFilter = typeIds instanceof Set ? typeIds : (typeIds ? new Set(typeIds) : null);
-        this._rebuild();
-    }
-
-    setSpecializationFilter(specIds) {
-        this._specializationFilter = specIds instanceof Set ? specIds : (specIds ? new Set(specIds) : null);
-        this._rebuild();
-    }
-
-    setPropertyFilter(propIds) {
-        this._propertyFilter = propIds instanceof Set ? propIds : (propIds ? new Set(propIds) : null);
-        this._rebuild();
-    }
-
-    /** Look for the search text in descriptions (documentation) too, or not. */
-    setSearchInDescriptions(on) {
-        this._inDescriptions = !!on;
-        this._rebuild();
-    }
-
-    getSearchInDescriptions() { return this._inDescriptions; }
-
-    /** What the search covers: 'model' (every element) or 'view' (only those on the diagram in front). */
-    setSearchScope(scope) {
-        if (!ModelTree.SEARCH_SCOPES.some(([key]) => key === scope)) throw new Error(`Unknown search scope: "${scope}"`);
-        this._searchScope = scope;
-        this._rebuild();
-    }
-
-    getSearchScope() { return this._searchScope; }
-
-    /** The filters on now (null: none), for a filter dialog to show. */
-    getTypeFilter() { return this._typeFilter; }
-    getSpecializationFilter() { return this._specializationFilter; }
-    getPropertyFilter() { return this._propertyFilter; }
-
-    select(id, kind = 'element') {
-        this._selectedId = id;
-        this._selectedKind = kind;
-        this._notifySelectionChange();
-    }
-
-    getSelectedId() { return this._selectedId; }
-    getSelectedKind() { return this._selectedKind; }
-    getFilterText() { return this._filterText; }
-
-    /**
-     * Get the type/specialization hierarchy tree for this model.
-     * Ready to pass to CheckboxTreeSelector.
-     */
-    getAvailableTypeTree() {
-        return buildTypeCategoryTree(this.model);
-    }
-
-    /**
-     * Get the property name/value hierarchy tree for this model.
-     * Ready to pass to CheckboxTreeSelector.
-     */
-    getAvailablePropertyTree() {
-        return buildPropertyTree(this.model);
-    }
-
-    buildGroups() {
-        const view = this.getSelectedView();
-        const dataSource = view || this.model;
-        return this._mode.buildGroups(dataSource, this._filters());
-    }
-
-    onSelectionChange(callback) {
-        this._onSelectionChange.push(callback);
-        return () => {
-            const idx = this._onSelectionChange.indexOf(callback);
-            if (idx !== -1) this._onSelectionChange.splice(idx, 1);
-        };
-    }
-
-    _rebuild() {
-        // Consumers call buildGroups() as needed; listeners hear that the filters changed.
-        for (const cb of this._onFilterChange ?? []) cb(this);
-    }
-
-    /** Whether any filter is on (text, type, specialization or property). */
-    get filtering() {
-        return !!(this._filterText || this._typeFilter?.size || this._specializationFilter?.size || this._propertyFilter?.size);
-    }
-
-    /** What every mode filters by. @private */
-    _filters() {
-        return {
-            filterText: this._filterText, typeIds: this._typeFilter, specializationIds: this._specializationFilter,
-            propertyIds: this._propertyFilter, inDescriptions: this._inDescriptions,
-        };
-    }
-
-    /**
-     * The model elements the tree's filters keep, or null when no filter is
-     * on: over the whole model, or with the 'view' scope only those on the
-     * diagram in front.
-     * @returns {Set<string>|null}
-     */
-    matchingElementIds() {
-        if (!this.filtering) return null;
-        const groups = this._mode.buildGroups(this.model, this._filters());
-        const ids = new Set();
-        const walk = (items) => { for (const item of items ?? []) { if (item.kind === 'element') ids.add(item.id); walk(item.items); walk(item.children); } };
-        for (const group of groups) walk(group.items);
-        const onView = this._searchScope === 'view' ? this._elementIdsOnView() : null;
-        return onView ? new Set([...ids].filter(id => onView.has(id))) : ids;
-    }
-
-    /** The model elements drawn on the diagram in front, or null when there is none. @private */
-    _elementIdsOnView() {
-        const view = this.model.currentView;
-        if (!view?.elementInstances) return null;
-        return new Set([...view.elementInstances.values()].map(i => i.elementId).filter(Boolean));
-    }
-
-    /** Call `fn(tree)` whenever a filter changes. Returns an unsubscribe function. */
-    onFilterChange(fn) {
-        (this._onFilterChange ??= []).push(fn);
-        return () => { this._onFilterChange = this._onFilterChange.filter(f => f !== fn); };
-    }
-
-    _notifySelectionChange() {
-        const data = {
-            id: this._selectedId,
-            kind: this._selectedKind,
-            element: this._selectedKind === 'element' ? this.model.getElement(this._selectedId) : null,
-            relationship: this._selectedKind === 'relationship' ? this.model.getRelationship(this._selectedId) : null,
-            view: this._selectedKind === 'view' ? this.model.getView?.(this._selectedId) : null,
-        };
-        for (const cb of this._onSelectionChange) {
-            cb(data);
-        }
-    }
-}
-
-/** What the search can cover: [key, label]. */
-ModelTree.SEARCH_SCOPES = Object.freeze([['model', 'Whole model'], ['view', 'This diagram']]);
+import { treeModeRegistry } from '../../treeModeCatalog.js';
+import { buildTypeCategoryTree, buildPropertyTree } from './buildFilterTrees.js';
+import { TreeViewMode } from './TreeViewMode.js';
+
+/**
+ * Pure-logic model tree orchestrator. Holds model, manages grouping mode,
+ * filter text, and selection. DOM shells (ModelTreePanel/AnalysisPanel)
+ * use this via getters/setters and onSelectionChange callbacks.
+ */
+export class ModelTree {
+    /**
+     * @param {Object} model
+     * @param {Object} [options]
+     * @param {number} [options.minFilterChars] - The search text filters from this many characters on (shorter: no text filter)
+     * @param {number} [options.leafLimit] - How many leaves a folder shows before a "more" row (the rest on asking)
+     */
+    constructor(model, { mode = 'byLayer', viewId = null, minFilterChars = ModelTree.MIN_FILTER_CHARS, leafLimit = ModelTree.LEAF_LIMIT } = {}) {
+        this.model = model;
+        this._filterText = '';
+        this.minFilterChars = minFilterChars;
+        this.leafLimit = leafLimit;
+        this._typeFilter = null;        // Set<string> | null (null = no filter = all types shown)
+        this._specializationFilter = null;
+        this._propertyFilter = null;
+        /** Whether the search text is looked for in descriptions too. */
+        this._inDescriptions = false;
+        /** What the search covers: 'model' (every element) or 'view' (those on the diagram in front). */
+        this._searchScope = 'model';
+        this._selectedId = null;
+        this._selectedKind = null;
+        this._onSelectionChange = [];
+        /** Which tree folders are open, by node id (TreeBuilder openState), kept while the tree is redrawn. */
+        this.openFolders = new Map();
+        this._selectedViewId = viewId || (model.views().length > 0 ? model.views()[0].id : null);
+        this.setMode(mode);
+    }
+
+    getSelectedView() {
+        return this._selectedViewId ? this.model.getView?.(this._selectedViewId) : null;
+    }
+
+    setView(viewId) {
+        // null means "show all elements from the model"
+        if (viewId !== null) {
+            const view = this.model.getView?.(viewId);
+            if (!view) {
+                throw new Error(`Unknown view: "${viewId}"`);
+            }
+        }
+        this._selectedViewId = viewId;
+        this._rebuild();
+    }
+
+    getAvailableViews() {
+        return this.model.views();
+    }
+
+    setMode(key) {
+        const entry = treeModeRegistry.get(key);
+        if (!entry) {
+            throw new Error(`Unknown tree mode: "${key}"`);
+        }
+        this._mode = new entry.TreeModeClass();
+        this._rebuild();
+    }
+
+    setFilter(text) {
+        this._filterText = text;
+        this._rebuild();
+    }
+
+    /**
+     * How the tree searches and shows: `minFilterChars` (the search text filters from this
+     * many characters on) and `leafLimit` (leaves a folder shows before its "more" row).
+     * Either may be left out.
+     */
+    setOptions({ minFilterChars = this.minFilterChars, leafLimit = this.leafLimit } = {}) {
+        this.minFilterChars = minFilterChars;
+        this.leafLimit = leafLimit;
+        this._rebuild();
+    }
+
+    /** The search text that filters: the text typed, or '' while it is shorter than minFilterChars. */
+    get filterText() {
+        return this._filterText.length >= this.minFilterChars ? this._filterText : '';
+    }
+
+    /**
+     * Whether something named (a view, a folder) is kept by the search text: in its name,
+     * or in its documentation when descriptions are searched. True with no text filtering.
+     */
+    textMatches(name, documentation = '') {
+        return TreeViewMode.textMatches(this.filterText, [name, ...(this._inDescriptions ? [documentation] : [])]);
+    }
+
+    setTypeFilter(typeIds) {
+        this._typeFilter = typeIds instanceof Set ? typeIds : (typeIds ? new Set(typeIds) : null);
+        this._rebuild();
+    }
+
+    setSpecializationFilter(specIds) {
+        this._specializationFilter = specIds instanceof Set ? specIds : (specIds ? new Set(specIds) : null);
+        this._rebuild();
+    }
+
+    setPropertyFilter(propIds) {
+        this._propertyFilter = propIds instanceof Set ? propIds : (propIds ? new Set(propIds) : null);
+        this._rebuild();
+    }
+
+    /** Look for the search text in descriptions (documentation) too, or not. */
+    setSearchInDescriptions(on) {
+        this._inDescriptions = !!on;
+        this._rebuild();
+    }
+
+    getSearchInDescriptions() { return this._inDescriptions; }
+
+    /** What the search covers: 'model' (every element) or 'view' (only those on the diagram in front). */
+    setSearchScope(scope) {
+        if (!ModelTree.SEARCH_SCOPES.some(([key]) => key === scope)) throw new Error(`Unknown search scope: "${scope}"`);
+        this._searchScope = scope;
+        this._rebuild();
+    }
+
+    getSearchScope() { return this._searchScope; }
+
+    /** The filters on now (null: none), for a filter dialog to show. */
+    getTypeFilter() { return this._typeFilter; }
+    getSpecializationFilter() { return this._specializationFilter; }
+    getPropertyFilter() { return this._propertyFilter; }
+
+    select(id, kind = 'element') {
+        this._selectedId = id;
+        this._selectedKind = kind;
+        this._notifySelectionChange();
+    }
+
+    getSelectedId() { return this._selectedId; }
+    getSelectedKind() { return this._selectedKind; }
+    getFilterText() { return this._filterText; }
+
+    /**
+     * Get the type/specialization hierarchy tree for this model.
+     * Ready to pass to CheckboxTreeSelector.
+     */
+    getAvailableTypeTree() {
+        return buildTypeCategoryTree(this.model);
+    }
+
+    /**
+     * Get the property name/value hierarchy tree for this model.
+     * Ready to pass to CheckboxTreeSelector.
+     */
+    getAvailablePropertyTree() {
+        return buildPropertyTree(this.model);
+    }
+
+    buildGroups() {
+        const view = this.getSelectedView();
+        const dataSource = view || this.model;
+        return this._mode.buildGroups(dataSource, this._filters());
+    }
+
+    onSelectionChange(callback) {
+        this._onSelectionChange.push(callback);
+        return () => {
+            const idx = this._onSelectionChange.indexOf(callback);
+            if (idx !== -1) this._onSelectionChange.splice(idx, 1);
+        };
+    }
+
+    _rebuild() {
+        // Consumers call buildGroups() as needed; listeners hear that the filters changed.
+        for (const cb of this._onFilterChange ?? []) cb(this);
+    }
+
+    /** Whether any filter is on (text, type, specialization or property). */
+    get filtering() {
+        return !!(this.filterText || this._typeFilter?.size || this._specializationFilter?.size || this._propertyFilter?.size);
+    }
+
+    /** What every mode filters by. @private */
+    _filters() {
+        return {
+            filterText: this.filterText, typeIds: this._typeFilter, specializationIds: this._specializationFilter,
+            propertyIds: this._propertyFilter, inDescriptions: this._inDescriptions,
+        };
+    }
+
+    /**
+     * The model elements the tree's filters keep, or null when no filter is
+     * on: over the whole model, or with the 'view' scope only those on the
+     * diagram in front.
+     * @returns {Set<string>|null}
+     */
+    matchingElementIds() {
+        if (!this.filtering) return null;
+        const groups = this._mode.buildGroups(this.model, this._filters());
+        const ids = new Set();
+        const walk = (items) => { for (const item of items ?? []) { if (item.kind === 'element') ids.add(item.id); walk(item.items); walk(item.children); } };
+        for (const group of groups) walk(group.items);
+        const onView = this._searchScope === 'view' ? this._elementIdsOnView() : null;
+        return onView ? new Set([...ids].filter(id => onView.has(id))) : ids;
+    }
+
+    /** The model elements drawn on the diagram in front, or null when there is none. @private */
+    _elementIdsOnView() {
+        const view = this.model.currentView;
+        if (!view?.elementInstances) return null;
+        return new Set([...view.elementInstances.values()].map(i => i.elementId).filter(Boolean));
+    }
+
+    /** Call `fn(tree)` whenever a filter changes. Returns an unsubscribe function. */
+    onFilterChange(fn) {
+        (this._onFilterChange ??= []).push(fn);
+        return () => { this._onFilterChange = this._onFilterChange.filter(f => f !== fn); };
+    }
+
+    _notifySelectionChange() {
+        const data = {
+            id: this._selectedId,
+            kind: this._selectedKind,
+            element: this._selectedKind === 'element' ? this.model.getElement(this._selectedId) : null,
+            relationship: this._selectedKind === 'relationship' ? this.model.getRelationship(this._selectedId) : null,
+            view: this._selectedKind === 'view' ? this.model.getView?.(this._selectedId) : null,
+        };
+        for (const cb of this._onSelectionChange) {
+            cb(data);
+        }
+    }
+}
+
+/** What the search can cover: [key, label]. */
+ModelTree.SEARCH_SCOPES = Object.freeze([['model', 'Whole model'], ['view', 'This diagram']]);
+/** The search text filters from this many characters on, unless a tree is given its own. */
+ModelTree.MIN_FILTER_CHARS = 3;
+/** The leaves a folder shows before its "more" row, unless a tree is given its own. */
+ModelTree.LEAF_LIMIT = 8;