commit

Author: Anchel123

app/components/graphView.tsx

@@ -265,19 +265,19 @@ export default function GraphView({
                         textY = rotatedY;
                     }
 
-                    // Get text width
-                    const label = graph.LabelsMap.get(link.label)!
-                    let { textWidth } = label
-
-                    if (!textWidth) {
-                        textWidth = ctx.measureText(link.label).width;
-                        graph.LabelsMap.set(link.label, { ...label, textWidth })
-                    }
-
                     // Setup text properties to measure background size
                     ctx.font = '2px Arial';
                     const padding = 0.5;
-                    const textHeight = 2; // Approximate height for 2px font
+                    // Get text width and height
+                    const label = graph.LabelsMap.get(link.label)!
+                    let { textWidth, textHeight } = label
+
+                    if (!textWidth || !textHeight) {
+                        const { width, actualBoundingBoxAscent, actualBoundingBoxDescent } = ctx.measureText(link.label)
+                        textWidth = width
+                        textHeight = actualBoundingBoxAscent + actualBoundingBoxDescent
+                        graph.LabelsMap.set(link.label, { ...label, textWidth, textHeight })
+                    }
 
                     // Save the current context state
                     ctx.save();

app/components/model.ts

@@ -14,6 +14,7 @@ export interface Category {
 export interface Label {
   name: string,
   textWidth: number,
+  textHeight: number,
 }
 
 export type Node = NodeObject<{
@@ -225,7 +226,7 @@ export class Graph {
 
       let label = this.labelsMap.get(edgeData.relation)
       if (!label) {
-        label = { name: edgeData.relation, textWidth: 0 }
+        label = { name: edgeData.relation, textWidth: 0, textHeight: 0 }
         this.labelsMap.set(edgeData.relation, label)
         this.labels.push(label)
       }