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. Image for the cookie policy date

Using custom options in node user handle

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,

5 Replies

SG Shyam G Syncfusion Team 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 



SA Saravanan 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,


SG Shyam G Syncfusion Team 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 



SA Saravanan 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


SG Shyam G Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon