1
0
Fork 0

GraphViewer: Added distortion schema to all affected classes

This commit is contained in:
Michael Hackstein 2013-04-24 12:49:13 +02:00
parent b9e64f6fce
commit 76a027d554
9 changed files with 288 additions and 424 deletions

View File

@ -138,6 +138,7 @@ function NodeShaper(parent, flags, idfunc) {
updateNodes = function () {
var nodes = self.parent.selectAll(".node");
addDistortion();
nodes.attr("transform", function(d) {
return "translate(" + d.position.x + "," + d.position.y + ")";
});

View File

@ -122,8 +122,8 @@ function GraphViewer(svg, width, height,
self.start = function() {
self.layouter.stop();
self.edgeShaper.drawEdges(edges);
self.nodeShaper.drawNodes(nodes);
self.edgeShaper.drawEdges(edges);
self.layouter.start();
};

View File

@ -0,0 +1,51 @@
/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */
/*global _*/
/*global document, window*/
////////////////////////////////////////////////////////////////////////////////
/// @brief Graph functionality
///
/// @file
///
/// DISCLAIMER
///
/// Copyright 2010-2012 triagens GmbH, Cologne, Germany
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
/// Copyright holder is triAGENS GmbH, Cologne, Germany
///
/// @author Michael Hackstein
/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
////////////////////////////////////////////////////////////////////////////////
var helper = helper || {};
(function objectsHelper() {
"use strict";
helper.createSimpleNodes = function (ids) {
var nodes = [];
_.each(ids, function(i) {
nodes.push({
_id: i,
position: {
x: 1,
y: 1,
z: 1
}
});
});
return nodes;
};
}());

View File

@ -19,6 +19,7 @@
<script type="text/javascript" src="../../lib/jquery.livequery.js"></script>
<script type="text/javascript" src="helper/eventHelper.js"></script>
<script type="text/javascript" src="helper/objectsHelper.js"></script>
<script type="text/javascript" src="helper/mocks.js"></script>
<script type="text/javascript" src="../graphViewer.js"></script>

View File

@ -19,6 +19,7 @@
<script type="text/javascript" src="../../lib/jquery.livequery.js"></script>
<script type="text/javascript" src="helper/eventHelper.js"></script>
<script type="text/javascript" src="helper/objectsHelper.js"></script>
<script type="text/javascript" src="../graph/colourMapper.js"></script>
<script type="text/javascript" src="../graph/edgeShaper.js"></script>

View File

@ -20,6 +20,7 @@
<script type="text/javascript" src="../../lib/jquery.livequery.js"></script>
<script type="text/javascript" src="helper/eventHelper.js"></script>
<script type="text/javascript" src="helper/objectsHelper.js"></script>
<script type="text/javascript" src="helper/mocks.js"></script>
<script type="text/javascript" src="../graph/eventLibrary.js"></script>

View File

@ -38,15 +38,10 @@
describe('Edge Shaper', function() {
var svg, defaultPosition;
var svg;
beforeEach(function () {
svg = document.createElement("svg");
defaultPosition = {
x: 1,
y: 1,
z: 1
};
document.body.appendChild(svg);
});
@ -56,21 +51,16 @@
it('should be able to draw an edge', function () {
var source = {
"_id": 1,
position: defaultPosition
},
target = {
"_id": 2,
position: defaultPosition
},
edges = [
{
"source": source,
"target": target
}
],
shaper = new EdgeShaper(d3.select("svg"));
var nodes = helper.createSimpleNodes([1, 2]),
source = nodes[0],
target = nodes[1],
edges = [
{
"source": source,
"target": target
}
],
shaper = new EdgeShaper(d3.select("svg"));
shaper.drawEdges(edges);
expect($("svg .link line").length).toEqual(1);
expect($("svg .link line")[0]).toBeDefined();
@ -78,38 +68,23 @@
});
it('should be able to draw many edges', function () {
var one = {
"_id": 1,
position: defaultPosition
},
two = {
"_id": 2,
position: defaultPosition
},
three = {
"_id": 3,
position: defaultPosition
},
four = {
"_id": 4,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": one,
"target": two
"source": nodes[0],
"target": nodes[1]
},
{
"source": two,
"target": three
"source": nodes[1],
"target": nodes[2]
},
{
"source": three,
"target": four
"source": nodes[2],
"target": nodes[3]
},
{
"source": four,
"target": one
"source": nodes[3],
"target": nodes[0]
}
],
shaper = new EdgeShaper(d3.select("svg"));
@ -118,38 +93,23 @@
});
it('should be able to add an event', function () {
var one = {
"_id": 1,
position: defaultPosition
},
two = {
"_id": 2,
position: defaultPosition
},
three = {
"_id": 3,
position: defaultPosition
},
four = {
"_id": 4,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": one,
"target": two
"source": nodes[0],
"target": nodes[1]
},
{
"source": two,
"target": three
"source": nodes[1],
"target": nodes[2]
},
{
"source": three,
"target": four
"source": nodes[2],
"target": nodes[3]
},
{
"source": four,
"target": one
"source": nodes[3],
"target": nodes[0]
}
],
clicked = [],
@ -173,38 +133,23 @@
});
it('should be able to unbind all events', function() {
var one = {
"_id": 1,
position: defaultPosition
},
two = {
"_id": 2,
position: defaultPosition
},
three = {
"_id": 3,
position: defaultPosition
},
four = {
"_id": 4,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": one,
"target": two
"source": nodes[0],
"target": nodes[1]
},
{
"source": two,
"target": three
"source": nodes[1],
"target": nodes[2]
},
{
"source": three,
"target": four
"source": nodes[2],
"target": nodes[3]
},
{
"source": four,
"target": one
"source": nodes[3],
"target": nodes[0]
}
],
clicked = [],
@ -234,18 +179,11 @@
});
it('should be able to add an arrow on target side', function() {
var one = {
"_id": 1,
position: defaultPosition
},
two = {
"_id": 2,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2]),
edges = [
{
"source": one,
"target": two
"source": nodes[0],
"target": nodes[1]
}
],
shaper = new EdgeShaper(d3.select("svg"), {
@ -339,15 +277,7 @@
describe('testing for colours', function() {
it('should have a default colouring of no colour flag is given', function() {
var nodes = [
{
_id: 1,
position: defaultPosition
}, {
_id: 2,
position: defaultPosition
}
],
var nodes = helper.createSimpleNodes([1, 2]),
edges = [{
source: nodes[0],
target: nodes[1]
@ -363,20 +293,13 @@
});
it('should be able to use the same colour for all edges', function() {
var s = {
_id: 1,
position: defaultPosition
},
t = {
_id: 2,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2]),
edges = [{
source: s,
target: t
source: nodes[0],
target: nodes[1]
},{
source: t,
target: s
source: nodes[1],
target: nodes[0]
}],
shaper = new EdgeShaper(d3.select("svg"),
{
@ -393,22 +316,11 @@
});
it('should be able to use a colour based on attribute value', function() {
var n1 = {
_id: 1,
position: defaultPosition
},
n2 = {
_id: 2,
position: defaultPosition
},
n3 = {
_id: 3,
position: defaultPosition
},
n4 = {
_id: 4,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
n1 = nodes[0],
n2 = nodes[1],
n3 = nodes[2],
n4 = nodes[3],
edges = [{
source: n1,
target: n2,
@ -464,17 +376,10 @@
});
it('should be able to use a gradient colour', function() {
var s = {
_id: 1,
position: defaultPosition
},
t = {
_id: 2,
position: defaultPosition
},
var nodes = helper.createSimpleNodes([1, 2]),
edges = [{
source: s,
target: t
source: nodes[0],
target: nodes[1]
}],
shaper = new EdgeShaper(d3.select("svg"),
{
@ -517,20 +422,13 @@
var shaper;
beforeEach(function() {
var one = {
"_id": 1,
position: defaultPosition
},
two = {
"_id": 2,
position: defaultPosition
},
edges = [
{
"source": one,
"target": two
}
];
var nodes = helper.createSimpleNodes([1, 2]),
edges = [
{
"source": nodes[0],
"target": nodes[1]
}
];
shaper = new EdgeShaper(d3.select("svg"), {
shape: {
type: EdgeShaper.shapes.ARROW
@ -576,24 +474,7 @@
shaper;
beforeEach(function() {
nodes = [
{
_id: 1,
position: defaultPosition
},
{
_id: 2,
position: defaultPosition
},
{
_id: 3,
position: defaultPosition
},
{
_id: 4,
position: defaultPosition
}
];
nodes = helper.createSimpleNodes([1, 2, 3, 4]);
edges = [
{_id: 1, source: nodes[0], target: nodes[1]},
{_id: 2, source: nodes[1], target: nodes[2]},
@ -671,21 +552,7 @@
});
it('should display the correct label', function() {
var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": nodes[0],
@ -758,21 +625,7 @@
});
it('should ignore other attributes', function() {
var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": nodes[0],
@ -812,15 +665,7 @@
});
it('should be able to switch to another label', function() {
var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}
],
var nodes = helper.createSimpleNodes([1, 2]),
edges = [
{
"source": nodes[0],
@ -868,21 +713,7 @@
});
it('should display the correct label', function() {
var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
var nodes = helper.createSimpleNodes([1, 2, 3, 4]),
edges = [
{
"source": nodes[0],
@ -918,21 +749,7 @@
beforeEach(function () {
shaper = new EdgeShaper(d3.select("svg"));
nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
];
nodes = helper.createSimpleNodes([1, 2, 3, 4]);
edges = [
{
"source": nodes[0],
@ -1022,14 +839,9 @@
.append("svg")
.append("g"),
shaper = new EdgeShaper(internalObject),
source = {
"_id": 1,
position: defaultPosition
},
target = {
"_id": 2,
position: defaultPosition
},
nodes = helper.createSimpleNodes([1, 2]),
source = nodes[0],
target = nodes[1],
edges = [
{
"source": source,

View File

@ -52,7 +52,7 @@
nodeEditorConfig,
edgeEditorConfig,
svg,
defaultPosition,
bindSpies = function() {
spyOn(layouter, "drag");
@ -77,6 +77,12 @@
this.loadNode = function() {};
spyOn(this, "loadNode");
defaultPosition = {
x: 1,
y: 1,
z: 1
};
expandConfig = {
edges: edges,
nodes: nodes,
@ -213,8 +219,8 @@
var called;
runs(function() {
var nodes = [{_id: 1}, {_id:2}],
callback = function() {
nodes = helper.createSimpleNodes([1, 2]);
var callback = function() {
called++;
};
called = 0;
@ -240,16 +246,17 @@
runs(function() {
var n1 = {_id: 1},
n2 = {_id: 2},
n3 = {_id: 3},
edges = [
{source: n1, target: n2},
{source: n2, target: n3}
],
callback = function() {
called++;
};
nodes = helper.createSimpleNodes([1, 2, 3]);
var n1 = nodes[0],
n2 = nodes[1],
n3 = nodes[2],
edges = [
{source: n1, target: n2},
{source: n2, target: n3}
],
callback = function() {
called++;
};
called = 0;
edgeShaper.drawEdges(edges);
dispatcher.bind("edges", "click", callback);
@ -276,7 +283,7 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
callback = function() {
called = true;
};
@ -300,7 +307,7 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
callback = function() {
called = true;
};
@ -324,7 +331,7 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
callback = function() {
called = true;
};
@ -348,7 +355,7 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
callback = function() {
called = true;
};
@ -373,7 +380,7 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
callback = function() {
called = true;
};
@ -397,8 +404,8 @@
var called;
runs(function() {
var nodes = [{_id: 1}],
callback = function() {
nodes = helper.createSimpleNodes([1]);
var callback = function() {
called = true;
};
called = false;
@ -423,7 +430,7 @@
it('should be able to bind the expand event', function() {
runs(function() {
nodes = [{_id: 1}];
nodes = helper.createSimpleNodes([1]);
nodeShaper.drawNodes(nodes);
dispatcher.bind("nodes", "click", dispatcher.events.EXPAND);
helper.simulateMouseEvent("click", "1");
@ -449,7 +456,7 @@
it('should be able to bind the drag event', function() {
runs(function() {
nodes = [{_id: 1}];
nodes = helper.createSimpleNodes([1]);
nodeShaper.drawNodes(nodes);
dispatcher.bind("nodes", "drag", dispatcher.events.DRAG);
@ -490,7 +497,7 @@
it('should be able to bind the patch node event', function() {
runs(function() {
nodes = [{_id: 1}];
nodes = helper.createSimpleNodes([1]);
dispatcher.bind($("svg"), "click", dispatcher.events.PATCHNODE(
nodes[0],
function() {
@ -521,7 +528,7 @@
it('should be able to bind the delete node event', function() {
runs(function() {
nodes = [{_id: 1}];
nodes = helper.createSimpleNodes([1]);
nodeShaper.drawNodes(nodes);
dispatcher.bind("nodes", "click", dispatcher.events.DELETENODE(
function(node) {
@ -545,7 +552,7 @@
});
it('should be able to bind the events to create an edge', function() {
nodes = [{_id: 1}, {_id: 2}, {_id: 3}];
nodes = helper.createSimpleNodes([1, 2, 3]);
edges = [{source: nodes[0], target: nodes[2]}];
nodeShaper.drawNodes(nodes);
edgeShaper.drawEdges(edges);
@ -602,11 +609,7 @@
it('should be able to bind the patch edge event', function() {
runs(function() {
nodes = [{
_id: 1
},{
_id: 2
}];
nodes = helper.createSimpleNodes([1, 2]);
edges = [{source: nodes[0], target: nodes[1]}];
dispatcher.bind($("svg"), "click", dispatcher.events.PATCHEDGE(
edges[0],
@ -638,11 +641,7 @@
it('should be able to bind the delete edge event', function() {
runs(function() {
nodes = [{
_id: 1
},{
_id: 2
}];
nodes = helper.createSimpleNodes([1, 2]);
edges = [{source: nodes[0], target: nodes[1]}];
edgeShaper.drawEdges(edges);
dispatcher.bind("edges", "click", dispatcher.events.DELETEEDGE(
@ -699,7 +698,7 @@
});
it('should be able to overwrite the event of all nodes', function() {
var nodes = [{_id: 1}],
var nodes = helper.createSimpleNodes([1]),
falseCalled = false,
called = false,
falseCallback = function() {
@ -728,20 +727,20 @@
});
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;
};
nodes = helper.createSimpleNodes([1, 2]);
var n1 = nodes[0],
n2 = nodes[1],
edges = [
{source: n1, target: n2}
],
falseCalled = false,
called = false,
falseCallback = function() {
falseCalled = true;
},
callback = function() {
called = true;
};
runs(function() {
edgeShaper.drawEdges(edges);
@ -769,7 +768,7 @@
var falseCalls, called;
runs(function() {
var nodes = [{_id: 1}, {_id:2}],
var nodes = helper.createSimpleNodes([1, 2]),
callback = function() {
called++;
},
@ -806,9 +805,10 @@
var falseCalls, called;
runs(function() {
var n1 = {_id: 1},
n2 = {_id: 2},
n3 = {_id: 3},
nodes = helper.createSimpleNodes([1, 2, 3]);
var n1 = nodes[0],
n2 = nodes[1],
n3 = nodes[2],
edges = [
{source: n1, target: n2},
{source: n2, target: n3}

View File

@ -55,12 +55,6 @@ describe("Graph Viewer", function() {
describe('set up process', function() {
var adapterConfig;
beforeEach(function() {
adapterConfig = {type: "json", path: "../test_data/"};
});
it('should throw an error if the svg is not given or incorrect', function() {
expect(
function() {
@ -109,6 +103,7 @@ describe("Graph Viewer", function() {
});
it('should not throw an error if everything is given', function() {
var adapterConfig = {type: "json", path: "../test_data/"};
expect(
function() {
var t = new GraphViewer(svg, 10, 10, adapterConfig);
@ -116,125 +111,127 @@ describe("Graph Viewer", function() {
).not.toThrow();
});
describe('GraphViewer set up correctly', function() {
var viewer;
beforeEach(function() {
viewer = new GraphViewer(svg, 10, 10, adapterConfig);
});
it('should offer the nodeShaper', function() {
expect(viewer.nodeShaper).toBeDefined();
});
it('should offer the edgeShaper', function() {
expect(viewer.edgeShaper).toBeDefined();
});
it('should offer the startFunction', function() {
expect(viewer.start).toBeDefined();
});
it('should offer the adapter', function() {
expect(viewer.adapter).toBeDefined();
});
it('should offer the layouter', function() {
expect(viewer.layouter).toBeDefined();
});
it('should offer the complete config for the event dispatcher', function() {
expect(viewer.dispatcherConfig).toBeDefined();
expect(viewer.dispatcherConfig).toEqual({
expand: {
edges: [],
nodes: [],
startCallback: jasmine.any(Function),
loadNode: jasmine.any(Function),
reshapeNodes: jasmine.any(Function)
},
drag: {
layouter: jasmine.any(Object)
},
nodeEditor: {
nodes: [],
adapter: jasmine.any(Object)
},
edgeEditor: {
edges: [],
adapter: jasmine.any(Object)
}
});
expect(viewer.dispatcherConfig.expand).toEqual({
});
describe('GraphViewer set up correctly', function() {
var viewer, adapterConfig;
beforeEach(function() {
adapterConfig = {type: "json", path: "../test_data/"};
viewer = new GraphViewer(svg, 10, 10, adapterConfig);
});
it('should offer the nodeShaper', function() {
expect(viewer.nodeShaper).toBeDefined();
});
it('should offer the edgeShaper', function() {
expect(viewer.edgeShaper).toBeDefined();
});
it('should offer the startFunction', function() {
expect(viewer.start).toBeDefined();
});
it('should offer the adapter', function() {
expect(viewer.adapter).toBeDefined();
});
it('should offer the layouter', function() {
expect(viewer.layouter).toBeDefined();
});
it('should offer the complete config for the event dispatcher', function() {
expect(viewer.dispatcherConfig).toBeDefined();
expect(viewer.dispatcherConfig).toEqual({
expand: {
edges: [],
nodes: [],
startCallback: jasmine.any(Function),
loadNode: jasmine.any(Function),
reshapeNodes: jasmine.any(Function)
});
expect(viewer.dispatcherConfig.drag).toEqual({
},
drag: {
layouter: jasmine.any(Object)
});
expect(viewer.dispatcherConfig.nodeEditor).toEqual({
},
nodeEditor: {
nodes: [],
adapter: jasmine.any(Object)
});
expect(viewer.dispatcherConfig.edgeEditor).toEqual({
},
edgeEditor: {
edges: [],
adapter: jasmine.any(Object)
});
}
});
expect(viewer.dispatcherConfig.expand).toEqual({
edges: [],
nodes: [],
startCallback: jasmine.any(Function),
loadNode: jasmine.any(Function),
reshapeNodes: jasmine.any(Function)
});
expect(viewer.dispatcherConfig.drag).toEqual({
layouter: jasmine.any(Object)
});
expect(viewer.dispatcherConfig.nodeEditor).toEqual({
nodes: [],
adapter: jasmine.any(Object)
});
expect(viewer.dispatcherConfig.edgeEditor).toEqual({
edges: [],
adapter: jasmine.any(Object)
});
it('should offer to load a new graph', function() {
expect(viewer.loadGraph).toBeDefined();
});
it('should offer to load a new graph by attribute value', function() {
expect(viewer.loadGraphWithAttributeValue).toBeDefined();
});
it("should be able to load a root node", function() {
runs (function() {
this.addMatchers({
toBeDisplayed: function() {
var nodes = this.actual,
nonDisplayed = [];
this.message = function(){
var msg = "Nodes: [";
_.each(nonDisplayed, function(n) {
msg += n + " ";
});
msg += "] are not displayed.";
return msg;
};
_.each(nodes, function(n) {
if ($("svg #" + n)[0] === undefined) {
nonDisplayed.push(n);
}
});
return nonDisplayed.length === 0;
}
});
viewer.loadGraph(0);
});
// Give it a second to load
// Unfortunately there is no handle to check for changes
waits(waittime);
runs (function() {
expect([0, 1, 2, 3, 4]).toBeDisplayed();
});
});
});
});
it('should offer to load a new graph', function() {
expect(viewer.loadGraph).toBeDefined();
});
it('should offer to load a new graph by attribute value', function() {
expect(viewer.loadGraphWithAttributeValue).toBeDefined();
});
it("should be able to load a root node", function() {
runs (function() {
this.addMatchers({
toBeDisplayed: function() {
var nodes = this.actual,
nonDisplayed = [];
this.message = function(){
var msg = "Nodes: [";
_.each(nonDisplayed, function(n) {
msg += n + " ";
});
msg += "] are not displayed.";
return msg;
};
_.each(nodes, function(n) {
if ($("svg #" + n)[0] === undefined) {
nonDisplayed.push(n);
}
});
return nonDisplayed.length === 0;
}
});
viewer.loadGraph(0);
});
// Give it a second to load
// Unfortunately there is no handle to check for changes
waits(waittime);
runs (function() {
expect([0, 1, 2, 3, 4]).toBeDisplayed();
});
});
});
});