refactor(hooks): create used3zoom hook

src/hooks/useD3Zoom.js

@@ -0,0 +1,46 @@
+import { useEffect, useContext } from 'react';
+import * as d3Zoom from 'd3-zoom';
+import { select, event } from 'd3-selection';
+
+import { updateTransform, initD3 } from '../state/view-actions';
+import { GraphContext } from '../GraphContext';
+
+const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
+
+export default function useD3Zoom(zoomPane, onMove, shiftPressed) {
+  const { state, dispatch } = useContext(GraphContext);
+
+  useEffect(() => {
+    const selection = select(zoomPane.current).call(d3ZoomInstance);
+    dispatch(initD3({ zoom: d3ZoomInstance, selection }));
+  }, []);
+
+  useEffect(() => {
+    if (shiftPressed) {
+      d3ZoomInstance.on('zoom', null);
+    } else {
+      d3ZoomInstance.on('zoom', () => {
+        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
+          return false;
+        }
+
+        dispatch(updateTransform(event.transform));
+
+        onMove();
+      });
+
+      if (state.d3Selection) {
+        // 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]);
+
+        state.d3Selection.call(state.d3Zoom.transform, graphTransform);
+      }
+    }
+
+    return () => {
+      d3ZoomInstance.on('zoom', null);
+    };
+  }, [shiftPressed]);
+}

src/hooks/useKeyPress.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const isInput = target => ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+
+export default function useKeyPress(targetKey) {
+  const [keyPressed, setKeyPressed] = useState(false);
+
+  function downHandler({ key, target }) {
+    if (key === targetKey && !isInput(target)) {
+      setKeyPressed(true);
+    }
+  }
+
+  const upHandler = ({ key, target }) => {
+    if (key === targetKey && !isInput(target)) {
+      setKeyPressed(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return keyPressed;
+}