language-servers/rust-analyzer
1
0
Fork 0
mirror of https://github.com/rust-lang/rust-analyzer.git synced 2025-09-29 13:25:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add more features to the rendering

Browse source 
- Allow the zoom to go further than 10x
- Adapt css to dark and high constrast themess
- Use 'javascript/worker' for the wasm graphviz
- Add Ctrl + LeftMouseClick to reset zoom
This commit is contained in:
André Oliveira 2021-08-09 07:01:42 +00:00
parent 8a563e4a46
commit 1039acb10a
1 changed files with 44 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

45
editors/code/src/commands.ts
View file

@ -485,37 +485,50 @@ function crateGraph(ctx: Ctx, full: boolean): Cmd {
console.log(dot); console.log(dot);
let script_d3 = vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', 'd3', 'dist', 'd3.min.js')); let scripts = [
let script_d3_gv = vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', 'd3-graphviz', 'build', 'd3-graphviz.min.js')); { file: vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', 'd3', 'dist', 'd3.min.js')) },
let script_wasm = vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', '@hpcc-js', 'wasm', 'dist', 'index.min.js')); { file: vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', '@hpcc-js', 'wasm', 'dist', 'index.min.js')), worker: true },
{ file: vscode.Uri.file(path.join(ctx.extensionPath, 'node_modules', 'd3-graphviz', 'build', 'd3-graphviz.min.js')) },
]
console.log(scripts);
console.log(script_d3, script_d3_gv, script_wasm); const scripts_html = scripts.map(({ file, worker }) => {
let uri = panel.webview.asWebviewUri(file);
return `<script type="${worker ? "javascript/worker" : "text/javascript"}" src="${uri}"></script>`
}).join("\n")
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<head> <head>
<style> <style>
body { /* Fill the entire view */
padding: 0px html, body { margin:0; padding:0; overflow:hidden }
} svg { position:fixed; top:0; left:0; height:100%; width:100% }
::-webkit-scrollbar {
display: none; /* Disable the graphviz backgroud and fill the polygons */
} .graph > polygon { display:none; }
:is(.node,.edge) polygon { fill: white; }
/* Invert the line colours for dark themes */
body:not(.vscode-light) .edge path { stroke: white; }
</style> </style>
</head> </head>
<body> <body>
<script src="${panel.webview.asWebviewUri(script_d3)}"></script> ${scripts_html}
<script src="${panel.webview.asWebviewUri(script_wasm)}"></script>
<script src="${panel.webview.asWebviewUri(script_d3_gv)}"></script>
<div id="graph"></div> <div id="graph"></div>
<script> <script>
d3.select("#graph") let graph = d3.select("#graph")
.graphviz() .graphviz()
.fit(true) .fit(true)
.width(window.innerWidth) .zoomScaleExtent([0.1, Infinity])
.height(window.innerHeight)
.renderDot(\`${dot}\`); .renderDot(\`${dot}\`);
d3.select(window).on("click", (event) => {
if (event.ctrlKey) {
graph.resetZoom(d3.transition().duration(100));
}
});
</script> </script>
</body> </body>
`; `;