diff --git a/README.md b/README.md index c441bc5..5e3b114 100644 --- a/README.md +++ b/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. @@ -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 diff --git a/src/collection.js b/src/collection.js index 0097f5d..95817c8 100644 --- a/src/collection.js +++ b/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, diff --git a/src/utils.js b/src/utils.js index dc863d5..abe28b2 100644 --- a/src/utils.js +++ b/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; } diff --git a/types/index.d.ts b/types/index.d.ts index 577bde5..390bbba 100644 --- a/types/index.d.ts +++ b/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;