From cb0999b8a8bfff57d4b386cb6eae319cf397dbc4 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Thu, 13 Jul 2023 10:16:00 -0400
Subject: [PATCH] feat: Make loopback edges more intuitive [PT-185596245]

---
 src/components/graph.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index bd96708..911a446 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -547,6 +547,44 @@ export const Graph = (props: Props) => {
         .attr("y1", d => d.y1)
         .attr("y2", d => d.y2)
         .attr("marker-end", "url(#arrow)");
+
+      // add loopback "ghost" with background
+      if (!rubberBandNode.loops) {
+        svg
+          .selectAll("path.ghost-loop-background")
+          .data([rubberBandNode])
+          .enter()
+          .append("path")
+          .attr("class", "ghost-loop-background")
+          .attr("d", nodeLoopPath)
+          .attr("stroke", "#000")
+          .attr("stroke-opacity", 0)
+          .attr("fill-opacity", 0)
+          .attr("stroke-width", 15)
+          .attr("style", "cursor: pointer")
+          .on("click", () => {
+            onNodeClick?.(rubberBandNode.id);
+          })
+          ;
+        svg
+          .selectAll("path.ghost-loop")
+          .data([rubberBandNode])
+          .enter()
+          .append("path")
+          .attr("class", "ghost-loop")
+          .attr("d", nodeLoopPath)
+          .attr("stroke", "#999")
+          .attr("stroke-opacity", 0.6)
+          .attr("stroke-dasharray", 4)
+          .attr("fill-opacity", 0)
+          .attr("stroke-width", 1)
+          .attr("marker-end", "url(#arrow)")
+          .attr("style", "cursor: pointer")
+          .on("click", () => {
+            onNodeClick?.(rubberBandNode.id);
+          })
+          ;
+      }
     }
 
   }, [svgRef, d3Graph, allowDragging, autoArrange, rubberBand, drawingMode,