Skip to content

Commit 978199f

Browse files
davidpiegzadavidpiegza
authored
Merge pull request #17 from davidpiegza/restructure-source-code-files
Restructure source code files
2 parents 34b27e6 + d36ae4e commit 978199f

File tree

16 files changed

+263
-127
lines changed

16 files changed

+263
-127
lines changed

‎Gruntfile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ module.exports = function(grunt) {
22
grunt.initConfig({
33
pkg: grunt.file.readJSON('package.json'),
44
jshint: {
5-
all: ['Gruntfile.js', 'Graph.js', 'drawings/*.js', 'layouts/*.js', 'utils/Label.js', 'utils/ObjectSelection.js']
5+
all: ['Gruntfile.js', 'src/graph.js', 'src/layouts/*.js', 'src/utils/Label.js', 'src/utils/ObjectSelection.js']
66
},
77
uglify: {
88
options: {
99
banner: '/*! <%= pkg.name %> <%= pkg.version %> */\n'
1010
},
1111
graphVisualization: {
1212
files: {
13-
'build/graph.min.js': ['Graph.js', 'webgl-frameworks/three.min.js', 'utils/*.js', 'layouts/*.js', 'drawings/*.js']
13+
'build/graph.min.js': ['webgl-frameworks/three.min.js', 'src/graph.js', 'src/utils/*.js', 'src/layouts/*.js']
1414
}
1515
}
1616
}

‎README.markdown

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The project consists of
2222

2323
### Graph Structure
2424

25-
This is implemented in graph-visualization/Graph.js.
25+
This is implemented in graph-visualization/src/graph.js.
2626

2727
Usage:
2828

@@ -43,7 +43,7 @@ A node has the properties
4343
- `position`, Object for x, y, z position, default is {}
4444
- `data`, Object with further properties, e.g. properties for a graph layout
4545

46-
For more details have a look at the [source code](https://github.com/davidpiegza/Graph-Visualization/blob/master/Graph.js).
46+
For more details have a look at the [source code](https://github.com/davidpiegza/Graph-Visualization/blob/master/src/graph.js).
4747

4848
### Graph Layout
4949

@@ -66,7 +66,7 @@ The graph layout gets the created graph and calculates new positions for the nod
6666

6767
The graph layout may extend the nodes and edges with custom properties in the data object.
6868

69-
See [force-based-layout.js](https://github.com/davidpiegza/Graph-Visualization/blob/master/layouts/force-based-layout.js) for example usage.
69+
See [force-based-layout.js](https://github.com/davidpiegza/Graph-Visualization/blob/master/src/layouts/force-based-layout.js) for example usage.
7070

7171

7272
## Contribution

‎build/graph.min.js

Lines changed: 9 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/simple_graph/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--
2+
This is an example html file with some options added. The minimum html file for
3+
the graph visualization is:
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>Graph Visualization</title>
8+
<script type="text/javascript" src="build/graph.min.js"></script>
9+
</head>
10+
<body onload="new Drawing.SimpleGraph({layout: '3d', showStats: true, showInfo: true})">
11+
</bod>
12+
</html>
13+
-->
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<meta charset="utf-8">
18+
<title>Graph Visualization</title>
19+
<script type="text/javascript" src="../../build/graph.min.js"></script>
20+
<script type="text/javascript" src="simple_graph.js"></script>
21+
22+
<script type="text/javascript">
23+
var drawing;
24+
function createDrawing() {
25+
drawing = new Drawing.SimpleGraph({layout: '3d', selection: true, numNodes: 50, graphLayout:{attraction: 5, repulsion: 0.5}, showStats: true, showInfo: true});
26+
}
27+
</script>
28+
29+
<style type="text/css">
30+
body {
31+
margin: 0;
32+
padding: 0;
33+
font: 11px courier;
34+
overflow: hidden;
35+
}
36+
#graph-info {
37+
position: absolute;
38+
top: 0px;
39+
left: 40%;
40+
margin: 10px;
41+
background-color: #ffffe0;
42+
color: #333;
43+
padding: 5px 10px;
44+
}
45+
#options {
46+
position: absolute;
47+
top: 0;
48+
right: 0;
49+
z-index: 10;
50+
}
51+
</style>
52+
</head>
53+
<body onload="createDrawing()">
54+
<div id="options">
55+
<form>
56+
<p>
57+
<input type="checkbox" id="show_labels" onclick="drawing.show_labels = this.checked;">
58+
<label for="show_labels">Show labels</label>
59+
</p>
60+
<p>
61+
<input type="button" value="Stop layout" onclick="drawing.stop_calculating();">
62+
</p>
63+
</form>
64+
</div>
65+
66+
<div style="position: absolute; bottom: 0;">
67+
Rotate: Left Mouse Button and Move<br />
68+
Zoom: Press Key S + Left Mouse Button and Move<br />
69+
Drag: Press Key D + Left Mouse Button and Move
70+
</div>
71+
</body>
72+
</html>

‎drawings/simple_graph.js renamed to ‎examples/simple_graph/simple_graph.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ Drawing.SimpleGraph = function(options) {
8282

8383

8484
camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000000);
85-
camera.position.z = 5000;
85+
camera.position.z = 10000;
8686

8787
controls = new THREE.TrackballControls(camera);
8888

@@ -104,7 +104,7 @@ Drawing.SimpleGraph = function(options) {
104104

105105
// Node geometry
106106
if(that.layout === "3d") {
107-
geometry = new THREE.BoxGeometry( 25, 25, 25 );
107+
geometry = new THREE.SphereGeometry(30);
108108
} else {
109109
geometry = new THREE.BoxGeometry( 50, 50, 0 );
110110
}
@@ -197,7 +197,7 @@ Drawing.SimpleGraph = function(options) {
197197
* Create a node object and add it to the scene.
198198
*/
199199
function drawNode(node) {
200-
var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
200+
var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xe0e0e0, opacity: 0.8 } ) );
201201
var label_object;
202202

203203
if(that.show_labels) {
@@ -229,7 +229,7 @@ Drawing.SimpleGraph = function(options) {
229229
* Create an edge object (line) and add it to the scene.
230230
*/
231231
function drawEdge(source, target) {
232-
material = new THREE.LineBasicMaterial({ color: 0xff0000, opacity: 1, linewidth: 1 });
232+
material = new THREE.LineBasicMaterial({ color: 0x606060 });
233233

234234
var tmp_geo = new THREE.Geometry();
235235
tmp_geo.vertices.push(source.data.draw_object.position);

‎examples/sphere_graph/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--
2+
This is an example html file with some options added. The minimum html file for
3+
the graph visualization is:
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>Graph Visualization</title>
8+
<script type="text/javascript" src="build/graph.min.js"></script>
9+
</head>
10+
<body onload="new Drawing.SimpleGraph({layout: '3d', showStats: true, showInfo: true})">
11+
</bod>
12+
</html>
13+
-->
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<meta charset="utf-8">
18+
<title>Graph Visualization</title>
19+
<script type="text/javascript" src="../../build/graph.min.js"></script>
20+
<script type="text/javascript" src="sphere_graph.js"></script>
21+
22+
<script type="text/javascript">
23+
var drawing;
24+
function createDrawing() {
25+
drawing = new Drawing.SphereGraph({numNodes: 50, showStats: true, showInfo: true});
26+
}
27+
</script>
28+
29+
<style type="text/css">
30+
body {
31+
margin: 0;
32+
padding: 0;
33+
font: 11px courier;
34+
overflow: hidden;
35+
}
36+
#graph-info {
37+
position: absolute;
38+
top: 0px;
39+
left: 40%;
40+
margin: 10px;
41+
background-color: #ffffe0;
42+
color: #333;
43+
padding: 5px 10px;
44+
}
45+
#options {
46+
position: absolute;
47+
top: 0;
48+
right: 0;
49+
z-index: 10;
50+
}
51+
</style>
52+
</head>
53+
<body onload="createDrawing()">
54+
<div id="options">
55+
<form>
56+
<p>
57+
<input type="checkbox" id="show_labels" onclick="drawing.show_labels = this.checked;">
58+
<label for="show_labels">Show labels</label>
59+
</p>
60+
<p>
61+
<input type="button" value="Stop layout" onclick="drawing.stop_calculating();">
62+
</p>
63+
</form>
64+
</div>
65+
66+
<div style="position: absolute; bottom: 0;">
67+
Rotate: Left Mouse Button and Move<br />
68+
Zoom: Press Key S + Left Mouse Button and Move<br />
69+
Drag: Press Key D + Left Mouse Button and Move
70+
</div>
71+
</body>
72+
</html>

‎drawings/sphere_graph.js renamed to ‎examples/sphere_graph/sphere_graph.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ Drawing.SphereGraph = function(options) {
8585
renderer.setSize( window.innerWidth, window.innerHeight );
8686

8787
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 100000);
88-
camera.position.z = 10000;
88+
camera.position.z = 20000;
8989

9090
controls = new THREE.TrackballControls(camera);
9191

‎index.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Graph Visualization</title>
6+
7+
<style type="text/css">
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
font: 14px monospace;
12+
overflow: hidden;
13+
}
14+
15+
h1 {
16+
font-size: 20px;
17+
}
18+
19+
h2 {
20+
font-size: 16px;
21+
}
22+
23+
a {
24+
text-decoration: none;
25+
color: #4285C2;
26+
}
27+
28+
a:hover {
29+
text-decoration: underline;
30+
}
31+
32+
.sidebar {
33+
position: fixed;
34+
left: 0;
35+
width: 20%;
36+
height: 100%;
37+
background-color: #f0f0f0;
38+
}
39+
40+
.sidebar section {
41+
padding: 10px 20px;
42+
}
43+
44+
#viewer {
45+
position: absolute;
46+
left: 20%;
47+
width: 79%;
48+
height: 100%;
49+
overflow: auto;
50+
border: 0;
51+
}
52+
</style>
53+
</head>
54+
<body onload="loadExample()">
55+
<div id="content">
56+
<aside class="sidebar">
57+
<section>
58+
<h1>Graph Visualization</h1>
59+
</section>
60+
61+
<section id="links">
62+
<div>
63+
<a href="https://github.com/davidpiegza/Graph-Visualization">source code</a>
64+
<div>
65+
66+
<div>
67+
<a href="https://github.com/davidpiegza/Graph-Visualization#contribution">contribution</a>
68+
</div>
69+
</section>
70+
71+
<section id="examples">
72+
<h2>examples</h2>
73+
74+
<div>
75+
<a href="examples/simple_graph/index.html" target="viewer">simple graph</a>
76+
</div>
77+
78+
<div>
79+
<a href="examples/sphere_graph/index.html" target="viewer">sphere graph</a>
80+
</div>
81+
82+
<br />
83+
84+
<div>
85+
<a href="https://github.com/davidpiegza/Graph-Visualization#contribution">add more examples</a>
86+
</div>
87+
</section>
88+
</aside>
89+
90+
<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
91+
</div>
92+
93+
<script>
94+
function loadExample() {
95+
var viewer = document.getElementById('viewer');
96+
viewer.src = 'examples/simple_graph/index.html'
97+
}
98+
</script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)