Support clickable nodes and edges

[GoogleCodeExporter]

Canviz doesn't support the HREF/URL dot attribute to allow clicking things in 
the graph. I've 
received several patches implementing this, but they all go the route of adding 
an "a" tag to the 
text divs. This means all click regions are rectangular, and you must click on 
the text label itself.

But I'd like to be able to have the click region for nodes be the shape of the 
node, and for edges 
I'd like to be able to click on the edges themselves. This will require some 
involved hit-testing 
code in path.js. I hope it will be fast enough. Here is some material I have 
been reading on this 
topic:

Determining if a point is in a polygon:

http://en.wikipedia.org/wiki/Point_in_polygon
http://local.wasp.uwa.edu.au/~pbourke/geometry/insidepoly/
http://alienryderflex.com/polygon/

Determining if a point is on a line or curve:

http://msdn.microsoft.com/en-us/library/ms969920.aspx

Original issue reported on code.google.com by ryandesi...@gmail.com on 3 Oct 2008 at 11:05

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 6 Oct 2008 at 4:14

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 11 Oct 2008 at 8:16

[GoogleCodeExporter]

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.

Original comment by omn...@gmail.com on 15 Nov 2008 at 1:43

[GoogleCodeExporter]

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).

Original comment by ryandesi...@gmail.com on 17 Nov 2008 at 8:35

[GoogleCodeExporter]

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 )

Original comment by ryandesi...@gmail.com on 17 Nov 2008 at 9:57

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 18 Nov 2008 at 2:24

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 18 Nov 2008 at 2:40

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 18 Nov 2008 at 3:14

[GoogleCodeExporter]

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.

Original comment by ryandesi...@gmail.com on 18 Nov 2008 at 4:14

[GoogleCodeExporter]

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)

Original comment by ryandesi...@gmail.com on 18 Nov 2008 at 9:01

[GoogleCodeExporter]

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.

Original comment by ryandesi...@gmail.com on 24 Nov 2008 at 11:23

[GoogleCodeExporter]

Original comment by ryandesi...@gmail.com on 8 Jan 2009 at 1:33

• Added labels: Milestone-Release1.0

[GoogleCodeExporter]

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.

Original comment by ron.newman on 8 Jan 2009 at 9:01

[GoogleCodeExporter]

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.

Original comment by ryandesi...@gmail.com on 26 Jan 2009 at 9:54

[GoogleCodeExporter]

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

Original comment by ryandesi...@gmail.com on 26 Aug 2009 at 11:29

[GoogleCodeExporter]

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)

Original comment by thibaud....@gmail.com on 6 Aug 2010 at 1:57