fix: isPressed will return value expectedly on iOS13

README.md

@@ -139,8 +139,9 @@ var options = {
     restOpacity: Number,            // opacity when not 'dynamic' and rested
     lockX: Boolean,                 // only move on the X axis
     lockY: Boolean,                 // only move on the Y axis
-    catchDistance: Number           // distance to recycle previous joystick in
+    catchDistance: Number,          // distance to recycle previous joystick in
                                     // 'semi' mode
+    dynamicPage: Boolean,          // Enable if the page has dynamically visible elements
 };
 ```
 
@@ -155,7 +156,7 @@ The dom element in which all your joysticks will be injected.
 <script type="text/javascript" src="./nipplejs.js"></script>
 <script type="text/javascript">
     var options = {
-        zone: document.getElementById('zone_joystick');
+        zone: document.getElementById('zone_joystick'),
     };
     var manager = nipplejs.create(options);
 </script>
@@ -252,6 +253,8 @@ Locks joystick's movement to the x (horizontal) axis
 ### `options.lockY` defaults to false
 Locks joystick's movement to the y (vertical) axis
 
+### `options.dynamicPage` defaults to true
+Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM.
 
 ----
 
@@ -526,6 +529,10 @@ Comes with data :
         radian: 1.5707963268,   // angle in radian
         degree: 90
     },
+    vector: {                   // force unit vector
+      x: 0.508,
+      y: 3.110602869834277e-17
+    },
     raw: {                      // note: angle is the same, beyond the 50 pixel limit
         distance: 25.4,         // distance which continues beyond the 50 pixel limit
         position: {             // position of the finger/mouse in pixels, beyond joystick limits

src/collection.js

@@ -33,7 +33,8 @@ function Collection (manager, options) {
         restJoystick: true,
         restOpacity: 0.5,
         lockX: false,
-        lockY: false
+        lockY: false,
+        dynamicPage: false
     };
 
     self.config(options);
@@ -377,6 +378,15 @@ Collection.prototype.processOnMove = function (evt) {
         return;
     }
 
+    if (opts.dynamicPage) {
+        var scroll = u.getScroll();
+        pos = nipple.el.getBoundingClientRect();
+        nipple.position = {
+            x: scroll.x + pos.left,
+            y: scroll.y + pos.top
+        };
+    }
+
     nipple.identifier = identifier;
 
     var size = nipple.options.size / 2;
@@ -432,6 +442,10 @@ Collection.prototype.processOnMove = function (evt) {
             radian: rAngle,
             degree: angle
         },
+        vector: {
+            x: xPosition / size,
+            y: - yPosition / size
+        },
         raw: raw,
         instance: nipple,
         lockX: opts.lockX,

src/utils.js

@@ -33,6 +33,9 @@ export const degrees = (a) => {
 };
 
 export const isPressed = (evt) => {
+    if (evt.type === 'pointerdown' || evt.type === 'pointermove') {
+        return true;
+    }
     if (isNaN(evt.buttons)) {
         return evt.pressure !== 0;
     }

types/index.d.ts

@@ -159,6 +159,10 @@ export interface JoystickOutputData {
         x: string;
         y: string;
     };
+    vector: {
+        x: number;
+        y: number;
+    };
     raw: {
       distance: number;
       position: Position;