Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

startBox / endBox props as start / end alternative

See original GitHub issue

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:

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

YuriGorcommented, May 3, 2021

Hi @Eliav2 here is a demo for scaling issue + workaround so what I suggest, to allow not only passing refs/id like this:


but also source target geometry directly like this:

  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.

YuriGorcommented, Jul 12, 2021

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 but I cannot share the code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

connect: Connect boxes with an arrow in gforge/Gmisc: Descriptive ...
Arguments ; start. The start box ; end. The end box ; type. How the boxes are stacked. The L alternative generates a...
Read more >
Connect boxes with an arrow -
The start box. end. The end box. type. How the boxes are stacked. The L alternative generates a straight line up/down and then...
Read more >
The grid package - AWS
Grid graphics provides an alternative to the standard R graphics. The user is able to define arbitrary rectangular regions (called viewports) on the ......
Read more >
Gmisc/connect.Rd at master - GitHub
An R package for creating tables, some plots and other useful utilities too small to merit their own package - Gmisc/connect.Rd at master...
Read more >
frontside/ink NPM
To get started with Ink quickly, use create-ink-app to quickly scaffold a new ... to `truncate-end` <Box textWrap="truncate">Hello World</Box> //=> 'Hello…
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found