How to establish connection between two nodes using user handle in Vue diagram

This article describes how to establish connections between nodes using user handles. To create user handles, define and add them to the userHandles collection of the selectedItems property. The name property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization. The pathData property is used to define the path data of userhandle.

<ejs-diagram
       style="display: block"
       ref="diagramObject"
       id="diagram"
       :width="width"
       :height="height"
       :selectedItems="selectedItems"
></ejs-diagram>


let handles = [
 {
   name: 'Draw',
   pathData:
     'M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z',
   tooltip: { content: 'Draw' },
   visible: true,
   offset: 0.5,
   side: 'Right',
   margin: { top: 0, bottom: 0, left: 0, right: 0 },
 },
];


data: function () {
   return {
     width: '100%',
     height: '645px',
       selectedItems: {
       userHandles: handles,
     },
}, 

We have utilized the ‘getCustomTool’ method of the diagram. The getCustomTool method allows you to define and return a tool based on your custom logic. The tool could be a drawing tool, a selection tool, or any interactive tool that extends the diagram’s capabilities. The method typically accepts a parameter, which can be a string representing the tool name or any custom identifier that helps the method determine which tool to return.Refer the below code to establish the connection using the getCustomTool.

This method is designed to configure the diagram tool for drawing a connector from a selected node when the ‘Draw’ action is triggered. It prepares the tool to draw an orthogonal connector, starting from the selected node, and ensures the diagram updates accordingly.

<template>

     <ejs-diagram
       style="display: block"
       ref="diagramObject"
       id="diagram"
       :width="width"
       :height="height"
       :nodes="nodes"
      :getCustomTool="getCustomTool"
     ></ejs-diagram>

</template>
data: function () {
   return {
     width: '100%',
     height: '645px',
     getCustomTool(action) {
       if (action == 'Draw') {
         diagram.tool = DiagramTools.DrawOnce;
         diagram.drawingObject.shape = {};
         diagram.drawingObject.type = diagram.drawingObject.type
           ? diagram.drawingObject.type
           : 'Orthogonal';
         diagram.drawingObject.sourceID = diagram.selectedItems.nodes[0].id;
         diagram.dataBind();
       }
     },
 }, 

We have utilized the selectionChange event of the diagram to customize the visibility of the user handles based on the selected items. Specifically, we apply the user handle constraints when a node is selected, enabling the user handles. Conversely, when a connector is selected, we remove the user handle constraint to hide the user handles.

<template>
     <ejs-diagram
       style="display: block"
       ref="diagramObject"
       id="diagram"
       :width="width"
       :height="height"
       :selectionChange="selectionChange"
     ></ejs-diagram>
</template>

data: function () {
   return {
     width: '100%',
     height: '645px',
      selectionChange: function (args) {
       if (args.state === 'Changed') {
         if (args.newValue.length > 0 && args.newValue[0] instanceof Node) {
           debugger;

           diagram.selectedItems = {
             constraints:
               SelectorConstraints.All | SelectorConstraints.UserHandle,
             userHandles: handles,
           };
         } else {
           diagram.selectedItems = {
             constraints:
               SelectorConstraints.All & ~SelectorConstraints.UserHandle,
           };
         }
       }
     },
   };
 }, 

Sample