From b66ec19b91915d409517d12c5b1ef321dba5e2a6 Mon Sep 17 00:00:00 2001
From: Will Ernst <will.ernst15@gmail.com>
Date: Thu, 12 Aug 2021 10:05:57 -0700
Subject: [PATCH] use : as suggested edge delimiter, fix issue with suggested
 edge double click handler

---
 src/flow-graph.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/flow-graph.tsx b/src/flow-graph.tsx
index 5822d60..cd059c5 100644
--- a/src/flow-graph.tsx
+++ b/src/flow-graph.tsx
@@ -699,9 +699,6 @@ export default function FlowGraph({ prograph }: { prograph: ProGraph }) {
         ...props,
         onDoubleClick: (conn) => {
           prograph.addEdge(conn);
-          setSuggestedEdges((prev) =>
-            prev.filter((e) => e.id !== suggestedEdgeId(conn)),
-          );
         },
       });
     },
@@ -852,11 +849,11 @@ export default function FlowGraph({ prograph }: { prograph: ProGraph }) {
 
   const parseSuggestionInput = useCallback(
     (input: string): [Edge, string] => {
-      const [handleA, handleB] = input.split("-");
+      const [handleA, handleB] = input.split(":");
       if (!handleA || !handleB)
         return [
           undefined,
-          "Input must be of format <number>-<number> (eg. 6-18)",
+          "Input must be of format <number>:<number> (eg. 6:18)",
         ];
       const idA = Number(handleA);
       const idB = Number(handleB);
@@ -1015,7 +1012,12 @@ export default function FlowGraph({ prograph }: { prograph: ProGraph }) {
               onDragOver={onDragOver}
               onEdgeUpdate={onEdgeUpdate}
               onSelectionChange={(elements) => {
-                setSelectedElements(elements || []);
+                const els = elements || [];
+                const isSuggestedEdge = (el: FlowElement) =>
+                  isEdge(el) && el.type === "suggested";
+                // Selecting a suggested edge (occurs on click) should not trigger a change to selection
+                if (els.length && els.every(isSuggestedEdge)) return;
+                setSelectedElements(els.filter((el) => !isSuggestedEdge(el)));
               }}
               onNodeContextMenu={(event, node) => {
                 // @ts-ignore
@@ -1042,10 +1044,7 @@ export default function FlowGraph({ prograph }: { prograph: ProGraph }) {
               onEdgeContextMenu={(event, edge) => {
                 event.preventDefault();
 
-                if (edge.type === "suggested") {
-                  onConnect(edge);
-                  return;
-                }
+                if (edge.type === "suggested") return;
 
                 const menu = (
                   <Menu>
@@ -1227,7 +1226,7 @@ export default function FlowGraph({ prograph }: { prograph: ProGraph }) {
                     }}
                     style={{ width: "400px" }}
                     inputRef={edgeSuggestionInputRef}
-                    placeholder="Type an edge (eg. 4-10)"
+                    placeholder="Type an edge (eg. 4:10)"
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
                         e.preventDefault();