Bad connections after drag object with margin

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Add some box model object like div, which has determined margin property in 
css style
2. Create connection from this object to other
3. Drag this object

jsplumb for jquery, version 1.2.5
all browsers : IE8, IE9, Chrome, Opera, FF3.6, FF4

I attach my source file (in file there are set pathes to local js libraries)

Original issue reported on code.google.com by piotrbrzuska on 19 Mar 2011 at 7:07

Attachments:

• workflow2.htm

[GoogleCodeExporter]

i can't test this page without the mockajax library.  

what does "bad connections" mean?  

Original comment by simon.po...@gmail.com on 19 Mar 2011 at 11:31

[GoogleCodeExporter]

hello

when I wrote 'bad connections' I was thinking about wrong positions of 
connector's line

link for jquery-mockjax : https://github.com/appendto/jquery-mockjax

I fixed it by add function getUIMargins and modify getUIPosition (about 3241 
line). For me it's working , but I and know it will be work with other cases.

sorry about my english.

getUIMargins : function(obj){
return {
                top :parseInt(obj.css('margin-top').slice(0,-2)),
                left :parseInt(obj.css('margin-left').slice(0,-2))
            }
        },
        getUIPosition : function(eventArgs) {
            var ui = eventArgs[1];
            //return ui.absolutePosition || ui.offset;
            var margs = this.getUIMargins(ui.helper);
            var _offset = {
                top: ui.offset.top+margs.top,
                left:ui.offset.left+margs.left
            };
            return _offset || ui.absolutePosition;
        },      

Original comment by piotrbrzuska on 19 Mar 2011 at 11:44

[GoogleCodeExporter]

thanks - i can run the demo now and i see what you mean.

i will try dropping your fix into the jquery adapter and see how it affects the 
other demos.  

Original comment by simon.po...@gmail.com on 20 Mar 2011 at 3:16

• Added labels: Milestone-1.2.6

[GoogleCodeExporter]

your suggested fix is in the jquery adapter now; the demo page works for me.  
you can see it here:

http://morrisonpitt.com/jsPlumbTest/tests/issue59_test.html

i won't close out this bug until i've had a chance to check whether or not it 
is an issue with the MooTools and YUI3 implementations.

Original comment by simon.po...@gmail.com on 20 Mar 2011 at 4:31

[GoogleCodeExporter]

i backed out this change.  it broke IE.

Original comment by simon.po...@gmail.com on 28 Mar 2011 at 10:24

[GoogleCodeExporter]

i took another look at this tonight.  you've got negative margins on those 
elements, right? if you take off the negative margins there is no change to the 
ui and the connections are where you expect. i don't think i need to put 
anything to fix this into jsPlumb.

Original comment by simon.po...@gmail.com on 8 May 2011 at 12:51

• Changed state: WontFix

[GoogleCodeExporter]

actually, maybe i do.  reopening.

Original comment by simon.po...@gmail.com on 8 May 2011 at 12:53

• Changed state: Accepted

[GoogleCodeExporter]

testing this in mootools and yui3 show those libraries supply the correct 
location for the object being dragged;  jquery is reporting the wrong location 
by not taking the margins into account.

there is a workaround for this - include this snippet of code after your 
jsplumb inclusion:

jsPlumb.CurrentLibrary.getUIPosition = function(eventArgs) {
  var ui = eventArgs[1], _offset = ui.helper.offset();
  return _offset || ui.absolutePosition;
};

but i'm not going to include it in jsplumb because there's a noticeable paint 
lag.  

Original comment by simon.po...@gmail.com on 5 Jun 2011 at 10:00

• Changed state: WontFix
• Removed labels: Milestone-1.2.6