We recently started using this library and we are building a wrapper library around it that gives to the user something similar to figjam where the user can drag and drop from a side dock bar the elements needed.
So far no problem until we started using the DefaultLinkWidget in order to do our custom widget for the links.
In order to do so we based our example code on the second demo link we found in this repo.
We could isolate the problem to the DefaultLinkSegmentWidget since if we hack the paths in order to render only the head of the arrow we don't have any problem with that, example down here
One more piece of information that we discovered adding the key property to the return in the factory is that react re-renders these components in loop to then complaining due the presence in the DOM of another element of the same id, so this means that we are rendering the lines no-stop.
This has been noticed also before since we tried to use a shouldComponentUpdate to stop this never ending loop but we realised that we were never hitting this method but only the render because this component was always a new one.
My suspect is that this is due to the React.cloneElement used in the DefaultLinkSegmentWidget in order to generate the Top and Bottom, my main question is then why this works in the demo given and we are having this weird behaviour since I don't see that much difference in what we are doing and what done in the demo?
We recently started using this library and we are building a wrapper library around it that gives to the user something similar to figjam where the user can drag and drop from a side dock bar the elements needed.
So far no problem until we started using the DefaultLinkWidget in order to do our custom widget for the links. In order to do so we based our example code on the second demo link we found in this repo.
Here the widget code
and here the factory
Few notes on the issue.
We could isolate the problem to the DefaultLinkSegmentWidget since if we hack the paths in order to render only the head of the arrow we don't have any problem with that, example down here
instead of this
if we render this it works but it only render the head of the arrow, so we now know that the problem is in the line segment.
One more piece of information that we discovered adding the key property to the return in the factory is that react re-renders these components in loop to then complaining due the presence in the DOM of another element of the same id, so this means that we are rendering the lines no-stop. This has been noticed also before since we tried to use a shouldComponentUpdate to stop this never ending loop but we realised that we were never hitting this method but only the render because this component was always a new one.
My suspect is that this is due to the React.cloneElement used in the DefaultLinkSegmentWidget in order to generate the Top and Bottom, my main question is then why this works in the demo given and we are having this weird behaviour since I don't see that much difference in what we are doing and what done in the demo?
Many thanks for any help given.