Monday, 24 September 2012

jsPlumb

 is a pretty cool library for 'plumbing' a web page. It allows the drawing of arbitrary connectors between elements using straight connectors, style connectors or some nice-looking , giving some effects like this:
Screenshot of the jsPlumb jquery demo


I've been using jsPlumb in a recent project to draw some fun in conjunction with and my thoughts on jsPlumb are very positive. jsPlumb is fast to load, draw and redraw connections, it integrates with various different JS frameworks and it's pretty simple to use. About the only criticism I have is that it would be nice if you could influence the connection routing with a bit more precision, or simply have the ability to set up some elements that the connector should try to avoid.

Integrating the library with meteor.js was as easy as placing the jsplumb plugin file into the client/lib directory of the project.

3 comments:

  1. Hi David,

    I'm also doing some work with jsPlumb and Meteor. Integration is a little bit of a challenge: my jsPlumb anchors and connectors often disappear or render in the wrong place. Any tips, pointers or example code you could share?

    Thanks,
    Graeme

    ReplyDelete
  2. Hi Graeme,

    I had some issues initially with connectors rendering in the wrong place. I can't remember exactly what caused it, but it seemed to be down to trying to connect up items that were deeply nested with several absolute positioned items.

    As for losing connectors, that wasn't an issue I encountered. That might be down to my strategy for drawing the jsPlumb connectors. My approach was to push the jsPlumb calls into handlebars helpers, which would then be called whenever Meteor invalidated (and redrew) the template.

    I did have issues initially with jsPlumb not finding items on a page, which I solved by wrapping all the jsPlumb calls in a 'Meteor.defer' callback. This gave the page a chance to render and create new elements, which could then be connected with jsPlumb. The final thing I did was to use 'jsPlumb.getInstance()' to clone a new jsPlumb rendering instance each time, so I always had a fresh instance without any old connector or anchor references that might have been thrown away during a re-render from Meteor.

    I hope that helps a bit.
    David

    ReplyDelete
  3. Hi David,

    Actually, this is my 1st experience with jsplumb. However, I could easily do the connections with the windows. but whenever am trying to save the same as an object and recollects the endpoints, it's not working. could you please share sample source code for the same. that will be very helpful for me.

    my mail id is: rahulsahay19@gmail.com

    Thanks,
    Rahul

    ReplyDelete