From 0dbe2a2059a8c74833e9bd67c0d641a5d04ad890 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Tue, 11 Jul 2023 07:33:11 -0400
Subject: [PATCH] feat: Change to press and drag to create nodes [PT-185572242]

This adds the ability to "drag" nodes from the tool palette along with keeping the click to create behavior
---
 src/components/drawing.tsx | 12 +++++++++++-
 src/components/graph.tsx   | 11 +++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
index e1cd3a9..66ccfc6 100644
--- a/src/components/drawing.tsx
+++ b/src/components/drawing.tsx
@@ -180,6 +180,15 @@ export const Drawing = (props: Props) => {
     }
   }, [drawingMode, addNode, handleSetSelectMode]);
 
+  // allow nodes to be "dragged" from the toolbar to the canvas
+  const handleMouseUp = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (drawingMode === "addNode") {
+      handleClicked(e);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [drawingMode, handleClicked]);
+
   const handleNodeClicked = useCallback((id: string, onLoop?: boolean) => {
     const node = getNode(id);
     if (!node) {
@@ -296,7 +305,7 @@ export const Drawing = (props: Props) => {
         </button>
         <button
           title="Add State"
-          onClick={handleSetAddNodeMode}
+          onMouseDown={handleSetAddNodeMode}
           className={clsx({selected: drawingMode === "addNode"})}
         >
           <AddNodeIcon />
@@ -328,6 +337,7 @@ export const Drawing = (props: Props) => {
         autoArrange={false}
         rubberBand={rubberBand}
         onClick={handleClicked}
+        onMouseUp={handleMouseUp}
         onNodeClick={handleNodeClicked}
         onNodeDoubleClick={handleNodeDoubleClicked}
         onEdgeClick={handleEdgeClicked}
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index 9fc9992..3108baf 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -32,6 +32,7 @@ type Props = {
   autoArrange: boolean;
   rubberBand?: RubberBand;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onNodeClick?: (id: string, onLoop?: boolean) => void;
   onNodeDoubleClick?: (id: string) => void;
   onEdgeClick?: (options: {from: string, to: string}) => void;
@@ -211,7 +212,7 @@ const calculateNodeFontSize = (d: D3Node) => {
 export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
          highlightColor, allowDragging, autoArrange, mode, rubberBand,
-         onClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop} = props;
+         onClick, onMouseUp, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const dimensions = useResizeObserver(wrapperRef);
@@ -553,10 +554,16 @@ export const Graph = (props: Props) => {
     }
   }, [autoArrange, onClick]);
 
+  const handleMouseUp = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (!autoArrange && onMouseUp) {
+      onMouseUp(e);
+    }
+  }, [autoArrange, onMouseUp]);
+
   const viewBox = mode === "drawing" ? `0 0 ${width} ${height}` : `${-width / 2} ${-height / 2} ${width} ${height}`;
 
   return (
-    <div className="graph" ref={wrapperRef} onClick={handleClick}>
+    <div className="graph" ref={wrapperRef} onClick={handleClick} onMouseUp={handleMouseUp}>
       <svg
         width={width}
         height={height}