feat: obstacles

[atomiks]

Closes #1440

As far as I can tell, this feature is most useful when another fixed / absolutely-positioned element is also on the top-layer, or the floating element is "sharing" the layer it's on with something else. For example, you want to avoid a fixed navbar and not let it go under or over it, but instead avoid a collision like a boundary.

This is rudimentarily already possible using an option like padding: {top: obstacleRect.height} in flip/shift, etc, but this is cleaner and works better.

---

The hardcoded document.querySelectorAll is temporary. Each middleware will get an option like this, for tree-shaking purposes:

flip({
  experimental_obstacles: experimental_avoidObstacles(
    Array.from(
      document.querySelectorAll('[data-obstacle]')
    ).map(el => el.getBoundingClientRect())
  ),
});

---

Needs to be added to:

• size
• autoPlacement

---

The algorithm is not perfect and struggles when there are multiple intersecting obstacles.

As mentioned, it's not ideal when you want multiple floating elements to avoid each other in a nice layout, as this technique technique is completely uncoordinated - the floating elements positioned first take full precedence instead of being nicely grouped. This behavior can still useful in some cases though it seems.

[rollingversions]

There is no change log for this pull request yet.

Create a changelog

[netlify]

✅ Deploy Preview for vibrant-gates-22c214 canceled.

Name	Link
🔨 Latest commit	5dd7079
🔍 Latest deploy log	https://app.netlify.com/sites/vibrant-gates-22c214/deploys/6471a96d6c42490007cec4c5