Tuesday, 24 August 2021

SVG line resize issues

Currently, I am creating an editor and I am dynamically creating scalable lines. The goal then is to be able to resize/drag and drop smoothly.

Inspiration got from Slides slides.com lines

Here is my current prototype Stackblitz prototype

Dragging - I solved with drag and drop from CDK by adding calculation of scale in onDragEnded

My current issues:

  1. As you can see currently my calculation and mental model of how this should work is bad - at some point in time, I lose the line. Can you advise what I am missing? (maybe my resizers have bad position)
  2. I am not sure if I am drawing this arrow properly in SVG?
  3. I am not sure if I should use viewBox?

Maybe there is a library for doing this and that I am unaware of. Thanks in advance.



from SVG line resize issues

No comments:

Post a Comment