Arbor.js queries

Question

I have been working with arbor.js and need help with the couple of problems. I was able to create a graph based on a database, a basic graph. Now, what I need to do, click on the node and get the node data and get it displayed on the side. Also have a directed edge. So, the problems are

1. My mousedown function is not working. Either it totally won't work or if it works, when I click a node it automatically goes to drag, ie it gets attatched to the mouse and I can't release it. What am trying to do is when I click the node I need to display the node details on the side. The noded details are on another page which can be retrieved as json. My mouse handling code is as follows

    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); var d = document.getElementById("infoDiv"); if (dragged && dragged.node !== null){ // while we're dragging, don't let physics move the node dragged.node.fixed = true } ///document.getElementById('detailBox').innerHTML=selected.node.name; $(canvas).bind('mousemove', handler.dragged) $(window).bind('mouseup', handler.dropped) $(canvas).bind('mousedown', handler.clicked) 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 } clicked:function(e){ var pos = $(this).offset(); var p = {x:e.pageX-pos.left, y:e.pageY-pos.top} selected = nearest = dragged = particleSystem.nearest(p); var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name; if (selected.node !== null){ // dragged.node.tempMass = 10000 dragged.node.fixed = false; //$(canvas).unbind('mousemove', handler.dragged) } //document.getElementById('detailBox').innerHTML=selected.node.name; getData(nodeAddress); //alert(nodeData.self); return false; } } //My click function //$(canvas).mousedown(function(e){ //}); 

   },

   }

The above code does not work at all, I am new to jQuery as well, hence I can't figure out the error, what the last function clicked, is trying to do is that on the clicking of a node, fetch its details from another page and display it. The function here is utter fail. Before I tried like this,

   //My click function
    $(canvas).mousedown(function(e){
        var pos = $(this).offset();
        var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
        selected = nearest = dragged = particleSystem.nearest(p);
        var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name;

        if (selected.node !== null){
        // dragged.node.tempMass = 10000
            dragged.node.fixed = false;
            //$(canvas).unbind('mousemove', handler.dragged)        
        }
        //document.getElementById('detailBox').innerHTML=selected.node.name;
        getData(nodeAddress);
        //alert(nodeData.self);
        return false;
    });



    // start listening
    $(canvas).mousedown(handler.clicked);

This comes outside the handler variable, with this the javascript worked fine, and it displayed the node number on the side. But I was not able to query and get the json. The graph got stuck to the pointed too.

Is this the way to try it? How can I get it done otherwise. Sorry for the big question, and the unintentional wrong format, it is my first post here.

Thanks.

Answer 1

The following code for my handler works for me. YMMV.

Instead of having a clicked function, I have a down which maps to a dropped and dragged .
I also included a move variable which is used in the dropped function to indicate whether the node was actually clicked or just dragged.

Hopefully this helps!

initMouseHandling:function(){
// no-nonsense drag and drop (thanks springy.js)
selected = null;
nearest = null;
var dragged = null;
var move = false;

// set up a handler object that will initially listen for mousedowns then
// for moves and mouseups while dragging
var handler = {
  moved:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
    nearest = particleSystem.nearest(_mouseP);

    if(!nearest.node){
        return false;
    }

    selected = (nearest.distance < nearest.node.data.radius) ? nearest : null

    // code for node that mouse is hovered on ('selected')

  },
  down:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    nearest = dragged = particleSystem.nearest(_mouseP);
    move = false;

    if (dragged && dragged.node !== null){
        dragged.node.fixed = true
    }

    $(canvas).bind('mousemove', handler.dragged)
    $(window).bind('mouseup', handler.dropped)

    return false
  },
  dragged:function(e){
    var old_nearest = nearest && nearest.node._id
    var pos = $(canvas).offset();
    var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    move = true;

    if (!nearest) return
    if (dragged !== null && dragged.node !== null){
      var p = particleSystem.fromScreen(s)
      dragged.node.p = p
    }

    return false
  },

  dropped:function(e){
    var edit = $("#edit").prop('checked')
    if (dragged===null || dragged.node===undefined) return
    if (dragged.node !== null) {
        if(move===false) {

            // code for clicked node (dragged.node)

        }
        dragged.node.fixed = false
    }
    dragged.node.tempMass = 1000
    dragged = null
    selected = null
    $(canvas).unbind('mousemove', handler.dragged)
    $(window).unbind('mouseup', handler.dropped)
    _mouseP = null
    return false
  }
}

$(canvas).mousedown(handler.down);
$(canvas).mousemove(handler.moved);
}