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

[Sudhanshu Jain]

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]

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; 

            } 

        }}  

Sample: https://stackblitz.com/edit/react-6wtai4?file=index.js 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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. 

 

Sample: https://stackblitz.com/edit/react-6wtai4-geh9n5?file=index.js 

 

Regards, 

Aravind Ravi 

 

[Sudhanshu Jain]

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]

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; 

                      }   

                      } 

                    }} 

Sample:  https://stackblitz.com/edit/react-6wtai4-qkrp4s?file=index.js 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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; 

                      } 

                    } 

                  }} 

Sample: https://stackblitz.com/edit/react-6wtai4-eykj4m?file=index.js 

Regards, 

Shyam G