Sometimes the arrowheads do not display

[dcwills]

I'm finding that arrowheads do not always display. the line is there, it just stops short. is this a known issue?

[pierpo]

Hi!

Well, it might be related to this #24
But I am not sure.

I would really appreciate if you could provide a piece of code to reliably reproduce it 😊

[dcwills]

I figured out the problem. It appears that things go awry by certain characters (space, unicode) in the id string, such as:

                                        <ArcherElement
                                            id="hello world"
                                        >

I tried to fix my code by switching to targetId: encodeURI("hello world"), but surprisingly enough, that didn't work.

[dcwills]

This fixes the problem in my code:

return encodeURI(str).replace(/%/g,'_');

[mrsauravsahu]

Experiencing the same issue, even the examples do not render arrowheads.
However, can't reproduce the error in v1.1.2.
Tried checking the diff but couldn't notice anything obvious.

[pierpo]

It's weird that it happens on the examples... 🤔
What browser do you use?

[mrsauravsahu]

Usually firefox, but tried on both Firefox and Chrome.

[ronandowlingcullen]

I had the same issue when using brackets "(" in my id, try removing/replacing the brackets (or other special characters). Slashes seem to work for me.

[pierpo]

I guess we should add an encoding in the id's then.

I guess I could add return encodeURI(str).replace(/%/g,'_'); as suggested above but it doesn't feel completely robust (because 'abc%123' would become 'abc_123'... which is not really obvious for the end user).
One way that I see could be to do this, but it feels kinda hacky: return encodeURI(str).replace(/_/g,'__').replace(/%/g,'_');

[chandrakantap]

I also facing a similar issue, when using with react-router and the URL has the special character '. This rendering the arrow svg with marker-end prop as below:
<g> <path d="M40,46.5 C55,46.5 55,46.5 70,46.5" marker-end="url(http://localhost:3000/flowchart-study'#arrow6374280400351586lpicon_daa3da12-e27d-40d0-b029-e4192a346590daa3da12-e27d-40d0-b029-e4192a346590)" style="fill: none; stroke: blue; stroke-width: 2;"> </path> </g>

And arrow heads are not showing.

encoding the targetId does not encode the url part.

[katrinamsnyder]

Did one of the releases fix this issue? I also have a URL that has special characters in it, and can't find a way to control that part. I'm currently at version 3.0.0

[pierpo]

Hey!

I have looked into it. I think I will remove the hack that was made to fix the arrow markers on Safari. I don't see it anymore on recent versions of Safari, and removing this hack would solve your issue.

(the hack being to have the whole url instead of only the path without the domain)