From a6d191355ac68cf32ef947869d15c3822bb4fb79 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 26 Jul 2019 00:57:03 +0200
Subject: [PATCH] feat(fitView): add padding option

---
 dist/ReactGraph.js     | 22 ++++++++++++++--------
 example/SimpleGraph.js |  2 +-
 src/GraphView/index.js |  2 +-
 src/state/actions.js   |  4 ++--
 src/state/index.js     |  3 ++-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
index e4bf6324..bc01273e 100644
--- a/dist/ReactGraph.js
+++ b/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());
diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js
index 1ef1fe28..a972d9e2 100644
--- a/example/SimpleGraph.js
+++ b/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
     });
diff --git a/src/GraphView/index.js b/src/GraphView/index.js
index e5eec0f9..7a1b06ab 100644
--- a/src/GraphView/index.js
+++ b/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())
       });
diff --git a/src/state/actions.js b/src/state/actions.js
index fdf67ef7..1d9438e9 100644
--- a/src/state/actions.js
+++ b/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 = () => {
diff --git a/src/state/index.js b/src/state/index.js
index 97f16aee..0da30bf1 100644
--- a/src/state/index.js
+++ b/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)];