Undo/redo buttons add

nikitaeverywhere · nikitaeverywhere · commit df9c4fd2b6bd · 2016-12-04T15:15:27.000+02:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {
diff --git a/src/static/index.html b/src/static/index.html
@@ -11,6 +11,10 @@
 </head>
 <body onload="window.init()">
 <div id="windows">
+    <div id="controlIcons">
+        <i id="undoButton" class="ui icon-undo"></i>
+        <i id="redoButton" class="ui icon-redo"></i>
+    </div>
     <svg id="graph"></svg>
     <div id="table">
         <i id="tableToggle" class="ui icon-window-list"></i>
diff --git a/src/static/js/model/history.js b/src/static/js/model/history.js
@@ -1,11 +1,14 @@
 let history = [],
-    redoHistory = [];
+    redoHistory = [],
+    undoButton = null,
+    redoButton = null;
 
 export function createState ({ undo, redo } = {}) {
     if (typeof undo !== "function" || typeof redo !== "function")
         throw new Error("Undo and Redo must be both functions");
     redoHistory = [];
     history.push({ undo, redo });
+    updateButtons();
 }
 
 export function undo () {
@@ -24,5 +27,21 @@ export function redo () {
     redoed.redo();
 }
 
-window.undo = undo;
-window.redo = redo;
+export function reset () {
+    history = [];
+    redoHistory = [];
+    updateButtons();
+}
+
+function updateButtons () {
+    undoButton.classList[history.length ? `remove` : `add`](`disabled`);
+    redoButton.classList[redoHistory.length ? `remove` : `add`](`disabled`);
+}
+
+export function init () {
+    undoButton = document.getElementById(`undoButton`);
+    redoButton = document.getElementById(`redoButton`);
+    undoButton.addEventListener(`click`, () => { undo(); updateButtons(); });
+    redoButton.addEventListener(`click`, () => { redo(); updateButtons(); });
+    updateButtons();
+}
diff --git a/src/static/js/model/index.js b/src/static/js/model/index.js
@@ -115,11 +115,17 @@ export function update () {
             alert(data.error || `No graph data returned`);
         } else {
             graph = preprocess(data.graph);
-            updateCallbacks.forEach(cb => cb(graph, true));
+            dataUpdated(true);
         }
     });
 }
 
+function dataUpdated (reset = false) {
+    if (reset)
+        history.reset();
+    updateCallbacks.forEach(cb => cb(graph, reset));
+}
+
 export function getGraphData () {
     return graph;
 }
@@ -151,7 +157,8 @@ export let uiState = {
 
 export function init () {
     graph = preprocess(sampleData.graph);
-    updateCallbacks.forEach(cb => cb(graph, true));
+    history.init();
+    dataUpdated(true);
 }
 
 function resetChildrenPosition (parent, children = []) {
@@ -238,7 +245,7 @@ export function unfold (node, children = 20) {
             node.children = node.children.concat(next);
             node.label = left > 0 ? `${ left } more` : `Others`;
             resetChildrenPosition(node, next);
-            updateCallbacks.forEach(cb => cb(graph));
+            dataUpdated();
             return {
                 unfolded: next.length,
                 left: left
@@ -252,7 +259,7 @@ export function unfold (node, children = 20) {
             node._children = part.concat(node._children);
             node.id = oldId;
             node.label = node._children.length > 0 ? `${ node._children.length } more` : `Others`;
-            updateCallbacks.forEach(cb => cb(graph));
+            dataUpdated();
         }
     });
     return res.left;
diff --git a/src/static/scss/interface.scss b/src/static/scss/interface.scss
@@ -36,3 +36,10 @@
     z-index: $zIndexInterface;
 }
 
+#controlIcons {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: $zIndexInterface;
+    padding-left: 8px;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "iknow-entity-browser",`
`3`		`- "version": "0.3.0",`
	`3`	`+ "version": "0.3.1",`
`4`	`4`	`"description": "Visualizer for iKnow entities",`
`5`	`5`	`"main": "gulpfile.babel.js",`
`6`	`6`	`"scripts": {`