@datagrok-libraries/dock-spawn-dg 0.0.2 → 0.1.0

package/{lib → src}/webcomponent/DockSpawnTsWebcomponent.d.ts

@@ -1,28 +1,24 @@
-import { DockManager } from '../DockManager.js';
-import { PanelContainer } from '../PanelContainer.js';
-import { PanelType } from '../enums/PanelType.js';
-import { DockNode } from '../DockNode.js';
+import { DockManager } from "../DockManager";
+import { PanelContainer } from "../PanelContainer";
+import { PanelType } from "../enums/PanelType";
+import { DockNode } from "../DockNode";
 export declare class DockSpawnTsWebcomponent extends HTMLElement {
     dockManager: DockManager;
     private slotId;
-    private windowResizedBound;
     private slotElementMap;
     private observer;
-    private resizeSub;
     private initialized;
-    private initFinished;
     private elementContainerMap;
+    private destroy$;
     constructor();
-    getLayout(): string;
-    useLayout(serializedState: string): Promise<void>;
     private initDockspawn;
+    private initDockManager;
     set activePanelTitle(panelTitle: string);
     getElementInSlot(slot: HTMLSlotElement): HTMLElement;
     private handleAddedChildNode;
     private handleRemovedChildNode;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private windowResized;
     resize(): void;
     getDockNodeForElement(elementOrContainer: HTMLElement | PanelContainer): DockNode;
     dockFill(element: HTMLElement, panelType?: PanelType, dockNode?: DockNode, title?: string, hideCloseButton?: boolean): void;

package/src/webcomponent/DockSpawnTsWebcomponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockSpawnTsWebcomponent.d.ts","sourceRoot":"","sources":["DockSpawnTsWebcomponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAavC,qBAAa,uBAAwB,SAAQ,WAAW;IAC7C,WAAW,EAAE,WAAW,CAAC;IAChC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,mBAAmB,CAA+C;IAC1E,OAAO,CAAC,QAAQ,CAAuB;;IAWvC,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,eAAe;IA6CvB,IAAW,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAI7C;IAEM,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW;IAI3D,OAAO,CAAC,oBAAoB;IAoD5B,OAAO,CAAC,sBAAsB;IAO9B,iBAAiB;IASjB,oBAAoB;IAEpB,MAAM;IAKN,qBAAqB,CAAC,kBAAkB,EAAE,WAAW,GAAG,cAAc,GAAG,QAAQ;IAOjF,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAKpH,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAKpI,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAKrI,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAKlI,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAKpI,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;CAK1J"}

package/src/webcomponent/DockSpawnTsWebcomponent.js

@@ -0,0 +1,178 @@
+import { DockManager } from "../DockManager";
+import { PanelContainer } from "../PanelContainer";
+import { PanelType } from "../enums/PanelType";
+import { faStyle, style, style1, style2 } from "./styles";
+import { Observable, Subject } from "rxjs";
+import { debounceTime, takeUntil } from "rxjs/operators";
+const elementResized = (elem) => {
+    return new Observable((subscriber) => {
+        const resizeObserver = new ResizeObserver((entries) => subscriber.next(entries));
+        resizeObserver.observe(elem);
+        return () => resizeObserver.disconnect();
+    });
+};
+export class DockSpawnTsWebcomponent extends HTMLElement {
+    constructor() {
+        super();
+        this.slotId = 0;
+        this.initialized = false;
+        this.elementContainerMap = new Map();
+        this.destroy$ = new Subject();
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.adoptedStyleSheets = [style, style1, style2, faStyle];
+        this.slotElementMap = new WeakMap();
+    }
+    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;
+    }
+    initDockManager() {
+        this.dockManager.initialize();
+        this.dockManager.addLayoutListener({
+            onActivePanelChange: (_, panel, prevPanel) => {
+                this.dispatchEvent(new CustomEvent('active-panel-changed', { detail: {
+                        newPanel: panel === null || panel === void 0 ? void 0 : panel.title,
+                        prevPanel: prevPanel === null || prevPanel === void 0 ? void 0 : prevPanel.title
+                    } }));
+            },
+            onClosePanel: (dockManager, dockNode) => {
+                let slot = dockNode.elementContent;
+                let element = this.slotElementMap.get(slot);
+                if (element && 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);
+        }
+        this.observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    this.handleAddedChildNode(node);
+                });
+                mutation.removedNodes.forEach((node) => {
+                    this.handleRemovedChildNode(node);
+                });
+            });
+        });
+        this.observer.observe(this, { childList: true });
+        elementResized(this).pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(() => this.resize());
+        this.dispatchEvent(new CustomEvent('manager-init-finished'));
+    }
+    set activePanelTitle(panelTitle) {
+        var _a;
+        const foundPanel = (_a = this.dockManager) === null || _a === void 0 ? void 0 : _a.getPanels().find((panel) => panel.title === panelTitle);
+        if (foundPanel)
+            this.dockManager.activePanel = foundPanel;
+    }
+    getElementInSlot(slot) {
+        return this.slotElementMap.get(slot);
+    }
+    handleAddedChildNode(element) {
+        var _a;
+        if (element instanceof Comment || (element instanceof Text && element.textContent.length === 0))
+            return;
+        let slot = document.createElement('slot');
+        let slotName = 'slot_' + this.slotId++;
+        slot.name = slotName;
+        let dockPanelType = PanelType.panel;
+        let dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
+        if (dockPanelTypeAttribute)
+            dockPanelType = dockPanelTypeAttribute;
+        let hideCloseButton = element.hasAttribute('dock-spawn-hide-close-button');
+        let title = element.getAttribute('dock-spawn-title');
+        let panelIcon = element.getAttribute('dock-spawn-panel-icon');
+        let zIndex = element.getAttribute('dock-spawn-z-index');
+        let container = new PanelContainer(slot, this.dockManager, title, dockPanelType, hideCloseButton, panelIcon, zIndex);
+        element.slot = slotName;
+        this.slotElementMap.set(slot, element);
+        this.elementContainerMap.set(element, container);
+        let dockRatio = 0.5;
+        let dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
+        if (dockRatioAttribute)
+            dockRatio = dockRatioAttribute;
+        let dockType = element.getAttribute('dock-spawn-dock-type');
+        let dockRelativeTo = this.dockManager.context.model.documentManagerNode;
+        let dockToAttribute = element.getAttribute('dock-spawn-dock-to');
+        if (dockToAttribute) {
+            let dockToElement = this.getRootNode()
+                .querySelector(`[dock-spawn-title="${dockToAttribute}"]`);
+            if (dockToElement && this.elementContainerMap.get(dockToElement)) {
+                dockRelativeTo = (_a = this.dockManager
+                    .findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement)) !== null && _a !== void 0 ? _a : dockRelativeTo;
+            }
+        }
+        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 (element.style.display == 'none')
+            element.style.display = 'block';
+    }
+    handleRemovedChildNode(element) {
+        let panel = this.elementContainerMap.get(element);
+        if (panel)
+            panel.close();
+        this.elementContainerMap.delete(element);
+    }
+    connectedCallback() {
+        if (!this.initialized) {
+            this.initialized = true;
+            this.initDockspawn();
+            setTimeout(() => this.initDockManager(), 0);
+            window.addEventListener('orientationchange', () => this.resize());
+        }
+    }
+    disconnectedCallback() { }
+    resize() {
+        if (this.clientWidth > 0 && this.clientHeight > 0)
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
+    }
+    getDockNodeForElement(elementOrContainer) {
+        let element = elementOrContainer;
+        if (element.containerElement)
+            element = elementOrContainer.containerElement;
+        return this.dockManager.findNodeFromContainerElement(element);
+    }
+    dockFill(element, panelType, dockNode, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        this.dockManager.dockFill(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container);
+    }
+    dockLeft(element, panelType, dockNode, ratio, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        this.dockManager.dockLeft(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockRight(element, panelType, dockNode, ratio, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        this.dockManager.dockRight(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockUp(element, panelType, dockNode, ratio, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        this.dockManager.dockUp(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockDown(element, panelType, dockNode, ratio, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        this.dockManager.dockDown(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    floatDialog(element, x, y, width, height, panelType, title, hideCloseButton) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        let dlg = this.dockManager.floatDialog(container, x, y, null);
+        dlg.resize(width, height);
+    }
+}