[Sigma] Update programs for new Sigma API

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -198,7 +198,7 @@ function _sigma(left, right, el, opts) {
     const settings = {
       labelRenderer: drawLabel,
       nodeProgramClasses: {
-        circle: NodeCircleProgram,  // TODO why default? It seems that import should be fixed
+        circle: NodeCircleProgram,
         ccircle: ContourCircleNodeProgram,
         triangle: TriangleNodeProgram,
         ctriangle: ContourTriangleNodeProgram,

src/external-deps/circle-frag.glsl.js

+// language=GLSL
+const 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
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file

src/external-deps/circle-vert.glsl.js

+// language=GLSL
+const 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;
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file

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

@@ -3,80 +3,8 @@
 import { floatColor } from "sigma/utils";
 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;
-}
-`;
+import VERTEX_SHADER_SOURCE from "./circle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./circle-frag.glsl";
 
 const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 

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

@@ -8,33 +8,72 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import TriangleProgram from "./sigmajs-triangle-abstract";
+import { NodeProgram } from "sigma/rendering";
 
-const POINTS = 12;
-const ATTRIBUTES = 5;
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
 
-const ANGLE_1_1 = (0 * Math.PI) / 4;
-const ANGLE_1_2 = (2 * Math.PI) / 4;
-const ANGLE_1_3 = (4 * Math.PI) / 4;
-const ANGLE_2_1 = (4 * Math.PI) / 4;
-const ANGLE_2_2 = (6 * Math.PI) / 4;
-const ANGLE_2_3 = (8 * Math.PI) / 4;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-export default class NodeProgram extends TriangleProgram {
-  constructor(gl) {
-    super(gl, POINTS, ATTRIBUTES);
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeDiamondContourProgram extends NodeProgram {
+  static ANGLE_1_1 = (0 * Math.PI) / 4;
+  static ANGLE_1_2 = (2 * Math.PI) / 4;
+  static ANGLE_1_3 = (4 * Math.PI) / 4;
+  static ANGLE_2_1 = (4 * Math.PI) / 4;
+  static ANGLE_2_2 = (6 * Math.PI) / 4;
+  static ANGLE_2_3 = (8 * Math.PI) / 4;
+
+  getDefinition() {
+    return {
+      VERTICES: 12,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeDiamondContourProgram.ANGLE_1_1], [NodeDiamondContourProgram.ANGLE_1_2], [NodeDiamondContourProgram.ANGLE_1_3]
+                     ,[NodeDiamondContourProgram.ANGLE_2_1], [NodeDiamondContourProgram.ANGLE_2_2], [NodeDiamondContourProgram.ANGLE_2_3]
+                     ,[NodeDiamondContourProgram.ANGLE_1_1], [NodeDiamondContourProgram.ANGLE_1_2], [NodeDiamondContourProgram.ANGLE_1_3]
+                     ,[NodeDiamondContourProgram.ANGLE_2_1], [NodeDiamondContourProgram.ANGLE_2_2], [NodeDiamondContourProgram.ANGLE_2_3]],
+    };
   }
 
-  triangleDefinitions(data) {
-    const gray = '#aaa';
+  processVisibleItem(nodeIndex, startIndex, data) {
+    const array = this.array;
+    const color = floatColor(data.color);
+    const gray = floatColor('#aaa')
     const size = data.size / 1.7;  // experimental...
-    const contourSize = size + 0.8;  // experimental...
+    const contour_size = size + 0.8;
+
+    // contour
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = contour_size;
+    array[startIndex++] = gray;
+    array[startIndex++] = nodeIndex;
+
+    // circle
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
 
-    return [ { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
-}
+}
\ No newline at end of file

src/external-deps/sigmajs-diamond.js

@@ -8,29 +8,60 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import TriangleProgram from "./sigmajs-triangle-abstract";
+import { NodeProgram } from "sigma/rendering";
 
-const POINTS = 6;
-const ATTRIBUTES = 5;
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
 
-const ANGLE_1_1 = (0 * Math.PI) / 4;
-const ANGLE_1_2 = (2 * Math.PI) / 4;
-const ANGLE_1_3 = (4 * Math.PI) / 4;
-const ANGLE_2_1 = (4 * Math.PI) / 4;
-const ANGLE_2_2 = (6 * Math.PI) / 4;
-const ANGLE_2_3 = (8 * Math.PI) / 4;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-export default class NodeProgram extends TriangleProgram {
-  constructor(gl) {
-    super(gl, POINTS, ATTRIBUTES);
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeDiamondProgram extends NodeProgram {
+  static ANGLE_1_1 = (0 * Math.PI) / 4;
+  static ANGLE_1_2 = (2 * Math.PI) / 4;
+  static ANGLE_1_3 = (4 * Math.PI) / 4;
+  static ANGLE_2_1 = (4 * Math.PI) / 4;
+  static ANGLE_2_2 = (6 * Math.PI) / 4;
+  static ANGLE_2_3 = (8 * Math.PI) / 4;
+
+  getDefinition() {
+    return {
+      VERTICES: 6,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeDiamondProgram.ANGLE_1_1], [NodeDiamondProgram.ANGLE_1_2], [NodeDiamondProgram.ANGLE_1_3]
+                     ,[NodeDiamondProgram.ANGLE_2_1], [NodeDiamondProgram.ANGLE_2_2], [NodeDiamondProgram.ANGLE_2_3]],
+    };
   }
 
-  triangleDefinitions(data) {
+  processVisibleItem(nodeIndex, startIndex, data) {
+    const array = this.array;
+    const color = floatColor(data.color);
     const size = data.size / 1.7;  // experimental...
 
-    return [ { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
+
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
 }

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

@@ -8,33 +8,72 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import TriangleProgram from "./sigmajs-triangle-abstract";
+import { NodeProgram } from "sigma/rendering";
 
-const POINTS = 12;
-const ATTRIBUTES = 5;
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
 
-const ANGLE_1_1 = - (1 * Math.PI) / 4;
-const ANGLE_1_2 =   (1 * Math.PI) / 4;
-const ANGLE_1_3 =   (3 * Math.PI) / 4;
-const ANGLE_2_1 =   (3 * Math.PI) / 4;
-const ANGLE_2_2 =   (5 * Math.PI) / 4;
-const ANGLE_2_3 =   (7 * Math.PI) / 4;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-export default class NodeProgram extends TriangleProgram {
-  constructor(gl) {
-    super(gl, POINTS, ATTRIBUTES);
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeSquareContourProgram extends NodeProgram {
+  static ANGLE_1_1 = - (1 * Math.PI) / 4;
+  static ANGLE_1_2 =   (1 * Math.PI) / 4;
+  static ANGLE_1_3 =   (3 * Math.PI) / 4;
+  static ANGLE_2_1 =   (3 * Math.PI) / 4;
+  static ANGLE_2_2 =   (5 * Math.PI) / 4;
+  static ANGLE_2_3 =   (7 * Math.PI) / 4;
+
+  getDefinition() {
+    return {
+      VERTICES: 12,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeSquareContourProgram.ANGLE_1_1], [NodeSquareContourProgram.ANGLE_1_2], [NodeSquareContourProgram.ANGLE_1_3]
+                     ,[NodeSquareContourProgram.ANGLE_2_1], [NodeSquareContourProgram.ANGLE_2_2], [NodeSquareContourProgram.ANGLE_2_3]
+                     ,[NodeSquareContourProgram.ANGLE_1_1], [NodeSquareContourProgram.ANGLE_1_2], [NodeSquareContourProgram.ANGLE_1_3]
+                     ,[NodeSquareContourProgram.ANGLE_2_1], [NodeSquareContourProgram.ANGLE_2_2], [NodeSquareContourProgram.ANGLE_2_3]],
+    };
   }
 
-  triangleDefinitions(data) {
-    const gray = '#aaa';
+  processVisibleItem(nodeIndex, startIndex, data) {
+    const array = this.array;
+    const color = floatColor(data.color);
+    const gray = floatColor('#aaa')
     const size = data.size / 1.7;  // experimental...
-    const contourSize = size + 0.8;  // experimental...
+    const contour_size = size + 0.8;
+
+    // contour
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = contour_size;
+    array[startIndex++] = gray;
+    array[startIndex++] = nodeIndex;
+
+    // circle
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
 
-    return [ { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: contourSize, color: gray, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] } ];
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
-}
+}
\ No newline at end of file

src/external-deps/sigmajs-square.js

@@ -8,29 +8,61 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import TriangleProgram from "./sigmajs-triangle-abstract";
+import { NodeProgram } from "sigma/rendering";
 
-const POINTS = 6;
-const ATTRIBUTES = 5;
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
 
-const ANGLE_1_1 = - (1 * Math.PI) / 4;
-const ANGLE_1_2 =   (1 * Math.PI) / 4;
-const ANGLE_1_3 =   (3 * Math.PI) / 4;
-const ANGLE_2_1 =   (3 * Math.PI) / 4;
-const ANGLE_2_2 =   (5 * Math.PI) / 4;
-const ANGLE_2_3 =   (7 * Math.PI) / 4;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-export default class NodeProgram extends TriangleProgram {
-  constructor(gl) {
-    super(gl, POINTS, ATTRIBUTES);
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeSquareProgram extends NodeProgram {
+  static ANGLE_1_1 = - (1 * Math.PI) / 4;
+  static ANGLE_1_2 =   (1 * Math.PI) / 4;
+  static ANGLE_1_3 =   (3 * Math.PI) / 4;
+  static ANGLE_2_1 =   (3 * Math.PI) / 4;
+  static ANGLE_2_2 =   (5 * Math.PI) / 4;
+  static ANGLE_2_3 =   (7 * Math.PI) / 4;
+
+
+  getDefinition() {
+    return {
+      VERTICES: 6,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeSquareProgram.ANGLE_1_1], [NodeSquareProgram.ANGLE_1_2], [NodeSquareProgram.ANGLE_1_3]
+                     ,[NodeSquareProgram.ANGLE_2_1], [NodeSquareProgram.ANGLE_2_2], [NodeSquareProgram.ANGLE_2_3]],
+    };
   }
 
-  triangleDefinitions(data) {
+  processVisibleItem(nodeIndex, startIndex, data) {
+    const array = this.array;
+    const color = floatColor(data.color);
     const size = data.size / 1.7;  // experimental...
 
-    return [ { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1_1, ANGLE_1_2, ANGLE_1_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_2_1, ANGLE_2_2, ANGLE_2_3] }];
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
+
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
 }

src/external-deps/sigmajs-triangle-abstract.js

-/**
- * Sigma.js WebGL Renderer Node Program
- * =====================================
- *
- * Simple program rendering nodes as triangles.
- * It does not extend AbstractNodeProgram, which works very differently, and
- * really targets the gl.POINTS drawing methods.
- * @module
- */
-
-import { NodeDisplayData } from "sigma/types";
-import { floatColor } from "sigma/utils";
-import { AbstractProgram } from "sigma/rendering";
-
-const vertexShaderSource = `
-attribute vec2 a_position;
-attribute float a_size;
-attribute float a_angle;
-attribute vec4 a_color;
-
-uniform mat3 u_matrix;
-uniform float u_sqrtZoomRatio;
-uniform float u_correctionRatio;
-
-varying vec4 v_color;
-varying vec2 v_diffVector;
-varying float v_radius;
-varying float v_border;
-
-const float bias = 255.0 / 254.0;
-const float marginRatio = 1.05;
-
-void main() {
-  float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
-  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
-  vec2 position = a_position + diffVector * marginRatio;
-  gl_Position = vec4(
-    (u_matrix * vec3(position, 1)).xy,
-    0,
-    1
-  );
-
-  v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
-  v_diffVector = diffVector;
-  //v_radius = size / 2.0 / marginRatio;
-  v_radius = 1.0;
-
-  v_color = a_color;
-  v_color.a *= bias;
-}
-`;
-
-const fragmentShaderSource = `
-precision mediump float;
-
-varying vec4 v_color;
-varying vec2 v_diffVector;
-varying float v_radius;
-varying float v_border;
-
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  float dist = length(v_diffVector) - v_radius;
-
-  // Originally, a triangle is drawn. This code paints it in such a
-  // way that a circle is rendered.
-  //float t = 0.0;
-  //if (dist > v_border) {
-  //  t = 1.0;
-  //} else if (dist > 0.0) {
-  //  t = dist / v_border;
-  //}
-
-  //gl_FragColor = mix(v_color, transparent, t);
-  gl_FragColor = v_color;
-}
-`;
-
-const POINTS = 3;
-const ATTRIBUTES = 5;
-
-const ANGLE_1 = - (0.5 * Math.PI) / 3;
-const ANGLE_2 =   (1.5 * Math.PI) / 3;
-const ANGLE_3 =   (3.5 * Math.PI) / 3;
-
-export default class NodeProgram extends AbstractProgram {
-
-  constructor(gl, points, attributes) {
-    let pts = points || POINTS;
-    let attribs = attributes || ATTRIBUTES;
-    super(gl, vertexShaderSource, fragmentShaderSource, pts, attribs);
-
-    // Locations
-    this.positionLocation = gl.getAttribLocation(this.program, "a_position");
-    this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
-    this.colorLocation = gl.getAttribLocation(this.program, "a_color");
-    this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
-
-    // Uniform Location
-    const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
-    if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
-    this.matrixLocation = matrixLocation;
-
-    const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
-    if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
-    this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
-
-    const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
-    if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
-    this.correctionRatioLocation = correctionRatioLocation;
-
-    this.bind();
-  }
-
-  bind() {
-    const gl = this.gl;
-
-    gl.enableVertexAttribArray(this.positionLocation);
-    gl.enableVertexAttribArray(this.sizeLocation);
-    gl.enableVertexAttribArray(this.colorLocation);
-    gl.enableVertexAttribArray(this.angleLocation);
-
-    gl.vertexAttribPointer(
-      this.positionLocation,
-      2,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      0,
-    );
-    gl.vertexAttribPointer(
-      this.sizeLocation,
-      1,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      8
-    );
-    gl.vertexAttribPointer(
-      this.colorLocation,
-      4,
-      gl.UNSIGNED_BYTE,
-      true,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      12,
-    );
-    gl.vertexAttribPointer(
-      this.angleLocation,
-      1,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      16,
-    );
-  }
-
-  process(data, hidden, offset) {
-    const array = this.array;
-    let i = offset * this.points * this.attributes;
-
-    if (hidden) {
-      for (let l = i + this.points * this.attributes; i < l; i++) array[i] = 0;
-      return;
-    }
-
-    let definitions = this.triangleDefinitions(data);
-    for(let l = 0; l < definitions.length; l++) {
-      this.renderTriangle(i + l * 3*this.attributes, definitions[l]);
-    }
-  }
-
-  // overwrite this function
-  triangleDefinitions(data) {
-    const size = data.size / 1.7;  // experimental...
-    return [ { x: data.x, y: data.y, size: data.size, color: data.color, angles: [ANGLE_1, ANGLE_2, ANGLE_3] } ];
-  }
-
-  renderTriangle(i, { x, y, size, color, angles }) {
-    const array = this.array;
-    const fColor = floatColor(color);
-
-    array[i++] = x;
-    array[i++] = y;
-    array[i++] = size;
-    array[i++] = fColor;
-    array[i++] = angles[0];
-
-    array[i++] = x;
-    array[i++] = y;
-    array[i++] = size;
-    array[i++] = fColor;
-    array[i++] = angles[1];
-
-    array[i++] = x;
-    array[i++] = y;
-    array[i++] = size;
-    array[i++] = fColor;
-    array[i] = angles[2];
-  }
-
-  render(params) {
-    if (this.hasNothingToRender()) return;
-
-    const gl = this.gl;
-    const program = this.program;
-
-    gl.useProgram(program);
-
-    gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
-    gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
-    gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
-
-    gl.drawArrays(gl.TRIANGLES, 0, this.array.length / this.attributes);
-  }
-}

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

@@ -8,28 +8,67 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import TriangleProgram from "./sigmajs-triangle-abstract";
+import { NodeProgram } from "sigma/rendering";
 
-const POINTS = 6;
-const ATTRIBUTES = 5;
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
 
-const ANGLE_1 = - (0.5 * Math.PI) / 3;
-const ANGLE_2 =   (1.5 * Math.PI) / 3;
-const ANGLE_3 =   (3.5 * Math.PI) / 3;
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
-export default class NodeProgram extends TriangleProgram {
-  constructor(gl) {
-    super(gl, POINTS, ATTRIBUTES);
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeTriangleContourProgram extends NodeProgram {
+  static ANGLE_1 = - (0.5 * Math.PI) / 3;
+  static ANGLE_2 =   (1.5 * Math.PI) / 3;
+  static ANGLE_3 =   (3.5 * Math.PI) / 3;
+
+  getDefinition() {
+    return {
+      VERTICES: 6,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeTriangleContourProgram.ANGLE_1], [NodeTriangleContourProgram.ANGLE_2], [NodeTriangleContourProgram.ANGLE_3]
+                     ,[NodeTriangleContourProgram.ANGLE_1], [NodeTriangleContourProgram.ANGLE_2], [NodeTriangleContourProgram.ANGLE_3]],
+    };
   }
 
-  triangleDefinitions(data) {
+  processVisibleItem(nodeIndex, startIndex, data) {
+    const array = this.array;
+    const color = floatColor(data.color);
     const gray = floatColor('#aaa')
-    const size = data.size / 2.3;  // experimental...
-    const contourSize = size + 0.8;  // experimental...
+    const size = data.size / 1.7;  // experimental...
+    const contour_size = size + 0.8;
+
+    // contour
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = contour_size;
+    array[startIndex++] = gray;
+    array[startIndex++] = nodeIndex;
+
+    // circle
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
 
-    return [ { x: data.x, y: data.y, size: contourSize, color: '#aaa', angles: [ANGLE_1, ANGLE_2, ANGLE_3] },
-             { x: data.x, y: data.y, size: size, color: data.color, angles: [ANGLE_1, ANGLE_2, ANGLE_3] }];
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
-}
+}
\ No newline at end of file

src/external-deps/sigmajs-triangle.js

@@ -8,193 +8,56 @@
  * @module
  */
 
-import { NodeDisplayData } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import { AbstractProgram} from "sigma/rendering";
-
-const vertexShaderSource = `
-attribute vec2 a_position;
-attribute float a_size;
-attribute float a_angle;
-attribute vec4 a_color;
-
-uniform mat3 u_matrix;
-uniform float u_sqrtZoomRatio;
-uniform float u_correctionRatio;
-
-varying vec4 v_color;
-varying vec2 v_diffVector;
-varying float v_radius;
-varying float v_border;
-
-const float bias = 255.0 / 254.0;
-const float marginRatio = 1.05;
-
-void main() {
-  float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;
-  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
-  vec2 position = a_position + diffVector * marginRatio;
-  gl_Position = vec4(
-    (u_matrix * vec3(position, 1)).xy,
-    0,
-    1
-  );
-
-  v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;
-  v_diffVector = diffVector;
-  //v_radius = size / 2.0 / marginRatio;
-  v_radius = 1.0;
-
-  v_color = a_color;
-  v_color.a *= bias;
-}
-`;
-
-const fragmentShaderSource = `
-precision mediump float;
-
-varying vec4 v_color;
-varying vec2 v_diffVector;
-varying float v_radius;
-varying float v_border;
-
-const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
-
-void main(void) {
-  float dist = length(v_diffVector) - v_radius;
-
-  // Originally, a triangle is drawn. This code paints it in such a
-  // way that a circle is rendered.
-  //float t = 0.0;
-  //if (dist > v_border) {
-  //  t = 1.0;
-  //} else if (dist > 0.0) {
-  //  t = dist / v_border;
-  //}
-
-  //gl_FragColor = mix(v_color, transparent, t);
-  gl_FragColor = v_color;
-}
-`;
-
-const POINTS = 3;
-const ATTRIBUTES = 5;
-
-const ANGLE_1 = - (0.5 * Math.PI) / 3;
-const ANGLE_2 =   (1.5 * Math.PI) / 3;
-const ANGLE_3 =   (3.5 * Math.PI) / 3;
-
-export default class NodeProgram extends AbstractProgram {
-  constructor(gl) {
-    super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
-
-    // Locations
-    this.positionLocation = gl.getAttribLocation(this.program, "a_position");
-    this.sizeLocation = gl.getAttribLocation(this.program, "a_size");
-    this.colorLocation = gl.getAttribLocation(this.program, "a_color");
-    this.angleLocation = gl.getAttribLocation(this.program, "a_angle");
-
-    // Uniform Location
-    const matrixLocation = gl.getUniformLocation(this.program, "u_matrix");
-    if (matrixLocation === null) throw new Error("AbstractNodeProgram: error while getting matrixLocation");
-    this.matrixLocation = matrixLocation;
-
-    const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, "u_sqrtZoomRatio");
-    if (sqrtZoomRatioLocation === null) throw new Error("NodeProgram: error while getting sqrtZoomRatioLocation");
-    this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
-
-    const correctionRatioLocation = gl.getUniformLocation(this.program, "u_correctionRatio");
-    if (correctionRatioLocation === null) throw new Error("NodeProgram: error while getting correctionRatioLocation");
-    this.correctionRatioLocation = correctionRatioLocation;
-
-    this.bind();
+import { NodeProgram } from "sigma/rendering";
+
+import VERTEX_SHADER_SOURCE from "./triangle-vert.glsl";
+import FRAGMENT_SHADER_SOURCE from "./triangle-frag.glsl";
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+
+export default class NodeTriangleProgram extends NodeProgram {
+  static ANGLE_1 = - (0.5 * Math.PI) / 3;
+  static ANGLE_2 =   (1.5 * Math.PI) / 3;
+  static ANGLE_3 =   (3.5 * Math.PI) / 3;
+
+  getDefinition() {
+    return {
+      VERTICES: 3,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.TRIANGLES,
+      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 },
+      ],
+      CONSTANT_ATTRIBUTES: [{ name: "a_angle", size: 1, type: FLOAT }],
+      CONSTANT_DATA: [[NodeTriangleProgram.ANGLE_1], [NodeTriangleProgram.ANGLE_2], [NodeTriangleProgram.ANGLE_3]],
+    };
   }
 
-  bind() {
-    const gl = this.gl;
-
-    gl.enableVertexAttribArray(this.positionLocation);
-    gl.enableVertexAttribArray(this.sizeLocation);
-    gl.enableVertexAttribArray(this.colorLocation);
-    gl.enableVertexAttribArray(this.angleLocation);
-
-    gl.vertexAttribPointer(
-      this.positionLocation,
-      2,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      0,
-    );
-    gl.vertexAttribPointer(
-      this.sizeLocation,
-      1,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      8
-    );
-    gl.vertexAttribPointer(
-      this.colorLocation,
-      4,
-      gl.UNSIGNED_BYTE,
-      true,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      12,
-    );
-    gl.vertexAttribPointer(
-      this.angleLocation,
-      1,
-      gl.FLOAT,
-      false,
-      this.attributes * Float32Array.BYTES_PER_ELEMENT,
-      16,
-    );
-  }
-
-  process(data, hidden, offset) {
+  processVisibleItem(nodeIndex, startIndex, data) {
     const array = this.array;
-    let i = offset * POINTS * ATTRIBUTES;
-
-    if (hidden) {
-      for (let l = i + POINTS * ATTRIBUTES; i < l; i++) array[i] = 0;
-      return;
-    }
-
     const color = floatColor(data.color);
     const size = data.size / 1.7;  // experimental...
 
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = size;
-    array[i++] = color;
-    array[i++] = ANGLE_1;
-
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = size;
-    array[i++] = color;
-    array[i++] = ANGLE_2;
-
-    array[i++] = data.x;
-    array[i++] = data.y;
-    array[i++] = size;
-    array[i++] = color;
-    array[i] = ANGLE_3;
+    array[startIndex++] = data.x;
+    array[startIndex++] = data.y;
+    array[startIndex++] = size;
+    array[startIndex++] = color;
+    array[startIndex++] = nodeIndex;
   }
 
-  render(params) {
-    if (this.hasNothingToRender()) return;
-
-    const gl = this.gl;
-    const program = this.program;
-
-    gl.useProgram(program);
-
-    gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
-    gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
-    gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_sizeRatio, u_correctionRatio, u_matrix } = uniformLocations;
 
-    gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
+    gl.uniform1f(u_correctionRatio, params.correctionRatio);
+    gl.uniform1f(u_sizeRatio, params.sizeRatio);
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
   }
 }

src/external-deps/triangle-frag.glsl.js

+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+precision highp float;
+
+varying vec4 v_color;
+varying vec2 v_diffVector;
+varying float v_radius;
+
+uniform float u_correctionRatio;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+void main(void) {
+  float border = u_correctionRatio * 2.0;
+  float dist = length(v_diffVector) - v_radius + border;
+
+  // Originally, a triangle is drawn. This code paints it in such a
+  // way that a circle is rendered.
+  //float t = 0.0;
+  //if (dist > v_border) {
+  //  t = 1.0;
+  //} else if (dist > 0.0) {
+  //  t = dist / v_border;
+  //}
+
+  //gl_FragColor = mix(v_color, transparent, t);
+  gl_FragColor = v_color;
+
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file

src/external-deps/triangle-vert.glsl.js

+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute vec2 a_position;
+attribute float a_size;
+attribute float a_angle;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_correctionRatio;
+
+varying vec4 v_color;
+varying vec2 v_diffVector;
+varying float v_radius;
+varying float v_border;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  float size = a_size * u_correctionRatio / u_sizeRatio * 4.0;
+  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
+  vec2 position = a_position + diffVector;
+  gl_Position = vec4(
+    (u_matrix * vec3(position, 1)).xy,
+    0,
+    1
+  );
+
+  v_diffVector = diffVector;
+  v_radius = size / 2.0;
+
+  #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;
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file