Implementing Selectable Nodes And Connecting Lines

General JUCE discussion
1

I'd like to implement a system in Juce where nodes can be created with connecting lines. I guess you can think of something like a flow chart. Nodes can be dragged around and connecting lines automatically move to follow. Nodes and lines can be added and removed. Here are a couple of examples of this done using WPF:

Example 1

Example 2

Creating the nodes is easy as they're just Components that get dragged around. But does anyone have any idea what approach I might use in implementing the connecting lines using Juce? Two issues comes to mind right off:

  1. Drawing curved lines.
    It looks like the Graphics object can only draw straight lines. Is there any facility anywhere to draw curved lines such as bezier? (or even <gulp> quadratic bezier?)
     
  2. Is there any way to select the lines?
    One reason for them to be selectable is so they can be removed. At first I thought a connecting line could be drawn in its own component. But then how would mouse clicks pass through in the blank areas? I thought maybe I could implement the hittest() function and filter hits that weren't right on the line itself. But how could you know that? I don't see any easy way to know that the hit is on the line, such as checking the color of the pixel at the hit location.
    On the other hand, lines which are not Components wouldn't get mouse clicks and so couldn't be selected.

 

2

JUCE's Plugin Host could offer some clues on how it could be done. (Sorry, I'm just skimming posts on my phone so can't give a direct solution right now.)

2 Likes
3

For Bézier curves, have a look on “quadraticTo” and “cubicTo” methods of the Path class…

1 Like
4

Thanks for the quick responses! I hadn't noticed the g.strokePath() in the Graphics object and that it lets you draw with Path. I also see now that I can probably handle selection using Path::getNearestPoint(). It looks like I can use that within a hittest() function to tell if the mouse is near the actual curve. So I will only receive mouseDown() when clicking close to the curve. I briefly tried it. Very cool!

That should keep me busy for a little while until I get stuck again. smiley