diff options
| -rw-r--r-- | main.js | 94 |
1 files changed, 82 insertions, 12 deletions
@@ -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; |