refactor(hooks): create used3zoom hook

example/SimpleGraph.js

@@ -97,13 +97,6 @@ class App extends PureComponent {
     });
   }
 
-  onChange(elements) {
-    if (!this.graphInstance) {
-      return false;
-    }
-    // console.log('graph changed', elements);
-  }
-
   onFitView() {
     this.graphInstance.fitView();
   }
@@ -155,7 +148,6 @@ class App extends PureComponent {
         onNodeDragStop={onNodeDragStop}
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}
-        onChange={(elements) => this.onChange(elements)}
         nodeTypes={{
           special: SpecialNode,
           text: InputNode

src/GlobalKeyHandler/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useContext, memo } from 'react';
 
-import { useKeyPress } from '../hooks';
+import useKeyPress from '../hooks/useKeyPress';
 import { setNodesSelection } from '../state/actions';
 import { GraphContext } from '../GraphContext';
 import { isEdge, getConnectedEdges } from '../graph-utils';

src/GraphView/index.js

@@ -1,6 +1,4 @@
 import React, { useEffect, useContext, useRef, memo } from 'react';
-import * as d3Zoom from 'd3-zoom';
-import { select, event } from 'd3-selection';
 import ReactSizeMe from 'react-sizeme';
 
 import { Provider } from '../ConnectionContext';
@@ -10,49 +8,16 @@ import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
 import { setNodesSelection } from '../state/actions';
-import {
-  updateTransform, updateSize, initD3, fitView,
-  zoomIn, zoomOut
-} from '../state/view-actions';
-import { useKeyPress } from '../hooks';
-
-const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
+import { updateSize, fitView, zoomIn, zoomOut } from '../state/view-actions';
+import useKeyPress from '../hooks/useKeyPress';
+import useD3Zoom from '../hooks/useD3Zoom';
 
 const GraphView = memo((props) => {
   const zoomPane = useRef(null);
   const { state, dispatch } = useContext(GraphContext);
   const shiftPressed = useKeyPress('Shift');
 
-  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));
-
-        props.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);
-      }
-    }
-
-  }, [shiftPressed]);
+  useD3Zoom(zoomPane, props.onMove, shiftPressed);
 
   useEffect(
     () => dispatch(updateSize(props.size)),
@@ -71,13 +36,6 @@ const GraphView = memo((props) => {
     }
   }, [state.d3Initialised]);
 
-  useEffect(() => {
-    props.onChange({
-      nodes: state.nodes,
-      edges: state.edges,
-    });
-  });
-
   return (
     <div className="react-graph__renderer">
       <Provider onConnect={props.onConnect}>

src/ReactGraph/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, memo } from 'react';
 
 if (process.env.NODE_ENV !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -26,8 +26,8 @@ const ReactGraph = (props) => {
   const edgeTypes = useMemo(() => createEdgeTypes(props.edgeTypes), []);
 
   const {
-    style, onElementClick, elements, children, onLoad,
-    onMove, onChange, onElementsRemove, onConnect,
+    style, onElementClick, elements, children,
+    onLoad, onMove, onElementsRemove, onConnect,
     onNodeDragStop, connectionLineType, connectionLineStyle
   } = props;
 
@@ -37,7 +37,6 @@ const ReactGraph = (props) => {
         <GraphView
           onLoad={onLoad}
           onMove={onMove}
-          onChange={onChange}
           onElementClick={onElementClick}
           onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypes}
@@ -64,7 +63,6 @@ ReactGraph.defaultProps = {
   onConnect: () => {},
 	onLoad: () => {},
   onMove: () => {},
-  onChange: () => {},
   nodeTypes: {
     input: InputNode,
     default: DefaultNode,

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.js → src/hooks/useKeyPress.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 const isInput = target => ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
 
-export function useKeyPress(targetKey) {
+export default function useKeyPress(targetKey) {
   const [keyPressed, setKeyPressed] = useState(false);
 
   function downHandler({ key, target }) {
@@ -27,4 +27,4 @@ export function useKeyPress(targetKey) {
   }, []);
 
   return keyPressed;
-}
+}