@datagrok-libraries/dock-spawn-dg 0.0.1

package/src/SplitterPanel.ts

@@ -0,0 +1,228 @@
+import { SplitterBar } from "./SplitterBar.js";
+import { Utils } from "./Utils.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+
+/**
+ * A splitter panel manages the child containers inside it with splitter bars.
+ * It can be stacked horizontally or vertically
+ */
+export class SplitterPanel {
+    panelElement: HTMLDivElement;
+    spiltterBars: SplitterBar[];
+    stackedVertical: boolean;
+    childContainers: IDockContainer[];
+
+    constructor(childContainers: IDockContainer[], stackedVertical: boolean) {
+        this.childContainers = childContainers;
+        this.stackedVertical = stackedVertical;
+        this.panelElement = document.createElement('div');
+        this.spiltterBars = [];
+        this._buildSplitterDOMAndAddElements();
+    }
+
+    _buildSplitterDOMAndAddElements() {
+        if (this.childContainers.length <= 1)
+            throw new Error('Splitter panel should contain atleast 2 panels');
+
+        this.spiltterBars = [];
+        let afterElement: HTMLElement = null;
+        for (let i = 0; i < this.childContainers.length - 1; i++) {
+            let previousContainer = this.childContainers[i];
+            let nextContainer = this.childContainers[i + 1];
+            let splitterBar = new SplitterBar(previousContainer, nextContainer, this.stackedVertical);
+            this.spiltterBars.push(splitterBar);
+
+            // Add the container and split bar to the panel's base div element
+            if (!Array.from(this.panelElement.children).includes(previousContainer.containerElement))
+                this._insertContainerIntoPanel(previousContainer, afterElement);
+            this.panelElement.insertBefore(splitterBar.barElement, previousContainer.containerElement.nextSibling);
+            afterElement = splitterBar.barElement;
+        }
+        let last = this.childContainers.slice(-1)[0];
+        if (!Array.from(this.panelElement.children).includes(last.containerElement))
+            this._insertContainerIntoPanel(last, afterElement);
+    }
+
+    performLayout(children: IDockContainer[], relayoutEvenIfEqual: boolean) {
+        let containersEqual = Utils.arrayEqual(this.childContainers, children);
+        if (!containersEqual || relayoutEvenIfEqual) {
+            this.childContainers.forEach((container) => {
+                if (!children.some((item) => item == container)) {
+                    if (container.containerElement) {
+                        container.containerElement.classList.remove('splitter-container-vertical');
+                        container.containerElement.classList.remove('splitter-container-horizontal');
+                        Utils.removeNode(container.containerElement);
+
+                    }
+                }
+            });
+            this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
+
+            // rebuild
+            this.childContainers = children;
+            this._buildSplitterDOMAndAddElements();
+        }
+    }
+
+    removeFromDOM() {
+        this.childContainers.forEach((container) => {
+            if (container.containerElement) {
+                container.containerElement.classList.remove('splitter-container-vertical');
+                container.containerElement.classList.remove('splitter-container-horizontal');
+                Utils.removeNode(container.containerElement);
+            }
+        });
+        this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
+    }
+
+    destroy() {
+        this.removeFromDOM();
+        this.panelElement.parentNode.removeChild(this.panelElement);
+    }
+
+    _insertContainerIntoPanel(container: IDockContainer, afterElement: HTMLElement) {
+        if (!container) {
+            console.error('container is undefined');
+            return;
+        }
+
+        if (container.containerElement.parentNode != this.panelElement) {
+            Utils.removeNode(container.containerElement);
+            if (afterElement)
+                this.panelElement.insertBefore(container.containerElement, afterElement.nextSibling);
+            else {
+                if (this.panelElement.children.length > 0)
+                    this.panelElement.insertBefore(container.containerElement, this.panelElement.children[0]);
+                else
+                    this.panelElement.appendChild(container.containerElement);
+            }
+        }
+        container.containerElement.classList.add(
+            this.stackedVertical ? 'splitter-container-vertical' : 'splitter-container-horizontal'
+        );
+    }
+
+    /**
+     * Sets the percentage of space the specified [container] takes in the split panel
+     * The percentage is specified in [ratio] and is between 0..1
+     */
+    setContainerRatio(container: IDockContainer, ratio: number) {
+        let splitPanelSize = this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth;
+        let newContainerSize = splitPanelSize * ratio;
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
+        let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
+
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size;
+            if (child !== container) {
+                size = this.stackedVertical ? child.containerElement.parentElement.clientHeight : child.containerElement.parentElement.clientWidth;
+                size *= otherPanelScaleMultipler;
+            }
+            else
+                size = newContainerSize;
+
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
+
+    getRatios(): number[] {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        let result: number[] = [];
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            result.push(sizeOld / splitPanelSize);
+        }
+        return result;
+    }
+
+    setRatios(ratios: number[]) {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size = splitPanelSize * ratios[i];
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
+
+    resize(width: number, height: number) {
+        if (this.childContainers.length <= 1)
+            return;
+
+        this.panelElement.style.width = width + 'px';
+        this.panelElement.style.height = height + 'px';
+
+        let i;
+
+        // Adjust the fixed dimension that is common to all (i.e. width, if stacked vertical; height, if stacked horizontally)
+        for (i = 0; i < this.childContainers.length; i++) {
+            let childContainer = this.childContainers[i];
+            if (this.stackedVertical)
+                childContainer.resize(width, !childContainer.height ? height : childContainer.height);
+            else
+                childContainer.resize(!childContainer.width ? width : childContainer.width, height);
+
+            if (i < this.spiltterBars.length) {
+                let splitBar = this.spiltterBars[i];
+                if (this.stackedVertical)
+                    splitBar.barElement.style.width = width + 'px';
+                else
+                    splitBar.barElement.style.height = height + 'px';
+            }
+        }
+
+        // Adjust the varying dimension
+        let totalChildPanelSize = 0;
+        // Find out how much space existing child containers take up (excluding the splitter bars)
+        this.childContainers.forEach((container) => {
+            let size = this.stackedVertical ?
+                container.height :
+                container.width;
+            totalChildPanelSize += size;
+        });
+
+        const barRect = this.spiltterBars[0].barElement.getBoundingClientRect();
+        // Get the thickness of the bar
+        let barSize = this.stackedVertical ? barRect.height : barRect.width;
+
+        // Find out how much space existing child containers will take after being resized (excluding the splitter bars)
+        let targetTotalChildPanelSize = this.stackedVertical ? height : width;
+        targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
+
+        // Get the scale multiplier
+        totalChildPanelSize = Math.max(totalChildPanelSize, 1);
+        let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
+
+
+        // Update the size with this multiplier
+        let updatedTotalChildPanelSize = 0;
+        for (i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            if (child.containerElement.style.display == 'none')
+                child.containerElement.style.display = 'block';
+            let original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            let newSize = scaleMultiplier > 1 ? Math.floor(original * scaleMultiplier) : Math.ceil(original * scaleMultiplier);
+            updatedTotalChildPanelSize += newSize;
+
+            // If this is the last node, add any extra pixels to fix the rounding off errors and match the requested size
+            if (i === this.childContainers.length - 1)
+                newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
+
+            // Set the size of the panel
+            if (this.stackedVertical)
+                child.resize(child.width, newSize);
+            else
+                child.resize(newSize, child.height);
+        }
+    }
+}

package/src/TabHandle.ts

@@ -0,0 +1,347 @@
+import {TabPage} from './TabPage.js';
+import {PanelContainer} from './PanelContainer.js';
+import {UndockInitiator} from './UndockInitiator.js';
+import {EventHandler} from './EventHandler.js';
+import {Utils} from './Utils.js';
+import {PanelType} from './enums/PanelType.js';
+import {DockNode} from './DockNode.js';
+import {Localizer} from './i18n/Localizer.js';
+
+/**
+ * A tab handle represents the tab button on the tab strip
+ */
+export class TabHandle {
+  parent: TabPage;
+  elementBase: HTMLDivElement;
+  elementText: HTMLDivElement;
+  elementCloseButton: HTMLDivElement;
+  undockInitiator: UndockInitiator;
+  mouseDownHandler: EventHandler;
+  touchDownHandler: EventHandler;
+  closeButtonHandler: EventHandler;
+  closeButtonTouchHandler: EventHandler;
+  auxClickHandler: EventHandler;
+  contextMenuHandler: EventHandler;
+  mouseMoveHandler: EventHandler;
+  touchMoveHandler: EventHandler;
+  mouseUpHandler: EventHandler;
+  touchUpHandler: EventHandler;
+  stargDragPosition: any;
+  dragged: boolean;
+  eventListeners: any[];
+  undockListener: { onDockEnabled: (e: any) => void; onHideCloseButton: (e: any) => void; };
+
+  prev: number;
+  current: number;
+  direction: number;
+  _ctxMenu: HTMLDivElement;
+  _windowsContextMenuCloseBound: any;
+
+  constructor(parent: TabPage) {
+    this.parent = parent;
+    const undockHandler = this._performUndock.bind(this);
+    this.elementBase = document.createElement('div');
+    this.elementText = document.createElement('div');
+    this.elementCloseButton = document.createElement('div');
+    this.elementBase.classList.add('dockspan-tab-handle');
+    this.elementBase.classList.add('disable-selection'); // Disable text selection
+    this.elementText.classList.add('dockspan-tab-handle-text');
+    this.elementCloseButton.classList.add('dockspan-tab-handle-close-button');
+    this.elementBase.appendChild(this.elementText);
+    if (this.parent.host.displayCloseButton)
+      this.elementBase.appendChild(this.elementCloseButton);
+    if ((<PanelContainer> this.parent.container)._hideCloseButton || (<PanelContainer> this.parent.container)._grayOut)
+      this.elementCloseButton.style.display = 'none';
+    this.parent.host.tabListElement.appendChild(this.elementBase);
+
+    const panel = parent.container as PanelContainer;
+    const title = panel.getRawTitle();
+    this.undockListener = {
+      onDockEnabled: (e) => {this.undockEnabled(e.state);},
+      onHideCloseButton: (e) => {this.hideCloseButton(e.state);},
+    };
+    this.eventListeners = [];
+    panel.addListener(this.undockListener);
+
+    this.elementText.innerHTML = title;
+    this.elementText.setAttribute('dock-spawn-title', this.elementText.innerText);
+
+    //this._bringToFront(this.elementBase);
+
+    this.undockInitiator = new UndockInitiator(this.elementBase, undockHandler);
+    this.undockInitiator.enabled = true;
+    this.mouseDownHandler = new EventHandler(this.elementBase, 'mousedown', this.onMouseDown.bind(this));
+    this.touchDownHandler = new EventHandler(this.elementBase, 'touchstart', this.onMouseDown.bind(this), {passive: false});
+    this.closeButtonHandler = new EventHandler(this.elementCloseButton, 'click', this.onCloseButtonClicked.bind(this));
+    this.closeButtonTouchHandler = new EventHandler(this.elementCloseButton, 'touchstart', this.onCloseButtonClicked.bind(this));
+    this.auxClickHandler = new EventHandler(this.elementBase, 'auxclick', this.onCloseButtonClicked.bind(this));
+
+    if (panel.panelType == PanelType.document)
+      this.contextMenuHandler = new EventHandler(this.elementBase, 'contextmenu', this.oncontextMenuClicked.bind(this));
+
+
+    this.windowsContextMenuClose = this.windowsContextMenuClose.bind(this);
+    //this.zIndexCounter = parent.host.dockManager.zIndexTabHandle;
+  }
+
+  addListener(listener) {
+    this.eventListeners.push(listener);
+  }
+
+  removeListener(listener) {
+    this.eventListeners.splice(this.eventListeners.indexOf(listener), 1);
+  }
+
+  undockEnabled(state: boolean) {
+    this.undockInitiator.enabled = state;
+  }
+
+  static createContextMenuContentCallback = (tabHandle: TabHandle, documentMangerNodes: DockNode[]): Node[] => {
+    const result = [];
+
+    const btnCloseAll = document.createElement('div');
+    btnCloseAll.innerText = Localizer.getString('CloseAll');
+    result.push(btnCloseAll);
+
+    btnCloseAll.onclick = () => {
+      const length = documentMangerNodes.length;
+      for (let i = length - 1; i >= 0; i--) {
+        const panel = (<PanelContainer>documentMangerNodes[i].container);
+        if (panel.panelType == PanelType.document)
+          panel.close();
+      }
+      tabHandle.closeContextMenu();
+    };
+
+    const btnCloseAllButThis = document.createElement('div');
+    btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
+    result.push(btnCloseAllButThis);
+
+    btnCloseAllButThis.onclick = () => {
+      const length = documentMangerNodes.length;
+      for (let i = length - 1; i >= 0; i--) {
+        const panel = (<PanelContainer>documentMangerNodes[i].container);
+        if (tabHandle.parent.container != panel && panel.panelType == PanelType.document)
+          panel.close();
+      }
+      tabHandle.closeContextMenu();
+    };
+
+    if (tabHandle.parent.container.dockManager.config.enableBrowserWindows) {
+      const btnNewBrowserWindow = document.createElement('div');
+      btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+      result.push(btnNewBrowserWindow);
+
+      btnNewBrowserWindow.onclick = () => {
+        (<PanelContainer>tabHandle.parent.container).undockToBrowserDialog();
+        tabHandle.closeContextMenu();
+      };
+    }
+
+    return result;
+  };
+
+  oncontextMenuClicked(e: MouseEvent) {
+    e.preventDefault();
+
+    if (!this._ctxMenu && TabHandle.createContextMenuContentCallback) {
+      const menuItems = TabHandle.createContextMenuContentCallback(
+        this,
+        this.parent.container.dockManager.context.model.documentManagerNode.children,
+      );
+
+      if (menuItems.length == 0)
+        return;
+
+
+      this._ctxMenu = document.createElement('div');
+      this._ctxMenu.className = 'dockspab-tab-handle-context-menu';
+      this._ctxMenu.append(...menuItems);
+      this._ctxMenu.style.left = e.pageX + 'px';
+      this._ctxMenu.style.top = e.pageY + 'px';
+      document.body.appendChild(this._ctxMenu);
+      window.addEventListener('mouseup', this.windowsContextMenuClose);
+    } else
+      this.closeContextMenu();
+  }
+
+  closeContextMenu() {
+    if (this._ctxMenu) {
+      document.body.removeChild(this._ctxMenu);
+      delete this._ctxMenu;
+      window.removeEventListener('mouseup', this.windowsContextMenuClose);
+    }
+  }
+
+  windowsContextMenuClose(e: Event) {
+    const cp = e.composedPath();
+    for (const i in cp) {
+      const el = cp[i];
+      if (el == this._ctxMenu)
+        return;
+    }
+    this.closeContextMenu();
+  }
+
+  onMouseDown(e) {
+    e.preventDefault();
+
+    this.parent.onSelected();
+
+    if (this.mouseMoveHandler) {
+      this.mouseMoveHandler.cancel();
+      delete this.mouseMoveHandler;
+    }
+    if (this.touchMoveHandler) {
+      this.touchMoveHandler.cancel();
+      delete this.touchMoveHandler;
+    }
+    if (this.mouseUpHandler) {
+      this.mouseUpHandler.cancel();
+      delete this.mouseUpHandler;
+    }
+    if (this.touchUpHandler) {
+      this.touchUpHandler.cancel();
+      delete this.touchUpHandler;
+    }
+    this.stargDragPosition = e.clientX;
+    this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
+    this.touchMoveHandler = new EventHandler(window, 'touchmove', this.onMouseMove.bind(this), {passive: false});
+    this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
+    this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
+  }
+
+  onMouseUp(e) {
+    if (this.elementBase)
+      this.elementBase.classList.remove('dockspan-tab-handle-dragged');
+
+    this.dragged = false;
+    if (this.mouseMoveHandler)
+      this.mouseMoveHandler.cancel();
+    if (this.touchMoveHandler)
+      this.touchMoveHandler.cancel();
+    if (this.mouseUpHandler)
+      this.mouseUpHandler.cancel();
+    if (this.touchUpHandler)
+      this.touchUpHandler.cancel();
+    delete this.mouseMoveHandler;
+    delete this.touchMoveHandler;
+    delete this.mouseUpHandler;
+    delete this.touchUpHandler;
+  }
+
+  moveTabEvent(that, state) {
+    that.eventListeners.forEach((listener) => {
+      if (listener.onMoveTab)
+        listener.onMoveTab({self: that, state: state});
+    });
+  }
+
+  onMouseMove(e) {
+    e.preventDefault();
+
+    if (Math.abs(this.stargDragPosition - e.clientX) < 10)
+      return;
+    if (this.elementBase != null) { //Todo: because of this is null, we need to drag 2 times, needs fix
+      this.elementBase.classList.add('dockspan-tab-handle-dragged');
+      this.dragged = true;
+      this.prev = this.current;
+      this.current = e.clientX;
+      this.direction = this.current - this.prev;
+      const tabRect = this.elementBase.getBoundingClientRect();
+      const event = this.direction < 0 ?
+        {state: 'left', bound: tabRect.left, rect: tabRect} :
+        {state: 'right', bound: tabRect.right, rect: tabRect};
+      if ((e.clientX < tabRect.left && this.direction < 0) || (e.clientX > tabRect.left + tabRect.width && this.direction > 0))
+        this.moveTabEvent(this, event.state);
+    }
+  }
+
+  hideCloseButton(state) {
+    this.elementCloseButton.style.display = state ? 'none' : 'block';
+  }
+
+  updateTitle() {
+    if (this.parent.container instanceof PanelContainer) {
+      const panel = this.parent.container;
+      const title = panel.getRawTitle();
+      this.elementText.innerHTML = title;
+    }
+  }
+
+  destroy() {
+    const panel = this.parent.container as PanelContainer;
+    panel.removeListener(this.undockListener);
+
+    this.mouseDownHandler.cancel();
+    this.touchDownHandler.cancel();
+    this.closeButtonHandler.cancel();
+    this.closeButtonTouchHandler.cancel();
+    this.auxClickHandler.cancel();
+
+    if (this.mouseMoveHandler)
+      this.mouseMoveHandler.cancel();
+
+    if (this.touchMoveHandler)
+      this.touchMoveHandler.cancel();
+
+    if (this.mouseUpHandler)
+      this.mouseUpHandler.cancel();
+
+    if (this.touchUpHandler)
+      this.touchUpHandler.cancel();
+
+    if (this.contextMenuHandler)
+      this.contextMenuHandler.cancel();
+
+
+    if (this.elementBase) {
+      Utils.removeNode(this.elementBase);
+      delete this.elementBase;
+    }
+
+    if (this.elementCloseButton) {
+      Utils.removeNode(this.elementCloseButton);
+      delete this.elementCloseButton;
+    }
+  }
+
+  _performUndock(e, dragOffset) {
+    if (this.parent.container.containerType === 'panel') {
+      this.undockInitiator.enabled = false;
+      const panel = this.parent.container as PanelContainer;
+      return panel.performUndockToDialog(e, dragOffset);
+    } else
+      return null;
+  }
+
+  onCloseButtonClicked(e) {
+    if (this.elementCloseButton.style.display !== 'none') {
+      if (e.button !== 2) {
+        // If the page contains a panel element, undock it and destroy it
+        if (this.parent.container.containerType === 'panel') {
+          const panel = this.parent.container as PanelContainer;
+          panel.close();
+        }
+      }
+    }
+  }
+
+  setSelected(isSelected: boolean) {
+    if (isSelected)
+      this.elementBase.classList.add('dockspan-tab-handle-selected');
+    else {
+      this.elementBase.classList.remove('dockspan-tab-handle-selected');
+      this.elementBase.classList.remove('dockspan-tab-handle-active');
+    }
+  }
+
+  setActive(isActive: boolean) {
+    if (this.elementBase) {
+      if (isActive)
+        this.elementBase.classList.add('dockspan-tab-handle-active');
+      else
+        this.elementBase.classList.remove('dockspan-tab-handle-active');
+    }
+  }
+}