Undo-redo of highlight

iVis-at-Bilkent · Jun 28, 2016 · 4fa29c6 · 4fa29c6
1 parent 36432e6
commit 4fa29c6
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ Searchs for `text` string. `searchBy` is temporary option for the search (and wi
 
 `eles.highlight()`
 
-Highlights eles & unhighlights others.
+Highlights eles & unhighlights others at first use.
 
 `eles.unhighlight()`
 
@@ -28,7 +28,7 @@ Just unighlights eles.
 `eles.highlightNeighbors()`
 * Aliases: `eles.highlightNeighbours()`
 
-Highlights eles' neighborhood & unhighlights others' neighborhood.
+Highlights eles' neighborhood & unhighlights others' neighborhood at first use.
 
 `eles.unhighlightNeighbors()`
 * Aliases: `eles.unhighlightNeighbours()`
@@ -70,10 +70,25 @@ Shows hidden eles.
 ```
 
 
+## Default Undo-Redo Actions
+
+
+`ur.do("highlight", eles)`
+
+`ur.do("highlightNeighbors", eles)`
+`ur.do("unhighlightNeighbours", eles)`
+
+`ur.do("unhighlight", eles)`
+
+`ur.do("unhighlightNeighbors", eles)` 
+`ur.do("unhighlightNeighbours", eles)`
+
+`ur.do("removeHighlights", eles)`
+
 ## Dependencies
 
  * Cytoscape.js ^1.7.3
- * Also works well with cytoscape-snap-to-grid
+ * cytoscape-undo-redo.js ^1.0.8 (optional)
 
 
 ## Usage instructions

diff --git a/cytoscape-view-utilities.js b/cytoscape-view-utilities.js
@@ -79,15 +79,17 @@ module.exports = function (cytoscape, cy, options, ur) {
 
         var others = cy.elements().difference(eles.union(eles.ancestors()));
 
+        if (cy.$(":visible[?highlighted]").length == 0)
+            unhighlight(others);
+
         highlight(eles);
-        unhighlight(others);
 
         return this;
 
     });
 
     cytoscape("collection", "unhighlight", function () {
-        var eles = this;//.filter("[highlighted], [^highlighted]");
+        var eles = this;//.filter("[highlighted='true'], [^highlighted]");
 
         unhighlight(eles);
 
@@ -136,35 +138,58 @@ module.exports = function (cytoscape, cy, options, ur) {
 
     cytoscape("collection", "isHighlighted", function () {
         var ele = this;
-        return ele.is(":visible[highlighted]") ? true : false;
+        return ele.is(":visible[?highlighted]") ? true : false;
     });
 
     if (ur) {
         var funcs = {};
-        var toFunc = ["highlight", "unhighlight", "highlightNeighbors", "highlightNeighbours", "unhighlightNeighbors", "unhighlightNeighbours" ];
-        for (var i = 0; i < toFunc.length; i++){
-            console.log(toFunc[i]);
-            var funcName = toFunc[i];
-            funcs[toFunc[i]] = function (eles) {
-                return eles[funcName]();
-            };
-            if (i % 2 == 1) {
-                ur.action(toFunc[i], funcs[toFunc[i]], funcs[toFunc[i-1]]);
-                ur.action(toFunc[i-1], funcs[toFunc[i-1]], funcs[toFunc[i]]);
-            }
 
-        }
+        var highlightHistories = {};
+
 
-        ur.action("removeHighlights", function (_highlighteds) {
 
-            var highlighteds = cy.$("[highlighted]");
+        function urRemoveHighlights() {
+
+            var highlighteds = cy.$("[?highlighted]");
             cy.removeHighlights();
 
             return highlighteds;
+        }
 
-        }, function (highlighteds) {
-            return highlighteds.highlight();
-        });
+        function urUndoHighlight(eles) {
+            var res = eles.unhighlight();
+
+            if (cy.$(":visible[?highlighted]").length == 0)
+                cy.removeHighlights();
+            return res;
+        }
+
+        function urHighlightNeighbors(eles) {
+            var res;
+            if (eles.firstTime)
+                res = eles.highlightNeighbors();
+            else
+                res = eles.highlight();
+            return res;
+        }
+
+        function urHighlight(eles) {
+            return eles.highlight();
+        }
+
+        function urUnhighlight(eles) {
+            return eles.unhighlight();
+        }
+
+        function urUndoUnhighlight(eles) {
+            return eles.highlight();
+        }
+
+        ur.action("highlightNeighbors", urHighlightNeighbors, urUndoHighlight);
+        ur.action("highlight", urHighlight, urUndoHighlight);
+        ur.action("unhighlight", urUnhighlight, urUndoUnhighlight);
+        ur.action("unhighlightNeighbors", urUnhighlight, urUndoUnhighlight);
+        ur.action("removeHighlights", urRemoveHighlights, urUndoUnhighlight);
     }
 };
 },{}],3:[function(require,module,exports){

diff --git a/demo-undoable.html b/demo-undoable.html
@@ -99,7 +99,8 @@
                 });
 
                 $("#highlightNeighbors").click(function () {
-                    ur.do("highlightNeighbors", cy.$(":selected"));
+                    if(cy.$(":selected").length > 0)
+                        ur.do("highlightNeighbors", cy.$(":selected"));
                 });
 
                 $("#removeHighlights").click(function () {

diff --git a/src/highlight.js b/src/highlight.js
@@ -36,15 +36,17 @@ module.exports = function (cytoscape, cy, options, ur) {
 
         var others = cy.elements().difference(eles.union(eles.ancestors()));
 
+        if (cy.$(":visible[?highlighted]").length == 0)
+            unhighlight(others);
+
         highlight(eles);
-        unhighlight(others);
 
         return this;
 
     });
 
     cytoscape("collection", "unhighlight", function () {
-        var eles = this;//.filter("[highlighted], [^highlighted]");
+        var eles = this;//.filter("[highlighted='true'], [^highlighted]");
 
         unhighlight(eles);
 
@@ -93,21 +95,59 @@ module.exports = function (cytoscape, cy, options, ur) {
 
     cytoscape("collection", "isHighlighted", function () {
         var ele = this;
-        return ele.is(":visible[highlighted]") ? true : false;
+        return ele.is(":visible[?highlighted]") ? true : false;
     });
 
     if (ur) {
         var funcs = {};
+
+        var highlightHistories = {};
 
+
+
         function urRemoveHighlights() {
 
-            var highlighteds = cy.$("[highlighted]");
+            var highlighteds = cy.$("[?highlighted]");
             cy.removeHighlights();
 
             return highlighteds;
+        }
+
+        function urUndoHighlight(eles) {
+            var res = eles.unhighlight();
+
+            if (cy.$(":visible[?highlighted]").length == 0)
+                cy.removeHighlights();
+            return res;
+        }
+
+        function urHighlightNeighbors(eles) {
+            var res;
+            if (eles.firstTime)
+                res = eles.highlightNeighbors();
+            else
+                res = eles.highlight();
+            return res;
+        }
+
+        function urHighlight(eles) {
+            return eles.highlight();
+        }
+
+        function urUnhighlight(eles) {
+            return eles.unhighlight();
+        }
 
+        function urUndoUnhighlight(eles) {
+            return eles.highlight();
         }
 
-        ur.action("removeHighlights", urRemoveHighlights, funs.highlight);
+        ur.action("highlightNeighbors", urHighlightNeighbors, urUndoHighlight);
+        ur.action("highlightNeighbours", urHighlightNeighbors, urUndoHighlight);
+        ur.action("highlight", urHighlight, urUndoHighlight);
+        ur.action("unhighlight", urUnhighlight, urUndoUnhighlight);
+        ur.action("unhighlightNeighbors", urUnhighlight, urUndoUnhighlight);
+        ur.action("unhighlightNeighbours", urUnhighlight, urUndoUnhighlight);
+        ur.action("removeHighlights", urRemoveHighlights, urUndoUnhighlight);
     }
 };