I have a several divs connected to one another using the endpoint connections to one another. As I do a zoom in or zoom out, I need to repaint all the UI components. The UI components are drawn using the jsPlumb library(jquery/javascript based). There is a method in jsplumb which forces the repaint but it is not working as the way I want it to do. Here it is what I am trying to do.
$("div#explanation .plus").click(function(){
jsPlumb.repaintEverything();
var strongFont = parseFloat($("div.window strong").css('font-size'));
var newStrongFont = strongFont + 2;
$("div.window ").animate({
'height':'+=20px', 'width':'+=20px'
},"medium");
$("div.window strong").animate({
fontSize:newStrongFont
},"medium");
//This is not working
jsPlumb.repaintEverything();
jsPlumb.repaintEverything();
//I am calling here another function to repaint the div windows one by one
repaintWindows();
});
var repaintWindows = function(){
var jjl;
for(jjl=1;jjl<=xmlLength;jjl++)
{
var windo = "window"+jjl;
//alert("Window is ::"+windo);
jsPlumb.repaint(windo);
alert("Window is ::"+windo);
//_addEndpoints(wind, ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
}
alert("the value of jjl is ::"+jjl+" \nThe value of xmlLength is::"+xmlLength);
};
The problem here is if I remove the
//alert("Window is ::"+windo);
from the repaintWindows method for loop, the windows get repainted during the next cycle of call. I want the repaint to work at the same time. If I keep the alert, then it does repaint the window at the same time. As well, at the end I dont want any kind of alert over there. Can somebody please tell me where am I going wrong. Any help is appreciated. Thanks!
