react-diagrams icon indicating copy to clipboard operation
react-diagrams copied to clipboard

Published 20 hours ago • verified publisher icon projectstorm

Label not at correct position while using right-angle links

Open agarwalishan opened this issue 5 years ago • 13 comments

When I am using DefaultLinkModel labels appear at correct positions as in the demo but when I am using RightAnglelinkModel labels are getting positioned to top corner probably (0,0) of the canvas. In the below pic labels for both the links appear at same coordinate (they are overlapping). Can someone please tell what could be the reason?

image

agarwalishan avatar Sep 18 '20 09:09 agarwalishan

@dylanvorster Any updates on this? Could you please fix it I have to use label on right angle links only.

agarwalishan avatar Sep 29 '20 05:09 agarwalishan

@agarwalishan @dylanvorster Any updates on this?

AshishAvesta avatar Jan 06 '21 09:01 AshishAvesta

any updates?

maxtsh avatar Feb 21 '21 07:02 maxtsh

any updates on this? @dylanvorster or where can i custom it?

ntquang22298 avatar Mar 09 '21 07:03 ntquang22298

Maybe same solution applies as described here? https://github.com/projectstorm/react-diagrams/issues/223#issuecomment-544273491

Bartel-C8 avatar Apr 23 '21 09:04 Bartel-C8

I'm also having issues, not solved by #223 image

rzfzr avatar Sep 10 '21 00:09 rzfzr

I still have the same issue. Does anyone have a solution ? @dylanvorster

ladislas14 avatar Apr 25 '22 12:04 ladislas14

I have not fully solved this, and switched away from using labels, but here is my findings:

  1. Zoom level messes up with label position for me
  2. Size for the diagram elements does also, I was having some other issue where one of the sides of the diagram did some auto routing as if it was on a edge, and the other side didn't, I fixed this by making the diagram span the whole page while showing only a viewport

Messy code as reference, https://github.com/rzfzr/mdd4/blob/main/src/pages/Editor.tsx

rzfzr avatar Apr 25 '22 14:04 rzfzr

I finally manage to find what is going wrong.

It comes from this function

https://github.com/projectstorm/react-diagrams/blob/3060496db0709c37202bca948031cd02ebcc73a7/packages/react-diagrams-core/src/entities/label/LabelWidget.tsx#L40-L64

which is used to determine the labelPosition. However, to calculate the position, it needs the renderedPaths, which is never set in RightAngleWidget due to this line:

https://github.com/projectstorm/react-diagrams/blob/3060496db0709c37202bca948031cd02ebcc73a7/packages/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx#L289

Changing this line to

this.refPaths = paths.map(path => path.props.forwardRef)

solve the issue, but I'm pretty sure that it is not the best way to do it.

Maybe @dylanvorster will have an opinion :)

ladislas14 avatar Apr 25 '22 16:04 ladislas14

Any new updates?

kosbog avatar Jul 11 '22 09:07 kosbog

@ladislas14's solution did not work for me... I'm also noticing that the label does not move when I move the link..., only the diagram

rzfzr avatar Sep 08 '22 22:09 rzfzr