Allow for undo burst functionality (#36)

src/actions/action-creators.test.js

@@ -229,6 +229,7 @@ describe('Action creators', () => {
         oversample: false,
         step: 1,
         width: 300,
+        frameIDs: [0, 1, 2],
         mode: 'contain',
         left: -10,
         right: 10,

src/actions/index.js

@@ -100,6 +100,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 {
@@ -197,6 +202,8 @@ export const requestBurst = opts => async (dispatch, getState) => {
     width,
     height,
     oversample,
+    frames,
+    frameIDs,
     left,
     right,
     top,
@@ -229,13 +236,13 @@ export const requestBurst = opts => async (dispatch, getState) => {
     dispatch(flashError(badSettingsInput(settingsErrors)));
     return;
   }
-
+  const prevFrames = { ...frames };
+  const prevFrameIDs = [...frameIDs];
   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) {
@@ -248,6 +255,8 @@ 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

@@ -61,6 +61,11 @@
   border-color: #e79600;
 }
 
+.capturing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .Bound-text {
   margin: 1rem;
   font-size: 17px;

src/components/Burst.js

@@ -1,22 +1,34 @@
 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';
 
 class Burst extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       idx: 1,
       min: -10,
       max: 10,
       step: 1,
+      isCapturing: false,
+      canUndo: false,
+      prevFrames: {},
+      prevFrameIDs: [],
+      prevCalcState: {},
       errors: {}
     };
 
     this.handleInputUpdate = this.handleInputUpdate.bind(this);
     this.handleRequestBurst = this.handleRequestBurst.bind(this);
+    this.handleUndoBurst = this.handleUndoBurst.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.frameIDs.length !== prevProps.frameIDs.length) {
+      this.setState({ canUndo: false });
+    }
   }
 
   handleInputUpdate(evt) {
@@ -32,9 +44,41 @@ class Burst extends Component {
     this.setState(newState);
   }
 
-  handleRequestBurst() {
-    const { requestBurst, expanded, ...imgOpts } = this.props;
-    requestBurst({ ...this.state, ...imgOpts });
+  async handleRequestBurst() {
+    this.setState({ isCapturing: true, canUndo: false });
+    const { requestBurst, expanded, frames, frameIDs, ...imgOpts } = this.props;
+    const prevCalcState = getCalcState();
+    const undoData = await requestBurst({
+      ...this.state,
+      ...imgOpts,
+      frames,
+      frameIDs
+    });
+    if (undoData) {
+      const { prevFrames, prevFrameIDs } = undoData;
+      this.setState({
+        isCapturing: false,
+        canUndo: true,
+        prevFrames,
+        prevFrameIDs,
+        prevCalcState
+      });
+    } else {
+      this.setState({ isCapturing: false });
+    }
+  }
+
+  handleUndoBurst() {
+    const { undoBurst } = this.props;
+    const { prevFrames, prevFrameIDs, prevCalcState } = this.state;
+    undoBurst(prevFrames, prevFrameIDs);
+    setCalcState(prevCalcState);
+    this.setState({
+      canUndo: false,
+      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.canUndo ? (
+          <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';
 export const UPDATE_TEXT = 'UPDATE_TEXT';
 export const UPDATE_TEXT_COLOR = 'UPDATE_TEXT_COLOR';
 export const UPDATE_GIF_FILENAME = 'UPDATE_GIF_FILENAME';

src/containers/BurstContainer.js

@@ -1,11 +1,12 @@
 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;
   const { left, right, top, bottom } = settings.bounds;
   const { strategy } = settings;
 
@@ -14,6 +15,8 @@ const mapStateToProps = (state, ownProps) => {
     width,
     height,
     oversample,
+    frames,
+    frameIDs,
     left,
     right,
     top,
@@ -24,7 +27,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const BurstContainer = connect(
   mapStateToProps,
-  { requestBurst }
+  { requestBurst, undoBurst }
 )(Burst);
 
 export default BurstContainer;

src/lib/calc-helpers.js

@@ -46,6 +46,14 @@ export const setSliderByIndex = (idx, val) => {
   calculator.setExpression({ id, latex: `${identifier}=${val}` });
 };
 
+export const getCalcState = () => {
+  return calculator.getState();
+};
+
+export const setCalcState = state => {
+  return calculator.setState(state);
+};
+
 export const saveCurrentGraph = async (name, frames, frameIDs) => {
   const graph = calculator.getState();
   const preview = await getImageData({

src/reducers/images.js

@@ -12,6 +12,7 @@ import {
   ADD_FRAME,
   UPDATE_GIF_PROGRESS,
   ADD_GIF,
+  UNDO_BURST,
   UPDATE_GIF_FILENAME,
   UPDATE_IMAGE_SETTING,
   UPDATE_BOUNDS_SETTING,
@@ -59,6 +60,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: