Making Elements Resizable

[GoogleCodeExporter]

Would it be possible to expose the .resizable() method on jsPlumb so that the 
jsPlumb element becomes resizable along with the draggable support that it has.

Here is the jsFiddle link. http://jsfiddle.net/YNeuK/
I am trying to build an Object Modeller for one of my projects and the idea 
here is to show only a couple of attributes from the object and show the rest 
upon expansion (or resize). 

Notice the last line where I have $('.window').resizable() from the underlying 
jquery-ui. I had expected the Divs to become expandable as in the Resizable 
sample from JQuery-UI demos.

Attaching the sample html and CSS in case jsFiddle link does not work. 

Original issue reported on code.google.com by vidyasag...@gmail.com on 1 Jun 2012 at 9:41

Attachments:

• Modeller.htm
• styles.css

[GoogleCodeExporter]

i dont think this is a jsPlumb issue. try this fiddle, in which i commented out 
all the jsPlumb calls:

http://jsfiddle.net/sporritt/aW564/1/

the windows do not appear to be resizable.  perhaps they are, but there is a 
stylesheet missing?

either way, when they are resizable, all you would need to do is register a 
callback on the resize event and call jsPlumb.repaint(). 

Original comment by simon.po...@gmail.com on 1 Jun 2012 at 10:41

[GoogleCodeExporter]

i'm going to close this out unless it gets an update.  pretty sure its not a 
specific jsPlumb issue.

Original comment by simon.po...@gmail.com on 3 Jun 2012 at 10:10

[GoogleCodeExporter]

You are right. This indeed was was a stylesheet missing problem. 

This morning I was able to create a resizable (and draggable) div's. However I 
am noticing that when I resize one of the Div's the connectors do not paint 
themselves at the right locations. I may be doing something wrong in my 
Javascript. 

Please do not close this ticket yet. I promise to add another comment to close 
it if I was doing something wrong in my javascript.

Original comment by vidyasag...@gmail.com on 4 Jun 2012 at 5:26

[GoogleCodeExporter]

Hello Simon,

Thanks for looking into this. Please close this ticket. 

For the benefit of others here is what was missing in my code.
1. The JQuery-ui theme CSS files were missing in my first post. After adding 
them my Object div's became resizable.

2. As per Simon's comment I just has to call jsPlumb.repaintEverything() 
instead of jsPlumb.repaint() to make sure that my connectors get painted on the 
right places.

Here is the snippet of code that made it work'

        $(".window").resizable({
           stop: function(event, ui) {
               jsPlumb.repaintEverything(); }
    });

Original comment by vidyasag...@gmail.com on 4 Jun 2012 at 5:39

[GoogleCodeExporter]

thanks for updating for everyone's benefit.

I'm pretty sure you could narrow it down to a jsPlumb.repaint call though - is 
'ui.helper' a .window div in the callback?  you could try 
jsPlumb.repaint(ui.helper).

also, there's a "resize" event isn't there?  to make your UI more responsive 
perhaps you could try

$(".window").resizable({
  resize:function(e, ui) {
    jsPlumb.repaint(ui.helper);
  }
});

i havent tried this myself but it looks like it would work to me (pretty sure 
'ui.helper' is a jquery selector object, not a plain element).

Original comment by simon.po...@gmail.com on 4 Jun 2012 at 5:44

[GoogleCodeExporter]

like this:

http://jsfiddle.net/sporritt/HUKMC/5/

Original comment by simon.po...@gmail.com on 4 Jun 2012 at 5:47

[GoogleCodeExporter]

Original comment by simon.po...@gmail.com on 4 Jun 2012 at 6:52

• Changed state: Invalid
• Added labels: Type-Other
• Removed labels: Type-Defect

[GoogleCodeExporter]

Here is a working sample with your suggestion and example. I went ahead and 
posted the code that shows resizing of components within the DIV.

http://jsfiddle.net/3JxQ3/ 

And THANKS a MILLION for this wonderful "jsPlumb" initiative.

Original comment by vidyasag...@gmail.com on 4 Jun 2012 at 11:00