dock-spawn-ts 2.402.0 → 2.500.0

package/lib/js/TabPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPage.js","sourceRoot":"","sources":["../../src/TabPage.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabPage.js","sourceRoot":"","sources":["../../src/TabPage.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dock-spawn-ts",
-  "version": "2.402.0",
+  "version": "2.500.0",
   "description": "DockSpawn Typescript Version",
   "license": "MIT",
   "author": "jochen.kuehner@gmx.de",
@@ -10,15 +10,15 @@
     "start": "http-server"
   },
   "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"
   },
   "main": "/lib/js/Exports.js",
   "files": [

package/src/Dialog.ts

@@ -73,6 +73,7 @@ export class Dialog {
         this.position = new Point(x - rect.left, y - rect.top);
         this.elementDialog.style.left = (x - rect.left) + 'px';
         this.elementDialog.style.top = (y - rect.top) + 'px';
+        this.panel.setDialogPosition(x, y);
         this.dockManager.notifyOnChangeDialogPosition(this, x, y);
     }
 
@@ -91,7 +92,7 @@ export class Dialog {
 
     destroy() {
         this.panel.lastDialogSize = { width: this.resizable.width, height: this.resizable.height };
-        
+
         if (this.focusHandler) {
             this.focusHandler.cancel();
             delete this.focusHandler;
@@ -132,12 +133,15 @@ export class Dialog {
     }
 
     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;
     }
 
     hide() {
         this.elementDialog.style.zIndex = '0';
+        this.panel.elementContentContainer.style.zIndex = this.elementDialog.style.zIndex;
         this.elementDialog.style.display = 'none';
         if (!this.isHidden) {
             this.isHidden = true;
@@ -160,11 +164,18 @@ export class Dialog {
     }
 
     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';
         if (this.isHidden) {
             this.isHidden = false;
             this.dockManager.notifyOnShowDialog(this);
         }
     }
+
+    private _increaseZIndex(){
+        // Increase by two, so the content can lay on top of the dialog
+        this.dockManager.zIndexDialogCounter += 2;
+    }
 }

package/src/DockManager.ts

@@ -201,6 +201,17 @@ export class DockManager {
         this.element.style.width = width + 'px';
         this.element.style.height = height + 'px';
         this.context.model.rootNode.container.resize(width, height);
+
+        let offsetX = 0, offsetY = 0;
+        for (let dialog of this.context.model.dialogs){
+            if(dialog.position.x > this.element.clientWidth || dialog.position.y > this.element.clientHeight){
+                if(offsetX > this.element.clientWidth || offsetY > this.element.clientHeight)
+                    offsetX = 0, offsetY = 0;
+                dialog.setPosition(100 + offsetX, 100 + offsetY);
+                offsetX += 100;
+                offsetY += 100;
+            }
+        }
     }
 
     /**
@@ -388,6 +399,7 @@ export class DockManager {
         let panel = dialog.panel;
         let newNode = new DockNode(panel);
         panel.prepareForDocking();
+        panel.elementContentContainer.style.zIndex = '';
         dialog.destroy();
         layoutDockFunction(referenceNode, newNode);
         // this.invalidate();
@@ -612,6 +624,7 @@ export class DockManager {
         this.layoutEventListeners.forEach((listener) => {
             if (listener.onDock) {
                 listener.onDock(this, dockNode);
+                dockNode.container.resize(dockNode.container.width, dockNode.container.height);
             }
         });
     }

package/src/DraggableContainer.ts

@@ -7,11 +7,12 @@ import { IDockContainer } from "./interfaces/IDockContainer.js";
 import { ContainerType } from "./ContainerType.js";
 import { IState } from "./interfaces/IState.js";
 import { DockWheelItem } from "./DockWheelItem.js";
+import { PanelContainer } from "./PanelContainer.js";
 
 export class DraggableContainer implements IDockContainer {
 
     dialog: Dialog;
-    delegate: IDockContainer;
+    delegate: PanelContainer;
     containerElement: HTMLElement;
     dockManager: DockManager;
     topLevelElement: HTMLElement;
@@ -26,7 +27,7 @@ export class DraggableContainer implements IDockContainer {
     touchUpHandler: EventHandler;
     private iframeEventHandlers: EventHandler[];
 
-    constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
+    constructor(dialog: Dialog, delegate: PanelContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
         this.dialog = dialog;
         this.delegate = delegate;
         this.containerElement = delegate.containerElement;
@@ -35,8 +36,8 @@ export class DraggableContainer implements IDockContainer {
         this.containerType = delegate.containerType;
         this.mouseDownHandler = new EventHandler(dragHandle, 'mousedown', this.onMouseDown.bind(this));
         this.touchDownHandler = new EventHandler(dragHandle, 'touchstart', this.onMouseDown.bind(this));
-        this.topLevelElement.style.marginLeft = topLevelElement.offsetLeft + 'px';
-        this.topLevelElement.style.marginTop = topLevelElement.offsetTop + 'px';
+        this.topLevelElement.style.left = topLevelElement.offsetLeft + 'px';
+        this.topLevelElement.style.top = topLevelElement.offsetTop + 'px';
         this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
         this.iframeEventHandlers = [];
     }
@@ -158,6 +159,7 @@ export class DraggableContainer implements IDockContainer {
 
     _startDragging(event: { clientX: number, clientY: number }) {
         this.containerElement.classList.add("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.add("draggable-dragging-active");
         if (this.dialog.eventListener)
             this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
         Utils.disableGlobalTextSelection(this.dockManager.config.dialogRootElement);
@@ -165,6 +167,7 @@ export class DraggableContainer implements IDockContainer {
 
     _stopDragging(event) {
         this.containerElement.classList.remove("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.remove("draggable-dragging-active");
         if (this.dialog.eventListener)
             this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
         Utils.enableGlobalTextSelection(this.dockManager.config.dialogRootElement);
@@ -219,9 +222,11 @@ export class DraggableContainer implements IDockContainer {
     }
 
     _performDrag(dx: number, dy: number) {
-        let left = dx + Utils.getPixels(this.topLevelElement.style.marginLeft);
-        let top = dy + Utils.getPixels(this.topLevelElement.style.marginTop);
-        this.topLevelElement.style.marginLeft = left + 'px';
-        this.topLevelElement.style.marginTop = top + 'px';
+        let left = dx + Utils.getPixels(this.topLevelElement.style.left);
+        let top = dy + Utils.getPixels(this.topLevelElement.style.top);
+        this.topLevelElement.style.left = left + 'px';
+        this.topLevelElement.style.top = top + 'px';
+
+        this.dialog.panel.setDialogPosition(left,top);
     }
 }

package/src/PanelContainer.ts

@@ -27,6 +27,7 @@ export class PanelContainer implements IDockContainerWithSize {
     name: string;
     state: ISize;
     elementContent: HTMLElement & { resizeHandler?: any, _dockSpawnPanelContainer: PanelContainer };
+    elementContentContainer: HTMLElement;
     elementContentWrapper: HTMLElement;
     dockManager: DockManager;
     title: string;
@@ -61,7 +62,23 @@ export class PanelContainer implements IDockContainerWithSize {
             panelType = PanelType.panel;
         this.panelType = panelType;
 
-        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;
         this.title = title;
         this.containerType = ContainerType.panel;
@@ -187,9 +204,13 @@ export class PanelContainer implements IDockContainerWithSize {
         this.elementContentHost.classList.add('panel-content');
 
         // 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);
 
         if (!this._hideCloseButton) {
@@ -199,10 +220,6 @@ export class PanelContainer implements IDockContainerWithSize {
                 new EventHandler(this.elementButtonClose, 'touchstart', this.onCloseButtonClicked.bind(this));
         }
 
-        this.elementContentWrapper = document.createElement("div");
-        this.elementContentWrapper.classList.add('panel-content-wrapper');
-        this.elementContentWrapper.appendChild(this.elementContent);
-
         Utils.removeNode(this.elementContentWrapper);
         this.elementContentHost.appendChild(this.elementContentWrapper);
 
@@ -333,14 +350,32 @@ export class PanelContainer implements IDockContainerWithSize {
     _setPanelDimensions(width: number, height: number) {
         this.elementTitle.style.width = width + 'px';
         this.elementContentHost.style.width = width + 'px';
-        this.elementContent.style.width = width + 'px';
+        this.elementContentContainer.style.width = width + 'px';
         this.elementPanel.style.width = width + 'px';
 
         let titleBarHeight = this.elementTitle.clientHeight;
         let contentHeight = height - titleBarHeight;
         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) {
@@ -397,6 +432,8 @@ export class PanelContainer implements IDockContainerWithSize {
     async close() {
         let close = true;
 
+        this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
+
         if (this.closePanelContainerCallback)
             close = await this.closePanelContainerCallback(this);
         else if (this.dockManager.closePanelContainerCallback)

package/src/ResizableContainer.ts

@@ -35,8 +35,8 @@ export class ResizableContainer implements IDockContainer {
         this.dockManager = delegate.dockManager;
         this.topLevelElement = topLevelElement;
         this.containerType = delegate.containerType;
-        this.topLevelElement.style.marginLeft = this.topLevelElement.offsetLeft + 'px';
-        this.topLevelElement.style.marginTop = this.topLevelElement.offsetTop + 'px';
+        this.topLevelElement.style.left = this.topLevelElement.offsetLeft + 'px';
+        this.topLevelElement.style.top = this.topLevelElement.offsetTop + 'px';
         this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
         this._buildResizeHandles();
         this.readyToProcessNextResize = true;
@@ -243,8 +243,8 @@ export class ResizableContainer implements IDockContainer {
 
     _performDrag(handle, dx: number, dy: number) {
         let bounds: IThickness = {};
-        bounds.left = Utils.getPixels(this.topLevelElement.style.marginLeft);
-        bounds.top = Utils.getPixels(this.topLevelElement.style.marginTop);
+        bounds.left = Utils.getPixels(this.topLevelElement.style.left);
+        bounds.top = Utils.getPixels(this.topLevelElement.style.top);
         bounds.width = this.topLevelElement.clientWidth;
         bounds.height = this.topLevelElement.clientHeight;
 
@@ -281,8 +281,8 @@ export class ResizableContainer implements IDockContainer {
         bounds.width = Math.max(bounds.width, minWidth);
         bounds.height = Math.max(bounds.height, minHeight);
 
-        this.topLevelElement.style.marginLeft = bounds.left + 'px';
-        this.topLevelElement.style.marginTop = bounds.top + 'px';
+        this.topLevelElement.style.left = bounds.left + 'px';
+        this.topLevelElement.style.top = bounds.top + 'px';
 
         this.resize(bounds.width, bounds.height);
     }

package/src/TabPage.ts

@@ -78,6 +78,7 @@ export class TabPage {
         this._initContent = true;
         if (this.selected) {
             this.containerElement.style.display = 'block';
+            this.panel.setVisible(true);
             // force a resize again
             let width = this.host.contentElement.clientWidth;
             let height = this.host.contentElement.clientHeight;
@@ -86,6 +87,7 @@ export class TabPage {
         }
         else {
             this.containerElement.style.display = 'none';
+            this.panel.setVisible(false);
         }
     }