Handling mouse clicks on edges or nodes
TroubleshootingSummary
Description
Single click event on a graph item (since yFiles FLEX 1.4)
Single click events on graph items can be handled using the GraphEditorEvent dispatched by
com.yworks.graph.input.GraphEditorInputMode:
graphEditorInputMode.addEventListener(GraphEditorEvent.ITEM_CLICKED, onItemClicked);
private function onItemClicked(evt:GraphEditorEvent):void {
var clickedItem:IModelItem = evt.item;
if( clickedItem is INode ) {
var clickedNode:INode = INode(clickedItem);
// do something with the node..
}
}
Single click event on a node or edge (yFiles FLEX 1.3 and earlier)
Single clicks on graph objects can be handled using the com.yworks.canvas.input.ClickInputMode, which is part of the com.yworks.graph.input.GraphEditorInputMode and can be accessed using GraphEditorInputMode.clickInputMode.
One has to listen for the "click" event of the ClickInputMode and use GraphCanvasComponent.getCanvasObjects(x, y) to find the clicked object.
See the knowledge base article
How to find out which graph item is located at particular coordinates for details how to do that.
The following example shows how to:
- Create and install the GraphEditorInputMode and register the event listener
- Handle the click event and retrieve the clicked node
...
// initialization
// graphCanvas is the GraphCanvasComponent for the graph
var graphEditorInputMode:GraphEditorInputMode = new GraphEditorInputMode(graphCanvas.graph, graphCanvas.selection);
graphEditorInputMode.install(graphCanvas);
var clickInputMode:ClickInputMode = graphEditorInputMode.clickInputMode;
clickInputMode.addEventListener(ClickEvent.CLICK, onClick);
...
/**
* Event Listener for ClickEvents
*/
private function onClick( event:Event ) {
var node:INode = findHitNode(ClickEvent(event).clickPoint.x, ClickEvent(event).clickPoint.y);
// do something with the node
}
/**
* Iterate over all canvas objects found at the clicked
* coordinates to find the topmost node that was hit.
*/
private function findHitNode( hitX:Number, hitY:Number ):INode {
var it:Iterator = graphCanvas.getCanvasObjects( hitX, hitY ).iterator();
while( it.hasNext() ) {
var hitObj:ICanvasObject = ICanvasObject( it.next() );
var hitNode:INode = hitObj.userObject as INode;
if( null != hitNode ) {
return hitNode;
}
}
return null;
}
Handling double clicks on a node or edge
Since yFiles FLEX 1.2 the ClickInputMode can also handle double clicks. When the
doubleClick property is set to true, a ClickEvent will be fired upon
double clicks, but no longer on single clicks. One ClickInputMode can handle either
single or double clicks. In order to handle both kinds, one has to register two different
ClickInputModes.
In the following example, a ClickInputMode configured for double clicks will be installed on the GraphEditorInputMode in addition to its preinstalled default click input mode which handles the single clicks. The registered listener (onClick) is the same as in the above example.
var clickInputMode:ClickInputMode = new ClickInputMode();
clickInputMode.doubleClick = true;
clickInputMode.addEventListener(ClickEvent.CLICK, onClick);
graphEditorInputMode.addConcurrent(clickInputMode, graphEditorInputMode.clickModePriority - 2);