modifiers/base: fix start coords

taye · Jun 3, 2018 · 6ffef45 · 6ffef45
1 parent 6778e44
commit 6ffef45
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/packages/modifiers/base.js b/packages/modifiers/base.js
@@ -73,7 +73,9 @@ function start ({ interaction, phase }, pageCoords) {
   if (!('height' in rect)) { rect.height = rect.bottom - rect.top ; }
 
   const startOffset = getRectOffset(rect, pageCoords);
+
   interaction.modifiers.startOffset = startOffset;
+  interaction.modifiers.startDelta = { x: 0, y: 0 };
 
   const arg = {
     interaction,
@@ -243,37 +245,33 @@ function stop (arg) {
 
 function setCoords (arg) {
   const { interaction, phase } = arg;
-  const coordsSets = [arg.curCoords || interaction.coords.cur];
-
-  const { delta } = interaction.modifiers.result;
+  const curCoords = arg.curCoords || interaction.coords.cur;
+  const startCoords = arg.startCoords || interaction.coords.start;
+  const { result, startDelta } = interaction.modifiers;
+  const curDelta = result.delta;
 
   if (phase === 'start') {
-    coordsSets.unshift(arg.startCoords || interaction.coords.start);
-    interaction.modifiers.startDelta = extend({}, delta);
+    extend(interaction.modifiers.startDelta, result.delta);
   }
 
-  for (const coordsSet of coordsSets) {
+  for (const [coordsSet, delta] of [[startCoords, startDelta], [curCoords, curDelta]]) {
     coordsSet.page.x   += delta.x;
     coordsSet.page.y   += delta.y;
     coordsSet.client.x += delta.x;
     coordsSet.client.y += delta.y;
   }
 }
 
-function restoreCoords ({ interaction: { coords, modifiers }, phase }) {
-  const { startDelta, result: { delta } } = modifiers;
+function restoreCoords ({ interaction: { coords, modifiers } }) {
+  const { startDelta, result: { delta: curDelta } } = modifiers;
 
-  if (phase === 'start') {
-    coords.start.page.x -= startDelta.x;
-    coords.start.page.y -= startDelta.y;
-    coords.start.client.x -= startDelta.x;
-    coords.start.client.y -= startDelta.y;
+  for (const [coordsSet, delta] of [[coords.start, startDelta], [coords.cur, curDelta]]) {
+    coordsSet.page.x -= delta.x;
+    coordsSet.page.y -= delta.y;
+    coordsSet.client.x -= delta.x;
+    coordsSet.client.y -= delta.y;
   }
 
-  coords.cur.page.x -= delta.x;
-  coords.cur.page.y -= delta.y;
-  coords.cur.client.x -= delta.x;
-  coords.cur.client.y -= delta.y;
 }
 
 function getModifierList (interaction) {

diff --git a/packages/modifiers/tests/base.js b/packages/modifiers/tests/base.js
@@ -15,17 +15,24 @@ test('modifiers/base', t => {
 
   const element = utils.win.window.document.documentElement;
   const interactable = scope.interactables.new(element);
-  const event = {
+  const startEvent = {
     pageX: 100,
     pageY: 200,
     clientX: 100,
     clientY: 200,
     target: element,
   };
+  const moveEvent = {
+    pageX: 400,
+    pageY: 500,
+    clientX: 400,
+    clientY: 500,
+    target: element,
+  };
   const options = { target: { x: 100, y: 100 }, setStart: true };
 
   interactable.rectChecker(() => ({ top: 0, left: 0, bottom: 50, right: 50 }));
-  interaction.pointerDown(event, event, event.target);
+  interaction.pointerDown(startEvent, startEvent, element);
 
   interactable.options.test = {
     modifiers: [
@@ -50,19 +57,35 @@ test('modifiers/base', t => {
 
   t.deepEqual(
     interaction.prevEvent.page,
-    { x: 100, y: 100},
+    options.target,
     'start event coords are modified');
 
   t.deepEqual(
     interaction.coords.start.page,
     { x: 100, y: 200},
-    'interaction.coords.start are restored after action phase');
+    'interaction.coords.start are restored after action start phase');
 
   t.deepEqual(
     interaction.coords.cur.page,
     { x: 100, y: 200},
-    'interaction.coords.cur are restored after action phase');
+    'interaction.coords.cur are restored after action start phase');
+
+  interaction.pointerMove(moveEvent, moveEvent, element);
+
+  t.deepEqual(
+    interaction.coords.cur.page,
+    { x: moveEvent.pageX, y: moveEvent.pageY },
+    'interaction.coords.cur are restored after action move phase');
 
+  t.deepEqual(
+    interaction.coords.start.page,
+    { x: startEvent.pageX, y: startEvent.pageY },
+    'interaction.coords.start are restored after action move phase');
+
+  t.deepEqual(
+    { x: interaction.prevEvent.x0, y: interaction.prevEvent.y0 },
+    { x: 100, y: 100},
+    'move event start coords are modified');
 
   interaction.stop();
 
@@ -79,6 +102,7 @@ test('modifiers/base', t => {
     methods: doubleModifier,
   });
 
+  interaction.pointerDown(startEvent, startEvent, element);
   interaction.start({ name: 'test' }, interactable, element);
 
   t.notOk(
@@ -96,14 +120,6 @@ test('modifiers/base', t => {
     { x: 100, y: 200},
     'interaction.coords.start are not modified without options.setStart');
 
-  const moveEvent = {
-    pageX: 400,
-    pageY: 500,
-    clientX: 400,
-    clientY: 500,
-    target: element,
-  };
-
   interaction.pointerMove(moveEvent, moveEvent, element);
 
   t.deepEqual(