Link the panning and zooming of fullscreen to regular graph

Author: Mark Robinson

src/main/resources/static/js/workflow.js

@@ -117,20 +117,35 @@ require(['jquery', 'bootstrap.modal', 'svg-pan-zoom', 'hammerjs'],
 
         // Enable svg-pan-zoom on fullscreen modal when opened
         $('#fullScreenGraphModal').on('shown.bs.modal', function (e) {
+            // Timeout allows for modal to show
             setTimeout(function() {
                 var fullGraph = svgPanZoom('#graphFullscreen', {
                     zoomEnabled: true,
                     controlIconsEnabled: true,
                     customEventsHandler: eventHandler
                 });
 
+                // Set to same zoom/pan as other graph
+                fullGraph.zoom(graph.getZoom());
+                fullGraph.pan(graph.getPan());
+
+                // Link the two graphs panning and zooming
+                fullGraph.setOnZoom(function(level){
+                    graph.zoom(level);
+                    graph.pan(fullGraph.getPan());
+                });
+
+                fullGraph.setOnPan(function(point){
+                    graph.pan(point);
+                });
+
                 // Resizing window also resizes the graph
                 $(window).resize(function(){
                     fullGraph.resize();
                     fullGraph.fit();
                     fullGraph.center();
                 });
-            }, 400);
+            }, 100);
         });
     });