Canvas infinite loop issue (Svelte 3/4) #158
Comments
|
It will be interesting to see what the best Svelte 5 pattern is for this. |
|
Likely implement this pattern of registering drawing functions on a context and calling See also |
techniq
added a commit
that referenced
this issue
Jan 3, 2025
…ing redraws, etc). Resolves issue #158
techniq
added a commit
that referenced
this issue
Jan 7, 2025
…ing redraws, etc). Resolves issue #158
techniq
added a commit
that referenced
this issue
Jan 12, 2025
* feat: Add new `renderPathData()` canvas util to simplify rendering SVG path data onto canvas context with CSS class support * fix(circlePath): Correctly handle sweep argument * feat(Spline): Support Canvas context * breaking(GeoPath): Simplify render prop use case by leveraging renderPathData() (ex. HitCanvas) * fix(GeoPath): Always apply classes defined on GeoPath onto <canvas> parent (useful for rendering text, etc) * Update more GeoPath render usage * docs(Spline): Resolve check errors * docs(Spline): Resolve additional check error (not sure why not failing locally) * fix(Spline): Remove transfering classes to <canvas> (after removing from `renderPathData()`) * docs(Spline): Add canvas explicit example * feat(Area): Support Canvas context * fix(Canvas): Support multiple children (fix infinite loops, coordinating redraws, etc). Resolves issue #158 * Cleanup unused imports * Add changeset (ComputedStyles) * fix(Canvas/GeoPath): Fix tooltip ghosting (recreate geoPath() when `geojson` data changes). Fix tooltip path performance by rendering to separate <Canvas> * Fix `pnpm check` errors/warnings * docs(ZoomableMap): Hide tooltip when selecting state on canvas examples * Add and use new `getComputedStyles()` to create/reuse single `svg` when calculating styles for canvas (resolving CSS variables or classes). * fix(Circle): Redraw on position changes (fix tooltip highlight) * fix(renderPathData()): Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order * fix(Rule): Remove unnecessary classes * feat(Line): Support Canvas context * fix(Line): Use tweened coords when rendering via canvas * fix(renderPathData()): Respect `opacity` CSS style via `globalAlpha` canvas attribute * feat: Add new `renderText()` canvas util to simplify rendering SVG path data onto canvas context with CSS variable and class support * feat(Text): Support Canvas context * docs: Use new `renderText()` to simplify manual rendering on geo example * feat: Add new `renderRect()` canvas util to simplify rendering rectangles onto canvas context with CSS variable and class support * feat(Rect): Support Canvas context * fix(render()): Support `strokeDasharray` style via `ctx.setLineDash()` * fix(Points): Render primative components (Circle /Link) instead of using `renderPathData` directly to fix tweening and support links * fix(Spline): Fix opacity for svg context * Add `spikePath()` util * docs: Simplify SpikeMap canvas example using `renderPathData()` and new `spikePath` util * feat: Support `renderContext` prop to switch between Svg (default) and Canvas for all simplified charts (AreaChart, BarChart, LineChart, PieChart, and ScatterChart) * feat(Canvas): Support `center` prop (similar to `Svg`) to translate children to center (useful for radial layouts) * fix(PieChart): Use `center` prop (broke after recent refactor) * Fix CI failures (`pnpm check`) * feat(render): Support `fill-opacity` * feat(Arc): Support Canvas context * feat(Group): Support Canvas context * fix(Canvas): Change registration API. Pass config instead of simple function to enable `retainState` use case (fix `Group` translate() use case). Return `unregister` function * fix: Reduce likihood of clipping for Canvas-rendered simplified charts by increasing default padding (and add top)) * fix: Support `fillOpacity` with more primatives * fix(render): Restore `globalAlpha` after using for `fillOpacity` * fix(Text): Fix font color class override on canvas * fix(render): Do not apply fill when set to `none` * fix(Bar): Fix fully rounded when using canvas renderContext by always using `Spline` (path) instead of `Rect` * fix(render): Workaround when using `tabular-nums` causing `computedStyles.font` to return empty * feat(LinearGradient): Support Canvas context (WIP) * Add parsePercent util and use for gradient color stops * breaking(LinearGradient|RadialGradient): Rename `url` slot prop to `gradient`. Improves name, especially within canvas context * chore(RadialGradient): Stub out canvas support * Simplify changesets * Refine changeset
|
Resolved via #295 with the introduction of a new draw registration system |
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Creating this issue mostly to document, as this workaround has been used in the docs for a while.
There is a known Svelte 3/4 reactivity issue with
$:as documented by LayerCake (see issue)It also sounds like this is fixed in Svelte 5
For Svelte 3/4 (and until LayerCake updates to Svelte 5 / runes), the workaround is to use separate
<Canvas>instances, for example:The text was updated successfully, but these errors were encountered: