Skip to content
Snippets Groups Projects
Commit 0c812cfb authored by Smit, P.J.M. (Peter, Student M-CS)'s avatar Smit, P.J.M. (Peter, Student M-CS)
Browse files

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
parent 78bf8ef1
No related branches found
No related tags found
No related merge requests found
...@@ -30,6 +30,7 @@ button { ...@@ -30,6 +30,7 @@ button {
display: flex; display: flex;
padding: 2px; padding: 2px;
outline: none; outline: none;
margin: 0;
} }
#openOptions { #openOptions {
...@@ -49,12 +50,14 @@ button { ...@@ -49,12 +50,14 @@ button {
top: 10px; top: 10px;
right: 10px; right: 10px;
overflow: hidden; overflow: hidden;
margin: 0;
} }
#buttonContainer { #buttonContainer {
background: var(--vscode-editorWidget-border); background: var(--vscode-editorWidget-border);
display: flex; display: flex;
height: 40px;
padding: 10px; padding: 10px;
} }
#buttonContainer h3 { #buttonContainer h3 {
...@@ -68,7 +71,6 @@ button { ...@@ -68,7 +71,6 @@ button {
} }
#paramList { #paramList {
max-width: 250px; max-width: 250px;
max-height: 400px; max-height: 400px;
...@@ -80,7 +82,6 @@ button { ...@@ -80,7 +82,6 @@ button {
#paramList li { #paramList li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.15em 0;
height: 2.5em; height: 2.5em;
align-items: center; align-items: center;
} }
......
...@@ -12,6 +12,7 @@ var viewBox; ...@@ -12,6 +12,7 @@ var viewBox;
var lastPoint; var lastPoint;
var newPoint; var newPoint;
var scale; var scale;
var optionsOpen = false;
window.addEventListener('message', event => { window.addEventListener('message', event => {
const type = event.data.type; const type = event.data.type;
...@@ -33,6 +34,19 @@ window.addEventListener('message', event => { ...@@ -33,6 +34,19 @@ window.addEventListener('message', event => {
event.data.params.forEach(addParameterItem); event.data.params.forEach(addParameterItem);
parameterDefinitions = event.data.params; parameterDefinitions = event.data.params;
break; 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': case 'allData':
if (svgImage === undefined && event.data.svg) { if (svgImage === undefined && event.data.svg) {
// Set svg again // Set svg again
...@@ -61,17 +75,10 @@ window.addEventListener('message', event => { ...@@ -61,17 +75,10 @@ window.addEventListener('message', event => {
} }
} }
} }
case 'svg': if (event.data.optionsOpen) {
const newSvg = event.data.svg; paramContainer.style.maxHeight = '450px';
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 { } else {
// If we already have an svg element, replace the contents paramContainer.style.maxHeight = '0px';
svgImage.innerHTML = newSvg.match(/(?<=<svg(?:.|\n|\r)+?>)(?:(?:.|\n|\r)+)(?=<\/svg>)/)[0];
} }
break; break;
} }
...@@ -132,6 +139,7 @@ function addParameterItem(param) { ...@@ -132,6 +139,7 @@ function addParameterItem(param) {
case 'Boolean': case 'Boolean':
valueBox.checked = param.defaultValue; valueBox.checked = param.defaultValue;
valueBox.type = 'checkbox'; valueBox.type = 'checkbox';
nameBox.style.cursor = 'pointer';
nameBox.onclick = () => { nameBox.onclick = () => {
valueBox.checked = !valueBox.checked; valueBox.checked = !valueBox.checked;
vscode.postMessage({ vscode.postMessage({
...@@ -198,12 +206,21 @@ function addParameterItem(param) { ...@@ -198,12 +206,21 @@ function addParameterItem(param) {
} }
document.getElementById("openOptions").onclick = () => { 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 = () => { document.getElementById("closeOptions").onclick = () => {
paramContainer.style.maxHeight = '0px'; paramContainer.style.maxHeight = '0px';
optionsOpen = !optionsOpen;
vscode.postMessage({
type: 'toggleOptions',
});
}; };
document.getElementById("revert").onclick = resetParams; document.getElementById("revert").onclick = resetParams;
...@@ -242,6 +259,10 @@ window.addEventListener('resize', () => { ...@@ -242,6 +259,10 @@ window.addEventListener('resize', () => {
viewBox.h = svgImage.clientHeight / scale; viewBox.h = svgImage.clientHeight / scale;
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`); 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) { function zoom(zoomIn) {
......
...@@ -79,6 +79,7 @@ export namespace DotViewer { ...@@ -79,6 +79,7 @@ export namespace DotViewer {
private lastSvgString: string | undefined; private lastSvgString: string | undefined;
private dotParameters: Map<string, string> = new Map(); private dotParameters: Map<string, string> = new Map();
private lastRunToken: string | undefined; private lastRunToken: string | undefined;
private optionsOpen: boolean = false;
public constructor(fileUri: vscode.Uri, sameColumn = false) { public constructor(fileUri: vscode.Uri, sameColumn = false) {
this.fileUri = fileUri; this.fileUri = fileUri;
...@@ -118,6 +119,7 @@ export namespace DotViewer { ...@@ -118,6 +119,7 @@ export namespace DotViewer {
svg: this.lastSvgString, svg: this.lastSvgString,
params: LiveDotView.availableParameters, params: LiveDotView.availableParameters,
values: Array.from(this.dotParameters.entries()), values: Array.from(this.dotParameters.entries()),
optionsOpen: this.optionsOpen,
}); });
}, },
undefined, undefined,
...@@ -133,6 +135,9 @@ export namespace DotViewer { ...@@ -133,6 +135,9 @@ export namespace DotViewer {
case 'paramReset': case 'paramReset':
this.dotParameters = new Map(); this.dotParameters = new Map();
break; break;
case 'toggleOptions':
this.optionsOpen = !this.optionsOpen;
break;
} }
this.updateDot(); this.updateDot();
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment