Merge pull request #60 from common-workflow-language/fullscreen-graph

Fullscreen button for graph

Author: MarkRobbo

src/main/resources/static/css/main.css

@@ -55,6 +55,44 @@ body {
     margin-right: 5px;
 }
 
+#fullscreen-open, #fullscreen-close {
+    cursor: pointer;
+    font-size: 25px;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    opacity: 0.333;
+}
+
+#fullscreen-close {
+    top: 25px;
+}
+
+#fullscreen-open:hover, #fullscreen-close:hover {
+    opacity: 1;
+}
+
+#fullScreenGraphModal .modal-dialog {
+    width: 98%;
+    height: 92%;
+    padding: 0;
+}
+
+#fullScreenGraphModal .modal-body {
+    width: 100%;
+    height: 100%;
+}
+
+#fullScreenGraphModal .modal-content {
+    height: 99%;
+}
+
+#graphFullscreen {
+    background-color: #eeeeee;
+    width: 100%;
+    height: 90%;
+}
+
 #graph-menu {
     margin-bottom: 5px;
 }

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

@@ -102,11 +102,51 @@ require(['jquery', 'bootstrap.modal', 'svg-pan-zoom', 'hammerjs'],
         };
 
         // Enable svg-pan-zoom on the graph
-        svgPanZoom('#graph', {
+        var graph = svgPanZoom('#graph', {
             zoomEnabled: true,
             controlIconsEnabled: true,
             customEventsHandler: eventHandler
         });
+
+        // Resizing window also resizes the graph
+        $(window).resize(function(){
+            graph.resize();
+            graph.fit();
+            graph.center();
+        });
+
+        // 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();
+                });
+            }, 100);
+        });
     });
 
 /**

src/main/resources/templates/workflow.html

@@ -96,6 +96,24 @@ <h4 class="modal-title" id="dotGraphLabel">Workflow DOT Graph</h4>
     </div>
 </div>
 
+<!-- Modal for viewing the graph in full screen -->
+<div class="modal fade" id="fullScreenGraphModal" tabindex="-1" role="dialog" aria-labelledby="fullScreenGraphLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="fullScreenGraphLabel">Workflow Graph</h4>
+            </div>
+            <div class="modal-body">
+                <span id="fullscreen-close" data-dismiss="modal" class="close glyphicon glyphicon-resize-full"></span>
+                <object id="graphFullscreen" th:data="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" type="image/svg+xml">
+                    <img th:src="@{'/workflows/' + ${workflow.id} + '/graph/png'}" alt="workflow graph" />
+                </object>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="container">
     <div class="row">
         <div class="col-md-12" role="main" id="main" th:with="workflowURL=@{'github.com/' + ${workflow.retrievedFrom.owner} + '/' + ${workflow.retrievedFrom.repoName} + '/tree/' + ${workflow.lastCommit} + '/' + ${workflow.retrievedFrom.path}}">
@@ -128,6 +146,7 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
     <div class="row">
         <div class="col-md-12">
             <div id="visualisation" class="jumbotron">
+                <span id="fullscreen-open" data-toggle="modal" data-target="#fullScreenGraphModal" class="glyphicon glyphicon-resize-full"></span>
                 <object id="graph" th:data="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" type="image/svg+xml">
                     <img th:src="@{'/workflows/' + ${workflow.id} + '/graph/png'}" alt="workflow graph" />
                 </object>