@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/modelTree/NavigatorPanel.js

@@ -0,0 +1,453 @@
+import { NavigatorModel } from './NavigatorModel.js';
+import { typeTitle } from '../archimate/archimateNames.js';
+import { treeLayerOf } from './ModelTreePanel.js';
+import { ArchimateNotation } from '../../archimate.js';
+
+/**
+ * NavigatorPanel — interactive, multi-step relationship visual explorer panel.
+ *
+ * Provides step-by-step traversal along incoming and outgoing relationships,
+ * breadcrumbs / history navigation (back/forward), pinning, direction filters,
+ * and view navigation.
+ */
+export class NavigatorPanel {
+    /**
+     * @param {Document} doc
+     * @param {Object} options
+     * @param {ArchimateModel} options.model
+     * @param {NavigatorModel} [options.navigatorModel]
+     * @param {string} [options.elementId]
+     * @param {(item: { kind: string, id: string }) => void} [options.onSelectItem]
+     * @param {(viewId: string) => void} [options.onSelectView]
+     */
+    constructor(doc, { model, navigatorModel = null, elementId = null, onSelectItem = () => {}, onSelectView = () => {} } = {}) {
+        this.doc = doc;
+        this.model = model;
+        this.nav = navigatorModel || new NavigatorModel(model, { rootId: elementId });
+        if (elementId && !this.nav.currentId) {
+            this.nav.focus(elementId);
+        }
+        this.onSelectItem = onSelectItem;
+        this.onSelectView = onSelectView;
+
+        this.element = this._createDOM();
+        this._unsubscribe = this.nav.onChange(() => this.render());
+    }
+
+    destroy() {
+        this._unsubscribe?.();
+    }
+
+    /** Set or update the focused element (respects navigator pinning). */
+    setElementId(elementId) {
+        if (!elementId) return;
+        this.nav.focus(elementId);
+    }
+
+    /** The container DOM element. */
+    get dom() {
+        return this.element;
+    }
+
+    _createDOM() {
+        const root = this.doc.createElement('div');
+        root.className = 're-navigator-panel';
+        root.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            font-size: 12px;
+            color: #333;
+            background: #fff;
+            overflow: hidden;
+            user-select: none;
+        `;
+
+        this.toolbar = this._buildToolbar();
+        root.appendChild(this.toolbar);
+
+        this.content = this.doc.createElement('div');
+        this.content.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+        root.appendChild(this.content);
+
+        this.render();
+        return root;
+    }
+
+    _buildToolbar() {
+        const bar = this.doc.createElement('div');
+        bar.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 6px 8px;
+            background: #f7f7f8;
+            border-bottom: 1px solid #e1e4e8;
+            flex-shrink: 0;
+        `;
+
+        const btn = (icon, title, onClick) => {
+            const b = this.doc.createElement('button');
+            b.type = 'button';
+            b.title = title;
+            b.textContent = icon;
+            b.style.cssText = `
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 24px;
+                height: 24px;
+                padding: 0;
+                border: 1px solid #d1d5da;
+                border-radius: 3px;
+                background: #fff;
+                cursor: pointer;
+                font-size: 12px;
+                color: #444;
+            `;
+            b.addEventListener('click', onClick);
+            b.addEventListener('mouseenter', () => { if (!b.disabled) b.style.background = '#eef1f5'; });
+            b.addEventListener('mouseleave', () => { if (!b.disabled) b.style.background = b.dataset.active ? '#e1e4e8' : '#fff'; });
+            return b;
+        };
+
+        this.btnBack = btn('◀', 'Navigate back', () => this.nav.back());
+        this.btnForward = btn('▶', 'Navigate forward', () => this.nav.forward());
+        this.btnPin = btn('📌', 'Pin element (prevents auto-changing root)', () => {
+            this.nav.togglePin();
+            this._updateToolbarState();
+        });
+
+        // Direction selector
+        const dirSelect = this.doc.createElement('select');
+        dirSelect.style.cssText = `
+            font-size: 11px;
+            padding: 2px 4px;
+            border: 1px solid #d1d5da;
+            border-radius: 3px;
+            background: #fff;
+            color: #333;
+            margin-left: auto;
+        `;
+        const dirs = [
+            ['both', '⇄ Both'],
+            ['outgoing', '→ Outgoing'],
+            ['incoming', '← Incoming'],
+        ];
+        for (const [val, label] of dirs) {
+            const opt = this.doc.createElement('option');
+            opt.value = val;
+            opt.textContent = label;
+            dirSelect.appendChild(opt);
+        }
+        dirSelect.value = this.nav.direction;
+        dirSelect.addEventListener('change', () => this.nav.setDirection(dirSelect.value));
+        this.dirSelect = dirSelect;
+
+        bar.appendChild(this.btnBack);
+        bar.appendChild(this.btnForward);
+        bar.appendChild(this.btnPin);
+        bar.appendChild(this.dirSelect);
+
+        this._updateToolbarState();
+        return bar;
+    }
+
+    _updateToolbarState() {
+        if (!this.btnBack) return;
+        this.btnBack.disabled = !this.nav.canBack;
+        this.btnBack.style.opacity = this.nav.canBack ? '1' : '0.4';
+        this.btnBack.style.cursor = this.nav.canBack ? 'pointer' : 'default';
+
+        this.btnForward.disabled = !this.nav.canForward;
+        this.btnForward.style.opacity = this.nav.canForward ? '1' : '0.4';
+        this.btnForward.style.cursor = this.nav.canForward ? 'pointer' : 'default';
+
+        this.btnPin.dataset.active = this.nav.pinned ? 'true' : '';
+        this.btnPin.style.background = this.nav.pinned ? '#e1e4e8' : '#fff';
+        this.btnPin.style.borderColor = this.nav.pinned ? '#888' : '#d1d5da';
+    }
+
+    render() {
+        this._updateToolbarState();
+        if (!this.content) return;
+        this.content.replaceChildren();
+
+        const tree = this.nav.buildTree();
+        if (!tree) {
+            const empty = this.doc.createElement('div');
+            empty.style.cssText = 'color: #888; font-style: italic; padding: 12px; text-align: center;';
+            empty.textContent = '(Select an element to explore connections)';
+            this.content.appendChild(empty);
+            return;
+        }
+
+        // Focused element card
+        this.content.appendChild(this._renderRootCard(tree));
+
+        // Navigation tree container
+        const treeSection = this.doc.createElement('div');
+        treeSection.style.cssText = 'display: flex; flex-direction: column; gap: 4px;';
+
+        const hasConnections = tree.outgoing.length > 0 || tree.incoming.length > 0;
+        if (!hasConnections) {
+            const noRel = this.doc.createElement('div');
+            noRel.style.cssText = 'color: #888; font-size: 11px; padding: 4px 6px;';
+            noRel.textContent = '(No relationships found in selected direction)';
+            treeSection.appendChild(noRel);
+        } else {
+            if (tree.outgoing.length > 0) {
+                treeSection.appendChild(this._renderSectionHeader(`Outgoing (${tree.outgoing.length})`, '→'));
+                for (const branch of tree.outgoing) {
+                    treeSection.appendChild(this._renderBranch(branch));
+                }
+            }
+
+            if (tree.incoming.length > 0) {
+                treeSection.appendChild(this._renderSectionHeader(`Incoming (${tree.incoming.length})`, '←'));
+                for (const branch of tree.incoming) {
+                    treeSection.appendChild(this._renderBranch(branch));
+                }
+            }
+        }
+
+        this.content.appendChild(treeSection);
+    }
+
+    _renderSectionHeader(title, arrow) {
+        const h = this.doc.createElement('div');
+        h.style.cssText = `
+            font-weight: 600;
+            font-size: 11px;
+            color: #586069;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            padding: 4px 0 2px 2px;
+            margin-top: 6px;
+        `;
+        h.textContent = `${arrow} ${title}`;
+        return h;
+    }
+
+    _renderRootCard(tree) {
+        const card = this.doc.createElement('div');
+        card.style.cssText = `
+            background: #f6f8fa;
+            border: 1px solid #e1e4e8;
+            border-radius: 4px;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        `;
+
+        const titleRow = this.doc.createElement('div');
+        titleRow.style.cssText = 'display: flex; align-items: center; justify-content: space-between;';
+
+        const nameSpan = this.doc.createElement('span');
+        nameSpan.style.cssText = 'font-weight: 600; font-size: 13px; color: #24292e;';
+        nameSpan.textContent = tree.element.name || '(unnamed)';
+        titleRow.appendChild(nameSpan);
+
+        card.appendChild(titleRow);
+
+        const metaRow = this.doc.createElement('div');
+        metaRow.style.cssText = 'font-size: 11px; color: #586069; display: flex; gap: 8px;';
+        const typeSpan = this.doc.createElement('span');
+        typeSpan.textContent = typeTitle(tree.element.type);
+        const layerSpan = this.doc.createElement('span');
+        layerSpan.textContent = `• ${typeTitle(tree.layer)}`;
+        metaRow.appendChild(typeSpan);
+        metaRow.appendChild(layerSpan);
+        card.appendChild(metaRow);
+
+        // Views list
+        if (tree.views && tree.views.length > 0) {
+            const viewsDiv = this.doc.createElement('div');
+            viewsDiv.style.cssText = 'margin-top: 4px; padding-top: 4px; border-top: 1px dashed #e1e4e8; font-size: 11px;';
+            const vHeader = this.doc.createElement('div');
+            vHeader.style.cssText = 'color: #586069; margin-bottom: 2px;';
+            vHeader.textContent = `In views (${tree.views.length}):`;
+            viewsDiv.appendChild(vHeader);
+
+            for (const view of tree.views) {
+                const vLink = this.doc.createElement('span');
+                vLink.style.cssText = `
+                    display: inline-block;
+                    margin: 2px 4px 2px 0;
+                    padding: 1px 6px;
+                    background: #eef1f5;
+                    border-radius: 3px;
+                    color: #0366d6;
+                    cursor: pointer;
+                `;
+                vLink.textContent = view.name || 'View';
+                vLink.addEventListener('click', () => {
+                    this.onSelectView(view.id);
+                    this.onSelectItem({ kind: 'element', id: tree.element.id });
+                });
+                viewsDiv.appendChild(vLink);
+            }
+            card.appendChild(viewsDiv);
+        }
+
+        return card;
+    }
+
+    _renderBranch(branch, level = 0) {
+        const wrap = this.doc.createElement('div');
+        wrap.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            margin-left: ${level * 14}px;
+            border-left: ${level > 0 ? '1px dashed #d1d5da' : 'none'};
+            padding-left: ${level > 0 ? '6px' : '0'};
+            margin-bottom: 2px;
+        `;
+
+        const row = this.doc.createElement('div');
+        row.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 3px 6px;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: background 0.1s;
+        `;
+
+        // Expand / collapse chevron (if branch has potential further connections and not cycle)
+        const toggle = this.doc.createElement('span');
+        toggle.style.cssText = `
+            width: 14px;
+            height: 14px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 9px;
+            color: #6a737d;
+            cursor: pointer;
+            flex-shrink: 0;
+        `;
+
+        if (branch.cycle) {
+            toggle.textContent = '↻';
+            toggle.title = 'Cycle detected (element already in path)';
+            toggle.style.color = '#e36209';
+        } else {
+            toggle.textContent = branch.expanded ? '▼' : '▶';
+            toggle.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.nav.toggleExpand(branch.pathKey);
+            });
+        }
+        row.appendChild(toggle);
+
+        // Relationship badge
+        const relBadge = this.doc.createElement('span');
+        relBadge.style.cssText = `
+            padding: 1px 4px;
+            background: #f1f3f5;
+            border: 1px solid #e1e4e8;
+            border-radius: 3px;
+            font-size: 10px;
+            color: #495057;
+            flex-shrink: 0;
+        `;
+        const dirSymbol = branch.direction === 'outgoing' ? '→' : '←';
+        relBadge.textContent = `${dirSymbol} ${typeTitle(branch.relationship.kind)}`;
+        relBadge.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.onSelectItem({ kind: 'relationship', id: branch.relationship.id });
+        });
+        row.appendChild(relBadge);
+
+        // Element name and layer
+        const elSpan = this.doc.createElement('span');
+        elSpan.style.cssText = `
+            font-size: 11px;
+            color: #24292e;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+        `;
+        elSpan.textContent = branch.element.name || '(unnamed)';
+        elSpan.title = `${branch.element.name} (${typeTitle(branch.element.type)} - ${typeTitle(branch.layer)})`;
+        row.appendChild(elSpan);
+
+        // Focus jump button (⊙)
+        const focusBtn = this.doc.createElement('span');
+        focusBtn.textContent = '⊙';
+        focusBtn.title = 'Re-center navigator on this element';
+        focusBtn.style.cssText = `
+            color: #0366d6;
+            font-size: 12px;
+            opacity: 0.6;
+            padding: 0 4px;
+            cursor: pointer;
+            flex-shrink: 0;
+        `;
+        focusBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.nav.focus(branch.element.id, { force: true });
+        });
+        row.appendChild(focusBtn);
+
+        row.addEventListener('click', () => {
+            this.onSelectItem({ kind: 'element', id: branch.element.id });
+        });
+
+        row.addEventListener('mouseenter', () => {
+            row.style.background = '#f1f3f5';
+            focusBtn.style.opacity = '1';
+        });
+        row.addEventListener('mouseleave', () => {
+            row.style.background = '';
+            focusBtn.style.opacity = '0.6';
+        });
+
+        wrap.appendChild(row);
+
+        // Render recursive children if expanded
+        if (branch.expanded && branch.children) {
+            const childWrap = this.doc.createElement('div');
+            childWrap.style.cssText = 'display: flex; flex-direction: column; gap: 2px;';
+
+            const sub = branch.children;
+            const hasKids = sub.outgoing.length > 0 || sub.incoming.length > 0;
+            if (!hasKids) {
+                const noMore = this.doc.createElement('div');
+                noMore.style.cssText = `margin-left: ${(level + 1) * 14}px; font-size: 10px; color: #888; font-style: italic;`;
+                noMore.textContent = '(end of path)';
+                childWrap.appendChild(noMore);
+            } else {
+                for (const outK of sub.outgoing) {
+                    childWrap.appendChild(this._renderBranch(outK, level + 1));
+                }
+                for (const inK of sub.incoming) {
+                    childWrap.appendChild(this._renderBranch(inK, level + 1));
+                }
+            }
+            wrap.appendChild(childWrap);
+        }
+
+        return wrap;
+    }
+}
+
+/**
+ * Functional helper to build a NavigatorPanel DOM element.
+ */
+export function buildNavigatorPanel(doc, options) {
+    return new NavigatorPanel(doc, options).dom;
+}