Example of undefined in React Diagram Component


This example illustrates the various commands supported in the diagram control.

More Details...


The align commands enable you to align selected objects such as nodes and connectors with respect to the selection boundary. The alignment options are left, right, center, middle, top, and bottom. Use the align method with the four mentioned parameters to align objects.

The sizing command changes the size of selected nodes with respect to the first selected object. The sizing options are same size (same height and width), same width, and same height. Use the sameSize method and pass SizingOptions such as height, width, and size as a parameter in it.

The distribute command is used to equally space the nodes vertically or horizontally within the selected boundary. Use the distribute method with the DistributeOptions as the parameter.

The clipboard commands are used to cut, copy, or paste selected elements. The cut command removes the selected diagram elements and copies them to the clipboard; copy duplicates the selected diagram elements and copies them to the clipboard; and paste adds diagram elements from the clipboard to the diagram. The flip command is used to give a horizontal or vertical mirror image of the selected node. Use flip and flipMode properties to flip a node along with the port and label.