SVG horizontal connectors breaking on zooming out

[shefaligupta]

Hi Remco, Kudos for writing this one. :)

I have been using this for my current work. I have also added a minimap with this and some zoom features. But as soon as I zoom out to less than 1, the horizontal lines start breaking.

Do you know a way to fix this?

[maxganiev]

@shefaligupta hi, did you find the solution? I got the same problem with transform:scale. this seems to be a workaround, but browser support for css zoom is not really good in terms of cross-browserness.

Lines zoom and scale recalculating each time zoomer value changes (transform: scale value changes)

[shefaligupta]

@maxganiev - fixed it by only using zoom on the parent container instead of transform.
this.$refs.flowWrapper.style.zoom = 1;

[maxganiev]

@shefaligupta zoom has poor cross-browser compatibility, and is non-standard feature that is not recommended to use in production https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
if you don't mind that - zoom can be an option, though it has bugs when drawing large schemas.

fyi, if you need cross-browser solution tested on large schemas - more than welcome to my repo (this is now moved to production and connected to real backend service)
https://github.com/maxganiev/flowy-draggable-vue
demo: https://schema-draggable.netlify.app/