@datagrok-libraries/dock-spawn-dg 0.0.1

package/src/i18n/Localizer.ts

@@ -0,0 +1,23 @@
+import { Defaults, GetLocalizerParameters, TranslationKey } from "./Defaults.js";
+
+function formatString(template: string, ...params: any[]): string {
+    return template.replace(/{(\d+)}/g, (_match: string, n: string) => {
+        const index = Number.parseInt(n);
+        return params[index].toString();
+    });
+}
+
+export class Localizer {
+    public static configure(getTemplateString: (key: TranslationKey) => string | null): void {
+        Localizer._getTemplateString = getTemplateString;
+    }
+
+    public static getString<K extends TranslationKey>(key: K, ...params: GetLocalizerParameters<K>): string {
+        return formatString(
+            Localizer._getTemplateString?.(key) ?? Defaults[key],
+            ...params
+        );
+    }
+
+    private static _getTemplateString?: (key: TranslationKey) => string | null;
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export * from './ContainerType';
+export * from './Dialog';
+export * from './DockConfig';
+export * from './DockGraphSerializer';
+export * from './DockLayoutEngine';
+export * from './DockManager';
+export * from './DockManagerContext';
+export * from './DockModel';
+export * from './DockNode';
+export * from './DockWheel';
+export * from './DockWheelItem';
+export * from './DocumentManagerContainer';
+export * from './DocumentTabPage';
+export * from './DraggableContainer';
+export * from './EventHandler';
+export * from './FillDockContainer';
+export * from './HorizontalDockContainer';
+export * from './PanelContainer';
+export * from './Point';
+export * from './ResizableContainer';
+export * from './ResizeHandle';
+export * from './SplitterBar';
+export * from './SplitterDockContainer';
+export * from './SplitterPanel';
+export * from './TabHandle';
+export * from './TabHost';
+export * from './TabPage';
+export * from './UndockInitiator';
+export * from './Utils';
+export * from './VerticalDockContainer';
+export * from './i18n/Localizer';
+export * from './webcomponent/DockSpawnTsWebcomponent';

package/src/interfaces/IDockContainer.ts

@@ -0,0 +1,27 @@
+import { ContainerType } from "../ContainerType.js";
+import { DockManager } from "../DockManager.js";
+import { IState } from "./IState.js";
+import { TabPage } from '../TabPage.js';
+
+export interface IDockContainer {
+    readonly dockManager: DockManager;
+    resize(_width: number, _height: number): void;
+    performLayout(children: IDockContainer[], relayoutEvenIfEqual : boolean): void;
+    destroy(): void;
+    setActiveChild(child: IDockContainer): void;
+    saveState(state: IState): void;
+    loadState(state: IState): void;
+    readonly containerElement: HTMLElement;
+    containerType: ContainerType;
+    readonly width: number;
+    readonly height: number;
+    name: string;
+    tabPage?: TabPage;
+
+    /** 
+     * Indicates the minimum allowed child nodes a composite dock panel can have
+     * If it's children fall below this value, the composite panel is destroyed
+     * and it's children are moved one level up 
+     */
+    readonly minimumAllowedChildNodes: number;
+}

package/src/interfaces/IDockContainerWithSize.ts

@@ -0,0 +1,6 @@
+import { ISize } from "./ISize.js";
+import { IDockContainer } from "./IDockContainer.js";
+
+export interface IDockContainerWithSize extends IDockContainer {
+    state: ISize;
+}

package/src/interfaces/ILayoutEventListener.ts

@@ -0,0 +1,28 @@
+import { DockManager } from "../DockManager.js";
+import { DockNode } from "../DockNode.js";
+import { Dialog } from "../Dialog.js";
+import { TabPage } from "../TabPage.js";
+import { IDockContainer } from "./IDockContainer.js";
+import { PanelContainer } from "../PanelContainer.js";
+
+export interface ILayoutEventListener {
+    onDock?(dockManager: DockManager, dockNode: DockNode): void;
+    onTabsReorder?(dockManager: DockManager, dockNode: DockNode): void;
+    onUndock?(dockManager: DockManager, dockNode: DockNode): void;
+    onClosePanel?(dockManager: DockManager, panel: PanelContainer): void;
+    onCreateDialog?(dockManager: DockManager, dialog: Dialog): void;
+    onHideDialog?(dockManager: DockManager, dialog: Dialog): void;
+    onShowDialog?(dockManager: DockManager, dialog: Dialog): void;
+    onChangeDialogPosition?(dockManager: DockManager, dialog: Dialog, x: number, y: number): void;
+    onContainerResized?(dockManager: DockManager, dockContainer: IDockContainer): void;
+    onTabChanged?(dockManager: DockManager, tabpage: TabPage): void;
+    onActivePanelChange?(dockManager: DockManager, panel?: PanelContainer, previousPanel?: PanelContainer): void;
+    onActiveDocumentChange?(dockManager: DockManager, panel?: PanelContainer, previousPanel?: PanelContainer): void;
+
+    /**
+    * The Dock Manager notifies the listeners of layout changes so client containers that have
+    * costly layout structures can detach and reattach themself to avoid reflow
+    */
+    onSuspendLayout?(dockManager: DockManager, panel: IDockContainer): void;
+    onResumeLayout?(dockManager: DockManager, panel: IDockContainer): void;
+}

package/src/interfaces/IMouseOrTouchEvent.ts

@@ -0,0 +1,6 @@
+export interface IMouseOrTouchEvent {
+    clientX: number;
+    clientY: number;
+    changedTouches?: IMouseOrTouchEvent[];
+    touches?: IMouseOrTouchEvent[];
+}

package/src/interfaces/INodeInfo.ts

@@ -0,0 +1,8 @@
+import { ContainerType } from "../ContainerType.js";
+import { IState } from "./IState.js";
+
+export interface INodeInfo {
+    containerType: ContainerType;
+    state: IState;
+    children: INodeInfo[];
+}

package/src/interfaces/IPanelInfo.ts

@@ -0,0 +1,10 @@
+import { ContainerType } from "../ContainerType.js";
+import { Point } from "../Point.js";
+import { IState } from "./IState.js";
+
+export interface IPanelInfo {
+    containerType: ContainerType;
+    state: IState;
+    position: Point;
+    isHidden: boolean;
+}

package/src/interfaces/IRectangle.ts

@@ -0,0 +1,6 @@
+export interface IRectangle {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}

package/src/interfaces/ISize.ts

@@ -0,0 +1,4 @@
+export interface ISize {
+    width?: number;
+    height?: number;
+}

package/src/interfaces/IState.ts

@@ -0,0 +1,12 @@
+import { PanelType } from "../enums/PanelType";
+
+export interface IState {
+    width?: number;
+    height?: number;
+    documentManager?: boolean;
+    element?: string;
+    canUndock?: boolean;
+    hideCloseButton?: boolean;
+    panelType?: PanelType;
+    panelIcon?: string,
+}

package/src/interfaces/IThickness.ts

@@ -0,0 +1,6 @@
+export interface IThickness {
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+}

package/src/webcomponent/DockSpawnTsWebcomponent.ts

@@ -0,0 +1,248 @@
+import {DockManager} from '../DockManager.js';
+import {PanelContainer} from '../PanelContainer.js';
+import {PanelType} from '../enums/PanelType.js';
+import {DockNode} from '../DockNode.js';
+import {faStyle, style, style1, style2} from './styles';
+import {Observable, Subscriber, Subscription} from 'rxjs';
+import {debounceTime} from 'rxjs/operators';
+
+const elementResized = (elem: Element) => {
+  return new Observable((subscriber: Subscriber<ResizeObserverEntry[]>) => {
+    const resizeObserver = new ResizeObserver(
+      (entries: ResizeObserverEntry[]) => subscriber.next(entries),
+    );
+
+    resizeObserver.observe(elem);
+
+    return () => resizeObserver.disconnect();
+  });
+};
+
+export class DockSpawnTsWebcomponent extends HTMLElement {
+  public dockManager: DockManager;
+  private slotId: number = 0;
+  private windowResizedBound;
+  private slotElementMap: WeakMap<HTMLSlotElement, HTMLElement>;
+  private observer: MutationObserver;
+  private resizeSub: Subscription;
+  private initialized = false;
+  private initFinished = false;
+  private elementContainerMap: Map<HTMLElement, PanelContainer> = new Map();
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.adoptedStyleSheets = [style, style1, style2, faStyle];
+
+    this.windowResizedBound = this.windowResized.bind(this);
+    this.slotElementMap = new WeakMap();
+  }
+
+  public getLayout() {
+    return this.dockManager.saveState();
+  }
+
+  public async useLayout(serializedState: string) {
+    this.observer.disconnect();
+    const oldPanels = this.dockManager.getPanels();
+    await this.dockManager.loadState(serializedState);
+    this.observer.observe(this, {childList: true});
+    oldPanels.forEach((panel) => panel.elementContentContainer.remove());
+    this.dockManager.element.firstChild.remove();
+    setTimeout(() => {
+      this.dockManager.invalidate();
+    }, 50)    
+  }
+
+  private initDockspawn() {
+    const dockSpawnDiv = document.createElement('div');
+    dockSpawnDiv.id = 'dockSpawnDiv';
+    dockSpawnDiv.style.width = '100%';
+    dockSpawnDiv.style.height = '100%';
+    dockSpawnDiv.style.position = 'relative';
+    this.shadowRoot.appendChild(dockSpawnDiv);
+
+    this.dockManager = new DockManager(dockSpawnDiv);
+    this.dockManager.config.dialogRootElement = dockSpawnDiv;
+
+    setTimeout(() => {
+      this.dockManager.initialize();
+
+      this.dockManager.addLayoutListener({
+        onActivePanelChange: (_, panel, prevPanel) => {
+          this.dispatchEvent(new CustomEvent('active-panel-changed', {detail: {
+            newPanel: panel?.title ?? null,
+            prevPanel: prevPanel?.title ?? null
+          }}));
+        },
+        onClosePanel: (dockManager, dockNode) => {
+          const slot = dockNode.elementContent as any as HTMLSlotElement;
+          const element = this.slotElementMap.get(slot);
+          if (element) {
+            if (this.contains(element)) {
+              this.observer.disconnect();
+              this.removeChild(element);
+              this.observer.observe(this, {childList: true});
+            }
+            this.dispatchEvent(new CustomEvent('panel-closed', {detail: element}));
+          }
+        },
+      });
+
+      for (const element of this.children)
+        this.handleAddedChildNode(element as HTMLElement);
+
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((node) => {
+            this.handleAddedChildNode(node as HTMLElement);
+          });
+          mutation.removedNodes.forEach((node) => {
+            this.handleRemovedChildNode(node as HTMLElement);
+          });
+        });
+      });
+      this.observer.observe(this, {childList: true});
+
+      this.resizeSub = elementResized(this).pipe(debounceTime(50)).subscribe(() => this.resize());
+
+      this.initFinished = true;
+      this.dispatchEvent(new CustomEvent('init-finished'));
+    }, 50);
+  }
+
+  public set activePanelTitle(panelTitle: string) {
+    const foundPanel = this.dockManager?.getPanels().find((panel) => panel.title === panelTitle);
+    if (foundPanel)
+      this.dockManager.activePanel = foundPanel;
+  }
+
+  public getElementInSlot(slot: HTMLSlotElement): HTMLElement {
+    return this.slotElementMap.get(slot);
+  }
+
+  private handleAddedChildNode(element: HTMLElement) {
+    if (element instanceof Comment || (element instanceof Text && element.textContent.length === 0)) return;
+
+    const slot = document.createElement('slot');
+    const slotName = 'slot_' + this.slotId++;
+    slot.name = slotName;
+
+    let dockPanelType = PanelType.panel;
+    const dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
+    if (dockPanelTypeAttribute)
+      dockPanelType = <PanelType><any>dockPanelTypeAttribute;
+    const hideCloseButton = element.hasAttribute('dock-spawn-hide-close-button');
+    const title = element.getAttribute('dock-spawn-title');
+    const panelIcon = element.getAttribute('dock-spawn-panel-icon');
+    const container = new PanelContainer(slot, this.dockManager, title, dockPanelType, hideCloseButton, panelIcon);
+    const customZindex = element.getAttribute('dock-spawn-z-index');
+    if (customZindex && slot.parentElement) {
+      slot.parentElement.style.zIndex = customZindex;
+    }
+    element.slot = slotName;
+    this.slotElementMap.set(slot, (<HTMLElement>element));
+    this.elementContainerMap.set(element, container);
+
+    let dockRatio: number = 0.5;
+    const dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
+    if (dockRatioAttribute)
+      dockRatio = <number><any>dockRatioAttribute;
+    const dockType = element.getAttribute('dock-spawn-dock-type');
+
+    let dockRelativeTo = this.dockManager.context.model.documentManagerNode;
+    const dockToAttribute = element.getAttribute('dock-spawn-dock-to');
+    if (dockToAttribute) {
+      const dockToElement = (this.getRootNode() as HTMLElement)
+        .querySelector(`[dock-spawn-title="${dockToAttribute}"]`) as HTMLElement | null;
+      if (dockToElement && this.elementContainerMap.get(dockToElement)) {
+        dockRelativeTo = this.dockManager
+          .findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement);
+      }
+    }
+
+    if (dockType == 'left')
+      this.dockManager.dockLeft(dockRelativeTo, container, dockRatio);
+    else if (dockType == 'right')
+      this.dockManager.dockRight(dockRelativeTo, container, dockRatio);
+    else if (dockType == 'up')
+      this.dockManager.dockUp(dockRelativeTo, container, dockRatio);
+    else if (dockType == 'down')
+      this.dockManager.dockDown(dockRelativeTo, container, dockRatio);
+    else
+      this.dockManager.dockFill(dockRelativeTo, container);
+
+    if ((<HTMLElement>element).style.display == 'none')
+      (<HTMLElement>element).style.display = 'block';
+  }
+
+  private handleRemovedChildNode(element: HTMLElement) {
+    const node = this.elementContainerMap.get(element);
+    if (node)
+      node.close();
+    this.elementContainerMap.delete(element);
+  }
+
+  connectedCallback() {
+    if (!this.initialized) {
+      this.initDockspawn();
+      this.initialized = true;
+    }
+    window.addEventListener('orientationchange', this.windowResizedBound);
+    if (this.initFinished) this.resize();
+  }
+
+  disconnectedCallback() {
+    if (!this.initFinished) return;
+
+    this.resizeSub.unsubscribe();
+    window.removeEventListener('orientationchange', this.windowResizedBound);
+  }
+
+  private windowResized() {
+    this.resize();
+  }
+
+  resize() {
+    this.dockManager.resize(this.clientWidth, this.clientHeight);
+  }
+
+  getDockNodeForElement(elementOrContainer: HTMLElement | PanelContainer): DockNode {
+    let element = elementOrContainer as HTMLElement;
+    if ((<any>element).containerElement)
+      element = (<any>elementOrContainer).containerElement as HTMLElement;
+    return this.dockManager.findNodeFromContainerElement(element);
+  }
+
+  dockFill(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    this.dockManager.dockFill(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container);
+  }
+
+  dockLeft(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, ratio?: number, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    this.dockManager.dockLeft(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+  }
+
+  dockRight(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, ratio?: number, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    this.dockManager.dockRight(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+  }
+
+  dockUp(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, ratio?: number, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    this.dockManager.dockUp(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+  }
+
+  dockDown(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, ratio?: number, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    this.dockManager.dockDown(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+  }
+
+  floatDialog(element: HTMLElement, x: number, y: number, width: number, height: number, panelType?: PanelType, title?: string, hideCloseButton?: boolean) {
+    const container = new PanelContainer(element as HTMLElement, this.dockManager, title, panelType, hideCloseButton);
+    const dlg = this.dockManager.floatDialog(container, x, y, null);
+    dlg.resize(width, height);
+  }
+}