* node navigation

1 files changed, 82 insertions, 12 deletions

diff --git a/main.js b/main.js
index 8751d33..74d3bd4 100644
--- a/main.js
+++ b/main.js
@@ -266,6 +266,9 @@
                     node.data.zindex = currentZIndex++;
                     if (node.data.main) {
                         mainNode = node;
+                        if (history.replaceState) {
+                            history.replaceState(null, null, '#' + node.name);
+                        }
                     }
 
                     if (node.data.image && node.data.width > 10) {
@@ -334,15 +337,78 @@
             },
 
             initMouseHandling:function(){
-                var balloon;
-                // start listening
-                $(canvas).click(function(e) {
+                var hideBalloon = function() {
                     if (balloon) {
                         balloon.data('node').data.balloon = undefined;
                         balloon.remove();
                         balloon = undefined;
                         balloonNode = undefined;
                     }
+                }
+                var fixedNodes = 0;
+                var moveNode = function(node, newNode, duration) {
+                    var steps = 20;
+                    duration = duration || 1000;
+                    var xStep = (newNode.x - node.p.x) / steps;
+                    var yStep = (newNode.y - node.p.y) / steps;
+                    var originalPosition = { x: node.p.x,
+                                             y: node.p.y };
+                    for (var step = 0; step < steps; step++) {
+                        setTimeout(
+                            function(i) {
+                                return function() {
+                                    node.p = { x: originalPosition.x + xStep * i,
+                                               y: originalPosition.y + yStep * i };
+                                    if (i == steps - 1) {
+                                        fixedNodes--;
+                                    }
+                                }
+                            }(step),
+                            step * duration / steps
+                        );
+                    }
+                }
+                var switchContext = function() {
+                    var link = $(this);
+                    hideBalloon();
+                    $.getJSON(
+                        '_data/' + link.attr('data-link') + '.json?' + (new Date()).getTime(),
+                        function(newGraph) {
+                            fixedNodes = 0;
+                            particleSystem.prune(function(node) {
+                                if (node.data.main) {
+                                    node.fixed = false;
+                                }
+                                if (newGraph.nodes[node.name]) {
+                                    node.fixed = true;
+                                    node.data.mass = node.mass;
+                                    node.tempMass = 10000;
+                                    fixedNodes++;
+                                    moveNode(node, newGraph.nodes[node.name], 1500);
+                                    return false;
+                                } else {
+                                    node.tempMass = 0.001;
+                                    return true;
+                                }
+                            });
+                            var mergeInterval = setInterval(function() {
+                                if (fixedNodes == 0) {
+                                    particleSystem.merge(newGraph);
+                                    particleSystem.prune(function(node) {
+                                        node.tempMass = node.mass;
+                                        return false;
+                                    });
+                                    clearInterval(mergeInterval);
+                                }
+                            }, 100);
+                        }
+                    );
+
+                }
+                var balloon;
+                // start listening
+                $(canvas).click(function(e) {
+                    hideBalloon();
                     var pos = $(canvas).offset();
                     _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
                     var candidateNode = undefined;
@@ -381,18 +447,22 @@
 
     var sys;
     $(document).ready(function() {
-        $.getJSON('graph.json', function(graph) {
-            graph.repulsion = graph.repulsion || 1000;
-            graph.stiffness = graph.stiffness || 600;
-            graph.friction = graph.friction || 0.5;
-            graph.gravity = graph.gravity || false;
-            graph.fps = graph.fps || 55;
-            graph.precision = graph.precision || 0.6;
-            graph.dt = graph.dt || 0.02;
+        var graphID = 'graph';
+        if (location.hash) {
+            graphID = location.hash.replace(/^#/, '');
+        }
+        $.getJSON('_data/' + graphID + '.json', function(graph) {
+            graph.repulsion = graph.repulsion || 20;
+            graph.stiffness = graph.stiffness || 1;
+            graph.friction = graph.friction || 0.99;
+            graph.gravity = graph.gravity || true;
+            graph.fps = graph.fps || 10;
+            graph.precision = graph.precision || 0.1;
+            graph.dt = graph.dt || 0.11;
             sys = arbor.ParticleSystem(graph.repulsion, graph.stiffness, graph.friction, graph.gravity, graph.fps, graph.dt, graph.precision);
             sys.renderer = Renderer("#viewport"); // our newly created renderer will have its .init() method called shortly by sys...
-            sys.graft(graph);
             $(window).trigger('resize');
+            sys.graft(graph);
         });
         $(window).resize(function() {
             var width = $(window).width() - 5;