Stepped Lines

[cole-robertson]

There is a use case I have where I would like the lines drawn stepped.
Currently:

I would like it to be like:

I currently have:

const CONTAINER_STYLE = {
  arrowLength: 0,
  noCurves: true,
  offset: 0,
  strokeColor: "#50616f",
};

and:

const ANCHOR_SETTINGS: IAnchorPositions = {
  sourceAnchor: "bottom",
  targetAnchor: "left",
};

Is there anything I can do currently to achieve my desired result? Thank you!

[pierpo]

Hey 😊

Unfortunately it is not possible right now, but I'd love to have the option to customize the paths more.
No ETA yet because it might be quite complex!

To quickly solve your issue, you could fork the project (or use patch-package) and edit the following :

react-archer/src/SvgArrow.js

Line 157 in f1c316f

return (

You'll be able to do a custom path that fits your needs by changing these lines 😉

[sumdook]

Hey @pierpo, is here any way to achieve this yet?

[pierpo]

Hey! Well, I'd suggest to:

• either fork the lib, and find a solution to change the paths for your specific use case
• find some dirty work-arounds... maybe by creating fake archer elements, creating some straight lines to them (arrow with no pointer), and do the 90° turn this way. This is super super dirty, you'd have to handle the positions manually yourself, which may not be always possible. But it requires no action on the lib's side to work.

Having it as required in the core of the lib is, as I said previously, not an obvious solution 😢
I have no estimation for it, maybe it's not that hard 🤷 It'd require some thinking.

[sumdook]

Thanks, appreciate the response!