From f4d858a265e7e588f2171a828191918988326d05 Mon Sep 17 00:00:00 2001
From: Manfred Cheung <mj3cheun@uwaterloo.ca>
Date: Mon, 21 Aug 2023 10:32:03 -0400
Subject: [PATCH] Add option for edge picking width (#99)

---
 docs/api/grafer-edges-data.md             | 3 ++-
 src/graph/edges/Edges.ts                  | 8 ++++++++
 src/graph/edges/path/CurvedPath.vs.glsl   | 3 ++-
 src/graph/edges/straight/Straight.vs.glsl | 3 ++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/docs/api/grafer-edges-data.md b/docs/api/grafer-edges-data.md
index 5c51bb5..20ab597 100644
--- a/docs/api/grafer-edges-data.md
+++ b/docs/api/grafer-edges-data.md
@@ -52,4 +52,5 @@ An object containing configuration options for the edges.
 | brightness | number | Takes a range between -1 to 1. Defaults to 0. |
 | nearDepth | number | Takes a range between 0 to 1. Defaults to 0. Controls camera near depth. |
 | farDepth | number | Takes a range between 0 to 1. Defaults to 1. Controls camera far depth. |
-| lineWidth | number | Sets the line width of the edges in the layer |
+| lineWidth | number | Sets the line width of the edges in the layer. Defaults to 1.5. |
+| pickingWidth | number | Sets the width of the edge picking area in the layer where applicable, as a multiplier of the `lineWidth`. Defaults to 8. |
diff --git a/src/graph/edges/Edges.ts b/src/graph/edges/Edges.ts
index 5fee6d1..ea00f05 100755
--- a/src/graph/edges/Edges.ts
+++ b/src/graph/edges/Edges.ts
@@ -44,11 +44,19 @@ export abstract class Edges<T_SRC extends BasicEdgeData, T_TGT> extends LayerRen
         this.localUniforms.uLineWidth = value;
     }
 
+    public get pickingWidth(): number {
+        return this.localUniforms.uPickingWidth as number;
+    }
+    public set pickingWidth(value: number) {
+        this.localUniforms.uPickingWidth = value;
+    }
+
     protected initialize(...args: any[]): void {
         super.initialize(...args);
         this.localUniforms = Object.assign({}, this.localUniforms, {
             uGraphPoints: this.dataTexture,
             uLineWidth: 1.5,
+            uPickingWidth: 8,
         });
     }
 
diff --git a/src/graph/edges/path/CurvedPath.vs.glsl b/src/graph/edges/path/CurvedPath.vs.glsl
index e6a39fb..ef5f269 100755
--- a/src/graph/edges/path/CurvedPath.vs.glsl
+++ b/src/graph/edges/path/CurvedPath.vs.glsl
@@ -16,6 +16,7 @@ uniform mat4 uSceneMatrix;
 uniform mat4 uProjectionMatrix;
 uniform vec2 uViewportSize;
 uniform float uPixelRatio;
+uniform float uPickingWidth;
 uniform sampler2D uColorPalette;
 
 uniform float uLineWidth;
@@ -63,7 +64,7 @@ void main() {
     vec2 normal = vec2(-direction.y, direction.x);
 
     // calculate the pixel offset
-    fLineWidth = (uPicking ? uLineWidth * 8. : uLineWidth) * uPixelRatio;
+    fLineWidth = (uPicking ? uLineWidth * uPickingWidth : uLineWidth) * uPixelRatio;
     float offsetWidth = fLineWidth + 0.5;
     vec4 offset = vec4(((aVertex.x * normal * offsetWidth) / uViewportSize) * b0Projected.w, 0.0, 0.0);
 
diff --git a/src/graph/edges/straight/Straight.vs.glsl b/src/graph/edges/straight/Straight.vs.glsl
index f5430d2..ef6252a 100755
--- a/src/graph/edges/straight/Straight.vs.glsl
+++ b/src/graph/edges/straight/Straight.vs.glsl
@@ -14,6 +14,7 @@ uniform mat4 uSceneMatrix;
 uniform mat4 uProjectionMatrix;
 uniform vec2 uViewportSize;
 uniform float uPixelRatio;
+uniform float uPickingWidth;
 uniform sampler2D uGraphPoints;
 uniform sampler2D uColorPalette;
 
@@ -57,7 +58,7 @@ void main() {
     vec2 screenDirection = normalize(bScreen - aScreen);
     vec2 perp = vec2(-screenDirection.y, screenDirection.x);
 
-    fLineWidth = (uPicking ? uLineWidth * 8. : uLineWidth) * uPixelRatio;
+    fLineWidth = (uPicking ? uLineWidth * uPickingWidth : uLineWidth) * uPixelRatio;
     float offsetWidth = fLineWidth + 0.5;
     vec4 position = aProjected * multA + bProjected * multB;
     vec4 offset = vec4(((aVertex.x * perp * offsetWidth) / uViewportSize) * position.w, 0.0, 0.0);