@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/FilterSystem.js

@@ -0,0 +1,285 @@
+/**
+ * FilterSystem — Encapsulates all filtering logic and UI for ArchimateDiagramEditor.
+ * Owns: state (pattern, layers, types, mode), UI creation, event wiring, tree/diagram filtering.
+ * Single responsibility: manage element filtering across tree and diagram views.
+ */
+export class FilterSystem {
+    constructor({ doc, model, onFilterChange = null } = {}) {
+        this.doc = doc;
+        this.model = model;
+        this.onFilterChange = onFilterChange;
+
+        // Filter state
+        this.pattern = '';
+        this.selectedLayers = new Set();
+        this.selectedTypes = new Set();
+        this.filterMode = 'both'; // 'both', 'diagram', 'tree'
+        this.searchDocs = false;
+
+        // UI elements (created in createPopupUI)
+        this.popup = null;
+        this.filterInput = null;
+        this.layerCheckboxes = new Map(); // layer -> checkbox
+        this.typeCheckboxes = new Map();  // type -> checkbox
+    }
+
+    /**
+     * Create the filter popup UI (layers, types, mode radios, etc).
+     * Returns a <div> ready to insert into the DOM.
+     */
+    createPopupUI() {
+        const popup = this.doc.createElement('div');
+        popup.id = 'tree-filters-popup';
+        popup.style.cssText = 'display:none;position:absolute;top:44px;right:-8px;background:white;border:1px solid #ccc;border-radius:3px;padding:12px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.2);min-width:220px;max-height:500px;overflow-y:auto;';
+
+        // Header
+        const header = this.doc.createElement('div');
+        header.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #eee;';
+        const title = this.doc.createElement('strong');
+        title.textContent = 'Filter Options';
+        title.style.fontSize = '12px';
+        const closeBtn = this.doc.createElement('button');
+        closeBtn.id = 'tree-filters-close';
+        closeBtn.textContent = '✕';
+        closeBtn.style.cssText = 'padding:0;border:none;background:none;cursor:pointer;font-size:14px;color:#666;';
+        closeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.togglePopup(false);
+        });
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        popup.appendChild(header);
+
+        // Apply mode section
+        const modeSection = this.doc.createElement('div');
+        modeSection.style.cssText = 'margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #eee;font-weight:bold;font-size:12px;';
+        modeSection.appendChild(this.doc.createTextNode('Apply to:'));
+        popup.appendChild(modeSection);
+
+        const modes = ['both', 'diagram', 'tree'];
+        for (const mode of modes) {
+            const label = this.doc.createElement('label');
+            label.style.cssText = 'display:flex;align-items:center;gap:4px;cursor:pointer;margin:6px 0;font-size:12px;';
+            const radio = this.doc.createElement('input');
+            radio.type = 'radio';
+            radio.name = 'tree-filter-mode';
+            radio.value = mode;
+            radio.checked = (mode === 'both');
+            radio.style.cursor = 'pointer';
+            radio.addEventListener('change', () => this._onModeChange(mode));
+            label.appendChild(radio);
+            label.appendChild(this.doc.createTextNode(mode.charAt(0).toUpperCase() + mode.slice(1)));
+            popup.appendChild(label);
+        }
+
+        // Docs checkbox
+        const docsDiv = this.doc.createElement('div');
+        docsDiv.style.cssText = 'margin-top:10px;padding-top:10px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding-bottom:10px;';
+        const docsLabel = this.doc.createElement('label');
+        docsLabel.style.cssText = 'display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12px;';
+        const docsCheckbox = this.doc.createElement('input');
+        docsCheckbox.type = 'checkbox';
+        docsCheckbox.id = 'tree-search-docs';
+        docsCheckbox.style.cursor = 'pointer';
+        docsCheckbox.addEventListener('change', () => this._onDocsChange());
+        docsLabel.appendChild(docsCheckbox);
+        docsLabel.appendChild(this.doc.createTextNode('Search docs'));
+        docsDiv.appendChild(docsLabel);
+        popup.appendChild(docsDiv);
+
+        // Layers/Types section
+        const typesSection = this.doc.createElement('div');
+        typesSection.style.cssText = 'margin-top:10px;';
+        const typesTitle = this.doc.createElement('div');
+        typesTitle.style.cssText = 'font-weight:bold;font-size:12px;margin-bottom:6px;';
+        typesTitle.textContent = 'Layers/Types:';
+        typesSection.appendChild(typesTitle);
+
+        const typesContainer = this.doc.createElement('div');
+        typesContainer.id = 'tree-filter-types';
+        typesContainer.style.cssText = 'padding-left:8px;font-size:12px;';
+        this._populateLayersAndTypes(typesContainer);
+        typesSection.appendChild(typesContainer);
+        popup.appendChild(typesSection);
+
+        this.popup = popup;
+        return popup;
+    }
+
+    /**
+     * Populate layer and type checkboxes from model.
+     * Called when popup is created and when model changes.
+     */
+    _populateLayersAndTypes(container) {
+        container.innerHTML = '';
+        this.layerCheckboxes.clear();
+        this.typeCheckboxes.clear();
+
+        const layers = new Set();
+        const types = new Set();
+        for (const el of this.model.elements()) {
+            if (el.layer) layers.add(el.layer);
+            if (el.type) types.add(el.type);
+        }
+
+        // Add layers
+        const sortedLayers = Array.from(layers).sort();
+        if (sortedLayers.length > 0) {
+            const layersLabel = this.doc.createElement('div');
+            layersLabel.style.cssText = 'font-weight:bold;font-size:11px;margin-top:8px;margin-bottom:4px;color:#666;';
+            layersLabel.textContent = 'Layers:';
+            container.appendChild(layersLabel);
+
+            for (const layer of sortedLayers) {
+                const label = this.doc.createElement('label');
+                label.style.cssText = 'display:flex;align-items:center;gap:4px;cursor:pointer;margin:2px 0;font-size:12px;';
+                const checkbox = this.doc.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.checked = true;
+                checkbox.dataset.filter = `layer:${layer}`;
+                checkbox.style.cursor = 'pointer';
+                checkbox.addEventListener('click', (e) => e.stopPropagation());
+                checkbox.addEventListener('change', () => this._onLayerTypeChange());
+                label.appendChild(checkbox);
+                label.appendChild(this.doc.createTextNode(layer));
+                container.appendChild(label);
+                this.layerCheckboxes.set(layer, checkbox);
+            }
+        }
+
+        // Add types
+        const sortedTypes = Array.from(types).sort();
+        if (sortedTypes.length > 0) {
+            const typesLabel = this.doc.createElement('div');
+            typesLabel.style.cssText = 'font-weight:bold;font-size:11px;margin-top:8px;margin-bottom:4px;color:#666;';
+            typesLabel.textContent = 'Types:';
+            container.appendChild(typesLabel);
+
+            for (const type of sortedTypes) {
+                const label = this.doc.createElement('label');
+                label.style.cssText = 'display:flex;align-items:center;gap:4px;cursor:pointer;margin:2px 0;font-size:12px;';
+                const checkbox = this.doc.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.checked = true;
+                checkbox.dataset.filter = `type:${type}`;
+                checkbox.style.cursor = 'pointer';
+                checkbox.addEventListener('click', (e) => e.stopPropagation());
+                checkbox.addEventListener('change', () => this._onLayerTypeChange());
+                label.appendChild(checkbox);
+                label.appendChild(this.doc.createTextNode(type));
+                container.appendChild(label);
+                this.typeCheckboxes.set(type, checkbox);
+            }
+        }
+    }
+
+    togglePopup(show = null) {
+        if (!this.popup) return;
+        if (show === null) {
+            show = this.popup.style.display === 'none';
+        }
+        this.popup.style.display = show ? 'block' : 'none';
+    }
+
+    /**
+     * Compute matching element IDs based on current filter state.
+     * Returns a Set of element IDs that match all active filters.
+     */
+    getMatchingElementIds() {
+        const matching = new Set();
+
+        // Query current checkbox state
+        this.selectedLayers.clear();
+        this.selectedTypes.clear();
+        for (const checkbox of this.doc.querySelectorAll('#tree-filter-types input[type="checkbox"]')) {
+            if (checkbox.checked) {
+                const filter = checkbox.getAttribute('data-filter');
+                if (filter?.startsWith('layer:')) {
+                    this.selectedLayers.add(filter.substring(6));
+                } else if (filter?.startsWith('type:')) {
+                    this.selectedTypes.add(filter.substring(5));
+                }
+            }
+        }
+
+        // Check if any filters are active
+        const hasTextPattern = this.pattern && this.pattern.trim() !== '';
+        const hasLayerFilter = this.selectedLayers.size > 0;
+        const hasTypeFilter = this.selectedTypes.size > 0;
+        const hasAnyFilter = hasTextPattern || hasLayerFilter || hasTypeFilter;
+
+        if (!hasAnyFilter) {
+            return null; // null means "no filter, show all"
+        }
+
+        // Build matching set
+        for (const el of this.model.elements()) {
+            let textMatches = true;
+            let layerMatches = true;
+            let typeMatches = true;
+
+            if (hasTextPattern) {
+                try {
+                    const regex = new RegExp(this.pattern, 'i');
+                    textMatches = regex.test(el.name || '');
+                    if (!textMatches && this.searchDocs) {
+                        textMatches = regex.test(el.documentation || '');
+                    }
+                } catch (e) {
+                    console.warn('Invalid regex pattern:', this.pattern);
+                    textMatches = false;
+                }
+            }
+
+            if (hasLayerFilter) {
+                layerMatches = this.selectedLayers.has(el.layer);
+            }
+
+            if (hasTypeFilter) {
+                typeMatches = this.selectedTypes.has(el.type);
+            }
+
+            if (textMatches && layerMatches && typeMatches) {
+                matching.add(el.id);
+            }
+        }
+
+        return matching.size > 0 ? matching : new Set();
+    }
+
+    /**
+     * Apply filter: call onFilterChange callback with result.
+     */
+    applyFilter() {
+        const matchingIds = this.getMatchingElementIds();
+        if (this.onFilterChange) {
+            this.onFilterChange({
+                matchingIds,
+                filterMode: this.filterMode,
+                pattern: this.pattern,
+                searchDocs: this.searchDocs,
+            });
+        }
+    }
+
+    // Event handlers
+    _onModeChange(mode) {
+        this.filterMode = mode;
+        this.applyFilter();
+    }
+
+    _onDocsChange() {
+        const checkbox = this.doc.getElementById('tree-search-docs');
+        this.searchDocs = checkbox?.checked || false;
+        this.applyFilter();
+    }
+
+    _onLayerTypeChange() {
+        this.applyFilter();
+    }
+
+    setPattern(pattern) {
+        this.pattern = pattern;
+        this.applyFilter();
+    }
+}

package/src/charting/FindReplaceDialog.js

@@ -0,0 +1,139 @@
+import { el } from '../workspace/dom.js';
+import { FormDialog } from './FormDialog.js';
+import { SEARCH_FIELDS } from './diagramModel/ModelSearch.js';
+
+const RESULTS_SHOWN = 200;
+
+/**
+ * FindReplaceDialog — Find and replace over a model (its `search()`, a
+ * ModelSearch): what to find, what to put in its place, match case, whole
+ * words, regular expression, and where to look (names, documentation,
+ * property values). What matches is listed as you type; choosing one closes
+ * the dialog and shows it (`onReveal(match)`). "Replace all" replaces every
+ * listed match as one undo step on `history()`.
+ *
+ * The last search is kept (`state`), so opening it again carries on.
+ */
+export class FindReplaceDialog {
+    /**
+     * @param {Object} options
+     * @param {() => ViewSetModel} options.model
+     * @param {() => CommandHistory} options.history - Where a replace goes (the model's)
+     * @param {(match: Object) => void} [options.onReveal] - Show a match (switch view, select it)
+     * @param {(command: Command) => void} [options.onReplaced] - After a replace (redraw)
+     * @param {() => Document} [options.document]
+     */
+    constructor({ model, history, onReveal = () => {}, onReplaced = () => {}, document: doc = () => globalThis.document }) {
+        this.model = model;
+        this.history = history;
+        this.onReveal = onReveal;
+        this.onReplaced = onReplaced;
+        this.document = doc;
+        /** The last search: what was looked for and how. */
+        this.state = { find: '', replace: '', matchCase: false, wholeWord: false, regex: false, fields: SEARCH_FIELDS.map(([f]) => f) };
+    }
+
+    /** The search a dialog's values describe. */
+    static search(values) {
+        return {
+            find: values.find ?? '', replace: values.replace ?? '',
+            matchCase: !!values.matchCase, wholeWord: !!values.wholeWord, regex: !!values.regex,
+            fields: values.fields ?? SEARCH_FIELDS.map(([f]) => f),
+        };
+    }
+
+    /** What a search finds: `{ matches }`, or `{ error }` for an invalid regular expression. */
+    run(search = this.state) {
+        try {
+            return { matches: this.model().search().find(search.find, search) };
+        } catch (e) {
+            return { error: e instanceof SyntaxError ? 'Not a valid regular expression' : String(e.message ?? e) };
+        }
+    }
+
+    /** Replace what `search` finds, as one undo step; returns the command (null: nothing changed). */
+    replaceAll(search = this.state) {
+        const command = this.model().search().replaceCommand(search.find, search.replace, search);
+        if (!command) return null;
+        this.history().execute(command);
+        this.onReplaced(command);
+        return command;
+    }
+
+    open() {
+        const doc = this.document();
+        const s = this.state;
+        const results = el({ style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '3px', minWidth: '460px', maxHeight: '40vh', overflowY: 'auto' } }, doc);
+        let dialog = null;
+        const refresh = () => {
+            this.state = FindReplaceDialog.search(dialog.values());
+            const { matches, error } = this.run();
+            results.replaceChildren(...this.resultRows(matches, error, () => dialog).map(spec => el(spec, doc)));
+        };
+        dialog = new FormDialog({
+            title: 'Find and replace',
+            fields: [
+                { key: 'find', label: 'Find', type: 'text', value: s.find, placeholder: 'text to find' },
+                { key: 'replace', label: 'Replace with', type: 'text', value: s.replace },
+                { key: 'matchCase', label: 'Match case', type: 'checkbox', value: s.matchCase },
+                { key: 'wholeWord', label: 'Whole words', type: 'checkbox', value: s.wholeWord },
+                { key: 'regex', label: 'Regular expression', type: 'checkbox', value: s.regex, hint: 'In Replace with, $1 is the first group' },
+                { key: 'fields', label: 'Look in', type: 'checklist', value: s.fields, choices: SEARCH_FIELDS.map(([f, text]) => [f, text]) },
+                { type: 'heading', label: 'Found' },
+                { key: 'results', label: '', type: 'custom', element: results, read: () => null },
+            ],
+            submitLabel: 'Replace all',
+            idPrefix: 'find-replace-',
+            document: doc,
+            validate: (values) => {
+                const search = FindReplaceDialog.search(values);
+                const { matches, error } = this.run(search);
+                if (error) return error;
+                if (!matches.length) return 'Nothing found to replace';
+                return null;
+            },
+            onApply: (values) => {
+                this.state = FindReplaceDialog.search(values);
+                this.replaceAll();
+            },
+        });
+        dialog.open();
+        for (const control of Object.values(dialog.controls)) {
+            if (control === results) continue;
+            control.addEventListener?.('input', refresh);
+            control.addEventListener?.('change', refresh);
+        }
+        refresh();
+        dialog.controls.find?.focus?.();
+        return dialog;
+    }
+
+    /** The list under Found: a row per match (choosing it shows it), or why there is none. @protected */
+    resultRows(matches, error, dialog) {
+        if (error) return [{ text: error, style: { color: '#b00' } }];
+        if (!this.state.find) return [{ text: 'Type what to find.', style: { color: '#888' } }];
+        if (!matches.length) return [{ text: 'Nothing found.', style: { color: '#888' } }];
+        const total = matches.reduce((n, m) => n + m.count, 0);
+        return [
+            { text: `${total} match${total === 1 ? '' : 'es'} in ${matches.length} text${matches.length === 1 ? '' : 's'}`, style: { color: '#555', fontSize: '12px' } },
+            ...matches.slice(0, RESULTS_SHOWN).map(match => ({
+                tag: 'button',
+                attrs: { type: 'button', title: 'Show it', 'data-kind': match.kind },
+                style: { textAlign: 'left', padding: '3px 6px', border: '1px solid #ddd', borderRadius: '3px', background: '#f8fafc', cursor: 'pointer' },
+                on: { click: () => { dialog()?.close(); this.onReveal(match); } },
+                children: [
+                    { tag: 'b', text: match.owner },
+                    { tag: 'span', text: ` · ${match.kind} · ${match.fieldLabel}: `, style: { color: '#777' } },
+                    { tag: 'span', text: FindReplaceDialog.excerpt(match.text) },
+                ],
+            })),
+            ...(matches.length > RESULTS_SHOWN ? [{ text: `… and ${matches.length - RESULTS_SHOWN} more`, style: { color: '#888' } }] : []),
+        ];
+    }
+
+    /** A text on one line, cut short. */
+    static excerpt(text, max = 80) {
+        const line = String(text).replace(/\s+/g, ' ').trim();
+        return line.length > max ? `${line.slice(0, max - 1)}…` : line;
+    }
+}