dockview-react 4.2.3 → 4.2.5

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.2.3
+ * @version 4.2.5
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -638,6 +638,42 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }));
         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) {
@@ -4905,6 +4941,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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(() => {
@@ -5605,7 +5643,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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();
@@ -5613,9 +5651,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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,
                 });
             }));
         }
@@ -7957,10 +7999,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), 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;
@@ -7984,6 +8027,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 this.close();
             }));
+            requestAnimationFrame(() => {
+                shiftAbsoluteElementIntoView(wrapper, this.root);
+            });
         }
         close() {
             if (this._active) {
@@ -9517,24 +9563,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         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 });