add active status to pointer (#10)

* add active status to pointer

* CR fixes

* fix active boolean interpolation

* move boolean to config and add to documentation

* Update src/Pointer.js

Co-authored-by: Yehonatan Daniv <[email protected]>

* Update src/Pointer.js

Co-authored-by: Yehonatan Daniv <[email protected]>

* Update src/Pointer.js

Co-authored-by: Yehonatan Daniv <[email protected]>

* Update src/Pointer.js

Co-authored-by: Yehonatan Daniv <[email protected]>

---------

Co-authored-by: Yehonatan Daniv <[email protected]>

docs/reference/index.html

@@ -930,6 +930,12 @@ <h3 class='fl m0' id='pointerconfig'>
 
         </div>
 
+        <div class='space-bottom0'></div>
+          <span class='code bold'>allowActiveEvent</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">boolean</a>?)</code>
+          : whether to allow mouse active event (mouseLeave, mouseEnter).
+
+
+        </div>
     </div>
 
 

src/Pointer.js

@@ -17,7 +17,7 @@ import { frameThrottle } from './utilities.js';
 export class Pointer {
   constructor (config = {}) {
     this.config = { ...config };
-
+    
     this.effect = null;
     this._nextTick = null;
     this._nextTransitionTick = null;
@@ -72,6 +72,15 @@ export class Pointer {
       this._nextTick = trigger();
     };
 
+    this._pointerLeave = () => {
+        this.progress.active = false;
+        this._nextTick = trigger();
+    };
+
+    this._pointerEnter = () => {
+      this.progress.active = true;
+      this._nextTick = trigger();
+    };
     const dpr = window.devicePixelRatio;
 
     if (this.config.root) {
@@ -135,7 +144,11 @@ export class Pointer {
       const t = easing(Math.min(1, p));
 
       this.currentProgress = Object.entries(this.progress).reduce((acc, [key, value]) => {
-        acc[key] = this.previousProgress[key] + (value - this.previousProgress[key]) * t;
+        if (key === 'active') {
+          acc[key] = value;
+        } else {
+          acc[key] = this.previousProgress[key] + (value - this.previousProgress[key]) * t;
+        }
         return acc;
       }, this.currentProgress || {});
 
@@ -177,6 +190,10 @@ export class Pointer {
     this.removeEvent();
     const element = this.config.root || window;
     element.addEventListener('pointermove', this._measure, {passive: true});
+    if (this.config.allowActiveEvent) {
+      element.addEventListener('pointerleave', this._pointerLeave, {passive: true});
+      element.addEventListener('pointerenter', this._pointerEnter, {passive: true});
+    }
   }
 
   /**
@@ -185,6 +202,10 @@ export class Pointer {
   removeEvent () {
     const element = this.config.root || window;
     element.removeEventListener('pointermove', this._measure);
+    if (this.config.allowActiveEvent) {
+      element.removeEventListener('pointerleave', this._pointerLeave);
+      element.removeEventListener('pointerenter', this._pointerEnter);
+    }
   }
 
   /**

src/controller.js

@@ -133,7 +133,7 @@ export function getController (config) {
         const velocity = {x: progress.vx, y: progress.vy};
 
         // run effect
-        scene.effect(scene, {x, y}, velocity);
+        scene.effect(scene, {x, y}, velocity, progress.active);
       }
     }