dock-spawn-ts - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "DockSpawn Typescript Version",
@@ -5,0 +5,0 @@ "license": "MIT",

src/webcomponent/DockSpawnTsWebcomponent.ts

@@ -8,2 +8,4 @@ import { DockManager } from "../DockManager.js";
 
+    static cssRootDirectory = "../../";
+
     private dockManager: DockManager;
@@ -13,6 +15,15 @@ private slotId: number = 0;
     private slotElementMap: Map<HTMLSlotElement, HTMLElement>;
+    private observer: MutationObserver;
 
+
     constructor() {
         super();
 
+        const template = document.createElement('template')
+        template.innerHTML = `
+<link rel="stylesheet" href="../../lib/css/dock-manager.css">
+<link rel="stylesheet" href="../../lib/css/dock-manager-style.css">
+<div id="dockSpawnDiv" style="width:100%;height:100%;position:relative"></div>
+`
+
         this.windowResizedBound = this.windowResized.bind(this);
@@ -22,8 +33,4 @@ this.slotElementMap = new Map();
         let shadowRoot = this.attachShadow({ mode: 'open' });
-        let dockSpawnDiv = document.createElement("div");
-        dockSpawnDiv.style.width = "100%";
-        dockSpawnDiv.style.height = "100%";
-        dockSpawnDiv.style.position = "relative";
-        shadowRoot.innerHTML = '<link rel="stylesheet" href="../../lib/css/dock-manager.css"><link rel="stylesheet" href="../../lib/css/dock-manager-style.css">';
-        shadowRoot.appendChild(dockSpawnDiv);
+        shadowRoot.appendChild(template.content.cloneNode(true));
+        let dockSpawnDiv = shadowRoot.querySelector("#dockSpawnDiv") as HTMLDivElement;
 
@@ -33,17 +40,3 @@ this.dockManager = new DockManager(dockSpawnDiv);
         this.dockManager.initialize();
-        this.dockManager.resize(this.clientWidth, this.clientHeight);
-        let documentNode = this.dockManager.context.model.documentManagerNode;
 
-        for (let element of this.children) {
-            let slot = document.createElement('slot');
-            let slotName = 'slot_' + this.slotId++;
-            slot.name = slotName;
-            element.slot = slotName;
-            let container = new PanelContainer(slot, this.dockManager);
-            this.dockManager.dockFill(documentNode, container);
-            if ((<HTMLElement>element).style.display == 'none')
-            (<HTMLElement>element).style.display = 'block';
-            this.slotElementMap.set(slot, (<HTMLElement>element));
-        }
-
         this.dockManager.addLayoutListener({
@@ -57,4 +50,41 @@ onClosePanel: (dockManager, dockNode) => {
         });
+
+        for (let 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 });
+
+        this.dockManager.resize(this.clientWidth, this.clientHeight);
+        requestAnimationFrame(() => {
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
+        });
     }
 
+    private handleAddedChildNode(element) {
+        let slot = document.createElement('slot');
+        let slotName = 'slot_' + this.slotId++;
+        slot.name = slotName;
+        element.slot = slotName;
+        let container = new PanelContainer(slot, this.dockManager);
+        this.dockManager.dockFill(this.dockManager.context.model.documentManagerNode, container);
+        if ((<HTMLElement>element).style.display == 'none')
+            (<HTMLElement>element).style.display = 'block';
+        this.slotElementMap.set(slot, (<HTMLElement>element));
+    }
+
+    private handleRemovedChildNode(element) {
+        (<PanelContainer>this.getDockNodeForElement(element).container).close();
+    }
+
     connectedCallback() {
@@ -61,0 +91,0 @@ window.addEventListener('resize', this.windowResizedBound);

No alert changes

Improved metrics

Total package byte prevSize

544636

increased by0.17%

Lines of code

8657

increased by0.27%

No dependency changes