dock-spawn-ts 2.200.0 → 2.240.0

package/src/DockManager.ts

@@ -355,7 +355,7 @@ export class DockManager {
         return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine), false);
     }
 
-    floatDialog(container: PanelContainer, x: number, y: number) {
+    floatDialog(container: PanelContainer, x: number, y: number, grayoutParent: PanelContainer) {
         let retdiag = undefined;
 
         //check the dialog do not already exist
@@ -377,7 +377,7 @@ export class DockManager {
         let panel = container;
         Utils.removeNode(panel.elementPanel);
         panel.isDialog = true;
-        let dialog = new Dialog(panel, this);
+        let dialog = new Dialog(panel, this, grayoutParent);
         dialog.setPosition(x, y);
         return dialog;
     }
@@ -463,7 +463,7 @@ export class DockManager {
         panelContainer.elementPanel.style.display = 'block';
 
         // Create a new dialog window for the undocked panel
-        let dialog = new Dialog(panelContainer, this);
+        let dialog = new Dialog(panelContainer, this, null);
 
         if (event !== undefined) {
             // Adjust the relative position
@@ -496,7 +496,7 @@ export class DockManager {
      */
     openInDialog(container: PanelContainer, event, dragOffset: Point) {
         // Create a new dialog window for the undocked panel
-        let dialog = new Dialog(container, this);
+        let dialog = new Dialog(container, this, null);
 
         if (event !== undefined) {
             // Adjust the relative position

package/src/DockWheel.ts

@@ -75,8 +75,10 @@ export class DockWheel {
         let containerHeight = element.clientHeight;
         let baseX = Math.floor(containerWidth / 2); // + element.offsetLeft;
         let baseY = Math.floor(containerHeight / 2); // + element.offsetTop;
-        this.elementMainWheel.style.left = baseX + 'px';
-        this.elementMainWheel.style.top = baseY + 'px';
+        let bcElement = element.getBoundingClientRect();
+        let bcdockManagerElement = this.dockManager.element.getBoundingClientRect()
+        this.elementMainWheel.style.left = (bcElement.left - bcdockManagerElement.left + baseX) + 'px';
+        this.elementMainWheel.style.top = (bcElement.top - bcdockManagerElement.top + baseY) + 'px';
 
         // The positioning of the main dock wheel buttons is done automatically through CSS
         // Dynamically calculate the positions of the buttons on the extreme sides of the dock manager
@@ -86,7 +88,7 @@ export class DockWheel {
 
         Utils.removeNode(this.elementMainWheel);
         Utils.removeNode(this.elementSideWheel);
-        element.appendChild(this.elementMainWheel);
+        this.dockManager.element.appendChild(this.elementMainWheel);
         this.dockManager.element.appendChild(this.elementSideWheel);
 
         this._setWheelButtonPosition(WheelTypes["left-s"], sideMargin, -dockManagerHeight / 2);

package/src/PanelContainer.ts

@@ -46,6 +46,7 @@ export class PanelContainer implements IDockContainerWithSize {
     _cachedWidth: number;
     _cachedHeight: number;
     _hideCloseButton: boolean;
+    _grayOut: HTMLDivElement;
 
     constructor(elementContent: HTMLElement, dockManager: DockManager, title?: string, panelType?: PanelType, hideCloseButton?: boolean) {
         if (!title)
@@ -130,6 +131,18 @@ export class PanelContainer implements IDockContainerWithSize {
         return this.elementPanel;
     }
 
+    grayOut(show: boolean) {
+        if (!show && this._grayOut) {
+            this.elementPanel.removeChild(this._grayOut);
+            this._grayOut = null;
+        }
+        else if (show && !this._grayOut) {
+            this._grayOut = document.createElement('div');
+            this._grayOut.className = 'panel-grayout';
+            this.elementPanel.appendChild(this._grayOut);
+        }
+    }
+
     _initialize() {
         this.name = Utils.getNextId('panel_');
         this.elementPanel = document.createElement('div');

package/src/SplitterPanel.ts

@@ -188,9 +188,9 @@ export class SplitterPanel {
             totalChildPanelSize += size;
         });
 
+        const barRect = this.spiltterBars[0].barElement.getBoundingClientRect();
         // Get the thickness of the bar
-        let barSize = this.stackedVertical ?
-            this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let barSize = this.stackedVertical ? barRect.height : barRect.width;
 
         // Find out how much space existing child containers will take after being resized (excluding the splitter bars)
         let targetTotalChildPanelSize = this.stackedVertical ? height : width;

package/src/webcomponent/DockSpawnTsWebcomponent.ts

@@ -9,7 +9,7 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
     public dockManager: DockManager;
     private slotId: number = 0;
     private windowResizedBound;
-    private slotElementMap: Map<HTMLSlotElement, HTMLElement>;
+    private slotElementMap: WeakMap<HTMLSlotElement, HTMLElement>;
     private observer: MutationObserver;
     private initialized = false;
     private elementContainerMap: Map<HTMLElement, PanelContainer> = new Map();
@@ -18,7 +18,7 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         super();
 
         this.windowResizedBound = this.windowResized.bind(this);
-        this.slotElementMap = new Map();
+        this.slotElementMap = new WeakMap();
     }
 
     private initDockspawn() {
@@ -45,6 +45,10 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
         this.dockManager.config.dialogRootElement = dockSpawnDiv;
     }
 
+    public getElementInSlot(slot: HTMLSlotElement): HTMLElement {
+        return this.slotElementMap.get(slot);
+    }
+
     private cssLoaded() {
         setTimeout(() => {
             this.dockManager.initialize();
@@ -54,7 +58,6 @@ export class DockSpawnTsWebcomponent extends HTMLElement {
                     let slot = dockNode.elementContent as any as HTMLSlotElement;
                     let element = this.slotElementMap.get(slot);
                     this.removeChild(element);
-                    this.slotElementMap.delete(slot);
                 }
             });