SplitLinePath takes a long time to render with certain curves

For some reason, <SplitLinePath> is taking a long time to render when paired with certain curves.

Reproduction:

https://stackblitz.com/edit/react-ts-mgzfrj?file=App.tsx

Open the above link in a new tab and react profiling tools and you will see that the render is taking a long time (>100ms on a new M1 Mac)

This only seems to occur for smooth curves like curveMonotoneX, curveNatural and curveCardinal.

This only seems to affect <SplitLinePath> while rendering the same data with the same curves as two separate line paths only takes a couple of milliseconds.

[valtism]

Yeah, that’s the plan. Already implementing it in our codebase right now. I can share the end-result when I’m done. It could be exposed as a new shape, like <PerformantSplitLine> or something in Visx.

Hope to find a way to make this compatible with all curves too

[valtism]

So this is a rough solution I have to meet our use-case: https://gist.github.com/valtism/5a6265b503aa7a7ae2a765f0d11163cf

One of the main differences is that this approach no longer relies on exact matching of points (which is impossible with some curves) and instead uses the getClosest function to find the closest x point in the path to the target. It now mostly works for all types of curves (although not yet for closed curves).

This was only set up for x segmentation, but could be extended fairly easily to support both x and y. I haven’t though about how length would work, because we really only need x segmentation.