How to Prevent or Auto-Adjust Overlapping Nodes (SCADA-style Diagram)

GoJS
1

I’m working on a SCADA-style editor using GoJS 2.3.6, where each node represents equipment (tanks, skids, controllers, etc.) arranged manually by users.

When loading diagrams from backend data, or when users copy/paste or drag new items from a palette, some components overlap over one another.

I would like to know if GoJS provides any built-in way to automatically prevent or resolve node overlaps — similar to how AvoidsNodes helps with links — or if this must be handled entirely in user code.

2

You can customize the dragComputation function so that it will not allow some Nodes to overlap other Nodes during drags. Here is an example:

You would need to be careful to be sure that you do allow some kinds of overlaps, such as nodes overlapping their parent groups, etc.

You could also write mouseDragEnter, mouseDragLeave, and mouseDrop functions for your node and group templates so that they

  1. visually change to show if dropping somewhere is allowed or not (mouseDragEnter and leave)
  2. cancel the drop if its not an allowed location (mouseDrop)

There is a basic example of that kind of functionality in the Planogram sample: