Label not at correct position while using right-angle links

[agarwalishan]

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?

[agarwalishan]

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

[AshishAvesta]

@agarwalishan @dylanvorster Any updates on this?

[maxtsh]

any updates?

[ntquang22298]

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

[Bartel-C8]

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

[rzfzr]

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

[ladislas14]

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

[rzfzr]

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

[ladislas14]

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 :)

[kosbog]

Any new updates?

[rzfzr]

@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