[Sigma] Update circle-with-contour to use the new program API

src/external-deps/sigmajs-circle-with-contour.js

-// Based on sigma.js/src/rendering/webgl/programs/node.fast.ts
+// Based on https://github.com/jacomyal/sigma.js/blob/main/packages/sigma/src/rendering/programs/node-point/index.ts
 
 import { floatColor } from "sigma/utils";
-import { NodePointProgram } from 'sigma/rendering';
+import { NodeProgram } from 'sigma/rendering';
+
+// From https://github.com/jacomyal/sigma.js/blob/main/packages/sigma/src/rendering/programs/node-point/frag.glsl.ts
+const FRAGMENT_SHADER_SOURCE = /*glsl*/ `
+precision mediump float;
+
+varying vec4 v_color;
+varying float v_border;
+
+const float radius = 0.5;
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+void main(void) {
+  vec2 m = gl_PointCoord - vec2(0.5, 0.5);
+  float dist = radius - length(m);
+
+  // No antialiasing for picking mode:
+  #ifdef PICKING_MODE
+  if (dist > v_border)
+    gl_FragColor = v_color;
+  else
+    gl_FragColor = transparent;
+
+  #else
+  float t = 0.0;
+  if (dist > v_border)
+    t = 1.0;
+  else if (dist > 0.0)
+    t = dist / v_border;
+
+  gl_FragColor = mix(transparent, v_color, t);
+  #endif
+}
+`;
+
+// From https://github.com/jacomyal/sigma.js/blob/main/packages/sigma/src/rendering/programs/node-point/vert.glsl.ts
+const VERTEX_SHADER_SOURCE = /*glsl*/ `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute vec2 a_position;
+attribute float a_size;
+
+uniform float u_sizeRatio;
+uniform float u_pixelRatio;
+uniform mat3 u_matrix;
+
+varying vec4 v_color;
+varying float v_border;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  gl_Position = vec4(
+    (u_matrix * vec3(a_position, 1)).xy,
+    0,
+    1
+  );
+
+  // Multiply the point size twice:
+  //  - x SCALING_RATIO to correct the canvas scaling
+  //  - x 2 to correct the formulae
+  gl_PointSize = a_size / u_sizeRatio * u_pixelRatio * 2.0;
+
+  v_border = (0.5 / a_size) * u_sizeRatio;
+
+  #ifdef PICKING_MODE
+  // For picking mode, we use the ID as the color:
+  v_color = a_id;
+  #else
+  // For normal mode, we use the color:
+  v_color = a_color;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
 
-const POINTS = 2;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"]
 
 /*
-export default class NodeContourFastProgram extends AbstractNodeProgram {
-  //constructor(gl : WebGLRenderingContext) {
-  constructor(gl) {
-    super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
-    this.bind();
-    }
+export default class NodePointProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+> extends NodeProgram<(typeof UNIFORMS)[number], N, E, G> {
 */
 
-export default class NodeContourFastProgram extends NodePointProgram {
-  constructor(gl) {
-    super(gl);
-    // NOTE super method above will set POINTS = 1 from CircleNodeProgram
-    // We need to overwrite this
-    // https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/471
-    this.points = POINTS;
+export default class NodeContourFastProgram extends NodeProgram {
+  getDefinition() {
+    return {
+      VERTICES: 2,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.POINTS,
+      UNIFORMS,
+      ATTRIBUTES: [
+        { name: "a_position", size: 2, type: FLOAT },
+        { name: "a_size", size: 1, type: FLOAT },
+        { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+      ],
+    };
   }
 
-  //process(data: NodeDisplayData, hidden: boolean, offset: number): void {
-  process(data, hidden, offset) {
+  // processVisibleItem(nodeIndex: number, startIndex: number, data: NodeDisplayData) {
+  processVisibleItem(nodeIndex, startIndex, data) {
     const array = this.array;
-    let i = offset * POINTS * ATTRIBUTES;
-
-    if (hidden) {
-      // contour
-      array[i++] = 0;
-      array[i++] = 0;
-      array[i++] = 0;
-      array[i++] = 0;
-
-      // circle
-      array[i++] = 0;
-      array[i++] = 0;
-      array[i++] = 0;
-      array[i++] = 0;
-
-      return;
-    }
-
     const color = floatColor(data.color);
     //const black = floatColor('black');
     const gray = floatColor('#aaa')
 
     // contour
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = data.size + 1;
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = data.size + 1;
     //array[i++] = black;
-    array[i++] = gray;
+    array[startIndex++] = gray;
+    array[startIndex++] = nodeIndex;
 
     // circle
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = data.size;
-    array[i] = color;
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = data.size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
 }
 
-  //render(params: RenderParams): void {
-  render(params) {
-    if (this.hasNothingToRender()) return;
-
-    const gl = this.gl;
-
-    const program = this.program;
-    gl.useProgram(program);
-
-    gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
-    gl.uniform1f(this.scaleLocation, params.scalingRatio);
-    gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+  //setUniforms({ sizeRatio, pixelRatio, matrix }: RenderParams, { gl, uniformLocations }: ProgramInfo): void {
+  setUniforms({ sizeRatio, pixelRatio, matrix }, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_pixelRatio, u_matrix } = uniformLocations;
 
-    gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    gl.uniform1f(u_pixelRatio, pixelRatio);
+    gl.uniform1f(u_sizeRatio, sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, matrix);
   }
 }