@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/workspace/EditorShell.js

@@ -1,67 +1,166 @@
-import { el } from './dom.js';
-
-/**
- * EditorShell — the workbench layout diagram editors share: a toolbar row, a
- * side panel (model tree, palette), the main area (tabs + canvas) and an
- * optional right-hand aside. Built with el() and inline styles, so it needs no
- * stylesheet and never restyles the host page.
- *
- * Not a custom element, so the engine bundle can use it under node too.
- */
-export class EditorShell {
-    /**
-     * @param {Object} [options]
-     * @param {Document} [options.document]
-     * @param {string} [options.sideWidth]
-     * @param {boolean} [options.aside] - Add a right-hand panel
-     * @param {string} [options.asideWidth]
-     * @param {Object<string, string>} [options.ids] - Element ids per region: toolbar, side, main, aside
-     * @param {boolean} [options.fullPage] - Fill the viewport (and drop the body margin)
-     */
-    constructor({ document: doc = document, sideWidth = '280px', aside = false, asideWidth = '300px', ids = {}, fullPage = false } = {}) {
-        this.doc = doc;
-        this.sideWidth = sideWidth;
-        this.aside = aside;
-        this.asideWidth = asideWidth;
-        this.ids = ids;
-        this.fullPage = fullPage;
-    }
-
-    /** @returns {{root: HTMLElement, toolbar: HTMLElement, side: HTMLElement, main: HTMLElement, aside?: HTMLElement}} */
-    build() {
-        const regions = {};
-        const region = (name, style) => ({
-            attrs: { id: this.ids[name] ?? null, 'data-shell-region': name },
-            style,
-            ref: (n) => { regions[name] = n; },
-        });
-        const panel = { background: '#fafafa', overflowY: 'auto', minHeight: '0', boxSizing: 'border-box' };
-        regions.root = el({
-            attrs: { 'data-editor-shell': '' },
-            style: {
-                display: 'flex', flexDirection: 'column', height: this.fullPage ? '100vh' : '100%', minHeight: '0',
-                fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", color: '#333', background: '#f5f5f5',
-            },
-            children: [
-                region('toolbar', { flex: '0 0 auto' }),
-                {
-                    style: { display: 'flex', flex: '1 1 auto', minHeight: '0', overflow: 'hidden' },
-                    children: [
-                        region('side', { ...panel, flex: `0 0 ${this.sideWidth}`, borderRight: '1px solid #ddd' }),
-                        region('main', { flex: '1 1 auto', display: 'flex', flexDirection: 'column', minWidth: '0', minHeight: '0', background: '#fff', position: 'relative' }),
-                        this.aside && region('aside', { ...panel, flex: `0 0 ${this.asideWidth}`, borderLeft: '1px solid #ddd' }),
-                    ].filter(Boolean),
-                },
-            ],
-        }, this.doc);
-        return regions;
-    }
-
-    /** Replace the host's contents with the shell. */
-    mount(host) {
-        const regions = this.build();
-        host.replaceChildren(regions.root);
-        if (this.fullPage) this.doc.body.style.margin = '0';
-        return regions;
-    }
-}
+import { el } from './dom.js';
+import { PanelLayout } from './PanelLayout.js';
+
+/** How wide a splitter is, and a folded panel's stub. */
+const SPLITTER_WIDTH = 6;
+const STUB_WIDTH = 24;
+
+/**
+ * EditorShell — the workbench layout diagram editors share: a toolbar row, a
+ * side panel (model tree, palette), the main area (tabs + canvas) and an
+ * optional right-hand aside. Built with el() and inline styles, so it needs no
+ * stylesheet and never restyles the host page.
+ *
+ * With a `layout` (PanelLayout, kept by the part so it outlives this shell), a
+ * side panel's inner edge is a splitter: drag it to resize the panel, drag it
+ * nearly shut or double-click it to fold the panel to a stub (a strip with its
+ * name), and click the stub to open it at the width it had.
+ *
+ * Not a custom element, so the engine bundle can use it under node too.
+ */
+export class EditorShell {
+    /**
+     * @param {Object} [options]
+     * @param {Document} [options.document]
+     * @param {string} [options.sideWidth]
+     * @param {boolean} [options.aside] - Add a right-hand panel
+     * @param {string} [options.asideWidth]
+     * @param {Object<string, string>} [options.ids] - Element ids per region: toolbar, side, main, aside
+     * @param {boolean} [options.fullPage] - Fill the viewport (and drop the body margin)
+     * @param {PanelLayout} [options.layout] - Resizable, foldable side panels (their widths kept here)
+     * @param {{side?: string, aside?: string}} [options.labels] - What a folded panel's stub says
+     */
+    constructor({ document: doc = document, sideWidth = '280px', aside = false, asideWidth = '300px', ids = {}, fullPage = false, layout = null, labels = {} } = {}) {
+        this.doc = doc;
+        this.sideWidth = sideWidth;
+        this.aside = aside;
+        this.asideWidth = asideWidth;
+        this.ids = ids;
+        this.fullPage = fullPage;
+        this.layout = layout;
+        this.labels = { side: 'Side panel', aside: 'Panel', ...labels };
+        /** Each side panel's elements (with a layout): region, splitter, stub. */
+        this._panels = {};
+    }
+
+    /** @returns {{root: HTMLElement, toolbar: HTMLElement, side: HTMLElement, main: HTMLElement, aside?: HTMLElement}} */
+    build() {
+        const regions = {};
+        const region = (name, style) => ({
+            attrs: { id: this.ids[name] ?? null, 'data-shell-region': name },
+            style,
+            ref: (n) => { regions[name] = n; },
+        });
+        const panel = { background: '#fafafa', overflowY: 'auto', minHeight: '0', boxSizing: 'border-box' };
+        const width = (name, given) => (this.layout ? `${this.layout.panel(name, parseInt(given, 10)).width}px` : given);
+        // With a layout: [stub] side [splitter] main [splitter] aside [stub], the stubs at the outer edges.
+        const extra = (make) => (this.layout ? [make()] : []);
+        const row = [
+            ...extra(() => this._stub('side')),
+            region('side', { ...panel, flex: `0 0 ${width('side', this.sideWidth)}`, borderRight: '1px solid #ddd' }),
+            ...extra(() => this._splitter('side')),
+            region('main', { flex: '1 1 auto', display: 'flex', flexDirection: 'column', minWidth: '0', minHeight: '0', background: '#fff', position: 'relative' }),
+            ...(this.aside ? [
+                ...extra(() => this._splitter('aside')),
+                region('aside', { ...panel, flex: `0 0 ${width('aside', this.asideWidth)}`, borderLeft: '1px solid #ddd' }),
+                ...extra(() => this._stub('aside')),
+            ] : []),
+        ];
+        regions.root = el({
+            attrs: { 'data-editor-shell': '' },
+            style: {
+                display: 'flex', flexDirection: 'column', height: this.fullPage ? '100vh' : '100%', minHeight: '0',
+                fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", color: '#333', background: '#f5f5f5',
+            },
+            children: [
+                region('toolbar', { flex: '0 0 auto' }),
+                { style: { display: 'flex', flex: '1 1 auto', minHeight: '0', overflow: 'hidden' }, children: row },
+            ],
+        }, this.doc);
+        for (const name of Object.keys(this._panels)) {
+            this._panels[name].region = regions[name];
+            this._show(name);
+        }
+        return regions;
+    }
+
+    /** A folded panel's strip: its name, upright; a click opens it. @private */
+    _stub(name) {
+        const parts = (this._panels[name] ??= {});
+        return {
+            attrs: { 'data-shell-stub': name, role: 'button', tabindex: '0', title: `Show ${this.labels[name]}`, 'aria-label': `Show ${this.labels[name]}` },
+            style: {
+                flex: `0 0 ${STUB_WIDTH}px`, display: 'none', alignItems: 'center', justifyContent: 'flex-start', paddingTop: '8px',
+                writingMode: 'vertical-rl', background: '#eee', borderRight: name === 'side' ? '1px solid #ddd' : 'none',
+                borderLeft: name === 'aside' ? '1px solid #ddd' : 'none', cursor: 'pointer', fontSize: '12px', color: '#555', userSelect: 'none',
+            },
+            text: this.labels[name],
+            on: {
+                click: () => this.toggle(name),
+                keydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.toggle(name); } },
+            },
+            ref: (n) => { parts.stub = n; },
+        };
+    }
+
+    /** A panel's inner edge: drag to resize (nearly shut folds it), double-click to fold or open. @private */
+    _splitter(name) {
+        const parts = (this._panels[name] ??= {});
+        return {
+            attrs: { 'data-shell-splitter': name, role: 'separator', 'aria-orientation': 'vertical', title: 'Drag to resize; double-click to fold' },
+            style: { flex: `0 0 ${SPLITTER_WIDTH}px`, cursor: 'col-resize', background: 'transparent', touchAction: 'none' },
+            on: {
+                pointerdown: (e) => this._drag(name, e),
+                dblclick: () => this.toggle(name),
+            },
+            ref: (n) => { parts.splitter = n; },
+        };
+    }
+
+    /** Follow a drag of a panel's edge until the pointer is let go. @private */
+    _drag(name, down) {
+        const p = this.layout.panels[name];
+        if (!p || p.collapsed) return;
+        down.preventDefault();
+        const start = down.clientX, width = p.width;
+        const sign = name === 'side' ? 1 : -1;   // the aside grows leftwards
+        const win = this.doc.defaultView ?? globalThis;
+        const move = (e) => this.resize(name, width + sign * (e.clientX - start));
+        const up = () => { win.removeEventListener('pointermove', move); win.removeEventListener('pointerup', up); };
+        win.addEventListener('pointermove', move);
+        win.addEventListener('pointerup', up);
+    }
+
+    /** Give a panel a width (PanelLayout#resize: nearly shut folds it), and show it so. */
+    resize(name, width) {
+        this.layout?.resize(name, width);
+        this._show(name);
+    }
+
+    /** Fold a panel to its stub, or open it again. */
+    toggle(name) {
+        this.layout?.toggle(name);
+        this._show(name);
+    }
+
+    /** Show a panel as its layout says: open at its width with its splitter, or folded to its stub. @private */
+    _show(name) {
+        const parts = this._panels[name];
+        const p = this.layout?.panels[name];
+        if (!parts?.region || !p) return;
+        parts.region.style.display = p.collapsed ? 'none' : '';
+        parts.region.style.flex = `0 0 ${p.width}px`;
+        if (parts.splitter) parts.splitter.style.display = p.collapsed ? 'none' : '';
+        if (parts.stub) parts.stub.style.display = p.collapsed ? 'flex' : 'none';
+    }
+
+    /** Replace the host's contents with the shell. */
+    mount(host) {
+        const regions = this.build();
+        host.replaceChildren(regions.root);
+        if (this.fullPage) this.doc.body.style.margin = '0';
+        return regions;
+    }
+}
+
+export { SPLITTER_WIDTH, STUB_WIDTH };

package/src/workspace/PanelLayout.js

@@ -0,0 +1,56 @@
+/**
+ * PanelLayout — the widths of an editor's side panels (EditorShell's `side`
+ * and `aside`) and which are folded to a stub, kept by the part so they
+ * survive the shell being built anew on every render. Pure: EditorShell's
+ * splitters and stubs call it, and tests need no DOM.
+ *
+ * Dragged narrower than `collapseBelow`, a panel folds; opened again, it
+ * takes back the width it had.
+ */
+export class PanelLayout {
+    /** Narrower than this a panel folds to its stub. */
+    static COLLAPSE_BELOW = 60;
+    static MIN_WIDTH = 120;
+    static MAX_WIDTH = 900;
+
+    /**
+     * @param {Object<string, {width: number, collapsed?: boolean}>} [panels] - By name ('side', 'aside')
+     */
+    constructor(panels = {}) {
+        this.panels = Object.fromEntries(Object.entries(panels).map(([name, p]) => [name, { width: p.width, collapsed: !!p.collapsed }]));
+    }
+
+    /** A panel's state, made with `width` the first time it is asked for. */
+    panel(name, width) {
+        return (this.panels[name] ??= { width, collapsed: false });
+    }
+
+    /** A panel's width as drawn: 0 folded, else its own. */
+    widthOf(name) {
+        const p = this.panels[name];
+        return !p ? null : p.collapsed ? 0 : p.width;
+    }
+
+    /**
+     * A drag of the panel's edge to `width`: narrower than COLLAPSE_BELOW folds
+     * it (keeping the width it had), else it takes the width, kept within bounds.
+     */
+    resize(name, width) {
+        const p = this.panels[name];
+        if (!p) return null;
+        if (width < PanelLayout.COLLAPSE_BELOW) p.collapsed = true;
+        else Object.assign(p, { collapsed: false, width: Math.round(Math.min(PanelLayout.MAX_WIDTH, Math.max(PanelLayout.MIN_WIDTH, width))) });
+        return p;
+    }
+
+    /** Fold a panel to its stub, or open it at the width it had. */
+    toggle(name) {
+        const p = this.panels[name];
+        if (p) p.collapsed = !p.collapsed;
+        return p;
+    }
+
+    toJSON() {
+        return Object.fromEntries(Object.entries(this.panels).map(([name, p]) => [name, { ...p }]));
+    }
+}