Creating connections in Firefox: lines are broken.

[GoogleCodeExporter]

Hi,

I noticed that creating connections is buggy in Firefox. I think this is a 
Firefox issue, because it worked well before.

When creating a connection with the mouse, the connection line is sometimes 
(partly) not visible and not a straight line. When releasing the mouse, it is 
fixed.

I can reproduce this:
- on multiple machines
- On firefox 15.01 and 16.01
- on the demopage: http://jsplumb.org/jquery/dynamicAnchorsDemo.html
, http://jsplumb.org/jquery/flowchartConnectorsDemo.html
and http://jsplumb.org/jquery/draggableConnectorsDemo.html

but http://jsplumb.org/jquery/stateMachineDemo.html doesn't have those problems.

Can you reproduce this problem and find the cause? 

- Firefox 15.01 / 16.01
- Windows 7
- SVG renderer

Original issue reported on code.google.com by j.verdur...@2bmore.nl on 12 Oct 2012 at 10:38

Attachments:

• firefox.png

[GoogleCodeExporter]

i can't reproduce this, but then i am on a mac.

are there any errors logged to the console?  

Original comment by simon.po...@gmail.com on 14 Oct 2012 at 2:59

[GoogleCodeExporter]

Nope, no errors or logmessages. I will test from which Firefox version it goes 
wrong. 

Original comment by j.verdur...@2bmore.nl on 15 Oct 2012 at 7:56

[GoogleCodeExporter]

I tested the page with Firefox Portables, and it seems that the problem only 
occurs in Firefox 16 (tested with 16.0 and 16.01). 

I was convinced that it was also a problem under Firefox 15.01, but after 
downgrade the problem is solved.

Maybe I can test on a Mac later this week.

It's by the way strange that I can reproduce this with the blue and green 
connectors at http://jsplumb.org/jquery/draggableConnectorsDemo.html, but not 
with the yellow!

("FirefoxPortable_16.0.1_English.paf.exe", 
http://sourceforge.net/projects/portableapps/files/Mozilla%20Firefox%2C%20Portab
le%20Ed./Mozilla%20Firefox%2C%20Portable%20Edition%2016.0.1/)

Original comment by j.verdur...@2bmore.nl on 15 Oct 2012 at 8:23

[GoogleCodeExporter]

the yellow connectors are straight lines. the blue and green are bezier curves. 
 so i think this is a firefox issue, not jsplumb.  something is up with the way 
they are painting bezier curves in svg.

Original comment by simon.po...@gmail.com on 15 Oct 2012 at 9:29

[GoogleCodeExporter]

Yes, It is a Firefox issue. And it is fine if this is fixed in Firefox 17, but 
I'm not sure if the bug is already in Mozilla's Bugzilla 
(https://bugzilla.mozilla.org). Maybe with more in-depth knowledge it can be 
found/submitted to the Firefox buglist? 

Original comment by j.verdur...@2bmore.nl on 15 Oct 2012 at 9:35

[GoogleCodeExporter]

i'm closing this out.  

Original comment by simon.po...@gmail.com on 16 Oct 2012 at 11:42

• Changed state: Invalid

[GoogleCodeExporter]

Hi,

With Firefox 17 this is still a problem. I would like to submit a bug report to 
Mozilla, but I think that you as jsplumb developer can give more insight to the 
problem. 

I think it is unfortunate if jsplumb isn't working under Firefox anymore. 

So my questions: 

1) did you see the problem? 
2) Can you submit the bug to Mozilla?

ps. The yellow lines (comment 3) are also infected, but it's less visible. 

How to reproduce:
- Firefox 16 of 17 (Windows and Mac are tested)
0) goto: http://jsplumb.org/jquery/draggableConnectorsDemo.html
1) drag the upperleft green pointer horizontal to the right - don't release the 
mouse
2) and than drag vertical to the bottom. 

See attachment for step 1 and 2

Original comment by j.verdur...@2bmore.nl on 27 Nov 2012 at 8:45

Attachments:

• [jsplumb problem.png](https://storage.googleapis.com/google-code-attachments/jsplumb/issue-283/comment-7/jsplumb problem.png)

[GoogleCodeExporter]

Hi,

I tested the case with Firefox / Mac OSX, and the issue is also there. 

It's important to mention that the issue is visible while dragging. 

Also, I saw other (js)libaries with uses SVG and drag-and-drop, and the issue 
is not there. So maybe is a change in Firefox, which is not a bug but results 
in bugs in JSplumb.

In summary, the issue can be reproduced with the following conditions
- SVG renderer
- Firefox 17  with Mac OSX 
- Firefox 17 with Windows 7 x64 

Please, try to reproduce the problem at your PC/mac.

Original comment by j.verdur...@2bmore.nl on 13 Dec 2012 at 10:12

[GoogleCodeExporter]

what other libraries have you tested?  do you have examples?

Original comment by simon.po...@gmail.com on 13 Dec 2012 at 10:23

[GoogleCodeExporter]

I tested 
http://neyric.github.com/wireit/docs/layer/layer-example.html
which uses SVG. Yes, this library has other issues ;)

But it seems that SVG and dragging (in Firefox 17) should work. I also cannot 
find any reported SVG issues at Mozilla which covers this issue. 

Did you succeed with reproducing the issue? 

Original comment by j.verdur...@2bmore.nl on 13 Dec 2012 at 1:49

[GoogleCodeExporter]

i can replicate this, yes. but i don't see any obvious reason for why it does 
not work.

you said you'd seen other librarieS with svg drag and drop - plural.  can you 
provide me with any more links?

Original comment by simon.po...@gmail.com on 13 Dec 2012 at 10:09

• Changed state: New

[GoogleCodeExporter]

I checked two libaries. The other is SVG-edit:
http://www.clker.com/inc/svgedit/svg-editor.html
(https://code.google.com/p/svg-edit/ )

(pretty cool tool, especially the multi drag)

Original comment by j.verdur...@2bmore.nl on 14 Dec 2012 at 2:33

[GoogleCodeExporter]

i've fixed this. i just had to swap the order of operations when repainting: 
change the path first, then move the svg element, rather than the other way 
round.

i will release 1.4.0 quite soon i think, because this is kind of a showstopper 
bug really.

Original comment by simon.po...@gmail.com on 16 Dec 2012 at 8:30

• Changed state: Fixed
• Added labels: 1.4.0

[GoogleCodeExporter]

Great news!

Original comment by j.verdur...@2bmore.nl on 17 Dec 2012 at 10:31

[GoogleCodeExporter]

Issue 308 has been merged into this issue.

Original comment by simon.po...@gmail.com on 8 Jan 2013 at 7:17