The from and to position is hard coded. Can we make the shapes collaboratively figure out these parameters?
This time, Rect saved its center to its datum. The Line can figure out x1, y1, x2, y2 by querying its from and to node datum.
Copied the code from https://dev.to/taowen/make-react-svg-component-draggable-2kc . We can see, the line is not following the rectangles. Let's fix it.
We added a custom event called
moved. When Rect being dragged, the
moved event will be handled by both Rect itself and the connected lines. D3 require multiple listener to be registered in its own namespace, so the event name has different suffix.
Circle is easier than Rect, as cx and cy is its center. However, due to we have two lines now, the event namespace need to be unique, so
assignId is introduced.
We can see the line disappeared, because the connected rect is not drawn yet. We need to fix this.
Introduced another custom event 'nodeAdded'. If the line can not find the node, it will monitor the nodeAdded event to find out if the collaborators all ready.