dockview-core 4.2.1 → 4.2.4

package/dist/esm/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/esm/dockview/components/popupService.js

@@ -1,3 +1,4 @@
+import { shiftAbsoluteElementIntoView } from '../../dom';
 import { addDisposableListener } from '../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../lifecycle';
 export class PopupService extends CompositeDisposable {
@@ -15,10 +16,11 @@ export class PopupService extends CompositeDisposable {
         }), 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;
@@ -42,6 +44,9 @@ export class PopupService extends CompositeDisposable {
             }
             this.close();
         }));
+        requestAnimationFrame(() => {
+            shiftAbsoluteElementIntoView(wrapper, this.root);
+        });
     }
     close() {
         if (this._active) {

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

@@ -1,7 +1,7 @@
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { addDisposableListener, Emitter } from '../../../events';
 import { VoidContainer } from './voidContainer';
-import { toggleClass } from '../../../dom';
+import { findRelativeZIndexParent, toggleClass } from '../../../dom';
 import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Tabs } from './tabs';
@@ -210,7 +210,7 @@ export class TabsContainer extends CompositeDisposable {
                 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();
@@ -218,9 +218,13 @@ export class TabsContainer extends CompositeDisposable {
                 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,
             });
         }));
     }

package/dist/esm/dockview/dockviewComponent.js

@@ -1476,24 +1476,26 @@ export class DockviewComponent extends BaseGrid {
                     selectedPopoutGroup.disposable.dispose();
                 }
             }
-            const referenceLocation = getGridLocation(to.element);
-            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-            let size;
-            switch (this.gridview.orientation) {
-                case Orientation.VERTICAL:
-                    size =
-                        referenceLocation.length % 2 == 0
-                            ? from.api.width
-                            : from.api.height;
-                    break;
-                case 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 Orientation.VERTICAL:
+                        size =
+                            referenceLocation.length % 2 == 0
+                                ? from.api.width
+                                : from.api.height;
+                        break;
+                    case 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 });

package/dist/esm/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/esm/dom.js

@@ -314,3 +314,41 @@ export function onDidWindowResizeEnd(element, cb) {
     }));
     return disposable;
 }
+export function shiftAbsoluteElementIntoView(element, root, options = { buffer: 10 }) {
+    const buffer = options.buffer;
+    const rect = element.getBoundingClientRect();
+    const rootRect = element.getBoundingClientRect();
+    const viewportWidth = root.clientWidth;
+    const viewportHeight = root.clientHeight;
+    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 > viewportWidth - buffer) {
+        translateX = viewportWidth - right - buffer;
+    }
+    // Check vertical overflow
+    if (top < buffer) {
+        translateY = buffer - top;
+    }
+    else if (bottom > viewportHeight - buffer) {
+        translateY = viewportHeight - bottom - buffer;
+    }
+    // Apply the translation if needed
+    if (translateX !== 0 || translateY !== 0) {
+        element.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    }
+}
+export function findRelativeZIndexParent(el) {
+    let tmp = el;
+    while (tmp && (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')) {
+        tmp = tmp.parentElement;
+    }
+    return tmp;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",