Skip to content
Snippets Groups Projects
Commit a5674ae1 authored by Maximilian Giller's avatar Maximilian Giller
Browse files

Basic history navigator

parent 46d181da
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56612 passed
......@@ -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} />
......
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>
);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment