Settings bounds #27

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 
+
 # testing
 /coverage
 

src/actions/action-creators.test.js

@@ -205,7 +205,14 @@ describe('Action creators', () => {
       const opts = {
         height: 300,
         targetPixelRatio: 1,
-        width: 300
+        width: 300,
+        mode: 'contain',
+        mathBounds: {
+          left: -10,
+          right: 10,
+          bottom: -10,
+          top: 10
+        }
       };
       initializeCalculator(desmosMock, calcContainerMock);
       return store.dispatch(actions.requestFrame(opts)).then(() => {

src/actions/index.js

@@ -27,21 +27,28 @@
  */
 
 import * as types from '../constants/action-types';
+
 import {
   setSliderByIndex,
   getImageData,
   loadSavedGraph,
   saveCurrentGraph
 } from '../lib/calc-helpers';
+
 import { startTimer, clearTimer } from '../lib/timer';
+
 import {
   gifCreationProblem,
   badBurstInput,
   badSettingsInput,
+  invalidBounds,
   badNameInput
 } from '../lib/error-messages';
+
 import download from 'downloadjs';
+
 import {
+  getBoundErrors,
   getBurstErrors,
   getSettingsErrors,
   getSaveGraphErrors
@@ -164,22 +171,45 @@ export const flashError = message => dispatch => {
 
 export const requestFrame = opts => async dispatch => {
   const { width, height } = opts;
+  const { left, right, top, bottom } = opts.mathBounds;
 
   const settingsErrors = getSettingsErrors({ width, height });
   if (Object.keys(settingsErrors).length) {
     dispatch(flashError(badSettingsInput(settingsErrors)));
     return;
   }
 
+  const boundErrors = getBoundErrors({ left, right, top, bottom });
+  if (Object.keys(boundErrors).length) {
+    dispatch(flashError(invalidBounds(boundErrors)));
+    return;
+  }
+
   const imageData = await getImageData(opts);
   dispatch(addFrame(imageData));
 };
 
 export const requestBurst = opts => async (dispatch, getState) => {
-  const { idx, min, max, step, width, height, oversample } = opts;
+  const {
+    idx,
+    min,
+    max,
+    step,
+    width,
+    height,
+    oversample,
+    left,
+    right,
+    top,
+    bottom
+  } = opts;
   const imageOpts = {
     width,
     height,
+    left,
+    right,
+    top,
+    bottom,
     targetPixelRatio: oversample ? 2 : 1
   };
 

src/components/Preview.test.js

@@ -19,6 +19,6 @@ describe('<Preview/>', () => {
     expect(
       getByTestId('Preview-container').querySelector('.GenerateGifForm-button')
         .textContent
-    ).toBe('Download GIF!');
+    ).toBe('Download GIF');
   });
 });