Pointer add config.noThrottle (#4)

* Added config.noThrottle

* 0.2.1

dist/index.cjs

@@ -332,9 +332,11 @@ class Pointer {
     this.effect = null;
     this._nextTick = null;
 
-    const trigger = frameThrottle(() => {
-      this.tick();
-    });
+    const trigger = this.config.noThrottle
+      ? () => { this.tick(); }
+      : frameThrottle(() => {
+        this.tick();
+      });
 
     // in no root then use the viewport's size
     this.config.rect = this.config.root
@@ -383,7 +385,6 @@ class Pointer {
    * Handle animation frame work.
    */
   tick () {
-    // update effect
     this.effect.tick(this.progress);
   }
 
@@ -435,6 +436,7 @@ class Pointer {
  * @property {PointerScene[]} scenes list of effect scenes to perform during pointermove.
  * @property {HTMLElement} [root] element to use as hit area for pointermove events. Defaults to entire viewport.
  * @property {{width: number, height: number}} [rect] created automatically on Pointer construction.
+ * @property {boolean} [noThrottle] whether to disable throttling the effect by framerate.
  */
 
 /**

docs/reference/index.html

@@ -846,6 +846,13 @@ <h3 class='fl m0' id='pointerconfig'>
 
         </div>
 
+        <div class='space-bottom0'>
+          <span class='code bold'>noThrottle</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
+          : whether to disable throttling the effect by framerate.
+
+
+        </div>
+
     </div>
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kuliso",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "sideeffects": true,
   "description": "Tiny library for performant pointer-driven or gyroscope-driven effects",
   "main": "dist/index.cjs",
@@ -31,12 +31,12 @@
   },
   "homepage": "https://github.com/wix-incubator/kuliso#readme",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "ava": "^5.3.1",
-    "c8": "^8.0.1",
-    "documentation": "^14.0.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "ava": "^6.2.0",
+    "c8": "^10.1.2",
+    "documentation": "^14.0.3",
     "http-server": "^14.1.1",
-    "rollup": "^4.6.0",
+    "rollup": "^4.27.4",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-progress": "^1.1.2"
   }

src/Pointer.js

@@ -21,9 +21,11 @@ export class Pointer {
     this.effect = null;
     this._nextTick = null;
 
-    const trigger = frameThrottle(() => {
-      this.tick();
-    });
+    const trigger = this.config.noThrottle
+      ? () => { this.tick(); }
+      : frameThrottle(() => {
+        this.tick();
+      });
 
     // in no root then use the viewport's size
     this.config.rect = this.config.root
@@ -72,7 +74,6 @@ export class Pointer {
    * Handle animation frame work.
    */
   tick () {
-    // update effect
     this.effect.tick(this.progress);
   }
 
@@ -124,6 +125,7 @@ export class Pointer {
  * @property {PointerScene[]} scenes list of effect scenes to perform during pointermove.
  * @property {HTMLElement} [root] element to use as hit area for pointermove events. Defaults to entire viewport.
  * @property {{width: number, height: number}} [rect] created automatically on Pointer construction.
+ * @property {boolean} [noThrottle] whether to disable throttling the effect by framerate.
  */
 
 /**

types.d.ts

@@ -1,6 +1,7 @@
 declare type PointerConfig = {
   scenes: PointerScene;
   root?: HTMLElement;
+  noThrottle?: boolean;
 }
 
 declare type PointerScene = {