How to Set the Pattern Fill Style for Nodes in React Diagram?

In Syncfusion® React Diagram, you can set a desired fill color for nodes using the style fill property. However, applying pattern backgrounds directly to nodes is not achievable with the built-in node properties. This article explains how to apply pattern backgrounds to nodes using HTML type nodes, with code examples and samples.

Using HTML Type Nodes for Pattern Backgrounds

To apply a pattern background to nodes, you can utilize HTML type nodes, which allow customization beyond the built-in properties.

Define an HTML Node:

To define a HTML node set the type property of the node’s shape to HTML.
Use the nodeTemplate property to bind a function that generates a custom template based on the node’s ID.
Below is an example of how to define an HTML type node:

let nodes = [
 {
   id: 'node1',
   offsetX: 100,
   offsetY: 100,
   shape: {
     type: 'HTML',
   },
 },
]

 
 return (

       <div className="content-wrapper" style={{ width: '100%' }}>
         <DiagramComponent
           id="diagram"
           ref={(diagram) => (diagramInstance = diagram)}
           width={'100%'}
           height={'645px'}
           nodes={nodes}
           getNodeDefaults={(obj) => {
             //Sets the default values of a node
             obj.width = 150;
             obj.height = 100;
             return obj;
           }}
           nodeTemplate={diagramTemplate.bind(this)}
         >
         </DiagramComponent>
       </div>
 ); 

The nodeTemplate function generates the node content dynamically. It applies different styles based on the id of each node.

function diagramTemplate(props) {
   let fillStyle = '';
   if (props.id === 'node1') {
     fillStyle = 'noFill';
   } else if (props.id === 'node2') {
     fillStyle = 'backwardDiagonal';
   } else if (props.id === 'node3') {
     fillStyle = 'diagonalCross';
   }
   return (
     <div style={{ height: '100%' }}>
       <label htmlFor="fillPattern">Fill: {fillStyle} </label>

       <div
         className={fillStyle}
         style={{
           width: '100%',
           height: '85%',
           border: 'dashed',
           borderColor: 'red',
           borderWidth: '5px',
           paddingBottom:'10px'
         }}
       ></div>
     </div>
   );
 } 

Adding CSS Styles for Patterns

In the above code example, we assigned different class names to the node templates based on the node’s ID. Next, we apply various pattern background styles to these nodes by defining CSS rules corresponding to the class names set in the node templates. Refer to the CSS styles below for the different patterns.

.noFill {
 background: none;
}

.backwardDiagonal {
 background: repeating-linear-gradient(135deg, transparent, transparent 5px, black 5px, black 10px);
}

.diagonalCross {
 background: repeating-linear-gradient(135deg, transparent, transparent 5px, black 5px, black 10px),
             repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px);
}

.forwardDiagonal {
 background: repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px);
}

.horizontalLines {
 background: repeating-linear-gradient(0deg, black, black 2px, transparent 2px, transparent 4px);
}

.verticalLines {
 background: repeating-linear-gradient(90deg, black, black 2px, transparent 2px, transparent 4px);
}

.horzVertCross {
 background: repeating-linear-gradient(0deg, black, black 2px, transparent 2px, transparent 4px),
             repeating-linear-gradient(90deg, black, black 2px, transparent 2px, transparent 4px);
}

.solidColor {
 background: black;
} 

The nodes are rendered dynamically based on the CSS classes assigned in the template function. This approach enables a high degree of customization, making it easy to create visually distinct nodes for your diagram.

Sample

Conclusion
We hope you enjoyed learning how to set the pattern fill style for nodes in React Diagram.
You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!