Fixed line drawing positions

src/t2-design/components/Line.js

@@ -5,7 +5,7 @@ const Line = (props) => {
     if (props.fromNode && props.toNode) {
         return (
             <path
-                d={pathDimensions(...calculateAnchorPoints(props.fromNode, props.toNode))}
+                d={pathDimensions(...calculateAnchorPoints(props.canvasNode, props.fromNode, props.toNode))}
                 style={{stroke: 'black', strokeWidth: '3px', fill: 'none' }} />
         )
     } else {
@@ -15,9 +15,20 @@ const Line = (props) => {
 
 const pathDimensions = (x1, y1, x2, y2) => `M${x1},${y1} L${x2},${y2}`;
 
-const calculateAnchorPoints = (from, to) => {
-    let fromRect = from.getBoundingClientRect();
-    let toRect = to.getBoundingClientRect();
+const getBounds = (parent, elem) => {
+    let parentRect = parent.getBoundingClientRect();
+    let elemRect = elem.getBoundingClientRect();
+    return {
+        x: elemRect.x - parentRect.x,
+        y: elemRect.y - parentRect.y,
+        width: elemRect.width,
+        height: elemRect.height,
+    };
+}
+
+const calculateAnchorPoints = (parent, from, to) => {
+    let fromRect = getBounds(parent, from);
+    let toRect = getBounds(parent, to);
     return [fromRect.x + fromRect.width / 2.0, fromRect.y + fromRect.height / 2.0, toRect.x + toRect.width / 2.0, toRect.y + toRect.height / 2.0];
 }
 

src/t2-design/components/Topology.js

@@ -21,6 +21,7 @@ class Topology extends React.Component {
         super(props);
         this.state = {
             selectedItemId: null,
+            topoDOMRef: null,
             nodeDOMRefs: {},
         };
     }
@@ -46,13 +47,16 @@ class Topology extends React.Component {
     }
 
     createEdgeElement = (id, edge) => {
-        return (<Line key={id} id={id} {...edge} fromNode={this.state.nodeDOMRefs[edge.from]} toNode={this.state.nodeDOMRefs[edge.to]} />);
+        return (<Line key={id} id={id} {...edge} canvasNode={this.state.topoDOMRef} fromNode={this.state.nodeDOMRefs[edge.from]} toNode={this.state.nodeDOMRefs[edge.to]} />);
     }
 
     onDOMRef = (item, node) => {
         if (node != null) {
             elementResizeEvent(node, this.onResize);
         }
+        this.setState({
+            topoDOMRef: node
+        });
     }
 
     onItemDOMRef= (item, node) => {