feat: Add larger invisible touch target for nodes in visualization

freenet · Dec 6, 2024 · a076d5c · a076d5c
1 parent 267fb9e
commit a076d5c
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html b/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html
@@ -281,6 +281,12 @@
         .attr("transform", (d) => `translate(${d.x},${d.y})`)
         .attr("id", (d) => `node-${d.data.id}`);
 
+      // Add invisible larger circle for better touch targets
+      node.append("circle")
+        .attr("r", params.nodeSize * 1.5) // 50% larger than visible node
+        .attr("fill", "transparent")
+        .style("cursor", "pointer");
+
       // Initialize node colors and event handlers
       node.each(function (d) {
         const nodeGroup = d3.select(this);