New AddOn - NodeGraph Widget

Hi Guys!

Just I want to announce that I’ve created and published a new widget to represent connected nodes.
You can find the widget here:

Right now is an experimental project so I will be working these days to fix some pending bugs and to provide a maven support too.
Hope you enjoy and I will be waiting for some feedback, suggestions and bug report… :slight_smile:

Cheers!
Mauro.

Wow, great this is actually what i am looking for as a visual flow designer for the web.

Keep up the good work.

Mike

Thank you very much for the widget. I tried it yesterday on IE9, FireFox 6.0, Opera 11.5, Goole Chrome 13.0.782.215 using your example with begin, nodea, nodeb, process, end nodes. Everywhere I see same results (see the attached files): there are no labels, all nodes are in the same position. Anyway I am able to d&d nodes (see the last attached image)
I use maven. I put the following dependencies into pom.xml:

		<!-- <NodeGraphWidget> -->
		<dependency>
			<groupId>org.vaadin.addons</groupId>
			<artifactId>nodegraphwidget</artifactId>
			<version>0.1.23</version>
		</dependency>
		<dependency>
			<groupId>org.vectomatic</groupId>
			<artifactId>lib-gwt-svg</artifactId>
			<version>0.5.2</version>
		</dependency>
		<dependency>
			<groupId>com.google.code.gwt-dnd</groupId>
			<artifactId>gwt-dnd</artifactId>
			<version>2.5.6</version>
		</dependency>
		<dependency>
			<groupId>net.sf.flexjson</groupId>
			<artifactId>flexjson</artifactId>
			<version>2.1</version>
		</dependency>
		<!-- </NodeGraphWidget> -->

jsonwrapper was added as a source into project. May be I do something wrong. I will appreciate any suggestion.
11875.png
11876.png
11877.png
11878.png
11879.png

Hi Anatoly,

Thanks for your feedback. To be honest I did not have enough time to update the component, lastly. I found and fix some issues that cause the graph does not show and behaves correctly in some browser.
Also I have been working to mavenize the project, so in these next two weeks, I will try to upload an update of the component.
I hope these changes solves your issues.

I tried the component into Firefox and Chrome (under Ubuntu) and it’s working. If you can post your example application, I can take a look and debug it to try to find the problem.

Best!.
Mauro.

Hi Mauro,

thanks for this great Addon

I am trying to create a tool based NodeGraph that allows users to create a diagram.
my problem is that I cannot add new nodes or new relations dynamically to the diagram (or at least it doesn’t refresh on the client side)

here is my sample app:
it just displays the diagram but when I click on the button - no node inserted !

any suggestion ?

thanks for your help

gaya

public class YtestApplication extends Application implements ClickListener {
GraphComponent component ;
GraphModel graphModel ;

@Override
public void init() {
	Window mainWindow = new Window("Ztest Application");
	VerticalLayout vl=new VerticalLayout();
	vl.setHeight("100%");
	vl.setWidth("100%");
	
	Button ok=new Button("OKAY");
	vl.addComponent(ok);
	ok.addListener(this);
	
	// = Create the model.
	graphModel = GraphModelFactory.getGraphModelInstance();
	component = new GraphComponent(graphModel);
	component.setImmediate(true);
	((GraphComponent)component).requestRepaintRequests();
	component.setSizeFull();
	vl.addComponent(component);
	mainWindow.addComponent(vl);
	setMainWindow(mainWindow);
	// = Support for single click to select nodes.
	graphModel.setSingleSelectionSupport(Boolean.TRUE);

	// = Create some nodes.
	Node begin = new BeginNode();

	Node splitNode = new SplitNode();

	Node nodeA = new DefaultNode();
	nodeA.setLabel("NodeA");

	Node nodeB = new DefaultNode();
	nodeB.setLabel("NodeB");

	Node processCreation = new ProcessCreationNode();
	processCreation.setLabel("Process");

	Node end = new EndNode();

	// = Nodes meet nodes!.
	final RelationStyle dashedBlue = new DefaultRelationStyle(GraphConstants.DOM.CSS_BLUE_VALUE, 2);
	dashedBlue.setDashedStroke(5, 5);

	final RelationStyle straightRed = new DefaultRelationStyle();
	straightRed.strokeColor(GraphConstants.DOM.CSS_RED_VALUE).strokeWidth(3);

	final RelationStyle defaultNormalBlack = new DefaultRelationStyle();

	// = Tie all the stuff.
	graphModel.connect(begin, splitNode, straightRed);
	graphModel.connect(splitNode, nodeA, dashedBlue);
	graphModel.connect(splitNode, nodeB, defaultNormalBlack);
	graphModel.connect(nodeA, end, RelationTypeEnum.BEZIER);
	graphModel.connect(nodeB, processCreation, RelationTypeEnum.BEZIER, new DefaultRelationStyle().strokeColor(GraphConstants.DOM.CSS_GREEN_VALUE));
	graphModel.connect(processCreation, end, RelationTypeEnum.LINE);		
}

int idgen=1000;
@Override
public void buttonClick(ClickEvent event) {
	
      CustomNode node = new CustomNode("N"+(idgen++));
   	       node.setTypeName("begin");    
	       node.setPosition(300.0,200.0);
	       node.setLabel("new node");    	

  	       graphModel.addNode(node);	
		
           component.requestRepaint();
			
}

}
11938.java (3.49 KB)

have you already tried to use something like the Refresher add-on?

Hi gaya rime,

Sorry but push changes from the server side is not supported yet on the library. I am still working on that for the next version.
However, as Giovanni Manzo said, have you tried to use some of the pushers addons? It should work…

Let me know if you try it.
Cheers!
Mauro Monti

First - thanks for sharing your good work.

Here are a few things I’ve discovered:

1 - The positions returned with a property change event are “off” by the 1/2 the width and 1/2 the height of the associated icon. This shifted result is stored in the node object. So when you save and restore positions the moved nodes shift down and left. I work around this by saving positions independently and correcting the returned positions when I catch the property change event. This only works since I’m currently using only one size icon.

2 - Firefox 3.6.23 on Ubuntu doesn’t render the connecting lines. This occasionally happened with Chrome too, but the problem disappeared when I added a requestRepaint() after refreshing the graph. There are probably some more experiments I could try here.

Here are features I would like to have:

1 - Directional arrows.

2 - Node specific icons. Basically I want to be able to specify a Vaadin Resource for each node’s icon. node.setIcon( meSmiling )

I haven’t dug into the code yet, but I’m willing to help.

Thanks,
Don

I’m having the same issue with the graph not showing fine on all browsers. In my case it doesn’t show good on Chrome and doesn’t show on IE at all.

Hello there… Is this forum active? i ve many issues, mostly those discussed above… can anybody help me? Are these issues discussed above, solved???

I have a requirement to create flow charts(similar to attached).
To achieve this, the nodes(GWT composite) and lines should be displayed together.

So the nodes(GWT composite), will display the table with multiple rows of textbox, dropdowns etc.
And the lines will connect the nodes.

The NodeGraphWidget addon works perfectly for me if instead of text nodes, composites can be displayed.
Can the NodeGraphWidget addon be used to display a composite as a Node?
12493.png