From ee439857f08f0829fbeceec8257b0ca1abfe312a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 11 Nov 2020 10:25:56 +0100
Subject: [PATCH] refactor(zoomPanHelper): always return functions, add
 initialized flag #678

---
 src/container/GraphView/index.tsx |  6 +++---
 src/hooks/useZoomPanHelper.ts     | 22 +++++++++++++---------
 src/types/index.ts                |  9 +++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index c08d7653..b5f9c15e 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -94,10 +94,10 @@ const GraphView = ({
   const setMaxZoom = useStoreActions((actions) => actions.setMaxZoom);
   const setTranslateExtent = useStoreActions((actions) => actions.setTranslateExtent);
   const currentStore = useStore();
-  const { zoomIn, zoomOut, zoomTo, transform, fitView } = useZoomPanHelper();
+  const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
   useEffect(() => {
-    if (!isInitialised.current && zoomIn && zoomOut && zoomTo && transform && fitView) {
+    if (!isInitialised.current && initialized) {
       if (onLoad) {
         onLoad({
           fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -113,7 +113,7 @@ const GraphView = ({
 
       isInitialised.current = true;
     }
-  }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView]);
+  }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
 
   useEffect(() => {
     if (onConnect) {
diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts
index defb16be..bfe62dfb 100644
--- a/src/hooks/useZoomPanHelper.ts
+++ b/src/hooks/useZoomPanHelper.ts
@@ -4,22 +4,23 @@ import { zoomIdentity } from 'd3-zoom';
 import { useStoreState, useStore } from '../store/hooks';
 import { clamp } from '../utils';
 import { getRectOfNodes } from '../utils/graph';
-import { FitViewParams, FlowTransform } from '../types';
+import { FitViewParams, FlowTransform, ZoomPanHelperFunctions } from '../types';
 
-const initialZoomPanHelper = {
-  zoomIn: null,
-  zoomOut: null,
-  zoomTo: null,
-  transform: null,
-  fitView: null,
+const initialZoomPanHelper: ZoomPanHelperFunctions = {
+  zoomIn: () => {},
+  zoomOut: () => {},
+  zoomTo: (_: number) => {},
+  transform: (_: FlowTransform) => {},
+  fitView: (_: FitViewParams = { padding: 0.1 }) => {},
+  initialized: false,
 };
 
-export default () => {
+const usePanZoomHelper = (): ZoomPanHelperFunctions => {
   const store = useStore();
   const d3Zoom = useStoreState((s) => s.d3Zoom);
   const d3Selection = useStoreState((s) => s.d3Selection);
 
-  const zoomPanHelperFunctions = useMemo(() => {
+  const zoomPanHelperFunctions = useMemo<ZoomPanHelperFunctions>(() => {
     if (d3Selection && d3Zoom) {
       return {
         zoomIn: () => d3Zoom.scaleBy(d3Selection, 1.2),
@@ -50,6 +51,7 @@ export default () => {
 
           d3Zoom.transform(d3Selection, transform);
         },
+        initialized: true,
       };
     }
 
@@ -58,3 +60,5 @@ export default () => {
 
   return zoomPanHelperFunctions;
 };
+
+export default usePanZoomHelper;
diff --git a/src/types/index.ts b/src/types/index.ts
index ee2fd9d2..eb94c85d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -337,3 +337,12 @@ export enum PanOnScrollMode {
   Vertical = 'vertical',
   Horizontal = 'horizontal',
 }
+
+export interface ZoomPanHelperFunctions {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  zoomTo: (zoomLevel: number) => void;
+  transform: (transform: FlowTransform) => void;
+  fitView: (params?: FitViewParams) => void;
+  initialized: boolean;
+}