fix: Node double click handling in drawing mode

Also switched to using nanoid instead of constructed ids and fixed node signature to also use label so the graph updates on label changes.

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);
         }
       })