From 3a9620e8d13dc3d8e576cf4430080bc6ebc1199a Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sat, 17 Jul 2021 15:33:12 +0200
Subject: implemented labels

---
 app/components/graph/graph.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'app/components/graph/graph.tsx')

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
-- 
cgit v1.2.3