Search code examples
javascriptjsplumb

jsPlumb handling elements in a scrollable div container

I am using jsPlumb to connect a bunch of divs (much like a flow chart). All of the divs are contained in one parent div which is scrollable. Sort of like the code below, but with more divs inside the container div.

<div style="height:500px;width:500px;overflow:auto" id="container">
   <div id="node1"></div>
   <div id="node2"></div>
   <div id="node3"></div>
   <div id="node4"></div>
   <div id="node5"></div>
</div>

My problem is that if I scroll the div, the connecting lines generated by jsPlumb just stay in place and don't scroll with the divs that they are supposed to be connected to. I've tried using jsPlumb.repaint() but still no luck. It appears jsPlumb is not taking into account the scroll offset of the caontainer div. Is there some way to fix this? I really want to avoid having to move the divs being connected out of the container div into the body since this would entail some very annoying css/html recoding.

Solution

  • It turns out that simply using jsPlumb.repaintEverything(); redraws the lines in the correct positions. jsPlumb.repaint() seems to be for repainting the lines for a specific element. For example, jsPlumb.repaint('div_id_goes_here');