Added movementX/Y to redispatched event (#9)

* Added movementX/Y to redispatched event * 0.4.1 * Updated build and docs
wix-incubator · Jan 13, 2025 · cd6a238 · cd6a238
1 parent da566fe
commit cd6a238
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -373,7 +373,7 @@ class Pointer {
     this.previousProgress = { ...this.progress };
     this.currentProgress = null;
 
-    this._measure = (event) => {
+    const _measure = (event) => {
       Object.assign(this.previousProgress, this.currentProgress || this.progress);
 
       this.progress.x = this.config.root ? event.offsetX : event.x;
@@ -382,6 +382,31 @@ class Pointer {
       this.progress.vy = event.movementY;
       this._nextTick = trigger();
     };
+
+    const dpr = window.devicePixelRatio;
+
+    if (this.config.root) {
+      this._measure = (e) => {
+        if (e.target !== this.config.root) {
+          const event = new PointerEvent('pointermove', {
+            bubbles: true,
+            cancelable: true,
+            clientX: e.x * dpr,
+            clientY: e.y * dpr,
+            movementX: e.movementX,
+            movementY: e.movementY,
+          });
+
+          e.stopPropagation();
+
+          this.config.root.dispatchEvent(event);
+        } else {
+          _measure(e);
+        }
+      };
+    } else {
+      this._measure = _measure;
+    }
   }
 
   /**

diff --git a/docs/reference/index.html b/docs/reference/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>kuliso 0.3.0 | Documentation</title>
+  <title>kuliso 0.4.1 | Documentation</title>
   <meta name='description' content='Tiny library for performant pointer-driven or gyroscope-driven effects'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
@@ -15,7 +15,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>kuliso</h3>
-          <div class='mb1'><code>0.3.0</code></div>
+          <div class='mb1'><code>0.4.1</code></div>
           <input
             placeholder='Filter'
             id='filter-input'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kuliso",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "sideeffects": true,
   "description": "Tiny library for performant pointer-driven or gyroscope-driven effects",
   "main": "dist/index.cjs",

diff --git a/src/Pointer.js b/src/Pointer.js
@@ -81,7 +81,9 @@ export class Pointer {
             bubbles: true,
             cancelable: true,
             clientX: e.x * dpr,
-            clientY: e.y * dpr
+            clientY: e.y * dpr,
+            movementX: e.movementX,
+            movementY: e.movementY,
           });
 
           e.stopPropagation();