Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Events can now be rebound during runtime on any object

This commit is contained in:
Michael Hackstein 2013-03-21 15:36:54 +01:00
parent 8aee0d3ed0
commit a4065dd30d
5 changed files with 220 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
html/admin/js/graphViewer/demo.html
View File

@ -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">

1
html/admin/js/graphViewer/graph/eventDispatcher.js
View File

@ -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 "

101
html/admin/js/graphViewer/graphViewer.js
View File

@ -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);
};
}

109
html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherSpec.js
View File

@ -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();
});
});
});
});
}());

37
html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js
View File

@ -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() {