Connecting TransformItems; lines between them for Net Diag.

[metamoe 0 Likes (Newbie)]

I'm new to TransformManager but am very excited about it.

 

I had been working in some other tools like Degrafa to produce Network Diagrams that connect Rounded Rectangle Nodes that can be moved around and have connections drawn between them, and have a few questions I hope someone can give some advice on.

 

 

I wanted to know if anyone here at Club Greensock has a recommended way to draw the lines on the canvas.

 

The steps I need to reproduce are:

 

1. Click a TransformItem, click a 2nd Transform Item and an Arrow Line is created from the first pointing to the 2nd.

 

2. I would presume I would just create this as a symbol myself (or are there any methods in MatrixTools; I didn't see any?) or draw it somehow before TransformManager draws the transform objects.

 

3. Obviously I need a way to save any node connected to any other note and also restore it.

 

I'm just looking for some general direction here as to where the best place would be to start this is. I'm not as interested in rotating or scaling the TransformItems now, I'm more interested in subclassing them for any node type I need, and creating the ability to create a Directed Graph or Network Diagram, and moving them around while performing the appropriate type of line connection underlying structure.

 

Attached is an example image that shows nodes connected to each other. Once they are connected, you can move a node around and the line is drawn in a bezier/curve fashion, even as your moving it.

 

Thanks.

[GreenSock 8,117 Likes (Superhero)]

Yep, I'd probably create a Shape object for each line and use its graphics property to draw the line(s). Listen for the TransformManager's MOVE event to redraw each time it moves.

 

Hope that helps. Good luck with the project!