Arrow disappear on straight flowchart connectors

[chrisw...@googlemail.com]

I am using the latest version of JSPlumb and have taken all my code so far from your Flowchart demo whilst I see if it will work for me. If you edit your css slightly so that it is possible to drag and drop the 4 'window' elements directly above or to the side of each other by having the same left or top position, then drag the elements so that they line up, the arrow disappears. It only reappears again once you move an element to the side. I am trying to use JS Plumb to display flow charts but if the arrow head is only visible when elements do not line up, the users will not be impressed. I did notice a bug report like this a while ago but it said it had been fixed, however I am using 1.4.1.

 

Am I doing something wrong or is this a bug?

[Oliver Kopp]

Hi,

I've got a similar issue and prepared a minimum example at: http://jsfiddle.net/koppor/Pxrut/ (does not work in chrome because of mime type sent by github).

Drag the connector from node1 to node2. You'll notice that the arrowhead points to the wrong side. If one changes position of node1 and node2, the arrow head also points to the wrong side.

Cheers,

Oliver

[Simon Porritt]

Could you put this in a jsfiddle?  it sounds like a bug.

[Simon Porritt]

i raised an issue for this:

https://github.com/sporritt/jsPlumb/issues/51

[chrisw...@googlemail.com]

On Wednesday, 22 May 2013 14:01:56 UTC+1, chrisw...@googlemail.com wrote:

I am using the latest version of JSPlumb and have taken all my code so far from your Flowchart demo whilst I see if it will work for me. If you edit your css slightly so that it is possible to drag and drop the 4 'window' elements directly above or to the side of each other by having the same left or top position, then drag the elements so that they line up, the arrow disappears. It only reappears again once you move an element to the side. I am trying to use JS Plumb to display flow charts but if the arrow head is only visible when elements do not line up, the users will not be impressed. I did notice a bug report like this a while ago but it said it had been fixed, however I am using 1.4.1.

 

Am I doing something wrong or is this a bug?

 

I have created a jsFiddle at http://jsfiddle.net/T9HR4/2/

 

However this is working fine and led me to look further into the html which was being written,

 

In the jsfiddle site it is being written in SVG as I would expect (my browser is IE 10). However in my development environment (which also is IE 10) I still get a missing arrow with identical code to the jsfiddle page but when I look in the source, the flow chart is being written with <shape> elements and no svg in sight.

 

What I did not mention before since I did not think it was relevant was that the flow chart page I am building is actually hosted in a SharePoint application page. So it seems that something that SharePoint is adding to the page is causing the JSPlumb code to not use svg. You state in the documentation that it determines this based on the browser version, but the browser is IE 10. Is there another criteria which the code uses to make this decision which might help me track down what is going on?

 

Thanks,

 

[Simon Porritt]

It would appear that jsPlumb thinks VML is available in the page. Or rather, that SVG is not. Or maybe both, or, like, something.

The functions it uses to determine the capabilities are here:

https://github.com/sporritt/jsPlumb/blob/master/src/jsPlumb-dom-adapter.js#L21

maybe you could try running them in the console on that page and see what happens...

[Simon Porritt]

btw that fiddle works because the arrow overlay is at location 0.9.  the bug is when the arrow is at location 1, like in this update:

http://jsfiddle.net/T9HR4/4/