Marker-end arrow cannot be shown for URL with query parameter

[niyue]

Try this "http://knsv.github.io/mermaid/?q=test". The marker-end arrows in the page will not be shown for my Chrome 45, and the cause is the additional query parameter at the end of the URL, and in my case, I use mermaid in a web page having query parameter in the URL too.

This issue was found when discussing #181, but it is a separated issue with #181 so I moved it here.

[niyue]

I tried to fix this issue by modifying the following code:

// Fix for when the base tag is used
var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+ window.location.protocol+'//'+location.host+location.pathname +'#arrowhead','g');

And modify it by appending location.search:

// Fix for when the base tag is used
var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+ window.location.protocol+'//'+location.host+location.pathname+location.search +'#arrowhead','g');

It did work for most cases, however, after some testing, I found it does not work if the query parameter has parenthesis in it, at least for Chrome 45 under OS X. For example, "http://knsv.github.io/mermaid/?q=(test)", you cannot make it to work even modifying the SVG path marker-end attribute to this value with the arrow id anchor. It seems the CSS URI syntax does not like parenthesis in it (because url(...) itself has a pair of parenthesis?). Anyway I don't know the correct way to make it to work, even after applying percent encoding to the parenthesis in URL.

I have to remove the code to append the protocol/host/path/search to make it work for every case (of course except the base tag case that I don't use) like below:

var svgCode = d3.select('#d'+id).node().innerHTML;

Not sure what the best solution could be yet.

[knsv]

I found that escaping them with a backslash works as in the code below:

    var url =  window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
    url = url.replace(/\(/g,'\\(');
    url = url.replace(/\)/g,'\\)');

Will add this to next version. Thanks for digging a bit on your end!

[faraoz]

When cookieless forms are used, replacing the url makes the arrowhead not to show since when the url contains the session with parentheses, they are replaced with slashes making the url reference impossible to be found.
To make it work, you have to comment them:
//url = url.replace(/(/g,'(');
//url = url.replace(/)/g,')');

[knsv]

Ok. It seems this needs to have som configuration then to turn on or off absolute url in the references.

I was trying to avoid this but as this is causing trouble it is required.

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Sunday 15 November 2015 at 02:34, faraoz wrote:

When cookieless forms are used, replacing the url makes the arrowhead not to show since when the url contains the session with parentheses, they are replaced with slashes making the url reference impossible to be found.
To make it work, you have to eliminate them.

—
Reply to this email directly or view it on GitHub (#225 (comment)).

[knsv]

Closing issue as it's resolution with a configuration param was included in release 0.5.6. Let me know if you do not agree.

[hatemjaafar]

Hello,

What is the parms that was included and how to add it?

[hatemjaafar]

Hello,

What is the params that was included and how to add it?

i have trouble with marker-end when url is spécified.

thanks