Unable to import LineRouting and also need a solution to avoid connectors overlapping

[Shwetha Murthy]

Hi,

To avoid overlapping of nodes and connectors i am trying to import LineRouting but i get an error as below,

Attempted import error: 'LineRouting' is not exported from '@syncfusion/ej2-react-diagrams'.

Could you please confirm if LineRouting is exported and also we wanted to avoid connectors overlapping, is there a way to achieve that?

Thanks,

Shwetha

[Aravind Ravi]

Hi Shwetha, 

We are unable to reproduce the reported issue at our end. We are suspecting that you are using older version package. So could you please upgrade to our latest version package(v18.1.56). We have created a sample for line routing in latest version (18.1.56). Please find the sample in below link 

Sample: https://stackblitz.com/edit/react-qabl9a?file=index.js 

Regards 

Aravind Ravi 

[Shwetha Murthy]

Hi,

I have tried with syncfusion/ej2-react-diagrams version "18.1.56", in this version symbol palette is not working fine as the nodes are not visible and even the line routing is not applied. We can still see the connectors overlapping the nodes.

Also we wanted to know if there is a way to avoid connector-connector overlapping.

Request you to confirm on both the issues. Also if you could provide the link for documentation of LineRouting it would be helpful.

Thanks,

Shwetha

[Aravind Ravi]

Hi Shwetha, 

 

We are unable to reproduce the reported issue at our end. We have prepared a sample for symbol palette in that nodes have been rendered properly and all nodes are visible.  Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/react-hlqaa6?file=index.js 

 

Currently, we do not have support to avoid overlapping of connectors with connectors.  

 

Please share us a image representation of in which scenarios node gets overlap with connectors or modify the below sample replicating issue which would help us to proceed further. 

 

Sample:  https://stackblitz.com/edit/react-qabl9a?file=index.js  

 

Regards 

Aravind Ravi 

[Shwetha Murthy]

Hi Aravind,

LineRouting is still not working for our example, could you please give us the constraints for which all scenarios it can work. I have added a snap below of our flow in which the connectors are overlapping with nodes along with code.

  className="diagramPanel"
  ref = {diagram => diagramInstance = diagram}
  nodes={ nodes }
  connectors = { connectors }
  commandManager={this.commandManager}
  selectionChange={this.selectionChange}
  doubleClick={this.handleDblClick}
  constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting}
  id="diagramPanel"
  connectionChange={this.connectionChange}
>
  services={[LineRouting]}/>

Thanks,

Shwetha

[Aravind Ravi]

Hi Shwetha, 

We are unable to reproduce the reported issue at our end. We have prepared a sample in which we have used both snapping and line routing in the diagram. In our sample connectors are not overlapped with the nodes. Please find the sample in below link 

Sample: https://stackblitz.com/edit/react-6amtqf?file=index.js 

 

 Could you please confirm us how do you add nodes and connectors in the diagram and on dragging node whether helper(dotted lines in image) added in diagram. So please share us a sample illustrating issue or modify the above sample replicating issue which would help us to serve you better. 

Regards 

Aravind Ravi