@peter.prib/renderengine 0.2.5 → 0.2.6

package/src/charting/modelTree/ModelTree.js

@@ -1,164 +1,202 @@
-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;
-        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();
-    }
-
-    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, {
-            filterText: this._filterText,
-            typeIds: this._typeFilter,
-            specializationIds: this._specializationFilter,
-            propertyIds: this._propertyFilter,
-        });
-    }
-
-    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);
-    }
-
-    /**
-     * The model elements the tree's filters keep (over the whole model, not
-     * one view), or null when no filter is on.
-     * @returns {Set<string>|null}
-     */
-    matchingElementIds() {
-        if (!this.filtering) return null;
-        const groups = this._mode.buildGroups(this.model, {
-            filterText: this._filterText, typeIds: this._typeFilter,
-            specializationIds: this._specializationFilter, propertyIds: this._propertyFilter,
-        });
-        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);
-        return ids;
-    }
-
-    /** 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);
-        }
-    }
-}
+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']]);

package/src/charting/modelTree/ModelTreePanel.js

@@ -1,5 +1,9 @@
 import { treeModeRegistry } from '../../treeModeCatalog.js';
-import { CheckboxTreeSelector } from '../CheckboxTreeSelector.js';
+import { CheckboxTreeSelector, OptInCheckboxTreeSelector } from '../CheckboxTreeSelector.js';
+import { ModelTree } from './ModelTree.js';
+
+/** A property with more values than this lists them folded, with a box to find one. */
+const PROPERTY_VALUES_FOLDED_ABOVE = 10;
 import { TreeBuilder } from './TreeBuilder.js';
 import { typeGlyph } from '../archimate/typeGlyph.js';
 import { ArchimateNotation } from '../../archimate.js';
@@ -125,6 +129,28 @@ export function buildModelTreePanel(doc, { modelTree, onSelectElement = null, on
         box.style.cssText = 'width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;';
         box.addEventListener('input', () => { modelTree.setFilter(box.value.trim()); showMatches(); });
         panel.appendChild(box);
+
+        // What the search covers (the whole model, or the diagram in front) and whether it reads descriptions.
+        const options = doc.createElement('div');
+        options.style.cssText = 'display: flex; gap: 8px; align-items: center; font-size: 12px; color: #555;';
+        const scope = doc.createElement('select');
+        scope.setAttribute('aria-label', 'Search in');
+        scope.style.cssText = 'font-size: 12px; padding: 1px 2px;';
+        for (const [key, label] of ModelTree.SEARCH_SCOPES) {
+            const option = doc.createElement('option');
+            Object.assign(option, { value: key, textContent: label, selected: key === modelTree.getSearchScope?.() });
+            scope.appendChild(option);
+        }
+        scope.addEventListener('change', () => { modelTree.setSearchScope(scope.value); showMatches(); });
+        const described = doc.createElement('label');
+        described.style.cssText = 'display: flex; gap: 4px; align-items: center; cursor: pointer;';
+        const tick = doc.createElement('input');
+        Object.assign(tick, { type: 'checkbox', checked: !!modelTree.getSearchInDescriptions?.() });
+        tick.setAttribute('data-search-descriptions', '');
+        tick.addEventListener('change', () => { modelTree.setSearchInDescriptions(tick.checked); showMatches(); });
+        described.append(tick, 'Descriptions');
+        options.append('In:', scope, described);
+        panel.appendChild(options);
     }
 
     // Filter button opens modal dialog
@@ -168,7 +194,9 @@ export function buildModelTreePanel(doc, { modelTree, onSelectElement = null, on
             // Rename labels for better UX (strip common prefixes)
             const cleanTreeData = _cleanTreeLabels(typeTreeData);
 
-            const typeSelector = new CheckboxTreeSelector({ doc, nodes: cleanTreeData });
+            // Showing the filter on now (none: every type ticked).
+            const typeOn = [...(modelTree.getTypeFilter?.() ?? []), ...(modelTree.getSpecializationFilter?.() ?? [])];
+            const typeSelector = new CheckboxTreeSelector({ doc, nodes: cleanTreeData, checkedIds: typeOn.length ? new Set(typeOn) : null });
             const typeContainer = typeSelector.build();
             typeContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
             typeDetails.appendChild(typeContainer);
@@ -218,7 +246,12 @@ export function buildModelTreePanel(doc, { modelTree, onSelectElement = null, on
             propSummary.textContent = '▼ Properties';
             propDetails.appendChild(propSummary);
 
-            const propSelector = new CheckboxTreeSelector({ doc, nodes: propTreeData });
+            // Nothing ticked to start (no property filter); a value is ticked to keep what has it.
+            // A property with many values is folded, with a box to find one.
+            const propOn = modelTree.getPropertyFilter?.();
+            const propSelector = new OptInCheckboxTreeSelector({
+                doc, nodes: propTreeData, checkedIds: propOn ? new Set(propOn) : null, searchAbove: PROPERTY_VALUES_FOLDED_ABOVE,
+            });
             const propContainer = propSelector.build();
             propContainer.style.cssText = 'padding-left: 8px; font-size: 12px;';
             propDetails.appendChild(propContainer);