jsPlump doesn't take CSS scale transforms into account when placing endpoints/plumbing

[GoogleCodeExporter]

Here's a fiddle that demonstrates my problem..

http://jsfiddle.net/hW5qY/6/

Basically I have some divs that are CSS scale transformed and it looks like 
jsPlumb doesn't check the scale before doing calculations. Let me know if I can 
be of any help with info as I hope to be able to use jsPlumb!

Thanks

Original issue reported on code.google.com by pshapiro...@gmail.com on 29 Dec 2011 at 6:44

[GoogleCodeExporter]

it's actually jquery that doesn't take the scale transform into account; 
jsPlumb uses outerWidth and outerHeight to get info about element sizes.  in 
this jsfiddle you can see the offset and height of each element as reported by 
jquery:

http://jsfiddle.net/hW5qY/19/

Original comment by simon.po...@gmail.com on 29 Dec 2011 at 8:11

[GoogleCodeExporter]

...so i'm reluctant to put any code into jsPlumb to handle this since the idea 
of using a supporting library is that i don't have to concern myself with 
cross-browser issues and all that business.  plus jsPlumb relies on the 
supporting library for drag/animation, and of course all of that stuff would 
obviously have to be css transform aware too.  

i seem to recall that either mootools or YUI dealt with this problem.  maybe i 
am imagining things.  what does The Google have to say about this?

Original comment by simon.po...@gmail.com on 29 Dec 2011 at 9:01

[GoogleCodeExporter]

Unfortunately I didn't find anything on (The) Google about it... so I ended up 
making a jQuery issue (http://bugs.jquery.com/ticket/11114).

The only place where I use jsFiddle is on transformed elements, so hacky as it 
is I might end up modifying my local copy of the jsPlumb code to halve the 
width/height measurements it uses. Hope this doesn't get too messy...

Original comment by pshapiro...@gmail.com on 29 Dec 2011 at 10:00

[GoogleCodeExporter]

why not just override the $.offset function?

Original comment by simon.po...@gmail.com on 29 Dec 2011 at 10:25

[GoogleCodeExporter]

...err i mean outerHeight/outerWidth.  

Original comment by simon.po...@gmail.com on 29 Dec 2011 at 10:26

[GoogleCodeExporter]

That would work too. Probably would be better for me in the long run actually. 
I hadn't seen your reply till I went ahead and just put /2 under the singular 
calls to outerHeight and outerWidth in jsPlumb (which works so far) but when I 
have a little bit of extra time, if there's no response from the jQuery team 
I'll probably go ahead and override outerHeight/Width to account for the scale. 

Want to thank you for helping me so far! Sometimes it's hard to find people who 
are willing to help. :)

Original comment by pshapiro...@gmail.com on 29 Dec 2011 at 11:06

[GoogleCodeExporter]

you're welcome.  i'll be interested to hear what they say about this...

Original comment by simon.po...@gmail.com on 30 Dec 2011 at 1:26

[GoogleCodeExporter]

Looks like the guy rejected the ticket as a wontfix. Want to weigh in?

Original comment by pshapiro...@gmail.com on 30 Dec 2011 at 10:56

[GoogleCodeExporter]

His response is pretty much what I expected really. I would be concerned about 
performance of checking that too. But I thought your suggestion of an optional 
parameter was pretty decent. 

Original comment by simon.po...@gmail.com on 31 Dec 2011 at 12:22

[GoogleCodeExporter]

incidentally, i tried this with mootools 1.3.2 and it also failed:

http://jsfiddle.net/hW5qY/26/

Original comment by simon.po...@gmail.com on 4 Jan 2012 at 8:46

[GoogleCodeExporter]

...and YUI:

http://jsfiddle.net/hW5qY/27/

Original comment by simon.po...@gmail.com on 4 Jan 2012 at 8:47

[GoogleCodeExporter]

closing this out.  

Original comment by simon.po...@gmail.com on 7 Jan 2012 at 3:28

• Changed state: WontFix

[GoogleCodeExporter]

Looks like this issue is still a problem even after 1.5 years. Still nobody to 
fix it?

Original comment by hokas...@gmail.com on 20 Jun 2013 at 3:02

[GoogleCodeExporter]

i don't use this issue tracker anymore.

but you are right, after 1.5 years jquery still does not handle css transforms 
properly.

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

[GoogleCodeExporter]

I know this thread has been started a long time ago but I think I found a 
solution to this problem. I modified jsplumb to take the zoom factor into 
calculation. 

To my knowledge jsPlumb is not aware of the zoom at all. Since I am setting the 
zoom in some other script I used a text field for testing purposes to get the 
zoom factor (var zoom = $('#currentZoom').val()) and refreshed this input field 
each time the zoom changed. Thats how I made the "zoom" available in jsPlumb.

Change the lines 2922 & 2923 in jsPlumb.js to the following:
result[0] = xy[0] / zoom - po.left / zoom + so.left;
result[1] = xy[1] / zoom - po.top / zoom + so.top;

In addition to that we need to tell the jsPlumb to correct the outer & inner 
height.
Change line 228 in jquery.jsPlumb.js to this:
return [el.outerWidth() * zoom, el.outerHeight()* zoom ];

This worked for me on Chrome & Opera. I spend a whole day figuring this out but 
I hope this helps you! If you have any questions just let me know.

Original comment by designtw...@gmail.com on 12 Aug 2013 at 10:18

[GoogleCodeExporter]

hi, thanks for the update.

since i don't use this issue tracker anymore i didn't think of updating it, but 
there's a thread on the group that you might find interesting:

https://groups.google.com/forum/#!topic/jsplumb/1tpkvs29Vco

Original comment by simon.po...@gmail.com on 12 Aug 2013 at 10:20

[GoogleCodeExporter]

Thank you very much! I see that my quick fix has become obsolete already since 
there is a zoom function :-) 

Original comment by designtw...@gmail.com on 12 Aug 2013 at 11:59

[GoogleCodeExporter]

no problem.  thanks for updating though; it's good when people take the time to 
do that.

btw it doesn't say anywhere in that thread, but of course it doesn't work in IE 
< 9.

Original comment by simon.po...@gmail.com on 12 Aug 2013 at 12:01

[GoogleCodeExporter]

solved this issue to use in a project

getSize : function(el) {
            el = $(el);
            var style = window.getComputedStyle(el[0]);
            var transform = null;
            var zoomx = 1;
            var zoomy = 1;
            if (style.transform) transform = style.transform;
            if (style.webkitTransform) transform = style.webkitTransform;
            if (style.OTransform) transform = style.OTransform;
            if (style.msTransform) transform = style.msTransform;
            if (style.MozTransform) transform = style.MozTransform;
            if (transform && transform != "" && transform != "none"){
                var transform = transform.replace(/^\w+\(/,"[").replace(/\)$/,"]");
                var jsontransform = JSON.parse(transform);
                zoomx = jsontransform[0];
                zoomy = jsontransform[3];
            }
            return [el.outerWidth()*zoomx, el.outerHeight()*zoomy];
        },

Original comment by James.C....@gmail.com on 30 Dec 2013 at 9:06