feat(rg): add zoom functions

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);