igniteui-dockmanager 1.17.0-beta.0 → 1.17.0

package/custom-elements.json

@@ -525,6 +525,13 @@
                 "text": "'none' | 'vertical' | 'horizontal' | 'both'"
               }
             },
+            {
+              "kind": "field",
+              "name": "autoScrollConfig",
+              "type": {
+                "text": "{ edgeThreshold: number, scrollSpeed: number }"
+              }
+            },
             {
               "kind": "method",
               "name": "focusElement"
@@ -1460,15 +1467,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "autoScrollInterval",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "autoScrollDirection",
@@ -1515,6 +1513,15 @@
                 "text": "IgcContentPane"
               }
             },
+            {
+              "kind": "field",
+              "name": "autoScrollInterval",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "method",
               "name": "flyoutPaneChanged",
@@ -1761,6 +1768,15 @@
               },
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "autoScrollConfig",
+              "type": {
+                "text": "{ edgeThreshold: number, scrollSpeed: number }"
+              },
+              "default": "{ edgeThreshold: 20, scrollSpeed: 25 }",
+              "description": "Configuration for edge auto-scrolling behavior during drag operations.\r\n\r\n- `edgeThreshold`: Distance in pixels from the container's edge that triggers scrolling.\r\n- `scrollSpeed`: Number of pixels to scroll per interval (affects scroll rate)."
+            },
             {
               "kind": "method",
               "name": "activePaneChange",
@@ -3309,6 +3325,10 @@
               "type": {
                 "text": "IgcContentPane"
               }
+            },
+            {
+              "name": "auto-scroll-config",
+              "fieldName": "autoScrollConfig"
             }
           ],
           "tagName": "igc-dockmanager",
@@ -3689,6 +3709,24 @@
               },
               "description": "Determines whether the end user can dock the dragged pane directly in the parent split pane by dragging it over a splitter.\r\nIf enabled, a docking indicator will be shown over the splitter's drag handler. Defaults to false."
             },
+            {
+              "kind": "field",
+              "name": "allowRootDock",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether docking into the root-level pane is allowed.\r\n\r\nWhen set to true (default), panes can be docked directly into the root container. \r\nThis is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane.",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "autoScrollConfig",
+              "type": {
+                "text": "{ edgeThreshold: number, scrollSpeed: number }"
+              },
+              "description": "Configuration for edge auto-scrolling behavior during drag operations.\r\n\r\n- `edgeThreshold`: Distance in pixels from the container's edge that triggers scrolling.\r\n- `scrollSpeed`: Number of pixels to scroll per interval (affects scroll rate).",
+              "default": "{ edgeThreshold: 10, scrollSpeed: 25 }"
+            },
             {
               "kind": "method",
               "name": "dropPane",

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

@@ -764,7 +764,9 @@ class IgcDockManagerService {
     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;
+      if (floatingPaneSizeInPixels) {
+        this.dockManager.draggedPane.size = floatingPaneSizeInPixels;
+      }
     }
     parent.panes.splice(index + 1, 0, this.dockManager.draggedPane);
   }
@@ -2167,7 +2169,7 @@ class IgcDockManagerKeyboardService {
   }
 }
 
-const dockmanagerComponentCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;max-height:100vh;max-width:100vw;height:100%;width:100%}.pane-container--horizontal{overflow-x:auto}.pane-container--vertical{flex-direction:column;overflow-y:auto}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}::-webkit-scrollbar{height:var(--igc-sb-size, 12px);width:var(--igc-sb-size, 12px)}::-webkit-scrollbar-track{background:var(--igc-sb-track-bg-color, #e5e7e9)}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active{background:var(--igc-sb-track-bg-color-hover, #e5e7e9)}::-webkit-scrollbar-corner{background:var(--igc-sb-corner-bg, #e5e7e9);border:var(--igc-sb-corner-border-size, 0) solid var(--igc-sb-corner-border-color, transparent)}::-webkit-scrollbar-track-piece{border:var(--igc-sb-track-border-size, 0) solid var(--igc-sb-track-border-color, transparent)}::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment{display:none}::-webkit-scrollbar-thumb{min-height:var(--igc-sb-thumb-min-height, 32px);border-radius:var(--igc-sb-thumb-border-radius, 0);border:var(--igc-sb-thumb-border-size, 0) solid var(--igc-sb-thumb-border-color, transparent);background-clip:content-box;background-color:var(--igc-sb-thumb-bg-color, #d1d1d1)}::-webkit-scrollbar-thumb:hover{background-color:var(--igc-sb-thumb-bg-color-hover, #afafaf)}";
+const dockmanagerComponentCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;max-height:100vh;max-width:100vw;height:100%;width:100%}.pane-container--horizontal{overflow-x:auto}.pane-container--vertical{flex-direction:column;overflow-y:auto}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}::-webkit-scrollbar{height:var(--igc-sb-size, var(--sb-size, 12px));width:var(--igc-sb-size, var(--sb-size, 12px))}::-webkit-scrollbar-track{background:var(--igc-sb-track-bg-color, var(--sb-track-bg-color, #e5e7e9))}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active{background:var(--igc-sb-track-bg-color-hover, var(--sb-track-bg-color-hover, #e5e7e9))}::-webkit-scrollbar-corner{background:var(--igc-sb-corner-bg, var(--sb-corner-bg, #e5e7e9));border:var(--igc-sb-corner-border-size, var(--sb-corner-border-size, 0)) solid var(--igc-sb-corner-border-color, var(--sb-corner-border-color, transparent))}::-webkit-scrollbar-track-piece{border:var(--igc-sb-track-border-size, var(--sb-track-border-size, 0)) solid var(--igc-sb-track-border-color, var(--sb-track-border-color, transparent))}::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment{display:none}::-webkit-scrollbar-thumb{min-height:var(--igc-sb-thumb-min-height, var(--sb-thumb-min-height, 32px));border-radius:var(--igc-sb-thumb-border-radius, var(--sb-thumb-border-radius, 0));border:var(--igc-sb-thumb-border-size, var(--sb-thumb-border-size, 0)) solid var(--igc-sb-thumb-border-color, var(--sb-thumb-border-color, transparent));background-clip:content-box;background-color:var(--igc-sb-thumb-bg-color, var(--sb-thumb-bg-color, #d1d1d1))}::-webkit-scrollbar-thumb:hover{background-color:var(--igc-sb-thumb-bg-color-hover, var(--sb-thumb-bg-color-hover, #afafaf))}";
 
 var ActionReason;
 (function (ActionReason) {
@@ -2211,7 +2213,6 @@ const IgcDockManager = class {
     this.proximityDockThreshold = 50;
     this.proximityOuterDockThreshold = 25;
     this.anyPaneIgnoringResizeConstraints = false;
-    this.autoScrollInterval = null;
     this.autoScrollDirection = { x: 0, y: 0 };
     this.templatableComponents = [
       {
@@ -2351,6 +2352,7 @@ const IgcDockManager = class {
     };
     this.dropTargetPaneInfo = undefined;
     this.flyoutPane = undefined;
+    this.autoScrollInterval = null;
     this.floatingPaneZIndicesMap = new Map();
     this.contextMenuMeta = undefined;
     this.dropShadowRect = undefined;
@@ -2379,6 +2381,10 @@ const IgcDockManager = class {
     this.draggedPane = undefined;
     this.dropPosition = undefined;
     this.activePane = null;
+    this.autoScrollConfig = {
+      edgeThreshold: 20,
+      scrollSpeed: 25
+    };
   }
   flyoutPaneChanged(newValue) {
     if (newValue) {
@@ -2963,7 +2969,8 @@ const IgcDockManager = class {
     this.paneDragMoved(event.detail.clientX, event.detail.clientY, event);
   }
   paneDragMoved(clientX, clientY, event) {
-    this.handleAutoScroll(clientX, clientY);
+    var _a;
+    ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.rootPane.useFixedSize) && 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;
@@ -2994,46 +3001,47 @@ const IgcDockManager = class {
     }
   }
   handleAutoScroll(clientX, clientY) {
-    const SCROLL_ZONE = 50; // px from edge to start scrolling
-    const SCROLL_SPEED = 30; // px per interval
+    const SCROLL_ZONE = this.autoScrollConfig.edgeThreshold; // px from edge to start scrolling
+    const SCROLL_SPEED = this.autoScrollConfig.scrollSpeed; // px per interval
     const rootSplitPane = this.dockedPanesContainer.children[0];
     if (!rootSplitPane)
       return;
     const rect = rootSplitPane.getBoundingClientRect();
-    let x = 0, y = 0;
+    let newX = 0, newY = 0; // Use newX, newY to distinguish from this.autoScrollDirection
     if (clientX - rect.left < SCROLL_ZONE) {
-      x = -SCROLL_SPEED;
+      newX = -SCROLL_SPEED;
     }
     else if (rect.right - clientX < SCROLL_ZONE) {
-      x = SCROLL_SPEED;
+      newX = SCROLL_SPEED;
     }
     if (clientY - rect.top < SCROLL_ZONE) {
-      y = -SCROLL_SPEED;
+      newY = -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 };
+      newY = SCROLL_SPEED;
+    }
+    // Condition to start or change scrolling direction
+    // Start/Change if:
+    // 1. The calculated new direction is different from the current active direction, OR
+    // 2. We've just entered a scroll zone (newX/newY is not 0) AND there's no active interval.
+    if ((newX !== this.autoScrollDirection.x || newY !== this.autoScrollDirection.y) ||
+      ((newX !== 0 || newY !== 0) && !this.autoScrollInterval)) {
+      this.autoScrollDirection = { x: newX, y: newY }; // Update the stored direction
+      // Always clear the existing interval if there is one, before setting a new one
       if (this.autoScrollInterval) {
         clearInterval(this.autoScrollInterval);
         this.autoScrollInterval = null;
       }
-      if (x !== 0 || y !== 0) {
+      // If we are currently in a scroll zone (newX or newY is not 0), start a new interval
+      if (newX !== 0 || newY !== 0) {
         this.autoScrollInterval = window.setInterval(() => {
-          if (x !== 0)
-            rootSplitPane.scrollLeft += x;
-          if (y !== 0)
-            rootSplitPane.scrollTop += y;
+          if (this.autoScrollDirection.x !== 0)
+            rootSplitPane.scrollLeft += this.autoScrollDirection.x;
+          if (this.autoScrollDirection.y !== 0)
+            rootSplitPane.scrollTop += this.autoScrollDirection.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) {
@@ -3361,6 +3369,15 @@ const IgcDockManager = class {
           this.dropTargetPaneInfo = null;
         }
       }
+      else if (this.dropTargetPaneInfo && this.dropTargetPaneInfo.pane === dropPane) {
+        // If the drop target pane is the same as the previous one, update the targetRect and visibleTargetRect
+        const paneRect = paneElement.getBoundingClientRect();
+        this.paneVisibleRect = new DOMRect(paneRect.x, paneRect.y, paneRect.width, paneRect.height);
+        this.paneVisibleRect = this.reduceRectBasedOnSplitters(this.paneVisibleRect, paneElement);
+        this.paneVisibleRect = this.reduceRectBasedOnDockManagerBorders(this.paneVisibleRect);
+        this.dropTargetPaneInfo.targetRect = paneRect;
+        this.dropTargetPaneInfo.visibleTargetRect = this.paneVisibleRect;
+      }
     }
     else {
       this.dropTargetPaneInfo = null;
@@ -4675,6 +4692,7 @@ const IgcPaneNavigatorComponent = class {
     this.navigateToIndex(newValue, 'previous');
   }
   connectedCallback() {
+    this.activePanes = this.activePanes.filter(pane => !(pane.contentId === 'placeholder' && pane.size === 0));
     this.allItems = [...this.activePanes, ...this.activeDocuments];
   }
   componentDidLoad() {