diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-17 15:33:12 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-17 15:33:12 +0200 |
commit | 3a9620e8d13dc3d8e576cf4430080bc6ebc1199a (patch) | |
tree | ed5c2b8f9307934690cf65ce3cb0382bd95cc3d6 /app/components | |
parent | c8b850133a9acf63f421da4643da07d7cfaa7f98 (diff) |
implemented labels
Diffstat (limited to 'app/components')
-rw-r--r-- | app/components/graph/graph.tsx | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 00a4910..efda7f7 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -198,6 +198,34 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} linkDirectionalParticleWidth={physics.particleWidth} + nodeCanvasObject={(node, ctx, globalScale) => { + if(physics.labels){ + if(globalScale > physics.labelScale ) { + const label = node.title; + const fontSize = 12/globalScale; + ctx.font = `${fontSize}px Sans-Serif`; + 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.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions); + + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillStyle = node.color; + ctx.fillText(label, node.x, node.y); + + node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint + console.log(globalScale); + } + } + }} + nodePointerAreaPaint={(node, color, ctx) => { + ctx.fillStyle = color; + const bckgDimensions = node.__bckgDimensions; + bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions); + }} + nodeCanvasObjectMode={()=>'after'} /> ) : ( <ForceGraph3D |