feat(rg): add zoom functions

src/GraphContext/index.js

@@ -7,16 +7,6 @@ import { setNodes, setEdges } from '../state/actions';
 
 export const GraphContext = createContext({});
 
-function usePrevious(value) {
-  const ref = useRef();
-
-  useEffect(() => {
-    ref.current = value;
-  });
-
-  return ref.current;
-}
-
 export const Provider = (props) => {
   const {
     onElementClick,

src/GraphView/index.js

@@ -8,7 +8,10 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
-import { updateTransform, updateSize, initD3, fitView, setNodesSelection } from '../state/actions';
+import {
+  updateTransform, updateSize, initD3, fitView,
+  zoomIn, zoomOut, setNodesSelection
+} from '../state/actions';
 import { useKeyPress } from '../hooks';
 
 const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
@@ -59,7 +62,9 @@ const GraphView = memo((props) => {
       props.onLoad({
         nodes: state.nodes,
         edges: state.edges,
-        fitView: () => dispatch(fitView())
+        fitView: () => dispatch(fitView()),
+        zoomIn: () => dispatch(zoomIn()),
+        zoomOut: () => dispatch(zoomOut())
       });
     }
   }, [state.d3Initialised]);

src/NodeRenderer/Handle/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { memo } from 'react';
 import cx from 'classnames';
 
-export default (props) => {
+export default memo(({ input, output, ...rest }) => {
   const handleClasses = cx(
-    'react-graph__handle', {
-      input: props.input,
-      output: props.output
-    }
+    'react-graph__handle', { input, output }
   );
 
   return (
-    <div className={handleClasses} {...props} />
+    <div
+      className={handleClasses}
+      {...rest}
+    />
   );
-};
+});

src/state/actions.js

@@ -2,7 +2,7 @@ import {
   UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
   UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
   UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
-  SET_SELECTED_ELEMENTS, REMOVE_NODES
+  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
 } from './index';
 
 export const updateTransform = (transform) => {
@@ -58,6 +58,14 @@ export const fitView = () => {
   return { type: FIT_VIEW };
 };
 
+export const zoomIn = () => {
+  return { type: ZOOM_IN };
+};
+
+export const zoomOut = () => {
+  return { type: ZOOM_OUT };
+}
+
 export const setSelection = (isActive) => {
   return { type: SET_SELECTION, payload: { selectionActive: isActive } };
 };

src/state/index.js

@@ -10,6 +10,8 @@ export const UPDATE_TRANSFORM = 'UPDATE_TRANSFORM';
 export const UPDATE_SIZE = 'UPDATE_SIZE';
 export const INIT_D3 = 'INIT_D3';
 export const FIT_VIEW = 'FIT_VIEW';
+export const ZOOM_IN = 'ZOOM_IN';
+export const ZOOM_OUT = 'ZOOM_OUT';
 export const UPDATE_SELECTION = 'UPDATE_SELECTION';
 export const SET_SELECTION = 'SET_SELECTION';
 export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
@@ -70,13 +72,25 @@ export const reducer = (state, action) => {
       const k = Math.min(state.width, state.height) / Math.max(bounds.width, bounds.height);
       const boundsCenterX = bounds.x + (bounds.width / 2);
       const boundsCenterY = bounds.y + (bounds.height / 2);
-      const translate = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
-      const fittedTransform = zoomIdentity.translate(translate[0], translate[1]).scale(k);
+      const transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
+      const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
 
       state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 
       return state;
     }
+    case ZOOM_IN: {
+      const { transform } = state;
+      state.d3Zoom.scaleTo(state.d3Selection, transform[2] + 0.2);
+
+      return state;
+    }
+    case ZOOM_OUT: {
+      const { transform } = state;
+      state.d3Zoom.scaleTo(state.d3Selection, transform[2] - 0.2);
+
+      return state;
+    }
     case UPDATE_SELECTION: {
       const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
       const selectedEdges = getConnectedEdges(selectedNodes, state.edges);