feat: improve click area for packets and edges (#215)

Closes #204

This PR increases the click area for packets and edges. This was done by
creating an invisible stroke/circle apart from the visible one.

Setting a non-zero alpha helps for visualizing the true clickable areas
for each element:


![image](https://github.com/user-attachments/assets/4a27e6ea-dc85-4067-b974-7e915327e014)

Author: MegaRedHand

src/types/edge.ts

@@ -76,9 +76,17 @@ export class Edge extends Graphics {
   // Method to draw the line
   drawEdge(startPos: Point, endPos: Point, color: number) {
     this.clear();
+
+    // Draw a colored line
     this.moveTo(startPos.x, startPos.y);
     this.lineTo(endPos.x, endPos.y);
-    this.stroke({ width: 3, color });
+    this.stroke({ width: 4, color });
+
+    // Add a bigger transparent hitbox
+    this.moveTo(startPos.x, startPos.y);
+    this.lineTo(endPos.x, endPos.y);
+    this.stroke({ width: 12, alpha: 0 });
+
     this.zIndex = ZIndexLevels.Edge;
     this.startPos = startPos;
     this.endPos = endPos;

src/types/packet.ts

@@ -28,14 +28,14 @@ import {
 import { PacketInfo } from "../graphics/renderables/packet_info";
 
 const contextPerPacketType: Record<string, GraphicsContext> = {
-  IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
-  "ICMP-8": circleGraphicsContext(Colors.Red, 0, 0, 5),
-  "ICMP-0": circleGraphicsContext(Colors.Yellow, 0, 0, 5),
-  EMPTY: circleGraphicsContext(Colors.Grey, 0, 0, 5),
-  HTTP: circleGraphicsContext(Colors.Hazel, 0, 0, 5), // for HTTP
+  IP: circleGraphicsContext(Colors.Green, 5),
+  "ICMP-8": circleGraphicsContext(Colors.Red, 5),
+  "ICMP-0": circleGraphicsContext(Colors.Yellow, 5),
+  EMPTY: circleGraphicsContext(Colors.Grey, 5),
+  HTTP: circleGraphicsContext(Colors.Hazel, 5), // for HTTP
 };
 
-const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6);
+const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 6);
 
 export interface PacketLocation {
   startId: DeviceId;

src/utils/utils.ts

@@ -18,13 +18,19 @@ export enum Colors {
 
 export function circleGraphicsContext(
   color: number,
-  x: number,
-  y: number,
   radius: number,
 ): GraphicsContext {
+  const x = 0;
+  const y = 0;
+
   const graphicsCtx = new GraphicsContext();
+  // Draw a circle
   graphicsCtx.circle(x, y, radius);
   graphicsCtx.fill(color);
+
+  // Draw a bigger invisible hit-area
+  graphicsCtx.circle(x, y, radius * 2);
+  graphicsCtx.fill({ alpha: 0 });
   return graphicsCtx;
 }