4

I'm looking for a Javascript UI component which will let me drag a line between items in a hierarchical tree on one side of the screen to items in a hierarchical tree on the other side of the screen (similar to BizTalk's "Map" UI).

I've searched for "Javascript Tree Map", etc. and have only found "Treemap"s... which are not at all what I'm looking for.

I'm perfectly fine with requiring HTML5 and using canvas.

I just don't want to write this myself if there is already something out there.

Thanks!

I'm not sure if I can articulate what I'm looking for well, so let me provide an illustration:

BizTalk Map UI http://geekswithblogs.net/images/geekswithblogs_net/Chilberto/WindowsLiveWriter/BizTalkMapComparisonbetweenTableLoopinga_B5B9/image_6.png

Steve
  • 31,144
  • 19
  • 99
  • 122
  • I think what you need to do is a [draggable](http://jqueryui.com/demos/draggable/) with an invisible box and a line constructed to follow the invisible box from the origin. – Jared Farrish Jun 24 '11 at 22:33
  • @Jared; when you say draggable, you mean like a jQuery draggable? – Steve Jun 24 '11 at 22:34
  • @Steve - Yes, see my comment edit. – Jared Farrish Jun 24 '11 at 22:34
  • @Steve - Btw, I think the line might be tricky too. Hmm... – Jared Farrish Jun 24 '11 at 22:35
  • @Jared; I admit, I tried to keep the question fairly simple... but I'm really looking for something that could handle collapsible tree nodes and large numbers of connections out-of-the-box. Something more akin to BizTalk's "Map" UI... where the position and visibility of the lines drawn on the canvas would update when the trees are scrolled / collapsed, etc. Lets see what sort of answers we get. – Steve Jun 24 '11 at 22:37
  • 1
    @Steve - Try this: http://stackoverflow.com/questions/536676/how-to-draw-a-line-between-draggable-and-droppable – Jared Farrish Jun 24 '11 at 22:39
  • @Steve - After seeing your new picture, yeah, I would check ExtJS or some of the other mature and higher-end libraries (maybe even Flash and Silverlight). – Jared Farrish Jun 24 '11 at 22:41
  • @Jared; Nice Link! That would certainly be a good starting point for me if I need to do it myself. Thanks!! – Steve Jun 24 '11 at 22:43

1 Answers1

3

The WireIt library will enable you to drag lines that connect components. You may still need to pull in something else to get the hierarchical view on either side though.

Eric Levine
  • 13,536
  • 5
  • 49
  • 49