From 1d00cff4d81848fcfc707e8bb296f8dbde474948 Mon Sep 17 00:00:00 2001 From: fat Date: Wed, 24 Dec 2025 18:01:42 -0800 Subject: [PATCH] Add pointer events --- apps/demo/src/components/App.tsx | 2 +- apps/demo/src/main.ts | 6 ++--- .../src/managers/LineSelectionManager.ts | 20 +++++++------- .../diffs/src/managers/MouseEventManager.ts | 26 +++++++++---------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/apps/demo/src/components/App.tsx b/apps/demo/src/components/App.tsx index 1f5223cf..11edd281 100644 --- a/apps/demo/src/components/App.tsx +++ b/apps/demo/src/components/App.tsx @@ -47,7 +47,7 @@ export function App() { return ( <>
-
diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts index 4afebd2e..14432d64 100644 --- a/apps/demo/src/main.ts +++ b/apps/demo/src/main.ts @@ -165,7 +165,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) { // event.stopPropagation(); // console.log('ZZZZ - clicked', getHoveredLine()); // }); - // el.addEventListener('mousedown', (event) => { + // el.addEventListener('pointerdown', (event) => { // event.stopPropagation(); // }); // return el; @@ -336,7 +336,7 @@ document.getElementById('toggle-theme')?.addEventListener('click', toggleTheme); const streamCode = document.getElementById('stream-code'); if (streamCode != null) { streamCode.addEventListener('click', startStreaming); - streamCode.addEventListener('mouseenter', handlePreload); + streamCode.addEventListener('pointerenter', handlePreload); } const loadDiff = document.getElementById('load-diff'); @@ -351,7 +351,7 @@ if (loadDiff != null) { })(); } loadDiff.addEventListener('click', handleClick); - loadDiff.addEventListener('mouseenter', () => void handlePreloadDiff); + loadDiff.addEventListener('pointerenter', () => void handlePreloadDiff); } const wrapCheckbox = document.getElementById('wrap-lines'); diff --git a/packages/diffs/src/managers/LineSelectionManager.ts b/packages/diffs/src/managers/LineSelectionManager.ts index 44f0c1b1..400035ae 100644 --- a/packages/diffs/src/managers/LineSelectionManager.ts +++ b/packages/diffs/src/managers/LineSelectionManager.ts @@ -107,17 +107,17 @@ export class LineSelectionManager { if (this.pre == null) return; // Lets run a cleanup, just in case this.removeEventListeners(); - this.pre.addEventListener('mousedown', this.handleMouseDown); + this.pre.addEventListener('pointerdown', this.handleMouseDown); } private removeEventListeners(): void { if (this.pre == null) return; - this.pre.removeEventListener('mousedown', this.handleMouseDown); - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('mouseup', this.handleMouseUp); + this.pre.removeEventListener('pointerdown', this.handleMouseDown); + document.removeEventListener('pointermove', this.handleMouseMove); + document.removeEventListener('pointerup', this.handleMouseUp); } - private handleMouseDown = (event: MouseEvent): void => { + private handleMouseDown = (event: PointerEvent): void => { // Only handle left mouse button const mouseEventData = event.button === 0 @@ -165,11 +165,11 @@ export class LineSelectionManager { this.notifySelectionStart(this.selectedRange); } - document.addEventListener('mousemove', this.handleMouseMove); - document.addEventListener('mouseup', this.handleMouseUp); + document.addEventListener('pointermove', this.handleMouseMove); + document.addEventListener('pointerup', this.handleMouseUp); }; - private handleMouseMove = (event: MouseEvent): void => { + private handleMouseMove = (event: PointerEvent): void => { const mouseEventData = this.getMouseEventDataForPath( event.composedPath(), 'move' @@ -181,8 +181,8 @@ export class LineSelectionManager { private handleMouseUp = (): void => { this.anchor = undefined; - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('mouseup', this.handleMouseUp); + document.removeEventListener('pointermove', this.handleMouseMove); + document.removeEventListener('pointerup', this.handleMouseUp); this.notifySelectionEnd(this.selectedRange); this.notifySelectionChange(); }; diff --git a/packages/diffs/src/managers/MouseEventManager.ts b/packages/diffs/src/managers/MouseEventManager.ts index 3f706ffe..82a85172 100644 --- a/packages/diffs/src/managers/MouseEventManager.ts +++ b/packages/diffs/src/managers/MouseEventManager.ts @@ -14,7 +14,7 @@ export interface OnLineClickProps extends LineEventBaseProps { } export interface OnLineEnterLeaveProps extends LineEventBaseProps { - event: MouseEvent; + event: PointerEvent; } export interface OnDiffLineClickProps extends DiffLineEventBaseProps { @@ -22,12 +22,12 @@ export interface OnDiffLineClickProps extends DiffLineEventBaseProps { } export interface OnDiffLineEnterLeaveProps extends DiffLineEventBaseProps { - event: MouseEvent; + event: PointerEvent; } type HandleMouseEventProps = - | { eventType: 'click'; event: MouseEvent } - | { eventType: 'move'; event: MouseEvent }; + | { eventType: 'click'; event: PointerEvent } + | { eventType: 'move'; event: PointerEvent }; type EventClickProps = TMode extends 'file' ? OnLineClickProps @@ -114,8 +114,8 @@ export class MouseEventManager { cleanUp(): void { this.pre?.removeEventListener('click', this.handleMouseClick); - this.pre?.removeEventListener('mousemove', this.handleMouseMove); - this.pre?.removeEventListener('mouseout', this.handleMouseLeave); + this.pre?.removeEventListener('pointermove', this.handleMouseMove); + this.pre?.removeEventListener('pointerout', this.handleMouseLeave); delete this.pre?.dataset.interactiveLines; delete this.pre?.dataset.interactiveLineNumbers; this.pre = undefined; @@ -179,17 +179,17 @@ export class MouseEventManager { ); } if (onLineEnter != null || onLineLeave != null || enableHoverUtility) { - pre.addEventListener('mousemove', this.handleMouseMove); + pre.addEventListener('pointermove', this.handleMouseMove); debugLogIfEnabled( __debugMouseEvents, 'move', - 'FileDiff.DEBUG.attachEventListeners: Attaching mouse move event' + 'FileDiff.DEBUG.attachEventListeners: Attaching pointer move event' ); - pre.addEventListener('mouseleave', this.handleMouseLeave); + pre.addEventListener('pointerleave', this.handleMouseLeave); debugLogIfEnabled( __debugMouseEvents, 'move', - 'FileDiff.DEBUG.attachEventListeners: Attaching mouse leave event' + 'FileDiff.DEBUG.attachEventListeners: Attaching pointer leave event' ); } } @@ -211,7 +211,7 @@ export class MouseEventManager { return undefined; }; - handleMouseClick = (event: MouseEvent): void => { + handleMouseClick = (event: PointerEvent): void => { debugLogIfEnabled( this.options.__debugMouseEvents, 'click', @@ -221,7 +221,7 @@ export class MouseEventManager { this.handleMouseEvent({ eventType: 'click', event }); }; - handleMouseMove = (event: MouseEvent): void => { + handleMouseMove = (event: PointerEvent): void => { debugLogIfEnabled( this.options.__debugMouseEvents, 'move', @@ -231,7 +231,7 @@ export class MouseEventManager { this.handleMouseEvent({ eventType: 'move', event }); }; - handleMouseLeave = (event: MouseEvent): void => { + handleMouseLeave = (event: PointerEvent): void => { const { __debugMouseEvents } = this.options; debugLogIfEnabled( __debugMouseEvents,