From a5674ae1c7c61e3e598eb0ef413c83c164c51652 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Mon, 13 Jun 2022 12:35:50 +0200
Subject: [PATCH] Basic history navigator
---
src/editor/js/components/editor.tsx | 3 +
src/editor/js/components/historynavigator.tsx | 82 +++++++++++++++++++
2 files changed, 85 insertions(+)
create mode 100644 src/editor/js/components/historynavigator.tsx
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index cbfac58..25c3978 100644
--- a/src/editor/js/components/editor.tsx
+++ b/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} />
diff --git a/src/editor/js/components/historynavigator.tsx b/src/editor/js/components/historynavigator.tsx
new file mode 100644
index 0000000..aec99a8
--- /dev/null
+++ b/src/editor/js/components/historynavigator.tsx
@@ -0,0 +1,82 @@
+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>
+ );
+ }
+}
--
GitLab