fix(pointer): check all fields of PointerCoords in isDifferentPointerPosition() (#1229)

Co-authored-by: Bryan Jensen <[email protected]>

Author: bawjensen

src/system/pointer/shared.ts

@@ -29,6 +29,14 @@ export function isDifferentPointerPosition(
     positionA.target !== positionB.target ||
     positionA.coords?.x !== positionB.coords?.x ||
     positionA.coords?.y !== positionB.coords?.y ||
+    positionA.coords?.clientX !== positionB.coords?.clientX ||
+    positionA.coords?.clientY !== positionB.coords?.clientY ||
+    positionA.coords?.offsetX !== positionB.coords?.offsetX ||
+    positionA.coords?.offsetY !== positionB.coords?.offsetY ||
+    positionA.coords?.pageX !== positionB.coords?.pageX ||
+    positionA.coords?.pageY !== positionB.coords?.pageY ||
+    positionA.coords?.screenX !== positionB.coords?.screenX ||
+    positionA.coords?.screenY !== positionB.coords?.screenY ||
     positionA.caret?.node !== positionB.caret?.node ||
     positionA.caret?.offset !== positionB.caret?.offset
   )

tests/pointer/drag.ts

@@ -20,6 +20,27 @@ test('drag sequence', async () => {
   `)
 })
 
+test('drag sequence w/ differing client coordinates', async () => {
+  const {element, getClickEventsSnapshot, user} = setup(`<div></div>`)
+
+  await user.pointer([
+    {keys: '[MouseLeft>]', target: element, coords: {clientX: 0, clientY: 0}},
+    {target: element, coords: {clientX: 0, clientY: 0}}, // doesn't actually move, won't show up in snapshot below
+    {target: element, coords: {clientX: 10, clientY: 0}}, // will show up in snapshot below
+    '[/MouseLeft]',
+  ])
+
+  expect(getClickEventsSnapshot()).toMatchInlineSnapshot(`
+    pointerdown - pointerId=1; pointerType=mouse; isPrimary=true
+    mousedown - button=0; buttons=1; detail=1
+    pointermove - pointerId=1; pointerType=mouse; isPrimary=true
+    mousemove - button=0; buttons=1; detail=0
+    pointerup - pointerId=1; pointerType=mouse; isPrimary=true
+    mouseup - button=0; buttons=0; detail=1
+    click - button=0; buttons=0; detail=1
+  `)
+})
+
 test('drag touch', async () => {
   const {element, getClickEventsSnapshot, user} = setup(`<div></div>`)