This text is displayed if your browser does not support the Canvas HTML element.

To allow ports to be selected, dragged, copied, and deleted, they are implemented as Nodes. That means the nodes have to be implemented as Groups. The user can delete selected ports. The user cannot drop a port onto the background, but only onto a node.

There is a custom Layout used by such Group nodes, InputOutputGroupLayout, to line up the input ports on the left side and the output ports on the right side.

The transformed model data (not the actual myDiagram.model):

View this sample page's source in-page

View this sample page's source on GitHub