Add/Remove node at runtime

Nodes can be added at runtime by using public method, add and can be removed at runtime by using public method,
remove. On adding node at runtime, the nodes collection is changed and the collectionChange event will trigger.

The node’s ID property is used to define the name of the node and its further used to find the node at runtime and do any customization.

Add node from palette

Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information
about adding nodes from symbol palette, refer to Symbol Palette.

Once you drag a node/connector from the palette to the diagram, the following events can be used to do your customization.

When a symbol is dragged into diagram from symbol palette, the dragEnter event gets triggered.

When a symbol is dragged over diagram, the dragOver event gets triggered.

When a symbol is dragged and dropped from symbol palette to diagram area, the drop event gets triggered.

When a symbol is dragged outside of the diagram, the dragLeave event gets triggered.

Create node through data source

Nodes can be generated automatically with the information provided through data source. The default properties for
these nodes are fetched from default settings. For more information about data source, refer to Data Binding.

Draw nodes

Nodes can be interactively drawn by clicking and dragging the diagram surface by using NodeDrawingTool. For more
information about drawing nodes, refer to Draw Nodes.

Position

Position of a node is controlled by using its offsetX and offsetY properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point.

You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s pivot point is (0.5, 0.5), that means center of the node.

The size of the node can be controlled by using its width and
height properties.

Customizing expand icon

Set the borderColor, borderWidth, and background color for an expandIcon using borderColor, borderWidth, and fill properties.

Set a size for an expandIcon by using width and height properties.

The expand icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

Customizing collapse icon

Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

Interaction

Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to Edit Nodes.

Constraints

The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to Node Constraints.

Custom properties

The addInfo property of the node allows to maintain additional information to the node.

Stack order

The nodes z-order property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.

Data flow

Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can find these connectors by using the getObject method in the diagram.