feat(useZoomPanHelper) add setCenter func

.gitignore

@@ -7,3 +7,4 @@ cypress/screenshots
 dist
 .env
 stats.html
+.eslintcache

example/src/Provider/Sidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStoreState, useStoreActions } from 'react-flow-renderer';
 
-export default () => {
+const Sidebar = () => {
   const nodes = useStoreState((store) => store.nodes);
   const transform = useStoreState((store) => store.transform);
   const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
@@ -32,3 +32,5 @@ export default () => {
     </aside>
   );
 };
+
+export default Sidebar;

src/hooks/useZoomPanHelper.ts

@@ -12,6 +12,7 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = {
   zoomTo: (_: number) => {},
   transform: (_: FlowTransform) => {},
   fitView: (_: FitViewParams = { padding: 0.1 }) => {},
+  setCenter: (_: number, __: number) => {},
   initialized: false,
 };
 
@@ -51,6 +52,16 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
 
           d3Zoom.transform(d3Selection, transform);
         },
+        setCenter: (x: number, y: number, zoom?: number) => {
+          const { width, height, maxZoom } = store.getState();
+
+          const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
+          const centerX = width / 2 - x * nextZoom;
+          const centerY = height / 2 - y * nextZoom;
+          const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
+
+          d3Zoom.transform(d3Selection, transform);
+        },
         initialized: true,
       };
     }

src/types/index.ts

@@ -354,6 +354,7 @@ export interface ZoomPanHelperFunctions {
   zoomTo: (zoomLevel: number) => void;
   transform: (transform: FlowTransform) => void;
   fitView: (params?: FitViewParams) => void;
+  setCenter: (x: number, y: number, zoom?: number) => void;
   initialized: boolean;
 }