Skip to content
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.

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

Implement box-shadow drawing #122

Merged
merged 6 commits into from
Aug 29, 2024
Merged

Implement box-shadow drawing #122

merged 6 commits into from
Aug 29, 2024

Conversation

cfraz89
Copy link
Contributor

@cfraz89 cfraz89 commented Aug 20, 2024

Adds support for rendering box-shadow, using the blur-rect branch of vello.

Also updates the tailwind example to render #cool with a black shadow, and #cool-inset with an inset shadow, to demo support.

Caveats

  • Linked to a fork of vello
  • Vello support is only of a single border radius, so it averages all corner's border radii to get the shadow radius
  • Ignores the spread radius parameter, and only uses blur radius. Not sure how spread radius is meant to be handled?

@cfraz89 cfraz89 changed the title Implement box-shadow drawing (no inset support yet) Implement box-shadow drawing Aug 20, 2024
Copy link
Member

@jkelleyrtp jkelleyrtp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I think your formatter is doing some weird stuff in the Cargo.toml.

I'm going to wait a day or two to merge this in case the corresponding PR on vello gets merged - and then we can just run from their main branch instead of the actual blur branch itself.

Also, I'm not sure if they've implemented the varying-corner-radius logic yet. I believe not, and it'll require a new shader on their end to support it.

Whenever that lands, we need to update the radius here to match the actual multi-radius border logic that gets merged.

linebender/vello#665

@cfraz89
Copy link
Contributor Author

cfraz89 commented Aug 22, 2024

Sounds good, I've reverted the formatting on the Cargo.toml.

@nicoburns
Copy link
Collaborator

Does this fix hovering the search box in the "google" example? (seach box should have shadow on hover, currently it visually disappears instead).

The vello PR has now landed. We can merge this if:

  • It is updated to use vello's main branch (some changes may be required)
  • The main vello version in Cargo.toml is updated rather than a patch applied. This may require forking vello_svg to have a compatible version.

@cfraz89
Copy link
Contributor Author

cfraz89 commented Aug 29, 2024

Does this fix hovering the search box in the "google" example? (seach box should have shadow on hover, currently it visually disappears instead).

It does 😃

Screenshot from 2024-08-29 14-42-15

The vello PR has now landed. We can merge this if:

  • It is updated to use vello's main branch (some changes may be required)
  • The main vello version in Cargo.toml is updated rather than a patch applied. This may require forking vello_svg to have a compatible version.

Done. I've made a personal fork of vello_svg to depend on the updated Vello, not sure if thats acceptable or you'd rather update the fork at https://github.com/DioxusLabs/vello_svg

@nicoburns nicoburns merged commit 2082a73 into DioxusLabs:main Aug 29, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants