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

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;AAiBvC,qBAAa,uBAAwB,SAAQ,WAAW;IAC7C,WAAW,EAAE,WAAW,CAAC;IAChC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,kBAAkB,CAAC;IAC3B,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,SAAS,CAAe;IAChC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,mBAAmB,CAA+C;;IAYnE,SAAS;IAIH,SAAS,CAAC,eAAe,EAAE,MAAM;IAc9C,OAAO,CAAC,aAAa;IAyDrB,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;IAOpB,OAAO,CAAC,aAAa;IAIrB,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/{lib → src}/webcomponent/DockSpawnTsWebcomponent.js

@@ -1,9 +1,18 @@
-import { DockManager } from '../DockManager.js';
-import { PanelContainer } from '../PanelContainer.js';
-import { PanelType } from '../enums/PanelType.js';
-import { faStyle, style, style1, style2 } from './styles';
-import { Observable } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { DockManager } from "../DockManager";
+import { PanelContainer } from "../PanelContainer";
+import { PanelType } from "../enums/PanelType";
+import { faStyle, style, style1, style2 } from "./styles";
+import { Observable } from "rxjs";
+import { debounceTime } from "rxjs/operators";
 const elementResized = (elem) => {
     return new Observable((subscriber) => {
         const resizeObserver = new ResizeObserver((entries) => subscriber.next(entries));
@@ -12,17 +21,12 @@ const elementResized = (elem) => {
     });
 };
 export class DockSpawnTsWebcomponent extends HTMLElement {
-    dockManager;
-    slotId = 0;
-    windowResizedBound;
-    slotElementMap;
-    observer;
-    resizeSub;
-    initialized = false;
-    initFinished = false;
-    elementContainerMap = new Map();
     constructor() {
         super();
+        this.slotId = 0;
+        this.initialized = false;
+        this.initFinished = false;
+        this.elementContainerMap = new Map();
         const shadowRoot = this.attachShadow({ mode: 'open' });
         shadowRoot.adoptedStyleSheets = [style, style1, style2, faStyle];
         this.windowResizedBound = this.windowResized.bind(this);
@@ -31,23 +35,25 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
     getLayout() {
         return this.dockManager.saveState();
     }
-    async useLayout(serializedState) {
-        this.observer.disconnect();
-        const oldPanels = this.dockManager.getPanels();
-        await this.dockManager.loadState(serializedState);
-        oldPanels.forEach((panel) => panel.elementContentContainer.remove());
-        this.dockManager.element.firstChild.remove();
-        this.observer.observe(this, { childList: true });
-        setTimeout(() => {
-            this.dockManager.invalidate();
-        }, 50);
+    useLayout(serializedState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.observer.disconnect();
+            const oldPanels = this.dockManager.getPanels();
+            yield this.dockManager.loadState(serializedState);
+            oldPanels.forEach((panel) => panel.elementContentContainer.remove());
+            this.dockManager.element.firstChild.remove();
+            this.observer.observe(this, { childList: true });
+            setTimeout(() => {
+                this.dockManager.invalidate();
+            }, 50);
+        });
     }
     initDockspawn() {
         const dockSpawnDiv = document.createElement('div');
-        dockSpawnDiv.id = 'dockSpawnDiv';
-        dockSpawnDiv.style.width = '100%';
-        dockSpawnDiv.style.height = '100%';
-        dockSpawnDiv.style.position = 'relative';
+        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;
@@ -55,14 +61,15 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
             this.dockManager.initialize();
             this.dockManager.addLayoutListener({
                 onActivePanelChange: (_, panel, prevPanel) => {
+                    var _a, _b;
                     this.dispatchEvent(new CustomEvent('active-panel-changed', { detail: {
-                            newPanel: panel?.title ?? null,
-                            prevPanel: prevPanel?.title ?? null
+                            newPanel: (_a = panel === null || panel === void 0 ? void 0 : panel.title) !== null && _a !== void 0 ? _a : null,
+                            prevPanel: (_b = prevPanel === null || prevPanel === void 0 ? void 0 : prevPanel.title) !== null && _b !== void 0 ? _b : null
                         } }));
                 },
                 onClosePanel: (dockManager, dockNode) => {
-                    const slot = dockNode.elementContent;
-                    const element = this.slotElementMap.get(slot);
+                    let slot = dockNode.elementContent;
+                    let element = this.slotElementMap.get(slot);
                     if (element) {
                         if (this.contains(element)) {
                             this.observer.disconnect();
@@ -73,8 +80,9 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
                     }
                 },
             });
-            for (const element of this.children)
+            for (const element of this.children) {
                 this.handleAddedChildNode(element);
+            }
             this.observer = new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
                     mutation.addedNodes.forEach((node) => {
@@ -92,7 +100,8 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         }, 50);
     }
     set activePanelTitle(panelTitle) {
-        const foundPanel = this.dockManager?.getPanels().find((panel) => panel.title === 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;
     }
@@ -100,39 +109,37 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         return this.slotElementMap.get(slot);
     }
     handleAddedChildNode(element) {
+        var _a;
         if (element instanceof Comment || (element instanceof Text && element.textContent.length === 0))
             return;
-        const slot = document.createElement('slot');
-        const slotName = 'slot_' + this.slotId++;
+        let slot = document.createElement('slot');
+        let slotName = 'slot_' + this.slotId++;
         slot.name = slotName;
         let dockPanelType = PanelType.panel;
-        const dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
+        let dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
         if (dockPanelTypeAttribute)
             dockPanelType = 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;
-        }
+        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;
-        const dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
+        let dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
         if (dockRatioAttribute)
             dockRatio = dockRatioAttribute;
-        const dockType = element.getAttribute('dock-spawn-dock-type');
+        let dockType = element.getAttribute('dock-spawn-dock-type');
         let dockRelativeTo = this.dockManager.context.model.documentManagerNode;
-        const dockToAttribute = element.getAttribute('dock-spawn-dock-to');
+        let dockToAttribute = element.getAttribute('dock-spawn-dock-to');
         if (dockToAttribute) {
-            const dockToElement = this.getRootNode()
+            let dockToElement = this.getRootNode()
                 .querySelector(`[dock-spawn-title="${dockToAttribute}"]`);
             if (dockToElement && this.elementContainerMap.get(dockToElement)) {
-                dockRelativeTo = this.dockManager
-                    .findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement);
+                dockRelativeTo = (_a = this.dockManager
+                    .findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement)) !== null && _a !== void 0 ? _a : dockRelativeTo;
             }
         }
         if (dockType == 'left')
@@ -149,7 +156,7 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
             element.style.display = 'block';
     }
     handleRemovedChildNode(element) {
-        const panel = this.elementContainerMap.get(element);
+        let panel = this.elementContainerMap.get(element);
         if (panel)
             panel.close();
         this.elementContainerMap.delete(element);
@@ -173,7 +180,8 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         this.resize();
     }
     resize() {
-        this.dockManager.resize(this.clientWidth, this.clientHeight);
+        if (this.clientWidth > 0 && this.clientHeight > 0)
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
     }
     getDockNodeForElement(elementOrContainer) {
         let element = elementOrContainer;
@@ -182,28 +190,28 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         return this.dockManager.findNodeFromContainerElement(element);
     }
     dockFill(element, panelType, dockNode, title, hideCloseButton) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, 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) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, 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) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, 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) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, 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) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, 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) {
-        const container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
-        const dlg = this.dockManager.floatDialog(container, x, y, null);
+        let container = new PanelContainer(element, this.dockManager, title, panelType, hideCloseButton);
+        let dlg = this.dockManager.floatDialog(container, x, y, null);
         dlg.resize(width, height);
     }
 }