Drawing lines between windows just like in Interface Builder

Question

I have two windows, each with a round NSView:

------------------     ------------
|X-+ Oscillator  |     |X-+ Mixer |
|----------------|     |----------|
|                |     |          |
|        O       |     |     O    |
|                |     |          |
|                |     |          |
------------------     ------------

Both windows are in a seperate NIB. I want to be able to draw a line between the two round NSViews at runtime, using drag'n'drop, just like connecting IBOutlets in Interface Builder:

------------------     ------------
|X-+ Oscillator  |     |X-+ Mixer |
|----------------|     |----------|
|                |     |          |
|        O-------+-----+-----O    |
|                |     |          |
|                |     |          |
------------------     ------------

I also want to be able to determine to which NSViews the NSViews are connected using the drawn lines. I need this to connect Oscillators to Mixers. I also want to be able to remove the connections by dragging into empty space.

Can anyone explain me how to do this? Thanks.

Answer 1

The problem is having a view into which you can draw that spans the two windows' combined rects (or the screen or screens they're on). This is typically done with a borderless, transparent "overlay window." There are lots of examples of a borderless, transparent window available online.

On the start of the drag, the overlay window appears (but is invisible to the user) positioned over your drawing area. As the drag is updated, you draw your line, translating the overlay view coordinates to/from the source/target view coordinates. When the drag is complete, do some animation (like a fade or a blink) then order out the overlay window.

Answer 2

Hi Koning. I think the biggest problem with your approach is the fact that you have two separate windows, one with the oscillator view, and one with the mixer. If you could change your design so as to display all synthesizer components (or maybe radio frequency components - not sure what you're doing!) in a single window, then your problems will get much simpler.

As Joshua said, one approach is to use an invisible overlay window which just shows the link. But if you're really using two separate windows then you can't (as Joshua suggests) order out the overlay window at the end of the drag. If you do that, the link will disappear at the end of the drag. If you want the link to continue to be displayed (think of Interface Builder or - better yet - Quartz Composer) then you need some mechanism to persistently display the link. This is especially true if you want to, at a later point, allow the user to remove the link.

I'd strongly suggest building your interface around a single window. Also, consider using Core Animation to display each link as a layer.

Dave