React Diagram - Default Shape and Connector Settings
The Diagram component allows you to specify default settings for its items in the following ways:
- Specify settings contained in the defaultItemProperties property.
- Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
App.js
- import Diagram, { Nodes, Edges, DefaultItemProperties} from 'devextreme-react/diagram';
- // ...
- render() {
- return (
- <Diagram id="diagram">
- <DefaultItemProperties connectorLineType="straight"/>
- <Nodes ... textStyleExpr={this.itemTextStyleExpr} />
- <Edges ... styleExpr={this.itemStyleExpr}/>
- </Diagram>
- );
- }
- itemTextStyleExpr(obj) {
- return { 'fill': 'green' };
- }
- itemStyleExpr(obj) {
- return { 'stroke': 'red' };
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.