diff --git a/src/common/graph/node.ts b/src/common/graph/node.ts index 31a84be6a9624a3ba9e9a753c9e92ad36b0cd992..7a1c4e8ac8dc659b3bd732f8bc17a7db04a5d1fc 100644 --- a/src/common/graph/node.ts +++ b/src/common/graph/node.ts @@ -95,7 +95,7 @@ export class Node } public setType(typeId: number) { - const newType = this.graph.nameToObjectGroup.get(typeId); // TODO + const newType = this.graph.nameToObjectGroup.get(String(typeId)); // TODO // Exists? if (newType === undefined) { diff --git a/src/common/history.ts b/src/common/history.ts index 2249bc09a04e566bd21a75f83efcdab154a8d544..7f1c931c6b16a6e55d9bcaae4c45f7684f5ff9a1 100644 --- a/src/common/history.ts +++ b/src/common/history.ts @@ -1,16 +1,18 @@ import { SerializableItem } from "./serializableitem"; interface SavePoint<DataType> { + id: number; description: string; data: DataType; } export class History<HistoryDataType> { public maxCheckpoints: number; - public currentCheckpoint: number; + private current: number; private data: SerializableItem<unknown, HistoryDataType>; - private checkpoints: SavePoint<HistoryDataType>[]; + public checkpoints: SavePoint<HistoryDataType>[]; + private next: number; constructor( data: SerializableItem<unknown, HistoryDataType>, @@ -20,49 +22,63 @@ export class History<HistoryDataType> { this.data = data; this.maxCheckpoints = maxCheckpoints; this.checkpoints = []; - this.currentCheckpoint = -1; - this.checkpoint(initialMessage); + this.current = 0; + this.next = 0; + this.createCheckpoint(initialMessage); } - checkpoint(description: string) { + public createCheckpoint(description: string) { const checkpointData = this.data.toHistorySerializableObject(); const checkpoint = { + id: ++this.next, description: description, data: JSON.parse(JSON.stringify(checkpointData)), // deepcopy }; // Remove potential history which is not relevant anymore (maybe caused by undo ops) - this.currentCheckpoint++; - this.checkpoints.length = this.currentCheckpoint; + this.checkpoints.length = ++this.current; this.checkpoints.push(checkpoint); } + public get currentCheckpoint() { + return this.checkpoints[this.current]; + } + public historyDescription(): Array<string> { return this.checkpoints.map((savepoint) => savepoint.description); } + public resetToCheckpoint(id: number): SavePoint<HistoryDataType> { + const index = this.checkpoints.findIndex( + (checkpoint) => checkpoint.id == id + ); + + if (index > 0) { + this.current = index; + return this.checkpoints[index]; + } + } + public undo(): SavePoint<HistoryDataType> { if (this.hasUndoCheckpoints()) { - return this.checkpoints[this.currentCheckpoint--]; - } else { - return this.checkpoints[0]; + this.current--; } + return this.checkpoints[this.current]; } public redo(): SavePoint<HistoryDataType> { if (this.hasRedoCheckpoints()) { - return this.checkpoints[this.currentCheckpoint++]; - } else { - return this.checkpoints[this.checkpoints.length - 1]; + this.current++; } + return this.checkpoints[this.current]; } public hasUndoCheckpoints(): boolean { - return this.currentCheckpoint > 0; + return this.current > 0; } public hasRedoCheckpoints(): boolean { - return this.currentCheckpoint < this.checkpoints.length; + return this.current < this.checkpoints.length; } } diff --git a/src/editor/components/historynavigator.tsx b/src/editor/components/historynavigator.tsx index 75a0eca5121f740e0403c9b83628f808b4f4271e..f9de09cf07ee1e07e48bf16312a67d1f962b6969 100644 --- a/src/editor/components/historynavigator.tsx +++ b/src/editor/components/historynavigator.tsx @@ -1,10 +1,10 @@ import React, { ChangeEvent } from "react"; import { saveGraphJson } from "../../common/datasets"; -import ManagedData from "../structures/manageddata"; import "./historynavigator.css"; +import { History } from "../../common/history"; type propTypes = { - historyObject: ManagedData; + history: History<any>; spaceId: string; onChange: { (): void }; }; @@ -23,23 +23,26 @@ export class HistoryNavigator extends React.Component<propTypes> { * Undo a step in the history object. */ handleUndo() { - this.props.historyObject.undo(); + this.props.history.undo(); } /** * Redo a step in the hisory object. */ handleRedo() { - this.props.historyObject.redo(); + this.props.history.redo(); } /** * Saves current data of history object. */ handleSave() { - saveGraphJson(this.props.spaceId, this.props.historyObject.serialize()); + saveGraphJson( + this.props.spaceId, + this.props.history.currentCheckpoint.data + ); // TODO: Save successful? - this.props.historyObject.markChangesAsSaved(); + // this.props.historyObject.markChangesAsSaved(); TODO: Reimplement alert( "Saved! (Though not for sure, currently not checking for success of failure)" ); @@ -49,7 +52,7 @@ export class HistoryNavigator extends React.Component<propTypes> { * Loads selected savepoint into history object. */ handleSelectSavepoint(e: ChangeEvent<HTMLSelectElement>) { - if (!this.props.historyObject.goToSavePoint(Number(e.target.value))) { + if (!this.props.history.resetToCheckpoint(Number(e.target.value))) { alert("Something went wrong, could not load savepoint."); } else { this.props.onChange(); @@ -64,14 +67,13 @@ export class HistoryNavigator extends React.Component<propTypes> { <select onChange={this.handleSelectSavepoint} value={ - this.props.historyObject && - this.props.historyObject.currentSavePoint - ? this.props.historyObject.currentSavePoint.id + this.props.history + ? this.props.history.currentCheckpoint.id : 0 } > - {this.props.historyObject - ? this.props.historyObject.history.map((savepoint) => { + {this.props.history + ? this.props.history.checkpoints.map((savepoint) => { return ( <option key={savepoint.id} @@ -85,11 +87,11 @@ export class HistoryNavigator extends React.Component<propTypes> { </select> <button onClick={this.handleSave} - disabled={ - this.props.historyObject - ? !this.props.historyObject.hasUnsavedChanges() - : true - } + // disabled={ TODO: Reimplement + // this.props.history + // ? !this.props.history.hasUnsavedChanges() + // : true + // } > Save </button> diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx index 8ef5ba164918682b197b40b82fa0c28ac13d2537..9a6a908d982a3acb8694ae6fa2e8275bfd41bcd7 100644 --- a/src/editor/editor.tsx +++ b/src/editor/editor.tsx @@ -660,7 +660,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> { <div id="sidepanel"> <HistoryNavigator spaceId="space" - historyObject={this.state.graph} + history={this.state.graph} onChange={this.onGraphDataChange} /> <hr />