@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/modelTree/AnalysisPanel.js

@@ -0,0 +1,159 @@
+import { treeLayerOf } from './ModelTreePanel.js';
+import { typeTitle } from '../archimate/archimateNames.js';
+/**
+ * Builds analysis data for a selected element: "Used in Views", incoming/outgoing relationships.
+ */
+export function buildAnalysisData(model, elementId) {
+    const element = model.getElement(elementId);
+    if (!element) return null;
+
+    const rels = model.relationshipsFor(elementId);
+
+    return {
+        element,
+        usedInViews: model.viewsContaining(elementId),
+        incoming: rels.incoming,
+        outgoing: rels.outgoing,
+    };
+}
+
+/**
+ * DOM shell for rendering analysis panel.
+ * Builds via doc.createElement/Object.assign, never innerHTML.
+ */
+export function buildAnalysisPanel(doc, { model, elementId, onSelectItem = () => {} } = {}) {
+    const panel = doc.createElement('div');
+    panel.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        gap: 8px;
+        padding: 8px;
+        font-family: sans-serif;
+        font-size: 13px;
+        overflow: hidden;
+    `;
+
+    const data = buildAnalysisData(model, elementId);
+    if (!data) {
+        panel.textContent = '(No element selected)';
+        return panel;
+    }
+
+    // Element details
+    const detailsDiv = doc.createElement('div');
+    detailsDiv.style.cssText = 'padding: 8px; background: #f5f5f5; border-radius: 4px;';
+
+    const nameRow = Object.assign(doc.createElement('div'), { textContent: `Name: ${data.element.name || '(unnamed)'}` });
+    const typeRow = Object.assign(doc.createElement('div'), { textContent: `Type: ${data.element.type}` });
+    // Its layer as the diagram draws it (a stored one, else its type's), as the tree files it.
+    const layerRow = Object.assign(doc.createElement('div'), { textContent: `Layer: ${typeTitle(treeLayerOf(data.element))}` });
+
+    detailsDiv.appendChild(nameRow);
+    detailsDiv.appendChild(typeRow);
+    detailsDiv.appendChild(layerRow);
+    panel.appendChild(detailsDiv);
+
+    // Used in Views
+    const usedDiv = doc.createElement('div');
+    usedDiv.style.cssText = 'flex-shrink: 0;';
+
+    const usedLabel = Object.assign(doc.createElement('div'), {
+        textContent: `Used in Views (${data.usedInViews.length})`,
+        style: 'font-weight: bold; margin-bottom: 4px;',
+    });
+    usedDiv.appendChild(usedLabel);
+
+    if (data.usedInViews.length === 0) {
+        usedDiv.appendChild(Object.assign(doc.createElement('div'), {
+            textContent: '(no views)',
+            style: 'font-size: 12px; color: #666;',
+        }));
+    } else {
+        for (const view of data.usedInViews) {
+            const row = buildAnalysisRow(doc, view.name, () => onSelectItem({ kind: 'view', id: view.id }));
+            usedDiv.appendChild(row);
+        }
+    }
+    panel.appendChild(usedDiv);
+
+    // Incoming relationships
+    const incomingDiv = doc.createElement('div');
+    incomingDiv.style.cssText = 'flex-shrink: 0;';
+
+    const incomingLabel = Object.assign(doc.createElement('div'), {
+        textContent: `Incoming (${data.incoming.length})`,
+        style: 'font-weight: bold; margin-bottom: 4px; margin-top: 8px;',
+    });
+    incomingDiv.appendChild(incomingLabel);
+
+    if (data.incoming.length === 0) {
+        incomingDiv.appendChild(Object.assign(doc.createElement('div'), {
+            textContent: '(none)',
+            style: 'font-size: 12px; color: #666;',
+        }));
+    } else {
+        for (const rel of data.incoming) {
+            const source = model.getElement(rel.source);
+            const label = `${source?.name || rel.source} → ${rel.kind}`;
+            const row = buildAnalysisRow(doc, label, () => onSelectItem({ kind: 'relationship', id: rel.id }));
+            incomingDiv.appendChild(row);
+        }
+    }
+    panel.appendChild(incomingDiv);
+
+    // Outgoing relationships
+    const outgoingDiv = doc.createElement('div');
+    outgoingDiv.style.cssText = 'flex: 1; overflow-y: auto; min-height: 0;';
+
+    const outgoingLabel = Object.assign(doc.createElement('div'), {
+        textContent: `Outgoing (${data.outgoing.length})`,
+        style: 'font-weight: bold; margin-bottom: 4px; margin-top: 8px; flex-shrink: 0;',
+    });
+    outgoingDiv.appendChild(outgoingLabel);
+
+    if (data.outgoing.length === 0) {
+        outgoingDiv.appendChild(Object.assign(doc.createElement('div'), {
+            textContent: '(none)',
+            style: 'font-size: 12px; color: #666;',
+        }));
+    } else {
+        for (const rel of data.outgoing) {
+            const target = model.getElement(rel.target);
+            const label = `${rel.kind} → ${target?.name || rel.target}`;
+            const row = buildAnalysisRow(doc, label, () => onSelectItem({ kind: 'relationship', id: rel.id }));
+            outgoingDiv.appendChild(row);
+        }
+    }
+    panel.appendChild(outgoingDiv);
+
+    return panel;
+}
+
+/**
+ * Build a single clickable analysis row.
+ * @private
+ */
+function buildAnalysisRow(doc, label, onClick) {
+    const row = doc.createElement('div');
+    row.style.cssText = `
+        padding: 4px 6px;
+        margin: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        user-select: none;
+        font-size: 12px;
+        transition: background-color 0.1s;
+    `;
+    row.textContent = label;
+
+    row.addEventListener('click', onClick);
+    row.addEventListener('mouseenter', () => {
+        row.style.background = '#e0e0e0';
+    });
+    row.addEventListener('mouseleave', () => {
+        row.style.background = '';
+    });
+
+    return row;
+}

package/src/charting/modelTree/DiagramTabs.js

@@ -0,0 +1,217 @@
+import { ViewTabStrip } from '../ViewTabStrip.js';
+
+/**
+ * Multi-engine diagram tab manager.
+ * Creates and manages separate RenderEngine instances for each view,
+ * maintaining independent state per tab (positions, selections, edits).
+ * The tab bar itself is a ViewTabStrip (closable tabs), shared with the
+ * template editor.
+ *
+ * Usage:
+ *   const diagrams = new DiagramTabs(doc, { RenderEngine });
+ *   parentEl.appendChild(diagrams.build());       // tabs + diagram area
+ *   const engine = diagrams.getOrCreateEngine(view);
+ *   diagrams.show(view, onTabClick);              // open (or focus) a tab
+ *   diagrams.switchTo(view);
+ *   diagrams.getActiveEngine();
+ *   diagrams.containerFor(view.id);               // that view's diagram element
+ *
+ * Its elements carry classes (`diagram-area`, `diagram-tab-bar`,
+ * `diagram-view` with `data-view-id`), never ids, so several can share a page.
+ */
+export class DiagramTabs {
+    constructor(doc, options = {}) {
+        this.doc = doc;
+        this.RenderEngine = options.RenderEngine;
+        this.settingsManager = options.settingsManager;
+        /** Right-click menu for a tab: (viewId) => PopupMenu items. */
+        this.menuItems = options.menuItems ?? (() => []);
+        this.engines = new Map(); // viewId -> { engine, svgContainer }
+        /** Open tabs in order: viewId -> { view, onTabClick } */
+        this.tabs = new Map();
+        this.activeViewId = null;
+        this.container = null;
+        this.tabBar = null;
+        this.diagramArea = null;
+        this.renderFn = null; // Consumer provides this: () => void
+
+        // Re-render the active view when its model or view settings change.
+        if (this.settingsManager) {
+            this.settingsManager.onSettingsChange(({ type, modelId, viewId }) => {
+                if ((type === 'model' && modelId === 'default') || (type === 'view' && viewId === this.activeViewId)) {
+                    this._render();
+                }
+            });
+        }
+    }
+
+    /**
+     * Set the render function — called whenever the active view or settings change.
+     * @param {Function} fn - render function to call: () => void
+     */
+    setRenderFunction(fn) {
+        this.renderFn = fn;
+    }
+
+    /** @private */
+    _render() {
+        if (!this.renderFn) return;
+        try {
+            this.renderFn();
+        } catch (err) {
+            console.error('DiagramTabs render error:', err);
+        }
+    }
+
+    /**
+     * Build the tab container DOM (tabs + diagram area).
+     * @returns {HTMLElement} container div
+     */
+    build() {
+        this.container = this.doc.createElement('div');
+        this.container.style.cssText = 'display: flex; flex-direction: column; height: 100%; flex: 1 1 auto;';
+        this.tabBar = this.doc.createElement('div');
+        this.container.appendChild(this.tabBar);
+        this.diagramArea = this.doc.createElement('div');
+        this.diagramArea.className = 'diagram-area';
+        this.diagramArea.style.cssText = 'flex: 1 1 auto; height: 100%; position: relative; overflow: hidden;';
+        this.container.appendChild(this.diagramArea);
+        this._renderTabBar();
+        return this.container;
+    }
+
+    /** Redraw the tab bar from the open tabs. @private */
+    _renderTabBar() {
+        if (!this.tabBar) return;
+        const strip = new ViewTabStrip({
+            document: this.doc,
+            onSelect: (id) => this._selectTab(id),
+            onClose: (id) => this.closeTab(id),
+            menuItems: (id) => this.menuItems(id),
+        }).render([...this.tabs.values()].map(({ view }) => ({ id: view.id, title: view.name || view.id })), this.activeViewId);
+        strip.classList.add('diagram-tab-bar');
+        this.tabBar.replaceWith(strip);
+        this.tabBar = strip;
+    }
+
+    /** @private */
+    _selectTab(id) {
+        const tab = this.tabs.get(id);
+        if (!tab) return;
+        this.switchTo(tab.view);
+        tab.onTabClick?.(tab.view);
+    }
+
+    /**
+     * Get or create a RenderEngine for a view.
+     * Each view gets its own SVG container and engine instance.
+     * @param {ArchimateView} view
+     * @returns {RenderEngine} engine instance for that view
+     */
+    getOrCreateEngine(view) {
+        if (!this.RenderEngine) throw new Error('DiagramTabs: RenderEngine class not provided');
+        if (!view || !view.id) throw new Error('DiagramTabs: view must have an id');
+
+        if (this.engines.has(view.id)) {
+            return this.engines.get(view.id).engine;
+        }
+
+        // RenderEngine sizes itself from its container, so create it while visible, then hide.
+        const svgContainer = this.doc.createElement('div');
+        svgContainer.className = 'diagram-view';
+        svgContainer.dataset.viewId = view.id;
+        svgContainer.style.cssText = 'width: 100%; height: 100%; position: absolute; top: 0; left: 0;';
+        this.diagramArea.appendChild(svgContainer);
+        const engine = new this.RenderEngine(svgContainer, { rendererType: 'svg' });
+        svgContainer.style.display = 'none';
+
+        this.engines.set(view.id, { engine, svgContainer });
+        return engine;
+    }
+
+    /**
+     * Switch to a view's diagram (show its SVG, hide others) and re-render.
+     * @param {ArchimateView} view
+     * @returns {RenderEngine} the active engine for that view
+     */
+    switchTo(view) {
+        if (!view || !view.id) return null;
+        this.getOrCreateEngine(view);
+        this.engines.forEach((data, viewId) => {
+            data.svgContainer.style.display = viewId === view.id ? 'block' : 'none';
+        });
+        this.activeViewId = view.id;
+        this._renderTabBar();
+        this._render();
+        return this.getActiveEngine();
+    }
+
+    /** The element a view's diagram is drawn in, or null if it has none yet. */
+    containerFor(viewId) {
+        return this.engines.get(viewId)?.svgContainer ?? null;
+    }
+
+    /** @returns {RenderEngine|null} */
+    getActiveEngine() {
+        if (!this.activeViewId) return null;
+        return this.engines.get(this.activeViewId)?.engine ?? null;
+    }
+
+    /** @returns {string|null} */
+    getActiveViewId() {
+        return this.activeViewId;
+    }
+
+    /** Whether a view has an open tab. */
+    hasTab(viewId) {
+        return this.tabs.has(viewId);
+    }
+
+    /** Ids of the views open in tabs, in order. */
+    openViewIds() {
+        return [...this.tabs.keys()];
+    }
+
+    /**
+     * Close a tab (the view stays in the model). Closing the active tab
+     * switches to the first remaining one.
+     */
+    closeTab(viewId) {
+        this.tabs.delete(viewId);
+        this.engines.get(viewId)?.svgContainer.remove();
+        this.engines.delete(viewId);
+        if (this.activeViewId === viewId) {
+            this.activeViewId = null;
+            const next = this.tabs.values().next().value;
+            if (next) {
+                // Same as clicking it, so the host (e.g. the editor's current view) follows.
+                this._selectTab(next.view.id);
+                return;
+            }
+            if (this.diagramArea) this.diagramArea.replaceChildren();
+            this._render();
+        }
+        this._renderTabBar();
+    }
+
+    /**
+     * Add (or refresh) a view's tab.
+     * @param {ArchimateView} view
+     * @param {Function} [onTabClick] - called after the tab is clicked and its view shown
+     */
+    addViewTab(view, onTabClick) {
+        this.tabs.set(view.id, { view, onTabClick: onTabClick ?? this.tabs.get(view.id)?.onTabClick });
+        this._renderTabBar();
+    }
+
+    /**
+     * Show a view in tabs (create engine, tab, and switch to it).
+     * @param {ArchimateView} view
+     * @param {Function} [onShow] - called when the tab is later clicked
+     */
+    show(view, onShow) {
+        this.getOrCreateEngine(view);
+        this.addViewTab(view, onShow);
+        this.switchTo(view);
+    }
+}

package/src/charting/modelTree/ModelTree.js

@@ -0,0 +1,164 @@
+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);
+        }
+    }
+}