Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to draw S-curved arrows between boxes

dragonman225.js.org

Post reply on HN
Print view View original

11–20 of 59 posts

Re: How to draw S-curved arrows between boxes

#11

Post by klyrs »

Such an innocent-sounding problem, but I've drawn tons of figures in inkscape, tikz and matplotlib and I swear, I'd never stop fidgeting with curved arrows if time was immaterial.

But of course, I have Opinions that would keep me from using this in practice. For example, my favorite style is similar to a half curly-bracket (or, taste depending, an integral symbol) -- two small semicircles connected by an axis-aligned line.

Edit: oh, and question from the peanut gallery... what if one box is fully within the other, and centered?

Re: How to draw S-curved arrows between boxes

#12

Post by kazinator »

In cases when the boxes overlap, there are ways to choose an arrow which will not cross the boxes. But this is prevented by the constraint that the starting and ending points must be on the midpoint of a box edge. If the midpoint of the a given edge is occluded by a box, or occludes a box, then that edge is not considered, even though it is partially visible and has a viable point for the arrow.

E.g. if we could start an arrow in the middle of the small protruding "ledge" of the bottom box, we could do this:

    ,-------.
   :         :
   :         v
   : +----------------+
   : |                |
  +----------------+  |
  |                |--+
  |                |
  +----------------+
It's not written in stone that box-and-arrow diagrams must be connected by edge midpoints. That can't even work well any time you have multiple arrows emanating or terminating on the same edge.

Very good first iteration round, though.

Re: How to draw S-curved arrows between boxes

#13

Post by AceJohnny2 »

anamexis wrote: post #6
anonymous532 wrote: post #5

It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.

> under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections This is an odd assumption to make.

Not so weird. Here's a random example, from Wikipedia:

https://en.wikipedia.org/wiki/Force-directed_graph_drawing#/...

Re: How to draw S-curved arrows between boxes

#14

Post by kazinator »

nescioquid wrote: post #2

I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them. I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) a…

Today (or twenty years ago, for that matter) I'd just output the data structure in graphviz syntax and throw it at the dot tool.

Re: How to draw S-curved arrows between boxes

#15

Post by javajosh »

klyrs wrote: post #11

Such an innocent-sounding problem, but I've drawn tons of figures in inkscape, tikz and matplotlib and I swear, I'd never stop fidgeting with curved arrows if time was immaterial. But of course, I have Opinions that would keep me from using this in practice. For example, my favorite style is similar to a half curly-bracket (or, taste depending, an integral symbol) -- two small semicircles connected by an axis-aligned…

>I have Opinions

Good. Then fork the library and modify it to your liking, optionally republish.

>one box is fully within the other, and centered

This implies containment/stacking and wouldn't require an arrow. However, you could do worse than drawing 4 arrows from the edges of the surrounding rectangle.

Re: How to draw S-curved arrows between boxes

#16

Post by emmanueloga_ »

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ...

Would be nice to have a site, maybe a wiki, dedicated to this kind of thing.

Other interesting problems in this area:

* Layout algorithms

* Automatic assignment of keys for navigation (for nav w/o using a mouse)

* Popup menu prediction [1]

* Text breaking / paragraph layout [2]

* Etc, etc, etc ...

1: https://bjk5.com/post/44698559168/breaking-down-amazons-mega...

2: https://xxyxyz.org/line-breaking/

Re: How to draw S-curved arrows between boxes

#17

Post by dragonwriter »

anonymous532 wrote: post #5

It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.

Is someone selling it as some kind of universal solution for production diagramming problems of all scales, or is this just unnecessary negativity?

Re: How to draw S-curved arrows between boxes

#18

Post by TobTobXX »

AceJohnny2 wrote: post #13
anamexis wrote: post #6

Earlier quoted context omitted.

> under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections This is an odd assumption to make.

Not so weird. Here's a random example, from Wikipedia: https://en.wikipedia.org/wiki/Force-directed_graph_drawing#/...

These are straight lines. Not sure you even _want_ Bézier curves in this context, striaght lines are probably clearer in these graphs with hundreds of connections.

Re: How to draw S-curved arrows between boxes

#19

Post by vjeux »

emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

Back in 2012 I made a series of blog posts about all the unique image algorithms I could find:

- Facebook (that I designed): https://blog.vjeux.com/2012/image/image-layout-algorithm-fac...

- Google Plus: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- Google Plus, finding best breaks, which also explains fancy text layout algorithm: https://blog.vjeux.com/2014/image/google-plus-layout-find-be...

- Lightbox: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- Lightbox Android: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- 500px: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

I hope that’s useful!

Re: How to draw S-curved arrows between boxes

#20

Post by melony »

emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

One of the most difficult programming challenges I have encountered is calculating and displaying automatic drag and drop alignment guidelines/rulers (like those in Figma and PowerPoint that show up when you drag two element close to each other or near certain ratios) efficiently. They are not documented anywhere despite being a very common pattern. Most drag and drop libraries and framework don't have out of the box support for it as it requires deep low level integration.
Post reply on HN