Added Functionality for Adding Bounds to Burst Capture #30

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

src/actions/action-creators.test.js

@@ -228,7 +228,12 @@ describe('Action creators', () => {
         min: -3,
         oversample: false,
         step: 1,
-        width: 300
+        width: 300,
+        mode: 'contain',
+        left: -10,
+        right: 10,
+        bottom: -10,
+        top: 10
       };
       initializeCalculator(desmosMock, calcContainerMock);
       return store.dispatch(actions.requestBurst(opts)).then(() => {

src/actions/index.js

@@ -27,7 +27,6 @@
  */
 
 import * as types from '../constants/action-types';
-
 import {
   setSliderByIndex,
   getImageData,
@@ -201,15 +200,19 @@ export const requestBurst = opts => async (dispatch, getState) => {
     left,
     right,
     top,
-    bottom
+    bottom,
+    strategy
   } = opts;
   const imageOpts = {
     width,
     height,
-    left,
-    right,
-    top,
-    bottom,
+    mathBounds: {
+      top,
+      bottom,
+      left,
+      right
+    },
+    mode: strategy,
     targetPixelRatio: oversample ? 2 : 1
   };
 
@@ -227,6 +230,12 @@ export const requestBurst = opts => async (dispatch, getState) => {
     return;
   }
 
+  const boundErrors = getBoundErrors({ top, bottom, left, right });
+  if (Object.keys(boundErrors).length) {
+    dispatch(flashError(invalidBounds(boundErrors)));
+    return;
+  }
+
   let imageData;
   let sliderErrorMessage;
   for (let val = min; val <= max; val += step) {

src/components/Burst.css

@@ -60,3 +60,9 @@
   background: #484848;
   border-color: #e79600;
 }
+
+.Bound-text {
+  margin: 1rem;
+  font-size: 17px;
+  font-family: Arial, Helvetica, sans-serif;
+}

src/components/Settings.js

@@ -58,7 +58,6 @@ class Settings extends Component {
           value={isNaN(width) ? '' : width}
           onChange={this.handleInputUpdate}
         />
-
         <div data-testid="Settings-image-height-label">Image Height</div>
         <input
           className={classNames('Settings-input', {
@@ -70,7 +69,6 @@ class Settings extends Component {
           value={isNaN(height) ? '' : height}
           onChange={this.handleInputUpdate}
         />
-
         <div data-testid="Settings-frame-interval-label">Interval (ms)</div>
         <input
           className={classNames('Settings-input', {

src/containers/BurstContainer.js

@@ -7,6 +7,7 @@ const mapStateToProps = (state, ownProps) => {
   const { settings, ui } = state;
   const { width, height, oversample } = settings.image;
   const { left, right, top, bottom } = settings.bounds;
+  const { strategy } = settings;
 
   return {
     expanded: ui.expandedPane === panes.BURST,
@@ -16,7 +17,8 @@ const mapStateToProps = (state, ownProps) => {
     left,
     right,
     top,
-    bottom
+    bottom,
+    strategy
   };
 };
 

src/lib/error-messages.js

@@ -42,8 +42,9 @@ export const badBurstInput = errors => {
       propText = 'input';
   }
 
-  if (propText === propMap.idx)
+  if (propText === propMap.idx) {
     return `Your ${propText} must be a positive integer.`;
+  }
 
   return `Your ${propText} isn't quite right.`;
 };