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

Is it possible to set the node border on select of the node

Thread ID:

Created:

Updated:

Platform:

Replies:

150103 Dec 20,2019 09:59 AM UTC Jan 6,2020 05:52 AM UTC React - EJ 2 7
loading
Tags: Diagram
Sudhanshu Jain
Asked On December 20, 2019 09:59 AM UTC

Hi,

We need to highlight the node on selection, can we add border on select and remove border on deselect of the node?

Thanks,
Sudhanshu

Shyam G [Syncfusion]
Replied On December 23, 2019 05:09 AM UTC

Hi Sudhanshu, 

Please use the diagram click event to achieve your requirement. In the below sample, we have highlighted node on clicking the node and removed highlighter on clicking the diagram. 

Code example: 
  click={(args) => { 
          //check a condition for a node 
            if(args.element && args.element.shape && args.element.shape.type=== 'Flow' && !previousNode) { 
              args.element.style.strokeColor = 'red' 
              previousNode = args.element; 
            } //check a condition for diagram 
            else if(args.element.id === "diagram") {  
              previousNode.style.strokeColor = 'white'; 
              previousNode = null; 
           
        }}  



Regards, 
Shyam G 


Sudhanshu Jain
Replied On December 24, 2019 09:50 AM UTC

Hi Shyam,

We have used few images as nodes, could you please provide us the solution for image , as the solution provided is not working for type 'image'.

Thanks

Aravind Ravi [Syncfusion]
Replied On December 30, 2019 04:28 AM UTC

Hi Sudhanshu, 
 
We have modified a sample in which we have highlighted the image node border in the click event. 
 
Here is the sample for your reference. 
 
 
Regards, 
Aravind Ravi 
 


Sudhanshu Jain
Replied On January 2, 2020 09:28 AM UTC

Hi Shyam,

onClick = (args: any) => {
    if(previousNode && (previousNode.id !== args.element.id ||
        args.element.id === 'diagramPanel') && previousNode.style) {
      previousNode.style.strokeColor = 'none';
      previousNode = {};
    }
    if(args.element && args.element.shape &&
        args.element.shape.type=== 'Image' && args.element.style) {
      args.element.style.strokeColor = '#8079EF';
      args.element.style.strokeWidth = 3;
      previousNode = args.element;
    }
  };

I have used above method to highlight the selected node.
When a new node is added, even though the above method is called in drop of diagram component & previousNode data strokecolor is changed within the same method, in UI previous node and the currently added node both will be highlighted. Could you please check and let me know why the previous node is not reset in canvas?

This issue is happening only when a new node is added when a previous existing node is selected already.

Thanks,
Sudhanshu


Shyam G [Syncfusion]
Replied On January 3, 2020 10:15 AM UTC

Hi Sudhanshu, 

We have used collectionChange event and click event to achieve your requirement. When we drag a node from palette and drop it onto the diagram, the collectionChange event gets triggered and the click event triggers while selecting the node. Please refer to a code example and the sample below. 

Code example: 
click={(args) => { 
                    if (previousNode) { 
                      previousNode.style.strokeColor = 'black'; 
                   
                    //check a condition for a node 
                    if (args.element && args.element.shape) { 
                      args.element.style.strokeColor = 'red' 
                      previousNode = args.element; 
                    } //check a condition for diagram 
                    else if (args.element.id === "diagram" && previousNode) { 
                      previousNode.style.strokeColor = 'black'; 
                      previousNode = null; 
                   
                  }} 
     collectionChange={(args)=> {  
                      if(args.state === 'Changed') {   
                        if(previousNode) { 
                           previousNode.style.strokeColor = 'black'; 
                       
                        if (args.element && args.element.shape) { 
                        args.element.style.strokeColor = 'red' 
                        previousNode = args.element; 
                      }   
                     
                    }} 



Regards, 
Shyam G 


Sudhanshu Jain
Replied On January 6, 2020 03:46 AM UTC

Hi Shyam,

In the collection change argument there is no attribute to identify if node or the connector is highlighted. I can see the only difference in data is "cause" value. 
Could you please confirm how to indicate whether a node is highlighted or a connector?

Thanks

Shyam G [Syncfusion]
Replied On January 6, 2020 05:52 AM UTC

Hi Sudhanshu, 

In the collectionChange change, we can determine the dropped element is a node or connector by checking the condition highlighted in the below code example. 

Code example: 
  collectionChange={(args) => { 
                    if (args.state === 'Changed') { 
                      if (previousNode) { 
                        previousNode.style.strokeColor = 'black'; 
                     
                      if (args.element && (args.element instanceof Node || args.element instanceof Connector))
                        args.element.style.strokeColor = 'red' 
                        previousNode = args.element; 
                     
                   
                  }} 



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