update west and east panning to behave like google maps

elastic · Jan 21, 2020 · 5ca3ff2 · 5ca3ff2
1 parent bc5545f
commit 5ca3ff2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/panning.test.ts b/x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/panning.test.ts
@@ -64,7 +64,7 @@ describe('panning interaction', () => {
         const action: CameraAction = { type: 'userClickedPanControl', payload: 'north' };
         store.dispatch(action);
       });
-      it('translation should be updated north', () => {
+      it('moves the camera south so that objects appear closer to the bottom of the screen', () => {
         const actual = translation(store.getState());
         expect(actual).toMatchInlineSnapshot(`
           Array [
@@ -79,7 +79,7 @@ describe('panning interaction', () => {
         const action: CameraAction = { type: 'userClickedPanControl', payload: 'south' };
         store.dispatch(action);
       });
-      it('translation should be updated south', () => {
+      it('moves the camera north so that objects appear closer to the top of the screen', () => {
         const actual = translation(store.getState());
         expect(actual).toMatchInlineSnapshot(`
           Array [
@@ -94,11 +94,11 @@ describe('panning interaction', () => {
         const action: CameraAction = { type: 'userClickedPanControl', payload: 'east' };
         store.dispatch(action);
       });
-      it('translation should be updated east', () => {
+      it('moves the camera west so that objects appear closer to the left of the screen', () => {
         const actual = translation(store.getState());
         expect(actual).toMatchInlineSnapshot(`
           Array [
-            32.49906769231164,
+            -32.49906769231164,
             0,
           ]
         `);
@@ -109,11 +109,11 @@ describe('panning interaction', () => {
         const action: CameraAction = { type: 'userClickedPanControl', payload: 'west' };
         store.dispatch(action);
       });
-      it('translation should be updated west', () => {
+      it('moves the camera east so that objects appear closer to the right of the screen', () => {
         const actual = translation(store.getState());
         expect(actual).toMatchInlineSnapshot(`
           Array [
-            -32.49906769231164,
+            32.49906769231164,
             0,
           ]
         `);

diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/reducer.ts b/x-pack/plugins/endpoint/public/embeddables/resolver/store/camera/reducer.ts
@@ -112,16 +112,19 @@ export const cameraReducer: Reducer<CameraState, ResolverAction> = (
     }
   } else if (action.type === 'userClickedPanControl') {
     const panDirection = action.payload;
+    /**
+     * Delta amount will be in the range of 20 -> 40 depending on the scalingFactor
+     */
     const deltaAmount = (1 + state.scalingFactor) * 20;
     let delta: Vector2;
     if (panDirection === 'north') {
       delta = [0, -deltaAmount];
     } else if (panDirection === 'south') {
       delta = [0, deltaAmount];
     } else if (panDirection === 'east') {
-      delta = [deltaAmount, 0];
-    } else if (panDirection === 'west') {
       delta = [-deltaAmount, 0];
+    } else if (panDirection === 'west') {
+      delta = [deltaAmount, 0];
     } else {
       delta = [0, 0];
     }