Events can now be rebound during runtime on any object

html/admin/js/graphViewer/demo.html

@@ -246,6 +246,18 @@
     viewer = new GraphViewer(d3.select("svg"), 980, 640, aaconfig, nsconfig, esconfig, layouterConfig, evconfig);
   }
 
+  function bindExpander() {
+    viewer.rebind({expand: {target: "nodes", type: "click"}});
+  }
+  
+  function bindEdit() {
+    
+  }
+  
+  function bindDelete() {
+    viewer.rebind({})
+  }
+
   var viewer;
   </script>
   <title>DEMO</title>
@@ -323,6 +335,18 @@
     </fieldset>
   </form>
 
+<form action="javascript:void(0);" autocomplete="on" class="form-horizontal" id="creationDialog">
+  <fieldset>
+    <div class="control-group">
+      <div class="controls">
+        <button id="expander" type="submit" class="btn btn-primary" onclick="bindExpander()">Expand</button>
+        <button id="edit" type="submit" class="btn btn-primary" onclick="bindEdit()">Edit</button>
+        <button id="delete" type="submit" class="btn btn-primary" onclick="bindDelete()">Delete</button>
+      </div>
+    </div>
+  </fieldset>
+</form>
+
 <svg width="980" height="640" id="svg"/>
 <br />
 <form action="javascript:void(0);" autocomplete="on" class="form-vertical" id="creationDialog">

html/admin/js/graphViewer/graph/eventDispatcher.js

@@ -91,6 +91,7 @@ function EventDispatcher(nodeShaper, edgeShaper, config) {
         break;
       default:
         if (object.bind !== undefined) {
+          object.unbind(event);
           object.bind(event, func);
         } else {
           throw "Sorry cannot bind to object. Please give either "

html/admin/js/graphViewer/graphViewer.js

@@ -83,7 +83,59 @@ function GraphViewer(svg, width, height,
     nodes = [],
     eventsDispatcherConfig = {},
     // Function after handling events, will update the drawers and the layouter.
-    start;
+    start,
+    bindEventsFromConfig;
+  
+  
+  bindEventsFromConfig = function(conf) {
+    var checkDefs = function(el) {
+      return el !== undefined && el.target !== undefined && el.type !== undefined;
+    },
+    checkFunction = function(el) {
+      return el !== undefined && _.isFunction(el);
+    };
+    
+    if (checkDefs(conf.expand)) {
+      dispatcher.bind(conf.expand.target, conf.expand.type, dispatcher.events.EXPAND);
+      dispatcher.bind("nodes", "update", function(node) {
+        node.selectAll("circle")
+        .attr("class", function(d) {
+          return d._expanded ? "expanded" : 
+            d._centrality === 0 ? "single" : "collapsed";
+        });
+      });
+    }
+  
+    if (checkDefs(conf.createNode)
+    && checkFunction(conf.createNode.callback)) {
+      dispatcher.bind(conf.createNode.target,
+        conf.createNode.type,
+        function() {
+          dispatcher.events.CREATENODE(conf.createNode.callback);
+          start();
+        });
+    }
+  
+    if (checkDefs(conf.patchNode)) {
+      dispatcher.bind(conf.patchNode.target,
+        conf.patchNode.type,
+        dispatcher.events.PATCHNODE);
+    }
+  
+    if (checkDefs(conf.deleteNode)) {
+      dispatcher.bind(conf.deleteNode.target,
+        conf.deleteNode.type,
+        dispatcher.events.DELETENODE);
+    }
+    if (conf.custom !== undefined) {
+      _.each(conf.custom, function(toBind) {
+        if (checkDefs(toBind)
+        && checkFunction(toBind.func)) {
+          dispatcher.bind(toBind.target, toBind.type, toBind.func);
+        }
+      });
+    }
+  };
   
   switch (adapterConfig.type.toLowerCase()) {
     case "arango":
@@ -190,48 +242,7 @@ function GraphViewer(svg, width, height,
   
   dispatcher = new EventDispatcher(nodeShaper, edgeShaper, eventsDispatcherConfig);
   
-  if (eventsConfig.expand !== undefined
+  bindEventsFromConfig(eventsConfig);
-    && eventsConfig.expand.target !== undefined
-    && eventsConfig.expand.type !== undefined) {
-    dispatcher.bind(eventsConfig.expand.target, eventsConfig.expand.type, dispatcher.events.EXPAND);
-    dispatcher.bind("nodes", "update", function(node) {
-      node.selectAll("circle")
-      .attr("class", function(d) {
-        return d._expanded ? "expanded" : 
-          d._centrality === 0 ? "single" : "collapsed";
-      });
-    });
-  }
-  
-  if (eventsConfig.createNode !== undefined
-    && eventsConfig.createNode.target !== undefined
-    && eventsConfig.createNode.type !== undefined
-    && eventsConfig.createNode.callback !== undefined
-    && _.isFunction(eventsConfig.createNode.callback)) {
-    dispatcher.bind(eventsConfig.createNode.target,
-      eventsConfig.createNode.type,
-      function() {
-        dispatcher.events.CREATENODE(eventsConfig.createNode.callback);
-        start();
-      });
-  }
-  
-  
-  if (eventsConfig.patchNode !== undefined
-    && eventsConfig.patchNode.target !== undefined
-    && eventsConfig.patchNode.type !== undefined) {
-    dispatcher.bind(eventsConfig.patchNode.target,
-      eventsConfig.patchNode.type,
-      dispatcher.events.PATCHNODE);
-  }
-  
-  if (eventsConfig.deleteNode !== undefined
-    && eventsConfig.deleteNode.target !== undefined
-    && eventsConfig.deleteNode.type !== undefined) {
-    dispatcher.bind(eventsConfig.deleteNode.target,
-      eventsConfig.deleteNode.type,
-      dispatcher.events.DELETENODE);
-  }
   
   self.loadGraph = function(nodeId) {
     nodes.length = 0;
@@ -245,4 +256,8 @@ function GraphViewer(svg, width, height,
     });
   };
   
+  self.rebind = function(eventConfig) {
+    bindEventsFromConfig(eventConfig);
+  };
+  
 }

html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherSpec.js

@@ -59,7 +59,7 @@
     
     beforeEach(function() {
       svg = document.createElement("svg");
-      
+      svg.id = "svg";
       document.body.appendChild(svg);
       adapter = null;
       
@@ -175,7 +175,7 @@
         runs(function() {
           var target = $("svg");
           dispatcher.bind(target, "click", callback);
-          target.click();
+          simulateMouseEvent("click", "svg");
         });
         
         waitsFor(function() {
@@ -200,8 +200,8 @@
           called = 0;
           nodeShaper.drawNodes(nodes);
           dispatcher.bind("nodes", "click", callback);
-          $("#1").click();
+          simulateMouseEvent("click", "1");
-          $("#2").click();
+          simulateMouseEvent("click", "2");
         });
         
         waitsFor(function() {
@@ -233,8 +233,8 @@
           called = 0;
           edgeShaper.drawEdges(edges);
           dispatcher.bind("edges", "click", callback);
-          $("#1-2").click();
+          simulateMouseEvent("click", "1-2");
-          $("#2-3").click();
+          simulateMouseEvent("click", "2-3");
         });
         
         waitsFor(function() {
@@ -263,7 +263,7 @@
           called = false;
           nodeShaper.drawNodes(nodes);
           dispatcher.bind("nodes", "click", callback);
-          $("#1").trigger("click");
+          simulateMouseEvent("click", "1");
         });
         
         waitsFor(function() {
@@ -384,6 +384,101 @@
       
     });
     */
+    
+    describe('checking overwriting of events', function() {
+      
+      it('should be able to overwrite the event of any DOM-element', function() {
+        var falseCalled = false,
+        called = false,
+        falseCallback = function() { 
+          falseCalled = true;
+        },
+        callback = function() {
+          called = true;
+        };
+        
+        runs(function() {
+          var target = $("svg");
+          dispatcher.bind(target, "click", falseCallback);
+          dispatcher.bind(target, "click", callback);
+          simulateMouseEvent("click", "svg");
+        });
+        
+        waitsFor(function() {
+          return called;
+        }, 1000, "The click event should have been triggered.");
+        
+        runs(function() {
+          // Just display that everything had worked
+          expect(falseCalled).toBeFalsy();
+          expect(called).toBeTruthy();
+        });
+      });
+      
+      it('should be able to overwrite the event of all nodes', function() {
+        var nodes = [{_id: 1}],
+        falseCalled = false,
+        called = false,
+        falseCallback = function() {
+          falseCalled = true;
+        },
+        callback = function() {
+          called = true;
+        };
+        
+        runs(function() {
+          nodeShaper.drawNodes(nodes);
+          dispatcher.bind("nodes", "click", falseCallback);
+          dispatcher.bind("nodes", "click", callback);
+          simulateMouseEvent("click", "1");
+        });
+        
+        waitsFor(function() {
+          return called;
+        }, 1000, "The click event should have been triggered.");
+        
+        runs(function() {
+          // Just display that everything had worked
+          expect(falseCalled).toBeFalsy();
+          expect(called).toBeTruthy();
+        });
+      });
+      
+      it('should be able to overwrite the event of all edges', function() {
+        
+        var n1 = {_id: 1},
+        n2 = {_id: 2},
+        edges = [
+          {source: n1, target: n2}
+        ],
+        falseCalled = false,
+        called = false,
+        falseCallback = function() { 
+          falseCalled = true;
+        },
+        callback = function() {
+          called = true;
+        };
+        
+        runs(function() {
+          edgeShaper.drawEdges(edges);
+          dispatcher.bind("edges", "click", falseCallback);
+          dispatcher.bind("edges", "click", callback);
+          simulateMouseEvent("click", "1-2");
+        });
+        
+        waitsFor(function() {
+          return called;
+        }, 1000, "The click event should have been triggered.");
+        
+        runs(function() {
+          // Just display that everything had worked
+          expect(falseCalled).toBeFalsy();
+          expect(called).toBeTruthy();
+        });
+      });
+      
+    });
   });
 
 }());

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js

@@ -171,7 +171,13 @@ describe("Graph Viewer", function() {
       nsconf = {},
       esconf = {},
       lconf = {type: "force"},
-      evconf = {expand: {target: "nodes", type: "click"}};
+      evconf = {
+        expand: {
+          target: "nodes",
+          type: "click",
+          callback: function(){}
+        }
+      };
       viewer = new GraphViewer(svg, 10, 10, aconf, nsconf, esconf, lconf, evconf);
       
       this.addMatchers({
@@ -229,7 +235,6 @@ describe("Graph Viewer", function() {
       
     });
     
-    
     it("should be able to load a root node", function() {
       runs (function() {
         viewer.loadGraph(0);
@@ -254,6 +259,34 @@ describe("Graph Viewer", function() {
         waits(1000);
       });
       
+      
+      it('should be able to rebind the events', function() {
+        var called = false;
+        
+        runs(function() {
+          var newEventConfig = {custom: [
+            {
+              target: "nodes",
+              type: "click",
+              func: function() {
+                called = true;
+              }
+            }
+          ]};
+          viewer.rebind(newEventConfig);
+          clickOnNode(1);
+        });
+        
+        waitsFor(function() {
+          return called;
+        }, 1000, "The click event should have been triggered.");
+        
+        runs(function() {
+          expect(called).toBeTruthy();
+        });
+        
+      });
+      
       it("should be able to expand a node", function() {
     
         runs (function() {