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 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);