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

perf(ui): rendering optimizations #7061

Merged
merged 13 commits into from
Oct 10, 2024

Conversation

psychedelicious
Copy link
Collaborator

Summary

Handful of optimizations implemented while attempting to get a performant full canvas preview (unfortunately unsuccessful).

  • Do not rely on internal Konva API for layer preview canvas (indirectly addresses [bug]: Preview image not updated if layer is disabled #6950)
  • Track whether layers intersect the bbox
  • Track whether layers are on-screen
  • Disable Konva's "perfect draw" for all shapes
  • Hide layers when they are both off-screen and not the selected layer
  • Throttle opacity and compositing fill rendering to 100ms
  • Reduce compositing rect rendering to minimum

Related Issues / Discussions

Closes #6950

QA Instructions

Have a play, should be no change to behaviour. I think I can feel it is a bit snappier but could be wishful thinking.

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)

@github-actions github-actions bot added the frontend PRs that change frontend files label Oct 8, 2024
…eviews

Instead of pulling the preview canvas from the konva internals, use the canvas created for bbox calculations as the preview canvas.

This doesn't change perf characteristics, because we were already creating this canvas. It just means we don't need to dip into the konva internals.

It fixes an issue where the layer preview didn't update or show when a layer is disabled or otherwise hidden.
This feature involves a certain amount of extra work to ensure stroke and fill with partial opacity render correctly together. However, none of our shapes actually use that combination of attributes, so we can disable this for a minor perf boost.
- Throttle opacity and compositing fill rendering to 100ms
- Reduce compositing rect rendering to minimum
Reduce confusion w/ the many other caches
@psychedelicious psychedelicious merged commit 8522129 into main Oct 10, 2024
14 checks passed
@psychedelicious psychedelicious deleted the psyche/feat/ui/bbox-calculations branch October 10, 2024 06:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend PRs that change frontend files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[bug]: Preview image not updated if layer is disabled
2 participants