diff --git a/dist/workers/graph.js b/dist/workers/graph.js index 71792c1cdc..ec0c1eb02a 100644 --- a/dist/workers/graph.js +++ b/dist/workers/graph.js @@ -61,14 +61,13 @@ let nodes = []; let edges = []; let images = {}; let simulation = null; -let Color = {}; let frame = 0; let selected = []; let settings = {}; let time = 0; let isHovering = false; let edgeMap = new Map(); -let hoverAlpha = 0.2; +let hoverAlpha = 0.3; let fontFamily = 'Helvetica, san-serif'; let timeoutHover = 0; let rootId = ''; @@ -94,7 +93,7 @@ init = (param) => { initFonts(); ctx.lineCap = 'round'; - ctx.fillStyle = Color.bg; + ctx.fillStyle = data.colors.bg; transform = d3.zoomIdentity.translate(0, 0).scale(1.5); simulation = d3.forceSimulation(nodes); @@ -123,33 +122,9 @@ init = (param) => { }; initTheme = (theme) => { - console.log('THEME', theme); - switch (theme) { - default: - hoverAlpha = 0.3; - Color = { - bg: '#fff', - link: '#dfddd0', - arrow: '#b6b6b6', - node: '#b6b6b6', - text: '#b6b6b6', - highlight: '#ffb522', - selected: '#2aa7ee', - }; - break; - case 'dark': hoverAlpha = 0.2; - Color = { - bg: '#171717', - link: '#3f3f3f', - arrow: '#555', - node: '#9a9a9a', - text: '#8d8d8d', - highlight: '#ffb522', - selected: '#2aa7ee', - }; break; }; }; @@ -378,18 +353,16 @@ drawEdge = (d, arrowWidth, arrowHeight, arrowStart, arrowEnd) => { const showName = isOver && d.name && settings.label; const lineWidth = getLineWidth(); - let colorLink = Color.link; - let colorArrow = Color.arrow; - let colorText = Color.text; + let colorLink = data.colors.link; + let colorArrow = data.colors.arrow; + let colorText = data.colors.text; if (isHovering) { ctx.globalAlpha = hoverAlpha; }; if (isOver) { - colorLink = Color.highlight; - colorArrow = Color.highlight; - colorText = Color.highlight; + colorLink = colorArrow = colorText = data.colors.highlight; ctx.globalAlpha = 1; }; @@ -418,7 +391,7 @@ drawEdge = (d, arrowWidth, arrowHeight, arrowStart, arrowEnd) => { ctx.strokeStyle = colorLink; ctx.lineWidth = lineWidth * 3; - ctx.fillStyle = Color.bg; + ctx.fillStyle = data.colors.bg; ctx.fill(); ctx.stroke(); @@ -457,8 +430,8 @@ drawNode = (d) => { const diameter = radius * 2; const isSelected = selected.includes(d.id); - let colorNode = Color.node; - let colorText = Color.text; + let colorNode = data.colors.node; + let colorText = data.colors.text; let colorLine = ''; let lineWidth = 0; @@ -479,17 +452,13 @@ drawNode = (d) => { }; if (d.isOver || (root && (d.id == root.id))) { - colorNode = Color.highlight; - colorText = Color.highlight; - colorLine = Color.highlight; + colorNode = colorText = colorLine = data.colors.highlight; lineWidth = getLineWidth() * 3; ctx.globalAlpha = 1; }; if (isSelected) { - colorNode = Color.selected; - colorText = Color.selected; - colorLine = Color.selected; + colorNode = colorText = colorLine = data.colors.selected; }; if (d.isOver || isSelected) { @@ -501,7 +470,7 @@ drawNode = (d) => { if (lineWidth) { util.roundedRect(d.x - radius - lineWidth * 2, d.y - radius - lineWidth * 2, diameter + lineWidth * 4, diameter + lineWidth * 4, getBorderRadius()); - ctx.fillStyle = Color.bg; + ctx.fillStyle = data.colors.bg; ctx.fill(); ctx.strokeStyle = colorLine; @@ -524,7 +493,7 @@ drawNode = (d) => { util.roundedRect(d.x - radius, d.y - radius, diameter, diameter, getBorderRadius()); }; - ctx.fillStyle = Color.bg; + ctx.fillStyle = data.colors.bg; ctx.fill(); ctx.clip(); @@ -558,7 +527,7 @@ drawNode = (d) => { // Rectangle ctx.save(); ctx.translate(d.x, d.y); - ctx.fillStyle = Color.bg; + ctx.fillStyle = data.colors.bg; util.rect(left, top + diameter + offset, tw, th); ctx.fill(); diff --git a/src/ts/component/util/graph.tsx b/src/ts/component/util/graph.tsx index e24152ebad..8c05eea57f 100644 --- a/src/ts/component/util/graph.tsx +++ b/src/ts/component/util/graph.tsx @@ -126,7 +126,7 @@ const Graph = observer(class Graph extends React.Component { nodes: this.nodes, edges: this.edges, theme: theme, - colors: Theme[theme], + colors: Theme[theme].graph || {}, settings: commonStore.graph, rootId, }, [ transfer ]);