Merge pull request #28 from iVis-at-Bilkent/unstable

Merge unstable to master

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 iVis@Bilkent
+Copyright (c) 2017 - present, iVis@Bilkent.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -102,6 +102,10 @@ Changes the style specified with `idx`.
 @param edgeStyle — [cytoscape style](https://js.cytoscape.org/#style) for edges <br />
 Adds a new style to the `highlightStyles` array.
 
+`instance.removeHighlightStyle(styleIdx): void` <br />
+@param styleIdx —  index of the style to delete (0 based) <br />
+Removes the style from `highlightStyles` array.
+
 ## Default Options
 ```
 highlightStyles: [],

demo.html

@@ -103,7 +103,7 @@
                     border-radius: 50%;
                     background: white;
             }
-            
+
             .topnav c {
               float: left;
               width: 30px;

src/view-utilities.js

@@ -1,9 +1,15 @@
 var viewUtilities = function (cy, options) {
 
+  var classNames4Styles = [];
+  // give a unique name for each unique style EVER added
+  var totStyleCnt = 0;
   init();
   function init() {
     // add provided styles
     for (var i = 0; i < options.highlightStyles.length; i++) {
+      var s = '__highligtighted__' + totStyleCnt;
+      classNames4Styles.push(s);
+      totStyleCnt++;
       updateCyStyle(i);
     }
 
@@ -21,26 +27,22 @@ var viewUtilities = function (cy, options) {
   }
 
   function updateCyStyle(classIdx) {
-    var className = getCyClassName4Idx(classIdx);
+    var className = classNames4Styles[classIdx];
     var cssNode = options.highlightStyles[classIdx].node;
     var cssEdge = options.highlightStyles[classIdx].edge;
     cy.style().selector('node.' + className).css(cssNode).update();
     cy.style().selector('edge.' + className).css(cssEdge).update();
   }
 
-  function getCyClassName4Idx(i) {
-    return '__highligtighted__' + i;
-  }
-
   // Helper functions for internal usage (not to be exposed)
   function highlight(eles, idx) {
+    cy.startBatch();
     for (var i = 0; i < options.highlightStyles.length; i++) {
-      var className = getCyClassName4Idx(i);
-      eles.removeClass(className);
+      eles.removeClass(classNames4Styles[i]);
     }
-    var className = getCyClassName4Idx(idx);
-    eles.addClass(className);
+    eles.addClass(classNames4Styles[idx]);
     eles.unselect();
+    cy.endBatch();
   }
 
   function getWithNeighbors(eles) {
@@ -107,7 +109,7 @@ var viewUtilities = function (cy, options) {
     highlight(eles, idx); // Use the helper here
     return eles;
   };
- 
+
   instance.getHighlightStyles = function () {
     return options.highlightStyles;
   };
@@ -120,25 +122,22 @@ var viewUtilities = function (cy, options) {
   // Remove highlights from eles.
   // If eles is not defined considers cy.elements()
   instance.removeHighlights = function (eles) {
+    cy.startBatch();
     if (eles == null || eles.length == null) {
       eles = cy.elements();
     }
-
     for (var i = 0; i < options.highlightStyles.length; i++) {
-      var className = getCyClassName4Idx(i);
-      eles.removeClass(className);
-      eles.removeData(className);
+      eles.removeClass(classNames4Styles[i]);
     }
+    cy.endBatch();
     return eles;
-    // TODO check if remove data is needed here
   };
 
   // Indicates if the ele is highlighted
   instance.isHighlighted = function (ele) {
     var isHigh = false;
     for (var i = 0; i < options.highlightStyles.length; i++) {
-      var className = getCyClassName4Idx(i);
-      if (ele.is('.' + className + ':visible')) {
+      if (ele.is('.' + classNames4Styles[i] + ':visible')) {
         isHigh = true;
       }
     }
@@ -155,16 +154,28 @@ var viewUtilities = function (cy, options) {
   instance.addHighlightStyle = function (nodeStyle, edgeStyle) {
     var o = { node: nodeStyle, edge: edgeStyle };
     options.highlightStyles.push(o);
+    var s = '__highligtighted__' + totStyleCnt;
+    classNames4Styles.push(s);
+    totStyleCnt++;
     updateCyStyle(options.highlightStyles.length - 1);
     addSelectionStyles();
   };
 
-  instance.getAllHighlightClasses = function() {
+  instance.removeHighlightStyle = function (styleIdx) {
+    if (styleIdx < 0 || styleIdx > options.highlightStyles.length - 1) {
+      return;
+    }
+    cy.elements().removeClass(classNames4Styles[styleIdx]);
+    options.highlightStyles.splice(styleIdx, 1);
+    classNames4Styles.splice(styleIdx, 1);
+  };
+
+  instance.getAllHighlightClasses = function () {
     var a = [];
     for (var i = 0; i < options.highlightStyles.length; i++) {
-      a.push(getCyClassName4Idx(i));
+      a.push(classNames4Styles[i]);
     }
-    return a;
+    return classNames4Styles;
   };
 
   //Zoom selected Nodes