8000 Canvas & Svelte 5 infinite effect loops · Issue #250 · mhkeller/layercake · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Canvas & Svelte 5 infinite effect loops #250

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
Open
cholwell opened this issue Jan 24, 2025 · 4 comments
Open

Canvas & Svelte 5 infinite effect loops #250

cholwell opened this issue Jan 24, 2025 · 4 comments
Labels
awaiting-something-else Needs some other thing to happen before it can be done

Comments

@cholwell
Copy link

All the examples in the docs use $:, if you want to use effect and also do something like $ctx.strokeStyle you get an infinite effect loop

If there is a way to do this properly it would be good to add it to the docs
@mhkeller
Copy link
Owner

Although the library itself is built with Svelte 5, it hasn't yet been updated to use runes. See here for more info: #156. The short version is this library is a collection of stores and will likely need a full rewrite using runes. The reason why that hasn't been done is a) if I migrate to runes, Svelte 4 loses support b) I haven't had the bandwidth. I was aiming for migrating it closer to when Svelte 6 came out and I'm guessing support for Svelte 3 and 4 features is dropped.

In terms of solving your immediate problem, there's a note in the docs about a related issue with infinite loops which may be relevant. See also #50

@techniq has done some cool stuff overhauling canvas support here techniq/layerchart#295 but I haven't yet had the chance to see how that approach would be relevant to layercake.

@mhkeller mhkeller added the awaiting-something-else Needs some other thing to happen before it can be done label Jan 24, 2025
@techniq
Copy link
Contributor
techniq commented Jan 31, 2025

The solution for LayerChart was to implement a component registration system where each primitive component registers a render method and Canvas is responsible for (re)rendering as needed (when invalidate() is triggered). This was released in 0.70.0 and improved over subsequent releases. See also this Bluesky post for a breakdown. There was a lot of reactivity trickiness to nail down (such as creating an object Id for linearGradient objects) and managing context save/restore to enable Group transforming. I still need to solve ClipPath and a few other small issues.

LayerChart just released 0.90 which took this further and implemented an integrated offscreen hit canvas to enable mouse/pointer events (see related Bluesky post)

@cholwell
Copy link
Author

Thanks both will have a look

@mhkeller
Copy link
Owner

I've been experimenting with some canvas components here. This is just a quick first attempt to get things working: https://github.com/mhkeller/tks_map-layercake/blob/abd4269d09599fec81ccc8bb82a7331d7becb223/src/lib/layercake-components/canvas/MapPolygon.canvas.svelte

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting-something-else Needs some other thing to happen before it can be done
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@techniq @mhkeller @cholwell
0