mstahv / diagram-builder

Vaadin Add-on built over ALLOYUI DiagramBuilder
Apache License 2.0
7 stars 11 forks source link

Custom Nodes Support #12

Closed bsasschetti closed 6 years ago

bsasschetti commented 6 years ago

Added support for Custom Nodes with Custom Attributes. Added Json initialization support diagram data for easy saving and loading. It's a quick approach, surely has a lot of things to improve and everyone is welcome to help to it :+1:

Usage

Suppose you want to add a "Nyan Cat" node, you should add two entries to a CSS file to set the correspondent icons, one for the diagram palette, and the other one is for the diagram itself.

.diagram-node-nyanCat .diagram-node-content {
    background: url(http://a.deviantart.net/avatars/m/e/mercedes77.gif?5) no-repeat scroll center transparent;
}
.diagram-node-nyanCat-icon {
    background: url(http://orig11.deviantart.net/b7bd/f/2012/156/6/9/go_on_a_diet__nyan_cat__by_chinzapep-d52ctte.gif) no-repeat scroll center transparent;
    background-size: 30px 23px;
}

The following code represents intialization of the Custom Node on a Vaadin 8 Presenter class, with two custom attributes besides the default node attributes. I tried to keep the array style of initialization. I think it's a bit restrictive way to do it, but I didn't have the time to think and implement another way to do it.

getView().diagramBuilder.setCustomNodeTypes(
    new CustomNodeType("nyanCat",
            new CustomNodeAttribute[] { 
                new CustomNodeAttribute("Cat Name", "Nyan"),
                new CustomNodeAttribute("Cat Remaining Lives") 
    })
);

Then the only thing left is add the node to the available fields as usual:

new NodeType("diagram-node-nyanCat-icon", "Nyan", "nyanCat")

The CustomNodeType and CustomNodeAttribute constructor signatures are these:

public CustomNodeType(String type)
public CustomNodeType(String type, CustomNodeAttribute... customAttributes)

public CustomNodeAttribute(String name)
public CustomNodeAttribute(String name, String defaultValue)

Bonus track Now it's possible to load diagram data using previously obtained raw JSON string. This one is a bit experimental, I had to do it because I couldn't save the Node object with the Custom Attributes without doing a big mess with the classes structure.

To get it:

getView().diagramBuilder.getDiagramState(event -> {
    someStringVariable = event.getRawJsonString();
});

And to load it: getView().diagramBuilder.setInitJsonString(rawJsonString);

mstahv commented 6 years ago

Looks good to me! Sorry it took long to look into this, busy times with V10.

mstahv commented 6 years ago

This actually seems to break the demo application that don't use the custom nodes. There is some js error that probably comes from the DiagramBuilderJsniWrapper class. Could you look into this?

bsasschetti commented 6 years ago

Thanks Matti! I'm working on it now, I'll try to have a hotfix ASAP!