@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/workspace/Workspace.js

@@ -169,15 +169,134 @@ export class Workspace extends HTMLElement {
         }));
     }
 
+    /** Return every partId referenced by a registered perspective's layout. */
+    partIdsForPerspective(name) {
+        const layout = this.perspectives.get(name);
+        if (!layout) return [];
+        try {
+            return createLayout(layout).partIds();
+        } catch {
+            return [];
+        }
+    }
+
+    /**
+     * Activate a perspective containing `partId` (if not already visible), scroll
+     * the part's pane into the center of the viewport, and pulse a highlight ring.
+     */
+    focusPart(partId, perspectiveName = null) {
+        if (!partId) return false;
+        const targetPerspective = perspectiveName
+            ?? (this.activePerspective && this.partIdsForPerspective(this.activePerspective).includes(partId)
+                ? this.activePerspective
+                : [...this.perspectives.keys()].find(p => this.partIdsForPerspective(p).includes(partId)));
+        if (targetPerspective && targetPerspective !== this.activePerspective) {
+            this.activatePerspective(targetPerspective);
+        }
+        const host = this._rootEl?.querySelector(`[data-part-id="${partId}"]`);
+        const pane = host?.closest('.ws-pane') ?? host;
+        if (!pane) return false;
+        pane.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
+        pane.classList.remove('ws-pane-flash');
+        void pane.offsetWidth;
+        pane.classList.add('ws-pane-flash');
+        setTimeout(() => pane.classList.remove('ws-pane-flash'), 1500);
+        return true;
+    }
+
     _renderPerspectiveButtons() {
         if (!this._perspectivesEl) return;
-        render(this._perspectivesEl, [...this.perspectives.keys()].map(name => ({
-            tag: 'button',
-            cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
-            text: name,
-            attrs: { type: 'button' },
-            on: { click: () => this.activatePerspective(name) },
-        })));
+        render(this._perspectivesEl, [...this.perspectives.keys()].map(name => {
+            const parts = this.partIdsForPerspective(name)
+                .map(id => this.getPart(id))
+                .filter(Boolean);
+            const hasSubmenu = parts.length > 1;
+            let listEl = null;
+            let submenuEl = null;
+
+            const buildSubmenuRows = (filterText = '') => {
+                const q = filterText.trim().toLowerCase();
+                const filtered = q
+                    ? parts.filter(p => (p.title ?? p.id).toLowerCase().includes(q))
+                    : parts;
+                return filtered.map(part => ({
+                    cls: 'ws-perspective-submenu-row',
+                    children: [
+                        {
+                            tag: 'button',
+                            cls: 'ws-perspective-submenu-item',
+                            text: part.title ?? part.id,
+                            attrs: { type: 'button', title: `Jump to ${part.title ?? part.id}` },
+                            on: {
+                                click: (e) => {
+                                    e.stopPropagation();
+                                    submenuEl?.classList.remove('ws-submenu-open');
+                                    this.focusPart(part.id, name);
+                                },
+                            },
+                        },
+                        ...(part.actions ?? []).filter(a => !a.separator).map(action => ({
+                            tag: 'button',
+                            cls: 'ws-perspective-submenu-action',
+                            text: action.label,
+                            attrs: { type: 'button', title: action.title ?? action.label },
+                            on: {
+                                click: (e) => {
+                                    e.stopPropagation();
+                                    submenuEl?.classList.remove('ws-submenu-open');
+                                    action.onClick?.(part, e);
+                                },
+                            },
+                        })),
+                    ],
+                }));
+            };
+
+            return {
+                cls: 'ws-perspective-item',
+                on: {
+                    mouseenter: () => submenuEl?.classList.add('ws-submenu-open'),
+                    mouseleave: () => submenuEl?.classList.remove('ws-submenu-open'),
+                },
+                children: [
+                    {
+                        tag: 'button',
+                        cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
+                        attrs: { type: 'button' },
+                        on: { click: () => this.activatePerspective(name) },
+                        children: [
+                            { tag: 'span', text: name },
+                            hasSubmenu && { tag: 'span', cls: 'ws-perspective-caret', text: ' ▾' },
+                        ],
+                    },
+                    hasSubmenu && {
+                        cls: 'ws-perspective-submenu',
+                        ref: n => { submenuEl = n; },
+                        children: [
+                            parts.length > 8 && {
+                                cls: 'ws-perspective-submenu-search-wrap',
+                                children: [{
+                                    tag: 'input',
+                                    cls: 'ws-perspective-submenu-search',
+                                    attrs: { type: 'search', placeholder: `Filter ${name} (${parts.length})…` },
+                                    on: {
+                                        click: e => e.stopPropagation(),
+                                        input: e => {
+                                            if (listEl) render(listEl, buildSubmenuRows(e.target.value));
+                                        },
+                                    },
+                                }],
+                            },
+                            {
+                                cls: 'ws-perspective-submenu-list',
+                                ref: n => { listEl = n; },
+                                children: buildSubmenuRows(),
+                            },
+                        ],
+                    },
+                ],
+            };
+        }));
     }
 
     /* ── Theming ────────────────────────────────────────────────────────── */

package/src/workspace/archimateServices.js

@@ -1,6 +1,7 @@
 import {
     RenderEngine, ArchimateModel, ArchimateSpecializationSelector, DerivedRelationships, DiagramTabs, ModelTree,
     SettingsManager, buildAnalysisPanel, buildModelTreePanel, fromArchimateView, parseArchiModel, toArchimateModel,
+    NavigatorModel, NavigatorPanel, buildNavigatorPanel,
     parseArchiFile, toArchiFile, toArchiExport, showGlobalSettingsDialog, showPropertiesDialog, showDiagramPropertiesDialog,
 } from '../index.js';
 
@@ -21,6 +22,9 @@ export const ARCHIMATE_SERVICES = Object.freeze({
     SettingsManager,
     buildAnalysisPanel,
     buildModelTreePanel,
+    NavigatorModel,
+    NavigatorPanel,
+    buildNavigatorPanel,
     fromArchimateView,
     parseArchiModel,
     parseArchiFile,

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -281,7 +281,7 @@ export class ArchimateCanvasPart extends EditorPart {
             if (!analysisHost) return;
             analysisHost.replaceChildren(buildAnalysisPanel(doc, {
                 model, elementId: elementId && model.getElement(elementId) ? elementId : null,
-                onSelectItem: (info) => this.modelTree.select(info.id, info.kind),
+                onSelectItem: (info) => this.modelTree.select(info.id, info.kind), onSelectView: (viewId) => { if (viewId !== this.model.currentViewId) this.model.switchTo(viewId); },
             }));
         };
         this.editor.onSelectionChange(({ templateId }) => {

package/src/workspace/styles.js

@@ -57,7 +57,42 @@ export const WORKSPACE_CSS = `
 }
 .ws-toolbar-title { font-weight: 600; }
 .ws-toolbar-spacer { flex: 1; }
-.ws-perspectives { display: flex; gap: 2px; }
+.ws-perspectives { display: flex; gap: 2px; }
+.ws-perspective-item { position: relative; display: inline-flex; }
+.ws-perspective-caret { font-size: 10px; opacity: .75; }
+.ws-perspective-submenu {
+  display: none; position: absolute; top: 100%; right: 0; z-index: 1600;
+  min-width: 260px; max-width: 380px; background: var(--ws-panel-bg); color: var(--ws-fg);
+  border: 1px solid var(--ws-border); border-radius: 0 0 6px 6px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 4px 0;
+}
+.ws-perspective-submenu.ws-submenu-open { display: flex; flex-direction: column; }
+.ws-perspective-submenu-search-wrap { padding: 4px 8px 6px; border-bottom: 1px solid var(--ws-border); }
+.ws-perspective-submenu-search {
+  width: 100%; padding: 4px 8px; font: inherit; font-size: 12px;
+  background: var(--ws-bg); color: var(--ws-fg); border: 1px solid var(--ws-border); border-radius: 4px;
+}
+.ws-perspective-submenu-list { max-height: 68vh; overflow-y: auto; }
+.ws-perspective-submenu-row {
+  display: flex; align-items: center; gap: 4px; padding: 1px 6px;
+}
+.ws-perspective-submenu-row:hover { background: rgba(127,127,127,.15); }
+.ws-perspective-submenu-item {
+  flex: 1 1 auto; text-align: left; padding: 5px 6px; font: inherit; font-size: 12px;
+  background: transparent; color: var(--ws-fg); border: none; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ws-perspective-submenu-action {
+  flex: 0 0 auto; padding: 2px 6px; font: inherit; font-size: 10px; font-family: monospace;
+  background: rgba(127,127,127,.15); color: var(--ws-fg);
+  border: 1px solid var(--ws-border); border-radius: 3px; cursor: pointer; opacity: .8;
+}
+.ws-perspective-submenu-action:hover { opacity: 1; background: var(--ws-accent); color: #000; border-color: var(--ws-accent); }
+@keyframes ws-pane-flash-anim {
+  0%, 30% { box-shadow: 0 0 0 3px var(--ws-accent), 0 6px 20px rgba(0,0,0,.22); }
+  100% { box-shadow: none; }
+}
+.ws-pane-flash { animation: ws-pane-flash-anim 1.4s ease-out; }
 .ws-perspective-btn {
   padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
   color: var(--ws-toolbar-fg); background: rgba(127,127,127,.12);