laurens94 / vue-timeline-chart

A timeline component for Vue3
https://laurens94.github.io/vue-timeline-chart/
MIT License
32 stars 2 forks source link

Clamp items outside viewport so they cannot become too large #8

Closed laurens94 closed 4 months ago

laurens94 commented 4 months ago

When zooming in, items can become huge (millions of pixels width). This causes performance issues and eventually the browser won't even render the element:

image

Their width and positionX offset should be clamped.

In order to keep the illusion that the items are partly out of the viewport, an offset in px should be configurable. With a large enough offset it should not cause issues with items that have a border-radius.

To illlustrate this new behavior, in the example below the overflow is made visible:

https://github.com/laurens94/vue-timeline-chart/assets/5780704/721111ec-0e57-4f43-944b-3434a09d1031