Connecting shapes

[Nuno Sénica]

Hi All.

I'm trying to create a simple node diagram to present relations
between items, so that if item 1 depends on item 2, I need to present
it as a circle, arrow, circle, with drag and drop support. Basically,
the same funcionaility as the graffle example on RaphaelJS site.

Can anyone tell me if this is possible to achieve using the current
state of raphaelgwt ? If so, how can I link/connect together two
shapes ?

Thanks in advance
Nuno

[Geoff Speicher]

The Graffle demo defines a Javascript function that connects two shapes, using their relative positions to determine connection point and the shape of the path.  Then it lays down a few shapes that are draggable, calls that function to draw the connections, and redraws the connections as you drag any of the shapes around.

RaphaelGWT supports everything you would need to implement the Graffle demo in Java but there is nothing "built-in" to Raphael or RaphaelGWT that supports connecting one shape to another.  You still need to draw all the paths and maintain the relationships yourself.

Coincidentally, that's exactly how RaphaelGWT is used in Pario --- to draw a circular database diagram connected with curved lines and arrowheads to depict relationships between tables, plus hover effects to isolate the relationships for the table under the cursor and mousewheel effects to spin the diagram around.  So there's no question that it's possible... you just need to use the building blocks to create what you want.

-- 

Geoff Speicher <ge...@sea-incorporated.com>
Software Engineering Associates

Get Down to Business with Pario

[Nuno Sénica]

Hi Geoff

Thanks for your explanation.

I'll try to implement this and understand the code, of course having something already in place would be a perfect start :) Since there's not, I'll start from scratch.

If I need any help, for sure I will, I'll drop a message in this mailing list, if that's ok..

Another question, do you know any algorithm to auto place shapes in the drawing area, like for instance the demos from Dracula ? That would also perfect.

Thanks

Nuno

[Geoff Speicher]

On Wed, Jan 25, 2012 at 2:42 PM, Nuno Sénica <nse...@gmail.com> wrote:

Another question, do you know any algorithm to auto place shapes in the drawing area, like for instance the demos from Dracula ? That would also perfect.

Shape placement would depend on the relationships (edges) between your shapes, and on your goals for display.  For example, if you care about avoiding edges that intersect then the problem is substantially more complex.  Quite a lot of research has been done on the subject of graph theory so you might be able to find something out there that is reasonably close to what you need.

Geoff

[Nuno Sénica]

Hi Geoff

I'm still working on reproducing the graffle example in raphaelgwt, but I'm quite blocked on the connections function which, due to my lack of knowledge of GWT, I still don't know how to integrate it. I've almost reproduced the function, but I'm stuck in the last part, where the lines are set.

Do you have any working example on creating and dealing with connections ? Have you or anyone tried to replicate this example in raphaelGWT ?

Thanks

Nuno

[Geoff Speicher]

On Mon, Jan 30, 2012 at 7:00 AM, Nuno Sénica <nse...@gmail.com> wrote:

Do you have any working example on creating and dealing with connections?

Only proprietary code that I cannot post here.  Sorry.
 

Have you or anyone tried to replicate this example in raphaelGWT ?

None that I have seen.

If you can't figure out how to translate the Javascript to Java then you can always try using JSNI, pasting the Javascript directly into a native method---a technique used by the RaphaelJS class in the RaphaelGWT client package:

   http://code.google.com/p/raphaelgwt/source/browse/trunk/src/com/hydro4ge/raphaelgwt/client/RaphaelJS.java

Here is a blog post worth checking out:

   http://googlewebtoolkit.blogspot.com/2008/07/getting-to-really-know-gwt-part-1-jsni.html

Geoff

[Nuno Sénica]

Hi Geoff

That is really worth a try, integrating the connection function in RaphaelJS, my doubts then is how to use that function to control the connections from the GWT onMove event, knowing how to link both, it seems that I can move on forward.

Thanks a lot, you've been of great help.

Nuno

[Eugene Ivlev]

I have implemented connection function in GWT with callbacks. If you
want I can post my GWT-code here.

Eugene

[Nuno Sénica]

Hi Eugene,

I've done that also, and I have already sent it to Geoff, but feel free to post it here :) The more we have the better we can make it.

I also have a Spring Layout class ported from DraculaJS which I'll send to Geoff so he can make it available as a sample.

Regards,

Nuno