Creating and Customizing Items on the Client side

Create a new destination shape node after drawing a link on the Client side.

Append this code to the function 'onLinkCreated':

JavaScript Copy Code
// create a new ShapeNode
var destNode = diagram.getFactory().createShapeNode(
destPoint.x - 12, destPoint.y - 7, 24, 14);
destNode.setText("node " + diagram.getNodes().length);
destNode.setBrush('white');

JavaScript Copy Code
// create a new ShapeNode var destNode = diagram.getFactory().createShapeNode( destPoint.x - 12, destPoint.y - 7, 24, 14); destNode.setText("node " + diagram.getNodes().length); destNode.setBrush('white');

Use the createShapeNode method of the Factory class to create node with specified location and size.

Connect the link to the node and set the link's properties.

Use the setDestination method to connect the link to the destination node specified by the destNode variable. In addition, set the Dynamic property:

JavaScript Copy Code
// connect the link to the node and set its properties
link.setDestination(destNode);
link.setDynamic(true);

JavaScript Copy Code
// connect the link to the node and set its properties link.setDestination(destNode); link.setDynamic(true);

Execute the Website application.

Draw several links starting from the root node. At the end of each link, a destination node is created automatically, and the node's text shows the node's number in it. Look at the pictures below: