feat(fitView): add padding option

dist/ReactGraph.js

@@ -29936,7 +29936,8 @@
       case FIT_VIEW:
         {
           var bounds = getBoundingBox(state.nodes);
-          var k = Math.min(state.width, state.height) / Math.max(bounds.width, bounds.height);
+          var maxBoundsSize = Math.max(bounds.width, bounds.height);
+          var k = Math.min(state.width, state.height) / (maxBoundsSize + maxBoundsSize * action.payload.padding);
           var boundsCenterX = bounds.x + bounds.width / 2;
           var boundsCenterY = bounds.y + bounds.height / 2;
           var transform = [state.width / 2 - boundsCenterX * k, state.height / 2 - boundsCenterY * k];
@@ -30075,9 +30076,14 @@
       }
     };
   };
-  var fitView = function fitView() {
+  var fitView = function fitView(_ref2) {
+    var _ref2$padding = _ref2.padding,
+        padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
     return {
-      type: FIT_VIEW
+      type: FIT_VIEW,
+      payload: {
+        padding: padding
+      }
     };
   };
   var zoomIn = function zoomIn() {
@@ -30098,9 +30104,9 @@
       }
     };
   };
-  var setNodesSelection = function setNodesSelection(_ref2) {
-    var isActive = _ref2.isActive,
-        selection = _ref2.selection;
+  var setNodesSelection = function setNodesSelection(_ref3) {
+    var isActive = _ref3.isActive,
+        selection = _ref3.selection;
     return {
       type: SET_NODES_SELECTION,
       payload: {
@@ -32776,8 +32782,8 @@
         props.onLoad({
           nodes: state.nodes,
           edges: state.edges,
-          fitView: function fitView$1() {
-            return dispatch(fitView());
+          fitView: function fitView$1(opts) {
+            return dispatch(fitView(opts));
           },
           zoomIn: function zoomIn$1() {
             return dispatch(zoomIn());

example/SimpleGraph.js

@@ -61,7 +61,7 @@ class App extends PureComponent {
     window.rg = graphInstance;
 
     this.graphInstance = graphInstance;
-    this.graphInstance.fitView();
+    this.graphInstance.fitView({ padding: 0.1 });
     this.setState({
       graphLoaded: true
     });

src/GraphView/index.js

@@ -62,7 +62,7 @@ const GraphView = memo((props) => {
       props.onLoad({
         nodes: state.nodes,
         edges: state.edges,
-        fitView: () => dispatch(fitView()),
+        fitView: opts => dispatch(fitView(opts)),
         zoomIn: () => dispatch(zoomIn()),
         zoomOut: () => dispatch(zoomOut())
       });

src/state/actions.js

@@ -54,8 +54,8 @@ export const initD3 = ({ zoom, selection }) => {
   };
 };
 
-export const fitView = () => {
-  return { type: FIT_VIEW };
+export const fitView = ({ padding = 0 }) => {
+  return { type: FIT_VIEW, payload: { padding } };
 };
 
 export const zoomIn = () => {

src/state/index.js

@@ -69,7 +69,8 @@ export const reducer = (state, action) => {
     }
     case FIT_VIEW: {
       const bounds = getBoundingBox(state.nodes);
-      const k = Math.min(state.width, state.height) / Math.max(bounds.width, bounds.height);
+      const maxBoundsSize = Math.max(bounds.width, bounds.height);
+      const k = Math.min(state.width, state.height) / (maxBoundsSize + (maxBoundsSize * action.payload.padding));
       const boundsCenterX = bounds.x + (bounds.width / 2);
       const boundsCenterY = bounds.y + (bounds.height / 2);
       const transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];