CODEWITHSUNDEEP
javascripteventssvgraphael
atomSmasher
atomSmasher

Reputation: 1465

Multiple calls to Raphael hover function only works 'sometimes'

I have a function called drawPoint which is called several times using a for loop. The amount of iterations changes depending on which slide the user is viewing. On average the loop is iterating 8 to 10 times. Sometimes the hover event sticks to all of the iterations, and sometimes it doesn't. Most of the time it misses 3 to 4 of the points. There is not really a pattern. However, if an element fails to receive an event once it will always fail, even after a browser refresh.

Can anyone think of a reason why some svg elements would receive the event and others wouldn't? At first I thought there was a handler cap, but the number of working events fluctuates. Here is the function that is called over and over in the for loop:

drawPoint

drawPoint:function (imgPoint, radius, index, arrowHead) {

    var div = document.createElement("div");
    //div.className = "point";
    //div.id = "p" + index;

    if(arrowHead == false){
        div.style.width = radius*2 +"px";
        div.style.height = radius*2 +"px";

    }else{ //TODO implement actual arrowhead instead of smaller dot
        div.style.width = radius/2 +"px";
        div.style.height = radius/2 + "px";

    }

    div.style.zIndex = 10000 + index + "";

    var paper = Raphael(div);
    var point;

    //console.log("leader x: " + leader.xLength + "\nleader y: " + leader.yLength + "\nmagnitude: " + leader.magnitude);
    if (arrowHead == false) {
        point = paper.circle(radius, radius, radius);
    }
    else if (arrowHead == true){
        point = paper.circle(radius/2, radius/2, radius/2);
    }

    point.node.setAttribute("id", "p" + index );
        point.attr({
            "stroke":Overlay.annoColor,
            "fill":Overlay.annoColor
        });

    point.hover(function(){
            if ($("#allAnno").is(":checked"))
                Overlay.showLabel(parseInt(this.node.getAttribute('id').substring(1)))},
        function(){
            if ($("#allAnno").is(":checked"))
                Overlay.hideAllLabels();

        }
    );

    /*$(".point").hover(function(){
            if ($("#allAnno").is(":checked"))
                Overlay.showLabel(parseInt($(this).attr('id').substring(1)))},
        function(){
            if ($("#allAnno").is(":checked"))
                Overlay.hideAllLabels();
        });*/

    return div;
}

And the loop that instantiates...

 for (var v = 0; v < Overlay.currentOverlaySet.length; v++) {
                    ImageProvider.viewer.drawer.addOverlay(Overlay.drawPoint(Overlay.currentOverlaySet[v].SDPoint,
                        pointRadius, Overlay.currentOverlaySet[v].matchIndex, Overlay.currentOverlaySet[v].arrowHead),
                        Overlay.currentOverlaySet[v].SDPoint, Seadragon.OverlayPlacement.CENTER);
                }

Thanks for your help!

Upvotes: 4

Views: 262

Answers (1)

atomSmasher
atomSmasher

Reputation: 1465

Should anyone ever have this problem the solution is to modify the size of the Raphael paper, not the div passed to the Raphael object. For some reason, the divs are covering each other up, blocking the hover event for some of the elements. You can also fix this problem by altering the z-index of multiple objects, but its not as solid... depending on your application.

Upvotes: 1

Related Questions