getNodeByPos

[swalesch]

Hey dhotson,

I have wrote a function for your springyui and want to share it with you. Maybe you like it. I wrote a getNodeByPos function. This function returns the node the mouse is over. If there is no node it returns Null. I used the BoxWidth and BoxHeight to do so. I wrote the BoxSize at the draw method to each node so I don’t have to call the getHeight/Width method all the time. Because I add multilining as well, so the size is Content based (so I only need to get the height/width only once per render cycle not twice). I replaced the usage of the nearest method with this function. The problem is I can’t add it to your springy.js because I need the to/from Screen method from the springyui.js. The coordinate have to be in px, or I try to get the boxsize to vectors as well, but to do this I need the logic of the from/toScreen methods as well. =( Have you an idea?

The other Problem is, it looks like the Click is a little bit aboth the actual box. (Also the arrows connected not to the correct boxSize), Of course i changed the getHight/Width methode by returning the correct Size. The X Vector works well, but the Y dosn't. Have you a clue why?

The function:

var getNodeByPos = function(pos){
    var clickX=pos.x;
    var clickY=pos.y;
    var node={node: null, point: null, distance: null};
    this.graph.nodes.forEach(function(n){
        var point = layout.point(n);
        var pointh=toScreen(point.p);
            //X in Box
            if(clickX>(pointh.x-n.data.boxWidth/2) && clickX<(pointh.x+n.data.boxWidth/2)){
                //Y in Box
                if(clickY>(pointh.y-n.data.boxHeight/2) && clickY<(pointh.y+n.data.boxHeight/2)){
                    node = {node: n, point: point, distance: 0};
                }
            }
    });

    return node;
}

I can use it like the nearest method, without the fromscreen for the position:

var pos = jQuery(this).position();
var p = {x: e.pageX - pos.left, y: e.pageY - pos.top};
selected = nearest = dragged = getNodeByPos(p);

Thanks
Stefan

[dhotson]

Hi Stefan,

Thanks for the submission. This is something I've wondered about how to implement in a clean way.

Because springy leaves rendering up to end users it's difficult to do hit testing of nodes in a general purpose way. Especially since the node drawing order is kind of undefined.

It's not too bad if you assume nodes are rectangular. Circular is a little bit harder. Any weird custom shapes are going to be more complicated.

I think I'll leave this out of scope of springy for now. The nearest node functionality gives "good enough" results as a default I think.

Thanks again.