dock-spawn-ts 2.403.0 → 2.501.0

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,14 @@ export class Dialog {
     }
 
     bringToFront() {
+        this.panel.elementContentContainer.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
         this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
         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,6 +163,7 @@ export class Dialog {
     }
 
     show() {
+        this.panel.elementContentContainer.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
         this.elementDialog.style.zIndex = <any>this.dockManager.zIndexDialogCounter++;
         this.elementDialog.style.display = 'block';
         if (this.isHidden) {

package/src/DockManager.ts

@@ -203,9 +203,9 @@ export class DockManager {
         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)
+        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;
@@ -399,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();
@@ -623,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;
@@ -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);
@@ -223,5 +226,7 @@ export class DraggableContainer implements IDockContainer {
         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,28 @@ 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();
+            } else {
+                if (this.tabPage)
+                    this.tabPage.setSelected(true);
+            }
+        });
+        this.elementContentContainer.appendChild(elementContent);
+        dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+
         this.dockManager = dockManager;
         this.title = title;
         this.containerType = ContainerType.panel;
@@ -187,9 +209,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 +225,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);
 
@@ -319,6 +341,7 @@ export class PanelContainer implements IDockContainerWithSize {
         //     // Already in the desired size
         //     return;
         // }
+        this.setVisible(true);
         this._setPanelDimensions(width, height);
         this._cachedWidth = width;
         this._cachedHeight = height;
@@ -333,14 +356,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 +438,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/SplitterDockContainer.ts

@@ -17,8 +17,8 @@ export abstract class SplitterDockContainer implements IDockContainerWithSize {
     _cachedHeight: number;
     state: ISize;
     containerType: ContainerType;
-    
-    constructor(name: string, dockManager: DockManager, childContainers: IDockContainer[], stackedVertical : boolean) {
+
+    constructor(name: string, dockManager: DockManager, childContainers: IDockContainer[], stackedVertical: boolean) {
         // for prototype inheritance purposes only
         if (arguments.length === 0) {
             return;
@@ -32,7 +32,7 @@ export abstract class SplitterDockContainer implements IDockContainerWithSize {
         this.minimumAllowedChildNodes = 2;
     }
 
-    resize(width:number, height:number) {
+    resize(width: number, height: number) {
         //    if (_cachedWidth === _cachedWidth && _cachedHeight === _height) {
         //      // No need to resize
         //      return;
@@ -42,7 +42,7 @@ export abstract class SplitterDockContainer implements IDockContainerWithSize {
         this._cachedHeight = height;
     }
 
-    performLayout(childContainers: IDockContainer[], relayoutEvenIfEqual : boolean = false) {
+    performLayout(childContainers: IDockContainer[], relayoutEvenIfEqual: boolean = false) {
         this.splitterPanel.performLayout(childContainers, relayoutEvenIfEqual);
     }
 
@@ -62,7 +62,7 @@ export abstract class SplitterDockContainer implements IDockContainerWithSize {
         this.resize(this.width, this.height);
     }
 
-    getRatios() : number[] {
+    getRatios(): number[] {
         return this.splitterPanel.getRatios();
     }
 

package/src/TabHost.ts

@@ -88,8 +88,9 @@ export class TabHost {
         } else {
             this.separatorElement.classList.remove('dockspan-tab-handle-content-seperator-active');
         }
-        if (this.activeTab)
+        if (this.activeTab) {
             this.activeTab.handle.setActive(isActive);
+        }
     }
 
     onMousedown() {

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);
         }
     }