From 41612a0ba9bc9227881cb493d13050e91484bca5 Mon Sep 17 00:00:00 2001
From: Mahdi Esbati <mahdi.esbati123@gmail.com>
Date: Sun, 21 Nov 2021 13:26:08 +0330
Subject: [PATCH] add the corresponding examples for d3 smooth transitions

---
 example/src/UseZoomPanHelper/index.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/example/src/UseZoomPanHelper/index.tsx b/example/src/UseZoomPanHelper/index.tsx
index 94ff30f8..a362eb06 100644
--- a/example/src/UseZoomPanHelper/index.tsx
+++ b/example/src/UseZoomPanHelper/index.tsx
@@ -29,7 +29,7 @@ const UseZoomPanHelperFlow = () => {
   const [elements, setElements] = useState<Elements>(initialElements);
   const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-  const { project } = useZoomPanHelper();
+  const { project, setCenter, zoomIn, zoomOut } = useZoomPanHelper();
 
   const onPaneClick = useCallback(
     (evt) => {
@@ -48,8 +48,26 @@ const UseZoomPanHelperFlow = () => {
     [project]
   );
 
+  const onElementClick = useCallback(
+    (_, element) => {
+      const { x, y } = element.position;
+      setCenter(x, y, 1);
+    },
+    [setCenter]
+  );
+
   return (
-    <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onPaneClick={onPaneClick}>
+    <ReactFlow
+      elements={elements}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onPaneClick={onPaneClick}
+    >
+      <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
+        <button onClick={() => zoomIn(1200)}>zoomIn</button>
+        <button onClick={() => zoomOut(0)}>zoomOut</button>
+      </div>
       <Background />
       <MiniMap />
     </ReactFlow>