From 474a6cb67d7658564ece53fd604848268b0c2c0c Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Tue, 9 Apr 2024 16:13:41 -0400
Subject: [PATCH] fix: Reset button resets the zoom [PT-187399412]

---
 src/components/app.tsx     |  4 ++++
 src/components/dataset.tsx |  4 +++-
 src/components/drawing.tsx |  4 +++-
 src/components/graph.tsx   | 12 +++++++++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/app.tsx b/src/components/app.tsx
index 1a331db..568754e 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -95,6 +95,7 @@ export const App = () => {
   const [initialGraph, setInitialGraph] = useState<GraphData>();
   const [fitViewAt, setFitViewAt] = useState<number>();
   const [recenterViewAt, setRecenterViewAt] = useState<number>();
+  const [resetZoomAt, setResetZoomAt] = useState<number>();
   const onCODAPDataChanged = (values: string[]) => {
     updateGraph(values);
     setFitViewAt(Date.now());
@@ -473,6 +474,7 @@ export const App = () => {
       setStartingState(defaultStartingState);
       setSequenceGroups([]);
       setFastSimulation(defaultFastSimulation);
+      setResetZoomAt(Date.now());
       setGraph(initialGraph ? {...initialGraph} : {nodes: [], edges: []});
     }
   }, [initialGraph, setGraph]);
@@ -557,6 +559,7 @@ export const App = () => {
                 onRecenterView={handleRecenterView}
                 fitViewAt={fitViewAt}
                 recenterViewAt={recenterViewAt}
+                resetZoomAt={resetZoomAt}
                 onDimensions={handleDimensionChange}
               />
             :
@@ -576,6 +579,7 @@ export const App = () => {
                 onRecenterView={handleRecenterView}
                 fitViewAt={fitViewAt}
                 recenterViewAt={recenterViewAt}
+                resetZoomAt={resetZoomAt}
                 onDimensions={handleDimensionChange}
               />
           }
diff --git a/src/components/dataset.tsx b/src/components/dataset.tsx
index c040261..944b2d3 100644
--- a/src/components/dataset.tsx
+++ b/src/components/dataset.tsx
@@ -16,6 +16,7 @@ interface Props {
   graphEmpty: boolean;
   fitViewAt?: number;
   recenterViewAt?: number;
+  resetZoomAt?: number;
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
   onReset: () => void;
   onReturnToMainMenu: () => void;
@@ -27,7 +28,7 @@ interface Props {
 export const Dataset = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
          graph, graphEmpty, setSelectedNodeId, selectedNodeId, animating,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, resetZoomAt,
          onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
 
   const handleToolSelected = (tool: Tool) => {
@@ -86,6 +87,7 @@ export const Dataset = (props: Props) => {
         setSelectedNodeId={setSelectedNodeId}
         fitViewAt={fitViewAt}
         recenterViewAt={recenterViewAt}
+        resetZoomAt={resetZoomAt}
       />
     </div>
   );
diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
index c831ed3..9ed2aa2 100644
--- a/src/components/drawing.tsx
+++ b/src/components/drawing.tsx
@@ -24,6 +24,7 @@ interface Props {
   animating: boolean;
   fitViewAt?: number;
   recenterViewAt?: number;
+  resetZoomAt?: number;
   setGraph: React.Dispatch<React.SetStateAction<GraphData>>;
   setHighlightNode: React.Dispatch<React.SetStateAction<Node | undefined>>
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
@@ -40,7 +41,7 @@ const removePunctuationRegex = /["(){}[\]_+=|\\/><]/g;
 export const Drawing = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
          graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, resetZoomAt,
          selectedNodeId, animating, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
   const [drawingMode, setDrawingMode] = useState<DrawingMode>("select");
   const [firstEdgeNode, setFirstEdgeNode] = useState<Node|undefined>(undefined);
@@ -330,6 +331,7 @@ export const Drawing = (props: Props) => {
         onTransformed={handleTransformed}
         fitViewAt={fitViewAt}
         recenterViewAt={recenterViewAt}
+        resetZoomAt={resetZoomAt}
       />
       <DragIcon drawingMode={drawingMode} />
       <NodeModal
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index b2467b5..f389cad 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -60,6 +60,7 @@ type Props = {
   animating: boolean;
   fitViewAt?: number;
   recenterViewAt?: number;
+  resetZoomAt?: number;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onNodeClick?: (id: string, onLoop?: boolean) => void;
   onNodeDoubleClick?: (id: string) => void;
@@ -245,7 +246,7 @@ export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
          allowDragging, autoArrange, rubberBand, drawingMode,
          onClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, resetZoomAt,
          selectedNodeId, setSelectedNodeId, animating, onDimensions, onTransformed} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -847,6 +848,15 @@ export const Graph = (props: Props) => {
     }
   }, [recenterViewAt, fitOrCenter]);
 
+  // listen for reset zoom requests
+  useEffect(() => {
+    if ((resetZoomAt ?? 0) && zoomRef.current) {
+      const svg = d3.select(svgRef.current);
+      const transform = new d3.ZoomTransform(1, 0, 0);
+      svg.call(zoomRef.current.transform, transform);
+    }
+  }, [resetZoomAt]);
+
   const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (!autoArrange && onClick) {
       onClick(e);