bug: render mode z-index fixes

packages/dockview-core/src/dnd/abstractDragHandler.ts

@@ -1,4 +1,4 @@
-import { getElementsByTagName } from '../dom';
+import { disableIframePointEvents, getElementsByTagName } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
 import {
     CompositeDisposable,
@@ -40,23 +40,14 @@ export abstract class DragHandler extends CompositeDisposable {
                     return;
                 }
 
-                const iframes = [
+                const iframes = disableIframePointEvents();
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
 
                 this.pointerEventsDisposable.value = {
                     dispose: () => {
-                        for (const iframe of iframes) {
+                        iframes.release();
-                            iframe.style.pointerEvents = 'auto';
-                        }
                     },
                 };
 
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
 

packages/dockview-core/src/dnd/overlay.scss

@@ -30,7 +30,7 @@
     z-index: 997;
 
     &.dv-bring-to-front {
-        z-index: 998;
+        z-index: 999;
     }
 
     border: 1px solid var(--dv-tab-divider-color);

packages/dockview-core/src/dnd/overlay.ts

@@ -1,4 +1,6 @@
 import {
+    applyOnlyToThisElement,
+    disableIframePointEvents,
     getElementsByTagName,
     quasiDefaultPrevented,
     toggleClass,
@@ -13,20 +15,7 @@ import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { clamp } from '../math';
 import { AnchoredBox } from '../types';
 
-const bringElementToFront = (() => {
+const bringElementToFront = applyOnlyToThisElement('dv-bring-to-front');
-    let previous: HTMLElement | null = null;
-
-    function pushToTop(element: HTMLElement) {
-        if (previous !== element && previous !== null) {
-            toggleClass(previous, 'dv-bring-to-front', false);
-        }
-
-        toggleClass(element, 'dv-bring-to-front', true);
-        previous = element;
-    }
-
-    return pushToTop;
-})();
 
 export class Overlay extends CompositeDisposable {
     private _element: HTMLElement = document.createElement('div');
@@ -88,6 +77,10 @@ export class Overlay extends CompositeDisposable {
         });
     }
 
+    bringToFront(): void {
+        bringElementToFront.update(this._element);
+    }
+
     setBounds(bounds: Partial<AnchoredBox> = {}): void {
         if (typeof bounds.height === 'number') {
             this._element.style.height = `${bounds.height}px`;
@@ -207,21 +200,12 @@ export class Overlay extends CompositeDisposable {
         const track = () => {
             let offset: { x: number; y: number } | null = null;
 
-            const iframes = [
+            const iframes = disableIframePointEvents();
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
 
             move.value = new CompositeDisposable(
                 {
                     dispose: () => {
-                        for (const iframe of iframes) {
+                        iframes.release();
-                            iframe.style.pointerEvents = 'auto';
-                        }
                     },
                 },
                 addDisposableWindowListener(window, 'mousemove', (e) => {
@@ -362,13 +346,13 @@ export class Overlay extends CompositeDisposable {
                 this.options.content,
                 'mousedown',
                 () => {
-                    bringElementToFront(this._element);
+                    bringElementToFront.update(this._element);
                 },
                 true
             )
         );
 
-        bringElementToFront(this._element);
+        bringElementToFront.update(this._element);
 
         if (options.inDragMode) {
             track();
@@ -404,14 +388,7 @@ export class Overlay extends CompositeDisposable {
                     originalWidth: number;
                 } | null = null;
 
-                const iframes = [
+                const iframes = disableIframePointEvents();
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
 
                 move.value = new CompositeDisposable(
                     addDisposableWindowListener(window, 'mousemove', (e) => {
@@ -582,9 +559,7 @@ export class Overlay extends CompositeDisposable {
                     }),
                     {
                         dispose: () => {
-                            for (const iframe of iframes) {
+                            iframes.release();
-                                iframe.style.pointerEvents = 'auto';
-                            }
                         },
                     },
                     addDisposableWindowListener(window, 'mouseup', () => {

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -3,7 +3,12 @@ import {
     IDisposable,
     MutableDisposable,
 } from '../../../lifecycle';
-import { Emitter, Event } from '../../../events';
+import {
+    addDisposableListener,
+    addDisposableWindowListener,
+    Emitter,
+    Event,
+} from '../../../events';
 import { trackFocus } from '../../../dom';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';

packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts

@@ -42,7 +42,7 @@ export class VoidContainer extends CompositeDisposable {
         this.addDisposables(
             this._onDrop,
             this._onDragStart,
-            addDisposableListener(this._element, 'click', () => {
+            addDisposableListener(this._element, 'pointerdown', () => {
                 this.accessor.doSetGroupActive(this.group);
             })
         );

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -927,10 +927,17 @@ export class DockviewComponent
             overlay
         );
 
-        const disposable = watchElementResize(group.element, (entry) => {
+        const disposable = new CompositeDisposable(
+            group.api.onDidActiveChange((event) => {
+                if (event.isActive) {
+                    overlay.bringToFront();
+                }
+            }),
+            watchElementResize(group.element, (entry) => {
                 const { width, height } = entry.contentRect;
                 group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-        });
+            })
+        );
 
         floatingGroupPanel.addDisposables(
             overlay.onDidChange(() => {

packages/dockview-core/src/dom.ts

@@ -257,3 +257,42 @@ export function isInDocument(element: Element): boolean {
 export function addTestId(element: HTMLElement, id: string): void {
     element.setAttribute('data-testid', id);
 }
+
+export function disableIframePointEvents() {
+    const iframes = [
+        ...getElementsByTagName('iframe'),
+        ...getElementsByTagName('webview'),
+    ];
+    const original = new Map<HTMLElement, string>();
+
+    for (const iframe of iframes) {
+        original.set(iframe, iframe.style.pointerEvents);
+        iframe.style.pointerEvents = 'none';
+    }
+
+    return {
+        release: () => {
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = original.get(iframe) ?? 'auto';
+            }
+        },
+    };
+}
+
+export function applyOnlyToThisElement(className: string): {
+    update: (element: HTMLElement) => void;
+} {
+    let previous: WeakRef<HTMLElement> | null;
+
+    return {
+        update: (element: HTMLElement): void => {
+            const ref = previous?.deref();
+            if (ref !== element && ref !== undefined) {
+                toggleClass(ref, className, false);
+            }
+
+            toggleClass(element, className, true);
+            previous = new WeakRef(element);
+        },
+    };
+}

packages/dockview-core/src/overlayReadyContainer.scss

@@ -4,7 +4,11 @@
     height: 100%;
 
     &.dv-render-overlay-float {
-        z-index: 999;
+        z-index: 998;
+
+        &.dv-render-overlay-active {
+          z-index: 1000;
+        }
     }
 }
 

packages/dockview-core/src/overlayRenderContainer.ts

@@ -1,6 +1,10 @@
 import { DragAndDropObserver } from './dnd/dnd';
 import { Droptarget } from './dnd/droptarget';
-import { getDomNodePagePosition, toggleClass } from './dom';
+import {
+    applyOnlyToThisElement,
+    getDomNodePagePosition,
+    toggleClass,
+} from './dom';
 import { CompositeDisposable, Disposable, IDisposable } from './lifecycle';
 import { IDockviewPanel } from './dockview/dockviewPanel';
 
@@ -17,6 +21,8 @@ function createFocusableElement(): HTMLDivElement {
     return element;
 }
 
+const bringElementToFront = applyOnlyToThisElement('dv-active');
+
 export class OverlayRenderContainer extends CompositeDisposable {
     private readonly map: Record<
         string,
@@ -148,6 +154,16 @@ export class OverlayRenderContainer extends CompositeDisposable {
                 }
 
                 resize();
+            }),
+            panel.api.onDidActiveGroupChange(() => {
+                // toggleClass(
+                //     focusContainer,
+                //     'dv-active',
+                //     panel.api.isGroupActive
+                // );
+                if (panel.api.isGroupActive) {
+                    bringElementToFront.update(focusContainer);
+                }
             })
         );
 

packages/dockview-core/src/splitview/splitview.ts

@@ -8,6 +8,7 @@ import {
     addClasses,
     toggleClass,
     getElementsByTagName,
+    disableIframePointEvents,
 } from '../dom';
 import { Event, Emitter } from '../events';
 import { pushToStart, pushToEnd, firstIndex } from '../array';
@@ -437,14 +438,7 @@ export class Splitview {
                     item.enabled = false;
                 }
 
-                const iframes = [
+                const iframes = disableIframePointEvents();
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
 
                 const start =
                     this._orientation === Orientation.HORIZONTAL
@@ -553,9 +547,7 @@ export class Splitview {
                         item.enabled = true;
                     }
 
-                    for (const iframe of iframes) {
+                    iframes.release();
-                        iframe.style.pointerEvents = 'auto';
-                    }
 
                     this.saveProportions();
 

tsconfig.base.json

@@ -20,6 +20,8 @@
             "ES2017.String",
             "ES2018.Promise",
             "ES2019",
+            "ES2020",
+            "ES2021",
             "DOM"
         ]
     },