ensuring node can only be dragged within constraints

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

@@ -5,6 +5,7 @@ import Constants from './constants';
 import GraphNode from './graph-node';
 import GraphLink from './graph-link';
 import React from 'react';
+import { triggerMouseEvent } from '../../shared/functions';
 
 const StyledSvg = styled.svg`
   width: 100%;
@@ -102,6 +103,28 @@ class TopologyGraph extends React.Component {
     }
   }
 
+  isWithinSVGBounds(target, x, y) {
+    const svgBounds = document
+      .getElementsByClassName('topology-svg')[0]
+      .getBoundingClientRect();
+
+    const nodeHeight = target.getBoundingClientRect().height;
+    const nodeWidth = target.getBoundingClientRect().width;
+
+    const constraints = {
+      top: svgBounds.top + (nodeHeight / 2),
+      left: svgBounds.left + (nodeWidth / 2),
+      bottom: svgBounds.bottom - (nodeHeight / 2),
+      right: svgBounds.right - (nodeWidth / 2)
+    };
+
+    if ( x > constraints.right || x < constraints.left ) return false;
+
+    if ( y < constraints.top || y > constraints.bottom ) return false;
+
+    return true;
+  }
+
   render() {
 
     const {
@@ -123,6 +146,7 @@ class TopologyGraph extends React.Component {
         x: svgSize.width - Constants.nodeSize.width,
         y: 0
       } : simNode(service.uuid);
+
       return ({
         ...service,
         ...sNode
@@ -143,40 +167,38 @@ 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) {
+
+      const x = evt.changedTouches ? evt.changedTouches[0].pageX : evt.clientX;
+      const y = evt.changedTouches ? evt.changedTouches[0].pageY : evt.clientY;
+
       dragInfo.position = {
-          x: evt.changedTouches[0].pageX,
+        x,
-          y: evt.changedTouches[0].pageY
+        y
       };
-      }
-      else {
-        dragInfo.position = {
-          x: evt.clientX,
-          y: evt.clientY
-        };
-      }
     };
 
     const onDragMove = (evt) => {
 
-      if(dragInfo.dragging) {
+      if ( dragInfo.dragging ) {
 
-        let offset = {};
+        const x = evt.changedTouches
-        if(evt.changedTouches) {
+          ? evt.changedTouches[0].pageX
-          offset = {
+          : evt.clientX;
-            x: evt.changedTouches[0].pageX - dragInfo.position.x,
+        const y = evt.changedTouches
-            y: evt.changedTouches[0].pageY - dragInfo.position.y
+          ? evt.changedTouches[0].pageY
-          };
+          : evt.clientY;
+
+        if ( !this.isWithinSVGBounds(evt.target, x, y) ) {
+          triggerMouseEvent(evt.target, 'mouseup');
         }
-        else {
+
-          offset = {
+        const offset = {
-            x: evt.clientX - dragInfo.position.x,
+          x: x - dragInfo.position.x,
-            y: evt.clientY - dragInfo.position.y
+          y: y - dragInfo.position.y
         };
-        }
 
         const dragNodes = nodes.map((simNode, index) => {
-          if(simNode.id === dragInfo.nodeId) {
+          if ( simNode.id === dragInfo.nodeId ) {
             return ({
               ...simNode,
               x: simNode.x + offset.x,
@@ -192,26 +214,18 @@ class TopologyGraph extends React.Component {
           nodes: dragNodes
         });
 
-        if(evt.changedTouches) {
         dragInfo.position = {
-            x: evt.changedTouches[0].pageX,
+          x,
-            y: evt.changedTouches[0].pageY
+          y
         };
       }
-        else {
-          dragInfo.position = {
-            x: evt.clientX,
-            y: evt.clientY
-          };
-        }
-      }
     };
 
     const onDragEnd = (evt) => {
       dragInfo = {
         dragging: false,
         nodeId: null,
-        position: null
+        position: {}
       };
     };
 
@@ -241,6 +255,7 @@ class TopologyGraph extends React.Component {
         onMouseUp={onDragEnd}
         onTouchEnd={onDragEnd}
         onTouchCancel={onDragEnd}
+        className='topology-svg'
       >
         <g>
           {renderedNodes}

ui/src/shared/functions.js

@@ -51,6 +51,12 @@ const isAnd = (...names) =>
     ? css(...args)
     : css``;
 
+const triggerMouseEvent = (trg, ev) => {
+  const clickEvent = document.createEvent('MouseEvents');
+  clickEvent.initEvent(ev, true, true);
+  trg.dispatchEvent(clickEvent);
+};
+
 export {
   unitcalc,
   remcalc,
@@ -58,5 +64,6 @@ export {
   rndId,
   is,
   isNot,
-  isAnd
+  isAnd,
+  triggerMouseEvent
 };