implemented labels

2 files changed, 30 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
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index 1c91721..6fa7539 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -46,6 +46,8 @@ export const GraphScreen = observer(function GraphScreen() {
     linkWidth: 1,
     particleWidth: 1,
     nodeRel: 1,
+    labels: true,
+    labelScale: 1,
   }
 
   const getData = async () => {