How to set a fill color to node dynamically with dialog?

In Syncfusion® React Diagram, you can easily change the background color of a node using the node fill property. One way to achieve this is by using a color picker component.

To implement this, you can use the selectionChange event triggered when a node is clicked. In the event handler, you can open a dialog component that contains the color picker component appended in the dialog header. By selecting a color using the color picker, you can update the node fill property to change the background color of the node.

Code-Sample:

selectionChange={(args) => {
   //getEventDetails(args);
   if (args.state === 'Changed') {
     var dialogObject =
   document.getElementById('defaultdialog').style;
     if (args.newValue.length > 0) {
       if (args.newValue[0].sourceID === undefined) {
         dialogInstance.visible = true;
         dialogObject.left =
           (
             args.newValue[0].wrapper.bounds.x +
             args.newValue[0].width +
             10
           ).toString() + 'px';
         dialogObject.top =
           (args.newValue[0].wrapper.bounds.y - 10).toString() +
           'px';
       } else {
         dialogInstance.visible = true;
         dialogObject.left =
           (
             args.newValue[0].wrapper.bounds.x +
             args.newValue[0].wrapper.width +
             10
           ).toString() + 'px';
         dialogObject.top =
           (args.newValue[0].wrapper.bounds.y - 10).toString() +
           'px';
       }
     } else {
     dialogInstance.visible = false;
     }
   }
 }} 

Code-Sample:

function header() {
   return (
     <div>
       <ColorPickerComponent
         id="color-picker"
         ref={(color) => (colorInstance = color)}
         change={(args) => {
           if (diagramInstance.selectedItems.nodes.length > 0) {
             diagramInstance.selectedItems.nodes[0].style.fill = args.value;
           } else if (diagramInstance.selectedItems.connectors.length > 0) {
             diagramInstance.selectedItems.connectors[0].style.strokeColor =
               args.value;
             diagramInstance.selectedItems.connectors[0].targetDecorator.style.fill =
               args.value;
             diagramInstance.selectedItems.connectors[0].targetDecorator.style.strokeColor =
               args.value;
           }
         }}
       ></ColorPickerComponent>
     </div>
   );
 }

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to change node and connector shape dynamically.

You can refer to our React diagram feature tour page to know about its other groundbreaking feature representations. You can also explore our React diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our React Controls from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React diagram and other React Controls.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!