Friday, May 29, 2009

Flex Diagrammer Library


With this Flex library you can build your own diagrammers and easily extend nodes and links adding custom functionality.

Custom node example:

<?xml version="1.0" encoding="utf-8"?>

<BaseNode xmlns="com.anotherflexdev.diagrammer.*" xmlns:mx="http://www.adobe.com/2006/mxml" textMargin="20">

<mx:Image x="0" y="0" source="@Embed(source='assets/images/node-process.png')"/>

<mx:Button label="Workflow"/>

</BaseNode>




See live examples: UML Example, Custom Workflow Example

Downloads

Project source code at google code. If you want to contribute please mail me at gilmar.purin@gmail.com

45 comments:

teste said...

Error: Not Found
The requested URL /externalapps/umlexample/bin-debug/UMLExample.html was not found on this server.

teste said...

You see

It´s Possible ?

http://www.softwell.com.br/

Gilmar José Purin said...

All Examples Up and Running again.
It was a google app engine deployer issue. Sorry folks.

Gilmar José Purin said...

Updated, added default styles to links and nodes.

Gilmar José Purin said...

added parameters to performArrowDrawing for better implementation of custom links.
workflow example now has a custom arrow when something linked to "Send Notification" node.

Anonymous said...

Great!!! Thank you sharing this great project. I hate commercial components like yWorks and ILOG. Please go on...

Anonymous said...

Hi there..

Fistly, WOW!!!

What a great component to use in applications. WOW WOW WOW!!

I was just wondering about something here. Let's say you would like to animate the nodes, for example, having a help diagram in an application to sho users how to do something, like, from A to B to C, etc.

How would you animate the nodes in some sort of order. I am thinking about it but I thought that since you are the developer, you would know more about your component then anybody else, so go figure..

But once again, THANK YOU A MILLION for this.

Cheers

Gilmar said...

Thank you, I'm happy it can be useful to someone else.
To add effect, when you extend your node just add an effect as you would do normally.

Ex: creationCompleteEffect="{dissolve}"

Thanks

Anonymous said...

Hi Gilmar

Thanks for the quick reply.

Okay, so I understand this now. I have to continue as per normal and then just extend each node or interface and set the effect, like, moveTo, resizeEffect, etc and then they can play in sequence.

I will give it a try today and then let you know how it goes.

Thanks and keep up the good work.

Cheers

Anonymous said...

Thank you for releasing it as OSS.

Anonymous said...

Great work. Can we just download it and use it?

Gilmar said...

sure you can

Ramon On The Way said...

Hi dude, that's awesome, i like it very much, BTW, do you have any documents about it that can help us to fully understand it, thanks.

Gilmar said...

No, there is no documentation. The lib is so simple that you can follow the examples.

Ramon On The Way said...

Hi Gilmar

I'm looking inside your code and find that in class BaseNode at line #89 you creat a TextInput with the following code "this.txNodeName = new TextInput" but never call the addChild method to add it, instead at line #92 you call the addChild the second time for "lblNodeName", is this a slip of the pen?

Thanks

Gilmar said...

Yep you are right. I readed the lblNodeName component instead of adding the txNodeName.
I had corrected this a long time ago but forgot to add to the download area.
On the SVN repository it was ok already.

Thanks for the heads up.

Ramon On The Way said...

Hi Gilmar

Do you notice that when you begin to draw a line from one Node (A) to another (B), it's hard to trigger the "handleMouseRollOver" event listener on the node B, which means you cannot easily link these two nodes, so I have to move the mouse really fast towards node B to trigger the ROLL_OVER event, do you have the same problem? And is there any solutions? Thanks!

Kindest regards
Ramon

Gilmar said...

Dont know what you mean, please check the examples. No need to do anything to link nodes.

Ramon On The Way said...

Gilmar

I'm using your CustomWorkflow example now, I find if you start to link from one node by lick the "arrowhead" button, and then move your mouse very slowly into a target node, in this case, when your mouse enter the target node, it seems you cannot finish the link operation by clicking on the target node, by debuging I find this is because no ROLL_OVER event fired when the mouse enter the target node at such a low speed, is this much more clear to this problem? Thank you very much.

Ramon

Gilmar said...

Yes, you're right moving the mouse very slowly no event is dispatched.

I'm very busy know to fix it but I will in the future.

Thanks for pointing it.

Ramon On The Way said...

Gilmar

About the ROLL_OVER event not fired problem I mentioned before, this is because the Link component has a bigger z-order than the BaseNode component, and the Link component has a line thickness style greater than 3 (after test, i get this value), so 1) the Link component will be layed on the BaseNode component when you drag the Link into the BaseNode and 2)there is a overlap between them, therefore, the upderlied BaseNode component will not monitor the mouse over event. Is this clear? And should i report a defect?

Thanks

Ramon

Gilmar said...

Thanks, so the solution is simple. just send the Z-Order of the link to the lowest.

I will do it this weekend.

Anonymous said...

in CustomWorkflowExample.mxml

//change
<diagrammer:Diagram id="diagram" left="0" top="0" right="175" bottom="0">
</diagrammer:Diagram>

//to
<mx:VBox top="100" left="100" width="400" height="300" borderColor="0x000000" borderThickness="1" borderStyle="solid">
<diagrammer:Diagram id="diagram" left="0" top="0" right="175" bottom="0">
</diagrammer:Diagram>
</mx:VBox>

//then error occurs.
//Please take a try.

John Restrepo said...

Hi, congratulations!
this library is just great, I'm using it in a project and I've been wondering if a can change the nodeName property of a ProcessNode through code, thanks in advance

josh said...

To fully fix the MouseOver event not firing when slowly rolling over a node, you must also change src.com.anotherflexdev.diagrammer.Diagram beginLink to use this.addChildAt(this.templateLine, 0); instead of just using this.addChildAt

Anonymous said...

I just looked at the demos. REALLY GOOD.!! Thanks. Is it possible to save the diagram as an xml file? Is there any integration with php?
Thanks and great work.

Gilmar said...

You have access to the tree so it's quite simple to implement a xml export or integrate with any other remote mechanism.

Thanks.

Anonymous said...

i would like to participate in this project becase is very interesting!

Gilmar said...

Fixed issues reported here by users.
Thanks guys.

Drew said...

Can I disabled editing,moving etc..
I am just looking for a diagrammer that will show a work flow and the stage to others.. no interaction.

Gilmar said...

You can do this by changing some code, piece of cake.

* Create a property "moveEnabled"on BaseNode and change the event methods to check this property before do anything.

* do the same with for editing

Anonymous said...

hi there..
Any idea how to bend the arrow.
Like adding to the arrow a point which you can drag it to edit the path of that arrow.

Thanks for this great component

francois said...

Hi there, nice lib! Is there a way of grouping nodes (within a container for instance)?

regards,

Jeff said...

How do I create and assign a customLink:IFactory?

In a workflow, I need to be able to define execution conditions on a link when it is clicked on.

Thanks.

Jeff said...

How do I create and assign a customLink:IFactory to a node?

I need to have certain nodes use a link which can have a condition defined on it in a workflow application.

Thanks.

Gilmar José Purin said...

Please check the CustomWorkflow example. When you click on a link pointing to a "Send Notification" it shows a custom panel.

Jeff said...

Thanks Gilmar.

I have one more question. I have a custom node that I want to show and hide a panel which is quite large. When I remove the panel from the node, the node does not seem to resize, so that the context panel appears way out (where the now removed panel existed) from the node. I tried to reset the width and height, which now show the context panel in the correct place, but the mouse roll over event still triggers way out. This also prevents the access to any underlaying nodes that are now visible again.

Thanks for your help.

Jeff said...

Thanks Gilmar.

I have one more question. I have a custom node that I want to show and hide a panel which is quite large. When I remove the panel from the node, the node does not seem to resize, so that the context panel appears way out (where the now removed panel existed) from the node. I tried to reset the width and height, which now show the context panel in the correct place, but the mouse roll over event still triggers way out. This also prevents the access to any underlaying nodes that are now visible again.

Thanks for your help.

Jaime said...

Hello!!
Thanks for your excelent contribution.
I change it, for see it in a desktop application, but I have some problem, .. show this exception:
"
Error #1009: Cannot access a property or method of a null object reference.
at com.anotherflexdev.diagrammer::Diagram/handleRemoved()[/Users/gilmar/Documents/myworkspace/DiagrammerLib/src/com/anotherflexdev/diagrammer/Diagram.as:45]"
can someone help me?

Jaime said...

could you help me?
I have been trying to make a desktop diabrammer app, and I could not

Ann said...

Hi Gilmar,

Awesome library!

Thanks for making it open source.!!

I have a question, could you please help me, give me a pointer, as to how I can bend the links by adding a point where it bends? I'll appreciate your help!!

yerva said...

Hi Gilmar.
Is it possible to set more than one kind of links to one BaseNode?

And, can I create a reflexive link (from node X to the same node)?

Thanks in advance

Anjan Anil Kumar said...

Hi Gilmar,

Is their any tutorial links for it..

Gilmar José Purin said...

There is no documentation. The code is so simple you can start coding after spending a few minutes on the examples.

Enrique said...

Wow, this looks realy good, thanks for sharing !!