Those of you who have been following me will know that I've been looking a lot into JS libraries that can manage visual boxes and links between them. Well, it looks like there's a new kid on the block! Thanks to Marco for passing me a link to the jsPlumb demo site, where you can see three different demos of how blocks and their relations would look like.
The scripts don't take too long to load, which is great (in comparison to previous libraries I had tried). Apparently, the structure doesn't need to be tree-based (although I might be wrong here), which means it could enable the implementation of several types of links between elements. Finally, every link and every block can take a different color, which means it can be even clearer to present the elements.
Of course, there are a few drawbacks, like the fact that it doesn't have a kind of "natural reordering" effect when dropping one of the draggable boxes. But that's a minor problem for now.Those of you who have been following me will know that I've been looking a lot into JS libraries that can manage visual boxes and links between them. Well, it looks like there's a new kid on the block! Thanks to Marco for passing me a link to the jsPlumb demo site, where you can see three different demos of how blocks and their relations would look like.
The scripts don't take too long to load, which is great (in comparison to previous libraries I had tried). Apparently, the structure doesn't need to be tree-based (although I might be wrong here), which means it could enable the implementation of several types of links between elements. Finally, every link and every block can take a different color, which means it can be even clearer to present the elements.
Of course, there are a few drawbacks, like the fact that it doesn't have a kind of "natural reordering" effect when dropping one of the draggable boxes. But that's a minor problem for now.
Comments
hello - i wrote this plugin. thanks for the kind words! You are right when you say the data does not need to be tree-based in the DOM. It will join any two elements by ID.
i've been developing this in a vacuum really so it's interesting to hear other people's ideas and suggestions.
Hi Simon,
Nice to see you're keeping track of your stuff. You mind find other related JS scripts that do the same kind of things on this blog. Notably by looking for "mindmap" in the search box. In fact, I've been looking for something like you seem to have done (although I still haven't tested it myself) to implement mindmap features and another kind of new tool (still in design phase) for the open-source e-learning software Chamilo that we are developing (and for which I'm the technical leader).
The requirements were that it should not be in anything non runnable directly inside a browser without additional client-side plugins (so avoiding Flash and Java, basically) and that it should enable the possibility to create links of different nature between elements. Although our focus has slightly been shifted to other stuff right now (we are a few days away for version 1.8.7 alpha of Chamilo now), we will surely be using it (granting the license allows us to couple it with GNU/GPLv2) to improve education for everyone!
In fact, your plugin opens the door to shared mindmap applications driven by PHP, which was (until now) a nightmare to conveptualize due to the related dependencies (freemind, for example, is not easily made shareable between users and highly relies upon Java on the server - being a PHP-based application we don't like mixing languages too much on the same server).
Thanks. I will try it in a matter of a few weeks and let you know if we have problems with it (and if we make a lot of money out of it, I won't forget you :-))
Yannick
Simon, if you read me, you just made me hilarious with the last of your demos (the one with the pluggable connectors). I'll let you know as soon as we integrate that into our tool (will probably be the first open-source full-html+js mindmapping tool ever, or so I hope).
http://morrisonpitt.com/jsPlumb/html/jquery/draggableConnectorsDemo.html
Thanks for that, you really make our work a whole lot easier.
Looking forward to seeing it!
The library has now been moved to: http://morrisonpitt.com/jsPlumb/html/jquery/demo.html