We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using custom options in node user handle

Thread ID:

Created:

Updated:

Platform:

Replies:

149100 Nov 14,2019 11:30 AM UTC Nov 19,2019 10:25 AM UTC React - EJ 2 5
loading
Tags: Diagram
Saravanan
Asked On November 14, 2019 11:30 AM UTC

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 [Syncfusion]
Replied On November 16, 2019 02:52 AM UTC

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; 
    } 
  } 
} 
 
 
 
 
Regards, 
Shyam G 


Saravanan
Replied On November 16, 2019 02:35 PM UTC

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 [Syncfusion]
Replied On November 18, 2019 09:37 AM UTC

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; 
    } 
  } 
} 
 
 
 
 
Regards, 
Shyam G 


Saravanan
Replied On November 18, 2019 10:25 AM UTC

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 [Syncfusion]
Replied On November 19, 2019 10:25 AM UTC

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. 

Here is the modified sample: 

Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon