Round transform coordinates to avoid blurry lines in svg

[marcj]

Before this patch you get the following matrix when zooming to 100%:

matrix(0.9991895111944822 0 0 0.9991895111944822 115 -1719)

That produces in SVG very blurry lines. After this patch the following matrix is produced:

matrix(1 0 0 1 115 -1736)

Which makes everything crystal clear. A rounding range of 500 is chosen for scale to get smooth animations while also getting integers when zooming to 100%. Movement operations would also produce floating x and y coordinates, which would also lead to a blurry image. This patch fixes that as well.
Before:

After:

[marcj]

@anvaka please let me know if I can do anything to get that merged. For us this is a critical fix and would lead us to publish a fork of this project which we would like to avoid. Anything you wish here?

[anvaka]

Hi Marc,

I'm afraid this wouldn't work well for the cases when people zoom out very far, as the scale will be truncated.

I'd love to know how do you zoom in to 100% that it produces floating number?

Alternative to forking the entire library could be creating your own panzoom controller (similar to svgController ) and then just passing it to the panzoom via options.controller

[marcj]

I see, good point.

I use this code to zoom to 100%:

this.graphPanZoom.smoothZoomAbs(
    rectParent.width / 2,
    rectParent.height / 2,
    1,
);

That custom controller possibility is a good workaround, thanks!

[anvaka]

If you happen to have a jsbin which would quickly let me debug the problem - I'd greatly appreciate it.

Otherwise, I've seen similar rounding errors when elements were using not the box model I have expected (thus my size calculation math was off). Might be worth checking too!

[anvaka]

going to close this request. Please let me know if you have more questions