How to Define Shapes in User Handles for Connectors in Vue Diagram?

This implemetation allows dynamic connections between nodes using custom user handles in Syncfusion® Vue Diagram. By following the steps outlined, users can click on nodes to enable handles, draw connectors, and connect specific shapes to the connector’s target, providing a flexible and intuitive diagramming tool.

When users select diagram elements, user handles appear, enabling the drawing of connectors. These handles are defined in the selectedItems property of the diagram,and also need to enable the SelectorConstraints as UserHandle . The visibility and behavior of these user handles are managed through two distinct events: selectionChange and elementDraw. Refer the below code for defining the userhandles.

selectedItems: {
       constraints: SelectorConstraints.All | SelectorConstraints.UserHandle,
       userHandles: getHandles(),
} 

This selectionChange event selectionChange event is triggered whenever the selection of diagram elements changes. When a node is selected, a “Draw” user handle becomes visible. This handle allows users to initiate the drawing of a connector from the selected node.If a connector is selected, the “Draw” user handle is not visible.

selectionChange: (args) => {
   let diagram = this.$refs.diagramObject.ej2Instances;
   if (args.state === 'Changed') {
     if (args.newValue && args.newValue[0] instanceof Node) {
       diagram.selectedItems = {
         constraints:
           SelectorConstraints.All | SelectorConstraints.UserHandle,
         userHandles: getHandles(),
       };
     } else {
       diagram.selectedItems = {
         constraints:
           SelectorConstraints.All & ~SelectorConstraints.UserHandle,
         userHandles: [],
       };
     }
     diagram.dataBind();
   }
 }, 

The elementDraw event is activated when a connector is drawn using the “Draw” user handle. Upon triggering this event, four different user handles are enabled on the newly drawn connector. Each of these handles allows for the drawing different shapes of nodes at connector end point.

elementDraw: (args) => {
  if (args.state === 'Completed') {
     let diagram = this.$refs.diagramObject.ej2Instances;
     diagram.selectedItems = {
       constraints:
         SelectorConstraints.All | SelectorConstraints.UserHandle,
       userHandles: getConnectorHandles(),
     };
     diargam.dataBind();
    }
  }, 

Interactions with the user handles are managed via the onUserHandleMouseDown method. This method binds the necessary actions when a user handle is clicked, ensuring that the correct node shapes are drawn and positioned appropriately based on user input. These nodes are rendered in the diagram using the add method. The positioning of these nodes is managed by setting node id as the targetId of the drawn connector.

onUserHandleMouseDown: (args) => {
   let diagram = this.$refs.diagramObject.ej2Instances;
   if (
     diagram.selectedItems.nodes &&
     diagram.selectedItems.nodes.length > 0
   ) {
     let selectedNode = diagram.selectedItems.nodes[0];
     switch (args.element.name) {
       case 'Draw': {
         diagram.drawingObject = {
           sourceID: selectedNode.id,
           type: 'Orthogonal',
         };
         diagram.dataBind();
         break;
       }
     }
   } else if (
     diagram.selectedItems.connectors &&
     diagram.selectedItems.connectors.length > 0
   ) {
     let selectedConnector = diagram.selectedItems.connectors[0];
     let node = {
       id: randomId(),
       width: 70,
       height: 70,
       annotations: [{ content: '' }],
     };
     switch (args.element.name) {
       case 'Process': {
         node.shape = { type: 'Flow', shape: 'Process' };
         node.width = 80;
         node.height = 40;
         node.offsetX = selectedConnector.targetPoint.x;
         node.offsetY = selectedConnector.targetPoint.y;
         break;
       }
     }
     diagram.add(node);
     selectedConnector.targetID = node.id;
     diargam.dataBind();
     diagram.select([node]);
   }
 }, 

Sample

Conclusion
I hope you enjoyed learning how to define shapes in user handles for connectors in Vue Diagram.
You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!