@falkordb/canvas 0.0.40 → 0.0.42

package/dist/canvas.js

@@ -3,6 +3,16 @@ import ForceGraph from "force-graph";
 import * as d3 from "d3";
 import { dataToGraphData, getContrastTextColor, getNodeDisplayText, graphDataToData, LINK_DISTANCE, wrapTextForCircularNode, } from "./canvas-utils.js";
 const PADDING = 2;
+// Arrow geometry constants (shared by self-loop and regular-link drawing paths)
+const ARROW_WH_RATIO = 1.6;
+const ARROW_VLEN_RATIO = 0.2;
+// Multiplier to convert node size → cubic bezier control-point distance for self-loops
+const SELF_LOOP_CURVE_FACTOR = 11.67;
+// Base font size used for the initial measurement and for two-line text.
+const NODE_FONT_SIZE_BASE = 2;
+// Fraction of the chord width that single-line text should fill (0–1).
+// Leaves (1 - ratio)/2 of the radius as horizontal padding on each side.
+const NODE_TEXT_FILL_RATIO = 0.85;
 // Force constants
 const CHARGE_STRENGTH = -400;
 const CENTER_STRENGTH = 0.03;
@@ -54,10 +64,17 @@ class FalkorDBCanvas extends HTMLElement {
             captionsKeys: [],
             showPropertyKeyPrefix: false,
         };
-        this.nodeMode = 'after';
-        this.linkMode = 'after';
+        this.nodeMode = 'replace';
+        this.linkMode = 'replace';
         this.nodeDegreeMap = new Map();
+        // Per-node font size cache: computed once per node, read every frame.
+        this.nodeDisplayFontSize = new Map();
         this.relationshipsTextCache = new Map();
+        this.onFontsLoadingDone = () => {
+            this.relationshipsTextCache.clear();
+            this.nodeDisplayFontSize.clear();
+            this.triggerRender();
+        };
         this.attachShadow({ mode: "open" });
     }
     /**
@@ -92,9 +109,14 @@ class FalkorDBCanvas extends HTMLElement {
         }
         this.log('Component connected to DOM');
         this.render();
+        // Text measurements taken before the custom font finishes loading use the
+        // fallback system font and produce wrong widths that get locked in the cache.
+        // Re-measure on every font-load batch (including the initial one).
+        document.fonts.addEventListener("loadingdone", this.onFontsLoadingDone);
     }
     disconnectedCallback() {
         this.log('Component disconnected from DOM');
+        document.fonts.removeEventListener("loadingdone", this.onFontsLoadingDone);
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
             this.resizeObserver = null;
@@ -396,25 +418,12 @@ class FalkorDBCanvas extends HTMLElement {
             .height(this.config.height || 600)
             .backgroundColor(this.config.backgroundColor)
             .graphData(this.data)
-            .nodeRelSize(1)
-            .nodeVal((node) => {
-            const strokeWidth = this.config.isNodeSelected?.(node) ? 1.5 : 1;
-            const radius = node.size + strokeWidth;
-            return radius * radius; // Return radius squared since force-graph does sqrt(val * relSize)
-        })
             .nodeCanvasObjectMode(() => this.nodeMode)
             .linkCanvasObjectMode(() => this.linkMode)
             .nodeLabel((node) => getNodeDisplayText(node, this.config.captionsKeys, this.config.showPropertyKeyPrefix))
             .linkLabel((link) => link.relationship)
-            .linkDirectionalArrowRelPos(1)
-            .linkDirectionalArrowLength((link) => {
-            if (link.source === link.target)
-                return 0;
-            return this.config.isLinkSelected?.(link) ? 4 : 2;
-        })
-            .linkDirectionalArrowColor((link) => link.color)
-            .linkWidth((link) => this.config.isLinkSelected?.(link) ? 2 : 1)
-            .linkLineDash((link) => this.config.linkLineDash?.(link) ?? null)
+            .linkDirectionalArrowLength(0)
+            .linkWidth(0)
             .linkCurvature("curve")
             .linkVisibility("visible")
             .nodeVisibility("visible")
@@ -485,20 +494,28 @@ class FalkorDBCanvas extends HTMLElement {
         })
             .linkCanvasObject((link, ctx, globalScale) => {
             if (this.config.link) {
-                this.config.link.linkCanvasObject(link, ctx);
+                this.config.link.linkCanvasObject(link, ctx, globalScale);
             }
             else {
                 this.drawLink(link, ctx, globalScale);
             }
+        })
+            .nodePointerAreaPaint((node, color, ctx) => {
+            if (this.config.node) {
+                this.config.node.nodePointerAreaPaint(node, color, ctx);
+            }
+            else {
+                this.pointerNode(node, color, ctx);
+            }
+        })
+            .linkPointerAreaPaint((link, color, ctx) => {
+            if (this.config.link) {
+                this.config.link.linkPointerAreaPaint(link, color, ctx);
+            }
+            else {
+                this.pointerLink(link, color, ctx);
+            }
         });
-        // Only set pointer area paint if custom node/link configs are provided
-        if (this.config.node) {
-            this.graph?.nodePointerAreaPaint(this.config.node?.nodePointerAreaPaint);
-        }
-        if (this.config.link) {
-            this.graph?.linkPointerAreaPaint(this.config.link?.linkPointerAreaPaint);
-        }
-        ;
         // Setup forces
         this.setupForces();
         this.log('Force graph initialization complete');
@@ -541,11 +558,11 @@ class FalkorDBCanvas extends HTMLElement {
         this.log('Force simulation setup complete');
     }
     drawNode(node, ctx) {
-        if (!node.x || !node.y) {
+        if (node.x === undefined || node.y === undefined) {
             node.x = 0;
             node.y = 0;
         }
-        ctx.lineWidth = this.config.isNodeSelected?.(node) ? 1.5 : 1;
+        ctx.lineWidth = this.config.isNodeSelected?.(node) ? 1 : 0.5;
         ctx.strokeStyle = this.config.foregroundColor;
         ctx.fillStyle = node.color;
         const radius = node.size + ctx.lineWidth / 2;
@@ -559,13 +576,30 @@ class FalkorDBCanvas extends HTMLElement {
         ctx.fillStyle = getContrastTextColor(node.color);
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = "400 2px SofiaSans";
         let [line1, line2] = node.displayName;
+        const textRadius = node.size - PADDING / 2;
         if (!line1 && !line2) {
             const text = getNodeDisplayText(node, this.config.captionsKeys, this.config.showPropertyKeyPrefix);
-            const textRadius = node.size - PADDING / 2;
+            // Measure at the base (smallest) size — one cheap measurement.
+            ctx.font = `400 ${NODE_FONT_SIZE_BASE}px SofiaSans`;
             [line1, line2] = wrapTextForCircularNode(ctx, text, textRadius);
+            let chosenSize = NODE_FONT_SIZE_BASE;
+            if (!line2) {
+                // Single-line: scale up so the text fills NODE_TEXT_FILL_RATIO of the
+                // available chord. Font metrics scale linearly so this is exact.
+                const measuredWidth = ctx.measureText(line1).width;
+                if (measuredWidth > 0) {
+                    chosenSize = NODE_FONT_SIZE_BASE * (NODE_TEXT_FILL_RATIO * 2 * textRadius / measuredWidth);
+                }
+            }
+            ctx.font = `400 ${chosenSize}px SofiaSans`;
             node.displayName = [line1, line2];
+            this.nodeDisplayFontSize.set(node.id, chosenSize);
+        }
+        else {
+            // Cache hit: the font size was stored when displayName was first computed.
+            const chosenSize = this.nodeDisplayFontSize.get(node.id) ?? NODE_FONT_SIZE_BASE;
+            ctx.font = `400 ${chosenSize}px SofiaSans`;
         }
         const textMetrics = ctx.measureText(line1);
         const textHeight = textMetrics.actualBoundingBoxAscent +
@@ -578,10 +612,22 @@ class FalkorDBCanvas extends HTMLElement {
             ctx.fillText(line2, node.x, node.y + halfTextHeight);
         }
     }
+    pointerNode(node, color, ctx) {
+        if (node.x === undefined || node.y === undefined) {
+            node.x = 0;
+            node.y = 0;
+        }
+        ;
+        const radius = node.size + PADDING;
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
+        ctx.fill();
+    }
     drawLink(link, ctx, globalScale) {
         const start = link.source;
         const end = link.target;
-        if (!start.x || !start.y || !end.x || !end.y) {
+        if (start.x === undefined || start.y === undefined || end.x === undefined || end.y === undefined) {
             start.x = 0;
             start.y = 0;
             end.x = 0;
@@ -590,21 +636,25 @@ class FalkorDBCanvas extends HTMLElement {
         let textX;
         let textY;
         let angle;
+        const isLinkSelected = this.config.isLinkSelected?.(link) ?? false;
+        const arrowLen = isLinkSelected ? 4 : 2;
+        // Deferred arrowhead — drawn after the label so it is never covered by
+        // the label background rect (which happens for short links where the
+        // bezier midpoint and the arrow tip are at almost the same position).
+        let pendingArrow = null;
         if (start.id === end.id) {
             const nodeSize = start.size || 6;
-            const d = (link.curve || 0) * nodeSize * 11.67;
-            ctx.lineWidth = (this.config.isLinkSelected?.(link) ? 2 : 1) / globalScale;
+            const d = (link.curve || 0) * nodeSize * SELF_LOOP_CURVE_FACTOR;
+            ctx.lineWidth = (isLinkSelected ? 2 : 1) / globalScale;
+            ctx.setLineDash(this.config.linkLineDash?.(link) ?? []);
             // The visible outer edge of the node border is nodeSize + strokeWidth
             // (stroke is centered on nodeSize + strokeWidth/2, so outer edge = nodeSize + strokeWidth).
-            const nodeStrokeWidth = this.config.isNodeSelected?.(start) ? 1.5 : 1;
-            const borderRadius = nodeSize + nodeStrokeWidth;
+            const nodeStrokeWidth = this.config.isNodeSelected?.(start) ? 1 : 0.5;
+            const borderRadius = nodeSize + nodeStrokeWidth + PADDING;
             // Binary search for tArrow near 1.0 where the curve is at distance borderRadius
             // from the node center (i.e. on the outer edge of the node border stroke).
             // Bezier parametric form: Bx(t)=sx+3(1-t)t²d, By(t)=sy-3(1-t)²td
             // dist(t) = 3*(1-t)*t*|d|*sqrt(t² + (1-t)²)
-            const ARROW_WH_RATIO = 1.6;
-            const ARROW_VLEN_RATIO = 0.2;
-            const arrowLen = this.config.isLinkSelected?.(link) ? 4 : 2;
             const arrowHalfWidth = arrowLen / ARROW_WH_RATIO / 2;
             let lo = 0.5, hi = 1.0;
             const absD = Math.abs(d);
@@ -646,6 +696,7 @@ class FalkorDBCanvas extends HTMLElement {
                 ctx.bezierCurveTo(start.x, start.y - d, start.x + d, start.y, start.x, start.y);
             }
             ctx.stroke();
+            ctx.setLineDash([]);
             // Tangent at tArrow (direction the curve travels toward the node)
             const tdx = 3 * d * tArrow * (2 - 3 * tArrow);
             const tdy = -3 * d * uArrow * (1 - 3 * tArrow);
@@ -656,13 +707,7 @@ class FalkorDBCanvas extends HTMLElement {
             if (tLen !== 0 && canReachBorder) {
                 const nx = tdx / tLen;
                 const ny = tdy / tLen;
-                ctx.fillStyle = link.color;
-                ctx.beginPath();
-                ctx.moveTo(tipX, tipY);
-                ctx.lineTo(tipX - nx * arrowLen + ny * arrowHalfWidth, tipY - ny * arrowLen - nx * arrowHalfWidth);
-                ctx.lineTo(tipX - nx * arrowLen * (1 - ARROW_VLEN_RATIO), tipY - ny * arrowLen * (1 - ARROW_VLEN_RATIO));
-                ctx.lineTo(tipX - nx * arrowLen - ny * arrowHalfWidth, tipY - ny * arrowLen + nx * arrowHalfWidth);
-                ctx.fill();
+                pendingArrow = { tipX, tipY, nx, ny, arrowLen, arrowHalfWidth };
             }
             // Midpoint of cubic bezier: P0=(sx,sy), P1=(sx,sy-d), P2=(sx+d,sy), P3=(sx,sy)
             textX = start.x + 0.375 * d;
@@ -678,6 +723,11 @@ class FalkorDBCanvas extends HTMLElement {
             const dx = end.x - start.x;
             const dy = end.y - start.y;
             const distance = Math.sqrt(dx * dx + dy * dy);
+            // Guard: skip drawing when source and target are co-located (e.g. during
+            // simulation start-up). perpX/perpY would be NaN and propagate through
+            // all downstream bezier and arrowhead calculations.
+            if (distance === 0)
+                return;
             const perpX = dy / distance;
             const perpY = -dx / distance;
             const curvature = link.curve || 0;
@@ -700,25 +750,118 @@ class FalkorDBCanvas extends HTMLElement {
                 angle = -(Math.PI - angle);
             if (angle < -Math.PI / 2)
                 angle = -(-Math.PI - angle);
+            // Draw regular link line and arrowhead
+            const arrowHalfWidth = arrowLen / ARROW_WH_RATIO / 2;
+            // Target-side clip: find t where bezier enters target node border + PADDING
+            const endNodeSize = end.size || 6;
+            const borderRadius = endNodeSize + (this.config.isNodeSelected?.(end) ? 1 : 0.5) + PADDING;
+            const borderRadiusSq = borderRadius * borderRadius;
+            let tArrow;
+            if (borderRadius / distance < 0.02) {
+                tArrow = Math.min(1, Math.max(0, 1 - borderRadius / distance));
+            }
+            else {
+                let lo = 0.5, hi = 1.0;
+                for (let i = 0; i < 10; i++) {
+                    const mid = (lo + hi) / 2;
+                    const um = 1 - mid;
+                    const qx = um * um * start.x + 2 * um * mid * controlX + mid * mid * end.x;
+                    const qy = um * um * start.y + 2 * um * mid * controlY + mid * mid * end.y;
+                    const dxEnd = qx - end.x;
+                    const dyEnd = qy - end.y;
+                    if (dxEnd * dxEnd + dyEnd * dyEnd > borderRadiusSq)
+                        lo = mid;
+                    else
+                        hi = mid;
+                    if (hi - lo < 1e-3)
+                        break;
+                }
+                tArrow = (lo + hi) / 2;
+            }
+            const uArrow = 1 - tArrow;
+            const tipX = uArrow * uArrow * start.x + 2 * uArrow * tArrow * controlX + tArrow * tArrow * end.x;
+            const tipY = uArrow * uArrow * start.y + 2 * uArrow * tArrow * controlY + tArrow * tArrow * end.y;
+            // Source-side clip: find t where bezier exits source node border + PADDING
+            const startNodeSize = start.size || 6;
+            const srcBorderRadius = startNodeSize + (this.config.isNodeSelected?.(start) ? 1 : 0.5) + PADDING;
+            const srcBorderRadiusSq = srcBorderRadius * srcBorderRadius;
+            let tStart = 0;
+            if (srcBorderRadius / distance < 0.02) {
+                tStart = Math.min(0.5, srcBorderRadius / distance);
+            }
+            else {
+                let lo = 0.0, hi = 0.5;
+                for (let i = 0; i < 10; i++) {
+                    const mid = (lo + hi) / 2;
+                    const um = 1 - mid;
+                    const qx = um * um * start.x + 2 * um * mid * controlX + mid * mid * end.x;
+                    const qy = um * um * start.y + 2 * um * mid * controlY + mid * mid * end.y;
+                    const dxSrc = qx - start.x;
+                    const dySrc = qy - start.y;
+                    if (dxSrc * dxSrc + dySrc * dySrc < srcBorderRadiusSq)
+                        lo = mid;
+                    else
+                        hi = mid;
+                    if (hi - lo < 1e-3)
+                        break;
+                }
+                tStart = (lo + hi) / 2;
+            }
+            // Gap start point: Q(tStart)
+            const uS = 1 - tStart;
+            const gapStartX = uS * uS * start.x + 2 * uS * tStart * controlX + tStart * tStart * end.x;
+            const gapStartY = uS * uS * start.y + 2 * uS * tStart * controlY + tStart * tStart * end.y;
+            // Sub-bezier [tStart, tArrow] control point via De Casteljau:
+            //   Right sub-bezier at tStart → NewP1 = lerp(control, end, tStart)
+            //   Left sub-curve at tArrow' = (tArrow-tStart)/(1-tStart) → ctrl = lerp(gapStart, NewP1, tArrow')
+            const tArrowPrime = tStart < tArrow ? (tArrow - tStart) / (1 - tStart) : 0;
+            const newP1X = (1 - tStart) * controlX + tStart * end.x;
+            const newP1Y = (1 - tStart) * controlY + tStart * end.y;
+            const subCtrlX = (1 - tArrowPrime) * gapStartX + tArrowPrime * newP1X;
+            const subCtrlY = (1 - tArrowPrime) * gapStartY + tArrowPrime * newP1Y;
+            ctx.strokeStyle = link.color;
+            ctx.lineWidth = (isLinkSelected ? 2 : 1) / globalScale;
+            ctx.setLineDash(this.config.linkLineDash?.(link) ?? []);
+            ctx.beginPath();
+            ctx.moveTo(gapStartX, gapStartY);
+            ctx.quadraticCurveTo(subCtrlX, subCtrlY, tipX, tipY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            const atx = 2 * uArrow * (controlX - start.x) + 2 * tArrow * (end.x - controlX);
+            const aty = 2 * uArrow * (controlY - start.y) + 2 * tArrow * (end.y - controlY);
+            const atLen = Math.sqrt(atx * atx + aty * aty);
+            if (atLen !== 0) {
+                const nx = atx / atLen;
+                const ny = aty / atLen;
+                pendingArrow = { tipX, tipY, nx, ny, arrowLen, arrowHalfWidth };
+            }
         }
-        ctx.font = "400 2px SofiaSans";
+        ctx.font = isLinkSelected ? "700 2px SofiaSans" : "400 2px SofiaSans";
         ctx.textAlign = "center";
         // Draw text with alphabetic baseline, positioned so visual center is at y=0
         ctx.textBaseline = "alphabetic";
-        let cached = this.relationshipsTextCache.get(link.relationship);
+        // Separate cache entries per weight so each state is measured with its own
+        // font, giving equal visual padding regardless of selection state.
+        const cacheKey = `${link.relationship}_${isLinkSelected ? "700" : "400"}`;
+        let cached = this.relationshipsTextCache.get(cacheKey);
         if (!cached) {
+            // ctx.font is already set to the correct weight above; measure it directly.
             const metrics = ctx.measureText(link.relationship);
-            // Use font-level metrics for consistent height across all texts
-            const fontAscent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
-            const fontDescent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
-            // Calculate visual center offset from baseline using font-level metrics
-            const visualCenter = (fontAscent - fontDescent) / 2;
+            // Use actual ink bounds for vertical metrics; fontBoundingBox* is the full
+            // line-box and adds excessive space for lighter weights.
+            // Use metrics.width for horizontal extent: actualBoundingBoxLeft/Right are
+            // unreliable with textAlign="center" and can double the value on some engines.
+            const inkAscent = metrics.actualBoundingBoxAscent ?? metrics.fontBoundingBoxAscent;
+            const inkDescent = metrics.actualBoundingBoxDescent ?? metrics.fontBoundingBoxDescent;
+            const inkWidth = metrics.width;
+            const bgPadding = 0.3;
             cached = {
-                textWidth: metrics.width,
-                textHeight: fontAscent + fontDescent,
-                textYOffset: visualCenter,
+                textWidth: inkWidth + bgPadding * 2,
+                textHeight: inkAscent + inkDescent + bgPadding * 2,
+                // Shift baseline up so the ink block is centred inside the bg rect.
+                textYOffset: (inkAscent - inkDescent) / 2,
             };
-            this.relationshipsTextCache.set(link.relationship, cached);
+            this.relationshipsTextCache.set(cacheKey, cached);
         }
         const { textWidth, textHeight, textYOffset } = cached;
         ctx.save();
@@ -731,6 +874,150 @@ class FalkorDBCanvas extends HTMLElement {
         ctx.fillStyle = getContrastTextColor(this.config.backgroundColor);
         ctx.fillText(link.relationship, 0, textYOffset);
         ctx.restore();
+        // Draw arrowhead last so it always appears on top of the label background.
+        if (pendingArrow) {
+            const { tipX, tipY, nx, ny, arrowLen: aLen, arrowHalfWidth: aHW } = pendingArrow;
+            ctx.fillStyle = link.color;
+            ctx.beginPath();
+            ctx.moveTo(tipX, tipY);
+            ctx.lineTo(tipX - nx * aLen + ny * aHW, tipY - ny * aLen - nx * aHW);
+            ctx.lineTo(tipX - nx * aLen * (1 - ARROW_VLEN_RATIO), tipY - ny * aLen * (1 - ARROW_VLEN_RATIO));
+            ctx.lineTo(tipX - nx * aLen - ny * aHW, tipY - ny * aLen + nx * aHW);
+            ctx.fill();
+        }
+    }
+    pointerLink(link, color, ctx) {
+        const start = link.source;
+        const end = link.target;
+        if (start.x == null || start.y == null || end.x == null || end.y == null)
+            return;
+        ctx.strokeStyle = color;
+        const basePointerWidth = 10; // Desired on-screen pointer area thickness
+        const transform = typeof ctx.getTransform === 'function' ? ctx.getTransform() : null;
+        if (transform) {
+            const scaleX = Math.hypot(transform.a, transform.c);
+            const scaleY = Math.hypot(transform.b, transform.d);
+            const avgScale = (scaleX + scaleY) / 2 || 1;
+            ctx.lineWidth = basePointerWidth / avgScale;
+        }
+        else {
+            ctx.lineWidth = basePointerWidth;
+        }
+        ctx.beginPath();
+        if (start.id === end.id) {
+            // Self-loop: replicate exact cubic bezier clip from drawLink
+            const nodeSize = start.size || 6;
+            const d = (link.curve || 0) * nodeSize * SELF_LOOP_CURVE_FACTOR;
+            const nodeStrokeWidth = this.config.isNodeSelected?.(start) ? 1 : 0.5;
+            const borderRadius = nodeSize + nodeStrokeWidth + PADDING;
+            const absD = Math.abs(d);
+            const maxReachableDist = 3 * 0.5 * 0.5 * absD * Math.sqrt(0.5);
+            const canReachBorder = absD > 0 && maxReachableDist >= borderRadius;
+            ctx.moveTo(start.x, start.y);
+            if (canReachBorder) {
+                let lo = 0.5, hi = 1.0;
+                for (let i = 0; i < 20; i++) {
+                    const mid = (lo + hi) / 2;
+                    const um = 1 - mid;
+                    const dist = 3 * um * mid * absD * Math.sqrt(mid * mid + um * um);
+                    if (dist > borderRadius)
+                        lo = mid;
+                    else
+                        hi = mid;
+                }
+                const tArrow = (lo + hi) / 2;
+                const uArrow = 1 - tArrow;
+                const tipX = start.x + 3 * uArrow * tArrow * tArrow * d;
+                const tipY = start.y - 3 * uArrow * uArrow * tArrow * d;
+                ctx.bezierCurveTo(start.x, start.y - tArrow * d, start.x + tArrow * tArrow * d, start.y - 2 * tArrow * uArrow * d, tipX, tipY);
+            }
+            else {
+                ctx.bezierCurveTo(start.x, start.y - d, start.x + d, start.y, start.x, start.y);
+            }
+        }
+        else {
+            // Regular link: replicate exact quadratic bezier clip from drawLink
+            const dx = end.x - start.x;
+            const dy = end.y - start.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const curvature = link.curve || 0;
+            if (distance === 0) {
+                ctx.moveTo(start.x, start.y);
+                ctx.lineTo(end.x, end.y);
+            }
+            else {
+                const perpX = dy / distance;
+                const perpY = -dx / distance;
+                const controlX = (start.x + end.x) / 2 + perpX * curvature * distance;
+                const controlY = (start.y + end.y) / 2 + perpY * curvature * distance;
+                // Use the same borderRadius and binary-search clip as drawLink
+                const endNodeSize = end.size || 6;
+                const borderRadius = endNodeSize + (this.config.isNodeSelected?.(end) ? 1 : 0.5) + PADDING;
+                const borderRadiusSq = borderRadius * borderRadius;
+                let tArrow;
+                if (borderRadius / distance < 0.02) {
+                    tArrow = Math.min(1, Math.max(0, 1 - borderRadius / distance));
+                }
+                else {
+                    let lo = 0.5, hi = 1.0;
+                    for (let i = 0; i < 10; i++) {
+                        const mid = (lo + hi) / 2;
+                        const um = 1 - mid;
+                        const qx = um * um * start.x + 2 * um * mid * controlX + mid * mid * end.x;
+                        const qy = um * um * start.y + 2 * um * mid * controlY + mid * mid * end.y;
+                        const dxEnd = qx - end.x;
+                        const dyEnd = qy - end.y;
+                        if (dxEnd * dxEnd + dyEnd * dyEnd > borderRadiusSq)
+                            lo = mid;
+                        else
+                            hi = mid;
+                        if (hi - lo < 1e-3)
+                            break;
+                    }
+                    tArrow = (lo + hi) / 2;
+                }
+                const uArrow = 1 - tArrow;
+                const tipX = uArrow * uArrow * start.x + 2 * uArrow * tArrow * controlX + tArrow * tArrow * end.x;
+                const tipY = uArrow * uArrow * start.y + 2 * uArrow * tArrow * controlY + tArrow * tArrow * end.y;
+                // Source-side clip: mirror of drawLink source gap
+                const startNodeSize = start.size || 6;
+                const srcBorderRadius = startNodeSize + (this.config.isNodeSelected?.(start) ? 1 : 0.5) + PADDING;
+                const srcBorderRadiusSq = srcBorderRadius * srcBorderRadius;
+                let tStart = 0;
+                if (srcBorderRadius / distance < 0.02) {
+                    tStart = Math.min(0.5, srcBorderRadius / distance);
+                }
+                else {
+                    let lo = 0.0, hi = 0.5;
+                    for (let i = 0; i < 10; i++) {
+                        const mid = (lo + hi) / 2;
+                        const um = 1 - mid;
+                        const qx = um * um * start.x + 2 * um * mid * controlX + mid * mid * end.x;
+                        const qy = um * um * start.y + 2 * um * mid * controlY + mid * mid * end.y;
+                        const dxSrc = qx - start.x;
+                        const dySrc = qy - start.y;
+                        if (dxSrc * dxSrc + dySrc * dySrc < srcBorderRadiusSq)
+                            lo = mid;
+                        else
+                            hi = mid;
+                        if (hi - lo < 1e-3)
+                            break;
+                    }
+                    tStart = (lo + hi) / 2;
+                }
+                const uS = 1 - tStart;
+                const gapStartX = uS * uS * start.x + 2 * uS * tStart * controlX + tStart * tStart * end.x;
+                const gapStartY = uS * uS * start.y + 2 * uS * tStart * controlY + tStart * tStart * end.y;
+                const tArrowPrime = tStart < tArrow ? (tArrow - tStart) / (1 - tStart) : 0;
+                const newP1X = (1 - tStart) * controlX + tStart * end.x;
+                const newP1Y = (1 - tStart) * controlY + tStart * end.y;
+                const subCtrlX = (1 - tArrowPrime) * gapStartX + tArrowPrime * newP1X;
+                const subCtrlY = (1 - tArrowPrime) * gapStartY + tArrowPrime * newP1Y;
+                ctx.moveTo(gapStartX, gapStartY);
+                ctx.quadraticCurveTo(subCtrlX, subCtrlY, tipX, tipY);
+            }
+        }
+        ctx.stroke();
     }
     updateLoadingState() {
         if (!this.loadingOverlay)
@@ -854,7 +1141,7 @@ class FalkorDBCanvas extends HTMLElement {
         })
             .linkCanvasObject((link, ctx, globalScale) => {
             if (this.config.link) {
-                this.config.link.linkCanvasObject(link, ctx);
+                this.config.link.linkCanvasObject(link, ctx, globalScale);
             }
             else {
                 this.drawLink(link, ctx, globalScale);