@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/workspace/layout/TabsNode.js

@@ -1,191 +1,205 @@
-import { LayoutNode } from './LayoutNode.js';
-import { el } from '../dom.js';
-
-/**
- * TabsNode — a tab strip over a stack of children, one visible at a time.
- * This is what workbench's eight mutually exclusive tool-panels become, and
- * what a WorkArea uses as its editor groups.
- *
- * Three deliberate behaviours:
- *  - **Lazy first mount.** A child is only mounted when its tab is first
- *    selected, so opening a workspace does not pay for eight panels nobody
- *    looked at. This is the case ContextBus's retained-value replay exists for:
- *    a part mounting on first activation still sees current selection.
- *  - **No unmount on switch.** Once mounted a child stays mounted and is merely
- *    hidden. Tearing down and rebuilding per switch is what makes a shell feel
- *    slow, and it would discard scroll position and unsaved input.
- *  - **Closing is optional and delegable.** `closable` adds a close control per
- *    tab (per-child `closable: false` opts one out — a pinned welcome tab, say).
- *    With no `ctx.onTabClose` the node closes the tab itself, so a plain layout
- *    gets working close buttons; with one, the handler owns it, which is how
- *    WorkArea keeps closing in its model instead of in the DOM.
- */
-export class TabsNode extends LayoutNode {
-    static type = 'tabs';
-
-    constructor(spec = {}) {
-        super(spec);
-        this.active = Number.isInteger(spec.active) ? spec.active : 0;
-        /** Group identity — what "open beside THIS group" addresses. */
-        this.id = spec.id ?? null;
-        this.closable = spec.closable ?? false;
-        this._panes = [];
-        this._tabs = [];
-    }
-
-    build(ctx) {
-        this.el.classList.add('ws-tabs');
-        this.el.append(
-            el({ cls: 'ws-tabstrip', attrs: { role: 'tablist' }, ref: n => { this.strip = n; } }),
-            el({ cls: 'ws-tabbody', ref: n => { this.body = n; } }),
-        );
-
-        // Capture phase: a part may stopPropagation on its own clicks, and
-        // "the group you last touched" has to hold even then, or the next
-        // thing you open lands somewhere you weren't looking.
-        if (this.id) {
-            this.el.addEventListener('pointerdown', () => ctx.onGroupFocus?.(this.id, this), true);
-        }
-
-        this._panes = [];
-        this._tabs = [];
-
-        this.children.forEach((child, i) => {
-            const pane = el({ cls: 'ws-tabpane' });
-            this.body.appendChild(pane);
-            // Render before reading label(): a PartNode only resolves its part
-            // — and therefore its title — during render(). Building the tab
-            // first would label every tab with the raw part id.
-            child.render(pane, ctx);
-            this._panes.push(pane);
-            this._tabs.push(this.strip.appendChild(this._buildTab(child, i)));
-        });
-
-        if (this.children.length) this.select(Math.min(this.active, this.children.length - 1), true);
-    }
-
-    /**
-     * One tab. A `<div role="tab">` rather than a `<button>` because a closable
-     * tab nests a close button, and a button inside a button is invalid markup
-     * that browsers reparent — so `tabindex`/`keydown` stand in for the button
-     * behaviour that is lost.
-     */
-    _buildTab(child, i) {
-        const label = child.label?.() ?? child.spec?.title ?? `Tab ${i + 1}`;
-        const closable = this.closable && (child.spec?.closable ?? true);
-        return el({
-            cls: 'ws-tab',
-            attrs: { role: 'tab', tabindex: '0', title: label },
-            on: {
-                click: () => this.select(i),
-                keydown: (e) => {
-                    if (e.key !== 'Enter' && e.key !== ' ') return;
-                    e.preventDefault();
-                    this.select(i);
-                },
-                // Middle-click closes, as it does in every editor and browser.
-                auxclick: (e) => { if (closable && e.button === 1) { e.preventDefault(); this.requestClose(i); } },
-            },
-            children: [
-                { tag: 'span', cls: 'ws-tab-label', text: label },
-                closable && {
-                    tag: 'button',
-                    cls: 'ws-tabclose',
-                    text: '×',
-                    attrs: { type: 'button', tabindex: '-1', 'aria-label': `Close ${label}` },
-                    // Without stopPropagation the tab's own click handler also
-                    // fires and selects the tab we are closing.
-                    on: { click: (e) => { e.stopPropagation(); this.requestClose(i); } },
-                },
-            ].filter(Boolean),
-        });
-    }
-
-    select(index, silent = false) {
-        if (index < 0 || index >= this.children.length) return;
-        this.active = index;
-        this._tabs.forEach((t, i) => {
-            const on = i === index;
-            t.classList.toggle('ws-tab-active', on);
-            t.setAttribute('aria-selected', String(on));
-        });
-        this._panes.forEach((p, i) => { p.style.display = i === index ? '' : 'none'; });
-        // Mount on first reveal only — activate() is idempotent.
-        this.children[index].activate?.();
-        if (!silent) this._emitChange();
-    }
-
-    /**
-     * A tab's close control was used. Hands off to `ctx.onTabClose` when the
-     * shell wants to own the decision (it may prompt about unsaved work, or
-     * rearrange the surrounding splits); otherwise closes it here.
-     */
-    requestClose(index) {
-        const child = this.children[index];
-        if (!child) return;
-        const detail = { tabs: this, index, partId: child.spec?.partId ?? null, node: child };
-        if (this.ctx?.onTabClose) { this.ctx.onTabClose(detail); return; }
-        this.closeTab(index);
-    }
-
-    /**
-     * Remove a tab and its child. Selection moves to the neighbour rather than
-     * back to the first tab, which is what closing the tab you were reading
-     * should feel like.
-     */
-    closeTab(index) {
-        const child = this.children[index];
-        if (!child) return null;
-        child.dispose();
-        this._panes[index]?.remove?.();
-        this._tabs[index]?.remove?.();
-        this.children.splice(index, 1);
-        this._panes.splice(index, 1);
-        this._tabs.splice(index, 1);
-        // Rebuilt so each tab's handlers close over its new index.
-        this._tabs.forEach((tab, i) => {
-            const fresh = this._buildTab(this.children[i], i);
-            tab.replaceWith(fresh);
-            this._tabs[i] = fresh;
-        });
-        if (this.children.length) {
-            this.select(Math.min(index, this.children.length - 1), true);
-        } else {
-            this.active = 0;
-        }
-        this._emitChange();
-        return child;
-    }
-
-    /** Show each tab's label as its child gives it now (a part's title that changed). */
-    refreshLabels() {
-        this._tabs.forEach((tab, i) => {
-            const fresh = this._buildTab(this.children[i], i);
-            fresh.classList.toggle('ws-tab-active', i === this.active);
-            fresh.setAttribute('aria-selected', String(i === this.active));
-            tab.replaceWith(fresh);
-            this._tabs[i] = fresh;
-        });
-    }
-
-    /** Activating the container activates only the visible child. */
-    activate() {
-        if (this.children.length) this.children[this.active]?.activate?.();
-    }
-
-    serialize() {
-        // Spread the spec first: `id` and `closable` are part of the group's
-        // identity, and a work area that lost group ids on save would reopen
-        // with every "open beside this group" pointing at nothing.
-        // The spec is spread rather than rebuilt field by field: `id` and
-        // `closable` are part of a group's identity, and a work area that lost
-        // group ids on save would come back with every "open beside this group"
-        // pointing at nothing.
-        return {
-            ...this.spec,
-            type: TabsNode.type,
-            active: this.active,
-            children: this.children.map(c => c.serialize()),
-        };
-    }
-}
+import { LayoutNode } from './LayoutNode.js';
+import { el } from '../dom.js';
+
+/**
+ * TabsNode — a tab strip over a stack of children, one visible at a time.
+ * This is what workbench's eight mutually exclusive tool-panels become, and
+ * what a WorkArea uses as its editor groups.
+ *
+ * Three deliberate behaviours:
+ *  - **Lazy first mount.** A child is only mounted when its tab is first
+ *    selected, so opening a workspace does not pay for eight panels nobody
+ *    looked at. This is the case ContextBus's retained-value replay exists for:
+ *    a part mounting on first activation still sees current selection.
+ *  - **No unmount on switch.** Once mounted a child stays mounted and is merely
+ *    hidden. Tearing down and rebuilding per switch is what makes a shell feel
+ *    slow, and it would discard scroll position and unsaved input.
+ *  - **Closing is optional and delegable.** `closable` adds a close control per
+ *    tab (per-child `closable: false` opts one out — a pinned welcome tab, say).
+ *    With no `ctx.onTabClose` the node closes the tab itself, so a plain layout
+ *    gets working close buttons; with one, the handler owns it, which is how
+ *    WorkArea keeps closing in its model instead of in the DOM.
+ */
+export class TabsNode extends LayoutNode {
+    static type = 'tabs';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.active = Number.isInteger(spec.active) ? spec.active : 0;
+        /** Group identity — what "open beside THIS group" addresses. */
+        this.id = spec.id ?? null;
+        this.closable = spec.closable ?? false;
+        this._panes = [];
+        this._tabs = [];
+    }
+
+    build(ctx) {
+        this.el.classList.add('ws-tabs');
+        this.el.append(
+            el({ cls: 'ws-tabstrip', attrs: { role: 'tablist' }, ref: n => { this.strip = n; } }),
+            el({ cls: 'ws-tabbody', ref: n => { this.body = n; } }),
+        );
+
+        // Capture phase: a part may stopPropagation on its own clicks, and
+        // "the group you last touched" has to hold even then, or the next
+        // thing you open lands somewhere you weren't looking.
+        if (this.id) {
+            this.el.addEventListener('pointerdown', () => ctx.onGroupFocus?.(this.id, this), true);
+        }
+
+        this._panes = [];
+        this._tabs = [];
+
+        this.children.forEach((child, i) => {
+            const pane = el({ cls: 'ws-tabpane' });
+            this.body.appendChild(pane);
+            // Render before reading label(): a PartNode only resolves its part
+            // — and therefore its title — during render(). Building the tab
+            // first would label every tab with the raw part id.
+            child.render(pane, ctx);
+            this._panes.push(pane);
+            this._tabs.push(this.strip.appendChild(this._buildTab(child, i)));
+        });
+
+        if (this.children.length) this.select(Math.min(this.active, this.children.length - 1), true);
+    }
+
+    /**
+     * One tab. A `<div role="tab">` rather than a `<button>` because a closable
+     * tab nests a close button, and a button inside a button is invalid markup
+     * that browsers reparent — so `tabindex`/`keydown` stand in for the button
+     * behaviour that is lost.
+     */
+    _buildTab(child, i) {
+        const label = child.label?.() ?? child.spec?.title ?? `Tab ${i + 1}`;
+        const closable = this.closable && (child.spec?.closable ?? true);
+        return el({
+            cls: 'ws-tab',
+            attrs: { role: 'tab', tabindex: '0', title: label },
+            on: {
+                click: () => this.select(i),
+                keydown: (e) => {
+                    if (e.key !== 'Enter' && e.key !== ' ') return;
+                    e.preventDefault();
+                    this.select(i);
+                },
+                // Middle-click closes, as it does in every editor and browser.
+                auxclick: (e) => { if (closable && e.button === 1) { e.preventDefault(); this.requestClose(i); } },
+                // Right-click: the shell's menu for what the tab holds, when it offers one.
+                contextmenu: (e) => this.requestMenu(i, e),
+            },
+            children: [
+                { tag: 'span', cls: 'ws-tab-label', text: label },
+                closable && {
+                    tag: 'button',
+                    cls: 'ws-tabclose',
+                    text: '×',
+                    attrs: { type: 'button', tabindex: '-1', 'aria-label': `Close ${label}` },
+                    // Without stopPropagation the tab's own click handler also
+                    // fires and selects the tab we are closing.
+                    on: { click: (e) => { e.stopPropagation(); this.requestClose(i); } },
+                },
+            ].filter(Boolean),
+        });
+    }
+
+    select(index, silent = false) {
+        if (index < 0 || index >= this.children.length) return;
+        this.active = index;
+        this._tabs.forEach((t, i) => {
+            const on = i === index;
+            t.classList.toggle('ws-tab-active', on);
+            t.setAttribute('aria-selected', String(on));
+        });
+        this._panes.forEach((p, i) => { p.style.display = i === index ? '' : 'none'; });
+        // Mount on first reveal only — activate() is idempotent.
+        this.children[index].activate?.();
+        if (!silent) this._emitChange();
+    }
+
+    /**
+     * A tab was right-clicked: `ctx.onTabMenu` (the shell's menu for what it
+     * holds) gets it, with the event to place the menu by; without one, the
+     * browser's own menu shows.
+     */
+    requestMenu(index, event) {
+        const child = this.children[index];
+        if (!child || !this.ctx?.onTabMenu) return;
+        const shown = this.ctx.onTabMenu({ tabs: this, index, partId: child.spec?.partId ?? null, node: child, event });
+        if (shown) event.preventDefault();
+    }
+
+    /**
+     * A tab's close control was used. Hands off to `ctx.onTabClose` when the
+     * shell wants to own the decision (it may prompt about unsaved work, or
+     * rearrange the surrounding splits); otherwise closes it here.
+     */
+    requestClose(index) {
+        const child = this.children[index];
+        if (!child) return;
+        const detail = { tabs: this, index, partId: child.spec?.partId ?? null, node: child };
+        if (this.ctx?.onTabClose) { this.ctx.onTabClose(detail); return; }
+        this.closeTab(index);
+    }
+
+    /**
+     * Remove a tab and its child. Selection moves to the neighbour rather than
+     * back to the first tab, which is what closing the tab you were reading
+     * should feel like.
+     */
+    closeTab(index) {
+        const child = this.children[index];
+        if (!child) return null;
+        child.dispose();
+        this._panes[index]?.remove?.();
+        this._tabs[index]?.remove?.();
+        this.children.splice(index, 1);
+        this._panes.splice(index, 1);
+        this._tabs.splice(index, 1);
+        // Rebuilt so each tab's handlers close over its new index.
+        this._tabs.forEach((tab, i) => {
+            const fresh = this._buildTab(this.children[i], i);
+            tab.replaceWith(fresh);
+            this._tabs[i] = fresh;
+        });
+        if (this.children.length) {
+            this.select(Math.min(index, this.children.length - 1), true);
+        } else {
+            this.active = 0;
+        }
+        this._emitChange();
+        return child;
+    }
+
+    /** Show each tab's label as its child gives it now (a part's title that changed). */
+    refreshLabels() {
+        this._tabs.forEach((tab, i) => {
+            const fresh = this._buildTab(this.children[i], i);
+            fresh.classList.toggle('ws-tab-active', i === this.active);
+            fresh.setAttribute('aria-selected', String(i === this.active));
+            tab.replaceWith(fresh);
+            this._tabs[i] = fresh;
+        });
+    }
+
+    /** Activating the container activates only the visible child. */
+    activate() {
+        if (this.children.length) this.children[this.active]?.activate?.();
+    }
+
+    serialize() {
+        // Spread the spec first: `id` and `closable` are part of the group's
+        // identity, and a work area that lost group ids on save would reopen
+        // with every "open beside this group" pointing at nothing.
+        // The spec is spread rather than rebuilt field by field: `id` and
+        // `closable` are part of a group's identity, and a work area that lost
+        // group ids on save would come back with every "open beside this group"
+        // pointing at nothing.
+        return {
+            ...this.spec,
+            type: TabsNode.type,
+            active: this.active,
+            children: this.children.map(c => c.serialize()),
+        };
+    }
+}

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -6,7 +6,6 @@ import { ArchimateCanvasEditor, ArchimatePalette, typeTitle } from '../../charti
 import { ArchimateNotation } from '../../archimate.js';
 import { MenuBar } from '../../charting/MenuBar.js';
 import { ToolbarText } from '../../charting/toolbar/index.js';
-import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
 import { FormDialog } from '../../charting/FormDialog.js';
 import { CsvImportDialog } from '../../charting/archimate/CsvImportDialog.js';
 import { pickFile } from '../../charting/toolbar/pickFile.js';
@@ -189,13 +188,12 @@ export class ArchimateCanvasPart extends EditorPart {
         elements.id = 'elements';
         canvas.appendChild(elements);
 
-        const tabs = new ViewTabStrip({
-            document: doc,
-            onSelect: (id) => model.switchTo(id),
-            menuItems: (id) => this.viewMenu.items(id),
-        }).render(model.views(), model.currentViewId);
+        const tabs = this.viewTabs();
 
-        const { toolbar, side, main, aside } = new EditorShell({ document: doc, sideWidth: '260px', aside: true, asideWidth: this.spec.analysis ? '260px' : '210px' }).mount(this.container);
+        const { toolbar, side, main, aside } = new EditorShell({
+            document: doc, sideWidth: '260px', aside: true, asideWidth: this.spec.analysis ? '260px' : '210px',
+            layout: this.layout, labels: { side: 'Model', aside: this.spec.analysis ? 'Palette and analysis' : 'Palette' },
+        }).mount(this.container);
         Object.assign(aside.style, { padding: '6px', fontSize: '12px' });
         // With `analysis`, the palette shares the right with the analysis of the selected element.
         let paletteHost = aside, analysisHost = null;