Merge branch 'mobile-version' of https://github.com/FalkorDB/code-graph into mobile-version

Author: Naseem77

app/components/graphView.tsx

@@ -273,38 +273,77 @@ export default function GraphView({
 
                     if (!start.x || !start.y || !end.x || !end.y) return
 
+                    let textX, textY, angle;
+
                     if (start.id === end.id) {
                         const radius = NODE_SIZE * link.curve * 6.2;
                         const angleOffset = -Math.PI / 4; // 45 degrees offset for text alignment
-                        const textX = start.x + radius * Math.cos(angleOffset);
-                        const textY = start.y + radius * Math.sin(angleOffset);
-
-                        ctx.save();
-                        ctx.translate(textX, textY);
-                        ctx.rotate(-angleOffset);
+                        textX = start.x + radius * Math.cos(angleOffset);
+                        textY = start.y + radius * Math.sin(angleOffset);
+                        angle = -angleOffset;
                     } else {
-                        const midX = (start.x + end.x) / 2 + (end.y - start.y) * (link.curve / 2);
-                        const midY = (start.y + end.y) / 2 + (start.x - end.x) * (link.curve / 2);
+                        const midX = (start.x + end.x) / 2;
+                        const midY = (start.y + end.y) / 2;
+                        const offset = link.curve / 2;
 
-                        let textAngle = Math.atan2(end.y - start.y, end.x - start.x)
+                        angle = Math.atan2(end.y - start.y, end.x - start.x);
 
                         // maintain label vertical orientation for legibility
-                        if (textAngle > Math.PI / 2) textAngle = -(Math.PI - textAngle);
-                        if (textAngle < -Math.PI / 2) textAngle = -(-Math.PI - textAngle);
+                        if (angle > Math.PI / 2) angle = -(Math.PI - angle);
+                        if (angle < -Math.PI / 2) angle = -(-Math.PI - angle);
+
+                        // Calculate perpendicular offset
+                        const perpX = -Math.sin(angle) * offset;
+                        const perpY = Math.cos(angle) * offset;
+
+                        // Adjust position to compensate for rotation around origin
+                        const cos = Math.cos(angle);
+                        const sin = Math.sin(angle);
+                        textX = midX + perpX;
+                        textY = midY + perpY;
+                        const rotatedX = textX * cos + textY * sin;
+                        const rotatedY = -textX * sin + textY * cos;
+                        textX = rotatedX;
+                        textY = rotatedY;
+                    }
 
-                        ctx.save();
-                        ctx.translate(midX, midY);
-                        ctx.rotate(textAngle);
+                    // Setup text properties to measure background size
+                    ctx.font = '2px Arial';
+                    const padding = 0.5;
+                    // 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 })
                     }
 
-                    // add label
+                    // Save the current context state
+                    ctx.save();
+
+                    // add label with background and rotation
+                    ctx.rotate(angle);
+
+                    // Draw background
+                    ctx.fillStyle = 'white';
+                    ctx.fillRect(
+                        textX - textWidth / 2 - padding,
+                        textY - textHeight / 2 - padding,
+                        textWidth + padding * 2,
+                        textHeight + padding * 2
+                    );
+
+                    // Draw text
                     ctx.globalAlpha = 1;
                     ctx.fillStyle = 'black';
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
-                    ctx.font = '2px Arial';
-                    ctx.fillText(link.label, 0, 0);
-                    ctx.restore()
+                    ctx.fillText(link.label, textX, textY);
+
+                    ctx.restore(); // reset rotation
                 }}
                 onNodeClick={screenSize > Number(process.env.NEXT_PUBLIC_MOBILE_BREAKPOINT) || isShowPath ? handleNodeClick : handleRightClick}
                 onNodeRightClick={handleRightClick}

app/components/model.ts

@@ -11,6 +11,12 @@ export interface Category {
   show: boolean,
 }
 
+export interface Label {
+  name: string,
+  textWidth: number,
+  textHeight: number,
+}
+
 export type Node = NodeObject<{
   id: number,
   name: string,
@@ -62,18 +68,21 @@ export class Graph {
 
   private id: string;
   private categories: Category[];
+  private labels: Label[];
   private elements: GraphData;
-
   private categoriesMap: Map<string, Category>;
+  private labelsMap: Map<string, Label>;
   private nodesMap: Map<number, Node>;
   private linksMap: Map<number, Link>;
 
-  private constructor(id: string, categories: Category[], elements: GraphData,
-    categoriesMap: Map<string, Category>, nodesMap: Map<number, Node>, edgesMap: Map<number, Link>) {
+  private constructor(id: string, categories: Category[], labels: Label[], elements: GraphData,
+    categoriesMap: Map<string, Category>, labelsMap: Map<string, Label>, nodesMap: Map<number, Node>, edgesMap: Map<number, Link>) {
     this.id = id;
     this.categories = categories;
+    this.labels = labels;
     this.elements = elements;
     this.categoriesMap = categoriesMap;
+    this.labelsMap = labelsMap;
     this.nodesMap = nodesMap;
     this.linksMap = edgesMap;
   }
@@ -90,6 +99,14 @@ export class Graph {
     return this.categoriesMap;
   }
 
+  get Labels(): Label[] {
+    return this.labels;
+  }
+
+  get LabelsMap(): Map<string, Label> {
+    return this.labelsMap;
+  }
+
   get Elements(): GraphData {
     return this.elements;
   }
@@ -111,7 +128,7 @@ export class Graph {
   }
 
   public static empty(): Graph {
-    return new Graph("", [], { nodes: [], links: [] }, new Map<string, Category>(), new Map<number, Node>(), new Map<number, Link>())
+    return new Graph("", [], [], { nodes: [], links: [] }, new Map<string, Category>(), new Map<string, Label>(), new Map<number, Node>(), new Map<number, Link>())
   }
 
   public static create(results: any, graphName: string): Graph {
@@ -207,6 +224,13 @@ export class Graph {
         this.nodesMap.set(edgeData.dest_node, target)
       }
 
+      let label = this.labelsMap.get(edgeData.relation)
+      if (!label) {
+        label = { name: edgeData.relation, textWidth: 0, textHeight: 0 }
+        this.labelsMap.set(edgeData.relation, label)
+        this.labels.push(label)
+      }
+
       link = {
         id: edgeData.id,
         source,