Taming the UX monster with SVG: my first encounter with custom SVG connectors and how you can excel it at too!

  • I needed to make an interaction like above where user can select a node on LHS and connect with nodes on RHS.
  • There can be many-to-many relationship between these nodes.
  • User can chose to remove an existing connection.
  • All existing connections have to be plotted when page loads and auto-saved whenever user adds/remove a connection
  • The cherry on top was - filter! User can filter the nodes on LHS or RHS at anytime and the Connections have to show according to currently visible nodes
  • After sweating my fingers for few days and losing some hairs, the final outcome was like this:

Choosing the right weapon

  • CSS3 + HTML + JS: while it may have been possible to make a solution simply using CSS and complex borders/boxes, it would have been very difficult to manipulate the styles using plenty of JS code. And hence I gave up after spending couple of hours.
  • Canvas: this could be an ultimate solution considering the powers of Canvas, but I had little exposure to it. After bit of study I built an opinion that Canvas is ultimate super-set of all interactions HTML has to offer. But it may be an overkill considering my minimal Drawing requirements, while canvas offers vast Painting solutions at cost of verbose API.
  • SVG: They are easy to learn, offers inbuilt api to draw simple lines and even really complex curves. You can create many types of nodes inside an svg element and add/remove them easily based on user events. Has lightweight api and easy on browser performance. This looked like perfect weapon!

Know thy Weapon

  • Its as easy as following to write your first SVG path.
  • You need an SVG element, with various elements like Line, Path, Archs etc inside it.
  • You must know the start and end x, y positions of the path you want to Draw.
  • The api is simple to start with but can really mess up your head after a while! So try to keep it small and manageable.
  • I ended up writing following (crux of) code to support various variables to draw a curved connector path

Useful ammo

  • Element.getBoundingClientRect()
  • Element.offsetTop
  • querySelector
  • appendChild
  • removeChild

Boo!

  • Simple Web APIs like childNode.remove() to self-remove an element from DOM was not supported by our long-term frenemy IE 11
  • As of writing this article in early 2021, its not possible to give Z-index to an SVG element, so if you want to plot an Active or high-priority element on newer element, wait till this gets accepted!
  • Element.offsetParent.getBoundingClientRect(): had to use PARENT container as the Checkbox will always give offsetTop = 0 as its hidden due to custom styles we used to show fancy checkboxes
  • While its possible to use Gradients to fade out a path, the gradient becomes invisible if the delta between Y coordinates is 0! And that needs special instruction as below.
  • Its possible to create really complex or pixel-perfect paths in SVG, but that would lead to some utter complex equations to be solved like below. So i would suggest to simply refrain from it and look for alternate UX rather than building a nightmare for yourself and future devs.

Keep the map handy

--

--

--

Javascript, Angular, Vue. Web App is all what I Do. And sometimes getting bored, i write articles and poems too!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

After Chrome developers team decided to exclude terms blacklist and whitelist from internal code…

10 Most Amazing Use Cases of WebSockets — Go Real-time!!

PHP — How to break down any protocol://user:password@host:port/uri (Advanced)

What is the Swift programming language?

Hibernate : Mistakes to avoid

ActiveRecord: Eager Loading

Final Entry

‘Policy As Code’ — Are you kidding me ?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajay

Ajay

Javascript, Angular, Vue. Web App is all what I Do. And sometimes getting bored, i write articles and poems too!

More from Medium

Website to Find Remote Jobs

The Future of Outsourcing in Software Development

Starting up (quite literally)

VYou app: by developers for developers | VYou