From 47bdd66bcf8cdb90ab31b6f0a129c2120fa01d77 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 17 Jul 2021 17:06:28 +0200 Subject: labels now fade instead of cut in --- app/components/graph/graph.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index bf5aff7..1b3bab8 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -207,12 +207,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { const textWidth = ctx.measureText(label).width; const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding - ctx.fillStyle = 'rgba(20, 20, 20, 0.8)'; + ctx.fillStyle = 'rgba(20, 20, 20, ' + Math.min((globalScale - physics.labelScale)/physics.labelScale, 1) + ')'; ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.fillStyle = "#ffffff"; //node.color; + ctx.fillStyle = 'rgb(255, 255, 255, ' + Math.min(4*(globalScale - physics.labelScale)/physics.labelScale, 1) + ')'; ctx.fillText(label, node.x, node.y); node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint -- cgit v1.2.3