Skip to content

Commit

Permalink
Interaction: put start, prev, etc. in coords field
Browse files Browse the repository at this point in the history
  • Loading branch information
@taye
taye committed Apr 13, 2018
1 parent 6bdb5f7 commit fc993a3
Show file tree
Hide file tree
Showing 13 changed files with 126 additions and 149 deletions.
10 changes: 10 additions & 0 deletions packages/_dev/test/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@ export function newCoordsSet (n = 0) {
client : { x: n++, y: n++ },
timeStamp: n++,
},
delta: {
page : { x: n++, y: n++ },
client : { x: n++, y: n++ },
timeStamp: n++,
},
velocity: {
page : { x: n++, y: n++ },
client : { x: n++, y: n++ },
timeStamp: n++,
},
};
}

Expand Down
24 changes: 10 additions & 14 deletions packages/actions/drag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,18 @@ function beforeMove ({ interaction }) {
const axis = interaction.prepared.axis;

if (axis === 'x') {
interaction.curCoords.page.y = interaction.startCoords.page.y;
interaction.curCoords.client.y = interaction.startCoords.client.y;
interaction.coords.cur.page.y = interaction.coords.start.page.y;
interaction.coords.cur.client.y = interaction.coords.start.client.y;

interaction.pointerDelta.page.speed = Math.abs(interaction.pointerDelta.page.vx);
interaction.pointerDelta.client.speed = Math.abs(interaction.pointerDelta.client.vx);
interaction.pointerDelta.client.vy = 0;
interaction.pointerDelta.page.vy = 0;
interaction.coords.velocity.client.y = 0;
interaction.coords.velocity.page.y = 0;
}
else if (axis === 'y') {
interaction.curCoords.page.x = interaction.startCoords.page.x;
interaction.curCoords.client.x = interaction.startCoords.client.x;
interaction.coords.cur.page.x = interaction.coords.start.page.x;
interaction.coords.cur.client.x = interaction.coords.start.client.x;

interaction.pointerDelta.page.speed = Math.abs(interaction.pointerDelta.page.vy);
interaction.pointerDelta.client.speed = Math.abs(interaction.pointerDelta.client.vy);
interaction.pointerDelta.client.vx = 0;
interaction.pointerDelta.page.vx = 0;
interaction.coords.velocity.client.x = 0;
interaction.coords.velocity.page.x = 0;
}
}

Expand All @@ -64,8 +60,8 @@ function move ({ iEvent, interaction }) {
if (axis === 'x' || axis === 'y') {
const opposite = axis === 'x' ? 'y' : 'x';

iEvent.page[opposite] = interaction.startCoords.page[opposite];
iEvent.client[opposite] = interaction.startCoords.client[opposite];
iEvent.page[opposite] = interaction.coords.start.page[opposite];
iEvent.client[opposite] = interaction.coords.start.client[opposite];
iEvent.delta[opposite] = 0;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/actions/resize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function init (scope) {
checker: function (pointer, event, interactable, element, interaction, rect) {
if (!rect) { return null; }

const page = utils.extend({}, interaction.curCoords.page);
const page = utils.extend({}, interaction.coords.cur.page);
const options = interactable.options;

if (options.resize.enabled) {
Expand Down
38 changes: 12 additions & 26 deletions packages/actions/tests/drag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,19 @@ test('drag axis', t => {
client: { x: -3, y: -4 },
delta: { x: -5, y: -6 },
};
const startPage = { x: 0, y: 1 };
const startClient = { x: 2, y: 3 };
const deltaPage = { x: 4, y: 5, vx: 6, vy: 7, speed: 8 };
const deltaClient = { x: 9, y: 10, vx: 11, vy: 12, speed: 13 };
const coords = helpers.newCoordsSet();

resetCoords();
interaction.prepared = { name: 'drag', axis: 'xy' };
interaction.target = interactable;

const coords = helpers.newCoordsSet();
for (const prop in coords) {
interaction[prop + 'Coords'] = coords[prop];
}

t.test('xy (any direction)', tt => {
scope.interactions.signals.fire('before-action-move', { interaction });

tt.deepEqual(interaction.startCoords.page, startPage,
'startCoords.page is not modified');
tt.deepEqual(interaction.startCoords.client, startClient,
'startCoords.client is not modified');
tt.deepEqual(interaction.pointerDelta.page, deltaPage,
'pointerDelta.page is not modified');
tt.deepEqual(interaction.pointerDelta.client, deltaClient,
'pointerDelta.client is not modified');
tt.deepEqual(interaction.coords.start, coords.start,
'coords.start is not modified');
tt.deepEqual(interaction.coords.delta, coords.delta,
'coords.delta is not modified');

scope.interactions.signals.fire('action-move', { iEvent, interaction });

Expand Down Expand Up @@ -154,10 +142,10 @@ test('drag axis', t => {
tt.deepEqual(
iEvent.page,
{
[opposite]: startPage[opposite],
[opposite]: coords.start.page[opposite],
[axis]: eventCoords.page[axis],
},
`page.${opposite} is startCoords value`
`page.${opposite} is coords.start value`
);

tt.equal(
Expand All @@ -168,8 +156,8 @@ test('drag axis', t => {

tt.equal(
iEvent.client[opposite],
startClient[opposite],
`client.${opposite} is startCoords value`
coords.start.client[opposite],
`client.${opposite} is coords.start value`
);
tt.equal(
iEvent.client[axis],
Expand All @@ -187,11 +175,9 @@ test('drag axis', t => {
pointerUtils.copyCoords(iEvent, eventCoords);
extend(iEvent.delta, eventCoords.delta);

extend(interaction.startCoords.page , startPage);
extend(interaction.startCoords.client, startClient);

extend(interaction.pointerDelta.page , deltaPage);
extend(interaction.pointerDelta.client, deltaClient);
for (const prop in coords) {
pointerUtils.copyCoords(interaction.coords[prop], coords[prop]);
}
}

});
26 changes: 12 additions & 14 deletions packages/core/InteractEvent.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import extend from '@interactjs/utils/extend';
import getOriginXY from '@interactjs/utils/getOriginXY';
import defaults from './defaultOptions';
import hypot from '@interactjs/utils/hypot';

class InteractEvent {
/** */
Expand All @@ -14,10 +15,10 @@ class InteractEvent {
const ending = phase === 'end';
const prevEvent = starting? this : interaction.prevEvent;
const coords = starting
? interaction.startCoords
? interaction.coords.start
: ending
? { page: prevEvent.page, client: prevEvent.client, timeStamp: interaction.curCoords.timeStamp }
: interaction.curCoords;
? { page: prevEvent.page, client: prevEvent.client, timeStamp: interaction.coords.cur.timeStamp }
: interaction.coords.cur;

this.page = extend({}, coords.page);
this.client = extend({}, coords.client);
Expand Down Expand Up @@ -49,10 +50,10 @@ class InteractEvent {
? interaction.pointers[interaction.pointers.length - 1].downTime
: prevEvent.t0;

this.x0 = interaction.startCoords.page.x - origin.x;
this.y0 = interaction.startCoords.page.y - origin.y;
this.clientX0 = interaction.startCoords.client.x - origin.x;
this.clientY0 = interaction.startCoords.client.y - origin.y;
this.x0 = interaction.coords.start.page.x - origin.x;
this.y0 = interaction.coords.start.page.y - origin.y;
this.clientX0 = interaction.coords.start.client.x - origin.x;
this.clientY0 = interaction.coords.start.client.y - origin.y;

if (starting || ending) {
this.delta = { x: 0, y: 0 };
Expand All @@ -64,15 +65,12 @@ class InteractEvent {
};
}

this.dt = interaction.pointerDelta.timeStamp;
this.dt = interaction.coords.delta.timeStamp;
this.duration = this.timeStamp - this.t0;

// speed and velocity in pixels per second
this.speed = interaction.pointerDelta[deltaSource].speed;
this.velocity = {
x: interaction.pointerDelta[deltaSource].vx,
y: interaction.pointerDelta[deltaSource].vy,
};
// velocity and speed in pixels per second
this.velocity = extend({}, interaction.coords.velocity[deltaSource]);
this.speed = hypot(this.velocity.x, this.velocity.y);

this.swipe = (ending || phase === 'inertiastart')? this.getSwipe() : null;
}
Expand Down
65 changes: 26 additions & 39 deletions packages/core/Interaction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,31 +21,17 @@ class Interaction {
// keep track of added pointers
this.pointers = [/* { id, pointer, event, target, downTime }*/];

// Previous native pointer move event coordinates
this.prevCoords = {
page : { x: 0, y: 0 },
client : { x: 0, y: 0 },
timeStamp: 0,
};
// current native pointer move event coordinates
this.curCoords = {
page : { x: 0, y: 0 },
client : { x: 0, y: 0 },
timeStamp: 0,
};

// Starting InteractEvent pointer coordinates
this.startCoords = {
page : { x: 0, y: 0 },
client : { x: 0, y: 0 },
timeStamp: 0,
};

// Change in coordinates and time of the pointer
this.pointerDelta = {
page : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
client : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
timeStamp: 0,
this.coords = {
// Starting InteractEvent pointer coordinates
start: utils.pointer.newCoords(),
// Previous native pointer move event coordinates
prev: utils.pointer.newCoords(),
// current native pointer move event coordinates
cur: utils.pointer.newCoords(),
// Change in coordinates and time of the pointer
delta: utils.pointer.newCoords(),
// pointer velocity
velocity: utils.pointer.newCoords(),
};

this.downEvent = null; // pointerdown/mousedown/touchstart event
Expand Down Expand Up @@ -133,21 +119,21 @@ class Interaction {
pointerMove (pointer, event, eventTarget) {
if (!this.simulation) {
this.updatePointer(pointer, event, eventTarget, false);
utils.pointer.setCoords(this.curCoords, this.pointers.map(p => p.pointer));
utils.pointer.setCoords(this.coords.cur, this.pointers.map(p => p.pointer));
}

const duplicateMove = (this.curCoords.page.x === this.prevCoords.page.x
&& this.curCoords.page.y === this.prevCoords.page.y
&& this.curCoords.client.x === this.prevCoords.client.x
&& this.curCoords.client.y === this.prevCoords.client.y);
const duplicateMove = (this.coords.cur.page.x === this.coords.prev.page.x
&& this.coords.cur.page.y === this.coords.prev.page.y
&& this.coords.cur.client.x === this.coords.prev.client.x
&& this.coords.cur.client.y === this.coords.prev.client.y);

let dx;
let dy;

// register movement greater than pointerMoveTolerance
if (this.pointerIsDown && !this.pointerWasMoved) {
dx = this.curCoords.client.x - this.startCoords.client.x;
dy = this.curCoords.client.y - this.startCoords.client.y;
dx = this.coords.cur.client.x - this.coords.start.client.x;
dy = this.coords.cur.client.y - this.coords.start.client.y;

this.pointerWasMoved = utils.hypot(dx, dy) > this.pointerMoveTolerance;
}
Expand All @@ -164,8 +150,9 @@ class Interaction {
};

if (!duplicateMove) {
// set pointer coordinate, time changes and speeds
utils.pointer.setCoordDeltas(this.pointerDelta, this.prevCoords, this.curCoords);
// set pointer coordinate, time changes and velocity
utils.pointer.setCoordDeltas(this.coords.delta, this.coords.prev, this.coords.cur);
utils.pointer.setCoordVelocity(this.coords.velocity, this.coords.delta);
}

this._signals.fire('move', signalArg);
Expand All @@ -177,7 +164,7 @@ class Interaction {
}

if (this.pointerWasMoved) {
utils.pointer.copyCoords(this.prevCoords, this.curCoords);
utils.pointer.copyCoords(this.coords.prev, this.coords.cur);
}
}
}
Expand Down Expand Up @@ -332,14 +319,14 @@ class Interaction {
this.pointerIsDown = true;

if (!this.interacting()) {
utils.pointer.setCoords(this.startCoords, this.pointers.map(p => p.pointer));
utils.pointer.setCoords(this.coords.start, this.pointers.map(p => p.pointer));

utils.pointer.copyCoords(this.curCoords , this.startCoords);
utils.pointer.copyCoords(this.prevCoords, this.startCoords);
utils.pointer.copyCoords(this.coords.cur , this.coords.start);
utils.pointer.copyCoords(this.coords.prev, this.coords.start);
utils.pointer.pointerExtend(this.downPointer, pointer);

this.downEvent = event;
pointerInfo.downTime = this.curCoords.timeStamp;
pointerInfo.downTime = this.coords.cur.timeStamp;
pointerInfo.downTarget = eventTarget;

this.pointerWasMoved = false;
Expand Down
33 changes: 12 additions & 21 deletions packages/core/tests/Interaction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,6 @@ test('Interaction constructor', t => {
client : { x: 0, y: 0 },
timeStamp: 0,
};
const zeroDelta = {
page : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
client : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
timeStamp: 0,
};

t.equal(interaction._signals, signals,
'signals option is set assigned to interaction._signals');
Expand All @@ -35,14 +30,10 @@ test('Interaction constructor', t => {
t.ok(interaction.downPointer instanceof Object,
'interaction.downPointer is an object');

t.deepEqual(interaction.prevCoords, zeroCoords,
'interaction.prevCoords set to zero');
t.deepEqual(interaction.curCoords, zeroCoords,
'interaction.curCoords set to zero');
t.deepEqual(interaction.startCoords, zeroCoords,
'interaction.startCoords set to zero');
t.deepEqual(interaction.pointerDelta, zeroDelta,
'interaction.pointerDelta set to zero');
for (const coordField in interaction.coords) {
t.deepEqual(interaction.coords[coordField], zeroCoords,
`nteraction.coords.${coordField} set to zero`);
}

t.equal(interaction.pointerType, testType,
'interaction.pointerType is set');
Expand Down Expand Up @@ -198,7 +189,7 @@ test('Interaction.pointerDown', t => {
pointerUtils.setCoords(pointerCoords, [pointer]);

for (const prop in coords) {
pointerUtils.copyCoords(interaction[prop + 'Coords'], coords[prop]);
pointerUtils.copyCoords(interaction.coords[prop], coords[prop]);
}

// test while interacting
Expand All @@ -220,9 +211,9 @@ test('Interaction.pointerDown', t => {

t.deepEqual(interaction.downPointer, {}, 'downPointer is not updated');

t.deepEqual(interaction.startCoords, coords.start, 'startCoords are not modified');
t.deepEqual(interaction.curCoords, coords.cur, 'curCoords are not modified');
t.deepEqual(interaction.prevCoords, coords.prev, 'prevCoords are not modified');
t.deepEqual(interaction.coords.start, coords.start, 'coords.start are not modified');
t.deepEqual(interaction.coords.cur, coords.cur, 'coords.cur are not modified');
t.deepEqual(interaction.coords.prev, coords.prev, 'coords.prev are not modified');

t.ok(interaction.pointerIsDown, 'pointerIsDown');
t.notOk(interaction.pointerWasMoved, '!pointerWasMoved');
Expand All @@ -246,7 +237,7 @@ test('Interaction.pointerDown', t => {

// timeStamp is assigned with new Date.getTime()
// don't let it cause deepEaual to fail
pointerCoords.timeStamp = interaction.startCoords.timeStamp;
pointerCoords.timeStamp = interaction.coords.start.timeStamp;

t.equal(interaction.downEvent, event, 'downEvent is updated');

Expand All @@ -261,9 +252,9 @@ test('Interaction.pointerDown', t => {
}],
'interaction.pointers is updated');

t.deepEqual(interaction.startCoords, pointerCoords, 'startCoords are set to pointer');
t.deepEqual(interaction.curCoords, pointerCoords, 'curCoords are set to pointer');
t.deepEqual(interaction.prevCoords, pointerCoords, 'prevCoords are set to pointer');
t.deepEqual(interaction.coords.start, pointerCoords, 'coords.start are set to pointer');
t.deepEqual(interaction.coords.cur, pointerCoords, 'coords.cur are set to pointer');
t.deepEqual(interaction.coords.prev, pointerCoords, 'coords.prev are set to pointer');

t.equal(typeof signalArg, 'object', 'down signal was fired again');
t.ok(interaction.pointerIsDown, 'pointerIsDown');
Expand Down
Loading

0 comments on commit fc993a3

Please sign in to comment.