fix: don't block events with similar timestamps (#600)

pmndrs · May 21, 2023 · 957aee8 · 957aee8
1 parent 0dce221
commit 957aee8
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 6 deletions.
diff --git a/.changeset/rare-avocados-taste.md b/.changeset/rare-avocados-taste.md
@@ -0,0 +1,5 @@
+---
+'@use-gesture/core': patch
+---
+
+fix: don't block events with similar timestamps #581
diff --git a/demo/src/App.jsx b/demo/src/App.jsx
@@ -26,6 +26,7 @@ import CardZoom from './sandboxes/card-zoom/src/App'
 import InfiniteSlideshow from './sandboxes/infinite-slideshow/src/App'
 import ActionSheet from './sandboxes/action-sheet/src/App'
 import DotsConnect from './sandboxes/dots-connect/src/App'
+import NativeVsLib from './sandboxes/native-vs-lib/src/App'
 
 const links = {
   'gesture-simplest': Simplest,
@@ -50,7 +51,8 @@ const links = {
   'card-zoom': CardZoom,
   'infinite-slideshow': InfiniteSlideshow,
   'action-sheet': ActionSheet,
-  'dots-connect': DotsConnect
+  'dots-connect': DotsConnect,
+  'native-vs-lib': NativeVsLib
 }
 
 const Example = ({ link }) => {

diff --git a/demo/src/sandboxes/native-vs-lib/package.json b/demo/src/sandboxes/native-vs-lib/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "native-vs-lib",
+  "version": "1.0.0",
+  "main": "src/index.jsx",
+  "dependencies": {
+    "@use-gesture/react": "latest",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "^5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.4",
+    "@types/react": "^18.0.3",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.9.4",
+    "typescript-plugin-css-modules": "^4.1.1"
+  }
+}
diff --git a/demo/src/sandboxes/native-vs-lib/public/index.html b/demo/src/sandboxes/native-vs-lib/public/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Use-Gesture Sandbox</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/demo/src/sandboxes/native-vs-lib/src/App.jsx b/demo/src/sandboxes/native-vs-lib/src/App.jsx
@@ -0,0 +1,70 @@
+import { useRef } from 'react'
+import { useDrag } from '@use-gesture/react'
+
+function TestDrag() {
+  const bind = useDrag(({ offset: [x, y], event }) => {
+    event.currentTarget.style.transform = `translate(${x}px,${y}px)`
+  })
+
+  return (
+    <div
+      {...bind()}
+      style={{
+        width: '100px',
+        height: '100px',
+        backgroundColor: '#ff0000',
+        touchAction: 'none'
+      }}
+    />
+  )
+}
+function TestNaiveDrag() {
+  const dragging = useRef(false)
+  const initial = useRef([0, 0])
+  const px = useRef(0)
+  const py = useRef(0)
+  const x = useRef(0)
+  const y = useRef(0)
+
+  const onPointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId)
+    initial.current = [e.clientX, e.clientY]
+    px.current = x.current
+    py.current = y.current
+    dragging.current = true
+  }
+
+  const onPointerMove = (e) => {
+    if (!dragging.current) return
+    x.current = px.current + e.clientX - initial.current[0]
+    y.current = py.current + e.clientY - initial.current[1]
+    e.currentTarget.style.transform = `translate(${x.current}px,${y.current}px)`
+  }
+
+  const onPointerUp = (e) => {
+    dragging.current = false
+  }
+
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      style={{
+        width: '100px',
+        height: '100px',
+        backgroundColor: '#00ff00',
+        touchAction: 'none'
+      }}
+    />
+  )
+}
+
+export default function App() {
+  return (
+    <div>
+      <TestDrag />
+      <TestNaiveDrag />
+    </div>
+  )
+}
diff --git a/demo/src/sandboxes/native-vs-lib/src/index.css b/demo/src/sandboxes/native-vs-lib/src/index.css
@@ -0,0 +1,32 @@
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  background-color: #ecede7;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.flex.fill {
+  height: 100%;
+}
+
+.flex.center {
+  justify-content: center;
+}
diff --git a/demo/src/sandboxes/native-vs-lib/src/index.tsx b/demo/src/sandboxes/native-vs-lib/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+import './index.css'
+
+const rootElement = document.getElementById('root')
+const root = createRoot(rootElement!)
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/demo/src/sandboxes/native-vs-lib/src/styles.module.css b/demo/src/sandboxes/native-vs-lib/src/styles.module.css
@@ -0,0 +1,16 @@
+.drag {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  border-radius: 8px;
+  background-color: hotpink;
+  cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 10px;
+}
+
+.drag:focus {
+  border: 2px solid red;
+}
diff --git a/demo/src/sandboxes/native-vs-lib/tsconfig.json b/demo/src/sandboxes/native-vs-lib/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "es2015"],
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/core/src/engines/DragEngine.ts b/packages/core/src/engines/DragEngine.ts
@@ -150,10 +150,6 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
 
     if (!state._pointerActive) return
 
-    // if the event has the same timestamp as the previous event
-    // note that checking type equality is ONLY for tests ¯\_(ツ)_/¯
-    if (state.type === event.type && event.timeStamp === state.timeStamp) return
-
     const id = pointerId(event)
     if (state._pointerId !== undefined && id !== state._pointerId) return
     const _values = pointerValues(event)

diff --git a/packages/core/src/engines/Engine.ts b/packages/core/src/engines/Engine.ts
@@ -346,8 +346,11 @@ export abstract class Engine<Key extends GestureKey> {
       state.direction = state.delta.map(Math.sign) as Vector2
       state._direction = state._delta.map(Math.sign) as Vector2
 
+      // calculates kinematics unless the gesture starts or ends or if the
+      // dt === 0 (which can happen on high frame rate monitors, see issue #581)
+      // because of privacy protection:
+      // https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp#reduced_time_precision
       if (!state.first && dt > 0) {
-        // calculates kinematics unless the gesture starts or ends
         state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]
         state.timeDelta = dt
       }