Customizing Selection Visualization
Questions & AnswersSummary
Description
First, write a class for the selection paintable which implements the interface
com.yworks.graph.model.ISelectionPaintable. The interface's only method installSelectionPaintables(userObject:Object, canvas:CanvasComponent, selectionGroup:ICanvasObjectGroup):Array
has to install an array of canvas objects, depending on the userObject (the item to create the selection for) and the selectionGroup (the group of canvas objects to add the items to) into the canvas and return that array.
The principle implementation is shown here, an example can be found in the CustomStyleDemo in the demo package:
/**
* A Custom node selection paintable
*/
public class CustomNodeSelectionPaintable implements ISelectionPaintable
{
private var _rect:IRectangle;
private var _descriptor:MyDescriptor = new MyDescriptor();
public function CustomNodeSelectionPaintable( bounds:IRectangle ) {
// store some information, e.g. (as shown here) the bounding rectangle of the node.
this._rect = bounds;
}
/**
* Creates and installs one or more canvas objects into the canvas that indicate
* a selection decoration for an item
*/
public function installSelectionPaintables(userObject:Object,
canvas:CanvasComponent,
selectionGroup:ICanvasObjectGroup):Array {
if( userObject is INode ) {
// create and add the canvas objects to the canvas
return anArrayWithTheAddedCanvasObjects;
}
return new Array();
}
}
The graph will look for the paintable using a lookup chain link. Using yFiles FLEX 1.4.0.2 or later you can conveniently use the com.yworks.graph.model.NodeDecorator class to add the CustomNodeSelectionPaintable. Earlier versions have to add an com.yworks.support.IContextLookupChainLink (see below).
Using the NodeDecorator:
A com.yworks.graph.model.GraphDecorator has to be looked up from the graph so the selectionDecorator of its nodeDecorator property can be used to add the CustomNodeSelectionPaintable:
var graphDecorator:GraphDecorator = graphCanvas.graph.lookup(GraphDecorator) as GraphDecorator;
graphDecorator.nodeDecorator.selectionDecorator.setFactory(
function(node:INode):ISelectionPaintable {
return new CustomNodeSelectionPaintable(node.layout);
});
Using the custom IContextLookupChainLink:
First a custom IContextLookupChainLink has to be implemented:
/**
* A lookup chain link that returns a custom selection paintable implementation for INodes.
*/
public class SelectionPaintableChainLink extends AbstractContextLookupChainLink {
override public function lookupForItem(item:Object, type:Class):Object {
if( item is INode && type == ISelectionPaintable ) {
return new CustomNodeSelectionPaintable( INode( item ).layout );
}
return super.lookupForItem( item, type );
}
}
This LookupChainLink has to be added to the graph's lookup decorator:
/**
* Decorate the lookup for selection paintables
*/
private function initLookupDecorator():void {
var decorator:ILookupDecorator = graphCanvas.graph.lookup( ILookupDecorator ) as ILookupDecorator;
if( null != decorator ) {
if( decorator.canDecorate( INode ) ) {
decorator.addLookup(INode, new SelectionPaintableChainLink() );
}
}
}