Search
Attaching and Grouping Items

MindFusion.Diagramming for JavaScript allows attaching a node to another node, establishing a subordinate - master relationship between them. The easiest way to attach nodes is to call the attachTo method. When a master node is moved, its subordinated nodes follow it, so that the initial distance between the nodes stays constant. This happens both when a user moves the master node around, and when the node position is changed using a method or a property.

Possible Uses

  • Attach a transparent shape node to another node and set its text, so that the shape node acts as an additional label assigned to the master node.
  • Attach a shape node to another node and set its image, so it acts as an additional icon displayed inside or near the master node.
  • Attach a node to another node and handle nodeClicked or similar events to perform some action on the master node. This makes the subordinated node act as a button or another type of UI element attached to the master node.
  • Attach child elements in a tree branch to the branch root, so that when a user moves a tree node, the node's children moves simultaneously with it. Modifying an item in such hierarchical group makes the modification pervade through all dependant subordinated items.
  • In all previous scenarios, the locked property can be set for attached nodes which are used only as decorations embellishing the main item. That prevents users from selecting, modifying or drawing links to the subordinate nodes.

Hierarchical Grouping

Every node in a group can be the master node of another group, that is, a node can be subordinate in one group and meanwhile be another group's master. MindFusion.Diagramming for JavaScript doesn't impose any limits to the depth and width of group hierarchies built that way. However, it is not possible to put a node as a subordinate in more than one groups because the hierarchy relations would become ambiguous.

Unions

It is possible to create such groups, that if any item in the hierarchy is modified, all other items are updated too. This can be done by putting the items in circular chain of dependencies - that is, item1 is attached to item2, item2 to item3 ... itemN to item1. If any of these items is modified, the change will propagate through the chain until it reaches its originator.

Accessing Group Items

The master node in a group can be accessed using the masterNode property of attached nodes. The array returned by attachedNodes getter on a master node contains references to all subordinate nodes attached to it.