Basic history navigator

src/editor/js/components/editor.tsx

@@ -9,6 +9,7 @@ import { SpaceSelect } from "./spaceselect";
 import "./editor.css";
 import ReactForceGraph2d from "react-force-graph-2d";
 import { Node } from "../structures/graph/node";
+import { HistoryNavigator } from "./historynavigator";
 
 type propTypes = any;
 type stateTypes = {
@@ -160,6 +161,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
 
     private handleNodeClick(node: Node) {
         node.delete();
+        this.forceUpdate();
     }
 
     render(): React.ReactNode {
@@ -169,6 +171,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                 <h1>Interface</h1>
                 <div id="content">
                     <div id="sidepanel">
+                        <HistoryNavigator spaceId="space" historyObject={this.state.graph}/>
                         <SpaceSelect onLoadSpace={this.loadSpace} />
                         <hr />
                         <ToolPool state={this.state.state} />

src/editor/js/components/historynavigator.tsx

+import React, { ChangeEvent } from "react";
+import { saveGraphJson } from "../../../datasets";
+import ManagedData from "../structures/manageddata";
+
+type propTypes = {
+    historyObject: ManagedData;
+    spaceId: string;
+};
+
+export class HistoryNavigator extends React.Component<propTypes> {
+    constructor(props: propTypes) {
+        super(props);
+
+        this.handleUndo = this.handleUndo.bind(this);
+        this.handleRedo = this.handleRedo.bind(this);
+        this.handleSave = this.handleSave.bind(this);
+        this.handleSelectSavepoint = this.handleSelectSavepoint.bind(this);
+    }
+
+    /**
+     * Undo a step in the history object.
+     */
+    handleUndo() {
+        if (!this.props.historyObject.undo()) {
+            alert("Something went wrong, could not undo.");
+        }
+    }
+
+    /**
+     * Redo a step in the hisory object.
+     */
+    handleRedo() {
+        if (!this.props.historyObject.redo()) {
+            alert("Something went wrong, could not redo.");
+        }
+    }
+
+    /**
+     * Saves current data of history object.
+     */
+    handleSave() {
+        saveGraphJson(this.props.spaceId, this.props.historyObject.serialize());
+        // TODO: Save successful?
+        this.props.historyObject.markChangesAsSaved();
+        alert(
+            "Saved! (Though not for sure, currently not checking for success of failure)"
+        );
+    }
+
+    /**
+     * Loads selected savepoint into history object.
+     */
+    handleSelectSavepoint(e: ChangeEvent<HTMLSelectElement>) {
+        if (!this.props.historyObject.goToSavePoint(Number(e.target.value))) {
+            alert("Something went wrong, could not load savepoint.");
+        }
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div id="history-navigator">
+                <button onClick={this.handleUndo}>Undo</button>
+                <button onClick={this.handleRedo}>Redo</button>
+                <select onChange={this.handleSelectSavepoint}>
+                    {this.props.historyObject
+                        ? this.props.historyObject.history.map((savepoint) => {
+                              return (
+                                  <option
+                                      key={savepoint.id}
+                                      value={savepoint.id}
+                                  >
+                                      {savepoint.description}
+                                  </option>
+                              );
+                          })
+                        : ""}
+                </select>
+                <button onClick={this.handleSave}>Save</button>
+            </div>
+        );
+    }
+}