collision detection

[Jeremy Brown]

Is there a way to tell if two nodes are overlapping? As I design a conference-booth layout planner, I want to prevent a user from saving their layout when nodes overlap?

I'm using a function already that detects an overlap, but it's not working well: it is not well taking into account the pivot value, the height/width, and the thickness of the border.

Is there something built into the Diagra

[Vivisa Ganesan]

Hi,

By default, the nodes overlapping doesn’t occur in a layout. If you are facing nodes overlapping issues in a layout, kindly share us a layout JSON to validate further at our end.

Regards,

Vivisa

[Jeremy Brown]

Hi.

I'm not sure what you mean: Nodes in my implementation can overlap; I can place one shape on top of another inside the grid area.

Same to with any basic example in the documentation.

I need to not allow any overlaps when it comes time to export the layout as a base64 data string.

[Sivaranjith Jeyabalan]

Hi Jeremy,

We can detect the overlapping of nodes while dragging it using the positionChange event. We have created a sample in which we prevented the overlapping of nodes in positionChange event “Completed” state by settings the old offset value to the node.

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

Regards,

Sivaranjith

[Jeremy Brown]

Hello.

Thanks for getting back to me.

Your example works perfectly. I implement it in mine, and don't get the same result. It seems every first move doesn't register as overlapping. It seems like the position check is one step behind.

I'll try to get an example up here shortly.

But thanks for the work.

I was hoping to check for overlapping when they go to submit their layout, and that works some of the time: I take all tthe nodes in the layout and run them thru an overlap-detection function. That works but still have to deal with each node's center point and border width.

Thanks

[Vivisa Ganesan]

Hi,

Based on the response, we suspect that the issue may not be occurring in the provided sample. It's possible that the problem lies on your production end. Could you please create a simple sample of your scenario? This will enable us to examine it from our side and offer a solution.

Regards,

Vivisa