rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-02 09:38:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #698 from mathuo/696-touch-support-for-dragging-dockview-panels

Browse Source 
feat: ensure use of pointerevents for touch support
This commit is contained in:
mathuo 2024-08-28 20:32:07 +01:00 committed by GitHub
commit fc7b9fb2e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts
View File

@ -54,7 +54,7 @@ describe('defaultTab', () => {
let el = cut.element.querySelector('.dv-default-tab-action');
fireEvent.mouseDown(el!);
fireEvent.pointerDown(el!);
expect(api.close).toHaveBeenCalledTimes(0);
fireEvent.click(el!);

14
packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -459,6 +459,7 @@ describe('tabsContainer', () => {
onDidRemovePanel: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
doSetGroupActive: jest.fn(),
});
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
@ -486,10 +487,11 @@ describe('tabsContainer', () => {
return { top: 10, left: 20, width: 0, height: 0 } as any;
});
const event = new KeyboardEvent('mousedown', { shiftKey: true });
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(container, event);
expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel);
expect(accessor.addFloatingGroup).toHaveBeenCalledWith(groupPanel, {
x: 100,
y: 60,
@ -498,7 +500,7 @@ describe('tabsContainer', () => {
expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1);
expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(1);
const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
const event2 = new KeyboardEvent('pointerdown', { shiftKey: false });
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
fireEvent(container, event2);
@ -513,6 +515,7 @@ describe('tabsContainer', () => {
onDidRemovePanel: jest.fn(),
element: document.createElement('div'),
addFloatingGroup: jest.fn(),
doSetGroupActive: jest.fn(),
});
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
@ -540,14 +543,15 @@ describe('tabsContainer', () => {
return { top: 10, left: 20, width: 0, height: 0 } as any;
});
const event = new KeyboardEvent('mousedown', { shiftKey: true });
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(container, event);
expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel);
expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(0);
const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
const event2 = new KeyboardEvent('pointerdown', { shiftKey: false });
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
fireEvent(container, event2);
@ -595,7 +599,7 @@ describe('tabsContainer', () => {
const el = cut.element.querySelector('.tab')!;
expect(el).toBeTruthy();
const event = new KeyboardEvent('mousedown', { shiftKey: true });
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(el, event);

24
packages/dockview-core/src/__tests__/events.spec.ts
View File

@ -153,14 +153,14 @@ describe('events', () => {
const disposable = addDisposableWindowListener(
element as any,
'mousedown',
'pointerdown',
handler,
true
);
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.addEventListener).toHaveBeenCalledWith(
'mousedown',
'pointerdown',
handler,
true
);
@ -171,7 +171,7 @@ describe('events', () => {
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledWith(
'mousedown',
'pointerdown',
handler,
true
);
@ -187,13 +187,13 @@ describe('events', () => {
const disposable = addDisposableWindowListener(
element as any,
'mousedown',
'pointerdown',
handler
);
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.addEventListener).toHaveBeenCalledWith(
'mousedown',
'pointerdown',
handler,
undefined
);
@ -204,7 +204,7 @@ describe('events', () => {
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledWith(
'mousedown',
'pointerdown',
handler,
undefined
);
@ -220,14 +220,14 @@ describe('events', () => {
const disposable = addDisposableListener(
element as any,
'mousedown',
'pointerdown',
handler,
true
);
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.addEventListener).toHaveBeenCalledWith(
'mousedown',
'pointerdown',
handler,
true
);
@ -238,7 +238,7 @@ describe('events', () => {
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledWith(
'mousedown',
'pointerdown',
handler,
true
);
@ -254,13 +254,13 @@ describe('events', () => {
const disposable = addDisposableListener(
element as any,
'mousedown',
'pointerdown',
handler
);
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.addEventListener).toHaveBeenCalledWith(
'mousedown',
'pointerdown',
handler,
undefined
);
@ -271,7 +271,7 @@ describe('events', () => {
expect(element.addEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledTimes(1);
expect(element.removeEventListener).toBeCalledWith(
'mousedown',
'pointerdown',
handler,
undefined
);

2
packages/dockview-core/src/dnd/groupDragHandler.ts
View File

@ -21,7 +21,7 @@ export class GroupDragHandler extends DragHandler {
this.addDisposables(
addDisposableListener(
element,
'mousedown',
'pointerdown',
(e) => {
if (e.shiftKey) {
/**

4
packages/dockview-core/src/dockview/components/tab/defaultTab.ts
View File

@ -30,7 +30,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
this._element.appendChild(this.action);
this.addDisposables(
addDisposableListener(this.action, 'mousedown', (ev) => {
addDisposableListener(this.action, 'pointerdown', (ev) => {
ev.preventDefault();
})
);
@ -46,7 +46,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
this._title = event.title;
this.render();
}),
addDisposableListener(this.action, 'mousedown', (ev) => {
addDisposableListener(this.action, 'pointerdown', (ev) => {
ev.preventDefault();
}),
addDisposableListener(this.action, 'click', (ev) => {

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

@ -124,7 +124,7 @@ export class Tab extends CompositeDisposable {
this._onDragStart.fire(event);
}),
dragHandler,
addDisposableListener(this._element, 'mousedown', (event) => {
addDisposableListener(this._element, 'pointerdown', (event) => {
if (event.defaultPrevented) {
return;
}

4
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -253,7 +253,7 @@ export class TabsContainer
}),
addDisposableListener(
this.voidContainer.element,
'mousedown',
'pointerdown',
(event) => {
const isFloatingGroupsEnabled =
!this.accessor.options.disableFloatingGroups;
@ -278,7 +278,7 @@ export class TabsContainer
}
}
),
addDisposableListener(this.tabContainer, 'mousedown', (event) => {
addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
if (event.defaultPrevented) {
return;
}

16
packages/dockview-core/src/overlay/overlay.ts
View File

@ -37,7 +37,9 @@ class AriaLevelTracker {
private update(): void {
for (let i = 0; i < this._orderedList.length; i++) {
this._orderedList[i].setAttribute('aria-level', `${i}`);
this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
this._orderedList[i].style.zIndex = `${
DEFAULT_OVERLAY_Z_INDEX + i * 2
}`;
}
}
}
@ -241,7 +243,7 @@ export class Overlay extends CompositeDisposable {
iframes.release();
},
},
addDisposableWindowListener(window, 'mousemove', (e) => {
addDisposableWindowListener(window, 'pointermove', (e) => {
const containerRect =
this.options.container.getBoundingClientRect();
const x = e.clientX - containerRect.left;
@ -342,7 +344,7 @@ export class Overlay extends CompositeDisposable {
this.addDisposables(
move,
addDisposableListener(dragTarget, 'mousedown', (event) => {
addDisposableListener(dragTarget, 'pointerdown', (event) => {
if (event.defaultPrevented) {
event.preventDefault();
return;
@ -358,7 +360,7 @@ export class Overlay extends CompositeDisposable {
}),
addDisposableListener(
this.options.content,
'mousedown',
'pointerdown',
(event) => {
if (event.defaultPrevented) {
return;
@ -377,7 +379,7 @@ export class Overlay extends CompositeDisposable {
),
addDisposableListener(
this.options.content,
'mousedown',
'pointerdown',
() => {
arialLevelTracker.push(this._element);
},
@ -409,7 +411,7 @@ export class Overlay extends CompositeDisposable {
this.addDisposables(
move,
addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
addDisposableListener(resizeHandleElement, 'pointerdown', (e) => {
e.preventDefault();
let startPosition: {
@ -422,7 +424,7 @@ export class Overlay extends CompositeDisposable {
const iframes = disableIframePointEvents();
move.value = new CompositeDisposable(
addDisposableWindowListener(window, 'mousemove', (e) => {
addDisposableWindowListener(window, 'pointermove', (e) => {
const containerRect =
this.options.container.getBoundingClientRect();
const overlayRect =

4
packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
View File

@ -176,7 +176,7 @@ describe('defaultTab', () => {
expect(element.querySelector('.dv-default-tab-action')).toBeTruthy();
});
test('that mouseDown on close button prevents panel becoming active', async () => {
test('that pointerDown on close button prevents panel becoming active', async () => {
const api = fromPartial<DockviewPanelApi>({
setActive: jest.fn(),
onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
@ -197,7 +197,7 @@ describe('defaultTab', () => {
'.dv-default-tab-action'
) as HTMLElement;
fireEvent.mouseDown(btn);
fireEvent.pointerDown(btn);
expect(api.setActive).toHaveBeenCalledTimes(0);
fireEvent.click(element);

4
packages/dockview/src/dockview/defaultTab.tsx
View File

@ -49,7 +49,7 @@ export const DockviewDefaultTab: React.FunctionComponent<
[api, closeActionOverride]
);
const onMouseDown = React.useCallback((e: React.MouseEvent) => {
const onPointerDown = React.useCallback((e: React.MouseEvent) => {
e.preventDefault();
}, []);
@ -79,7 +79,7 @@ export const DockviewDefaultTab: React.FunctionComponent<
{!hideClose && (
<div
className="dv-default-tab-action"
onMouseDown={onMouseDown}
onPointerDown={onPointerDown}
onClick={onClose}
>
<CloseButton />