Combos - `layoutcfg.preventComboOverlap` does not prevent overlapping combos #3588

Describe the bug

preventComboOverlap:true inside of G6's layout config does not prevent combos from overlapping when combos are opened near each other.

Your Example Website or App

https://codesandbox.io/s/g6-4-6-3--preventcombooverlap--bug-ovlu74?file=/index.js

Steps to Reproduce the Bug or Issue

1. A user loads a graph with multiple combos on the graph, which all start with collapsed: true and has preventComboOverlap: true (docs) enabled in their layout config.

2. A user double clicks a combo to open it

Expected behavior

As user when I enable preventComboOverlap:true in my g6 layout config:

• it should prevent combos from overlapping with each other
• it should not drastically change the size of a combo (as seen in video --- maybe this can be converted to new issue)
• it should work with any combo layout type ('comboForce', 'graph', 'grid', ..) and also work when the user doesn't specify one in the layout (it defaults to some layout?)
• it should consider to the current view to when expanding or collapsing, that is try to keep keep the positions as much as possible (see dropdown details below)
• it should keep combo in view after expansion, instead of moving it completely off the screen; non technical users will get confused by this behavior. Instead of completely moving it out of view, it should keep the continuity of the the current view. Related: https://github.com/antvis/G6/issues/3551

Codesandbox demo (code from video below): https://codesandbox.io/s/g6-4-6-3--preventcombooverlap--bug-ovlu74?file=/index.js

https://user-images.githubusercontent.com/6743796/158892336-b218a665-6f20-47da-9ba3-1a3c61d9b714.mp4

Expected Behavior Concepts (these are not from G6)

<details> <summary> Example 1️⃣ : Ideal Circular Combo Expansion/Contraction Concept </summary>

This shows a combo being expanded; after combo expansion, the current combo pushes the other combos around it, while still keeping as much of the content in view.

https://user-images.githubusercontent.com/6743796/158896506-3aa145c0-bb32-493a-9459-affd7210ebf1.mp4

This is the hyperlink in the video "automatic graph layouts": https://cambridge-intelligence.com/layouts/

Similar to example above, but this one shows what happens when the combo is collapsed. It looks like they remembering the last position is useful for collapse/expand

</details>

<details> <summary> Example 2️⃣ : Rectangular Combo Expansion/Contraction Concept </summary>

This shows a rectangular combo being expanded; after combo expansion, the current combo pushes the other combos around it, while still keeping as much of the content in view.

https://user-images.githubusercontent.com/6743796/158895334-afb26005-c22a-449d-899c-8786b2c582d6.mp4

This is the hyperlink referenced in the video: "sequential layouts": https://cambridge-intelligence.com/sequential-layout-the-best-way-to-handle-tiered-data/

</details>

<details> <summary> Example 3️⃣ : From Circular to Rectangular Combo (show space utilization transition) </summary>

https://user-images.githubusercontent.com/6743796/158895919-9c3c2076-6ac3-4b02-8de1-c54ccb9b91e6.mp4

</details>

Platform

• OS: MacOS, all browsers,
• G6 version 4.6.3

Related

• https://github.com/antvis/G6/issues/3551
• https://github.com/antvis/G6/issues/3524