Support clickable nodes and edges about canviz HOT 16 OPEN

One patch I received that implements the originally mentioned solution came 
from Jan Wielemaker:

http://gollem.science.uva.nl/git/ClioPatria.git?a=commitdiff;h=6a0343575222c99aa
3caafcc63f244d4df7dd59a

And there is an incomplete follow-up patch that has to do with multiple 
hyperlinks in an HTML-like table:

http://gollem.science.uva.nl/git/ClioPatria.git?a=commitdiff;h=96da2f5f131e4b225
b705c1fff939387def40f04


Another patch was from Ben Guthro (this patch also includes some unrelated 
changes to the image handling):

http://groups.google.com/group/canviz/browse_thread/thread/6b03905ea97f978b

The situation with multiple hyperlinks in an HTML-like label makes me believe I 
cannot reliably support clickable 
objects in Canviz (at least not in HTML-like labels) without a change to 
Graphviz, which I have requested here:

https://mailman.research.att.com/pipermail/graphviz-interest/2008q4/005684.html

I think that rudimentary support for url attributes is better than no support 
while
we wait for the perfect solution.  I would like to request that you include the 
basic
support patch you mentioned.

How far a leap is it form URL support to having arbitrary javascript code 
attached to
the nodes/edges?  I want to enable mini-window popups for mouseovers, tooltips, 
and such.

Agreed. I committed very basic click support in r212. If a graph entity has an 
href or url attribute, its text label 
will now be clickable. The target attribute is also respected.

Shapes are not yet clickable, only the text (so if you want an edge to be 
clickable, you have to give it a label). \N 
and \E expansion is not yet supported. Hrefs embedded into HTML-like labels are 
not supported (I still think this 
needs changes in Graphviz, as discussed above).

Escape sequences (\N, \E, \T, \H, \G, \L) are now handled properly as of r214 
via a new second parameter to 
Entity.getAttr(). Pass true in this parameter if the attribute you're asking 
about is an escString. (See http://graphviz.org/doc/info/attrs.html )

Standard browser tooltips are now supported via the tooltip attribute, as of 
r218.

Oops, the attributes are case-sensitive and it's "URL" not "url". Fixed in r219.

As of r220, check URL first, then href. Docs say href is a synonym of URL, not 
the other way around.

r221: Mouse events (onclick, onmousedown, onmouseup, onmouseover, onmousemove, 
onmouseout) are now 
supported. Just put them in your dot file and Graphviz will pass them through 
to the xdot file and Canviz will use 
them. If you want to implement custom JavaScript tooltips, this is how you'd do 
it.

For the more-complicated point-in-path detection idea, the approximate plan is:

 * Add a method to get a path's bounding box (r161)
 * Compute the bounding box of each entity (r196)
 * Make divs the size of each bounding box (r223)
 * Add a method to determine if a point is within a path (pending)
 * Keep each entity's paths around in the graph object after they're drawn (pending)
 * Observe each of the mouse events on each of the bounding box divs, calling a method which figures out if the 
cursor is in any of the entity's paths, and if so, calling the entity's mouse 
event handlers (pending)
 * Add something in the onmousemove handler to set the cursor correctly (pending)

r228: Added new method Path.isPointOnPath() and necessary helpers, which will 
be used to detect if the pointer 
is on an edge. We'll also need another method, Path.isPointInPath(), to 
determine if the pointer is in a node 
shape or in an arrow head.

Re: comment 9, supporting mouse events, I propose that onload also be supported 
so
that drag and drop can be done in Firefox.  This is because standards-compliant
browsers like Firefox will not notice an onmouseup event without having an event
listener instantiated.  And an onload allows you to instantiate individual 
listeners
for each div, and what the div IDs are.

This presupposes that onload fires when the DOM is updated by Prototype with 
new xdot
data.

I can ask Prototype to fire an event if necessary.

But let's let this issue be for the feature of making the node/edge shapes 
clickable.
If you find you need an onload event fired later, we can address that in 
another ticket.

I filed issue #56 to explore a new idea for handling mouse events: use an image 
map.

It seems to be the more simple solution. Graphviz is already able to generate 
an image map file from a dot file (cmap option in Graphviz). It works well 
applied on graph displayed as an image. 

It's also possible to add javascript event on map area to trigger on click and 
other events to display menu or to catch "node to node" link creation.

But, I don't know if it is possible to make the same with canvas...

Have you an idea for the implementation of this feature ?

Thanks a lot (and sorry for my english)