Wiki

Interaction.js

addEvent

Function addEvent

Binds a predefined event function with corresponding mouse/touch/gesture base event.

addEvent(eventType, eventName)

Parameters details

eventType      = --Applicable for  showAttribute, showMenue eventType
                           ("mouseover"|"click"|"dblclick"|..) 
                          --Applicable for showNodeLabel eventType 
                           ("static") 
                          --Applicable for lassoSelection  
                           ("rectangle"|"circle")          


eventName      = ("showAttribute"|"showNodeLabel"|"showMenue"|"lassoSelection")

showAttribute
Display the attributes of nodes as tooltips when corresponding event type is fired.

showNodeLabel
Display the label of nodes as static labels when called.

showMenue
Display the menu for nodes to choose from different interaction options when corresponding event is fired. Currently highlighting the child node option has been implemented. Other options will be added in later version of the API.//

lassoSelection
Provide a node selection options using lasso gesture (a bounding box). You can use different shape to define the bounding box of lasso. However currently only rectangle option has been implemented. Details: http://depts.washington.edu/aimgroup/proj/dollar/

Example

Following code binds the mouseover event to showAttribute event function. Results: on mouseover on nodes, attribute of nodes will be displayed as tooltips.

addEvent("mouseover", "showAttribute");

Special Notes

showAttribute

By default showAttribute displays the Node value and number of children. If more/less option is desired to be displayed you need to make changes in the interaction.js file. For Example: If a user want to display the number of leaves, s/he need to make the following changes in addEventShowAttribute method in interaction.js file.

function addEventShowAttribute(eventType,primitive, id, x, y, selectedNode){
        primitive.addEventListener(eventType, function(){
        var attributeValue = selectedNode.getElementsByTagName("attribute")[0].getAttribute("value");
        var numOfChild = selectedNode.stats.children;
        var message = " Node Value: " +attributeValue +" Child: " + numOfChild ;
        showTooltip(id, message, x, y);

});
}

function addEventShowAttribute(eventType,primitive, id, x, y, selectedNode){
        primitive.addEventListener(eventType, function(){
        var attributeValue = selectedNode.getElementsByTagName("attribute")[0].getAttribute("value");
        var numOfChild = selectedNode.stats.children;
        var numOfLeaves = selectedNode.stats.leaves; //added code to display leaves
        var message = " Node Value: " +attributeValue +" Child: " + numOfChild + " Leaves: " + numOfLeaves; ////added code to display leaves
        showTooltip(id, message, x, y);

});
}