igniteui-dockmanager 1.16.2-beta.2 → 1.17.0-beta.0

package/custom-elements.json

@@ -511,6 +511,13 @@
                 "text": "boolean"
               }
             },
+            {
+              "kind": "field",
+              "name": "allowRootDock",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "kind": "field",
               "name": "useFixedSizeOnDock",
@@ -1453,6 +1460,24 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "autoScrollInterval",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "autoScrollDirection",
+              "type": {
+                "text": "{ x: number, y: number }"
+              },
+              "privacy": "private",
+              "default": "{ x: 0, y: 0 }"
+            },
             {
               "kind": "field",
               "name": "templatableComponents",
@@ -1664,6 +1689,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "allowRootDock",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "useFixedSizeOnDock",
@@ -2304,6 +2337,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleAutoScroll",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "clientX",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "clientY",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getInnerDropTargetParentRect",
@@ -3219,6 +3271,10 @@
               "name": "allow-splitter-dock",
               "fieldName": "allowSplitterDock"
             },
+            {
+              "name": "allow-root-dock",
+              "fieldName": "allowRootDock"
+            },
             {
               "name": "use-fixed-size-on-dock",
               "fieldName": "useFixedSizeOnDock",

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

@@ -705,7 +705,9 @@ class IgcDockManagerService {
     else if (useFixedSize === true && (((_b = this.draggedPaneParent) === null || _b === void 0 ? void 0 : _b.useFixedSize) !== true || ((_c = this.draggedPaneParent) === null || _c === void 0 ? void 0 : _c.orientation) !== orientation)) {
       const floatingPane = draggedPane;
       const floatingPaneSizeInPixels = isIndicatorVertical ? floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingHeight : floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingWidth;
-      paneToDock.size = floatingPaneSizeInPixels;
+      if (floatingPaneSizeInPixels) {
+        paneToDock.size = floatingPaneSizeInPixels;
+      }
     }
     let newSplitPane;
     var isDockingBefore = Utils.isDockingIndicatorBefore(position) && !isRTL || Utils.isDockingIndicatorBeforeRTL(position) && isRTL;
@@ -753,8 +755,17 @@ class IgcDockManagerService {
     }
   }
   dockToSplitter() {
+    var _a, _b, _c;
     const parent = this.getParent(this.splitterDockPane);
     const index = parent.panes.indexOf(this.splitterDockPane);
+    if (((_a = this.draggedPaneParent) === null || _a === void 0 ? void 0 : _a.useFixedSize) === true && parent.useFixedSize !== true) {
+      this.dockManager.draggedPane.size = IGC_DEFAULT_PANE_SIZE_IN_PIXELS;
+    }
+    else if (parent.useFixedSize === true && (((_b = this.draggedPaneParent) === null || _b === void 0 ? void 0 : _b.useFixedSize) !== true || ((_c = this.draggedPaneParent) === null || _c === void 0 ? void 0 : _c.orientation) !== parent.orientation)) {
+      const floatingPane = this.dockManager.draggedPane;
+      const floatingPaneSizeInPixels = parent.orientation === locale.IgcSplitPaneOrientation.vertical ? floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingHeight : floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingWidth;
+      this.dockManager.draggedPane.size = floatingPaneSizeInPixels;
+    }
     parent.panes.splice(index + 1, 0, this.dockManager.draggedPane);
   }
   shouldUseFixedSize(pane) {
@@ -1767,7 +1778,9 @@ class IgcDockManagerService {
     if (targetParent.useFixedSize === true && ((_b = this.draggedPaneParent) === null || _b === void 0 ? void 0 : _b.orientation) !== targetParent.orientation) {
       const floatingPane = this.dockManager.draggedPane;
       const floatingPaneSizeInPixels = targetParent.orientation === locale.IgcSplitPaneOrientation.horizontal ? floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingWidth : floatingPane === null || floatingPane === void 0 ? void 0 : floatingPane.floatingHeight;
-      draggedPaneSize = floatingPaneSizeInPixels;
+      if (floatingPaneSizeInPixels) {
+        draggedPaneSize = floatingPaneSizeInPixels;
+      }
     }
     draggedPaneSize = draggedPaneSize >= 0 ? draggedPaneSize : IGC_DEFAULT_PANE_SIZE;
     if (draggedPaneIndex > -1) {
@@ -2198,6 +2211,8 @@ const IgcDockManager = class {
     this.proximityDockThreshold = 50;
     this.proximityOuterDockThreshold = 25;
     this.anyPaneIgnoringResizeConstraints = false;
+    this.autoScrollInterval = null;
+    this.autoScrollDirection = { x: 0, y: 0 };
     this.templatableComponents = [
       {
         slot: 'paneHeaderCloseButton',
@@ -2358,6 +2373,7 @@ const IgcDockManager = class {
     this.closeBehavior = locale.IgcPaneActionBehavior.allPanes;
     this.unpinBehavior = locale.IgcPaneActionBehavior.allPanes;
     this.allowSplitterDock = false;
+    this.allowRootDock = true;
     this.useFixedSizeOnDock = 'none';
     this.layout = undefined;
     this.draggedPane = undefined;
@@ -2947,6 +2963,7 @@ const IgcDockManager = class {
     this.paneDragMoved(event.detail.clientX, event.detail.clientY, event);
   }
   paneDragMoved(clientX, clientY, event) {
+    this.handleAutoScroll(clientX, clientY);
     this.handleDropPositionChange(clientX, clientY, event === null || event === void 0 ? void 0 : event.target);
     const x = event === null || event === void 0 ? void 0 : event.detail.clientX;
     const y = event === null || event === void 0 ? void 0 : event.detail.clientY;
@@ -2976,6 +2993,48 @@ const IgcDockManager = class {
       }
     }
   }
+  handleAutoScroll(clientX, clientY) {
+    const SCROLL_ZONE = 50; // px from edge to start scrolling
+    const SCROLL_SPEED = 30; // px per interval
+    const rootSplitPane = this.dockedPanesContainer.children[0];
+    if (!rootSplitPane)
+      return;
+    const rect = rootSplitPane.getBoundingClientRect();
+    let x = 0, y = 0;
+    if (clientX - rect.left < SCROLL_ZONE) {
+      x = -SCROLL_SPEED;
+    }
+    else if (rect.right - clientX < SCROLL_ZONE) {
+      x = SCROLL_SPEED;
+    }
+    if (clientY - rect.top < SCROLL_ZONE) {
+      y = -SCROLL_SPEED;
+    }
+    else if (rect.bottom - clientY < SCROLL_ZONE) {
+      y = SCROLL_SPEED;
+    }
+    // If direction changed or started, set interval
+    if ((x !== this.autoScrollDirection.x || y !== this.autoScrollDirection.y) || (x !== 0 || y !== 0 && !this.autoScrollInterval)) {
+      this.autoScrollDirection = { x, y };
+      if (this.autoScrollInterval) {
+        clearInterval(this.autoScrollInterval);
+        this.autoScrollInterval = null;
+      }
+      if (x !== 0 || y !== 0) {
+        this.autoScrollInterval = window.setInterval(() => {
+          if (x !== 0)
+            rootSplitPane.scrollLeft += x;
+          if (y !== 0)
+            rootSplitPane.scrollTop += y;
+        }, 30);
+      }
+    }
+    // Stop scrolling if not near any edge
+    if (x === 0 && y === 0 && this.autoScrollInterval) {
+      clearInterval(this.autoScrollInterval);
+      this.autoScrollInterval = null;
+    }
+  }
   getInnerDropTargetParentRect() {
     if (this.dropTargetPaneInfo && this.service.proximityDockPosition) {
       const targetDocHostParent = this.service.getParent(this.dropTargetPaneInfo.docHost);
@@ -3076,6 +3135,11 @@ const IgcDockManager = class {
     return null;
   }
   handlePaneDragEnd() {
+    if (this.autoScrollInterval) {
+      clearInterval(this.autoScrollInterval);
+      this.autoScrollInterval = null;
+      this.autoScrollDirection = { x: 0, y: 0 };
+    }
     this.setSplitterDockingIndicatorVisibility('hidden');
     const docked = this.service.dragPaneEnd();
     this.isDragging = false;
@@ -3839,12 +3903,13 @@ const IgcDockManager = class {
         (((_b = this.dropTargetPaneInfo.pane) === null || _b === void 0 ? void 0 : _b.type) == "splitPane" && this.service.getSplitPaneVisibleChildren(this.dropTargetPaneInfo.pane).length));
     return (index.h("div", { class: "docking-indicators-container", style: {
         display: this.showDockingIndicators ? 'flex' : 'none'
-      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
-        flexGrow: '1',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between'
-      } }, !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(startPosition), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(endPosition)), !this.documentOnlyDrag && !this.proximityDock && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_c = this.splitterDockingIndicator) === null || _c === void 0 ? void 0 : _c.style.visibility) !== 'visible' &&
+      } }, this.allowRootDock && !this.documentOnlyDrag && !this.proximityDock &&
+      index.h(index.Fragment, null, this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
+          flexGrow: '1',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between'
+        } }, this.renderRootDockingIndicator(startPosition), this.renderRootDockingIndicator(endPosition)), this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom)), this.dropTargetPaneInfo && !this.proximityDock && !hideJoystickIndicator && ((_c = this.splitterDockingIndicator) === null || _c === void 0 ? void 0 : _c.style.visibility) !== 'visible' && !this.autoScrollInterval &&
       index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag, allowCenterDock: this.allowInnerDock }), this.allowSplitterDock && !this.proximityDock &&
       index.h("igc-splitter-docking-indicator-component", { style: {
           position: 'fixed',