@datagrok-libraries/dock-spawn-dg 0.0.1

package/src/Dialog.ts

@@ -0,0 +1,253 @@
+import {DockManager} from './DockManager.js';
+import {Point} from './Point.js';
+import {PanelContainer} from './PanelContainer.js';
+import {DraggableContainer} from './DraggableContainer.js';
+import {ResizableContainer} from './ResizableContainer.js';
+import {EventHandler} from './EventHandler.js';
+import {Utils} from './Utils.js';
+import {Localizer} from './i18n/Localizer.js';
+import {DockNode} from './DockNode.js';
+
+export class Dialog {
+  elementDialog: HTMLDivElement & { floatingDialog: Dialog };
+  draggable: DraggableContainer;
+  panel: PanelContainer;
+  dockManager: DockManager;
+  eventListener: DockManager;
+  position: Point;
+  resizable: ResizableContainer;
+  disableResize: boolean;
+  mouseDownHandler: any;
+  onKeyPressBound: any;
+  noDocking: boolean;
+  isHidden: boolean;
+  keyPressHandler: EventHandler;
+  focusHandler: EventHandler;
+  grayoutParent: PanelContainer;
+  contextmenuHandler: EventHandler;
+  _ctxMenu: HTMLDivElement;
+  _windowsContextMenuCloseBound: any;
+
+  constructor(panel: PanelContainer, dockManager: DockManager, grayoutParent?: PanelContainer, disableResize?: boolean) {
+    this.panel = panel;
+    this.dockManager = dockManager;
+    this.eventListener = dockManager;
+    this.grayoutParent = grayoutParent;
+    this.disableResize = disableResize;
+    this._initialize();
+    this.dockManager.context.model.dialogs.push(this);
+    this.position = dockManager.defaultDialogPosition;
+    this.dockManager.notifyOnCreateDialog(this);
+    panel.isDialog = true;
+  }
+
+  saveState(x: number, y: number) {
+    this.position = new Point(x, y);
+    this.dockManager.notifyOnChangeDialogPosition(this, x, y);
+  }
+
+  static fromElement(id: string, dockManager: DockManager) {
+    return new Dialog(new PanelContainer(<HTMLElement>document.getElementById(id), dockManager), dockManager, null);
+  }
+
+  _initialize() {
+    this.panel.floatingDialog = this;
+    this.elementDialog = Object.assign(document.createElement('div'), {floatingDialog: this});
+    this.elementDialog.tabIndex = 0;
+    this.elementDialog.appendChild(this.panel.elementPanel);
+    this.draggable = new DraggableContainer(this, this.panel, this.elementDialog, this.panel.elementTitle);
+    this.resizable = new ResizableContainer(this, this.draggable, this.draggable.topLevelElement, this.disableResize);
+
+    this.dockManager.config.dialogRootElement.appendChild(this.elementDialog);
+    this.elementDialog.classList.add('dialog-floating');
+
+    this.focusHandler = new EventHandler(this.elementDialog, 'focus', this.onFocus.bind(this), true);
+    this.mouseDownHandler = new EventHandler(this.elementDialog, 'pointerdown', this.onMouseDown.bind(this), true);
+    this.keyPressHandler = new EventHandler(this.elementDialog, 'keypress', this.dockManager.onKeyPressBound, true);
+    this.contextmenuHandler = new EventHandler(this.panel.elementTitle, 'contextmenu', this.oncontextMenuClicked.bind(this));
+
+    this.resize(this.panel.elementPanel.clientWidth, this.panel.elementPanel.clientHeight);
+    this.isHidden = false;
+
+    if (this.grayoutParent != null)
+      this.grayoutParent.grayOut(true);
+
+    this.bringToFront();
+  }
+
+  setPosition(x: number, y: number) {
+    const rect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
+    this.position = new Point(x - rect.left, y - rect.top);
+    this.elementDialog.style.left = (x - rect.left) + 'px';
+    this.elementDialog.style.top = (y - rect.top) + 'px';
+    this.panel.setDialogPosition(x, y);
+    this.dockManager.notifyOnChangeDialogPosition(this, x, y);
+  }
+
+  getPosition(): Point {
+    return new Point(this.position ? this.position.x : 0, this.position ? this.position.y : 0);
+  }
+
+  onFocus() {
+    if (this.dockManager.activePanel != this.panel)
+      this.dockManager.activePanel = this.panel;
+  }
+
+  onMouseDown(e: PointerEvent) {
+    if (e.button != 2)
+      this.bringToFront();
+  }
+
+  destroy() {
+    this.panel.lastDialogSize = {width: this.resizable.width, height: this.resizable.height};
+
+    if (this.focusHandler) {
+      this.focusHandler.cancel();
+      delete this.focusHandler;
+    }
+    if (this.mouseDownHandler) {
+      this.mouseDownHandler.cancel();
+      delete this.mouseDownHandler;
+    }
+    if (this.keyPressHandler) {
+      this.keyPressHandler.cancel();
+      delete this.keyPressHandler;
+    }
+    if (this.contextmenuHandler) {
+      this.contextmenuHandler.cancel();
+      delete this.contextmenuHandler;
+    }
+    Utils.removeNode(this.elementDialog);
+    this.draggable.removeDecorator();
+    Utils.removeNode(this.panel.elementPanel);
+    Utils.arrayRemove(this.dockManager.context.model.dialogs, this);
+    delete this.panel.floatingDialog;
+
+    if (this.grayoutParent)
+      this.grayoutParent.grayOut(false);
+  }
+
+  resize(width: number, height: number) {
+    this.resizable.resize(width, height);
+  }
+
+  setTitle(title: string) {
+    this.panel.setTitle(title);
+  }
+
+  setTitleIcon(iconName: string) {
+    this.panel.setTitleIcon(iconName);
+  }
+
+  bringToFront() {
+    this.panel.elementContentContainer.style.zIndex = <any> this.dockManager.zIndexDialogCounter++;
+    this.elementDialog.style.zIndex = <any> this.dockManager.zIndexDialogCounter++;
+    this.dockManager.activePanel = this.panel;
+  }
+
+  hide() {
+    this.elementDialog.style.zIndex = '0';
+    this.panel.elementContentContainer.style.zIndex = '';
+    this.elementDialog.style.display = 'none';
+    if (!this.isHidden) {
+      this.isHidden = true;
+      this.dockManager.notifyOnHideDialog(this);
+    }
+    if (this.grayoutParent)
+      this.grayoutParent.grayOut(false);
+  }
+
+  close() {
+    this.hide();
+    this.remove();
+    this.dockManager.notifyOnClosePanel(this.panel);
+    this.destroy();
+  }
+
+  remove() {
+    this.elementDialog.parentNode.removeChild(this.elementDialog);
+  }
+
+  show() {
+    this.panel.elementContentContainer.style.zIndex = <any> this.dockManager.zIndexDialogCounter++;
+    this.elementDialog.style.zIndex = <any> this.dockManager.zIndexDialogCounter++;
+    this.elementDialog.style.display = 'block';
+    if (this.isHidden) {
+      this.isHidden = false;
+      this.dockManager.notifyOnShowDialog(this);
+    }
+  }
+
+  static createContextMenuContentCallback = (dialog: Dialog, documentMangerNodes: DockNode[]): Node[] => {
+    if (!dialog.panel._hideCloseButton)
+      return [];
+
+
+    const result = [];
+
+    const btnCloseDialog = document.createElement('div');
+    btnCloseDialog.innerText = Localizer.getString('CloseDialog');
+    result.push(btnCloseDialog);
+
+    btnCloseDialog.onclick = () => {
+      dialog.panel.close();
+      dialog.closeContextMenu();
+    };
+
+    if (dialog.dockManager.config.enableBrowserWindows) {
+      const btnNewBrowserWindow = document.createElement('div');
+      btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+      result.push(btnNewBrowserWindow);
+
+      btnNewBrowserWindow.onclick = () => {
+        dialog.panel.undockToBrowserDialog();
+        dialog.closeContextMenu();
+      };
+    }
+
+    return result;
+  };
+
+  oncontextMenuClicked(e: MouseEvent) {
+    e.preventDefault();
+
+    if (!this._ctxMenu && Dialog.createContextMenuContentCallback) {
+      const menuItems = Dialog.createContextMenuContentCallback(
+        this,
+        this.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);
+      this._windowsContextMenuCloseBound = this.windowsContextMenuClose.bind(this);
+      window.addEventListener('pointerup', this._windowsContextMenuCloseBound);
+    } else
+      this.closeContextMenu();
+  }
+
+  closeContextMenu() {
+    if (this._ctxMenu) {
+      document.body.removeChild(this._ctxMenu);
+      delete this._ctxMenu;
+      window.removeEventListener('pointerup', this._windowsContextMenuCloseBound);
+    }
+  }
+
+  windowsContextMenuClose(e: Event) {
+    const cp = e.composedPath();
+    for (const i in cp) {
+      const el = cp[i];
+      if (el == this._ctxMenu)
+        return;
+    }
+    this.closeContextMenu();
+  }
+}

package/src/DockConfig.ts

@@ -0,0 +1,15 @@
+export class DockConfig {
+    public constructor() {
+        this.escClosesWindow = true;
+        this.escClosesDialog = true;
+        this.dialogRootElement = document.body;
+        this.moveOnlyWithinDockConatiner = false;
+        this.enableBrowserWindows = true;
+    }
+
+    escClosesWindow?: boolean;
+    escClosesDialog?: boolean;
+    dialogRootElement: HTMLElement;
+    moveOnlyWithinDockConatiner?: boolean;
+    enableBrowserWindows?: boolean;
+}

package/src/DockGraphDeserializer.ts

@@ -0,0 +1,129 @@
+import {DockManager} from './DockManager.js';
+import {DockModel} from './DockModel.js';
+import {DockNode} from './DockNode.js';
+import {PanelContainer} from './PanelContainer.js';
+import {HorizontalDockContainer} from './HorizontalDockContainer.js';
+import {VerticalDockContainer} from './VerticalDockContainer.js';
+import {DocumentManagerContainer} from './DocumentManagerContainer.js';
+import {FillDockContainer} from './FillDockContainer.js';
+import {Dialog} from './Dialog.js';
+import {Utils} from './Utils.js';
+import {IPanelInfo} from './interfaces/IPanelInfo.js';
+import {INodeInfo} from './interfaces/INodeInfo.js';
+import {IDockContainer} from './interfaces/IDockContainer.js';
+
+/**
+ * Deserializes the dock layout hierarchy from JSON and creates a dock hierarhcy graph
+ */
+export class DockGraphDeserializer {
+  dockManager: DockManager;
+  documentManagerNode: DockNode;
+
+  constructor(dockManager: DockManager) {
+    this.dockManager = dockManager;
+  }
+
+  async deserialize(_json: string): Promise<DockModel> {
+    const info = JSON.parse(_json);
+    const model = new DockModel();
+    model.rootNode = await this._buildGraph(info.graphInfo);
+    model.dialogs = await this._buildDialogs(info.dialogsInfo);
+    model.documentManagerNode = this.documentManagerNode;
+    return model;
+  }
+
+  async _buildGraph(nodeInfo: INodeInfo) {
+    const childrenInfo = nodeInfo.children;
+    const children: DockNode[] = [];
+    for (const childInfo of childrenInfo) {
+      const childNode = await this._buildGraph(childInfo);
+      if (childNode !== null)
+        children.push(childNode);
+    };
+
+    // Build the container owned by this node
+    const container = await this._createContainer(nodeInfo, children);
+    if (container === null)
+      return null;
+
+    // Build the node for this container and attach it's children
+    const node = new DockNode(container);
+    if (container instanceof DocumentManagerContainer)
+      this.documentManagerNode = node;
+    node.children = children;
+    for (const childNode of node.children.reverse())
+      childNode.parent = node;
+    ;
+    node.children.reverse();
+    // node.container.setActiveChild(node.container);
+    return node;
+  }
+
+  async _createContainer(nodeInfo: INodeInfo, children: DockNode[]) {
+    const containerType = nodeInfo.containerType;
+    const containerState = nodeInfo.state;
+    let container;
+
+    const childContainers: IDockContainer[] = [];
+    for (const childNode of children)
+      childContainers.push(childNode.container);
+
+
+    if (containerType === 'panel') {
+      container = await PanelContainer.loadFromState(containerState, this.dockManager);
+      if (!container?.prepareForDocking)
+        return null;
+      container.prepareForDocking();
+      Utils.removeNode(container.elementPanel);
+    } else if (containerType === 'horizontal')
+      container = new HorizontalDockContainer(this.dockManager, childContainers);
+    else if (containerType === 'vertical')
+      container = new VerticalDockContainer(this.dockManager, childContainers);
+    else if (containerType === 'fill') {
+      // Check if this is a document manager
+
+      // TODO: Layout engine compares the string 'fill', so cannot create another subclass type
+      // called document_manager and have to resort to this hack. use RTTI in layout engine
+      const typeDocumentManager = containerState.documentManager;
+      if (typeDocumentManager)
+        container = new DocumentManagerContainer(this.dockManager);
+      else
+        container = new FillDockContainer(this.dockManager);
+    } else
+      throw new Error('Cannot create dock container of unknown type: ' + containerType);
+
+    // Restore the state of the container
+    container.loadState(containerState);
+
+    // container.performLayout(childContainers);
+    return container;
+  }
+
+  async _buildDialogs(dialogsInfo: IPanelInfo[]) {
+    const dialogs: Dialog[] = [];
+    for (const dialogInfo of dialogsInfo) {
+      const containerType = dialogInfo.containerType;
+      const containerState = dialogInfo.state;
+      let container;
+      if (containerType === 'panel') {
+        container = await PanelContainer.loadFromState(containerState, this.dockManager);
+        if (container.prepareForDocking) {
+          Utils.removeNode(container.elementPanel);
+          container.isDialog = true;
+          const dialog = new Dialog(container, this.dockManager);
+          if (dialogInfo.position.x > document.body.clientWidth ||
+                        dialogInfo.position.y > document.body.clientHeight - 70) {
+            dialogInfo.position.x = 20;
+            dialogInfo.position.y = 70;
+          }
+          dialog.setPosition(dialogInfo.position.x, dialogInfo.position.y);
+          dialog.isHidden = dialogInfo.isHidden;
+          if (dialog.isHidden)
+            dialog.hide();
+          dialogs.push(dialog);
+        }
+      }
+    }
+    return dialogs;
+  }
+}

package/src/DockGraphSerializer.ts

@@ -0,0 +1,53 @@
+import {DockModel} from './DockModel.js';
+import {DockNode} from './DockNode.js';
+import {Dialog} from './Dialog.js';
+import {IPanelInfo} from './interfaces/IPanelInfo.js';
+import {INodeInfo} from './interfaces/INodeInfo.js';
+import {IState} from './interfaces/IState.js';
+
+/**
+ * The serializer saves / loads the state of the dock layout hierarchy
+ */
+export class DockGraphSerializer {
+  serialize(model: DockModel) {
+    const graphInfo = this._buildGraphInfo(model.rootNode);
+    const dialogs = this._buildDialogsInfo(model.dialogs.sort((x, y)=><number><any>x.elementDialog.style.zIndex-<number><any>y.elementDialog.style.zIndex));
+    return JSON.stringify({graphInfo: graphInfo, dialogsInfo: dialogs});
+  }
+
+  _buildGraphInfo(node: DockNode): INodeInfo {
+    const nodeState: IState = {};
+    node.container.saveState(nodeState);
+
+    const childrenInfo: INodeInfo[] = [];
+    node.children.forEach((childNode) => {
+      childrenInfo.push(this._buildGraphInfo(childNode));
+    });
+
+    const nodeInfo: INodeInfo = {
+      containerType: node.container.containerType,
+      state: nodeState,
+      children: childrenInfo,
+    };
+    return nodeInfo;
+  }
+
+  _buildDialogsInfo(dialogs: Dialog[]): IPanelInfo[] {
+    const dialogsInfo: IPanelInfo[] = [];
+    dialogs.forEach((dialog) => {
+      const panelState: IState = {};
+      const panelContainer = dialog.panel;
+      panelContainer.saveState(panelState);
+
+      const panelInfo: IPanelInfo = {
+        containerType: panelContainer.containerType,
+        state: panelState,
+        position: dialog.getPosition(),
+        isHidden: dialog.isHidden,
+      };
+      dialogsInfo.push(panelInfo);
+    });
+
+    return dialogsInfo;
+  }
+}