Handle case where new drag starts while existing lasso is not finished (#1864)

* handle case where new drag starts while existing lasso is not finished

* flip variable

client/src/components/graph/setupLasso.js

@@ -10,6 +10,7 @@ const Lasso = () => {
     let lassoPolygon;
     let lassoPath;
     let closePath;
+    let lassoInProgress;
 
     const polygonToPath = (polygon) =>
       `M${polygon.map((d) => d.join(",")).join("L")}`;
@@ -25,8 +26,18 @@ const Lasso = () => {
       lassoPolygon = [d3.mouse(svg.node())]; // current x y of mouse within element
 
       if (lassoPath) {
+        // If the existing path is in progress
+        if (lassoInProgress) {
+          // cancel the existing lasso
+          handleCancel();
+          // Don't continue with current drag start
+          return;
+        }
+
         lassoPath.remove();
       }
+      // We're starting a new drag
+      lassoInProgress = true;
 
       lassoPath = g
         .append("path")
@@ -67,25 +78,33 @@ const Lasso = () => {
       }
     };
 
+    const handleCancel = () => {
+      lassoPath.remove();
+      closePath = closePath?.remove();
+      lassoPath = null;
+      lassoPolygon = null;
+      closePath = null;
+      dispatch.call("cancel");
+    };
+
     const handleDragEnd = () => {
       // remove the close path
       closePath.remove();
       closePath = null;
 
-      // succesfully closed
+      // successfully closed
       if (
         distance(lassoPolygon[0], lassoPolygon[lassoPolygon.length - 1]) <
         closeDistance
       ) {
+        lassoInProgress = false;
+
         lassoPath.attr("d", `${polygonToPath(lassoPolygon)}Z`);
         dispatch.call("end", lasso, lassoPolygon);
 
         // otherwise cancel
       } else {
-        lassoPath.remove();
+        handleCancel();
-        lassoPath = null;
-        lassoPolygon = null;
-        dispatch.call("cancel");
       }
     };