rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 09:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: render mode z-index fixes

Browse Source
This commit is contained in:
mathuo 2024-07-27 20:34:06 +01:00
parent 5b9dbdf57e
commit f765dd52fc
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
11 changed files with 101 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/dockview-core/src/dnd/abstractDragHandler.ts
View File

@ -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 = [
...getElementsByTagName('iframe'),
...getElementsByTagName('webview'),
];
const iframes = disableIframePointEvents();
this.pointerEventsDisposable.value = {
dispose: () => {
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
}
iframes.release();
},
};
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none';
}
this.el.classList.add('dv-dragged');
setTimeout(() => this.el.classList.remove('dv-dragged'), 0);

2
packages/dockview-core/src/dnd/overlay.scss
View File

@ -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);

51
packages/dockview-core/src/dnd/overlay.ts
View File

@ -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 = (() => {
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;
})();
const bringElementToFront = applyOnlyToThisElement('dv-bring-to-front');
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 = [
...getElementsByTagName('iframe'),
...getElementsByTagName('webview'),
];
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none';
}
const iframes = disableIframePointEvents();
move.value = new CompositeDisposable(
{
dispose: () => {
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
}
iframes.release();
},
},
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 = [
...getElementsByTagName('iframe'),
...getElementsByTagName('webview'),
];
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none';
}
const iframes = disableIframePointEvents();
move.value = new CompositeDisposable(
addDisposableWindowListener(window, 'mousemove', (e) => {
@ -582,9 +559,7 @@ export class Overlay extends CompositeDisposable {
}),
{
dispose: () => {
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
}
iframes.release();
},
},
addDisposableWindowListener(window, 'mouseup', () => {

7
packages/dockview-core/src/dockview/components/panel/content.ts
View File

@ -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';

2
packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
View File

@ -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);
})
);

15
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -927,10 +927,17 @@ export class DockviewComponent
overlay
);
const disposable = 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
});
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(() => {

39
packages/dockview-core/src/dom.ts
View File

@ -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);
},
};
}

6
packages/dockview-core/src/overlayReadyContainer.scss
View File

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

18
packages/dockview-core/src/overlayRenderContainer.ts
View File

@ -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);
}
})
);

14
packages/dockview-core/src/splitview/splitview.ts
View File

@ -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 = [
...getElementsByTagName('iframe'),
...getElementsByTagName('webview'),
];
for (const iframe of iframes) {
iframe.style.pointerEvents = 'none';
}
const iframes = disableIframePointEvents();
const start =
this._orientation === Orientation.HORIZONTAL
@ -553,9 +547,7 @@ export class Splitview {
item.enabled = true;
}
for (const iframe of iframes) {
iframe.style.pointerEvents = 'auto';
}
iframes.release();
this.saveProportions();

2
tsconfig.base.json
View File

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