Add fullscreen mode to diagram

README.md

@@ -38,6 +38,7 @@ The following outputs are currently supported:
 * Troposphere
 * CDK (Cfn Primitives) - TypeScript, Python, Java, C#
 * Pulumi - TypeScript
+* Diagram - embedded version of [draw.io](https://github.com/jgraph/drawio)
 
 ### Former2 CLI
 

css/custom.css

@@ -81,3 +81,17 @@
 .f2mb0 {
     margin-bottom: 0px !important;
 }
+
+iframe.fullscreen {
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: 999999;
+    height: 100%;
+}

js/app.js

@@ -1277,7 +1277,7 @@ $(document).ready(function(){
         sectionHeaderHeight - 40) + 'px;'
     );
 
-    $('#diagramframe').attr('src', '/lib/drawio/src/main/webapp/index.html?embed=1&libraries=1&proto=json&local=1&sync=none&browser=0&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&stealth=1&math=0&picker=0&libs=aws4&spin=1'); // &configure=1
+    $('#diagramframe').attr('src', '/lib/drawio/src/main/webapp/index.html?embed=1&libraries=1&proto=json&local=1&sync=none&browser=0&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&stealth=1&math=0&picker=0&libs=aws4&spin=1&p=page'); // &configure=1
 
     $('#header-button-download-diagram').click(function(){
         var message = JSON.stringify({
@@ -1301,6 +1301,8 @@ $(document).ready(function(){
             document.body.appendChild(element);
             element.click();
             document.body.removeChild(element);
+        } else if (evt['event'] == "toggleFullscreen") {
+            $('#diagramframe').toggleClass('fullscreen');
         }
     });
 

plugins/page.js

@@ -0,0 +1,9 @@
+/*
+Draw.io custom plugin
+*/
+
+// Enable fullscreen toggle
+document.querySelector('a[title="Fullscreen"]').addEventListener('click', () => {
+    var parent = window.opener || window.parent;
+    parent.postMessage(JSON.stringify({event: 'toggleFullscreen'}), '*'); 
+});