From 816da5e1cacaa5486b27ae8a397732dfae53bef0 Mon Sep 17 00:00:00 2001
From: Esa Puttonen <esa.puttonen@nitorcreations.com>
Date: Wed, 17 Oct 2018 10:33:19 +0300
Subject: [PATCH] Fix graph translation problem (paths sometimes out of
 viewbox)

---
 nflow-explorer/src/app/components/graph.js    | 23 +++++++++++++------
 nflow-explorer/src/app/components/index.js    |  1 +
 .../src/app/components/svgPanZoom.js          | 14 +++++++++++
 nflow-explorer/src/index.html                 |  1 +
 nflow-explorer/src/styles/main.scss           |  2 ++
 5 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 nflow-explorer/src/app/components/svgPanZoom.js

diff --git a/nflow-explorer/src/app/components/graph.js b/nflow-explorer/src/app/components/graph.js
index 3c2f6cc8d..22f5e186c 100644
--- a/nflow-explorer/src/app/components/graph.js
+++ b/nflow-explorer/src/app/components/graph.js
@@ -1,9 +1,11 @@
 (function () {
   'use strict';
 
-  var m = angular.module('nflowExplorer.components.graph', []);
+  var m = angular.module('nflowExplorer.components.graph', [
+    'nflowExplorer.components.svgPanZoom'
+  ]);
 
-  m.factory('Graph', function() {
+  m.factory('Graph', function(svgPanZoom) {
     return {
       setNodeSelected: setNodeSelected,
       markCurrentState: markCurrentState,
@@ -185,17 +187,20 @@
       render(svgGroup, graph);
       decorateNodes(canvasSelector, graph, nodeSelectedCallBack);
       var zoomEnabled = initHeightAndScale(graph, svgRoot, svgGroup);
-      svgPanZoom(canvasSelector, {
+      var panZoom = svgPanZoom(canvasSelector, {
         center: false,
         controlIconsEnabled: zoomEnabled,
         dblClickZoomEnabled: zoomEnabled,
-        fit: false,
+        fit: true,
         maxZoom: 100,
         minZoom: 0.01,
         mouseWheelZoomEnabled: false,
         panEnabled: zoomEnabled,
         zoomEnabled: zoomEnabled
       });
+      // zooming out a bit adds some padding after fit=true
+      // https://github.com/ariutta/svg-pan-zoom/issues/78
+      panZoom.zoomOut(0.01);
 
       function initSvg(canvasSelector, embedCSS) {
         var svgRoot = d3.select(canvasSelector);
@@ -249,9 +254,13 @@
       function initHeightAndScale(graph, svgRoot, svgGroup) {
         var aspectRatio = graph.graph().height / graph.graph().width;
         var availableWidth = parseInt(svgRoot.style('width').replace(/px/, ''));
-        svgRoot.attr('height', Math.max(Math.min(availableWidth * aspectRatio, graph.graph().width * aspectRatio) + 60, 300));
-        var zoomScale = Math.min(availableWidth / (graph.graph().width + 70), 1);
-        svgGroup.attr('transform', 'translate(35,30) scale(' + zoomScale + ')');
+        var zoomScale = Math.min(availableWidth / graph.graph().width, 1);
+        var aspectRatioHeight = Math.min(availableWidth * aspectRatio, graph.graph().width * aspectRatio);
+        if (zoomScale !== 1) {
+          aspectRatioHeight = Math.max(aspectRatioHeight, 400);
+        }
+        svgRoot.attr('height', aspectRatioHeight);
+        svgGroup.attr('transform', 'scale(' + zoomScale + ')');
         return zoomScale !== 1;
       }
 
diff --git a/nflow-explorer/src/app/components/index.js b/nflow-explorer/src/app/components/index.js
index 30b19ba59..6f4afc5ee 100644
--- a/nflow-explorer/src/app/components/index.js
+++ b/nflow-explorer/src/app/components/index.js
@@ -8,6 +8,7 @@
     'nflowExplorer.components.filters',
     'nflowExplorer.components.graph',
     'nflowExplorer.components.util',
+    'nflowExplorer.components.svgPanZoom'
   ]);
 
 })();
diff --git a/nflow-explorer/src/app/components/svgPanZoom.js b/nflow-explorer/src/app/components/svgPanZoom.js
new file mode 100644
index 000000000..141e9ffa0
--- /dev/null
+++ b/nflow-explorer/src/app/components/svgPanZoom.js
@@ -0,0 +1,14 @@
+(function () {
+  'use strict';
+
+  var m = angular.module('nflowExplorer.components.svgPanZoom', []);
+
+  m.factory('svgPanZoom', function SvgPanZoomFactory($window) {
+    if (!$window.svgPanZoom) {
+      console.error('Failed to load svgPanZoom');
+      return function() {};
+    }
+    return $window.svgPanZoom;
+  });
+
+})();
diff --git a/nflow-explorer/src/index.html b/nflow-explorer/src/index.html
index f385c20ca..61a2c6f84 100644
--- a/nflow-explorer/src/index.html
+++ b/nflow-explorer/src/index.html
@@ -81,6 +81,7 @@
     <script src="app/components/filters.js"></script>
     <script src="app/components/graph.js"></script>
     <script src="app/components/util.js"></script>
+    <script src="app/components/svgPanZoom.js"></script>
     <script src="app/components/endpointSelection/endpointSelection.js"></script>
 
     <script src="app/executors/executors.js"></script>
diff --git a/nflow-explorer/src/styles/main.scss b/nflow-explorer/src/styles/main.scss
index d7e81734d..22b54e627 100644
--- a/nflow-explorer/src/styles/main.scss
+++ b/nflow-explorer/src/styles/main.scss
@@ -268,6 +268,8 @@ ul.listing {
 
 .svg-container {
   width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .svg-content-responsive {