Merge pull request #16 from concord-consortium/fix-node-double-click

fix: Node double click handling in drawing mode

package.json

@@ -133,6 +133,7 @@
     "clsx": "^1.2.1",
     "d3": "^7.8.2",
     "iframe-phone": "^1.3.1",
+    "nanoid": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "tslib": "^2.4.0"

src/components/drawing.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { clsx } from "clsx";
+import { nanoid } from "nanoid";
 
 import { Graph, Point, RubberBand } from "./graph";
 import { Edge, GraphData, Node } from "../type";
@@ -147,7 +148,7 @@ export const Drawing = (props: Props) => {
 
   const addNode = useCallback(({x, y}: {x: number, y: number}) => {
     setGraph(prev => {
-      const id = `node_${prev.nodes.length + 1}`;
+      const id = nanoid();
       const label = `State ${prev.nodes.length + 1}`;
       const newNode: Node = {id, label, value: 1, x, y};
       return {

src/components/graph.tsx

@@ -164,7 +164,7 @@ const nodeLoopPath = (node: D3Node) => {
 };
 
 const graphSignature = (graph: D3Graph) => {
-  const nodeSignature = graph.nodes.map(n => `$${n.id}/${n.weight}/${n.radius}`);
+  const nodeSignature = graph.nodes.map(n => `${n.id}/${n.label}/${n.weight}/${n.radius}`);
   const edgeSignature = graph.edges.map(e => `${e.source.id}/${e.target.id}/${e.weight}`);
   return `${nodeSignature}::${edgeSignature}`;
 };
@@ -218,6 +218,7 @@ export const Graph = (props: Props) => {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   const [d3Graph, setD3Graph] = useState<D3Graph>({nodes: [], edges: []});
+  const waitForDoubleRef = useRef<number|undefined>(undefined);
 
   // calculate the svg dimensions
   useEffect(() => {
@@ -359,8 +360,6 @@ export const Graph = (props: Props) => {
       .on("drag", dragging)
       .on("end", dragEnd);
 
-    let waitForDouble: number|undefined = undefined;
-
     const circles = nodes
       .append("ellipse")
       .attr("fill", "#fff")
@@ -371,14 +370,14 @@ export const Graph = (props: Props) => {
       .attr("cx", d => d.x)
       .attr("cy", d => d.y)
       .on("click", (e, d) => {
-        if (waitForDouble) {
-          clearTimeout(waitForDouble);
-          waitForDouble = undefined;
+        if (waitForDoubleRef.current) {
+          clearTimeout(waitForDoubleRef.current);
+          waitForDoubleRef.current = undefined;
           onNodeDoubleClick?.(d.id);
         } else {
-          waitForDouble = setTimeout(() => {
+          waitForDoubleRef.current = setTimeout(() => {
             onNodeClick?.(d.id);
-            waitForDouble = undefined;
+            waitForDoubleRef.current = undefined;
           }, 250);
         }
       })