diff --git a/html/admin/js/graphViewer/demo.html b/html/admin/js/graphViewer/demo.html index 43c6458bb3..2c4eeabd64 100644 --- a/html/admin/js/graphViewer/demo.html +++ b/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; DEMO @@ -323,6 +335,18 @@ +
+
+
+
+ + + +
+
+
+
+
diff --git a/html/admin/js/graphViewer/graph/eventDispatcher.js b/html/admin/js/graphViewer/graph/eventDispatcher.js index 8ce8df9f09..2203022b54 100644 --- a/html/admin/js/graphViewer/graph/eventDispatcher.js +++ b/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 " diff --git a/html/admin/js/graphViewer/graphViewer.js b/html/admin/js/graphViewer/graphViewer.js index 5c0ff35b69..53b6b6c5fc 100644 --- a/html/admin/js/graphViewer/graphViewer.js +++ b/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 - && 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); - } + bindEventsFromConfig(eventsConfig); self.loadGraph = function(nodeId) { nodes.length = 0; @@ -245,4 +256,8 @@ function GraphViewer(svg, width, height, }); }; + self.rebind = function(eventConfig) { + bindEventsFromConfig(eventConfig); + }; + } \ No newline at end of file diff --git a/html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherSpec.js b/html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherSpec.js index 1c0ffd5e37..ccefc9201d 100644 --- a/html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherSpec.js +++ b/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(); - $("#2").click(); + simulateMouseEvent("click", "1"); + simulateMouseEvent("click", "2"); }); waitsFor(function() { @@ -233,8 +233,8 @@ called = 0; edgeShaper.drawEdges(edges); dispatcher.bind("edges", "click", callback); - $("#1-2").click(); - $("#2-3").click(); + simulateMouseEvent("click", "1-2"); + 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(); + }); + }); + + }); }); }()); diff --git a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js b/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js index 5939094fbf..25ee38b711 100644 --- a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js +++ b/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() {