Using jsPlumbs, redraw the lines when resizing the window?

Question

I'm struggling with jsplumbs just to do a simple thing. I'm just connecting divs with a single straight line, so how can i redraw the lines when resizing the window? So it always follows the center of the divs. Can i use z-index to put the line below the divs? if i have to connect one div with several other divs, what's the best approach to draw several lines from just one div ?

here is my code so far :

http://jsbin.com/esuvuw/1/edit

Thanks for your help

Gilmagilman

Answer 1

Here you are:

  $(window).resize(function(){
      jsPlumb.repaintEverything();
  });

Add this to your code. I just run across this repaintEverything() function and remind of your post.

http://jsbin.com/esuvuw/9/edit to show that this is working.

Agate

Any response? Does it help ? – Agate

+1 :D This should be marked as best answer! It helped me out very much! – Cecilycecity

it dint work for me, if elements are draggable. They go out of their containment. – Hoarfrost

Answer 2

I also changed your code in that way:

jsPlumb.bind("ready", function(connection, e) {

jsPlumb.addEndpoint('block-1', ['BottomCenter'], []);
jsPlumb.addEndpoint('block-2', [], ['BottomCenter']);
jsPlumb.draggable('block-1');
jsPlumb.draggable('block-2');
jsPlumb.connect({

   source: "block-1", 
   target: "block-2",
   connector: 'Straight'

});
});

the code is NOT perfect. I have no time right now - sorry. But now, when you drag divs, and then change size of window, everything is OK.

Agate

I see, i didn't realize that i missed that library to draw, i thought it was only to active the touch in mobile devices. Thanks, for your help, but i don't need to have my divs "draggable", i just want to redraw the lines every times the user, resize the window, so the lines are always attached even if the divs moves. do you know if there's a function to re-draw the lines ? – Gilmagilman

OK. I know. I just wrote what I used last time with jsPlumb. I think your connections don't move, because they are attached in bad way. I think you should try to create endpoinds and connect them. It should work. If I find a minute I'll try to update my answer. – Agate

I lied about touchpunch. You are right. It's not necessary. Sorry, I just always have it in my source code and that's why I thought it's necessary. Sorry for misleading you. – Agate

Hi, mbochynsky, so i tried your code, but it's the same that mine, the lines don't follow the divs. check it :<br> jsbin.com/esuvuw/6 <br> How did you do, when you used jsPlumb ? – Gilmagilman

here is my latest code (in fact just slightly changed demo): jsfiddle.net/matbochynski/t39jz/embedded/result ... I played yesterday with your code to get what you want, but i couldnt achieve it. It looks like issue with centering the content. Are you sure that you have to do this (centering)? Writing this a new idea come to me... give me 5 minutes. – Agate

well, nice example, thanks. My problem, i want the lines to follow my responsive theme, so the divs are centered and keep a ratio when user resize the window, i just don't catch why jsPlumbs doesn't work like that, i think i have to erase/rewrite every time divs are in a new position. – Gilmagilman