Implemented proper save button

editor/css/editor.css

@@ -58,6 +58,6 @@ div#ks-editor img.preview-image {
     height: auto;
 }
 
-div#ks-editor #toolbar-settings {
+div#ks-editor #toolbar-settings, div#ks-editor #toolbar-save {
     float: right;
 }

editor/editor.php

@@ -90,5 +90,4 @@
             </input>
         </div>
     </section>
-    <button id="save" type="submit" class="primary">Save and publish</button>
 </div>
\ No newline at end of file

editor/js/interactions.js

 import jQuery from "jquery";
-import { state, graph } from "./editor";
-import { listAllSpaces, saveGraphJson } from "../../datasets/datasets";
+import { state } from "./editor";
+import { listAllSpaces } from "../../datasets/datasets";
 import { SPACE } from "../../config";
 
 /**
@@ -10,10 +10,6 @@ export function initInteractions() {
     jQuery("button#clear-collection").on("click", () => {
         state.clearSelectedItems();
     });
-    jQuery("button#save").on("click", () => {
-        saveGraphJson(SPACE, graph.getCleanData());    // space_id defined globaly through knowledge-space.php
-        graph.saveChanges();
-    });
 
     // Fill space dropdown
     var selectContainer = jQuery("#space-id-select");

editor/js/manageddata.js

+import jQuery from "jquery";
+
+const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";
+
 export default class ManagedData {
     constructor(data) {
         this.data = data;
         this.history = []; // Newest state is always at 0
         this.historyPosition = 0;
-        this.unsavedChanges = false;
+        this.savedHistoryId = 0;
 
         this.storeCurrentData("Initial state", false);
     }
 
     updateUnsavedChangesHandler() {
         if (this.hasUnsavedChanges()) {
+            jQuery(SAVE_BUTTON_ID).removeClass("hidden");
             window.addEventListener("beforeunload", this.handleBeforeUnload);
         } else {
+            jQuery(SAVE_BUTTON_ID).addClass("hidden");
             window.removeEventListener("beforeunload", this.handleBeforeUnload);
         }
     }
 
     handleBeforeUnload(e) {
-        var confirmationMessage = 'If you leave before saving, unsaved changes will be lost.';
-    
+        var confirmationMessage =
+            "If you leave before saving, unsaved changes will be lost.";
+
         (e || window.event).returnValue = confirmationMessage; //Gecko + IE
         return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
     }
 
     hasUnsavedChanges() {
-        return this.unsavedChanges;
+        return this.history[this.historyPosition].id !== this.savedHistoryId;
     }
 
     saveChanges() {
-        this.unsavedChanges = false;
+        this.savedHistoryId = this.history[this.historyPosition].id;
         this.updateUnsavedChangesHandler();
     }
 
@@ -37,6 +44,7 @@ export default class ManagedData {
 
     undo() {
         if (this.step(1)) {
+            this.updateUnsavedChangesHandler();
             this.onUndo();
             return true;
         } else {
@@ -46,6 +54,7 @@ export default class ManagedData {
 
     redo() {
         if (this.step(-1)) {
+            this.updateUnsavedChangesHandler();
             this.onRedo();
             return true;
         } else {
@@ -76,18 +85,27 @@ export default class ManagedData {
     storeCurrentData(description, relevantChanges = true) {
         var formattedData = this.storableData(this.data);
 
-        this.history.unshift({
-            description: description,
-            data: JSON.stringify(formattedData), // Creating a deep copy
-        });
+        var nextId = 0;
+        if (this.history.length > 0) {
+            nextId = this.history[0].id;
+
+            // Keep same as previous id, if nothing relevant changed
+            // Otherwise, increase by one
+            if (relevantChanges) {
+                nextId++;
+            }
+        }
 
         // Forget about the currently stored potential future
         this.history.splice(0, this.historyPosition);
         this.historyPosition = 0;
 
-        if (!this.hasUnsavedChanges() && relevantChanges) {
-            this.unsavedChanges = true;
-            this.updateUnsavedChangesHandler();
-        }
+        this.history.unshift({
+            description: description,
+            data: JSON.stringify(formattedData), // Creating a deep copy
+            id: nextId,
+        });
+
+        this.updateUnsavedChangesHandler();
     }
 }

editor/js/state.js

@@ -7,6 +7,7 @@ import DeleteTool from "./tools/deletetool";
 import AddNodeTool from "./tools/addnodetool";
 import ConnectTool from "./tools/connecttool";
 import SettingsTool from "./tools/settingstool";
+import SaveTool from "./tools/savetool";
 import { graph } from "./editor";
 import Toolbar from "./toolbar";
 import * as Graph from "./graph";
@@ -20,6 +21,7 @@ export const TOOLS = {
     addnode: new AddNodeTool("addnode"),
     connect: new ConnectTool("connect"),
     settings: new SettingsTool("settings"),
+    save: new SaveTool("save"),
 };
 
 export const CONTEXT = {

editor/js/toolbar.js

@@ -3,6 +3,7 @@ import { PLUGIN_PATH } from "../../config";
 import { state } from "./editor";
 
 const ID_TOOLBAR = "#toolbar";
+const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";
 
 const TOOL_ICON_SRC = PLUGIN_PATH + "editor/images/tools/";
 const TOOL_ICON_FORMAT = ".png";
@@ -14,6 +15,9 @@ export default class Toolbar {
         this.previousTool = undefined;
 
         this.renderToolbar(this.tools);
+
+        // Special, intial treatment
+        jQuery(SAVE_BUTTON_ID).addClass("hidden");
     }
 
     setSelectedTool(tool) {

editor/js/tools/savetool.js

+import Tool from "./tool";
+import { saveGraphJson } from "../../../datasets/datasets";
+import { state, graph } from "../editor";
+import { SPACE } from "../../../config";
+
+export default class SaveTool extends Tool {
+    constructor(key) {
+        super("Save", "save", key);
+    }
+
+    onToolActivate() {
+        saveGraphJson(SPACE, graph.getCleanData());    // space_id defined globaly through knowledge-space.php
+        graph.saveChanges();
+        state.setTool(state.previousTool);
+    }
+}