search

Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Enhancement to Custom SVG #81

Closed troy191990 closed 3 years ago

troy191990 commented 3 years ago

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] I love the feature that was added where I can customize my arrow head/tail with a custom SVG, however I am very limited in my knowledge/ability of creating complex SVG files in code.

I have a graphics designer who creates them for me, however I am unable to use them with xarrows.

Id love the ability to pass in a "ready-made" svg as a custom one. Rather than having to create it using typescript properties.

Eliav2 commented 3 years ago

accepted. added to the dev branch and will be published with v2.

troy191990 commented 3 years ago

I see your change in v2, which allows for svg elements. Is that change in reference to this item? If so, I have tried to use the feature, however am unable to get the desired results. Am I using this correctly? https://qx7pj.csb.app/

I have commented out the custom "headShape" property. I have also attached the svg image.

Eliav2 commented 3 years ago

you have to adjust the SVG shape. the docs state: "in case you pass a custom svg element: currently you have to adjust the path to start from 0,0 and to be at size box 1x1 in order to make the custom shape look like the default shapes in size". your SVG shape is much bigger.

an automatic adjustment is available in a not yet released pro version of react-xarrows.

troy191990 commented 3 years ago

Please can you provide a codesandbox or example of doing this, I read the documentation and have tried to do as instructed, but am hitting a wall.

Eliav2 commented 3 years ago

I will support you with your case for a donation

troy191990 commented 3 years ago

Sure. Il make a donation now.