Fix touches for topology

ui/src/components/topology/graph-node.js

@@ -86,11 +86,7 @@ const GraphNode = ({
   };
 
   return (
-    <g
+    <g transform={`translate(${data.x}, ${data.y})`}>
-      transform={`translate(${data.x}, ${data.y})`}
-      onMouseDown={onStart}
-      onTouchStart={onStart}
-    >
       <StyledShadowRect
         x={-halfWidth}
         y={3-halfHeight}
@@ -102,6 +98,8 @@ const GraphNode = ({
         y={-halfHeight}
         width={width}
         height={height}
+        onMouseDown={onStart}
+        onTouchStart={onStart}
       />
       <StyledLine
         x1={-halfWidth}

ui/src/components/topology/topology-graph.js

@@ -148,20 +148,37 @@ class TopologyGraph extends React.Component {
       // it's this node's position that we'll need to update
       dragInfo.dragging = true;
       dragInfo.nodeId = nodeId;
+      if(evt.changedTouches) {
+        dragInfo.position = {
+          x: evt.changedTouches[0].pageX,
+          y: evt.changedTouches[0].pageY
+        };
+      }
+      else {
         dragInfo.position = {
           x: evt.clientX,
           y: evt.clientY
         };
+      }
     };
 
     const onDragMove = (evt) => {
 
       if(dragInfo.dragging) {
 
-        const offset = {
+        let offset = {};
+        if(evt.changedTouches) {
+          offset = {
+            x: evt.changedTouches[0].pageX - dragInfo.position.x,
+            y: evt.changedTouches[0].pageY - dragInfo.position.y
+          };
+        }
+        else {
+          offset = {
             x: evt.clientX - dragInfo.position.x,
             y: evt.clientY - dragInfo.position.y
           };
+        }
 
         const dragNodes = simulationNodes.map((simNode, index) => {
           if(simNode.id === dragInfo.nodeId) {
@@ -180,11 +197,19 @@ class TopologyGraph extends React.Component {
           nodes: dragNodes
         });
 
+        if(evt.changedTouches) {
+          dragInfo.position = {
+            x: evt.changedTouches[0].pageX,
+            y: evt.changedTouches[0].pageY
+          };
+        }
+        else {
           dragInfo.position = {
             x: evt.clientX,
             y: evt.clientY
           };
         }
+      }
     };
 
     const onDragEnd = (evt) => {