dockview-core 4.2.3 → 4.2.5

package/dist/cjs/dnd/ghost.js

@@ -6,6 +6,8 @@ function addGhostImage(dataTransfer, ghostElement, options) {
     var _a, _b;
     // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
     (0, dom_1.addClasses)(ghostElement, 'dv-dragged');
+    // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
+    ghostElement.style.top = '-9999px';
     document.body.appendChild(ghostElement);
     dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
     setTimeout(function () {

package/dist/cjs/dockview/components/popupService.d.ts

@@ -8,6 +8,7 @@ export declare class PopupService extends CompositeDisposable {
     openPopover(element: HTMLElement, position: {
         x: number;
         y: number;
+        zIndex?: string;
     }): void;
     close(): void;
 }

package/dist/cjs/dockview/components/popupService.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupService = void 0;
+var dom_1 = require("../../dom");
 var events_1 = require("../../events");
 var lifecycle_1 = require("../../lifecycle");
 var PopupService = /** @class */ (function (_super) {
@@ -36,10 +37,11 @@ var PopupService = /** @class */ (function (_super) {
     }
     PopupService.prototype.openPopover = function (element, position) {
         var _this = this;
+        var _a;
         this.close();
         var wrapper = document.createElement('div');
         wrapper.style.position = 'absolute';
-        wrapper.style.zIndex = '99';
+        wrapper.style.zIndex = (_a = position.zIndex) !== null && _a !== void 0 ? _a : 'var(--dv-overlay-z-index)';
         wrapper.appendChild(element);
         var anchorBox = this._element.getBoundingClientRect();
         var offsetX = anchorBox.left;
@@ -63,6 +65,9 @@ var PopupService = /** @class */ (function (_super) {
             }
             _this.close();
         }));
+        requestAnimationFrame(function () {
+            (0, dom_1.shiftAbsoluteElementIntoView)(wrapper, _this.root);
+        });
     };
     PopupService.prototype.close = function () {
         if (this._active) {

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -264,7 +264,7 @@ var TabsContainer = /** @class */ (function (_super) {
                 (0, dom_1.toggleClass)(wrapper, 'dv-tab', true);
                 (0, dom_1.toggleClass)(wrapper, 'dv-active-tab', panelObject.api.isActive);
                 (0, dom_1.toggleClass)(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
-                wrapper.addEventListener('mousedown', function () {
+                wrapper.addEventListener('pointerdown', function () {
                     _this.accessor.popupService.close();
                     tab.element.scrollIntoView();
                     tab.panel.api.setActive();
@@ -287,9 +287,13 @@ var TabsContainer = /** @class */ (function (_super) {
                 }
                 finally { if (e_1) throw e_1.error; }
             }
+            var relativeParent = (0, dom_1.findRelativeZIndexParent)(root);
             _this.accessor.popupService.openPopover(el, {
                 x: event.clientX,
                 y: event.clientY,
+                zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
+                    ? "calc(".concat(relativeParent.style.zIndex, " * 2)")
+                    : undefined,
             });
         }));
     };

package/dist/cjs/dockview/dockviewComponent.js

@@ -1782,24 +1782,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                     selectedPopoutGroup.disposable.dispose();
                 }
             }
-            var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
-            var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-            var size = void 0;
-            switch (this.gridview.orientation) {
-                case splitview_1.Orientation.VERTICAL:
-                    size =
-                        referenceLocation.length % 2 == 0
-                            ? from.api.width
-                            : from.api.height;
-                    break;
-                case splitview_1.Orientation.HORIZONTAL:
-                    size =
-                        referenceLocation.length % 2 == 0
-                            ? from.api.height
-                            : from.api.width;
-                    break;
+            if (from.api.location.type !== 'popout') {
+                var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
+                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
+                var size = void 0;
+                switch (this.gridview.orientation) {
+                    case splitview_1.Orientation.VERTICAL:
+                        size =
+                            referenceLocation.length % 2 == 0
+                                ? from.api.width
+                                : from.api.height;
+                        break;
+                    case splitview_1.Orientation.HORIZONTAL:
+                        size =
+                            referenceLocation.length % 2 == 0
+                                ? from.api.height
+                                : from.api.width;
+                        break;
+                }
+                this.gridview.addView(from, size, dropLocation);
             }
-            this.gridview.addView(from, size, dropLocation);
         }
         from.panels.forEach(function (panel) {
             _this._onDidMovePanel.fire({ panel: panel, from: from });

package/dist/cjs/dom.d.ts

@@ -50,3 +50,7 @@ export declare class Classnames {
 export declare function isChildEntirelyVisibleWithinParent(child: HTMLElement, parent: HTMLElement): boolean;
 export declare function onDidWindowMoveEnd(window: Window): Emitter<void>;
 export declare function onDidWindowResizeEnd(element: Window, cb: () => void): CompositeDisposable;
+export declare function shiftAbsoluteElementIntoView(element: HTMLElement, root: HTMLElement, options?: {
+    buffer: number;
+}): void;
+export declare function findRelativeZIndexParent(el: HTMLElement): HTMLElement | null;

package/dist/cjs/dom.js

@@ -26,7 +26,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onDidWindowResizeEnd = exports.onDidWindowMoveEnd = exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
+exports.findRelativeZIndexParent = exports.shiftAbsoluteElementIntoView = exports.onDidWindowResizeEnd = exports.onDidWindowMoveEnd = exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 var OverflowObserver = /** @class */ (function (_super) {
@@ -478,3 +478,42 @@ function onDidWindowResizeEnd(element, cb) {
     return disposable;
 }
 exports.onDidWindowResizeEnd = onDidWindowResizeEnd;
+function shiftAbsoluteElementIntoView(element, root, options) {
+    if (options === void 0) { options = { buffer: 10 }; }
+    var buffer = options.buffer;
+    var rect = element.getBoundingClientRect();
+    var rootRect = root.getBoundingClientRect();
+    var translateX = 0;
+    var translateY = 0;
+    var left = rect.left - rootRect.left;
+    var top = rect.top - rootRect.top;
+    var bottom = rect.bottom - rootRect.bottom;
+    var right = rect.right - rootRect.right;
+    // Check horizontal overflow
+    if (left < buffer) {
+        translateX = buffer - left;
+    }
+    else if (right > buffer) {
+        translateX = -buffer - right;
+    }
+    // Check vertical overflow
+    if (top < buffer) {
+        translateY = buffer - top;
+    }
+    else if (bottom > buffer) {
+        translateY = -bottom - buffer;
+    }
+    // Apply the translation if needed
+    if (translateX !== 0 || translateY !== 0) {
+        element.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+    }
+}
+exports.shiftAbsoluteElementIntoView = shiftAbsoluteElementIntoView;
+function findRelativeZIndexParent(el) {
+    var tmp = el;
+    while (tmp && (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')) {
+        tmp = tmp.parentElement;
+    }
+    return tmp;
+}
+exports.findRelativeZIndexParent = findRelativeZIndexParent;

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 4.2.3
+ * @version 4.2.5
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -668,6 +668,42 @@ define(['exports'], (function (exports) { 'use strict';
       }));
       return disposable;
   }
+  function shiftAbsoluteElementIntoView(element, root, options = { buffer: 10 }) {
+      const buffer = options.buffer;
+      const rect = element.getBoundingClientRect();
+      const rootRect = root.getBoundingClientRect();
+      let translateX = 0;
+      let translateY = 0;
+      const left = rect.left - rootRect.left;
+      const top = rect.top - rootRect.top;
+      const bottom = rect.bottom - rootRect.bottom;
+      const right = rect.right - rootRect.right;
+      // Check horizontal overflow
+      if (left < buffer) {
+          translateX = buffer - left;
+      }
+      else if (right > buffer) {
+          translateX = -buffer - right;
+      }
+      // Check vertical overflow
+      if (top < buffer) {
+          translateY = buffer - top;
+      }
+      else if (bottom > buffer) {
+          translateY = -bottom - buffer;
+      }
+      // Apply the translation if needed
+      if (translateX !== 0 || translateY !== 0) {
+          element.style.transform = `translate(${translateX}px, ${translateY}px)`;
+      }
+  }
+  function findRelativeZIndexParent(el) {
+      let tmp = el;
+      while (tmp && (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')) {
+          tmp = tmp.parentElement;
+      }
+      return tmp;
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -4935,6 +4971,8 @@ define(['exports'], (function (exports) { 'use strict';
       var _a, _b;
       // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
       addClasses(ghostElement, 'dv-dragged');
+      // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
+      ghostElement.style.top = '-9999px';
       document.body.appendChild(ghostElement);
       dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
       setTimeout(() => {
@@ -5635,7 +5673,7 @@ define(['exports'], (function (exports) { 'use strict';
                   toggleClass(wrapper, 'dv-tab', true);
                   toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
                   toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
-                  wrapper.addEventListener('mousedown', () => {
+                  wrapper.addEventListener('pointerdown', () => {
                       this.accessor.popupService.close();
                       tab.element.scrollIntoView();
                       tab.panel.api.setActive();
@@ -5643,9 +5681,13 @@ define(['exports'], (function (exports) { 'use strict';
                   wrapper.appendChild(child);
                   el.appendChild(wrapper);
               }
+              const relativeParent = findRelativeZIndexParent(root);
               this.accessor.popupService.openPopover(el, {
                   x: event.clientX,
                   y: event.clientY,
+                  zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
+                      ? `calc(${relativeParent.style.zIndex} * 2)`
+                      : undefined,
               });
           }));
       }
@@ -8010,10 +8052,11 @@ define(['exports'], (function (exports) { 'use strict';
           }), this._activeDisposable);
       }
       openPopover(element, position) {
+          var _a;
           this.close();
           const wrapper = document.createElement('div');
           wrapper.style.position = 'absolute';
-          wrapper.style.zIndex = '99';
+          wrapper.style.zIndex = (_a = position.zIndex) !== null && _a !== void 0 ? _a : 'var(--dv-overlay-z-index)';
           wrapper.appendChild(element);
           const anchorBox = this._element.getBoundingClientRect();
           const offsetX = anchorBox.left;
@@ -8037,6 +8080,9 @@ define(['exports'], (function (exports) { 'use strict';
               }
               this.close();
           }));
+          requestAnimationFrame(() => {
+              shiftAbsoluteElementIntoView(wrapper, this.root);
+          });
       }
       close() {
           if (this._active) {
@@ -9570,24 +9616,26 @@ define(['exports'], (function (exports) { 'use strict';
                       selectedPopoutGroup.disposable.dispose();
                   }
               }
-              const referenceLocation = getGridLocation(to.element);
-              const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-              let size;
-              switch (this.gridview.orientation) {
-                  case exports.Orientation.VERTICAL:
-                      size =
-                          referenceLocation.length % 2 == 0
-                              ? from.api.width
-                              : from.api.height;
-                      break;
-                  case exports.Orientation.HORIZONTAL:
-                      size =
-                          referenceLocation.length % 2 == 0
-                              ? from.api.height
-                              : from.api.width;
-                      break;
+              if (from.api.location.type !== 'popout') {
+                  const referenceLocation = getGridLocation(to.element);
+                  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                  let size;
+                  switch (this.gridview.orientation) {
+                      case exports.Orientation.VERTICAL:
+                          size =
+                              referenceLocation.length % 2 == 0
+                                  ? from.api.width
+                                  : from.api.height;
+                          break;
+                      case exports.Orientation.HORIZONTAL:
+                          size =
+                              referenceLocation.length % 2 == 0
+                                  ? from.api.height
+                                  : from.api.width;
+                          break;
+                  }
+                  this.gridview.addView(from, size, dropLocation);
               }
-              this.gridview.addView(from, size, dropLocation);
           }
           from.panels.forEach((panel) => {
               this._onDidMovePanel.fire({ panel, from });