From 025410c28fe052f0889f09b79d29e9f97fc2f114 Mon Sep 17 00:00:00 2001
From: nhkimmm <kimndevv@gmail.com>
Date: Tue, 14 Apr 2026 15:37:27 +0900
Subject: [PATCH] fix(viz): draw hyperedges in network coords to fix HiDPI
 offset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

vis-network's afterDrawing hook passes a ctx that already has the
view transform (pan + zoom + devicePixelRatio) applied. The previous
drawHyperedges manually re-applied (p - offset) * scale + canvas.width/2
on top of that ctx, which double-applied the transform and — because
canvas.width is the physical pixel buffer, not the CSS width —
mis-anchored on HiDPI by cssWidth/2 to the right and cssHeight/2 down.
Result: hyperedge polygons rendered detached from their nodes in the
lower-right area of the canvas on Retina displays.

Accept the ctx from the callback argument and draw node positions raw,
so hyperedges use the same coordinate path as nodes and edges.
---
 graphify/export.py | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/graphify/export.py b/graphify/export.py
index f0ee66ba..a7078193 100644
--- a/graphify/export.py
+++ b/graphify/export.py
@@ -62,9 +62,11 @@ def _hyperedge_script(hyperedges_json: str) -> str:
     return f"""<script>
 // Render hyperedges as shaded regions
 const hyperedges = {hyperedges_json};
-function drawHyperedges() {{
-    const canvas = network.canvas.frame.canvas;
-    const ctx = canvas.getContext('2d');
+// vis-network invokes afterDrawing with a ctx that already has the view
+// transform applied (pan + zoom + devicePixelRatio), so node positions from
+// getPositions() should be drawn in raw network coordinates — the same way
+// vis-network itself draws nodes and edges.
+function drawHyperedges(ctx) {{
     hyperedges.forEach(h => {{
         const positions = h.nodes
             .map(nid => network.getPositions([nid])[nid])
@@ -77,17 +79,10 @@ def _hyperedge_script(hyperedges_json: str) -> str:
         ctx.strokeStyle = '#6366f1';
         ctx.lineWidth = 2;
         ctx.beginPath();
-        const scale = network.getScale();
-        const offset = network.getViewPosition();
-        const toCanvas = (p) => ({{
-            x: (p.x - offset.x) * scale + canvas.width / 2,
-            y: (p.y - offset.y) * scale + canvas.height / 2
-        }});
-        const pts = positions.map(toCanvas);
-        // Expand hull slightly
-        const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length;
-        const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;
-        const expanded = pts.map(p => ({{
+        // Expand hull slightly outward from centroid so it wraps the node circles.
+        const cx = positions.reduce((s, p) => s + p.x, 0) / positions.length;
+        const cy = positions.reduce((s, p) => s + p.y, 0) / positions.length;
+        const expanded = positions.map(p => ({{
             x: cx + (p.x - cx) * 1.15,
             y: cy + (p.y - cy) * 1.15
         }}));