@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/workspace/layout/SplitNode.js

@@ -0,0 +1,114 @@
+import { LayoutNode } from './LayoutNode.js';
+import { el } from '../dom.js';
+
+const SPLITTER_PX = 5;
+const MIN_PANE_PX = 60;
+
+/**
+ * SplitNode — a resizable row or column of children, separated by draggable
+ * splitters. This is what expresses an IDE shell (sidebar + main + console).
+ *
+ * `sizes[i]` is the pixel size of child i along the split axis, or `null` for
+ * "take the remaining space" (flex). A tree can leave every size null and get
+ * an even split; dragging a splitter pins its two neighbours to explicit pixel
+ * sizes, which is what makes the result serializable.
+ */
+export class SplitNode extends LayoutNode {
+    static type = 'split';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.dir = spec.dir === 'col' ? 'col' : 'row';
+        this.sizes = (spec.sizes ?? []).slice();
+        while (this.sizes.length < this.children.length) this.sizes.push(null);
+    }
+
+    get _axis() { return this.dir === 'row' ? 'width' : 'height'; }
+    get _clientAxis() { return this.dir === 'row' ? 'clientX' : 'clientY'; }
+
+    build(ctx) {
+        this.el.classList.add(this.dir === 'row' ? 'ws-split-row' : 'ws-split-col');
+
+        this.children.forEach((child, i) => {
+            if (i > 0) this._buildSplitter(i);
+            const pane = this.el.appendChild(el({ cls: 'ws-split-pane' }));
+            this._applySize(pane, this.sizes[i]);
+            child.render(pane, ctx);
+            child.activate?.();
+        });
+    }
+
+    _applySize(paneEl, size) {
+        if (size == null) {
+            paneEl.style.flex = '1 1 0';
+            paneEl.style.flexBasis = '0';
+        } else {
+            paneEl.style.flex = `0 0 ${size}px`;
+        }
+    }
+
+    /** The splitter sitting before child `i` — it resizes children i-1 and i. */
+    _buildSplitter(i) {
+        const bar = this.el.appendChild(el({
+            cls: ['ws-splitter', `ws-splitter-${this.dir}`],
+            style: { flex: `0 0 ${SPLITTER_PX}px` },
+            attrs: {
+                role: 'separator',
+                'aria-orientation': this.dir === 'row' ? 'vertical' : 'horizontal',
+            },
+        }));
+
+        bar.addEventListener('pointerdown', (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            const panes = [...this.el.querySelectorAll(':scope > .ws-split-pane')];
+            const before = panes[i - 1];
+            const after = panes[i];
+            if (!before || !after) return;
+
+            const start = e[this._clientAxis];
+            const beforeStart = before.getBoundingClientRect()[this._axis];
+            const afterStart = after.getBoundingClientRect()[this._axis];
+            const total = beforeStart + afterStart;
+
+            bar.setPointerCapture(e.pointerId);
+            this.el.classList.add('ws-splitting');
+
+            const onMove = (ev) => {
+                const delta = ev[this._clientAxis] - start;
+                const nextBefore = Math.max(MIN_PANE_PX, Math.min(total - MIN_PANE_PX, beforeStart + delta));
+                // Pin both neighbours: the pair must stay pixel-exact or the
+                // flex children either side would absorb the drag instead.
+                this._applySize(before, nextBefore);
+                this._applySize(after, total - nextBefore);
+            };
+            const onUp = () => {
+                bar.releasePointerCapture(e.pointerId);
+                bar.removeEventListener('pointermove', onMove);
+                bar.removeEventListener('pointerup', onUp);
+                bar.removeEventListener('pointercancel', onUp);
+                this.el.classList.remove('ws-splitting');
+                this.sizes[i - 1] = before.getBoundingClientRect()[this._axis];
+                this.sizes[i] = after.getBoundingClientRect()[this._axis];
+                this._emitChange();
+            };
+            bar.addEventListener('pointermove', onMove);
+            bar.addEventListener('pointerup', onUp);
+            bar.addEventListener('pointercancel', onUp);
+        });
+    }
+
+    /** Children outside a tab strip are live as soon as they exist. */
+    activate() {
+        for (const child of this.children) child.activate?.();
+    }
+
+    serialize() {
+        return {
+            type: SplitNode.type,
+            dir: this.dir,
+            sizes: this.sizes.slice(),
+            children: this.children.map(c => c.serialize()),
+        };
+    }
+}

package/src/workspace/layout/TabsNode.js

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

package/src/workspace/layout/index.js

@@ -0,0 +1,24 @@
+import { LayoutNode } from './LayoutNode.js';
+import { PartNode } from './PartNode.js';
+import { SplitNode } from './SplitNode.js';
+import { TabsNode } from './TabsNode.js';
+import { GridNode } from './GridNode.js';
+
+// Populate the discriminator table LayoutNode.create() dispatches on. Doing it
+// here rather than in each subclass keeps the subclasses importing only the
+// base, so there is no import cycle.
+LayoutNode.registerType(PartNode);
+LayoutNode.registerType(SplitNode);
+LayoutNode.registerType(TabsNode);
+LayoutNode.registerType(GridNode);
+
+/** Build a layout tree from a plain-JSON descriptor. */
+export function createLayout(json) {
+    return LayoutNode.create(json);
+}
+
+export { LayoutNode, PartNode, SplitNode, TabsNode, GridNode };
+export {
+    GRID_COLS, ROW_UNIT_PX, GRID_GAP_PX,
+    MIN_COL_SPAN, MIN_ROW_SPAN, DEFAULT_COL_SPAN, DEFAULT_ROW_SPAN,
+} from './GridNode.js';

package/src/workspace/parts/AdapterPart.js

@@ -0,0 +1,33 @@
+import { Part } from '../Part.js';
+
+/**
+ * AdapterPart — wraps an existing imperative `mount(element, ctx)` function.
+ *
+ * This is the migration bridge, and it matters more than it looks: sqlengine
+ * workbench already has eight tool panels built as `mountX(container, {apiFetch})`
+ * functions. Wrapping them means they become parts of this shell **without
+ * being rewritten**, so adoption doesn't have to be all-or-nothing.
+ *
+ *   ws.addPart({ id: 'datamodel', type: 'adapter', title: 'Data Modeller',
+ *                mount: (el, ctx) => mountDataModel(el, { apiFetch }) });
+ *
+ * If the wrapped function returns a teardown callback it is honoured on dispose.
+ */
+export class AdapterPart extends Part {
+    static type = 'adapter';
+
+    render() {
+        const fn = this.spec.mount;
+        if (typeof fn !== 'function') {
+            throw new Error(`AdapterPart "${this.id}" requires a mount(element, ctx) function`);
+        }
+        const teardown = fn(this.container, this.ctx);
+        if (typeof teardown === 'function') this.onDispose(teardown);
+    }
+
+    /** `mount` is a live function, so it cannot round-trip through JSON. */
+    serialize() {
+        const { mount, ...rest } = this.spec;
+        return { ...rest, type: AdapterPart.type, id: this.id, title: this.title, adapter: true };
+    }
+}