develop (#43)

* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch

src/hooks/useD3Zoom.ts

@@ -9,7 +9,11 @@ const d3ZoomInstance = d3Zoom
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void, shiftPressed: boolean): void => {
+export default (
+  zoomPane: MutableRefObject<Element | null>,
+  onMove: () => void,
+  shiftPressed: boolean
+): void => {
   const state = useStoreState(s => ({
     transform: s.transform,
     d3Selection: s.d3Selection,
@@ -20,8 +24,10 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
   const updateTransform = useStoreActions(actions => actions.updateTransform);
 
   useEffect(() => {
-    const selection = select(zoomPane.current).call(d3ZoomInstance);
-    initD3({ zoom: d3ZoomInstance, selection });
+    if (zoomPane.current) {
+      const selection = select(zoomPane.current).call(d3ZoomInstance);
+      initD3({ zoom: d3ZoomInstance, selection });
+    }
   }, []);
 
   useEffect(() => {
@@ -29,8 +35,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     } else {
       d3ZoomInstance.on('zoom', () => {
-        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
-          return false;
+        if (
+          event.sourceEvent &&
+          event.sourceEvent.target !== zoomPane.current
+        ) {
+          return;
         }
 
         updateTransform(event.transform);
@@ -38,11 +47,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
         onMove();
       });
 
-      if (state.d3Selection) {
+      if (state.d3Selection && state.d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
         const graphTransform = d3Zoom.zoomIdentity
-            .translate(state.transform[0], state.transform[1])
-            .scale(state.transform[2]);
+          .translate(state.transform[0], state.transform[1])
+          .scale(state.transform[2]);
 
         state.d3Selection.call(state.d3Zoom.transform, graphTransform);
       }
@@ -52,4 +61,4 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     };
   }, [shiftPressed]);
-}
+};