startBox / endBox props as start / end alternative

I want to render arrows inside the css-scaled (transform:scale(..)) parent.

If scale != 1 - arrows are rendered incorrectly.

Would be great if arrow will have extra optional scale prop (=1 by default) so it will divide all anchors x/y/width/height by this prop value before doing main calculations to compensate applied scaling

I don’t use it, (I use native scrolling) but it’s also common practice to use transform: translate** to implement pan, or just use transform:matrix to scale/translate at once.

So arrow would have also ‘translateX’ / ‘translateY’ props to substract from original values I am not familiar with code, but I don’t think it would be a great change, because all calculations will remain same, they will only be based on pre-scaled / pre-translated sizes and positions instead of original values got from html elements.

To make things consistent with css maybe it makes sense to accept scaleX scaleY also separately for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()

[YuriGor]

Hi @Eliav2 here is a demo for scaling issue + workaround https://codesandbox.io/s/xarrow-scaling-68-ik5gy?file=/src/Board.js so what I suggest, to allow not only passing refs/id like this:

<Xarrow
  start='id1'
  end={ref2}
/>

but also source target geometry directly like this:

<Xarrow
  start={{top:0, left:0,width:100,height:100}}
  end={{top:50, left:50,width:100,height:100}}
/>

In this case arrow will not care about related elements - I will. Instead it will be just rendered as client code needs, in a passive mode.

And these issues with scaling/translation - it will be up to user code to provide these start/end boxes with correct position/size values, xarrow will also not care about scaling/translation - it will do one job but do it well and fast - render cool arrows when and where we need them.

[YuriGor]

Hi, I implemented my own SVG arrow react component which i render using nodes coordinates stored in db, but not trying to calculate them from source to target on the fly. And i scale parent element with already rendered nodes and arrows inside this way there is no distortion. You can see how its working on planzed.org but I cannot share the code.