igniteui-dockmanager 1.7.0-beta.2 → 1.7.0-beta.3

package/CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes for each version of this project will be documented in this
 ### New features
 - Customizable floating pane header
 - Support for document-only content panes which can be docked only inside a document host
+- `allowEmpty` property for split and tab group panes which allows displaying empty areas
 
 ### Bug fixes
 - Docking indicators appear over the currently dragged floating pane
@@ -22,7 +23,7 @@ All notable changes for each version of this project will be documented in this
 ## 1.5.0
 
 ### New features
-- "allowMaximize" property per pane [#10](https://github.com/IgniteUI/igniteui-dockmanager/issues/10)
+- `allowMaximize` property per pane [#10](https://github.com/IgniteUI/igniteui-dockmanager/issues/10)
 
 ### Bug fixes
 - Unpinned pane is closing automatically upon clicking on its content [#11](https://github.com/IgniteUI/igniteui-dockmanager/issues/11)

package/dist/cjs/igc-button-component_20.cjs.entry.js

@@ -402,7 +402,21 @@ class IgcDockManagerService {
       const index = parent.panes.indexOf(pane);
       parent.panes.splice(index, 1);
       if (parent.panes.length === 0) {
-        this.removePane(parent);
+        if (parent.allowEmpty) {
+          const rootParent = this.getRootParent(pane);
+          if (this.isFloatingPane(rootParent)) {
+            this.removeFloatingPaneIfEmpty(rootParent);
+          }
+        }
+        else {
+          this.removePane(parent);
+        }
+      }
+      else if (parent.type === locale.IgcDockManagerPaneType.splitPane) {
+        const rootParent = this.getRootParent(parent);
+        if (this.isFloatingPane(rootParent)) {
+          this.removeFloatingPaneIfEmpty(parent);
+        }
       }
     }
     else if (parent.type === locale.IgcDockManagerPaneType.documentHost) {
@@ -410,6 +424,18 @@ class IgcDockManagerService {
       this.removePane(parent);
     }
   }
+  removeFloatingPaneIfEmpty(pane) {
+    const childPanes = this.getChildContentPanes(pane);
+    if (childPanes.length === 0) {
+      this.removePane(pane);
+    }
+  }
+  isFloatingPane(pane) {
+    if (!this.dockManager.layout.floatingPanes) {
+      return false;
+    }
+    return this.dockManager.layout.floatingPanes.indexOf(pane) > -1;
+  }
   addFloatingPane(content, location, width, height) {
     const floatingPane = {
       type: locale.IgcDockManagerPaneType.splitPane,
@@ -481,25 +507,36 @@ class IgcDockManagerService {
         docHost.rootPane;
     }
   }
-  dockToCenter(targetPane, draggedFloatingPane) {
-    let targetTabGroup;
+  dockToCenter(targetPane, draggedPane) {
+    let targetContainer;
     if (targetPane.type === locale.IgcDockManagerPaneType.tabGroupPane) {
-      targetTabGroup = targetPane;
+      targetContainer = targetPane;
     }
     else if (targetPane.type === locale.IgcDockManagerPaneType.contentPane) {
-      targetTabGroup = {
+      targetContainer = {
         type: locale.IgcDockManagerPaneType.tabGroupPane,
         size: targetPane.size,
         panes: [targetPane]
       };
       const targetParent = this.paneParentMap.get(targetPane);
       const index = targetParent.panes.indexOf(targetPane);
-      targetParent.panes[index] = targetTabGroup;
+      targetParent.panes[index] = targetContainer;
+    }
+    else if (targetPane.type === locale.IgcDockManagerPaneType.splitPane) {
+      targetContainer = targetPane;
+    }
+    else if (targetPane.type === locale.IgcDockManagerPaneType.documentHost) {
+      targetContainer = targetPane.rootPane;
+    }
+    if (targetContainer.type === locale.IgcDockManagerPaneType.tabGroupPane) {
+      const panesToDock = (draggedPane.type === locale.IgcDockManagerPaneType.contentPane) ?
+        [draggedPane] :
+        this.getChildContentPanes(draggedPane);
+      targetContainer.panes.push(...panesToDock);
+    }
+    else if (targetContainer.type === locale.IgcDockManagerPaneType.splitPane) {
+      targetContainer.panes.push(draggedPane);
     }
-    const panesToDock = (draggedFloatingPane.type === locale.IgcDockManagerPaneType.contentPane) ?
-      [draggedFloatingPane] :
-      this.getChildContentPanes(draggedFloatingPane);
-    targetTabGroup.panes.push(...panesToDock);
   }
   dockToEdge(targetPane, position) {
     const targetParent = this.getParent(targetPane);
@@ -583,6 +620,9 @@ class IgcDockManagerService {
   getParent(pane) {
     return this.paneParentMap.get(pane);
   }
+  getRootParent(pane) {
+    return this.getPanePath(pane)[0];
+  }
   getPanePath(pane) {
     const path = [];
     let currentPane = pane;
@@ -594,13 +634,10 @@ class IgcDockManagerService {
   }
   getDocHostParent(pane) {
     let parent = pane;
-    while (parent) {
-      if (parent.type === locale.IgcDockManagerPaneType.documentHost) {
-        return parent;
-      }
+    do {
       parent = this.paneParentMap.get(parent);
-    }
-    return null;
+    } while (parent && parent.type !== locale.IgcDockManagerPaneType.documentHost);
+    return parent;
   }
   resizeFlyoutPane(delta) {
     const pane = this.dockManager.flyoutPane;
@@ -828,13 +865,28 @@ class IgcDockManagerService {
     });
   }
   floatPane(pane, x, y, width, height) {
-    let paneToMove;
+    let panesToRemove = [pane];
+    let paneToAdd = pane;
     const parent = this.paneParentMap.get(pane);
-    paneToMove = (pane !== this.dockManager.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) ?
-      parent :
-      pane;
-    this.removePane(paneToMove);
-    this.addFloatingPane(paneToMove, { x, y }, width, height);
+    if (pane !== this.dockManager.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) {
+      if (parent.allowEmpty) {
+        const panes = [...parent.panes];
+        panesToRemove = panes;
+        paneToAdd = parent.panes.length === 1 ?
+          pane :
+          {
+            type: locale.IgcDockManagerPaneType.tabGroupPane,
+            panes,
+            selectedIndex: parent.selectedIndex
+          };
+      }
+      else {
+        panesToRemove = [parent];
+        paneToAdd = parent;
+      }
+    }
+    panesToRemove.forEach(p => this.removePane(p));
+    this.addFloatingPane(paneToAdd, { x, y }, width, height);
     if (pane === this.dockManager.flyoutPane) {
       pane.isPinned = true;
       this.dockManager.flyoutPane = null;
@@ -946,13 +998,13 @@ class IgcDockManagerService {
         return this.isContentPaneVisible(p);
       }
       else if (p.type === locale.IgcDockManagerPaneType.splitPane) {
-        return this.getSplitPaneVisibleChildren(p).length;
+        return p.allowEmpty || this.getSplitPaneVisibleChildren(p).length;
       }
       else if (p.type === locale.IgcDockManagerPaneType.tabGroupPane) {
-        return p.panes.some(cp => this.isContentPaneVisible(cp));
+        return p.allowEmpty || p.panes.some(cp => this.isContentPaneVisible(cp));
       }
       else if (p.type === locale.IgcDockManagerPaneType.documentHost) {
-        return this.getSplitPaneVisibleChildren(p.rootPane).length;
+        return p.rootPane.allowEmpty || this.getSplitPaneVisibleChildren(p.rootPane).length;
       }
     });
   }
@@ -1326,6 +1378,13 @@ class IgcDockManagerService {
     const draggedPaneSize = (_a = this.getPaneToDock(this.dockManager.draggedPane).size) !== null && _a !== void 0 ? _a : IGC_DEFAULT_PANE_SIZE;
     const isOuter = Utils.isDockingIndicatorOuter(this.dockingIndicator.position);
     const baseRect = isOuter ? parentRect : dropTargetPaneInfo.targetRect;
+    if (this.dockingIndicator.position === locale.IgcDockingIndicatorPosition.center) {
+      shadowRect.x = baseRect.x;
+      shadowRect.y = baseRect.y;
+      shadowRect.width = baseRect.width;
+      shadowRect.height = baseRect.height;
+      return shadowRect;
+    }
     const targetPane = isOuter ? dropTargetPaneInfo.docHost : dropTargetPaneInfo.pane;
     const targetParent = this.getParent(targetPane);
     const panes = this.getSplitPaneVisibleChildren(targetParent);
@@ -1341,12 +1400,6 @@ class IgcDockManagerService {
     const beforePanesTotalSize = panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
     const afterPanesTotalSize = panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
     switch (this.dockingIndicator.position) {
-      case locale.IgcDockingIndicatorPosition.center:
-        shadowRect.x = baseRect.x;
-        shadowRect.y = baseRect.y;
-        shadowRect.width = baseRect.width;
-        shadowRect.height = baseRect.height;
-        break;
       case locale.IgcDockingIndicatorPosition.left:
       case locale.IgcDockingIndicatorPosition.outerLeft:
         shadowRect.x = baseRect.x;
@@ -2092,15 +2145,13 @@ let IgcDockManager = class {
     let paneElement;
     for (const element of elements) {
       const tagName = element.tagName.toLowerCase();
-      if (tagName === 'igc-content-pane-component') {
+      if (tagName === 'igc-content-pane-component' || tagName === 'igc-split-pane-component') {
         if (paneElement) {
           break;
         }
-        else {
-          paneElement = element;
-        }
+        paneElement = element;
       }
-      else if (tagName === 'igc-tabs-component') {
+      else if (tagName === 'igc-tabs-component' || tagName === 'igc-document-host-component') {
         paneElement = element;
         break;
       }
@@ -2112,10 +2163,13 @@ let IgcDockManager = class {
       const dropPane = this.panesElementMap.getByValue(paneElement);
       if ((!this.dropTargetPaneInfo || this.dropTargetPaneInfo.pane !== dropPane) && dropPane !== this.draggedPane) {
         const docHost = this.service.getDocHostParent(dropPane);
-        const dropPaneRoot = this.service.getPanePath(dropPane)[0];
+        const dropPaneRoot = this.service.getRootParent(dropPane);
         const floatingPaneWithoutDocHost = this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
           !this.service.getChildDocHostRecursive(dropPaneRoot);
-        if (!this.documentOnlyDrag || docHost || floatingPaneWithoutDocHost) {
+        if (!this.documentOnlyDrag
+          || docHost
+          || floatingPaneWithoutDocHost
+          || dropPane.type === locale.IgcDockManagerPaneType.documentHost) {
           this.dropTargetPaneInfo = {
             pane: dropPane,
             targetRect: paneElement.getBoundingClientRect(),
@@ -2123,6 +2177,9 @@ let IgcDockManager = class {
             floatingPaneWithoutDocHost
           };
         }
+        else {
+          this.dropTargetPaneInfo = null;
+        }
       }
     }
     else {
@@ -2258,7 +2315,7 @@ let IgcDockManager = class {
     let isSingleFloatingContentPane = false;
     let floatingPane;
     if (isFloating) {
-      floatingPane = this.service.getPanePath(pane)[0];
+      floatingPane = this.service.getRootParent(pane);
       const hasHeader = this.service.hasFloatingPaneHeader(floatingPane);
       if (!hasHeader) {
         isSingleFloatingContentPane = true;
@@ -2286,7 +2343,11 @@ let IgcDockManager = class {
     return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
   }
   renderDocumentHost(docHost) {
-    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size }, this.renderSplitPane(docHost.rootPane, false, true)));
+    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
+        if (el) {
+          this.panesElementMap.set(docHost, el);
+        }
+      } }, this.renderSplitPane(docHost.rootPane, false, true)));
   }
   renderTabGroup(pane, isFloating, isInDocumentHost) {
     let tabs = pane.type === locale.IgcDockManagerPaneType.tabGroupPane ? pane.panes : [pane];
@@ -2295,8 +2356,9 @@ let IgcDockManager = class {
       pane.selectedIndex : 0;
     const position = isInDocumentHost ? IgcTabHeadersPosition.top : IgcTabHeadersPosition.bottom;
     const isSingleTab = tabs.length === 1 && position === IgcTabHeadersPosition.bottom;
+    const allowEmpty = pane.type === locale.IgcDockManagerPaneType.tabGroupPane ? pane.allowEmpty : false;
     const allowMaximize = this.resolveAllowMaximize(pane);
-    return tabs.length > 0 && (index.h("igc-tabs-component", { key: pane.id, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
+    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
         if (el) {
           this.panesElementMap.set(pane, el);
         }
@@ -2340,7 +2402,7 @@ let IgcDockManager = class {
   }
   renderSplitPane(splitPane, isFloating, isInDocumentHost) {
     const panes = this.service.getSplitPaneVisibleChildren(splitPane);
-    return panes.length > 0 && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, ref: el => {
+    return (splitPane.allowEmpty || panes.length > 0) && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, ref: el => {
         if (el) {
           this.panesElementMap.set(splitPane, el);
         }
@@ -2419,7 +2481,7 @@ let IgcDockManager = class {
         this.service.forceDragPane = null;
         forceDrag = true;
       }
-      const containsMaximizedPane = this.maximizedPane && this.service.getPanePath(this.maximizedPane)[0] === p;
+      const containsMaximizedPane = this.maximizedPane && this.service.getRootParent(this.maximizedPane) === p;
       return (index.h("igc-floating-pane-component", { key: p.id, style: { zIndex: this.floatingPaneZIndicesMap.get(p).toString() }, floatingLocation: p.floatingLocation ? p.floatingLocation : { x: 0, y: 0 }, floatingWidth: p.floatingWidth ? p.floatingWidth : IGC_DEFAULT_PANE_SIZE, floatingHeight: p.floatingHeight ? p.floatingHeight : IGC_DEFAULT_PANE_SIZE, hasHeader: hasHeader, onWndResizeStart: this.handleFloatingPaneResizeStart.bind(this, p), onWndResizeMove: this.handleFloatingPaneResizeMove.bind(this, p), onWndResizeEnd: this.handleFloatingPaneResizeEnd.bind(this, p), onMouseDown: this.handleFloatingPaneMouseDown.bind(this, p), class: {
           'maximized': this.maximizedPane === p
         }, maximized: this.maximizedPane === p || containsMaximizedPane, allowResize: (_a = p.floatingResizable) !== null && _a !== void 0 ? _a : this.allowFloatingPanesResize }, hasHeader ?
@@ -2760,10 +2822,18 @@ let IgcJoystickIndicatorComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
+  isEmptyCenter(position) {
+    return this.documentOnlyDrag
+      && position === locale.IgcDockingIndicatorPosition.center
+      && this.dropTargetPaneInfo.floatingPaneWithoutDocHost;
+  }
+  isEmptyEdge(position) {
+    return this.documentOnlyDrag
+      && position !== locale.IgcDockingIndicatorPosition.center
+      && this.dropTargetPaneInfo.pane.type === locale.IgcDockManagerPaneType.documentHost;
+  }
   renderIndicator(position) {
-    return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.documentOnlyDrag &&
-        position === locale.IgcDockingIndicatorPosition.center &&
-        this.dropTargetPaneInfo.floatingPaneWithoutDocHost }));
+    return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.isEmptyCenter(position) || this.isEmptyEdge(position) }));
   }
   render() {
     this.isDocHost = !!this.dropTargetPaneInfo.docHost;
@@ -3435,7 +3505,7 @@ let IgcTabHeaderComponent = class {
 };
 IgcTabHeaderComponent.style = tabHeaderComponentCss;
 
-const tabPanelComponentCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;-ms-flex-positive:1;flex-grow:1;height:100%}";
+const tabPanelComponentCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;-ms-flex-positive:1;flex-grow:1;height:100%;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background-color:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7))}";
 
 let IgcTabPanelComponent = class {
   constructor(hostRef) {
@@ -3465,7 +3535,7 @@ let IgcTabPanelComponent = class {
 };
 IgcTabPanelComponent.style = tabPanelComponentCss;
 
-const tabsComponentCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0px;min-height:0px}.tabs{display:-ms-flexbox;display:flex;overflow:hidden;min-height:32px;max-height:32px;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9))}.tabs--top{padding-top:8px}.tabs--top .tab-headers-container--wrapped{-ms-flex-wrap:wrap;flex-wrap:wrap}.tabs--bottom{padding-bottom:8px}.tabs--bottom .tab-headers-container--wrapped{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.content{-ms-flex-positive:1;flex-grow:1;height:100%;overflow:auto;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background-color:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7))}.tab-headers-container{width:100%;display:-ms-flexbox;display:flex;overflow:hidden}.tab-header-icon-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;padding-left:8px;padding-right:8px}";
+const tabsComponentCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0px;min-height:0px}.tabs{display:-ms-flexbox;display:flex;overflow:hidden;min-height:32px;max-height:32px;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9))}.tabs--top{padding-top:8px}.tabs--top .tab-headers-container--wrapped{-ms-flex-wrap:wrap;flex-wrap:wrap}.tabs--bottom{padding-bottom:8px}.tabs--bottom .tab-headers-container--wrapped{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.content{-ms-flex-positive:1;flex-grow:1;height:100%;overflow:auto}.tab-headers-container{width:100%;display:-ms-flexbox;display:flex;overflow:hidden}.tab-header-icon-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;padding-left:8px;padding-right:8px}";
 
 /**
  * @hidden
@@ -3483,7 +3553,7 @@ let IgcTabsComponent = class {
     this.hasHeaders = true;
     this.showHiddenTabsMenu = true;
     this.resizeObserver = new ResizeObserver(this.tabHeadersDivResized.bind(this));
-    this.headerSlotChanged = () => {
+    this.slotChanged = () => {
       this.updateSelectedIndex();
       this.setTabsAttributes();
       this.forceUpdate();
@@ -3516,10 +3586,6 @@ let IgcTabsComponent = class {
     this.updateSelectedIndex();
   }
   componentDidLoad() {
-    this.headerSlot = this.el.shadowRoot.querySelector('slot[name="tabHeader"]');
-    if (this.headerSlot) {
-      this.headerSlot.addEventListener('slotchange', this.headerSlotChanged);
-    }
     this.setTabsAttributes();
     this.tabHeadersDiv = this.el.shadowRoot.querySelector('div.tabs');
     if (this.tabHeadersDiv) {
@@ -3547,9 +3613,6 @@ let IgcTabsComponent = class {
     }
   }
   disconnectedCallback() {
-    if (this.headerSlot) {
-      this.headerSlot.removeEventListener('slotchange', this.headerSlotChanged);
-    }
     this.resizeObserver.disconnect();
   }
   forceUpdate() {
@@ -3662,7 +3725,7 @@ let IgcTabsComponent = class {
     }, ',');
     return (index.h(index.Host, { role: "tablist", style: {
         flex: `${size} 1 ${size}px`
-      }, exportparts: exportParts }, top && this.renderTabHeaders(top), index.h("div", { part: tabsContentParts, class: "content" }, index.h("slot", null)), bottom && this.renderTabHeaders(top), this.renderHiddenTabsMenu()));
+      }, exportparts: exportParts }, top && this.renderTabHeaders(top), index.h("div", { part: tabsContentParts, class: "content" }, index.h("slot", { onSlotchange: this.slotChanged })), bottom && this.renderTabHeaders(top), this.renderHiddenTabsMenu()));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -3734,6 +3797,7 @@ let SampleComponent = class {
                 rootPane: {
                   type: locale.IgcDockManagerPaneType.splitPane,
                   orientation: locale.IgcSplitPaneOrientation.horizontal,
+                  allowEmpty: true,
                   panes: [
                     {
                       type: locale.IgcDockManagerPaneType.tabGroupPane,
@@ -3763,6 +3827,12 @@ let SampleComponent = class {
                   ]
                 }
               },
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                allowEmpty: true,
+                panes: []
+              },
               {
                 type: locale.IgcDockManagerPaneType.contentPane,
                 header: 'Error List',
@@ -3780,6 +3850,7 @@ let SampleComponent = class {
               {
                 type: locale.IgcDockManagerPaneType.tabGroupPane,
                 size: 200,
+                allowEmpty: true,
                 panes: [
                   {
                     type: locale.IgcDockManagerPaneType.contentPane,
@@ -3824,6 +3895,7 @@ let SampleComponent = class {
         },
         {
           type: locale.IgcDockManagerPaneType.splitPane,
+          allowEmpty: true,
           orientation: locale.IgcSplitPaneOrientation.horizontal,
           floatingLocation: { x: 250, y: 350 },
           floatingWidth: 300,
@@ -3851,6 +3923,7 @@ let SampleComponent = class {
           panes: [
             {
               type: locale.IgcDockManagerPaneType.tabGroupPane,
+              allowEmpty: true,
               panes: [
                 {
                   type: locale.IgcDockManagerPaneType.contentPane,

package/dist/collection/components/dockmanager/docking/joystick-indicator-component.js

@@ -1,13 +1,21 @@
 import { Component, Host, Prop, h } from '@stencil/core';
-import { IgcDockingIndicatorPosition } from '../dockmanager.public-interfaces';
+import { IgcDockManagerPaneType, IgcDockingIndicatorPosition } from '../dockmanager.public-interfaces';
 /**
  * @hidden
  */
 export class IgcJoystickIndicatorComponent {
+  isEmptyCenter(position) {
+    return this.documentOnlyDrag
+      && position === IgcDockingIndicatorPosition.center
+      && this.dropTargetPaneInfo.floatingPaneWithoutDocHost;
+  }
+  isEmptyEdge(position) {
+    return this.documentOnlyDrag
+      && position !== IgcDockingIndicatorPosition.center
+      && this.dropTargetPaneInfo.pane.type === IgcDockManagerPaneType.documentHost;
+  }
   renderIndicator(position) {
-    return (h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.documentOnlyDrag &&
-        position === IgcDockingIndicatorPosition.center &&
-        this.dropTargetPaneInfo.floatingPaneWithoutDocHost }));
+    return (h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.isEmptyCenter(position) || this.isEmptyEdge(position) }));
   }
   render() {
     this.isDocHost = !!this.dropTargetPaneInfo.docHost;

package/dist/collection/components/dockmanager/dockmanager-component.js

@@ -444,15 +444,13 @@ export class IgcDockManager {
     let paneElement;
     for (const element of elements) {
       const tagName = element.tagName.toLowerCase();
-      if (tagName === 'igc-content-pane-component') {
+      if (tagName === 'igc-content-pane-component' || tagName === 'igc-split-pane-component') {
         if (paneElement) {
           break;
         }
-        else {
-          paneElement = element;
-        }
+        paneElement = element;
       }
-      else if (tagName === 'igc-tabs-component') {
+      else if (tagName === 'igc-tabs-component' || tagName === 'igc-document-host-component') {
         paneElement = element;
         break;
       }
@@ -464,10 +462,13 @@ export class IgcDockManager {
       const dropPane = this.panesElementMap.getByValue(paneElement);
       if ((!this.dropTargetPaneInfo || this.dropTargetPaneInfo.pane !== dropPane) && dropPane !== this.draggedPane) {
         const docHost = this.service.getDocHostParent(dropPane);
-        const dropPaneRoot = this.service.getPanePath(dropPane)[0];
+        const dropPaneRoot = this.service.getRootParent(dropPane);
         const floatingPaneWithoutDocHost = this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
           !this.service.getChildDocHostRecursive(dropPaneRoot);
-        if (!this.documentOnlyDrag || docHost || floatingPaneWithoutDocHost) {
+        if (!this.documentOnlyDrag
+          || docHost
+          || floatingPaneWithoutDocHost
+          || dropPane.type === IgcDockManagerPaneType.documentHost) {
           this.dropTargetPaneInfo = {
             pane: dropPane,
             targetRect: paneElement.getBoundingClientRect(),
@@ -475,6 +476,9 @@ export class IgcDockManager {
             floatingPaneWithoutDocHost
           };
         }
+        else {
+          this.dropTargetPaneInfo = null;
+        }
       }
     }
     else {
@@ -610,7 +614,7 @@ export class IgcDockManager {
     let isSingleFloatingContentPane = false;
     let floatingPane;
     if (isFloating) {
-      floatingPane = this.service.getPanePath(pane)[0];
+      floatingPane = this.service.getRootParent(pane);
       const hasHeader = this.service.hasFloatingPaneHeader(floatingPane);
       if (!hasHeader) {
         isSingleFloatingContentPane = true;
@@ -641,7 +645,11 @@ export class IgcDockManager {
     return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
   }
   renderDocumentHost(docHost) {
-    return (h("igc-document-host-component", { key: docHost.id, size: docHost.size }, this.renderSplitPane(docHost.rootPane, false, true)));
+    return (h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
+        if (el) {
+          this.panesElementMap.set(docHost, el);
+        }
+      } }, this.renderSplitPane(docHost.rootPane, false, true)));
   }
   renderTabGroup(pane, isFloating, isInDocumentHost) {
     let tabs = pane.type === IgcDockManagerPaneType.tabGroupPane ? pane.panes : [pane];
@@ -650,8 +658,9 @@ export class IgcDockManager {
       pane.selectedIndex : 0;
     const position = isInDocumentHost ? IgcTabHeadersPosition.top : IgcTabHeadersPosition.bottom;
     const isSingleTab = tabs.length === 1 && position === IgcTabHeadersPosition.bottom;
+    const allowEmpty = pane.type === IgcDockManagerPaneType.tabGroupPane ? pane.allowEmpty : false;
     const allowMaximize = this.resolveAllowMaximize(pane);
-    return tabs.length > 0 && (h("igc-tabs-component", { key: pane.id, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
+    return (allowEmpty || tabs.length > 0) && (h("igc-tabs-component", { key: pane.id, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
         if (el) {
           this.panesElementMap.set(pane, el);
         }
@@ -698,7 +707,7 @@ export class IgcDockManager {
   }
   renderSplitPane(splitPane, isFloating, isInDocumentHost) {
     const panes = this.service.getSplitPaneVisibleChildren(splitPane);
-    return panes.length > 0 && (h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, ref: el => {
+    return (splitPane.allowEmpty || panes.length > 0) && (h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, ref: el => {
         if (el) {
           this.panesElementMap.set(splitPane, el);
         }
@@ -779,7 +788,7 @@ export class IgcDockManager {
         this.service.forceDragPane = null;
         forceDrag = true;
       }
-      const containsMaximizedPane = this.maximizedPane && this.service.getPanePath(this.maximizedPane)[0] === p;
+      const containsMaximizedPane = this.maximizedPane && this.service.getRootParent(this.maximizedPane) === p;
       return (h("igc-floating-pane-component", { key: p.id, style: { zIndex: this.floatingPaneZIndicesMap.get(p).toString() }, floatingLocation: p.floatingLocation ? p.floatingLocation : { x: 0, y: 0 }, floatingWidth: p.floatingWidth ? p.floatingWidth : IGC_DEFAULT_PANE_SIZE, floatingHeight: p.floatingHeight ? p.floatingHeight : IGC_DEFAULT_PANE_SIZE, hasHeader: hasHeader, onWndResizeStart: this.handleFloatingPaneResizeStart.bind(this, p), onWndResizeMove: this.handleFloatingPaneResizeMove.bind(this, p), onWndResizeEnd: this.handleFloatingPaneResizeEnd.bind(this, p), onMouseDown: this.handleFloatingPaneMouseDown.bind(this, p), class: {
           'maximized': this.maximizedPane === p
         }, maximized: this.maximizedPane === p || containsMaximizedPane, allowResize: (_a = p.floatingResizable) !== null && _a !== void 0 ? _a : this.allowFloatingPanesResize },