@perspective-dev/workspace 4.0.0

package/src/ts/workspace/tabbar.ts

@@ -0,0 +1,237 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { ArrayExt } from "@lumino/algorithm";
+import { ElementExt } from "@lumino/domutils";
+import { TabBar } from "@lumino/widgets";
+import { TabBarItems, PerspectiveTabBarRenderer } from "./tabbarrenderer";
+import { VirtualDOM } from "@lumino/virtualdom";
+import { CommandRegistry } from "@lumino/commands";
+import { Menu } from "@lumino/widgets";
+import { PerspectiveWorkspace } from "./workspace";
+import { Message } from "@lumino/messaging";
+import { Title } from "@lumino/widgets";
+import { Signal } from "@lumino/signaling";
+import { ReadonlyJSONObject, ReadonlyJSONValue } from "@lumino/coreutils";
+import { WorkspaceMenu } from "./menu";
+
+export class PerspectiveTabBar extends TabBar<any> {
+    _workspace: PerspectiveWorkspace;
+    __content_node__?: HTMLElement;
+    _menu?: Menu;
+    __titles: string[];
+
+    constructor(workspace: PerspectiveWorkspace, options = {}) {
+        super(options);
+        this._addEventListeners();
+        this.__content_node__ = undefined;
+        this._workspace = workspace;
+        this.__titles = [];
+    }
+
+    get private_titles(): Title<any>[] {
+        let titles: Title<any>[] = (this as any)._titles;
+        return titles;
+    }
+
+    onUpdateRequest(msg: Message) {
+        // NOT INERT!  This is a lumino bug fix.
+        // lumino/virtualdom keeps a weakmap on contentNode which is later
+        // reset - this causes the diff to double some elements.  Memoizing
+        // prevent collection from the weakmap.
+        this.__content_node__ = this.contentNode;
+        this.node.style.contain = "";
+
+        // super.onUpdateRequest(msg);
+
+        let titles: Title<any>[] = (this as any)._titles;
+        let renderer = this.renderer;
+        let currentTitle = this.currentTitle!;
+
+        // Another hack. `TabBar` selects by index and I don't want to fork this
+        // logic, so insert empty divs until the indices match.
+        let content = new Array();
+        for (let i = 0, n = titles.length; i < n; ++i) {
+            let title = titles[i];
+            let current = title === currentTitle;
+            let otherTitles = titles.filter((x) => x !== currentTitle);
+            let onClick;
+            if (otherTitles.length > 0) {
+                onClick = this.onClick.bind(this, otherTitles, i);
+            }
+
+            if (current) {
+                content[i] = (
+                    renderer as unknown as PerspectiveTabBarRenderer
+                ).renderTab(
+                    {
+                        title,
+                        zIndex: titles.length + 1,
+                        current,
+                    } as TabBar.IRenderData<any>,
+                    onClick,
+                );
+            } else {
+                content[i] = (
+                    renderer as unknown as PerspectiveTabBarRenderer
+                ).renderInert();
+            }
+        }
+
+        VirtualDOM.render(content, this.contentNode);
+        this._check_shade();
+    }
+
+    onClick(otherTitles: Title<any>[], index: number, event: MouseEvent) {
+        const commands = new CommandRegistry();
+        this._menu = new WorkspaceMenu(
+            this._workspace.menu_elem.shadowRoot!,
+            this._workspace.element,
+            {
+                commands,
+            },
+        );
+
+        this._menu.addClass("perspective-workspace-menu");
+        this._menu.dataset.minwidth = this.__titles[index];
+        for (const title of otherTitles) {
+            this._menu.addItem({
+                command: "tabbar:switch",
+                args: { title } as unknown as ReadonlyJSONObject,
+            });
+        }
+
+        commands.addCommand("tabbar:switch", {
+            execute: async ({ title }) => {
+                const psp_title = title as any as Title<any>;
+                const index = this.__titles.findIndex((t) => t === title);
+                this.currentTitle = psp_title;
+                (
+                    this.tabActivateRequested as unknown as Signal<
+                        TabBar<any>,
+                        TabBar.ITabActivateRequestedArgs<any>
+                    >
+                ).emit({
+                    index,
+                    title: psp_title,
+                });
+            },
+            label: ({ title }) => {
+                const psp_title = title as any as Title<any>;
+                return psp_title.label || "untitled";
+            },
+            mnemonic: 0,
+        });
+
+        const box = (event.target as HTMLElement).getBoundingClientRect();
+        const outer_box = this._workspace.element.getBoundingClientRect();
+        this._menu.open(box.x - outer_box.x, box.y + box.height - outer_box.y);
+        this._menu.aboutToClose.connect(() => {
+            this._menu = undefined;
+        });
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _check_shade() {
+        if (
+            Array.from(this.contentNode.children).filter(
+                (x) =>
+                    x.classList.contains("settings_open") &&
+                    x.classList.contains("lm-mod-current"),
+            ).length > 0
+        ) {
+            this.contentNode.classList.add("inactive-blur");
+        } else {
+            this.contentNode.classList.remove("inactive-blur");
+        }
+    }
+
+    handleEvent(event: MouseEvent) {
+        this._menu?.close();
+        this.retargetEvent(event);
+        switch (event.type) {
+            case "contextmenu":
+                const widget = this.currentTitle?.owner;
+                let parent = widget.parent;
+
+                // TODO There is probably a better way to find the workspace
+                // relative to a widget command
+                while (parent && !(parent instanceof PerspectiveWorkspace)) {
+                    parent = parent.parent;
+                }
+
+                (parent as unknown as PerspectiveWorkspace).showContextMenu(
+                    widget,
+                    event,
+                );
+
+                if (!event.shiftKey) {
+                    event.preventDefault();
+                }
+
+                break;
+            case "mousedown":
+                if ((event.target as HTMLElement).id === TabBarItems.Label) {
+                    return;
+                }
+                break;
+            case "pointerdown":
+                if ((event.target as HTMLElement).id === TabBarItems.Label) {
+                    const tabs = this.contentNode.children;
+
+                    // Find the index of the released tab.
+                    const index = ArrayExt.findFirstIndex(tabs, (tab) => {
+                        return ElementExt.hitTest(
+                            tab,
+                            event.clientX,
+                            event.clientY,
+                        );
+                    });
+
+                    if (index < 0) {
+                        break;
+                    }
+
+                    const title = this.titles[index];
+                    this._workspace._maximize(title.owner);
+                    requestAnimationFrame(() =>
+                        title.owner.viewer.toggleConfig(),
+                    );
+
+                    return;
+                }
+                break;
+        }
+        super.handleEvent(event);
+    }
+
+    /**
+     * Shadow dom targets events at the host, not the clicked element, which
+     * Lumino dislikes.  This makes the event look like it is not crossing
+     * the ShadowDom boundary.
+     *
+     */
+    retargetEvent(event: MouseEvent) {
+        Object.defineProperty(event, "target", {
+            value: event.composedPath()[0],
+            enumerable: true,
+        });
+        return event;
+    }
+
+    _addEventListeners() {
+        this.node.addEventListener("dblclick", this);
+        this.node.addEventListener("contextmenu", this);
+    }
+}

package/src/ts/workspace/tabbarrenderer.ts

@@ -0,0 +1,91 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { h } from "@lumino/virtualdom";
+import { TabBar } from "@lumino/widgets";
+
+export const TabBarItems = {
+    Config: "config",
+    Label: "label",
+};
+
+export const DEFAULT_TITLE = "untitled";
+
+export class PerspectiveTabBarRenderer extends TabBar.Renderer {
+    maximized: boolean;
+
+    constructor(maximized: boolean) {
+        super();
+        this.maximized = maximized;
+    }
+
+    renderLabel(data: { title: { label?: string } }) {
+        return h.span(
+            {
+                className: "lm-TabBar-tabLabel",
+                id: TabBarItems.Label,
+            },
+            data.title.label || DEFAULT_TITLE,
+        );
+    }
+
+    renderInert() {
+        return h.div();
+    }
+
+    renderTab(
+        data: TabBar.IRenderData<any>,
+        onclick?: (this: HTMLElement, event: MouseEvent) => any,
+    ) {
+        const title = data.title.caption;
+        const key = this.createTabKey(data);
+        const style = this.createTabStyle(data);
+        let className = this.createTabClass(data);
+        const dataset = this.createTabDataset(data);
+        const more: h.Child[] = [];
+        if (onclick) {
+            more.push(
+                h.div(
+                    { onclick, className: "bookmarks-button" },
+                    h.div({ className: "bookmarks" }),
+                ),
+            );
+        }
+
+        return h.li(
+            { key, className, title, style, dataset },
+            this.renderDragHandle(),
+            ...more,
+            this.renderLabel(data),
+            this.renderCloseIcon(),
+        );
+    }
+
+    renderDragHandle() {
+        return h.div({
+            className: "drag-handle",
+        });
+    }
+
+    // renderConfigIcon() {
+    //     return h.div({
+    //         className: "lm-TabBar-tabConfigIcon",
+    //         id: TabBarItems.Config,
+    //     });
+    // }
+
+    renderCloseIcon() {
+        return h.div({
+            className: "lm-TabBar-tabCloseIcon" + " p-TabBar-tabCloseIcon",
+        });
+    }
+}

package/src/ts/workspace/widget.ts

@@ -0,0 +1,101 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { Widget } from "@lumino/widgets";
+import { Message } from "@lumino/messaging";
+
+import type * as psp_viewer from "@perspective-dev/viewer";
+import type * as psp from "@perspective-dev/client";
+
+interface IPerspectiveViewerWidgetOptions {
+    node: HTMLElement;
+    viewer: psp_viewer.HTMLPerspectiveViewerElement;
+}
+
+export class PerspectiveViewerWidget extends Widget {
+    viewer: psp_viewer.HTMLPerspectiveViewerElement;
+    _title: string;
+    _is_table_loaded: boolean;
+    _is_pivoted: boolean;
+    _restore_config?: () => Promise<void>;
+    task?: Promise<void>;
+
+    constructor({ viewer, node }: IPerspectiveViewerWidgetOptions) {
+        super({ node });
+        this.viewer = viewer;
+        this._title = "";
+        this._is_table_loaded = false;
+        this._is_pivoted = false;
+    }
+
+    get name(): string {
+        return this._title;
+    }
+
+    toggleConfig(): Promise<void> {
+        return this.viewer.toggleConfig();
+    }
+
+    async load(table: psp.Table | Promise<psp.Table>) {
+        this._is_table_loaded = true;
+        let promises = [this.viewer.load(table)];
+        if (this._restore_config) {
+            promises.push(this._restore_config());
+        }
+
+        await Promise.all(promises);
+    }
+
+    restore(
+        config: psp_viewer.ViewerConfigUpdate & {
+            table: string;
+        },
+    ) {
+        const { table, ...viewerConfig } = config;
+        this._title = config.title as string;
+        this.title.label = config.title as string;
+        if (table) {
+            this.viewer.setAttribute("table", table);
+        }
+
+        const restore_config = () => this.viewer.restore({ ...viewerConfig });
+        if (this._is_table_loaded) {
+            return restore_config();
+        } else {
+            this._restore_config = restore_config;
+        }
+    }
+
+    async save() {
+        let config = {
+            ...(await this.viewer.save()),
+            table: this.viewer.getAttribute("table"),
+        };
+
+        delete config["settings"];
+        return config;
+    }
+
+    removeClass(name: string) {
+        super.removeClass(name);
+        this.viewer && this.viewer.classList.remove(name);
+    }
+
+    async onCloseRequest(msg: Message) {
+        super.onCloseRequest(msg);
+        if (this.viewer.parentElement) {
+            this.viewer.parentElement.removeChild(this.viewer);
+        }
+
+        await this.viewer.delete();
+    }
+}