Diff for "(sample_code_userland_notes)"

Following are some notes/observations relating to my experience working with the Custom Node Graphics API.

A custom node essentially gets overlayed on top of the node that is drawn as described by the visual style. That is, custom nodes do not work with the VizMapper. With that in mind, a custom node creator may want to specify a custom node shape/dimension to conceal the underlying node. In addition, the custom node origin (upper left corner) maps to the underlying node's center. For example, the following code (in the context of the Custom Node Graphics sample code):

   1 java.awt.geom.Rectangle2D rect = new java.awt.geom.Rectangle2D.Double(0, 0, 60, 60);
   2 java.awt.Paint paint = java.awt.Color.red;
   3 

would render a red rectangle in relation to the underlying node as follows:

attachment:custom-node-user-1.png

In this example, the width and height of the rectangle is set to 60, the diameter of the underlying node. In order to render the rectangle directly over the underlying node, the follow change to the rectangle origin should be made:

   1 java.awt.geom.Rectangle2D rect = new java.awt.geom.Rectangle2D.Double(-30, -30, 60, 60);
   2 

After making this change, the rectangle gets rendered as follows:

attachment:custom-node-user-2.png

(note: the ladder image points out a limitation in the current version of the ["Custom Node Graphics"] API implementation. As an edge is moved about the perimeter of a custom node, the edge follows the perimeter of the underyling node shape, not the perimeter of the custom node shape).

Lastly, custom nodes are ignored when a user selects its underlying node (the underlying node gets highlighted, the custom node does not). To work around this, two flavors of a custom node are required. One selected version and one unselected version. As the user selects/deselects the node, the custom graphic on the node needs to be swapped. For example, the following images show a custom node (using a TexturePaint - jpg image) used to indicate a protein that has been phosphorylated. The custom node is positioned at 12-o-clock on top of the underlying node. The underlying node is render with a diameter larger than an unphosphorylated node, as specified by the visual style. One image shows the node selected, the other unselected.:

attachment:custom-phos-node-1.png attachment:custom-phos-node-2.png

The following jpg images were used to create this effect:

attachment:phos-node.jpg attachment:phos-node-selected.jpg

It's worth mentioning that the images are shown here at their actual size of 100 pixels x 100 pixels. The Java2D API will take care of scaling the image to fit within the rectangle defined by the user.