Allow for undo burst functionality (#36)

src/actions/index.js

@@ -58,6 +58,11 @@ export const addGIF = imageData => ({
   payload: { imageData }
 });
 
+export const undoBurst = (frames, frameIDs) => ({
+  type: types.UNDO_BURST,
+  payload: { frames, frameIDs }
+});
+
 export const togglePane = pane => {
   clearTimer();
   return {
@@ -140,7 +145,17 @@ export const requestFrame = opts => async dispatch => {
 };
 
 export const requestBurst = opts => async (dispatch, getState) => {
-  const { idx, min, max, step, width, height, oversample } = opts;
+  const {
+    idx,
+    min,
+    max,
+    step,
+    width,
+    height,
+    oversample,
+    frames,
+    frameIDs
+  } = opts;
   const imageOpts = {
     width,
     height,
@@ -161,6 +176,10 @@ export const requestBurst = opts => async (dispatch, getState) => {
     return;
   }
 
+  //
+  const prevFrames = { ...frames };
+  const prevFrameIDs = [...frameIDs];
+
   let imageData;
   let sliderErrorMessage;
   for (let val = min; val <= max; val += step) {
@@ -173,6 +192,9 @@ export const requestBurst = opts => async (dispatch, getState) => {
     imageData = await getImageData(imageOpts);
     dispatch(addFrame(imageData));
   }
+
+  //
+  return { prevFrames, prevFrameIDs };
 };
 
 export const startAnimation = () => (dispatch, getState) => {

src/components/Burst.css

@@ -60,3 +60,8 @@
   background: #484848;
   border-color: #e79600;
 }
+
+.capturing {
+  opacity: 0.5;
+  pointer-events: none;
+}

src/components/Burst.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
 
@@ -12,11 +13,16 @@ class Burst extends Component {
       min: -10,
       max: 10,
       step: 1,
+      isCapturing: false,
+      prevFrames: {},
+      prevFrameIDs: [],
+      prevCalcState: {},
       errors: {}
     };
 
     this.handleInputUpdate = this.handleInputUpdate.bind(this);
     this.handleRequestBurst = this.handleRequestBurst.bind(this);
+    this.handleUndoBurst = this.handleUndoBurst.bind(this);
   }
 
   handleInputUpdate(evt) {
@@ -32,9 +38,47 @@ class Burst extends Component {
     this.setState(newState);
   }
 
-  handleRequestBurst() {
-    const { requestBurst, expanded, ...imgOpts } = this.props;
-    requestBurst({ ...this.state, ...imgOpts });
+  async handleRequestBurst() {
+    this.setState({ isCapturing: true });
+    const { requestBurst, expanded, frames, frameIDs, ...imgOpts } = this.props;
+    // grab calculator state prior to capture
+    const prevCalcState = getCalcState();
+    // capture
+    const undoData = await requestBurst({
+      ...this.state,
+      ...imgOpts,
+      frames,
+      frameIDs
+    });
+    // if capture was successful, update state accordingly
+    if (undoData) {
+      const { prevFrames, prevFrameIDs } = undoData;
+      this.setState({
+        isCapturing: false,
+        prevFrames,
+        prevFrameIDs,
+        prevCalcState
+      });
+    }
+    // update isCapturing regardless
+    else {
+      this.setState({ isCapturing: false });
+    }
+  }
+
+  handleUndoBurst() {
+    const { undoBurst } = this.props;
+    const { prevFrames, prevFrameIDs, prevCalcState } = this.state;
+    // dispatch action to change frames, frameIDs in state
+    undoBurst(prevFrames, prevFrameIDs);
+    // revert calculator state
+    setCalcState(prevCalcState);
+    // clear out undo data in local state
+    this.setState({
+      prevFrames: {},
+      prevFrameIDs: [],
+      prevCalcState: {}
+    });
   }
 
   render() {
@@ -91,13 +135,26 @@ class Burst extends Component {
         />
         <div>
           <button
-            className="Burst-button"
+            className={classNames('Burst-button', {
+              capturing: this.state.isCapturing
+            })}
             onClick={this.handleRequestBurst}
             aria-label="capture several frames"
           >
-            Capture
+            {this.state.isCapturing ? 'Capturing...' : 'Capture'}
           </button>
         </div>
+        {this.state.prevFrameIDs.length ? (
+          <div>
+            <button
+              className="Burst-button"
+              onClick={this.handleUndoBurst}
+              aria-label="undo last burst"
+            >
+              Undo
+            </button>
+          </div>
+        ) : null}
       </div>
     );
   }

src/constants/action-types.js

@@ -11,6 +11,7 @@
 export const ADD_FRAME = 'ADD_FRAME';
 export const UPDATE_GIF_PROGRESS = 'UPDATE_GIF_PROGRESS';
 export const ADD_GIF = 'ADD_GIF';
+export const UNDO_BURST = 'UNDO_BURST';
 
 // UI
 export const UPDATE_PREVIEW_IDX = 'UPDATE_PREVIEW_IDX';

src/containers/BurstContainer.js

@@ -1,23 +1,26 @@
 import { connect } from 'react-redux';
 import Burst from '../components/Burst';
-import { requestBurst } from '../actions';
+import { requestBurst, undoBurst } from '../actions';
 import panes from '../constants/pane-types';
 
 const mapStateToProps = (state, ownProps) => {
-  const { settings, ui } = state;
+  const { settings, ui, images } = state;
   const { width, height, oversample } = settings.image;
+  const { frames, frameIDs } = images;
 
   return {
     expanded: ui.expandedPane === panes.BURST,
     width,
     height,
-    oversample
+    oversample,
+    frames,
+    frameIDs
   };
 };
 
 const BurstContainer = connect(
   mapStateToProps,
-  { requestBurst }
+  { requestBurst, undoBurst }
 )(Burst);
 
 export default BurstContainer;

src/lib/calc-helpers.js

@@ -39,3 +39,13 @@ export const setSliderByIndex = (idx, val) => {
   const identifier = match[1];
   calculator.setExpression({ id, latex: `${identifier}=${val}` });
 };
+
+// gets current state of calculator instance
+export const getCalcState = () => {
+  return calculator.getState();
+};
+
+// accepts some calculator state and updates calculator instance
+export const setCalcState = state => {
+  return calculator.setState(state);
+};

src/reducers/images.js

@@ -12,6 +12,7 @@ import {
   ADD_FRAME,
   UPDATE_GIF_PROGRESS,
   ADD_GIF,
+  UNDO_BURST,
   UPDATE_IMAGE_SETTING,
   UPDATE_BOUNDS_SETTING,
   UPDATE_STRATEGY,
@@ -53,6 +54,13 @@ const images = (state = initialState, { type, payload }) => {
         gifData: payload.imageData
       };
 
+    case UNDO_BURST:
+      return {
+        ...state,
+        frames: payload.frames,
+        frameIDs: payload.frameIDs
+      };
+
     case UPDATE_IMAGE_SETTING:
     case UPDATE_BOUNDS_SETTING:
     case UPDATE_STRATEGY: