From b774dffbfe87f6fb3fe44a25643a4e66e75d0180 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Tue, 11 Jul 2023 08:10:22 -0400
Subject: [PATCH] feat: Increase "hit" target to delete edges [PT-185572251]

This adds a background line behind the lines and loops to make them easier to click
---
 src/components/graph.tsx | 46 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index 62392d3..9c41b66 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -414,12 +414,19 @@ export const Graph = (props: Props) => {
 
       d3Graph.edges = calculateEdges(d3Graph.edges);
 
+      lineBackgrounds
+        .attr("x1", d => d.sourceX)
+        .attr("x2", d => d.targetX)
+        .attr("y1", d => d.sourceY)
+        .attr("y2", d => d.targetY);
+
       lines
         .attr("x1", d => d.sourceX)
         .attr("x2", d => d.targetX)
         .attr("y1", d => d.sourceY)
         .attr("y2", d => d.targetY);
 
+      loopBackgrounds.attr("d", nodeLoopPath);
       loops.attr("d", nodeLoopPath);
     };
 
@@ -444,6 +451,26 @@ export const Graph = (props: Props) => {
     d3Graph.edges = calculateEdges(d3Graph.edges);
     // d3Graph.nodes = calculateLoops(d3Graph);
 
+    // draw backgrounds for edges to increase click area
+    const lineBackgrounds = svg
+      .selectAll("line.edge-background")
+      .data(d3Graph.edges)
+      .enter()
+      .append("line")
+      .attr("class", "edge-background")
+      .attr("stroke", "#000")
+      .attr("stroke-opacity", 0)
+      .attr("stroke-width", 15)
+      .attr("x1", d => d.sourceX)
+      .attr("x2", d => d.targetX)
+      .attr("y1", d => d.sourceY)
+      .attr("y2", d => d.targetY)
+      .attr("style", drawingMode === "delete" ? "cursor: pointer" : "")
+      .on("click", (e, d) => {
+        onEdgeClick?.({from: d.source.id, to: d.target.id});
+      })
+      ;
+
     // draw edges
     const lines = svg
       .selectAll("line.edge")
@@ -458,8 +485,6 @@ export const Graph = (props: Props) => {
       .attr("x2", d => d.targetX)
       .attr("y1", d => d.sourceY)
       .attr("y2", d => d.targetY)
-      .attr("data-from", d => d.source.id)
-      .attr("data-to", d => d.target.id)
       .attr("marker-end", "url(#arrow)")
       .attr("style", drawingMode === "delete" ? "cursor: pointer" : "")
       .on("click", (e, d) => {
@@ -467,6 +492,23 @@ export const Graph = (props: Props) => {
       })
       ;
 
+    const loopBackgrounds = svg
+      .selectAll("path.loop-background")
+      .data(d3Graph.nodes.filter(n => n.loops))
+      .enter()
+      .append("path")
+      .attr("class", "loop-background")
+      .attr("d", nodeLoopPath)
+      .attr("stroke", "#000")
+      .attr("stroke-opacity", 0)
+      .attr("fill-opacity", 0)
+      .attr("stroke-width", 15)
+      .attr("style", drawingMode === "delete" ? "cursor: pointer" : "")
+      .on("click", (e, d) => {
+        onNodeClick?.(d.id, true);
+      })
+      ;
+
     const loops = svg
       .selectAll("path.loop")
       .data(d3Graph.nodes.filter(n => n.loops))