diff options
Diffstat (limited to 'main.js')
| -rw-r--r-- | main.js | 104 |
1 files changed, 43 insertions, 61 deletions
@@ -41,7 +41,7 @@ // which allow you to step through the actual node objects but also pass an // x,y point in the screen's coordinate system // - ctx.fillStyle = "white" + ctx.fillStyle = "black" ctx.fillRect(0,0, canvas.width, canvas.height) // JESTEM BOGIEM PRZEKSZTAŁCEŃ 2D :O @@ -66,8 +66,8 @@ // pt1: {x:#, y:#} source position in screen coords // pt2: {x:#, y:#} target position in screen coords - ctx.strokeStyle = edge.data.style || "rgba(0,0,0, .333)" - ctx.lineWidth = edge.data.width || 1 + ctx.strokeStyle = edge.data.style || "rgba(255,255,255,.333)" + ctx.lineWidth = edge.data.width || 3 ctx.setLineDash(edge.data.dash || []) // draw a line from pt1 to pt2 @@ -177,85 +177,67 @@ // node: {mass:#, p:{x,y}, name:"", data:{}} // pt: {x:#, y:#} node position in screen coords - - if (node.data.imageObject) { - drawImage(node.data.imageObject, pt); + if (node.data.image) { + if (node.data.imageObject) { + drawImage(node.data.imageObject, pt); + } + else { + var img = new Image(node.data.width, node.data.height); + img.onload = function() { + node.data.imageObject = img; + drawImage(node.data.imageObject, pt); + }; + img.src = '_img/' + node.data.image; + } } else { - var img = new Image(node.data.width, node.data.height); - img.onload = function() { - node.data.imageObject = img; - drawImage(node.data.imageObject, pt); - }; - img.src = '_img/' + node.data.image; + var color = node.data.color || 'black'; + ctx.fillStyle = color; + ctx.lineWidth = 5; + ctx.strokeStyle = 'rgba(255,255,255,0.33)'; + ctx.beginPath(); + ctx.arc(pt.x, pt.y, node.data.width / 2, 0, Math.PI*2); + ctx.stroke(); + ctx.fill(); } }) }, initMouseHandling:function(){ - // no-nonsense drag and drop (thanks springy.js) - var dragged = null; - - // set up a handler object that will initially listen for mousedowns then - // for moves and mouseups while dragging - var handler = { - clicked:function(e){ - var pos = $(canvas).offset(); - _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) - dragged = particleSystem.nearest(_mouseP); - - if (dragged && dragged.node !== null){ - // while we're dragging, don't let physics move the node - dragged.node.fixed = true - } - - $(canvas).bind('mousemove', handler.dragged) - $(window).bind('mouseup', handler.dropped) - - return false - }, - dragged:function(e){ - var pos = $(canvas).offset(); - var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) - - if (dragged && dragged.node !== null){ - var p = particleSystem.fromScreen(s) - dragged.node.p = p - } - - return false - }, - - dropped:function(e){ - if (dragged===null || dragged.node===undefined) return - if (dragged.node !== null) dragged.node.fixed = false - dragged.node.tempMass = 1000 - dragged = null - $(canvas).unbind('mousemove', handler.dragged) - $(window).unbind('mouseup', handler.dropped) - _mouseP = null - return false - } - } - // start listening - $(canvas).mousedown(handler.clicked); - + $(canvas).click(function(e) { + var pos = $(canvas).offset(); + _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) + dragged = particleSystem.nearest(_mouseP); + console.log(dragged.node); + }); }, } return that } + 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; - var sys = arbor.ParticleSystem(graph.repulsion, graph.stiffness, graph.friction); // create the system with sensible repulsion/stiffness/friction - sys.parameters({gravity:true}); // use center-gravity to make the graph settle nicely (ymmv) + graph.gravity = graph.gravity || false; + graph.fps = graph.fps || 55; + graph.precision = graph.precision || 0.6; + graph.dt = graph.dt || 0.02; + 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'); + }); + $(window).resize(function() { + var width = $(window).width() - 5; + var height = $(window).height() - 5; + $('#viewport').attr({'width': width, + 'height': height}); + sys.screenSize(width, height); }); }) |