Skip to content

Add SVG restyle to match vscode theme #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jotavemonte wants to merge 7 commits into from
Closed

Add SVG restyle to match vscode theme #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5de578f
Add svg restyle
jotavemonte May 27, 2024
22991f8
Revert "Add svg restyle"
Nov 23, 2024
b08b8c7
add style in dot generation
Nov 24, 2024
c38e21c
use verbose color variables
Nov 24, 2024
4704dd2
refactor: remove getHtmlContent function and integrate styling direct…
jotavemonte Jan 25, 2025
25b2e2c
refactor: improve code readability in dot generation by restructuring…
jotavemonte Jan 25, 2025
1ffd567
feat: adjust colors in exported dot file
jotavemonte Jan 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/dot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@ export function generateDot(graph: CallHierarchyNode, path: string) {
const getNode = (n: CallHierarchyNode) => {
return {
name: `"${n.item.uri.path}#${n.item.name}@${n.item.range.start.line}:${n.item.range.start.character}"`,
attr: { label: n.item.name },
attr: {
label: n.item.name,
color: '$callGraphSecondaryColor',
fillcolor: '$callGraphPrimaryColor',
style: 'filled',
fontcolor: '$callGraphSecondaryColor',
},
subgraph: {
name: n.item.uri.path,
attr: { label: n.item.uri.path.replace(root, '${workspace}') },
Expand Down Expand Up @@ -77,7 +83,12 @@ class Graph {
private _subgraphs = new Map<string, string>()
private _nodes = new Set<Node>()
constructor(title?: string) {
this._dot = 'digraph' + ` ${title ?? ''} {\n`
this._dot =
'digraph' +
` ${title ?? ''} {\n` +
'bgcolor="$callGraphBackgroundColor"\n' +
'color="$callGraphSecondaryColor"\n' +
'fontcolor="$callGraphSecondaryColor"\n'
}
addAttr(attr: Attr) {
this._dot += this.getAttr(attr, true)
Expand All @@ -104,7 +115,7 @@ class Graph {
return child.name + this.getAttr(child.attr)
})
.join(' ')
s += `{${name}} -> {${children}}\n`
s += `{${name}} -> {${children}} [color="$callGraphSecondaryColor"]\n`
} else s += name + '\n'
this._dot += s
this.addNode(
Expand Down
21 changes: 19 additions & 2 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,32 @@
.attr('viewBox', [0, 0, width, height].join(' '))
}

function getEditorColor(property) {
return document
.getElementsByTagName('html')[0]
.style.getPropertyValue(property)
}

;(async function () {
// --- Styling section ---
const BACKGROUND = getEditorColor('--vscode-editor-background')
const PRIMARY = getEditorColor(
'--vscode-list-activeSelectionBackground',
)
const SECONDARY = getEditorColor('--vscode-editor-foreground')

const vscode = acquireVsCodeApi()
// Inject dot file uri: $DOT_FILE_URI
vscode.setState('$DOT_FILE_URI')
const dot = await (await fetch('$DOT_FILE_URI')).text()
const styledDot = dot
.replaceAll('$callGraphBackgroundColor', BACKGROUND)
.replaceAll('$callGraphPrimaryColor', PRIMARY)
.replaceAll('$callGraphSecondaryColor', SECONDARY)
const gv = d3
.select('#app')
.graphviz()
.renderDot(dot, () => {
.renderDot(styledDot, () => {
d3.select(window).on('resize.updatesvg', updateSvgViewBox)
updateSvgViewBox()
})
Expand All @@ -65,7 +82,7 @@
vscode.postMessage({
command: 'download',
type: 'dot',
data: dot,
data: styledDot,
})
})
})()
Expand Down
Loading