search

AbimannanMuthusamy / jsplumb

Automatically exported from code.google.com/p/jsplumb
0 stars 0 forks source link

Incorrect canvas offset when dragging with container set and container has overflow:scroll #37

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Environment:
jsPlumb 1.2.3
jsPlumb.Container = 'window';

CSS:
#window {
position:relative;
overflow:scroll;
}

window is positioned in the lower right portion of the browser window.

On all endpoints the offset is calculated correctly but it's not calculated 
right when positioning the canvas for the bezier curve ONLY during dragging 
operation. Once the connector snaps to an endpoint the canvas for the curve is 
positioned correctly.

Note: this used to work correctly in 1.2.3 RC1

Original issue reported on code.google.com by raf...@gmail.com on 21 Oct 2010 at 7:30

Attachments:

GoogleCodeExporter commented 9 years ago 
also reported in the comments for issue 23.  bumping to high; target 1.2.4.

Original comment by simon.po...@gmail.com on 21 Oct 2010 at 9:29

GoogleCodeExporter commented 9 years ago 
i'm having a little trouble replicating this.  what styles are on the elements 
you've attached the Endpoints to?

Original comment by simon.po...@gmail.com on 21 Oct 2010 at 9:37

GoogleCodeExporter commented 9 years ago 
attached screenshot shows what firebug computes for that element

Original comment by raf...@gmail.com on 22 Oct 2010 at 7:33

Attachments:

GoogleCodeExporter commented 9 years ago 
ok i can replicate this now.  thanks.  watch this space.

Original comment by simon.po...@gmail.com on 25 Oct 2010 at 6:13

GoogleCodeExporter commented 9 years ago 
Thanks

Original comment by raf...@gmail.com on 25 Oct 2010 at 4:28

GoogleCodeExporter commented 9 years ago 
as much as this may seem like a big call, there would appear to be something up 
with jquery's draggable/droppable when an overflow:scroll parent is involved.  

on this page:

http://morrisonpitt.com/jsPlumb/tests/ContainerWithScrollOverflowTest.html

there is a red box that is draggable and a yellow box that is a droppable.  no 
jsPlumb is involved in either of those two elements.  load the page and you can 
drag the red box onto the yellow box.  now you can drag it off and back on to 
your heart's content.

reload the page and grab the red box, then drag it over or down so the parent 
container's scrollbars kick in.  now drag it back to the yellow box...you get 
nothing.

i don't know right now how (or if) this is affecting jsPlumb. i suspect it is 
though.

Original comment by simon.po...@gmail.com on 25 Oct 2010 at 9:24

GoogleCodeExporter commented 9 years ago 
The question is why 1.2.3 RC1 works fine and 1.2.3 doesn't?

Original comment by raf...@gmail.com on 25 Oct 2010 at 9:58

GoogleCodeExporter commented 9 years ago 
I performed your test in Chrome 7 and Firefox 3.6.1 and it actually works for 
me. Even when the container scrolls and I drag it back up and drop it onto the 
yellow box I do get the drop event.

Original comment by raf...@gmail.com on 25 Oct 2010 at 10:02

GoogleCodeExporter commented 9 years ago 
well it certainly fails for me.  on chrome 7 and FF 3.6.10 on ubuntu and 
windows XP.

as for the 1.2.3-RC1 issue - i will need a test page.  i don't know when you 
grabbed a snapshot; if i use 1.2.3-RC1 with the test page it fails in the same 
way as 1.2.4-RC1.

Original comment by simon.po...@gmail.com on 25 Oct 2010 at 10:59

GoogleCodeExporter commented 9 years ago 
I will set it up and post a link tomorrow.

Original comment by raf...@gmail.com on 25 Oct 2010 at 11:13

GoogleCodeExporter commented 9 years ago 
That was simpler than I though:

Link to 1.2.3RC1 (working)
http://www.bdcsoftware.com/testing/index_1.2.3RC1.htm

Link to 1.2.3 (not working)
http://www.bdcsoftware.com/testing/index_1.2.3.htm

In both examples drag and drop a page template into the gray area and drag the 
top endpoint to one of the button endpoints.

Hope this helps.

Original comment by raf...@gmail.com on 25 Oct 2010 at 11:42

GoogleCodeExporter commented 9 years ago 
great, thanks.  that will help a lot.

Original comment by simon.po...@gmail.com on 26 Oct 2010 at 12:03

GoogleCodeExporter commented 9 years ago 
so, that 1.2.3-RC1 version that works...that seems to have changes in it that 
were not made by me.  for instance, the getUIRelativePosition method is new, 
and the call to it from the drag event for endpoints.  can you remember what 
these changes were for?  are there any others?

Original comment by simon.po...@gmail.com on 27 Oct 2010 at 9:28

GoogleCodeExporter commented 9 years ago 
Not my changes. I grabbed the copy of jsPlumb from this page:
http://sandbox.gocomplex.net/plumb/fix/draggableConnectorsDemoFix.htm

which was referenced in this issue:
http://code.google.com/p/jsplumb/issues/detail?id=23

I incorrectly assumed that it was posted by you, where in fact sylvain.gizard 
was the author. Nevertheless, whatever he did, it seems to be working ;-)

His version works quite well other than there is an issue with the detachAll() 
method on endpoints. It disconnects correctly but leaves the canvas for each 
endpoint "orphaned" in the document.

Original comment by raf...@gmail.com on 27 Oct 2010 at 11:38

GoogleCodeExporter commented 9 years ago 
oh i remember that now.  other bits of the code have changed between 1.2.3 and 
1.2.4 so the fix actually doesn't work when applied to 1.2.4.  also i need to 
make sure the fix works for jquery and mootools; those changes were only in 
jquery. i'll keep investigating.

Original comment by simon.po...@gmail.com on 28 Oct 2010 at 4:23

GoogleCodeExporter commented 9 years ago 
Btw, did you notice the endpoints act a bit funky in my demo page when you make 
the container scroll?
In raf1hh the container is already scrolled, no problems so far, but when you 
expand the container like in my demo, the same thing happens.

Original comment by sylvain....@gmail.com on 29 Oct 2010 at 4:05

GoogleCodeExporter commented 9 years ago

Original comment by simon.po...@gmail.com on 31 Oct 2010 at 1:38

GoogleCodeExporter commented 9 years ago

Original comment by simon.po...@gmail.com on 27 Nov 2010 at 8:44

GoogleCodeExporter commented 9 years ago 
it's end of year bug cleanout time.  i am going to close this issue (i refer 
you to comment 6...jQuery itself does not seem to play properly so there's no 
point in trying to address the issue in jsPlumb), unless anyone's got a 
compelling argument that it is actually jsPlumb at fault.

Original comment by simon.po...@gmail.com on 20 Dec 2010 at 9:52

GoogleCodeExporter commented 9 years ago 
Simon, as I said before, your test:

http://morrisonpitt.com/jsPlumb/tests/ContainerWithScrollOverflowTest.html

actually works for me on the following browsers:
Chrome 8.0.552.215
Firefox 3.6.13
IE 8.0.7600

In each browser I can take the red square move it so that the parent scrolls 
and then drop it back on the yellow box and I get the "red square dropped" 
event. I really don't think this is a jQuery issue.

Original comment by raf...@gmail.com on 22 Dec 2010 at 5:21

GoogleCodeExporter commented 9 years ago 
i tried this again on FF. it works the first time; drag it off and out of the 
window and bring it back and then it fails. for me, that is.  on ubuntu.  
chrome fails every time. 

i know pointing the finger at jquery is a massive call and perhaps bordering on 
heresy, so i'm proceeding with caution on that one.  but a combination of the 
fact that overflow:scroll is not entirely necessary (you can get the same 
effect without having specified any overflow value, can't you?), my 
increasingly small amount of spare time, and vague suspicions derived from the 
scroll overflow test page make me reluctant to put much time into this now. 

having said that i do want to be sure that jsPlumb is bulletproof, of course.  
so, er.  what to do.

Original comment by simon.po...@gmail.com on 30 Dec 2010 at 11:54

GoogleCodeExporter commented 9 years ago 
Simon,

yesterday I started trying various version of jsPlumb with my app (1.2.0 - 
1.2.4) and to my surprise everything seems to be working correctly with 1.2.4. 
I don't know exactly why, but it could be some of the  html changes I had to 
implement recently in my app.

Anyhow, please close this bug and thanks for all your help.

Original comment by raf...@gmail.com on 4 Jan 2011 at 6:16

GoogleCodeExporter commented 9 years ago 
thanks for the update - glad to hear it's working for you.

i'll downgrade the priority of this and leave it open.  even though you got 
your UI to work there still seems to be something odd going on.  i'll try to 
find the time to take a look at it at some stage.

Original comment by simon.po...@gmail.com on 9 Jan 2011 at 8:31

GoogleCodeExporter commented 9 years ago 
Simon,

  I am having this same issue in 1.2.6RC1. I will try to narrow down the cause.

--Tim

Original comment by triend...@gmail.com on 12 May 2011 at 2:42

GoogleCodeExporter commented 9 years ago 
can you post what results you get with this page too?

http://morrisonpitt.com/jsPlumb/tests/ContainerWithScrollOverflowTest.html

drag the red box down after page load so that a scrollbar appears, then drop 
it.  then drag it back up and hover over the yellow box.  do you see the yellow 
box respond with the hover class? when you drop it do you get a notification in 
the div on the rhs?

Original comment by simon.po...@gmail.com on 12 May 2011 at 7:01

GoogleCodeExporter commented 9 years ago 
If I cause it to scroll the hover class no longer works and I do not get any 
feedback on the RHS.

Original comment by triend...@gmail.com on 12 May 2011 at 2:26

GoogleCodeExporter commented 9 years ago 
yeah this fails for me, too, every time, if i go through the steps i outlined 
for you.  also, there is a drag callback method that paints two green squares 
on what are supposedly the top left and bottom right corners of the red square 
as it moves around.  as soon as a scrollbar is involved those green squares 
stick to the edge of the container; they only snap back to their correct 
positions when the scrollbar goes away.

there is no jsplumb involved in any of that stuff, and yet there certainly 
seems to be some kind of bug there.

this is what makes me reluctant to spend any time on this issue. in fact, i'm 
putting it back to a status of 'New'.

Original comment by simon.po...@gmail.com on 12 May 2011 at 11:07

GoogleCodeExporter commented 9 years ago 
Looks like this bug http://bugs.jqueryui.com/ticket/6859 which is slated to be 
fixed 1.9

Original comment by triend...@gmail.com on 13 May 2011 at 2:04

GoogleCodeExporter commented 9 years ago 
ah, good find.  yeah that kind of describes the problem perfectly.

Original comment by simon.po...@gmail.com on 13 May 2011 at 2:15

GoogleCodeExporter commented 9 years ago 
One question guys. Why do you include a lot of similar libraries in the header 
of http://morrisonpitt.com/jsPlumb/tests/ContainerWithScrollOverflowTest.html? 
I mean you are including jsPlumb-1.2.4-RC1.js, jsPlumb-defaults-1.2.4-RC1.js, 
jquery.jsPlumb-1.2.4-RC1.js.

Original comment by bakhtiyo...@gmail.com on 15 Jun 2011 at 5:14

GoogleCodeExporter commented 9 years ago 
jsPlumb is broken up into several scripts in development to make things more 
manageable.  when a release goes out we concat all of the scripts together.

http://jsplumb.org/doc/content.html#developingJsPlumb

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

GoogleCodeExporter commented 9 years ago 
this is related to issue 130, which appears to be fixed in dev for 
jquery/webkit.  but other libraries/browsers may not yet be done.

Original comment by simon.po...@gmail.com on 5 Nov 2011 at 12:00

GoogleCodeExporter commented 9 years ago 
test page here:

http://morrisonpitt.com/jsPlumbTest/tests/miscellaneous/scrollOverflowTestJquery
.html

this fix will be in version 1.3.4.

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 2:31

GoogleCodeExporter commented 9 years ago 
1.3.4 was released today.

Original comment by simon.po...@gmail.com on 9 Jan 2012 at 7:01