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

reworked the dot viewer to have separate js and css files. also fixed window resizing

parent 467257ed
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
media/dotview.css 0 → 100644
+ 20
− 0
View file @ 3dcc39a9
html, body, #svgImage {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
polygon {
fill: none;
}
.vscode-dark {
filter: invert(1);
}
\ No newline at end of file
media/dotview.js 0 → 100644
+ 68
− 0
View file @ 3dcc39a9
// FULL CREDIT TO https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
// also https://stackoverflow.com/questions/1685326/responding-to-the-onmousemove-event-outside-of-the-browser-window-in-ie
const svgContainer = document.getElementById("svgContainer");
var svgImage;
var viewBox;
var lastPoint;
var newPoint;
var scale = 1;
window.addEventListener('message', event => {
svgContainer.innerHTML = event.data.svg.replace('<svg', '<svg id="svgImage"');
svgImage = document.getElementById("svgImage");
scale = 1;
//TODO: DIFFERENTIATE BETWEEN A COMPLETELY NEW SVG AND THE SAME SVG (rn it just resets the whole view)
viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
});
window.addEventListener('resize', () => {
if (svgImage !== null) {
viewBox.w = svgImage.clientWidth / scale;
viewBox.h = svgImage.clientHeight / scale;
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
}
});
svgContainer.onmousewheel = (e) => {
if (svgImage !== null) {
var w = viewBox.w;
var h = viewBox.h;
var mx = e.offsetX; //mouse x
var my = e.offsetY;
var dw = w * Math.sign(-e.deltaY) * 0.15;
var dh = h * Math.sign(-e.deltaY) * 0.15;
var svgSize = { w: svgImage.clientWidth, h: svgImage.clientHeight };
var dx = dw * mx / svgSize.w;
var dy = dh * my / svgSize.h;
viewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w - dw, h: viewBox.h - dh };
scale = svgSize.w / viewBox.w;
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
}
};
svgContainer.onmousedown = (e) => {
if (svgImage !== null) {
lastPoint = { x: e.x, y: e.y };
document.onmousemove = (e) => {
newPoint = { x: e.x, y: e.y };
viewBox.x += (lastPoint.x - newPoint.x) / scale;
viewBox.y += (lastPoint.y - newPoint.y) / scale;
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
lastPoint = newPoint;
};
document.onmouseup = () => {
document.onmousemove = null;
};
}
};
src/commands.ts
+ 38
− 92
View file @ 3dcc39a9
......@@ -53,6 +53,7 @@ export namespace ModestCommands {
private fileUri: vscode.Uri;
private panel: vscode.WebviewPanel;
private webview: vscode.Webview;
private lastSvgStr: string = '';
public constructor(fileUri: vscode.Uri) {
this.fileUri = fileUri;
......@@ -73,8 +74,19 @@ export namespace ModestCommands {
);
this.webview = this.panel.webview;
this.webview.html = this.getHtml('');
this.webview.html = this.getHtml();
this.panel.onDidChangeViewState(
e => {
this.panel = e.webviewPanel;
this.webview = e.webviewPanel.webview;
this.webview.postMessage({
svg: this.lastSvgStr
});
},
null,
undefined
);
vscode.workspace.onDidSaveTextDocument(td => {
if (td.uri === this.fileUri) {
......@@ -88,106 +100,40 @@ export namespace ModestCommands {
private updateDot() {
let jsonObject = { "textDocument": TextDocumentIdentifier.create(this.fileUri.toString()) };
client?.sendRequest<string>("modest/dot", jsonObject).then(data => {
this.webview.html = this.getHtml(data);
this.lastSvgStr = data;
this.webview.postMessage({
svg: data
});
});
}
private getHtml(svgStr: string) {
let nonce = getNonce();
// FULL CREDIT TO https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
// also https://stackoverflow.com/questions/1685326/responding-to-the-onmousemove-event-outside-of-the-browser-window-in-ie
private getHtml() {
let webview = this.webview;
const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, "media", "dotview.js"));
const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'dotview.css'));
// Use a nonce to only allow a specific script to be run.
const nonce = getNonce();
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'nonce-${nonce}'; img-src ${this.webview.cspSource} https:; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Preview] ${this.fileUri.path.split("/").pop()}</title>
</head>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${styleMainUri}" rel="stylesheet">
<title>[Preview] ${this.fileUri.path.split("/").pop()}</title>
</head>
<body id="svgContainer">
${svgStr.replace('<svg', '<svg id="svgImage"')}
</body>
<script nonce="${nonce}" src="${scriptUri}"></script>
</html>
<style nonce="${nonce}">
html, body, #svgImage {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
polygon {
fill: none;
}
.vscode-dark {
filter: invert(1);
}
</style>
<script nonce="${nonce}">
const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");
var viewBox = {x:0,y:0,w:svgImage.clientWidth,h:svgImage.clientHeight};
svgImage.setAttribute('viewBox', \`\${viewBox.x} \${viewBox.y} \${viewBox.w} \${viewBox.h}\`);
const svgSize = {w:svgImage.clientWidth,h:svgImage.clientHeight};
var isPanning = false;
var startPoint = {x:0,y:0};
var endPoint = {x:0,y:0};;
var scale = 1;
svgContainer.onmousewheel = function(e) {
e.preventDefault();
var w = viewBox.w;
var h = viewBox.h;
var mx = e.offsetX;//mouse x
var my = e.offsetY;
var dw = w*Math.sign(-e.deltaY)*0.15;
var dh = h*Math.sign(-e.deltaY)*0.15;
var dx = dw*mx/svgSize.w;
var dy = dh*my/svgSize.h;
viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w-dw,h:viewBox.h-dh};
scale = svgSize.w/viewBox.w;
svgImage.setAttribute('viewBox', \`\${viewBox.x} \${viewBox.y} \${viewBox.w} \${viewBox.h}\`);
}
svgContainer.onmousedown = function(e){
document.onmousemove = function(e) {
endPoint = {x:e.x,y:e.y};
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
var movedViewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
svgImage.setAttribute('viewBox', \`\${movedViewBox.x} \${movedViewBox.y} \${movedViewBox.w} \${movedViewBox.h}\`);
};
document.onmouseup = function(e) {
document.onmousemove = null;
endPoint = {x:e.x,y:e.y};
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
svgImage.setAttribute('viewBox', \`\${viewBox.x} \${viewBox.y} \${viewBox.w} \${viewBox.h}\`);
isPanning = false;
if(svgContainer.releaseCapture) { svgContainer.releaseCapture(); }
};
if(svgContainer.setCapture) { svgContainer.setCapture(); }
startPoint = {x:e.x,y:e.y};
}
</script>
`;
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment