- Position
- Minimum and maximum size for nodes.
Contact Support
Positioning a node in React Diagram control
11 Dec 20249 minutes to read
To customize the position of nodes in the React Diagram component, refer to the video link below.
Position
-
Position of a node is controlled by using its
offsetX
andoffsetY
properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. -
You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s
pivot
point is (0.5, 0.5), that means center of the node. -
The size of the node can be controlled by using its
width
and
height
properties. -
Rotation of a node is controlled by using its
rotateAngle
property.
The following table illustrates how pivot relates offset values with node boundaries.
Pivot | Offset |
---|---|
(0.5,0.5) | offsetX and offsetY values are considered as the node’s center point. |
(0,0) | offsetX and offsetY values are considered as the top-left corner of the node. |
(1,1) | offsetX and offsetY values are considered as the bottom-right corner of the node. |
The following code illustrates how to change the pivot
value.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
pivot: {
x: 0,
y: 0
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
}
// Text(label) added to the node
}];
let diagramInstance;
function App() {
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
diagramInstance.select([diagramInstance.nodes[0]]);
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
pivot: {
x: 0,
y: 0
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
}
// Text(label) added to the node
}];
let diagramInstance: DiagramComponent;
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
width={'100%'}
height={'600px'}
nodes={node}
created={() => {
diagramInstance.select([diagramInstance.nodes[0]]);
}}
// render initialized Diagram
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
Minimum and maximum size for nodes.
The minWidth
and minHeight
properties of node allows you to control the minimum size of the node while resizing. Similarly, the maxWidth
and maxHeight
properties of node allows you to control the maximum size of the node while resizing.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
// A node is created and stored in nodes array.
let node = [
{
id: 'Start',
width: 100,
height: 100,
offsetX: 250,
offsetY: 250,
minWidth: 50,
minHeight: 50,
maxWidth: 200,
maxHeight: 200,
annotations: [
{
content: 'Node1',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
// A node is created and stored in nodes array.
let node: NodeModel[] = [
{
id: 'Start',
width: 100,
height: 100,
offsetX: 250,
offsetY: 250,
minWidth: 50,
minHeight: 50,
maxWidth: 200,
maxHeight: 200,
annotations: [
{
content: 'Node1',
},
],
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
ref={(diagram) => (diagramInstance = diagram)}
nodes={node}
width={'100%'}
height={'600px'}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);