Customizing Selection Visualization

Questions & Answers

Summary

This article demonstrates how to implement a custom visualization for selected nodes using yFiles' lookup mechanism.

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() );
    }
  }
}
For an example see the CustomStyle demo which can be found in the demo package shipped with YFiles FLEX.
For further information about the lookup mechanism and lookup decoration, see the yFiles FLEX developer's guide.

Categories this article belongs to:
yFiles FLEX > Architectural Concepts > Look-up Mechanism
yFiles FLEX > Displaying and Editing Graphs > View Implementations
Applies to:
yFiles FLEX: 1.4, 1.5, 1.6, 1.7, 1.8
Keywords:
visualization - customized visualization - lookup - lookup decorator - ISelectionPaintable