Merge pull request #262 from NitorCreations/fix-minor-graph-issues

Fix graph translation problem (paths sometimes out of viewbox)

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

nflow-explorer/src/app/components/index.js

@@ -8,6 +8,7 @@
     'nflowExplorer.components.filters',
     'nflowExplorer.components.graph',
     'nflowExplorer.components.util',
+    'nflowExplorer.components.svgPanZoom'
   ]);
 
 })();

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;
+  });
+
+})();

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>

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 {