1
=== added file 'algorithms.js'
2
--- algorithms.js	1970-01-01 00:00:00 +0000
3
+++ algorithms.js	2010-10-24 05:37:41 +0000
4
@@ -0,0 +1,102 @@
5
1
var redraw;
6
2
7
3
window.onload = function() {
8
4
    var width = $(document).width();
9
5
    var height = $(document).height() - 100;
10
6
11
7
    /* Showcase of the Bellman-Ford search algorithm finding shortest paths 
12
8
       from one point to every node */
13
9
    
14
10
    /*  */
15
11
16
12
    /* We need to write a new node renderer function to display the computed
17
13
       distance.
18
14
       (the Raphael graph drawing implementation of Dracula can draw this shape,
19
15
       please consult the RaphaelJS reference for details http://raphaeljs.com/) */
20
16
    var render = function(r, n) {
21
17
            /* the Raphael set is obligatory, containing all you want to display */
22
18
            var set = r.set().push(
23
19
                /* custom objects go here */
24
20
                r.rect(n.point[0]-30, n.point[1]-13, 60, 44).attr({"fill": "#feb", r : "12px", "stroke-width" : n.distance == 0 ? "3px" : "1px" })).push(
25
21
                r.text(n.point[0], n.point[1] + 10, (n.label || n.id) + "\n(" + (n.distance == undefined ? "Infinity" : n.distance) + ")"));
26
22
            return set;
27
23
        };
28
24
    
29
25
    var g = new Graph();
30
26
    
31
27
    /* modify the edge creation to attach random weights */
32
28
    g.edgeFactory.build = function(source, target) {
33
29
	var e = jQuery.extend(true, {}, this.template);
34
30
	e.source = source;
35
31
	e.target = target;
36
32
	e.style.label = e.weight = Math.floor(Math.random() * 10) + 1;
37
33
	return e;
38
34
    }
39
35
    
40
36
    /* creating nodes and passing the new renderer function to overwrite the default one */
41
37
    g.addNode("New York", {render:render}); // TODO add currying support for nicer code
42
38
    g.addNode("Berlin", {render:render});
43
39
    g.addNode("Tel Aviv", {render:render});
44
40
    g.addNode("Tokyo", {render:render});
45
41
    g.addNode("Roma", {render:render});
46
42
    g.addNode("Madrid", {render:render});
47
43
48
44
    /* connections */
49
45
    g.addEdge("Tokyo", "Tel Aviv"/*, {weight:9, directed: true, stroke : "#bfa"}*/); // also supports directed graphs, but currently doesn't look that nice
50
46
    g.addEdge("Tokyo", "New York");
51
47
    g.addEdge("Tokyo", "Berlin");
52
48
    g.addEdge("Tel Aviv", "Berlin");
53
49
    g.addEdge("Tel Aviv", "New York");
54
50
    g.addEdge("Tel Aviv", "Roma");
55
51
    g.addEdge("Roma", "New York");
56
52
    g.addEdge("Berlin", "New York");
57
53
    g.addEdge("Madrid", "New York");
58
54
    g.addEdge("Madrid", "Roma");
59
55
    g.addEdge("Madrid", "Tokyo");
60
56
61
57
    /* random edge weights (our undirected graph is modelled as a bidirectional graph) */
62
58
/*    for(e in g.edges)
63
59
        if(g.edges[e].backedge != undefined) {
64
60
            g.edges[e].weight = Math.floor(Math.random()*10) + 1;
65
61
            g.edges[e].backedge.weight = g.edges[e].weight;
66
62
        }
67
63
*/
68
64
    /* layout the graph using the Spring layout implementation */
69
65
    var layouter = new Graph.Layout.Spring(g);
70
66
    
71
67
    /* draw the graph using the RaphaelJS draw implementation */
72
68
73
69
    /* calculating the shortest paths via Bellman Ford */
74
70
//    bellman_ford(g, g.nodes["Berlin"]);
75
71
    
76
72
    /* calculating the shortest paths via Dijkstra */
77
73
    dijkstra(g, g.nodes["Berlin"]);
78
74
    
79
75
    /* calculating the shortest paths via Floyd-Warshall */
80
76
    floyd_warshall(g, g.nodes["Berlin"]);
81
77
82
78
83
79
    /* colourising the shortest paths and setting labels */
84
80
    for(e in g.edges) {
85
81
        if(g.edges[e].target.predecessor === g.edges[e].source || g.edges[e].source.predecessor === g.edges[e].target) {
86
82
            g.edges[e].style.stroke = "#bfa";
87
83
            g.edges[e].style.fill = "#56f";
88
84
        } else {
89
85
            g.edges[e].style.stroke = "#aaa";
90
86
        }
91
87
    }
92
88
    
93
89
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
94
90
95
91
    redraw = function() {
96
92
        layouter.layout();
97
93
        renderer.draw();
98
94
    };
99
95
    
100
96
/*    var pos=0;
101
97
    step = function(dir) {
102
98
        pos+=dir;
103
99
        var renderer = new Graph.Renderer.Raphael('canvas', g.snapshots[pos], width, height);
104
100
        renderer.draw();
105
101
    };*/
106
102
};
107
0
\ No newline at end of file
103
\ No newline at end of file
108
1
104
109
=== added file 'classes.html'
110
--- classes.html	1970-01-01 00:00:00 +0000
111
+++ classes.html	2010-10-24 05:37:41 +0000
112
@@ -0,0 +1,18 @@
113
1
<html>
114
2
<head>
115
3
    <script type="text/javascript" src="js/raphael-min.js"></script>
116
4
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
117
5
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
118
6
    <script type="text/javascript" src="js/dracula_graph.js"></script>
119
7
    <script type="text/javascript" src="js/dracula_algorithms.js"></script>
120
8
    <script type="text/javascript" src="classes.js"></script>
121
9
    <style type="text/css">
122
10
      body {
123
11
      overflow: hidden;
124
12
      }
125
13
    </style>
126
14
</head>
127
15
<body>
128
16
<div id="canvas"></div>
129
17
</body>
130
18
</html>
131
0
19
132
=== added file 'classes.js'
133
--- classes.js	1970-01-01 00:00:00 +0000
134
+++ classes.js	2010-10-24 05:37:41 +0000
135
@@ -0,0 +1,23 @@
136
1
//Show UCLA CS class dependencies (not complete)
137
2
$(document).ready(function() {
138
3
    var width = $(document).width();
139
4
    var height = $(document).height();
140
5
    var g = new Graph();
141
6
    g.edgeFactory.template.style.directed = true;
142
7
    g.addEdge("CS 31","CS 32");
143
8
    g.addEdge("CS 32","CS 33");
144
9
    g.addEdge("CS 33","CS 35L");
145
10
    g.addNode("CS M51A");
146
11
    g.addEdge("CS 32", "CS 111");
147
12
    g.addEdge("CS 33", "CS 111");
148
13
    g.addEdge("CS 35L", "CS 111");
149
14
    g.addEdge("CS 32", "CS 118");
150
15
    g.addEdge("CS 33", "CS 118");
151
16
    g.addEdge("CS 35L", "CS 118");
152
17
    g.addEdge("CS 111", "CS 118");
153
18
    g.addEdge("CS 32", "CS 131");
154
19
    g.addEdge("CS 33", "CS 131");
155
20
    g.addEdge("CS 35L", "CS 131");
156
21
    var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
157
22
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
158
23
});
159
0
\ No newline at end of file
24
\ No newline at end of file
160
1
25
161
=== modified file 'dracula_algorithms.html'
162
--- dracula_algorithms.html	2010-09-17 18:04:25 +0000
163
+++ dracula_algorithms.html	2010-10-24 05:37:41 +0000
164
@@ -1,122 +1,20 @@
165
1
<html>
1
<html>
168
2
<head>
2
  <head>
169
3
<!-- jQuery -->
3
    <!-- jQuery -->
170
4
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
4
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
172
5
<!--  The Raphael JavaScript library for vector graphics display  -->
5
    <!--  The Raphael JavaScript library for vector graphics display  -->
173
6
    <script type="text/javascript" src="js/raphael-min.js"></script>
6
    <script type="text/javascript" src="js/raphael-min.js"></script>
176
7
<!--  Dracula  -->
7
    <!--  Dracula  -->
177
8
<!--  An extension of Raphael for connecting shapes -->
8
    <!--  An extension of Raphael for connecting shapes -->
178
9
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
9
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
180
10
<!--  Graphs  -->
10
    <!--  Graphs  -->
181
11
    <script type="text/javascript" src="js/dracula_graph.js"></script>
11
    <script type="text/javascript" src="js/dracula_graph.js"></script>
182
12
    <script type="text/javascript" src="js/dracula_algorithms.js"></script>
12
    <script type="text/javascript" src="js/dracula_algorithms.js"></script>
292
13
    <script type="text/javascript">
13
    <script type="text/javascript" src="algorithms.js"></script>
293
14
<!--
14
  </head>
294
15
15
  <body>
295
16
var redraw;
16
    <div id="canvas"></div>
296
17
var height = 300;
17
    Looks ugly? Hit <button id="redraw" onclick="redraw();">redraw</button>!<br>
297
18
var width = 400;
18
    <!--<button onclick="step(-1)">Previous step</button> - <button onclick="step(1)">Next step</button>-->
298
19
19
  </body>
190
20
window.onload = function() {
191
21
192
22
    /* Showcase of the Bellman-Ford search algorithm finding shortest paths 
193
23
       from one point to every node */
194
24
    
195
25
    /*  */
196
26
197
27
    /* We need to write a new node renderer function to display the computed
198
28
       distance.
199
29
       (the Raphael graph drawing implementation of Dracula can draw this shape,
200
30
       please consult the RaphaelJS reference for details http://raphaeljs.com/) */
201
31
    var render = function(r, n) {
202
32
            /* the Raphael set is obligatory, containing all you want to display */
203
33
            var set = r.set().push(
204
34
                /* custom objects go here */
205
35
                r.rect(n.point[0]-30, n.point[1]-13, 60, 44).attr({"fill": "#feb", r : "12px", "stroke-width" : n.distance == 0 ? "3px" : "1px" })).push(
206
36
                r.text(n.point[0], n.point[1] + 10, (n.label || n.id) + "\n(" + (n.distance == undefined ? "Infinity" : n.distance) + ")"));
207
37
            return set;
208
38
        };
209
39
    
210
40
    var g = new Graph();
211
41
    /* creating nodes and passing the new renderer function to overwrite the default one */
212
42
    g.addNode("New York", {render:render}); // TODO add currying support for nicer code
213
43
    g.addNode("Berlin", {render:render});
214
44
    g.addNode("Tel Aviv", {render:render});
215
45
    g.addNode("Tokyo", {render:render});
216
46
    g.addNode("Roma", {render:render});
217
47
    g.addNode("Madrid", {render:render});
218
48
219
49
    /* modify the addEdge function to attach random weights */
220
50
    g.addEdge2 = g.addEdge;
221
51
    g.addEdge = function(from, to, style) { !style && (style={}); style.weight = Math.floor(Math.random()*10) + 1; g.addEdge2(from, to, style); };
222
52
    
223
53
    /* connections */
224
54
    g.addEdge("Tokyo", "Tel Aviv"/*, {weight:9, directed: true, stroke : "#bfa"}*/); // also supports directed graphs, but currently doesn't look that nice
225
55
    g.addEdge("Tokyo", "New York");
226
56
    g.addEdge("Tokyo", "Berlin");
227
57
    g.addEdge("Tel Aviv", "Berlin");
228
58
    g.addEdge("Tel Aviv", "New York");
229
59
    g.addEdge("Tel Aviv", "Roma");
230
60
    g.addEdge("Roma", "New York");
231
61
    g.addEdge("Berlin", "New York");
232
62
    g.addEdge("Madrid", "New York");
233
63
    g.addEdge("Madrid", "Roma");
234
64
    g.addEdge("Madrid", "Tokyo");
235
65
236
66
    /* random edge weights (our undirected graph is modelled as a bidirectional graph) */
237
67
/*    for(e in g.edges)
238
68
        if(g.edges[e].backedge != undefined) {
239
69
            g.edges[e].weight = Math.floor(Math.random()*10) + 1;
240
70
            g.edges[e].backedge.weight = g.edges[e].weight;
241
71
        }
242
72
*/
243
73
    /* layout the graph using the Spring layout implementation */
244
74
    var layouter = new Graph.Layout.Spring(g);
245
75
    
246
76
    /* draw the graph using the RaphaelJS draw implementation */
247
77
248
78
    /* calculating the shortest paths via Bellman Ford */
249
79
//    bellman_ford(g, g.nodes["Berlin"]);
250
80
    
251
81
    /* calculating the shortest paths via Dijkstra */
252
82
    dijkstra(g, g.nodes["Berlin"]);
253
83
    
254
84
    /* calculating the shortest paths via Floyd-Warshall */
255
85
    floyd_warshall(g, g.nodes["Berlin"]);
256
86
257
87
258
88
    /* colourising the shortest paths and setting labels */
259
89
    for(e in g.edges) {
260
90
        g.edges[e].style = { label : g.edges[e].weight };
261
91
        if(g.edges[e].target.predecessor === g.edges[e].source || g.edges[e].source.predecessor === g.edges[e].target) {
262
92
            g.edges[e].style.stroke = "#bfa";
263
93
            g.edges[e].style.fill = "#56f";
264
94
        } else {
265
95
            g.edges[e].style.stroke = "#aaa";
266
96
        }
267
97
    }
268
98
    
269
99
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
270
100
271
101
    redraw = function() {
272
102
        layouter.layout();
273
103
        renderer.draw();
274
104
    };
275
105
    
276
106
/*    var pos=0;
277
107
    step = function(dir) {
278
108
        pos+=dir;
279
109
        var renderer = new Graph.Renderer.Raphael('canvas', g.snapshots[pos], width, height);
280
110
        renderer.draw();
281
111
    };*/
282
112
};
283
113
284
114
-->
285
115
    </script>
286
116
</head>
287
117
<body>
288
118
<div id="canvas"></div>
289
119
Looks ugly? Hit <button id="redraw" onclick="redraw();">redraw</button>!<br>
290
120
<!--<button onclick="step(-1)">Previous step</button> - <button onclick="step(1)">Next step</button>-->
291
121
</body>
299
122
</html>
20
</html>
300
123
21
301
=== added file 'example.js'
302
--- example.js	1970-01-01 00:00:00 +0000
303
+++ example.js	2010-10-24 05:37:41 +0000
304
@@ -0,0 +1,109 @@
305
1
306
2
var redraw, g, renderer;
307
3
308
4
/* only do all this when document has finished loading (needed for RaphaelJS) */
309
5
window.onload = function() {
310
6
    
311
7
    var width = $(document).width() - 20;
312
8
    var height = $(document).height() - 60;
313
9
    
314
10
    g = new Graph();
315
11
316
12
    /* add a simple node */
317
13
    g.addNode("strawberry");
318
14
    g.addNode("cherry");
319
15
320
16
    /* add a node with a customized label */
321
17
    g.addNode("1", { label : "Tomato" });
322
18
323
19
    /* add a node with a customized shape 
324
20
       (the Raphael graph drawing implementation can draw this shape, please 
325
21
       consult the RaphaelJS reference for details http://raphaeljs.com/) */
326
22
    var render = function(r, n) {
327
23
        var label = r.text(0, 30, n.label).attr({opacity:0});
328
24
        /* the Raphael set is obligatory, containing all you want to display */
329
25
        var set = r.set().push(
330
26
            r.rect(-30, -13, 62, 86).attr({"fill": "#fa8", "stroke-width": 2, r : "9px"}))
331
27
            .push(label);
332
28
        /* make the label show only on hover */
333
29
        set.hover(function(){ label.animate({opacity:1,"fill-opacity":1}, 500); }, function(){ label.animate({opacity:0},300); });
334
30
335
31
        tooltip = r.set()
336
32
            .push(
337
33
                r.rect(0, 0, 90, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})
338
34
            ).push(
339
35
                r.text(25, 15, "overlay").attr({"fill": "#000000"})
340
36
            );
341
37
        for(i in set.items) {
342
38
            set.items[i].tooltip(tooltip);
343
39
        };
344
40
	//            set.tooltip(r.set().push(r.rect(0, 0, 30, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})).hide());
345
41
        return set;
346
42
    };
347
43
    g.addNode("id35", {
348
44
        label : "meat\nand\ngreed" ,
349
45
        /* filling the shape with a color makes it easier to be dragged */
350
46
        /* arguments: r = Raphael object, n : node object */
351
47
        render : render
352
48
    });
353
49
    //    g.addNode("Wheat", {
354
50
    /* filling the shape with a color makes it easier to be dragged */
355
51
    /* arguments: r = Raphael object, n : node object */
356
52
    //        shapes : [ {
357
53
    //                type: "rect",
358
54
    //                x: 10,
359
55
    //                y: 10,
360
56
    //                width: 25,
361
57
    //                height: 25,
362
58
    //                stroke: "#f00"
363
59
    //            }, {
364
60
    //                type: "text",
365
61
    //                x: 30,
366
62
    //                y: 40,
367
63
    //                text: "Dump"
368
64
    //            }],
369
65
    //        overlay : "<b>Hello <a href=\"http://wikipedia.org/\">World!</a></b>"
370
66
    //    });
371
67
372
68
    st = { directed: true, label : "Label"};
373
69
    g.addEdge("kiwi", "penguin", st);
374
70
375
71
    /* connect nodes with edges */
376
72
    g.addEdge("strawberry", "cherry");
377
73
    g.addEdge("cherry", "apple");
378
74
    g.addEdge("cherry", "apple")
379
75
    g.addEdge("1", "id35");
380
76
    g.addEdge("penguin", "id35");
381
77
    g.addEdge("penguin", "apple");
382
78
    g.addEdge("kiwi", "id35");
383
79
384
80
    /* a directed connection, using an arrow */
385
81
    g.addEdge("1", "cherry", { directed : true } );
386
82
    
387
83
    /* customize the colors of that edge */
388
84
    g.addEdge("id35", "apple", { stroke : "#bfa" , fill : "#56f", label : "Meat-to-Apple" });
389
85
    
390
86
    /* add an unknown node implicitly by adding an edge */
391
87
    g.addEdge("strawberry", "apple");
392
88
393
89
    g.removeNode("1");
394
90
395
91
    /* layout the graph using the Spring layout implementation */
396
92
    var layouter = new Graph.Layout.Spring(g);
397
93
    
398
94
    /* draw the graph using the RaphaelJS draw implementation */
399
95
    renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
400
96
    
401
97
    redraw = function() {
402
98
        layouter.layout();
403
99
        renderer.draw();
404
100
    };
405
101
    hide = function(id) {
406
102
        g.nodes[id].hide();
407
103
    };
408
104
    show = function(id) {
409
105
        g.nodes[id].show();
410
106
    };
411
107
    //    console.log(g.nodes["kiwi"]);
412
108
};
413
109
414
0
110
415
=== modified file 'index.html'
416
--- index.html	2010-09-20 18:56:38 +0000
417
+++ index.html	2010-10-24 05:37:41 +0000
418
@@ -2,118 +2,9 @@
419
2
<head>
2
<head>
420
3
    <script type="text/javascript" src="js/raphael-min.js"></script>
3
    <script type="text/javascript" src="js/raphael-min.js"></script>
421
4
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
4
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
422
5
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
423
5
    <script type="text/javascript" src="js/dracula_graph.js"></script>
6
    <script type="text/javascript" src="js/dracula_graph.js"></script>
535
6
    <script type="text/javascript">
7
    <script type="text/javascript" src="example.js"></script>
425
7
<!--
426
8
427
9
var redraw, g, renderer;
428
10
var height = 300;
429
11
var width = 400;
430
12
431
13
/* only do all this when document has finished loading (needed for RaphaelJS) */
432
14
window.onload = function() {
433
15
434
16
    g = new Graph();
435
17
436
18
    /* add a simple node */
437
19
    g.addNode("strawberry");
438
20
    g.addNode("cherry");
439
21
440
22
    /* add a node with a customized label */
441
23
    g.addNode("1", { label : "Tomato" });
442
24
443
25
    /* add a node with a customized shape 
444
26
       (the Raphael graph drawing implementation can draw this shape, please 
445
27
       consult the RaphaelJS reference for details http://raphaeljs.com/) */
446
28
    var render = function(r, n) {
447
29
            var label = r.text(0, 30, n.label).attr({opacity:0});
448
30
            /* the Raphael set is obligatory, containing all you want to display */
449
31
            var set = r.set().push(
450
32
                r.rect(-30, -13, 62, 86).attr({"fill": "#fa8", "stroke-width": 2, r : "9px"}))
451
33
                    .push(label);
452
34
            /* make the label show only on hover */
453
35
            set.hover(function(){ label.animate({opacity:1,"fill-opacity":1}, 500); }, function(){ label.animate({opacity:0},300); });
454
36
455
37
            tooltip = r.set()
456
38
                        .push(
457
39
                            r.rect(0, 0, 90, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})
458
40
                        ).push(
459
41
                            r.text(25, 15, "overlay").attr({"fill": "#000000"})
460
42
                        );
461
43
            for(i in set.items) {
462
44
                    set.items[i].tooltip(tooltip);
463
45
                };
464
46
//            set.tooltip(r.set().push(r.rect(0, 0, 30, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})).hide());
465
47
            return set;
466
48
        };
467
49
    g.addNode("id35", {
468
50
        label : "meat\nand\ngreed" ,
469
51
        /* filling the shape with a color makes it easier to be dragged */
470
52
        /* arguments: r = Raphael object, n : node object */
471
53
        render : render
472
54
    });
473
55
//    g.addNode("Wheat", {
474
56
        /* filling the shape with a color makes it easier to be dragged */
475
57
        /* arguments: r = Raphael object, n : node object */
476
58
//        shapes : [ {
477
59
//                type: "rect",
478
60
//                x: 10,
479
61
//                y: 10,
480
62
//                width: 25,
481
63
//                height: 25,
482
64
//                stroke: "#f00"
483
65
//            }, {
484
66
//                type: "text",
485
67
//                x: 30,
486
68
//                y: 40,
487
69
//                text: "Dump"
488
70
//            }],
489
71
//        overlay : "<b>Hello <a href=\"http://wikipedia.org/\">World!</a></b>"
490
72
//    });
491
73
492
74
    st = { directed: true, label : "Label"};
493
75
    g.addEdge("kiwi", "penguin", st);
494
76
495
77
    /* connect nodes with edges */
496
78
    g.addEdge("strawberry", "cherry");
497
79
    g.addEdge("cherry", "apple");
498
80
    g.addEdge("1", "id35");
499
81
    g.addEdge("penguin", "id35");
500
82
    g.addEdge("penguin", "apple");
501
83
    g.addEdge("kiwi", "id35");
502
84
503
85
    /* a directed connection, using an arrow */
504
86
    g.addEdge("1", "cherry", { directed : true } );
505
87
    
506
88
    /* customize the colors of that edge */
507
89
    g.addEdge("id35", "apple", { stroke : "#bfa" , fill : "#56f", label : "Meat-to-Apple" });
508
90
    
509
91
    /* add an unknown node implicitly by adding an edge */
510
92
    g.addEdge("strawberry", "apple");
511
93
512
94
    g.removeNode("apple");
513
95
514
96
    /* layout the graph using the Spring layout implementation */
515
97
    var layouter = new Graph.Layout.Spring(g);
516
98
    
517
99
    /* draw the graph using the RaphaelJS draw implementation */
518
100
    renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
519
101
    
520
102
    redraw = function() {
521
103
        layouter.layout();
522
104
        renderer.draw();
523
105
    };
524
106
    hide = function(id) {
525
107
        g.nodes[id].hide();
526
108
    };
527
109
    show = function(id) {
528
110
        g.nodes[id].show();
529
111
    };
530
112
//    console.log(g.nodes["kiwi"]);
531
113
};
532
114
533
115
-->
534
116
    </script>
536
117
</head>
8
</head>
537
118
<body>
9
<body>
538
119
<div id="canvas"></div>
10
<div id="canvas"></div>
539
120
11
540
=== modified file 'js/dracula_algorithms.js'
541
--- js/dracula_algorithms.js	2010-09-22 20:09:16 +0000
542
+++ js/dracula_algorithms.js	2010-10-24 05:37:41 +0000
543
@@ -35,6 +35,14 @@
544
35
                edge.target.distance = edge.source.distance + edge.weight;
35
                edge.target.distance = edge.source.distance + edge.weight;
545
36
                edge.target.predecessor = edge.source;
36
                edge.target.predecessor = edge.source;
546
37
            }
37
            }
547
38
	    //Added by Jake Stothard (Needs to be tested)
548
39
	    if(!edge.style.directed) {
549
40
		if(edge.target.distance + edge.weight < edge.source.distance) {
550
41
                    g.snapShot("Relax edge between "+edge.target.id+" and "+edge.source.id+".");
551
42
                    edge.source.distance = edge.target.distance + edge.weight;
552
43
                    edge.source.predecessor = edge.target;
553
44
		}
554
45
	    }
555
38
        }
46
        }
556
39
    
47
    
557
40
    g.snapShot("Ready.");
48
    g.snapShot("Ready.");
558
@@ -79,23 +87,25 @@
559
79
87
560
80
        /* for each neighbour of node */
88
        /* for each neighbour of node */
561
81
        for(e in node.edges) {
89
        for(e in node.edges) {
563
82
            if(node.edges[e].target.optimized)
90
	    var other = (node == node.edges[e].target) ? node.edges[e].source : node.edges[e].target;
564
91
		
565
92
            if(other.optimized)
566
83
                continue;
93
                continue;
567
84
94
568
85
            /* look for an alternative route */
95
            /* look for an alternative route */
569
86
            var alt = node.distance + node.edges[e].weight;
96
            var alt = node.distance + node.edges[e].weight;
570
87
            
97
            
571
88
            /* update distance and route if a better one has been found */
98
            /* update distance and route if a better one has been found */
573
89
            if (alt < node.edges[e].target.distance) {
99
            if (alt < other.distance) {
574
90
            
100
            
575
91
                /* update distance of neighbour */
101
                /* update distance of neighbour */
577
92
                node.edges[e].target.distance = alt;
102
                other.distance = alt;
578
93
103
579
94
                /* update priority queue */
104
                /* update priority queue */
580
95
                q.heapify();
105
                q.heapify();
581
96
106
582
97
                /* update path */
107
                /* update path */
584
98
                node.edges[e].target.predecessor = node;
108
                other.predecessor = node;
585
99
                g.snapShot("Enhancing node.")
109
                g.snapShot("Enhancing node.")
586
100
            }
110
            }
587
101
        }
111
        }
588
@@ -456,3 +466,60 @@
589
456
Function.prototype.curry = function(){
466
Function.prototype.curry = function(){
590
457
	return curry(this);
467
	return curry(this);
591
458
};
468
};
592
469
593
470
/**
594
471
 * Topological Sort
595
472
 *
596
473
 * Sort a directed graph based on incoming edges
597
474
 *
598
475
 * Coded by Jake Stothard
599
476
 */
600
477
function topological_sort(g) {
601
478
    //Mark nodes as "deleted" instead of actually deleting them
602
479
    //That way we don't have to copy g
603
480
604
481
    for(i in g.nodes)
605
482
	g.nodes[i].deleted = false;
606
483
    
607
484
    var ret = topological_sort_helper(g);
608
485
609
486
    //Cleanup: Remove the deleted property
610
487
    for(i in g.nodes)
611
488
	delete g.nodes[i].deleted
612
489
613
490
    return ret;
614
491
}
615
492
function topological_sort_helper(g) {
616
493
    //Find node with no incoming edges
617
494
    var node;
618
495
    for(i in g.nodes) {
619
496
	if(g.nodes[i].deleted)
620
497
	    continue; //Bad style, meh
621
498
	
622
499
	var incoming = false;
623
500
	for(j in g.nodes[i].edges) {
624
501
	    if(g.nodes[i].edges[j].target == g.nodes[i]
625
502
	      && g.nodes[i].edges[j].source.deleted == false) {
626
503
		incoming = true;
627
504
		break;
628
505
	    }
629
506
	}
630
507
	if(!incoming) {
631
508
	    node = g.nodes[i];
632
509
	    break;
633
510
	}
634
511
    }
635
512
636
513
    // Either unsortable or done. Either way, GTFO
637
514
    if(node == undefined)
638
515
	return [];
639
516
640
517
    //"Delete" node from g
641
518
    node.deleted = true;
642
519
    
643
520
    var tail = topological_sort_helper(g);
644
521
645
522
    tail.unshift(node);
646
523
647
524
    return tail;
648
525
}
649
459
526
650
=== modified file 'js/dracula_graph.js'
651
--- js/dracula_graph.js	2010-09-22 20:09:16 +0000
652
+++ js/dracula_graph.js	2010-10-24 05:37:41 +0000
653
@@ -28,18 +28,44 @@
654
28
 *  Original usage example:
28
 *  Original usage example:
655
29
 *      http://ajaxian.com/archives/new-javascriptcanvas-graph-library
29
 *      http://ajaxian.com/archives/new-javascriptcanvas-graph-library
656
30
 *
30
 *
660
31
/*--------------------------------------------------------------------------*/
31
 /*--------------------------------------------------------------------------*/
661
32
32
662
33
33
// Branched by Jake Stothard <stothardj@gmail.com>.
663
34
664
35
/*
665
36
 * Edge Factory
666
37
 */
667
38
var AbstractEdge = function() {
668
39
}
669
40
AbstractEdge.prototype = {
670
41
    hide: function() {
671
42
	this.connection.fg.hide();
672
43
	this.connection.bg && this.bg.connection.hide();
673
44
    }
674
45
};
675
46
var EdgeFactory = function() {
676
47
    this.template = new AbstractEdge();
677
48
    this.template.style = new Object();
678
49
    this.template.style.directed = false;
679
50
    this.template.weight = 1;
680
51
};
681
52
EdgeFactory.prototype = {
682
53
    build: function(source, target) {
683
54
	var e = jQuery.extend(true, {}, this.template);
684
55
	e.source = source;
685
56
	e.target = target;
686
57
	return e;
687
58
    }
688
59
};
689
34
60
690
35
/*
61
/*
691
36
 * Graph
62
 * Graph
692
37
 */
63
 */
693
38
var Graph = function() {
64
var Graph = function() {
696
39
    this.nodes = [];
65
    this.nodes = new Object();
695
40
    this.nodelist = []; // nodes by index number, only used once TODO use only one node container
697
41
    this.edges = [];
66
    this.edges = [];
698
42
    this.snapshots = []; // previous graph states TODO to be implemented
67
    this.snapshots = []; // previous graph states TODO to be implemented
699
68
    this.edgeFactory = new EdgeFactory();
700
43
};
69
};
701
44
Graph.prototype = {
70
Graph.prototype = {
702
45
    /* 
71
    /* 
703
@@ -52,25 +78,20 @@
704
52
    addNode: function(id, content) {
78
    addNode: function(id, content) {
705
53
        /* testing if node is already existing in the graph */
79
        /* testing if node is already existing in the graph */
706
54
        if(this.nodes[id] == undefined) {
80
        if(this.nodes[id] == undefined) {
709
55
                this.nodes[id] = new Graph.Node(id, content || {"id" : id}); /* nodes indexed by node id */
81
	    this.nodes[id] = new Graph.Node(id, content);
708
56
                this.nodelist.push(this.nodes[id]); /* node list indexed by numbers */
710
57
        }
82
        }
711
58
        return this.nodes[id];
83
        return this.nodes[id];
712
59
    },
84
    },
713
60
85
714
61
    // TODO rename style to content
715
62
    addEdge: function(source, target, style) {
86
    addEdge: function(source, target, style) {
716
63
        var s = this.addNode(source);
87
        var s = this.addNode(source);
717
64
        var t = this.addNode(target);
88
        var t = this.addNode(target);
719
65
        var edge = { source: s, target: t, style: style, weight: style&&style.weight||1, hide: function() { this.connection.fg.hide(); this.connection.bg && this.bg.connection.hide(); } }; // TODO tidy up here
89
	var edge = this.edgeFactory.build(s, t);
720
90
	jQuery.extend(edge.style,style);
721
66
        s.edges.push(edge);
91
        s.edges.push(edge);
722
67
        this.edges.push(edge);
92
        this.edges.push(edge);
729
68
        /* add an edge back if graph undirected */
93
	// NOTE: Even directed edges are added to both nodes.
730
69
        if(!style || !style.directed) {
94
	t.edges.push(edge);
725
70
            var backedge = { source: t, target: s, style: style, weight : style&&style.weight||1, backedge : edge }; // TODO tidy up here
726
71
            this.edges.push(backedge);
727
72
            t.edges.push(backedge);
728
73
        }
731
74
    },
95
    },
732
75
    
96
    
733
76
    /* TODO to be implemented
97
    /* TODO to be implemented
734
@@ -78,20 +99,21 @@
735
78
     * @comment     a comment describing the state
99
     * @comment     a comment describing the state
736
79
     */
100
     */
737
80
    snapShot: function(comment) {
101
    snapShot: function(comment) {
738
102
	/* FIXME
739
81
        var graph = new Graph();
103
        var graph = new Graph();
744
82
//        graph.nodes = clone(this.nodes);
104
	graph.nodes = jQuery.extend(true, {}, this.nodes);
745
83
//        graph.nodelist = clone(this.nodelist);
105
	graph.edges = jQuery.extend(true, {}, this.edges);
742
84
//        graph.edges = clone(this.edges);
743
85
        graph.snapShot = null;
746
86
        this.snapshots.push({comment: comment, graph: graph});
106
        this.snapshots.push({comment: comment, graph: graph});
747
107
	*/
748
87
    },
108
    },
749
88
    /* FIXME doesn't work properly yet */
750
89
    removeNode: function(id) {
109
    removeNode: function(id) {
756
90
        var i = 0;
110
	delete this.nodes[id];
757
91
        for(n in this.nodes)
111
        for(var i = 0; i < this.edges.length; i++) {
758
92
            (n == id) && this.nodes.splice(i, 1) && this.nodelist.splice(i, 1) | i++;
112
            if (this.edges[i].source.id == id || this.edges[i].target.id == id) {
759
93
        for(i in this.edges)
113
		this.edges.splice(i, 1);
760
94
            (this.edges[i].source.id == id || this.edges[i].target == id) && this.edges.splice(i, 1);
114
		i--;
761
115
	    }
762
116
	}
763
95
    }
117
    }
764
96
};
118
};
765
97
119
766
@@ -99,6 +121,7 @@
767
99
 * Node
121
 * Node
768
100
 */
122
 */
769
101
Graph.Node = function(id, node){
123
Graph.Node = function(id, node){
770
124
    node = node || {};
771
102
    node.id = id;
125
    node.id = id;
772
103
    node.edges = [];
126
    node.edges = [];
773
104
    node.hide = function() {
127
    node.hide = function() {
774
@@ -165,7 +188,7 @@
775
165
            var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0);
188
            var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0);
776
166
            var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0);
189
            var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0);
777
167
            selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
190
            selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
779
168
//            console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
191
	    //            console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
780
169
            for (var i in selfRef.graph.edges) {
192
            for (var i in selfRef.graph.edges) {
781
170
                selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw();
193
                selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw();
782
171
            }
194
            }
783
@@ -249,7 +272,7 @@
784
249
272
785
250
        var box = shape.getBBox();
273
        var box = shape.getBBox();
786
251
        shape.translate(Math.round(point[0])-(box.x+box.width/2)+0.5,Math.round(point[1]-(box.y+box.height/2)))
274
        shape.translate(Math.round(point[0])-(box.x+box.width/2)+0.5,Math.round(point[1]-(box.y+box.height/2)))
788
252
//console.log(box,point);
275
	//console.log(box,point);
789
253
        node.hidden || shape.show();
276
        node.hidden || shape.show();
790
254
        node.shape = shape;
277
        node.shape = shape;
791
255
    },
278
    },
792
@@ -275,132 +298,184 @@
793
275
};
298
};
794
276
Graph.Layout = {};
299
Graph.Layout = {};
795
277
Graph.Layout.Spring = function(graph) {
300
Graph.Layout.Spring = function(graph) {
804
278
                this.graph = graph;
301
    this.graph = graph;
805
279
                this.iterations = 500;
302
    this.iterations = 500;
806
280
                this.maxRepulsiveForceDistance = 6;
303
    this.maxRepulsiveForceDistance = 6;
807
281
                this.k = 2;
304
    this.k = 2;
808
282
                this.c = 0.01;
305
    this.c = 0.01;
809
283
                this.maxVertexMovement = 0.5;
306
    this.maxVertexMovement = 0.5;
810
284
                this.layout();
307
    this.layout();
811
285
        };
308
};
812
286
Graph.Layout.Spring.prototype = {
309
Graph.Layout.Spring.prototype = {
930
287
        layout: function() {
310
    layout: function() {
931
288
                this.layoutPrepare();
311
        this.layoutPrepare();
932
289
            for (var i = 0; i < this.iterations; i++) {
312
        for (var i = 0; i < this.iterations; i++) {
933
290
                        this.layoutIteration();
313
            this.layoutIteration();
934
291
                }
314
        }
935
292
                this.layoutCalcBounds();
315
        this.layoutCalcBounds();
936
293
        },
316
    },
937
294
       
317
    
938
295
        layoutPrepare: function() {
318
    layoutPrepare: function() {
939
296
            for (i in this.graph.nodes) {
319
        for (i in this.graph.nodes) {
940
297
                    var node = this.graph.nodes[i];
320
            var node = this.graph.nodes[i];
941
298
                        node.layoutPosX = 0;
321
            node.layoutPosX = 0;
942
299
                        node.layoutPosY = 0;
322
            node.layoutPosY = 0;
943
300
                        node.layoutForceX = 0;
323
            node.layoutForceX = 0;
944
301
                        node.layoutForceY = 0;
324
            node.layoutForceY = 0;
945
302
                }
325
        }
946
303
                
326
        
947
304
        },
327
    },
948
305
       
328
    
949
306
        layoutCalcBounds: function() {
329
    layoutCalcBounds: function() {
950
307
                var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
330
        var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
951
308
331
952
309
            for (i in this.graph.nodes) {
332
        for (i in this.graph.nodes) {
953
310
                        var x = this.graph.nodes[i].layoutPosX;
333
            var x = this.graph.nodes[i].layoutPosX;
954
311
                        var y = this.graph.nodes[i].layoutPosY;
334
            var y = this.graph.nodes[i].layoutPosY;
955
312
                                               
335
            
956
313
                        if(x > maxx) maxx = x;
336
            if(x > maxx) maxx = x;
957
314
                        if(x < minx) minx = x;
337
            if(x < minx) minx = x;
958
315
                        if(y > maxy) maxy = y;
338
            if(y > maxy) maxy = y;
959
316
                        if(y < miny) miny = y;
339
            if(y < miny) miny = y;
960
317
                }
340
        }
961
318
341
962
319
                this.graph.layoutMinX = minx;
342
        this.graph.layoutMinX = minx;
963
320
                this.graph.layoutMaxX = maxx;
343
        this.graph.layoutMaxX = maxx;
964
321
                this.graph.layoutMinY = miny;
344
        this.graph.layoutMinY = miny;
965
322
                this.graph.layoutMaxY = maxy;
345
        this.graph.layoutMaxY = maxy;
966
323
        },
346
    },
967
324
       
347
    
968
325
        layoutIteration: function() {
348
    layoutIteration: function() {
969
326
                // Forces on nodes due to node-node repulsions
349
        // Forces on nodes due to node-node repulsions
970
327
            for (var i = 0; i < this.graph.nodelist.length; i++) {
350
971
328
                    var node1 = this.graph.nodelist[i];
351
	var prev = new Array();
972
329
                    for (var j = i + 1; j < this.graph.nodelist.length; j++) {
352
	for(var c in this.graph.nodes) {
973
330
                            var node2 = this.graph.nodelist[j];
353
	    var node1 = this.graph.nodes[c];
974
331
                                this.layoutRepulsive(node1, node2);
354
            for (var d in prev) {
975
332
                        }
355
                var node2 = this.graph.nodes[prev[d]];
976
333
                }
356
                this.layoutRepulsive(node1, node2);
977
334
                // Forces on nodes due to edge attractions
357
		
978
335
            for (var i = 0; i < this.graph.edges.length; i++) {
358
            }
979
336
                    var edge = this.graph.edges[i];
359
	    prev.push(c);
980
337
                        this.layoutAttractive(edge);             
360
	}
981
338
                }
361
	
982
339
               
362
        // Forces on nodes due to edge attractions
983
340
                // Move by the given force
363
        for (var i = 0; i < this.graph.edges.length; i++) {
984
341
            for (i in this.graph.nodes) {
364
            var edge = this.graph.edges[i];
985
342
                    var node = this.graph.nodes[i];
365
            this.layoutAttractive(edge);             
986
343
                    var xmove = this.c * node.layoutForceX;
366
        }
987
344
                    var ymove = this.c * node.layoutForceY;
367
        
988
345
368
        // Move by the given force
989
346
                    var max = this.maxVertexMovement;
369
        for (i in this.graph.nodes) {
990
347
                    if(xmove > max) xmove = max;
370
            var node = this.graph.nodes[i];
991
348
                    if(xmove < -max) xmove = -max;
371
            var xmove = this.c * node.layoutForceX;
992
349
                    if(ymove > max) ymove = max;
372
            var ymove = this.c * node.layoutForceY;
993
350
                    if(ymove < -max) ymove = -max;
373
994
351
                   
374
            var max = this.maxVertexMovement;
995
352
                    node.layoutPosX += xmove;
375
            if(xmove > max) xmove = max;
996
353
                    node.layoutPosY += ymove;
376
            if(xmove < -max) xmove = -max;
997
354
                    node.layoutForceX = 0;
377
            if(ymove > max) ymove = max;
998
355
                    node.layoutForceY = 0;
378
            if(ymove < -max) ymove = -max;
999
356
                }
379
            
1000
357
        },
380
            node.layoutPosX += xmove;
1001
358
381
            node.layoutPosY += ymove;
1002
359
        layoutRepulsive: function(node1, node2) {
382
            node.layoutForceX = 0;
1003
360
                var dx = node2.layoutPosX - node1.layoutPosX;
383
            node.layoutForceY = 0;
1004
361
                var dy = node2.layoutPosY - node1.layoutPosY;
384
        }
1005
362
                var d2 = dx * dx + dy * dy;
385
    },
1006
363
                if(d2 < 0.01) {
386
1007
364
                        dx = 0.1 * Math.random() + 0.1;
387
    layoutRepulsive: function(node1, node2) {
1008
365
                        dy = 0.1 * Math.random() + 0.1;
388
        var dx = node2.layoutPosX - node1.layoutPosX;
1009
366
                        var d2 = dx * dx + dy * dy;
389
        var dy = node2.layoutPosY - node1.layoutPosY;
1010
367
                }
390
        var d2 = dx * dx + dy * dy;
1011
368
                var d = Math.sqrt(d2);
391
        if(d2 < 0.01) {
1012
369
                if(d < this.maxRepulsiveForceDistance) {
392
            dx = 0.1 * Math.random() + 0.1;
1013
370
                        var repulsiveForce = this.k * this.k / d;
393
            dy = 0.1 * Math.random() + 0.1;
1014
371
                        node2.layoutForceX += repulsiveForce * dx / d;
394
            var d2 = dx * dx + dy * dy;
1015
372
                        node2.layoutForceY += repulsiveForce * dy / d;
395
        }
1016
373
                        node1.layoutForceX -= repulsiveForce * dx / d;
396
        var d = Math.sqrt(d2);
1017
374
                        node1.layoutForceY -= repulsiveForce * dy / d;
397
        if(d < this.maxRepulsiveForceDistance) {
1018
375
                }
398
            var repulsiveForce = this.k * this.k / d;
1019
376
        },
399
            node2.layoutForceX += repulsiveForce * dx / d;
1020
377
400
            node2.layoutForceY += repulsiveForce * dy / d;
1021
378
        layoutAttractive: function(edge) {
401
            node1.layoutForceX -= repulsiveForce * dx / d;
1022
379
                var node1 = edge.source;
402
            node1.layoutForceY -= repulsiveForce * dy / d;
1023
380
                var node2 = edge.target;
403
        }
1024
381
               
404
    },
1025
382
                var dx = node2.layoutPosX - node1.layoutPosX;
405
1026
383
                var dy = node2.layoutPosY - node1.layoutPosY;
406
    layoutAttractive: function(edge) {
1027
384
                var d2 = dx * dx + dy * dy;
407
        var node1 = edge.source;
1028
385
                if(d2 < 0.01) {
408
        var node2 = edge.target;
1029
386
                        dx = 0.1 * Math.random() + 0.1;
409
        
1030
387
                        dy = 0.1 * Math.random() + 0.1;
410
        var dx = node2.layoutPosX - node1.layoutPosX;
1031
388
                        var d2 = dx * dx + dy * dy;
411
        var dy = node2.layoutPosY - node1.layoutPosY;
1032
389
                }
412
        var d2 = dx * dx + dy * dy;
1033
390
                var d = Math.sqrt(d2);
413
        if(d2 < 0.01) {
1034
391
                if(d > this.maxRepulsiveForceDistance) {
414
            dx = 0.1 * Math.random() + 0.1;
1035
392
                        d = this.maxRepulsiveForceDistance;
415
            dy = 0.1 * Math.random() + 0.1;
1036
393
                        d2 = d * d;
416
            var d2 = dx * dx + dy * dy;
1037
394
                }
417
        }
1038
395
                var attractiveForce = (d2 - this.k * this.k) / this.k;
418
        var d = Math.sqrt(d2);
1039
396
                if(edge.attraction == undefined) edge.attraction = 1;
419
        if(d > this.maxRepulsiveForceDistance) {
1040
397
                attractiveForce *= Math.log(edge.attraction) * 0.5 + 1;
420
            d = this.maxRepulsiveForceDistance;
1041
398
               
421
            d2 = d * d;
1042
399
                node2.layoutForceX -= attractiveForce * dx / d;
422
        }
1043
400
                node2.layoutForceY -= attractiveForce * dy / d;
423
        var attractiveForce = (d2 - this.k * this.k) / this.k;
1044
401
                node1.layoutForceX += attractiveForce * dx / d;
424
        if(edge.attraction == undefined) edge.attraction = 1;
1045
402
                node1.layoutForceY += attractiveForce * dy / d;
425
        attractiveForce *= Math.log(edge.attraction) * 0.5 + 1;
1046
403
        }
426
        
1047
427
        node2.layoutForceX -= attractiveForce * dx / d;
1048
428
        node2.layoutForceY -= attractiveForce * dy / d;
1049
429
        node1.layoutForceX += attractiveForce * dx / d;
1050
430
        node1.layoutForceY += attractiveForce * dy / d;
1051
431
    }
1052
432
};
1053
433
1054
434
Graph.Layout.Ordered = function(graph, order) {
1055
435
    this.graph = graph;
1056
436
    this.order = order;
1057
437
    this.layout();
1058
438
};
1059
439
Graph.Layout.Ordered.prototype = {
1060
440
    layout: function() {
1061
441
        this.layoutPrepare();
1062
442
        this.layoutCalcBounds();
1063
443
    },
1064
444
    
1065
445
    layoutPrepare: function(order) {
1066
446
        for (i in this.graph.nodes) {
1067
447
            var node = this.graph.nodes[i];
1068
448
            node.layoutPosX = 0;
1069
449
            node.layoutPosY = 0;
1070
450
        }
1071
451
	var counter = 0;
1072
452
	for (i in this.order) {
1073
453
	    var node = this.order[i];
1074
454
	    node.layoutPosX = counter;
1075
455
	    node.layoutPosY = Math.random();
1076
456
	    counter++;
1077
457
	}
1078
458
    },
1079
459
    
1080
460
    layoutCalcBounds: function() {
1081
461
        var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
1082
462
1083
463
        for (i in this.graph.nodes) {
1084
464
            var x = this.graph.nodes[i].layoutPosX;
1085
465
            var y = this.graph.nodes[i].layoutPosY;
1086
466
            
1087
467
            if(x > maxx) maxx = x;
1088
468
            if(x < minx) minx = x;
1089
469
            if(y > maxy) maxy = y;
1090
470
            if(y < miny) miny = y;
1091
471
        }
1092
472
1093
473
        this.graph.layoutMinX = minx;
1094
474
        this.graph.layoutMaxX = maxx;
1095
475
1096
476
        this.graph.layoutMinY = miny;
1097
477
        this.graph.layoutMaxY = maxy;
1098
478
    },
1099
404
};
479
};
1100
405
480
1101
406
/*
481
/*
1102
@@ -409,23 +484,6 @@
1103
409
484
1104
410
function log(a) {console.log&&console.log(a);}
485
function log(a) {console.log&&console.log(a);}
1105
411
486
1106
412
function clone(obj){
1107
413
    if(obj == null || typeof(obj) != 'object')
1108
414
        return obj;
1109
415
1110
416
    var temp = obj.constructor(); // changed
1111
417
1112
418
    for(var key in obj)
1113
419
        temp[key] = clone(obj[key]);
1114
420
    return temp;
1115
421
}
1116
422
1117
423
// this will eventually mess up array usage with for-in-loops
1118
424
//Array.prototype.onEach = function(f, arg) {
1119
425
//     var l = this.length;
1120
426
//     for( var i = 0; i < l; i++) this[i][f]( arg );
1121
427
//}
1122
428
1123
429
/*
487
/*
1124
430
 * Raphael Tooltip Plugin
488
 * Raphael Tooltip Plugin
1125
431
 * - attaches an element as a tooltip to another element
489
 * - attaches an element as a tooltip to another element
1126
@@ -445,7 +503,7 @@
1127
445
        function(event){ 
503
        function(event){ 
1128
446
            this.mousemove(function(event){ 
504
            this.mousemove(function(event){ 
1129
447
                this.tp.translate(event.clientX - 
505
                this.tp.translate(event.clientX - 
1131
448
                    this.tp.o.x,event.clientY - this.tp.o.y);
506
				  this.tp.o.x,event.clientY - this.tp.o.y);
1132
449
                this.tp.o = {x: event.clientX, y: event.clientY};
507
                this.tp.o = {x: event.clientX, y: event.clientY};
1133
450
            });
508
            });
1134
451
            this.tp.show().toFront();
509
            this.tp.show().toFront();
1135
@@ -453,6 +511,6 @@
1136
453
        function(event){
511
        function(event){
1137
454
            this.tp.hide();
512
            this.tp.hide();
1138
455
            this.unmousemove();
513
            this.unmousemove();
1140
456
            });
514
        });
1141
457
    return this;
515
    return this;
1142
458
};
516
};
Status:	Merged
Merged at revision:	39
Proposed branch:	lp:~stothardj/dracula/nonodelist
Merge into:	lp:dracula
Diff against target:	1142 lines (+567/-401) 8 files modified algorithms.js (+102/-0) classes.html (+18/-0) classes.js (+23/-0) dracula_algorithms.html (+13/-115) example.js (+109/-0) index.html (+2/-111) js/dracula_algorithms.js (+71/-4) js/dracula_graph.js (+229/-171)
To merge this branch:	bzr merge lp:~stothardj/dracula/nonodelist
Related bugs:	Link a bug report
Reviewer	Review Type	Date Requested	Status
Johann Philipp Strathausen		2010-10-24	Approve on 2010-11-25
Review via email: mp+39216@code.launchpad.net