Connector lines are overlapping nodes in diagram
Hi team,
I am implementing a Syncfunction diagram, but the connector lines are overlapping nodes. Could you guy help me with that? I put a screenshot & code below.
Thank you in advance!
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import {
ComplexHierarchicalTree,
DataBinding,
LineDistribution,
DiagramComponent,
ConnectionPointOrigin,
Inject,
DiagramConstraints,
LineRouting,
SnapConstraints,
ConnectorBridging
} from '@syncfusion/ej2-react-diagrams';
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense(
''
);
function diagramTemplate(props) {
return (
<div
style={{
border: '1px solid black',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
abc
</div>
);
}
const nodes = [
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-641308cf-e1e0-42d0-8199-3f9d45225334',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
},
{
width: 170,
height: 50,
shape: {
type: 'HTML',
},
id: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
},
];
const connectors = [
{
sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
id: 'connector_1',
},
{
sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
id: 'connector_2',
},
{
sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
id: 'connector_3',
},
{
sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
id: 'connector_4',
},
{
sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
id: 'connector_5',
},
{
sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
id: 'connector_6',
},
{
sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
id: 'connector_7',
},
{
sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
id: 'connector_8',
},
{
sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
id: 'connector_9',
},
{
sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
id: 'connector_10',
},
{
sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
id: 'connector_11',
},
{
sourceID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
id: 'connector_12',
},
{
sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
id: 'connector_13',
},
{
sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
type: 'Orthogonal',
cornerRadius: 5,
targetDecorator: {
shape: 'Arrow',
height: 7,
width: 7,
},
style: {
strokeColor: '#6d6d6d',
},
targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
id: 'connector_14',
},
];
function ComplexHierarchicalModel() {
const diagramInstance = React.useRef(null);
function rendereComplete() {
if (diagramInstance.current) {
diagramInstance.current.fitToPage();
}
}
return (
<div className="control-pane diagram-control-pane">
<div className="col-lg-8 control-section">
<div className="content-wrapper" style={{ width: '100%' }}>
<DiagramComponent
id="diagram"
ref={(diagram) => (diagramInstance.current = diagram)}
width={'100%'}
height={580}
layout={{
type: 'ComplexHierarchicalTree',
connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
horizontalSpacing: 40,
verticalSpacing: 40,
orientation: 'TopToBottom',
margin: { left: 10, right: 0, top: 0, bottom: 0 },
}}
// snapSettings={{ constraints: 0 }}
nodeTemplate={diagramTemplate}
nodes={nodes}
connectors={connectors}
created={rendereComplete}
snapSettings={{ constraints: SnapConstraints.None }}
constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging }
>
<Inject
services={[
DataBinding,
ComplexHierarchicalTree,
LineDistribution,
LineRouting,
ConnectorBridging
]}
/>
</DiagramComponent>
</div>
</div>
</div>
);
}
export default ComplexHierarchicalModel;
SIGN IN To post a reply.
21 Replies
Hi team,
Continue working with the sample you sent, I found that if there is no connectors, nodes will overlap each other (please refer to attached screenshot).
How can I fix it?
Thank you!
SIGN IN To post a reply.
