Merge pull request #698 from mathuo/696-touch-support-for-dragging-do…

…ckview-panels feat: ensure use of pointerevents for touch support
mathuo · Aug 28, 2024 · fc7b9fb · fc7b9fb
2 parents d519c23 + 1033b80
commit fc7b9fb
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 35 deletions.
diff --git a/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts
@@ -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!);

diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
@@ -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);
 

diff --git a/packages/dockview-core/src/__tests__/events.spec.ts b/packages/dockview-core/src/__tests__/events.spec.ts
@@ -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
         );

diff --git a/packages/dockview-core/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts
@@ -21,7 +21,7 @@ export class GroupDragHandler extends DragHandler {
         this.addDisposables(
             addDisposableListener(
                 element,
-                'mousedown',
+                'pointerdown',
                 (e) => {
                     if (e.shiftKey) {
                         /**

diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
@@ -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) => {

diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -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;
                 }

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -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;
                 }

diff --git a/packages/dockview-core/src/overlay/overlay.ts b/packages/dockview-core/src/overlay/overlay.ts
@@ -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 =

diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
@@ -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);

diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx
@@ -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 />