@datagrok-libraries/dock-spawn-dg 0.0.1

package/src/TabHost.ts

@@ -0,0 +1,267 @@
+import { TabPage } from "./TabPage.js";
+import { Utils } from "./Utils.js";
+import { TabHostDirection } from "./enums/TabHostDirection.js";
+import { TabHandle } from "./TabHandle.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { DockManager } from "./DockManager.js";
+import { PanelContainer } from "./PanelContainer.js";
+import { EventHandler } from './EventHandler.js';
+
+/**
+ * Tab Host control contains tabs known as TabPages.
+ * The tab strip can be aligned in different orientations
+ */
+export class TabHost {
+    displayCloseButton: boolean;
+    dockManager: DockManager;
+    tabStripDirection: TabHostDirection;
+    hostElement: HTMLDivElement;
+    tabListElement: HTMLDivElement;
+    separatorElement: HTMLDivElement;
+    contentElement: HTMLDivElement;
+    createTabPage: (tabHost: TabHost, container: IDockContainer) => any;
+    tabHandleListener: { onMoveTab: (e: any) => void; };
+    eventListeners: any[];
+    pages: TabPage[];
+    activeTab: TabPage;
+    _resizeRequested: boolean;
+    mouseDownHandler: EventHandler;
+    focusHandler: EventHandler;
+
+    constructor(dockManager: DockManager, tabStripDirection: TabHostDirection, displayCloseButton?: boolean) {
+        /**
+         * Create a tab host with the tab strip aligned in the [tabStripDirection] direciton
+         * Only TabHost.DIRECTION_BOTTOM and TabHost.DIRECTION_TOP are supported
+         */
+        if (tabStripDirection === undefined) {
+            tabStripDirection = TabHostDirection.BOTTOM;
+        }
+
+        if (displayCloseButton === undefined) {
+            displayCloseButton = false;
+        }
+
+        this.dockManager = dockManager;
+        this.tabStripDirection = tabStripDirection;
+        this.displayCloseButton = displayCloseButton; // Indicates if the close button next to the tab handle should be displayed
+        this.pages = [];
+        this.eventListeners = [];
+        this.tabHandleListener = {
+            onMoveTab: (e) => { this.onMoveTab(e); }
+        };
+        this.hostElement = document.createElement('div');       // The main tab host DOM element
+        this.tabListElement = document.createElement('div');    // Hosts the tab handles
+        this.separatorElement = document.createElement('div');  // A seperator line between the tabs and content
+        this.contentElement = document.createElement('div');    // Hosts the active tab content
+        this.contentElement.tabIndex = 0;
+        this.createTabPage = this._createDefaultTabPage;        // Factory for creating tab pages
+
+        if (this.tabStripDirection === TabHostDirection.BOTTOM) {
+            this.hostElement.appendChild(this.contentElement);
+            this.hostElement.appendChild(this.separatorElement);
+            this.hostElement.appendChild(this.tabListElement);
+        } else if (this.tabStripDirection === TabHostDirection.TOP) {
+            this.hostElement.appendChild(this.tabListElement);
+            this.hostElement.appendChild(this.separatorElement);
+            this.hostElement.appendChild(this.contentElement);
+        } else {
+            throw new Error('Only top and bottom tab strip orientations are supported');
+        }
+
+        this.hostElement.classList.add('dockspan-tab-host');
+        this.tabListElement.classList.add('dockspan-tab-handle-list-container');
+        this.separatorElement.classList.add('dockspan-tab-handle-content-seperator');
+        this.contentElement.classList.add('dockspan-tab-content');
+        this.contentElement.tabIndex = 0;
+        this.focusHandler = new EventHandler(this.contentElement, 'focus', this.onFocus.bind(this), true);
+        this.mouseDownHandler = new EventHandler(this.contentElement, 'mousedown', this.onMousedown.bind(this), true);
+    }
+
+    onFocus() {
+        if (this.activeTab && this.dockManager.activePanel != this.activeTab.panel)
+            this.dockManager.activePanel = this.activeTab.panel;
+    }
+
+    setActive(isActive: boolean) {
+        if (isActive) {
+            this.separatorElement.classList.add('dockspan-tab-handle-content-seperator-active');
+        } else {
+            this.separatorElement.classList.remove('dockspan-tab-handle-content-seperator-active');
+        }
+        if (this.activeTab) {
+            this.activeTab.handle.setActive(isActive);
+        }
+    }
+
+    onMousedown() {
+        if (this.activeTab && this.dockManager.activePanel != this.activeTab.panel)
+            this.dockManager.activePanel = this.activeTab.panel;
+    }
+
+    onMoveTab(e) {
+        let index = Array.prototype.slice.call(this.tabListElement.childNodes).indexOf(e.self.elementBase);
+        this.change(this, /*handle*/e.self, e.state, index);
+    }
+
+    performTabsLayout(indexes: number[]) {
+        this.pages = Utils.orderByIndexes(this.pages, indexes);
+
+        let items = this.tabListElement.childNodes;
+        let itemsArr = [];
+        for (let i in items) {
+            if (items[i].nodeType === 1) { // get rid of the whitespace text nodes
+                itemsArr.push(items[i]);
+            }
+        }
+        itemsArr = Utils.orderByIndexes(itemsArr, indexes);
+        for (let i = 0; i < itemsArr.length; ++i) {
+            this.tabListElement.appendChild(itemsArr[i]);
+        }
+
+        if (this.activeTab)
+            this.onTabPageSelected(this.activeTab, false);
+    }
+
+    getActiveTab() {
+        return this.activeTab;
+    }
+
+    addListener(listener) {
+        this.eventListeners.push(listener);
+    }
+
+    removeListener(listener) {
+        this.eventListeners.splice(this.eventListeners.indexOf(listener), 1);
+    }
+
+    change(host: TabHost, handle: TabHandle, state, index) {
+        this.eventListeners.forEach((listener) => {
+            if (listener.onChange) {
+                listener.onChange({ host: host, handle: handle, state: state, index: index });
+            }
+        });
+    }
+
+    _createDefaultTabPage(tabHost: TabHost, container: IDockContainer) {
+        return new TabPage(tabHost, container);
+    }
+
+    setActiveTab(container: IDockContainer) {
+        let currentPage;
+        this.pages.forEach((itm) => {
+            if (itm.container === container) {
+                currentPage = itm;
+            }
+        });
+        if (this.pages.length > 0 && currentPage) {
+            this.onTabPageSelected(currentPage, true);
+            this.dockManager.activePanel = container as PanelContainer;
+        }
+    }
+
+    resize(width: number, height: number) {
+        this.hostElement.style.width = width + 'px';
+        this.hostElement.style.height = height + 'px';
+
+        let tabHeight = this.tabListElement.clientHeight;
+        if (!this._resizeRequested)
+            requestAnimationFrame(() => this.resizeTabListElement(width, height));
+        this._resizeRequested = true;
+        let separatorHeight = this.separatorElement.clientHeight;
+        let contentHeight = height - tabHeight - separatorHeight;
+        this.contentElement.style.height = contentHeight + 'px';
+
+        if (this.activeTab)
+            this.activeTab.resize(width, contentHeight);
+    }
+
+    resizeTabListElement(width: number, height?: number) {
+        this._resizeRequested = false;
+        if (this.pages.length === 0) return;
+        let tabListWidth = 0;
+        this.pages.forEach((page) => {
+            let handle = page.handle;
+            if (handle.elementBase != null){
+                handle.elementBase.style.width = ''; //clear
+                tabListWidth += handle.elementBase.clientWidth;
+            }
+        });
+        let scaleMultiplier = width / tabListWidth;
+        if (scaleMultiplier > 1.2) return; //with a reserve
+        this.pages.forEach((page, index) => {
+            let handle = page.handle;
+            let newSize = scaleMultiplier * handle.elementBase.clientWidth;
+            if (index === this.pages.length - 1)
+                newSize = newSize - 5;
+            handle.elementBase.style.width = newSize + 'px';
+        });
+    }
+
+    performLayout(children: IDockContainer[]) {
+        // Destroy all existing tab pages not in children
+        this.pages.forEach((tab) => {
+            if (!children.some((x) => x == tab.container)) {
+                tab.handle.removeListener(this.tabHandleListener);
+                tab.destroy();
+                let index = this.pages.indexOf(tab);
+                if (index > -1) {
+                    this.pages.splice(index, 1);
+                }
+            }
+        });
+
+        let oldActiveTab = this.activeTab;
+        delete this.activeTab;
+
+        let childPanels = children.filter((child) => {
+            return child.containerType === 'panel';
+        });
+
+        if (childPanels.length > 0) {
+            // Rebuild new tab pages
+            childPanels.forEach((child) => {
+                let page = null;
+                if (!this.pages.some((x) => {
+                    if (x.container == child) {
+                        page = x;
+                        return true;
+                    }
+                    return false;
+                })) {
+                    page = this.createTabPage(this, child);
+                    page.handle.addListener(this.tabHandleListener);
+                    this.pages.push(page);
+                }
+
+                // Restore the active selected tab
+                if (oldActiveTab && page.container === oldActiveTab.container)
+                    this.activeTab = page;
+            });
+            this._setTabHandlesVisible(true);
+        }
+        else
+            // Do not show an empty tab handle host with zero tabs
+            this._setTabHandlesVisible(false);
+
+        if (this.activeTab)
+            this.onTabPageSelected(this.activeTab, false);
+    }
+
+    _setTabHandlesVisible(visible: boolean) {
+        if (visible) {
+            this.tabListElement.classList.add('dockspan-tab-handle-list-container-visible');
+            this.separatorElement.classList.add('dockspan-tab-handle-content-seperator-visible');
+        } else {
+            this.tabListElement.classList.remove('dockspan-tab-handle-list-container-visible');
+            this.separatorElement.classList.remove('dockspan-tab-handle-content-seperator-visible');
+        }
+    }
+
+    onTabPageSelected(page: TabPage, active: boolean) {
+        this.activeTab = page;
+        this.pages.forEach((tabPage) => {
+            let selected = (tabPage === page);
+            tabPage.setSelected(selected, active);
+        });
+    }
+}

package/src/TabPage.ts

@@ -0,0 +1,98 @@
+import { TabHandle } from "./TabHandle.js";
+import { PanelContainer } from "./PanelContainer.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { TabHost } from "./TabHost.js";
+import { Utils } from "./Utils.js";
+
+export class TabPage {
+    selected: boolean;
+    host: TabHost;
+    container: IDockContainer;
+    panel?: PanelContainer;
+    handle: TabHandle;
+    containerElement: HTMLElement;
+    _initContent: boolean;
+
+    constructor(host: TabHost, container: IDockContainer) {
+        if (arguments.length === 0) {
+            return;
+        }
+
+        this.selected = false;
+        this.host = host;
+        this.container = container;
+
+        this.handle = new TabHandle(this);
+        this.containerElement = container.containerElement;
+
+        if (container instanceof PanelContainer) {
+            this.panel = container;
+            this.panel.onTitleChanged = this.onTitleChanged.bind(this);
+            this.onTitleChanged();
+        }
+
+        container.tabPage = this;
+    }
+
+    onTitleChanged() {
+        this.handle.updateTitle();
+        if (this.panel) {
+            if (this.panel.hasChanges) {
+                this.handle.elementText.classList.add('panel-has-changes')
+            } else {
+                this.handle.elementText.classList.remove('panel-has-changes')
+            }
+        }
+    }
+
+    destroy() {
+        this.handle.destroy();
+
+        if (this.container instanceof PanelContainer) {
+            let panel = this.container;
+            delete panel.onTitleChanged;
+        }
+
+        if (this.host.dockManager.activePanel == this.panel)
+            this.host.dockManager.activePanel = null;
+
+        this.container.tabPage = null;
+
+        Utils.removeNode(this.containerElement);
+    }
+
+    onSelected() {
+        this.host.onTabPageSelected(this, true);
+        if (this.container instanceof PanelContainer) {
+            let panel = this.container;
+            panel.dockManager.notifyOnTabChange(this);
+        }
+    }
+
+    setSelected(flag: boolean, isActive: boolean) {
+        this.selected = flag;
+        this.handle.setSelected(flag);
+
+        if (!this._initContent)
+            this.host.contentElement.appendChild(this.containerElement);
+        this._initContent = true;
+        if (this.selected) {
+            this.containerElement.style.display = 'block';
+            this.panel.setVisible(true);
+            // force a resize again
+            let width = this.host.contentElement.clientWidth;
+            let height = this.host.contentElement.clientHeight;
+            this.container.resize(width, height);
+            if (isActive)
+                this.host.dockManager.activePanel = this.container as PanelContainer;
+        }
+        else {
+            this.containerElement.style.display = 'none';
+            this.panel.setVisible(false);
+        }
+    }
+
+    resize(width: number, height: number) {
+        this.container.resize(width, height);
+    }
+}

package/src/UndockInitiator.ts

@@ -0,0 +1,181 @@
+import { EventHandler } from "./EventHandler.js";
+import { Point } from "./Point.js";
+import { Dialog } from "./Dialog.js";
+import { IMouseOrTouchEvent } from "./interfaces/IMouseOrTouchEvent.js";
+
+/**
+ * Listens for events on the [element] and notifies the [listener]
+ * if an undock event has been invoked.  An undock event is invoked
+ * when the user clicks on the event and drags is beyond the
+ * specified [thresholdPixels]
+ */
+export class UndockInitiator {
+    mouseUpHandler: EventHandler;
+    touchUpHandler: EventHandler;
+    mouseMoveHandler: EventHandler;
+    touchMoveHandler: EventHandler;
+    dragStartPosition: Point;
+    thresholdPixels: number;
+    _enabled: boolean;
+    mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
+    element: HTMLElement;
+    _undockededCallback: (e: MouseEvent, dragOffset: Point) => Dialog;
+    touchDownUndockedHandler: EventHandler;
+
+    constructor(element: Element, undockededCallback: (e: MouseEvent, dragOffset: Point) => Dialog, thresholdPixels?: number) {
+        if (!thresholdPixels) {
+            thresholdPixels = 7;
+        }
+
+        this.element = element as HTMLElement;
+        this._undockededCallback = undockededCallback;
+        this.thresholdPixels = thresholdPixels;
+        this._enabled = false;
+    }
+
+    get enabled(): boolean {
+        return this._enabled;
+    }
+    set enabled(value: boolean) {
+        this._enabled = value;
+        if (this._enabled) {
+            if (this.mouseDownHandler) {
+                this.mouseDownHandler.cancel();
+                delete this.mouseDownHandler;
+            }
+            if (this.touchDownHandler) {
+                this.touchDownHandler.cancel();
+                delete this.touchDownHandler;
+            }
+
+            this.mouseDownHandler = new EventHandler(this.element, 'mousedown', this.onMouseDown.bind(this));
+            this.touchDownHandler = new EventHandler(this.element, 'touchstart', this.onMouseDown.bind(this), { passive: false });
+        }
+        else {
+            if (this.mouseDownHandler) {
+                this.mouseDownHandler.cancel();
+                delete this.mouseDownHandler;
+            }
+
+            if (this.touchDownHandler) {
+                this.touchDownHandler.cancel();
+                delete this.touchDownHandler;
+            }
+
+            if (this.mouseUpHandler) {
+                this.mouseUpHandler.cancel();
+                delete this.mouseUpHandler;
+            }
+
+            if (this.touchUpHandler) {
+                this.touchUpHandler.cancel();
+                delete this.touchUpHandler;
+            }
+
+            if (this.mouseMoveHandler) {
+                this.mouseMoveHandler.cancel();
+                delete this.mouseMoveHandler;
+            }
+
+            if (this.touchMoveHandler) {
+                this.touchMoveHandler.cancel();
+                delete this.touchMoveHandler;
+            }
+        }
+    }
+
+    onMouseDown(e) {
+        e.preventDefault();
+
+        // Make sure we dont do this on floating dialogs
+        if (this.enabled) {
+            if (e.touches) {
+                if (e.touches.length > 1)
+                    return;
+                e = e.touches[0];
+            }
+
+            if (this.mouseUpHandler) {
+                this.mouseUpHandler.cancel();
+                delete this.mouseUpHandler;
+            }
+
+            if (this.touchUpHandler) {
+                this.touchUpHandler.cancel();
+                delete this.touchUpHandler;
+            }
+
+            if (this.mouseMoveHandler) {
+                this.mouseMoveHandler.cancel();
+                delete this.mouseMoveHandler;
+            }
+
+            if (this.touchMoveHandler) {
+                this.touchMoveHandler.cancel();
+                delete this.touchMoveHandler;
+            }
+
+            this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
+            this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
+            this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
+            this.touchMoveHandler = new EventHandler(window, 'touchmove', this.onMouseMove.bind(this));
+            this.dragStartPosition = new Point(e.clientX, e.clientY);
+        }
+    }
+
+    onMouseUp() {
+        if (this.mouseUpHandler) {
+            this.mouseUpHandler.cancel();
+            delete this.mouseUpHandler;
+        }
+
+        if (this.touchUpHandler) {
+            this.touchUpHandler.cancel();
+            delete this.touchUpHandler;
+        }
+
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
+        }
+
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
+            delete this.touchMoveHandler;
+        }
+    }
+
+    onMouseMove(e: IMouseOrTouchEvent) {
+        if (e.touches) {
+            if (e.touches.length > 1)
+                return;
+            e = e.touches[0];
+        }
+
+        let position = new Point(e.clientX, e.clientY);
+        let dy = position.y - this.dragStartPosition.y;
+        
+        if (dy > this.thresholdPixels || dy < -this.thresholdPixels) {
+            this.enabled = false;
+            this._requestUndock(e);
+        }
+    }
+
+    _requestUndock(e) {
+        let top = 0;
+        let left = 0;
+        let currentElement = this.element;
+        
+        do {
+            top += currentElement.offsetTop || 0;
+            left += currentElement.offsetLeft || 0;
+            currentElement = currentElement.offsetParent as HTMLElement;
+        } while (currentElement);
+
+        let dragOffsetX = this.dragStartPosition.x - left;
+        let dragOffsetY = this.dragStartPosition.y - top;
+        let dragOffset = new Point(dragOffsetX, dragOffsetY);
+        this._undockededCallback(e, dragOffset);
+    }
+}

package/src/Utils.ts

@@ -0,0 +1,85 @@
+import { DockNode } from "./DockNode";
+
+export class Utils {
+
+    private static _counter: number = 0;
+
+    static getPixels(pixels: string): number {
+        if (pixels === null) {
+            return 0;
+        }
+
+        return parseInt(pixels.replace('px', ''));
+    }
+
+    static disableGlobalTextSelection(element: HTMLElement) {
+        element.classList.add('disable-selection');
+    }
+
+    static enableGlobalTextSelection(element: HTMLElement) {
+        element.classList.remove('disable-selection');
+    }
+
+    static isPointInsideNode(px: number, py: number, node: DockNode): boolean {
+        let element = node.container.containerElement;
+        let rect = element.getBoundingClientRect();
+
+        return (
+            px >= rect.left &&
+            px <= rect.left + rect.width &&
+            py >= rect.top &&
+            py <= rect.top + rect.height
+        );
+    }
+
+    static getNextId(prefix: string): string {
+        return prefix + Utils._counter++;
+    }
+
+    static removeNode(node: Node): boolean {
+        if (node.parentNode === null) {
+            return false;
+        }
+
+        node.parentNode.removeChild(node);
+
+        return true;
+    }
+
+    static orderByIndexes<T>(array: T[], indexes: number[]) {
+        let sortedArray = [];
+        for (let i = 0; i < indexes.length; i++) {
+            sortedArray.push(array[indexes[i]]);
+        }
+        return sortedArray;
+    }
+
+    static arrayRemove<T>(array: T[], value: any): T[] | false {
+        let idx = array.indexOf(value);
+        if (idx !== -1) {
+            return array.splice(idx, 1);
+        }
+        return false;
+    }
+
+    static arrayContains<T>(array: T[], value: T): boolean {
+        let i = array.length;
+        while (i--) {
+            if (array[i] === value) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    static arrayEqual<T>(a: T[], b: T[]): boolean {
+        if (a === b) return true;
+        if (a == null || b == null) return false;
+        if (a.length != b.length) return false;
+
+        for (let i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false;
+        }
+        return true;
+    }
+}

package/src/VerticalDockContainer.ts

@@ -0,0 +1,13 @@
+import { SplitterDockContainer } from "./SplitterDockContainer.js";
+import { Utils } from "./Utils.js";
+import { ContainerType } from "./ContainerType.js";
+import { DockManager } from "./DockManager.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+
+export class VerticalDockContainer extends SplitterDockContainer {
+    
+    constructor(dockManager: DockManager, childContainers: IDockContainer[]) {
+        super(Utils.getNextId('vertical_splitter_'), dockManager, childContainers, true)
+        this.containerType = ContainerType.vertical;
+    }
+}

package/src/enums/PanelType.ts

@@ -0,0 +1,4 @@
+export enum PanelType {
+    'document' = 'document',
+    'panel' = 'panel'
+}

package/src/enums/TabHostDirection.ts

@@ -0,0 +1,6 @@
+export enum TabHostDirection {
+    TOP = 0,
+    BOTTOM = 1,
+    LEFT = 2,
+    RIGHT = 3,
+}

package/src/enums/WheelTypes.ts

@@ -0,0 +1,14 @@
+
+export enum WheelTypes {
+    // Main dock wheel buttons
+    'left' = 'left',
+    'right' = 'right',
+    'top' = 'top',
+    'down' = 'down',
+    'fill' = 'fill',
+    // Buttons on the extreme 4 sides
+    'left-s' = 'left-s',
+    'right-s' = 'right-s',
+    'top-s' = 'top-s',
+    'down-s' = 'down-s'
+}

package/src/i18n/Defaults.ts

@@ -0,0 +1,20 @@
+export type TranslationKey = keyof typeof Defaults;
+
+export type GetLocalizerParameters<K extends TranslationKey> = K extends keyof LocalizerParameters 
+    ? LocalizerParameters[K] 
+    : [];
+
+export const Defaults = {
+    'CloseDialog': 'Close dialog',
+    'CloseAll': 'Close all documents',
+    'CloseAllButThis': 'Close all documents but this',
+    'DefaultPanelName': 'Panel',
+    'NewBrowserWindow': 'Open in new window'
+    //Example of parameterized translation
+    // 'CloseWithName': 'Close tab {0}'
+};
+
+export interface LocalizerParameters {
+    // Example
+    // 'CloseWithName': [tabName: string]
+}