Fix Gravity edge type and add picking (#102)

* fix gravity edge type

* add picking to gravity edge type

src/graph/edges/bundle/ClusterBundle.data.vs.glsl

@@ -21,7 +21,7 @@ out vec2 vColorMix;
 flat out uvec4 vPickingColor;
 
 // manual import from ../../../renderer/shaders/valueForIndex.glsl
-// to avoid uvec4 pragma error
+// to avoid uvec4 glslify error
 vec4 valueForIndex(sampler2D tex, int index) {
  int texWidth = textureSize(tex, 0).x;
  int col = index % texWidth;

src/graph/edges/gravity/Gravity.fs.glsl

@@ -6,12 +6,13 @@ precision highp float;
 uniform vec2 uViewportSize;
 uniform uint uRenderMode;
 
+flat in float fLineWidth;
 in vec3 vColor;
 in vec2 vProjectedPosition;
 in float vProjectedW;
 
 out vec4 fragColor;
 
 void main() {
- fragColor = lineColor(vColor, vProjectedPosition, vProjectedW, uViewportSize, uRenderMode);
+ fragColor = lineColor(vColor, vProjectedPosition, vProjectedW, uViewportSize, uRenderMode, fLineWidth);
 }

src/graph/edges/gravity/Gravity.picking.fs.glsl

@@ -0,0 +1,10 @@
+#version 300 es
+precision highp float;
+
+flat in vec4 fPickingColor;
+
+out vec4 fragColor;
+
+void main() {
+ fragColor = fPickingColor;
+}

src/graph/edges/gravity/Gravity.ts

@@ -1,12 +1,13 @@
 import edgeVS from './Gravity.vs.glsl';
 import edgeFS from './Gravity.fs.glsl';
+import pickingFS from './Gravity.picking.fs.glsl';
 import dataVS from './Gravity.data.vs.glsl';
 
 import {App, DrawCall, PicoGL, Program, VertexArray, VertexBuffer} from 'picogl';
 import {BasicEdgeData, Edges, kBasicEdgeDataTypes} from '../Edges';
 import {GraphPoints} from '../../../data/GraphPoints';
 import {DataMappings, DataShader} from '../../../data/DataTools';
-import {PickingManager} from '../../../UX/picking/PickingManager';
+import {PickingColors, PickingEvent, PickingManager} from '../../../UX/picking/PickingManager';
 import {GLStraightEdgeTypes, kGLStraightEdgeTypes} from '../straight/Straight';
 import {
  GLDataTypes,
@@ -15,6 +16,7 @@ import {
  RenderUniforms,
  setDrawCallUniforms,
 } from '../../../renderer/Renderable';
+import {MouseCallback} from '../../../UX/mouse/MouseHandler';
 import {GraferContext} from '../../../renderer/GraferContext';
 
 export const kGLGravityEdgeTypes = {
@@ -29,6 +31,12 @@ export class Gravity extends Edges<BasicEdgeData, GLGravityEdgeTypes> {
  protected program: Program;
  protected drawCall: DrawCall;
 
+ protected pickingProgram: Program;
+ protected pickingDrawCall: DrawCall;
+ protected pickingColors: PickingColors;
+ protected pickingVBO: VertexBuffer;
+ protected pickingHandler: MouseCallback;
+
  protected verticesVBO: VertexBuffer;
  protected edgesVAO: VertexArray;
 
@@ -68,15 +76,29 @@ export class Gravity extends Edges<BasicEdgeData, GLGravityEdgeTypes> {
  }
 
  this.verticesVBO = context.createVertexBuffer(PicoGL.FLOAT, 2, new Float32Array(segmentVertices));
+
+ this.pickingHandler = this.handlePickingEvent.bind(this);
+ this.pickingColors = this.pickingManager.allocatePickingColors(data.length);
+ this.pickingVBO = context.createVertexBuffer(PicoGL.UNSIGNED_BYTE, 4, this.pickingColors.colors);
+
  this.edgesVAO = context.createVertexArray().vertexAttributeBuffer(0, this.verticesVBO);
  this.configureTargetVAO(this.edgesVAO);
+ this.edgesVAO.instanceAttributeBuffer(5, this.pickingVBO);
 
  const shaders = this.getDrawShaders();
  this.program = context.createProgram(shaders.vs, shaders.fs);
  this.drawCall = context.createDrawCall(this.program, this.edgesVAO).primitive(PicoGL.LINE_STRIP);
 
+ const pickingShaders = this.getPickingShaders();
+ this.pickingProgram = context.createProgram(pickingShaders.vs, pickingShaders.fs);
+ this.pickingDrawCall = context.createDrawCall(this.pickingProgram, this.edgesVAO).primitive(PicoGL.TRIANGLE_STRIP);
+
  this.compute(context, {});
 
+ this.pickingManager.on(PickingManager.events.hoverOn, this.pickingHandler);
+ this.pickingManager.on(PickingManager.events.hoverOff, this.pickingHandler);
+ this.pickingManager.on(PickingManager.events.click, this.pickingHandler);
+
  // printDataGL(context, this.targetVBO, data.length, kGLStraightEdgeTypes);
  }
 
@@ -85,19 +107,21 @@ export class Gravity extends Edges<BasicEdgeData, GLGravityEdgeTypes> {
  }
 
  public render(context:App, mode: RenderMode, uniforms: RenderUniforms): void {
- setDrawCallUniforms(this.drawCall, uniforms);
- setDrawCallUniforms(this.drawCall, this.localUniforms);
-
  this.configureRenderContext(context, mode);
 
  switch (mode) {
  case RenderMode.PICKING:
- // this.pickingDrawCall.draw();
+ setDrawCallUniforms(this.pickingDrawCall, uniforms);
+ setDrawCallUniforms(this.pickingDrawCall, this.localUniforms);
+ this.pickingDrawCall.uniform('uPicking', true);
+ this.pickingDrawCall.draw();
  break;
 
  default:
+ setDrawCallUniforms(this.drawCall, uniforms);
+ setDrawCallUniforms(this.drawCall, this.localUniforms);
+ this.drawCall.uniform('uPicking', false);
  this.drawCall.draw();
- break;
  }
  }
 
@@ -111,7 +135,7 @@ export class Gravity extends Edges<BasicEdgeData, GLGravityEdgeTypes> {
  protected getPickingShaders(): RenderableShaders {
  return {
  vs: edgeVS,
- fs: null, // pickingFS,
+ fs: pickingFS,
  };
  }
 
@@ -129,4 +153,11 @@ export class Gravity extends Edges<BasicEdgeData, GLGravityEdgeTypes> {
  varyings: [ 'fSource', 'fTarget', 'fSourceColor', 'fTargetColor' ],
  };
  }
+
+ protected handlePickingEvent(event: PickingEvent, colorID: number): void {
+ if (this.picking && this.pickingColors.map.has(colorID)) {
+ const id = this.idArray[this.pickingColors.map.get(colorID)];
+ this.emit(event, id);
+ }
+ }
 }

src/graph/edges/gravity/Gravity.vs.glsl

@@ -5,22 +5,39 @@ layout(location=1) in uint iPointA;
 layout(location=2) in uint iPointB;
 layout(location=3) in uint iColorA;
 layout(location=4) in uint iColorB;
+layout(location=5) in uvec4 iPickingColor;
+
+uniform bool uPicking;
 
 uniform mat4 uViewMatrix;
 uniform mat4 uSceneMatrix;
 uniform mat4 uProjectionMatrix;
 uniform vec2 uViewportSize;
 uniform float uPixelRatio;
+uniform float uPickingWidth;
+uniform float uLineWidth;
 uniform float uGravity;
 uniform sampler2D uColorPalette;
+uniform sampler2D uGraphPoints;
 
+flat out float fLineWidth;
+flat out vec4 fPickingColor;
 out vec3 vColor;
 out vec2 vProjectedPosition;
 out float vProjectedW;
 
-#pragma glslify: valueForIndex = require(../../../renderer/shaders/valueForIndex.glsl)
+// manual import from ../../../renderer/shaders/valueForIndex.glsl
+// to avoid uvec4 glslify error
+vec4 valueForIndex(sampler2D tex, int index) {
+ int texWidth = textureSize(tex, 0).x;
+ int col = index % texWidth;
+ int row = index / texWidth;
+ return texelFetch(tex, ivec2(col, row), 0);
+}
 
 void main() {
+ fPickingColor = uPicking ? vec4(iPickingColor) / 255.0 : vec4(0.0);
+
  float multA = aVertex.x;
  float multB = 1.0 - aVertex.x;
 
@@ -39,6 +56,8 @@ void main() {
  float toCenter = length(middle);
  vec3 towardsCenter = (middle * -1.0) / toCenter;
 
+ fLineWidth = (uPicking ? uLineWidth * uPickingWidth : uLineWidth) * uPixelRatio;
+
  vec3 gravity = middle + towardsCenter * min(toCenter, distance * uGravity);
  vec3 position = gravity + pow(multB, 2.0) * (offsetB - gravity) + pow(multA, 2.0) * (offsetA - gravity);
 

src/graph/edges/path/CurvedPath.data.vs.glsl

@@ -18,7 +18,7 @@ out vec2 vColorMix;
 flat out uvec4 vPickingColor;
 
 // manual import from ../../../renderer/shaders/valueForIndex.glsl
-// to avoid uvec4 pragma error
+// to avoid uvec4 glslify error
 vec4 valueForIndex(sampler2D tex, int index) {
  int texWidth = textureSize(tex, 0).x;
  int col = index % texWidth;

src/graph/edges/path/StraightPath.vs.glsl

@@ -28,7 +28,7 @@ out vec2 vProjectedPosition;
 out float vProjectedW;
 
 // manual import from ../../../renderer/shaders/valueForIndex.glsl
-// to avoid uvec4 pragma error
+// to avoid uvec4 glslify error
 vec4 valueForIndex(sampler2D tex, int index) {
  int texWidth = textureSize(tex, 0).x;
  int col = index % texWidth;