How to get Edge click event to trigger for bezier edge type in infovis Spacetree

[Adarsh Nellore]

Hi,

The following works for arrow/line edge types (and that too only for slanted edges), but does not work for bezier or any other custom edge type. Very much appreciate your advise on how to get the edge events working for bezier edge type.

Events : {
                                 enable : true,
                                  enableForEdges : true,

                                  onClick : function(nodeOrEdge,
                                                    eventInfo, e) {

                                                if (eventInfo.getEdge()) {

                                                   alert(" Edge clicked");
                                                }
                                   }
            }

Below is my code (modified example1) for arrow edge type. Clicking on edges between node1->node4 and node2->node3 do not generate the edge event whereas the other edges do.

function init(){
    //init data
   
    var json = {"id":"node1","name":"node1","

children":[{"id":"node2","name":"node2","children":[{"id":"node3","name":"node3","children":[],"type":"db","data":{"imgtype":"db"}}],"type":"api","data":{"imgtype":"api"},"$area":500},{"id":"node4","name":"node4","children":[],"type":"pool","data":{"imgtype":"pool"},"$area":500},{"id":"node5;e","name":"node5e","children":[],"type":"pool","data":{"imgtype":"pool"},"$area":500}],"type":null,"data":{"imgtype":null},"$area":500}

   
   
    $jit.ST.Plot.NodeTypes.implement({ 
    //This node type is used for plotting pie-chart slices as nodes 
    'shortnodepie': { 
      'render': function(node, canvas) { 

var ctx = canvas.getCtx();        
         var img = new Image();
            img.src = "../img/icon.png";
            var pos = node.pos.getc(true);
            var ctx = canvas.getCtx();
            ctx.drawImage(img, pos.x-15, pos.y-15);
      } 
    } 
}); 
    //end
    //init Spacetree
    //Create a new ST instance
    var st = new $jit.ST({
        //id of viz container element
        injectInto: 'infovis',
        //set duration for the animation
        duration: 800,
       
        //set animation transition type
        //transition: $jit.Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 100,
        constrained : false,
        orientation: "top",
       
        //enable panning
        Navigation: {
          enable:true,
          panning:true,
          zooming:20
        },
        Node: {
            height: 50,
            width: 80,
            color: '#aaa',
            overridable: true,
            type: 'none'
        },
       
       
      
        Edge: {
            type: 'arrow',
            overridable: true,
            lineWidth : 6,
            epsilon : 7
        },
       
        onBeforeCompute: function(node){
            Log.write("loading " + node.name);
        },
       
        onAfterCompute: function(){
            Log.write("done");
        },
       
       
        //This method is called on DOM label creation.
        //Use this method to add event handlers and styles to
        //your node.
        onCreateLabel: function(label, node){
            label.id = node.id;           
            label.innerHTML = node.name;
            label.onclick = function(){
                if(normal.checked) {
                  st.onClick(node.id);
                } else {
                st.setRoot(node.id, 'animate');
                }
            };
            //set label styles
            var style = label.style;
            style.width = 60 + 'px';
            style.height = 25 + 'px';           
            style.cursor = 'pointer';
            style.color = '#FFFFFF';
            style.fontSize = '0.8em';
            style.textAlign= 'center';
            style.paddingTop = '5px';
            style.paddingBottom = '5px';
            style.paddingLeft = '0px';
            style.paddingRight = '0px';
        },
       
       
                                        Events : {
                                            enable : true,
                                            enableForEdges : true,
                                           
                                            onClick : function(nodeOrEdge,
                                                    eventInfo, e) {

                                                if (eventInfo.getEdge()) {
                                                alert (" Edge clicked");
                                                }
                                            }
                                            },
       
        //This method is called right before plotting
        //a node. It's useful for changing an individual node
        //style properties before plotting it.
        //The data properties prefixed with a dollar
        //sign will override the global node style properties.
        onBeforePlotNode: function(node){
            //add some color to the nodes in the path between the
            //root node and the selected node.
            if (node.selected) {
                node.data.$color = "#ff7";
            }
            else {
                delete node.data.$color;
                //if the node belongs to the last plotted level
                if(!node.anySubnode("exist")) {
                    //count children number
                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    //assign a node color based on
                    //how many children it has
                    node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                   
                }
            }
        },
       
        //This method is called right before plotting
        //an edge. It's useful for changing an individual edge
        //style properties before plotting it.
        //Edge data proprties prefixed with a dollar sign will
        //override the Edge global style properties.
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#eed";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    //load json data
    st.loadJSON(json);
    //compute node positions and layout
    st.compute();
    //optional: make a translation of the tree
    st.geom.translate(new $jit.Complex(-200, 0), "current");
    //emulate a click on the root node.
    st.onClick(st.root);
    //end
    //Add event handlers to switch spacetree orientation.
    var top = $jit.id('r-top'),
        left = $jit.id('r-left'),
        bottom = $jit.id('r-bottom'),
        right = $jit.id('r-right'),
        normal = $jit.id('s-normal');
       
   
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            st.switchPosition(this.value, "animate", {
                onComplete: function(){
                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                }
            });
        }
    };
   
    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
    //end

}