dotview options window is now dynamically sized and stays open when dotview is...

dotview options window is now dynamically sized and stays open when dotview is hidden and shown again

media/dotview.css

@@ -30,6 +30,7 @@ button {
     display: flex;
     padding: 2px;
     outline: none;
+    margin: 0;
 }
 
 #openOptions {
@@ -49,12 +50,14 @@ button {
     top: 10px;
     right: 10px;
     overflow: hidden;
+    margin: 0;
 }
 
 
 #buttonContainer {
     background: var(--vscode-editorWidget-border);
     display: flex;
+    height: 40px;
     padding: 10px;
 }
 #buttonContainer h3 {
@@ -68,7 +71,6 @@ button {
 }
 
 
-
 #paramList {
     max-width: 250px;
     max-height: 400px;
@@ -80,7 +82,6 @@ button {
 #paramList li {
     display: flex;
     justify-content: space-between;
-    padding: 0.15em 0;
     height: 2.5em;
     align-items: center;
 }

media/dotview.js

@@ -12,6 +12,7 @@ var viewBox;
 var lastPoint;
 var newPoint;
 var scale;
+var optionsOpen = false;
 
 window.addEventListener('message', event => {
     const type = event.data.type;
@@ -33,6 +34,19 @@ window.addEventListener('message', event => {
             event.data.params.forEach(addParameterItem);
             parameterDefinitions = event.data.params;
             break;
+        case 'svg':
+            const newSvg = event.data.svg;
+            if (svgImage === undefined) {
+                svgContainer.innerHTML = newSvg.replace('<svg', '<svg id="svgImage"');
+                svgImage = document.getElementById("svgImage");
+                scale = 1;
+                viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
+                svgImage.setAttribute('viewBox', `0 0 ${svgImage.clientWidth} ${svgImage.clientHeight}`);
+            } else {
+                // If we already have an svg element, replace the contents
+                svgImage.innerHTML = newSvg.match(/(?<=<svg(?:.|\n|\r)+?>)(?:(?:.|\n|\r)+)(?=<\/svg>)/)[0];
+            }
+            break;
         case 'allData':
             if (svgImage === undefined && event.data.svg) {
                 // Set svg again
@@ -61,17 +75,10 @@ window.addEventListener('message', event => {
                     }
                 }
             }
-        case 'svg':
-            const newSvg = event.data.svg;
-            if (svgImage === undefined) {
-                svgContainer.innerHTML = newSvg.replace('<svg', '<svg id="svgImage"');
-                svgImage = document.getElementById("svgImage");
-                scale = 1;
-                viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
-                svgImage.setAttribute('viewBox', `0 0 ${svgImage.clientWidth} ${svgImage.clientHeight}`);
+            if (event.data.optionsOpen) {
+                paramContainer.style.maxHeight = '450px';
             } else {
-                // If we already have an svg element, replace the contents
-                svgImage.innerHTML = newSvg.match(/(?<=<svg(?:.|\n|\r)+?>)(?:(?:.|\n|\r)+)(?=<\/svg>)/)[0];
+                paramContainer.style.maxHeight = '0px';
             }
             break;
     }
@@ -132,6 +139,7 @@ function addParameterItem(param) {
         case 'Boolean':
             valueBox.checked = param.defaultValue;
             valueBox.type = 'checkbox';
+            nameBox.style.cursor = 'pointer';
             nameBox.onclick = () => {
                 valueBox.checked = !valueBox.checked;
                 vscode.postMessage({
@@ -198,12 +206,21 @@ function addParameterItem(param) {
 }
 
 document.getElementById("openOptions").onclick = () => {
-    paramContainer.style.maxHeight = '450px';
+    paramContainer.style.maxHeight = `${Math.min(window.innerHeight - 20, 450)}px`;
+    paramList.style.maxHeight = `${Math.min(window.innerHeight - 60, 410)}px`;
+    optionsOpen = !optionsOpen;
+    vscode.postMessage({
+        type: 'toggleOptions',
+    });
 };
 
 
 document.getElementById("closeOptions").onclick = () => {
     paramContainer.style.maxHeight = '0px';
+    optionsOpen = !optionsOpen;
+    vscode.postMessage({
+        type: 'toggleOptions',
+    });
 };
 
 document.getElementById("revert").onclick = resetParams;
@@ -242,6 +259,10 @@ window.addEventListener('resize', () => {
         viewBox.h = svgImage.clientHeight / scale;
         svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
     }
+    if (optionsOpen) {
+        paramContainer.style.maxHeight = `${Math.min(window.innerHeight - 20, 450)}px`;
+        paramList.style.maxHeight = `${Math.min(window.innerHeight - 60, 410)}px`;
+    }
 });
 
 function zoom(zoomIn) {

src/dotViewer.ts

@@ -79,6 +79,7 @@ export namespace DotViewer {
         private lastSvgString: string | undefined;
         private dotParameters: Map<string, string> = new Map();
         private lastRunToken: string | undefined;
+        private optionsOpen: boolean = false;
 
         public constructor(fileUri: vscode.Uri, sameColumn = false) {
             this.fileUri = fileUri;
@@ -118,6 +119,7 @@ export namespace DotViewer {
                         svg: this.lastSvgString,
                         params: LiveDotView.availableParameters,
                         values: Array.from(this.dotParameters.entries()),
+                        optionsOpen: this.optionsOpen,
                     });
                 },
                 undefined,
@@ -133,6 +135,9 @@ export namespace DotViewer {
                         case 'paramReset':
                             this.dotParameters = new Map();
                             break;
+                        case 'toggleOptions':
+                            this.optionsOpen = !this.optionsOpen;
+                            break;
                     }
                     this.updateDot();
                 },