Add forward and background arrows to canvas to undo/redo

package.json

@@ -110,6 +110,7 @@
     "react-markdown": "^2.2.0",
     "react-modal": "^1.2.1",
     "react-redux": "^4.4.5",
+    "react-tooltip": "^2.0.2",
     "redux": "^3.5.2",
     "redux-crud": "^0.10.1",
     "redux-saga": "^0.10.4",

src/components/spaces/denormalized-space-selector.js

@@ -1,8 +1,21 @@
 import { createSelector } from 'reselect';
 import e from 'gEngine/engine'
 
-const spaceGraphSelector = state => { return _.pick(state, 'spaces', 'metrics', 'guesstimates', 'simulations', 'users', 'organizations', 'userOrganizationMemberships', 'me') }
-const spaceSelector = (state, props) => {return state.spaces.find(s => s.id.toString() === props.spaceId.toString())}
+function _sameId(idA, idB){
+  return idA.toString() === idB.toString()
+}
+
+function checkpointMetadata(id, checkpoints) {
+  let attributes = {head: 0, length: 1}
+  let spaceCheckpoints = checkpoints.find(i => _sameId(i.spaceId, id))
+  if (!_.isEmpty(spaceCheckpoints)) {
+    attributes = {head: spaceCheckpoints.head, length: spaceCheckpoints.checkpoints.length}
+  }
+  return attributes
+}
+
+const spaceGraphSelector = state => { return _.pick(state, 'spaces', 'metrics', 'guesstimates', 'simulations', 'users', 'organizations', 'userOrganizationMemberships', 'me', 'checkpoints') }
+const spaceSelector = (state, props) => {return state.spaces.find(s => _sameId(s.id, props.spaceId))}
 const canvasStateSelector = state => {return state.canvasState}
 const guesstimateFormSelector = state => {return state.guesstimateForm}
 
@@ -17,6 +30,8 @@ export const denormalizedSpaceSelector = createSelector(
     if (dSpace) {
       dSpace.edges = e.dgraph.dependencyMap(dSpace, guesstimateForm)
       dSpace.canvasState = canvasState
+
+      dSpace.checkpointMetadata = checkpointMetadata(space.id, graph.checkpoints)
       dSpace.metrics = dSpace.metrics.map(s => {
         let edges = {}
         edges.inputs = dSpace.edges.filter(i => i.output === s.id).map(e => e.input)

src/components/spaces/show/header.js

@@ -6,6 +6,7 @@ import CanvasViewForm from './canvasViewForm'
 import DropDown, {DropDownListElement} from 'gComponents/utility/drop-down/index'
 import {PrivacyToggle} from './privacy-toggle/index'
 import {SpaceName} from './spaceName'
+import ReactTooltip from 'react-tooltip'
 
 import e from 'gEngine/engine'
 
@@ -50,14 +51,21 @@ const SpaceHeader = ({
   onPublicSelect,
   onPrivateSelect,
   onSaveName,
+  onUndo,
+  canUndo,
+  onRedo,
+  canRedo
 }) => {
   let privacy_header = (<span><Icon name='globe'/> Public</span>)
   if (isPrivate) {
     privacy_header = (<span><Icon name='lock'/> Private</span>)
   }
+  const ReactTooltipParams = {class: 'small-tooltip', delayShow: 0, delayHide: 0, place: 'bottom', effect: 'solid'}
 
   return (
     <div className='header'>
+      <ReactTooltip {...ReactTooltipParams} id='undo-button'>Undo (ctrl-z)</ReactTooltip>
+      <ReactTooltip {...ReactTooltipParams} id='redo-button'>Redo (ctrl-shift-z)</ReactTooltip>
 
       <div className='header-name'>
         <SpaceName
@@ -68,6 +76,17 @@ const SpaceHeader = ({
       </div>
 
       <div className='header-actions'>
+        {editableByMe &&
+          <div className='ui buttons tiny'>
+            <button onClick={onUndo} className={`ui icon button ${canUndo ? '' : 'disabled'}`} data-tip data-for='undo-button'>
+              <Icon name='undo'/>
+            </button>
+            <button onClick={onRedo} className={`ui icon button ${canRedo ? '' : 'disabled'}`} data-tip data-for='redo-button'>
+              <Icon name='repeat'/>
+            </button>
+          </div>
+        }
+
         <CanvasViewForm/>
 
         {editableByMe &&

src/components/spaces/show/index.js

@@ -11,6 +11,7 @@ import Canvas from 'gComponents/spaces/canvas'
 import {denormalizedSpaceSelector} from '../denormalized-space-selector.js'
 
 import * as spaceActions from 'gModules/spaces/actions.js'
+import {undo, redo} from 'gModules/checkpoints/actions'
 
 import e from 'gEngine/engine'
 
@@ -67,31 +68,41 @@ export default class SpacesShow extends Component {
 
   fetchData() {
     if (!this.state.attemptedFetch) {
-      this.props.dispatch(spaceActions.fetchById(parseInt(this.props.spaceId)))
+      this.props.dispatch(spaceActions.fetchById(this._id()))
       this.setState({attemptedFetch: true})
     }
   }
 
   onSave() {
-    this.props.dispatch(spaceActions.update(parseInt(this.props.spaceId)))
+    this.props.dispatch(spaceActions.update(this._id()))
   }
+
+  onRedo() {
+    this.props.dispatch(redo(this._id()))
+  }
+
+  onUndo() {
+    this.props.dispatch(undo(this._id()))
+  }
+
   destroy() {
     this.props.dispatch(spaceActions.destroy(this.props.denormalizedSpace))
   }
 
   onPublicSelect() {
-    this.props.dispatch(spaceActions.generalUpdate(parseInt(this.props.spaceId), {is_private: false}))
+    this.props.dispatch(spaceActions.generalUpdate(this._id(), {is_private: false}))
   }
 
   onPrivateSelect() {
-    this.props.dispatch(spaceActions.generalUpdate(parseInt(this.props.spaceId), {is_private: true}))
+    this.props.dispatch(spaceActions.generalUpdate(this._id(), {is_private: true}))
   }
 
   onSaveName(name) {
-    this.props.dispatch(spaceActions.update(parseInt(this.props.spaceId), {name}))
+    this.props.dispatch(spaceActions.update(this._id(), {name}))
   }
+
   onSaveDescription(description) {
-    this.props.dispatch(spaceActions.update(parseInt(this.props.spaceId), {description}))
+    this.props.dispatch(spaceActions.update(this._id(), {description}))
   }
 
   hideSidebar() {
@@ -102,7 +113,11 @@ export default class SpacesShow extends Component {
   }
 
   _handleCopy() {
-    this.props.dispatch(spaceActions.copy(parseInt(this.props.spaceId)))
+    this.props.dispatch(spaceActions.copy())
+  }
+
+  _id() {
+    return parseInt(this.props.spaceId)
   }
 
   render() {
@@ -170,7 +185,11 @@ export default class SpacesShow extends Component {
                 actionState={space.canvasState.actionState}
                 canBePrivate={canBePrivate}
                 onPublicSelect={this.onPublicSelect.bind(this)}
-                onPrivateSelect={this.onPrivateSelect.bind(this)}
+                onPrivateSelecundot={this.onPrivateSelect.bind(this)}
+                onUndo={this.onUndo.bind(this)}
+                onRedo={this.onRedo.bind(this)}
+                canUndo={space.checkpointMetadata.head !== space.checkpointMetadata.length - 1}
+                canRedo={space.checkpointMetadata.head !== 0}
               />
             </div>
 

src/components/spaces/show/style.css

@@ -103,6 +103,34 @@
   float: left;
 }
 
+.hero-unit .header-actions .ui.buttons {
+  float: left;
+  margin-top: 5px;
+  margin-right: 8px;
+}
+
+.hero-unit .header-actions .ui.buttons .ui.button {
+}
+
+.hero-unit .header-actions .ui.buttons.tiny .ui.button {
+  padding: .4rem;
+  font-size: 1rem;
+  opacity: 1 !important;
+  background-color: rgba(255,255,255,0.55);
+  color: rgba(7, 67, 105, 0.87);
+}
+
+.hero-unit .header-actions .ui.buttons .ui.button:hover {
+  background-color: rgba(255,255,255,0.7);
+  color: rgba(7, 67, 105, 0.94);
+}
+
+.hero-unit .header-actions .ui.buttons .ui.button.disabled {
+  background-color: rgba(255,255,255,0.15);
+  color: rgba(7, 67, 105, 0.4);
+  pointer-events: all;
+}
+
 .hero-unit a.space-header-action {
   color: white;
   padding: 0.5em 0.95em;
@@ -206,3 +234,22 @@
 .SpaceSidebar .SpaceSidebar-body .ClickToEdit .EditingMode textarea {
   min-height: 30em;
 }
+
+.small-tooltip.small-tooltip.small-tooltip {
+  background: rgba(60, 64, 68, 0.95);
+  opacity: 1;
+  padding: 4px 13px;
+  border-radius: 2px;
+  transition: none;
+  &.place-bottom {
+    margin-top: 2px;
+  }
+
+  &.place-bottom:after {
+    border-bottom: 6px solid rgba(60, 64, 68, 0.95);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    top: -6px;
+    margin-left: -6px;
+  }
+}