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:
Error: Not Found
The requested URL /externalapps/umlexample/bin-debug/UMLExample.html was not found on this server.
You see
It´s Possible ?
http://www.softwell.com.br/
All Examples Up and Running again.
It was a google app engine deployer issue. Sorry folks.
Updated, added default styles to links and nodes.
added parameters to performArrowDrawing for better implementation of custom links.
workflow example now has a custom arrow when something linked to "Send Notification" node.
Great!!! Thank you sharing this great project. I hate commercial components like yWorks and ILOG. Please go on...
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
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
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
Thank you for releasing it as OSS.
Great work. Can we just download it and use it?
sure you can
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.
No, there is no documentation. The lib is so simple that you can follow the examples.
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
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.
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
Dont know what you mean, please check the examples. No need to do anything to link nodes.
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
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.
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
Thanks, so the solution is simple. just send the Z-Order of the link to the lowest.
I will do it this weekend.
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.
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
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
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.
You have access to the tree so it's quite simple to implement a xml export or integrate with any other remote mechanism.
Thanks.
i would like to participate in this project becase is very interesting!
Fixed issues reported here by users.
Thanks guys.
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.
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
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
Hi there, nice lib! Is there a way of grouping nodes (within a container for instance)?
regards,
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.
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.
Please check the CustomWorkflow example. When you click on a link pointing to a "Send Notification" it shows a custom panel.
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.
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.
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?
could you help me?
I have been trying to make a desktop diabrammer app, and I could not
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!!
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
Hi Gilmar,
Is their any tutorial links for it..
There is no documentation. The code is so simple you can start coding after spending a few minutes on the examples.
Wow, this looks realy good, thanks for sharing !!
Post a Comment