8000 feat: obstacles by atomiks · Pull Request #2348 · floating-ui/floating-ui · GitHub
[go: up one dir, main page]
Skip to content

feat: obstacles #2348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

feat: obstacles #2348

wants to merge 3 commits into from

Conversation

atomiks
Copy link
Collaborator
@atomiks atomiks commented May 27, 2023

8000 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
Copy link

There is no change log for this pull request yet.

Create a changelog

@netlify
Copy link
netlify bot commented May 27, 2023 •
edited
Loading

✅ 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

@atomiks atomiks mentioned this pull request Jun 2, 2023
Closed
@atomiks atomiks changed the title [wip] feat: obstacles feat: obstacles Jan 11, 2024
@atomiks atomiks marked this pull request as draft January 11, 2024 14:47
@catdevnull
Copy link

Hi! Is there anything that's blocking this? Thanks for working on this!

@atomiks
Copy link
Collaborator Author
atomiks commented Jul 27, 2024

It's half-baked and doesn't live up to the necessary standard to be added when compared to the rest of the library. It's also missing the second possibly crucial part which is coordination for multiple floating elements to avoid each other in a nice layout.

A compromise is adding this avoidance detection as a feature only for flip since that's where it appears to be most useful, and is the smallest code addition-wise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Core] Collidables
2 participants
@atomiks @catdevnull
0