elfalem / Leaflet.curve

A Leaflet plugin for drawing Bézier curves and other complex shapes.
Other
218 stars 52 forks source link

Renderer pane option is ignored on canvas renderer #33

Closed mobinseven closed 3 years ago

mobinseven commented 4 years ago

Issue Description:

When defining a renderer for the curve, which has a pane defined, pane is ignored and each curve creates a canvas for itself and makes the page very heavy and irresponsible.

Steps to reproduce:

  1. Create a pane.
  2. Create a canvas renderer for the pane.
  3. Create high number of curves with the renderer

map.createPane("customPane"); var canvasRenderer = L.canvas({pane:"customPane"}); var pathOptions = { renderer: canvasRenderer }; var path = ['M', [50.14874640066278, 14.106445312500002], 'Q', [51.67255514839676, 16.303710937500004], [50.14874640066278, 18.676757812500004], 'T', [49.866316729538674, 25.0927734375]]; for (var i = 0; i < 500; i += 1) { var curvedPath = L.curve(path, pathOptions); curvedPath.addTo(map); }


## Version
Leaflet 1.7.1
elfalem commented 4 years ago

Thanks for the bug report and detailed reproduction steps. I have not yet gotten a chance to investigate but will do so when possible.

elfalem commented 3 years ago

To give an update, I've been able to confirm the issue. It looks like each curve was creating it's own canvas for isolation. This is because animating becomes challenging with multiple curves on the same canvas. But as noted, having multiple canvases also has its own issues. I'm working on getting animations to work reliably on a single canvas.

elfalem commented 3 years ago

@mobinseven I've just released version 0.7.0 which I believe resolves this issue. Please let me know if you can confirm.

mobinseven commented 3 years ago

@elfalem Yes, I tested the snippet and they all rendered on a single canvas. Thanks!