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(); const [fitViewAt, setFitViewAt] = useState(); const [recenterViewAt, setRecenterViewAt] = useState(); + const [resetZoomAt, setResetZoomAt] = useState(); 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} /> ); 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>; setHighlightNode: React.Dispatch> 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("select"); const [firstEdgeNode, setFirstEdgeNode] = useState(undefined); @@ -330,6 +331,7 @@ export const Drawing = (props: Props) => { onTransformed={handleTransformed} fitViewAt={fitViewAt} recenterViewAt={recenterViewAt} + resetZoomAt={resetZoomAt} /> ) => 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(null); const wrapperRef = useRef(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) => { if (!autoArrange && onClick) { onClick(e);