fix: Reset button resets the zoom [PT-187399412]

concord-consortium · Apr 9, 2024 · 474a6cb · 474a6cb
1 parent 5f0c584
commit 474a6cb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);