From 42a50956cbc8ebb10418a4d507a739edac66d6e4 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Mon, 17 Jul 2023 09:38:31 -0400
Subject: [PATCH] feat: Added feedback during edge/node deletion [PT-185609197]

---
 src/components/graph.scss |  7 +++++++
 src/components/graph.tsx  | 17 ++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/graph.scss b/src/components/graph.scss
index 76058bc..d2b7911 100644
--- a/src/components/graph.scss
+++ b/src/components/graph.scss
@@ -15,4 +15,11 @@
   svg ellipse.can-add-edge:hover {
     fill: lightgreen;
   }
+  svg ellipse.can-delete:hover {
+    fill: lightcoral;
+  }
+  svg line.can-delete:hover {
+    stroke: lightcoral;
+    stroke-opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index 911a446..6049074 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -365,9 +365,14 @@ export const Graph = (props: Props) => {
       .on("drag", dragging)
       .on("end", dragEnd);
 
+    const circleClass = [
+      drawingMode === "addEdge" ? "can-add-edge" : "",
+      drawingMode === "delete" ? "can-delete" : "",
+    ].join(" ");
+
     const circles = nodes
       .append("ellipse")
-      .attr("class", drawingMode === "addEdge" ? "can-add-edge" : "")
+      .attr("class", circleClass)
       .attr("fill", "#fff")
       .attr("stroke", "#999")
       .attr("stroke-width", d => 2)
@@ -452,13 +457,18 @@ export const Graph = (props: Props) => {
     d3Graph.edges = calculateEdges(d3Graph.edges);
     // d3Graph.nodes = calculateLoops(d3Graph);
 
+    const lineBackgroundClass = [
+      "edge-background",
+      drawingMode === "delete" ? "can-delete" : "",
+    ].join(" ");
+
     // 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("class", lineBackgroundClass)
       .attr("stroke", "#000")
       .attr("stroke-opacity", 0)
       .attr("stroke-width", 15)
@@ -487,8 +497,9 @@ export const Graph = (props: Props) => {
       .attr("y1", d => d.sourceY)
       .attr("y2", d => d.targetY)
       .attr("marker-end", "url(#arrow)")
-      .attr("style", drawingMode === "delete" ? "cursor: pointer" : "")
+      .attr("style", drawingMode === "delete" ? "pointer-events: none" : "")
       .on("click", (e, d) => {
+        // this is not really needed as the pointer events are off
         onEdgeClick?.({from: d.source.id, to: d.target.id});
       })
       ;