SVG horizontal connectors breaking on zooming out about flowy-vue

[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/