dock-spawn-ts - npm Package Compare versions

Comparing version 2.403.0 to 2.500.0

lib/js/Dialog.d.ts

@@ -42,2 +42,3 @@ import { DockManager } from "./DockManager.js";
     show(): void;
+    private _increaseZIndex;
 }

lib/js/Dialog.js

@@ -51,2 +51,3 @@ import { Point } from "./Point.js";
         this.elementDialog.style.top = (y - rect.top) + 'px';
+        this.panel.setDialogPosition(x, y);
         this.dockManager.notifyOnChangeDialogPosition(this, x, y);
@@ -101,3 +102,5 @@ }
     bringToFront() {
-        this.elementDialog.style.zIndex = this.dockManager.zIndexDialogCounter++;
+        this._increaseZIndex();
+        this.elementDialog.style.zIndex = this.dockManager.zIndexDialogCounter;
+        this.panel.elementContentContainer.style.zIndex = (parseInt(this.elementDialog.style.zIndex) + 1).toString();
         this.dockManager.activePanel = this.panel;
@@ -107,2 +110,3 @@ }
         this.elementDialog.style.zIndex = '0';
+        this.panel.elementContentContainer.style.zIndex = this.elementDialog.style.zIndex;
         this.elementDialog.style.display = 'none';
@@ -127,3 +131,5 @@ if (!this.isHidden) {
     show() {
-        this.elementDialog.style.zIndex = this.dockManager.zIndexDialogCounter++;
+        this._increaseZIndex();
+        this.elementDialog.style.zIndex = this.dockManager.zIndexDialogCounter;
+        this.panel.elementContentContainer.style.zIndex = (parseInt(this.elementDialog.style.zIndex) + 1).toString();
         this.elementDialog.style.display = 'block';
@@ -135,3 +141,7 @@ if (this.isHidden) {
     }
+    _increaseZIndex() {
+        // Increase by two, so the content can lay on top of the dialog
+        this.dockManager.zIndexDialogCounter += 2;
+    }
 }
 //# sourceMappingURL=Dialog.js.map

lib/js/DockManager.js

@@ -327,2 +327,3 @@ import { DockWheel } from "./DockWheel.js";
         panel.prepareForDocking();
+        panel.elementContentContainer.style.zIndex = '';
         dialog.destroy();
@@ -516,2 +517,3 @@ layoutDockFunction(referenceNode, newNode);
                 listener.onDock(this, dockNode);
+                dockNode.container.resize(dockNode.container.width, dockNode.container.height);
             }
@@ -518,0 +520,0 @@ });

lib/js/DraggableContainer.d.ts

@@ -7,5 +7,6 @@ import { Dialog } from "./Dialog.js";
 import { IState } from "./interfaces/IState.js";
+import { PanelContainer } from "./PanelContainer.js";
 export declare class DraggableContainer implements IDockContainer {
     dialog: Dialog;
-    delegate: IDockContainer;
+    delegate: PanelContainer;
     containerElement: HTMLElement;
@@ -27,3 +28,3 @@ dockManager: DockManager;
     private iframeEventHandlers;
-    constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement);
+    constructor(dialog: Dialog, delegate: PanelContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement);
     destroy(): void;
@@ -30,0 +31,0 @@ saveState(state: IState): void;

lib/js/DraggableContainer.js

@@ -121,2 +121,3 @@ import { EventHandler } from "./EventHandler.js";
         this.containerElement.classList.add("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.add("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -128,2 +129,3 @@ this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
         this.containerElement.classList.remove("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.remove("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -181,4 +183,5 @@ this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
         this.topLevelElement.style.top = top + 'px';
+        this.dialog.panel.setDialogPosition(left, top);
     }
 }
 //# sourceMappingURL=DraggableContainer.js.map

lib/js/PanelContainer.d.ts

@@ -29,2 +29,3 @@ import { DockManager } from "./DockManager.js";
     };
+    elementContentContainer: HTMLElement;
     elementContentWrapper: HTMLElement;
@@ -90,2 +91,4 @@ dockManager: DockManager;
     _setPanelDimensions(width: number, height: number): void;
+    setDialogPosition(x: number, y: number): void;
+    setVisible(isVisible: boolean): void;
     setTitle(title: string): void;
@@ -92,0 +95,0 @@ setTitleIcon(icon: string): void;

lib/js/PanelContainer.js

@@ -16,3 +16,19 @@ import { Utils } from "./Utils.js";
         this.panelType = panelType;
-        this.elementContent = Object.assign(elementContent, { _dockSpawnPanelContainer: this });
+        elementContent._dockSpawnPanelContainer = this;
+        this.elementContent = elementContent;
+        elementContent.style.position = 'absolute';
+        elementContent.style.width = '100%';
+        elementContent.style.height = '100%';
+        elementContent.style.top = '0';
+        elementContent.style.bottom = '0';
+        elementContent.hidden = false;
+        this.elementContentContainer = document.createElement('div');
+        this.elementContentContainer.className = 'panel-element-content-container';
+        this.elementContentContainer.style.position = 'absolute';
+        this.elementContentContainer.addEventListener('pointerdown', () => {
+            if (this.isDialog)
+                this._floatingDialog.bringToFront();
+        });
+        this.elementContentContainer.appendChild(elementContent);
+        dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
         this.dockManager = dockManager;
@@ -128,5 +144,7 @@ this.title = title;
         // set the size of the dialog elements based on the panel's size
-        let panelWidth = this.elementContent.clientWidth;
-        let panelHeight = this.elementContent.clientHeight;
+        let panelWidth = this.elementContentContainer.clientWidth;
+        let panelHeight = this.elementContentContainer.clientHeight;
         let titleHeight = this.elementTitle.clientHeight;
+        this.elementContentWrapper = document.createElement("div");
+        this.elementContentWrapper.classList.add('panel-content-wrapper');
         this._setPanelDimensions(panelWidth, panelHeight + titleHeight);
@@ -139,5 +157,2 @@ if (!this._hideCloseButton) {
         }
-        this.elementContentWrapper = document.createElement("div");
-        this.elementContentWrapper.classList.add('panel-content-wrapper');
-        this.elementContentWrapper.appendChild(this.elementContent);
         Utils.removeNode(this.elementContentWrapper);
@@ -261,3 +276,3 @@ this.elementContentHost.appendChild(this.elementContentWrapper);
         this.elementContentHost.style.width = width + 'px';
-        this.elementContent.style.width = width + 'px';
+        this.elementContentContainer.style.width = width + 'px';
         this.elementPanel.style.width = width + 'px';
@@ -267,5 +282,20 @@ let titleBarHeight = this.elementTitle.clientHeight;
         this.elementContentHost.style.height = contentHeight + 'px';
-        this.elementContent.style.height = contentHeight + 'px';
+        this.elementContentContainer.style.height = contentHeight + 'px';
         this.elementPanel.style.height = height + 'px';
+        if (this.elementContentContainer.parentElement != this.dockManager.config.dialogRootElement)
+            this.dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+        const rect = this.elementContentWrapper.getBoundingClientRect();
+        this.elementContentContainer.style.left = rect.x + 'px';
+        this.elementContentContainer.style.top = rect.y + 'px';
+        this.elementContentContainer.style.width = rect.width + 'px';
+        this.elementContentContainer.style.height = rect.height + 'px';
     }
+    setDialogPosition(x, y) {
+        this.elementContentContainer.style.left = x + 'px';
+        //todo, 25px if it is a dialog, is it always 25px? where do we know...
+        this.elementContentContainer.style.top = (y + this.elementTitle.clientHeight) + 'px';
+    }
+    setVisible(isVisible) {
+        this.elementContentContainer.style.display = isVisible ? 'block' : 'none';
+    }
     setTitle(title) {
@@ -317,2 +347,3 @@ this.title = title;
         let close = true;
+        this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
         if (this.closePanelContainerCallback)
@@ -319,0 +350,0 @@ close = await this.closePanelContainerCallback(this);

lib/js/TabPage.js

@@ -58,2 +58,3 @@ import { TabHandle } from "./TabHandle.js";
             this.containerElement.style.display = 'block';
+            this.panel.setVisible(true);
             // force a resize again
@@ -67,2 +68,3 @@ let width = this.host.contentElement.clientWidth;
             this.containerElement.style.display = 'none';
+            this.panel.setVisible(false);
         }
@@ -69,0 +71,0 @@ }

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.403.0",
+  "version": "2.500.0",
   "description": "DockSpawn Typescript Version",
@@ -13,11 +13,11 @@ "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "@babel/preset-env": "^7.16.11",
-    "@types/node": "^17.0.10",
-    "http-server": "^14.1.0",
-    "typescript": "^4.5.5",
-    "uglify-js": "^3.14.5",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.9.2"
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.4",
+    "@types/node": "^18.8.4",
+    "http-server": "^14.1.1",
+    "typescript": "^4.8.4",
+    "uglify-js": "^3.17.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
@@ -24,0 +24,0 @@ "main": "/lib/js/Exports.js",

src/Dialog.ts

@@ -76,2 +76,3 @@ import { DockManager } from "./DockManager.js";
         this.elementDialog.style.top = (y - rect.top) + 'px';
+        this.panel.setDialogPosition(x, y);
         this.dockManager.notifyOnChangeDialogPosition(this, x, y);
@@ -95,3 +96,3 @@ }
         this.panel.lastDialogSize = { width: this.resizable.width, height: this.resizable.height };
-        
+
         if (this.focusHandler) {
@@ -137,3 +138,5 @@ this.focusHandler.cancel();
     bringToFront() {
-        this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
+        this._increaseZIndex();
+        this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter;
+        this.panel.elementContentContainer.style.zIndex = (parseInt(this.elementDialog.style.zIndex) + 1).toString();
         this.dockManager.activePanel = this.panel;
@@ -144,2 +147,3 @@ }
         this.elementDialog.style.zIndex = '0';
+        this.panel.elementContentContainer.style.zIndex = this.elementDialog.style.zIndex;
         this.elementDialog.style.display = 'none';
@@ -167,3 +171,5 @@ if (!this.isHidden) {
     show() {
-        this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
+        this._increaseZIndex();
+        this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter;
+        this.panel.elementContentContainer.style.zIndex = (parseInt(this.elementDialog.style.zIndex) + 1).toString();
         this.elementDialog.style.display = 'block';
@@ -175,2 +181,7 @@ if (this.isHidden) {
     }
+
+    private _increaseZIndex(){
+        // Increase by two, so the content can lay on top of the dialog
+        this.dockManager.zIndexDialogCounter += 2;
+    }
 }

src/DockManager.ts

@@ -402,2 +402,3 @@ import { DockWheel } from "./DockWheel.js";
         panel.prepareForDocking();
+        panel.elementContentContainer.style.zIndex = '';
         dialog.destroy();
@@ -627,2 +628,3 @@ layoutDockFunction(referenceNode, newNode);
                 listener.onDock(this, dockNode);
+                dockNode.container.resize(dockNode.container.width, dockNode.container.height);
             }
@@ -629,0 +631,0 @@ });

src/DraggableContainer.ts

@@ -10,2 +10,3 @@ import { Dialog } from "./Dialog.js";
 import { DockWheelItem } from "./DockWheelItem.js";
+import { PanelContainer } from "./PanelContainer.js";
 
@@ -15,3 +16,3 @@ export class DraggableContainer implements IDockContainer {
     dialog: Dialog;
-    delegate: IDockContainer;
+    delegate: PanelContainer;
     containerElement: HTMLElement;
@@ -31,3 +32,3 @@ dockManager: DockManager;
 
-    constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
+    constructor(dialog: Dialog, delegate: PanelContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
         this.dialog = dialog;
@@ -164,2 +165,3 @@ this.delegate = delegate;
         this.containerElement.classList.add("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.add("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -172,2 +174,3 @@ this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
         this.containerElement.classList.remove("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.remove("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -231,3 +234,5 @@ this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
         this.topLevelElement.style.top = top + 'px';
+
+        this.dialog.panel.setDialogPosition(left,top);
     }
 }

src/PanelContainer.ts

@@ -30,2 +30,3 @@ import { DockManager } from "./DockManager.js";
     elementContent: HTMLElement & { resizeHandler?: any, _dockSpawnPanelContainer: PanelContainer };
+    elementContentContainer: HTMLElement;
     elementContentWrapper: HTMLElement;
@@ -65,3 +66,19 @@ dockManager: DockManager;
 
-        this.elementContent = Object.assign(elementContent, { _dockSpawnPanelContainer: this });
+        (<any>elementContent)._dockSpawnPanelContainer = this;
+        this.elementContent = <any>elementContent;
+        elementContent.style.position = 'absolute'
+        elementContent.style.width = '100%'
+        elementContent.style.height = '100%'
+        elementContent.style.top = '0'
+        elementContent.style.bottom = '0'
+        elementContent.hidden = false;
+        this.elementContentContainer = document.createElement('div');
+        this.elementContentContainer.className = 'panel-element-content-container';
+        this.elementContentContainer.style.position = 'absolute';
+        this.elementContentContainer.addEventListener('pointerdown', () => {
+            if(this.isDialog) this._floatingDialog.bringToFront();
+        });
+        this.elementContentContainer.appendChild(elementContent);
+        dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+
         this.dockManager = dockManager;
@@ -192,5 +209,9 @@ this.title = title;
         // set the size of the dialog elements based on the panel's size
-        let panelWidth = this.elementContent.clientWidth;
-        let panelHeight = this.elementContent.clientHeight;
+        let panelWidth = this.elementContentContainer.clientWidth;
+        let panelHeight = this.elementContentContainer.clientHeight;
         let titleHeight = this.elementTitle.clientHeight;
+
+        this.elementContentWrapper = document.createElement("div");
+        this.elementContentWrapper.classList.add('panel-content-wrapper');
+
         this._setPanelDimensions(panelWidth, panelHeight + titleHeight);
@@ -205,6 +226,2 @@
 
-        this.elementContentWrapper = document.createElement("div");
-        this.elementContentWrapper.classList.add('panel-content-wrapper');
-        this.elementContentWrapper.appendChild(this.elementContent);
-
         Utils.removeNode(this.elementContentWrapper);
@@ -340,3 +357,3 @@ this.elementContentHost.appendChild(this.elementContentWrapper);
         this.elementContentHost.style.width = width + 'px';
-        this.elementContent.style.width = width + 'px';
+        this.elementContentContainer.style.width = width + 'px';
         this.elementPanel.style.width = width + 'px';
@@ -347,6 +364,24 @@
         this.elementContentHost.style.height = contentHeight + 'px';
-        this.elementContent.style.height = contentHeight + 'px';
+        this.elementContentContainer.style.height = contentHeight + 'px';
         this.elementPanel.style.height = height + 'px';
+
+        if (this.elementContentContainer.parentElement != this.dockManager.config.dialogRootElement)
+            this.dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+        const rect = this.elementContentWrapper.getBoundingClientRect();
+        this.elementContentContainer.style.left = rect.x + 'px';
+        this.elementContentContainer.style.top = rect.y + 'px';
+        this.elementContentContainer.style.width = rect.width + 'px';
+        this.elementContentContainer.style.height = rect.height + 'px';
     }
 
+    setDialogPosition(x: number, y: number) {
+        this.elementContentContainer.style.left = x + 'px';
+        //todo, 25px if it is a dialog, is it always 25px? where do we know...
+        this.elementContentContainer.style.top = (y + this.elementTitle.clientHeight) + 'px';
+    }
+
+    setVisible(isVisible: boolean) {
+        this.elementContentContainer.style.display = isVisible ? 'block' : 'none';
+    }
+
     setTitle(title: string) {
@@ -406,2 +441,4 @@ this.title = title;
 
+        this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
+
         if (this.closePanelContainerCallback)
@@ -408,0 +445,0 @@ close = await this.closePanelContainerCallback(this);

src/TabPage.ts

@@ -81,2 +81,3 @@ import { TabHandle } from "./TabHandle.js";
             this.containerElement.style.display = 'block';
+            this.panel.setVisible(true);
             // force a resize again
@@ -90,2 +91,3 @@ let width = this.host.contentElement.clientWidth;
             this.containerElement.style.display = 'none';
+            this.panel.setVisible(false);
         }
@@ -92,0 +94,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

751623

increased by2.95%

Lines of code

10421

increased by1.5%

No dependency changes