#453 Undo/Redo Actions

m2ms · Nov 12, 2020 · 50d6c9f · 50d6c9f
1 parent 35f73e9
commit 50d6c9f
Show file tree

Hide file tree

Showing 11 changed files with 905 additions and 457 deletions.
diff --git a/js/components/preview/viewerControls/index.js b/js/components/preview/viewerControls/index.js
@@ -2,13 +2,17 @@
  * Created by ricgillams on 28/06/2018.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useContext } from 'react';
+import { useDispatch } from 'react-redux';
 import { Button } from '../../common/Inputs/Button';
-import { Settings, Mouse, PersonalVideo } from '@material-ui/icons';
+import { Settings, Mouse, PersonalVideo, Undo, Redo } from '@material-ui/icons';
 import { ButtonGroup, Grid, makeStyles, Tooltip } from '@material-ui/core';
 import { SettingControls } from './settingsControls';
 import DisplayControls from './displayControls/';
 import { MouseControls } from './mouseControls';
+import { ActionCreators as UndoActionCreators } from 'redux-undo';
+import { undoAction, redoAction, getCanRedo, getCanUndo } from '../../../../js/reducers/tracking/dispatchActions';
+import { NglContext } from '../../nglView/nglProvider';
 
 const drawers = {
   settings: 'settings',
@@ -27,6 +31,10 @@ const useStyles = makeStyles(theme => ({
 export const ViewerControls = memo(({}) => {
   const [drawerSettings, setDrawerSettings] = useState(JSON.parse(JSON.stringify(initDrawers)));
   const classes = useStyles();
+  const dispatch = useDispatch();
+  const { nglViewList } = useContext(NglContext);
+  const [canUndo, setCanUndo] = useState(true);
+  const [canRedo, setCanRedo] = useState(false);
 
   const openDrawer = key => {
     //close all and open selected by key
@@ -43,6 +51,22 @@ export const ViewerControls = memo(({}) => {
       <Grid container justify="center">
         <Grid item>
           <ButtonGroup variant="contained" color="primary">
+            <Tooltip title="Undo">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => {
+                  dispatch(UndoActionCreators.undo());
+                  setCanRedo(dispatch(getCanRedo()));
+                  setCanUndo(dispatch(getCanUndo()));
+                  dispatch(undoAction(nglViewList));
+                }}
+                className={classes.button}
+                disabled={!canUndo}
+              >
+                <Undo />
+              </Button>
+            </Tooltip>
             <Tooltip title="Settings controls">
               <Button
                 size="small"
@@ -68,6 +92,22 @@ export const ViewerControls = memo(({}) => {
                 <Mouse />
               </Button>
             </Tooltip>
+            <Tooltip title="Redo">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => {
+                  dispatch(UndoActionCreators.redo());
+                  setCanRedo(dispatch(getCanRedo()));
+                  setCanUndo(dispatch(getCanUndo()));
+                  dispatch(redoAction(nglViewList));
+                }}
+                className={classes.button}
+                disabled={!canRedo}
+              >
+                <Redo />
+              </Button>
+            </Tooltip>
           </ButtonGroup>
         </Grid>
       </Grid>

diff --git a/js/components/tracking/trackingModal.js b/js/components/tracking/trackingModal.js
@@ -40,7 +40,7 @@ export const TrackingModal = memo(({ openModal, onModalClose }) => {
   const { nglViewList } = useContext(NglContext);
 
   const actionList = useSelector(state => state.trackingReducers.truck_actions_list);
-  const orderedActionList = actionList.sort((a, b) => a.timestamp - b.timestamp);
+  const orderedActionList = (actionList && actionList.sort((a, b) => a.timestamp - b.timestamp)) || [];
 
   if (openModal === undefined) {
     console.log('undefined openModal');

diff --git a/js/reducers/rootReducer.js b/js/reducers/rootReducer.js
@@ -4,14 +4,14 @@
 import { combineReducers } from 'redux';
 import apiReducers from './api/apiReducers';
 import nglReducers from './ngl/nglReducers';
-import selectionReducers from './selection/selectionReducers';
+import { selectionReducers } from './selection/selectionReducers';
 import { targetReducers } from '../components/target/redux/reducer';
 import { snapshotReducers } from '../components/snapshot/redux/reducer';
 import { previewReducers } from '../components/preview/redux';
 import { projectReducers } from '../components/projects/redux/reducer';
 import { issueReducers } from '../components/userFeedback/redux/reducer';
 import { datasetsReducers } from '../components/datasets/redux/reducer';
-import trackingReducers from './tracking/trackingReducers';
+import { trackingReducers, undoableTrackingReducers } from './tracking/trackingReducers';
 
 const rootReducer = combineReducers({
   apiReducers,
@@ -23,7 +23,8 @@ const rootReducer = combineReducers({
   projectReducers,
   issueReducers,
   datasetsReducers,
-  trackingReducers
+  trackingReducers,
+  undoableTrackingReducers
 });
 
 export { rootReducer };
diff --git a/js/reducers/selection/selectionReducers.js b/js/reducers/selection/selectionReducers.js
@@ -28,7 +28,7 @@ export const INITIAL_STATE = {
   currentVector: null // selected vector smile (ID) of compoundsOfVectors
 };
 
-export default function selectionReducers(state = INITIAL_STATE, action = {}) {
+export function selectionReducers(state = INITIAL_STATE, action = {}) {
   switch (action.type) {
     case constants.SET_TO_BUY_LIST:
       return Object.assign({}, state, {

diff --git a/js/reducers/tracking/actions.js b/js/reducers/tracking/actions.js
@@ -34,3 +34,10 @@ export const setIsTrackingCompoundsRestoring = function(isTrackingCompoundsResto
     isTrackingCompoundsRestoring: isTrackingCompoundsRestoring
   };
 };
+
+export const setIsUndoRedoAction = function(isUndoRedoAction) {
+  return {
+    type: constants.SET_IS_UNDO_REDO_ACTION,
+    isUndoRedoAction: isUndoRedoAction
+  };
+};
diff --git a/js/reducers/tracking/constants.js b/js/reducers/tracking/constants.js
@@ -5,7 +5,8 @@ export const constants = {
   APPEND_ACTIONS_LIST: prefix + 'APPEND_ACTIONS_LIST',
   SET_CURRENT_ACTIONS_LIST: prefix + 'SET_CURRENT_ACTIONS_LIST',
   SET_IS_TRACKING_COMPOUNDS_RESTORING: prefix + 'SET_IS_TRACKING_COMPOUNDS_RESTORING',
-  SET_IS_TRACKING_MOLECULES_RESTORING: prefix + 'SET_IS_TRACKING_MOLECULES_RESTORING'
+  SET_IS_TRACKING_MOLECULES_RESTORING: prefix + 'SET_IS_TRACKING_MOLECULES_RESTORING',
+  SET_IS_UNDO_REDO_ACTION: prefix + 'SET_IS_UNDO_REDO_ACTION'
 };
 
 export const actionType = {
@@ -30,7 +31,9 @@ export const actionType = {
   COMPOUND_DESELECTED: 'COMPOUND_DESELECTED',
   REPRESENTATION_CHANGED: 'REPRESENTATION_CHANGED',
   REPRESENTATION_ADDED: 'REPRESENTATION_ADDED',
-  REPRESENTATION_REMOVED: 'REPRESENTATION_REMOVED'
+  REPRESENTATION_REMOVED: 'REPRESENTATION_REMOVED',
+  UNDO: 'UNDO',
+  REDO: 'REDO'
 };
 
 export const actionDescription = {