Using custom options in node user handle

[Saravanan]

Hi,

On clicking the node i'm getting user handle option to clone the selected node.

I wanted to customize that user handle with my custom option.

And also i want to dynamically give those option based on the selected node type.

And i need to create node with connection from that option.

I couldn't find any documents regarding this.

Thanks,

[Shyam G]

Hi Saravanan, 

 

We have created a sample in which you can draw the connector using user handle. Please refer to a code example and sample below. 

 

Code example: 

//Defines the connector drawing tool 

class DrawingTool extends ConnectorDrawingTool { 

 

  mouseDown(args) { 

    super.mouseDown(args); 

    //get the selectedNode 

    this.sourceNode = diagramInstance.selectedItems.nodes[0]; 

    //set the drawing object connector 

    diagramInstance.drawingObject = { type: 'Orthogonal' }; 

  } 

 

  mouseMove(args) { 

    super.mouseMove(args); 

  } 

 

  mouseUp(args) { 

    super.mouseUp(args); 

    if (diagramInstance.selectedItems.connectors.length > 0) { 

      //set connector sourceId 

      diagramInstance.selectedItems.connectors[0].sourceID = this.sourceNode.id; 

      //immediate reflection on DOM 

      diagramInstance.dataBind(); 

      //clear the node selection 

      diagramInstance.clearSelection(); 

      diagramInstance.drawingObject = null; 

    } 

  } 

} 

 

 

 

Sample: https://stackblitz.com/edit/react-3akpcb-bq3nbc?file=index.js 

 

Regards, 

Shyam G 

[Saravanan]

Hi,

Thanks to your reply.

Is it possible to add image user handle. Instead of creating it by path i want to create it by image. And also how can i handle the click event?

Thanks,

[Shyam G]

Hi Saravanan, 

 

Query	Response
Is it possible to add image user handle. Instead of creating it by path i want to create it by image.	Yes, you can set an image to the userhandle by setting image source to the handles source property. Please refer to an code example below.    Code example:  let handles = [     {      name: 'rightHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',  //set an image source      source: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQy4NjYquM2re_WmvkwjFe-xbaXWj9rukbvv95AKvcoAcZW0DTY-A&s',      visible: true, offset: 0.5, side: 'Right', horizontalAlignment: 'Center', verticalAlignment: 'Center'    },   ];
And also how can i handle the click event?	We can do the actions in the mouseUp event of a userhandle class instead of a click event. Please refer to an code example and sample below.    Code example:  //Defines the connector drawing tool  class DrawingTool extends ConnectorDrawingTool {    mouseUp(args) {      super.mouseUp(args);      if (diagramInstance.selectedItems.connectors.length > 0) {        //set connector sourceId        diagramInstance.selectedItems.connectors[0].sourceID = this.sourceNode.id;        //immediate reflection on DOM        diagramInstance.dataBind();        //clear the node selection        diagramInstance.clearSelection();        diagramInstance.drawingObject = null;      }    }  }

 

 

Sample: https://stackblitz.com/edit/react-3akpcb-hzezyc?file=index.js 

 

Regards, 

Shyam G 

[Saravanan]

Hi,

The sample is working.

But when i tried to load an image from my local, it's not displaying.

Attaching the sample code.

Attachment: react3akpcbhzezyc_cfbc1f8c.zip

[Shyam G]

Hi Saravanan, 

We should place the image files in the public folder. So we have modified your sample in which we have moved edit.png file from src folder to the public folder. 

Here is the link for your reference. 

https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js 

Here is the modified sample: 

sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/userhandlesample-1407355510 

Regards, 

Shyam G