Commit 69059011 authored by Karen Konou's avatar Karen Konou

[graph] restore proportional labels and make edges transparent

parent 25d482d5
Pipeline #7931 passed with stages
in 38 minutes and 7 seconds
...@@ -4,7 +4,7 @@ import Graph from 'graphology'; ...@@ -4,7 +4,7 @@ import Graph from 'graphology';
import Sigma from 'sigma'; import Sigma from 'sigma';
//import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js'; //import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js';
import takeScreenshot from '../../src/external-deps/sigmajs-screenshot-with-canvas.js'; import takeScreenshot from '../../src/external-deps/sigmajs-screenshot-with-canvas.js';
import { NodeCircleProgram } from 'sigma/rendering'; import { NodeCircleProgram, EdgeLineProgram } from 'sigma/rendering';
import ContourCircleNodeProgram from '../../src/external-deps/sigmajs-circle-with-contour.js'; import ContourCircleNodeProgram from '../../src/external-deps/sigmajs-circle-with-contour.js';
import TriangleNodeProgram from '../../src/external-deps/sigmajs-triangle.js'; import TriangleNodeProgram from '../../src/external-deps/sigmajs-triangle.js';
import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js'; import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js';
...@@ -12,6 +12,7 @@ import SquareNodeProgram from '../../src/external-deps/sigmajs-square.js'; ...@@ -12,6 +12,7 @@ import SquareNodeProgram from '../../src/external-deps/sigmajs-square.js';
import ContourSquareNodeProgram from '../../src/external-deps/sigmajs-square-with-contour.js'; import ContourSquareNodeProgram from '../../src/external-deps/sigmajs-square-with-contour.js';
import DiamondNodeProgram from '../../src/external-deps/sigmajs-diamond.js'; import DiamondNodeProgram from '../../src/external-deps/sigmajs-diamond.js';
import ContourDiamondNodeProgram from '../../src/external-deps/sigmajs-diamond-with-contour.js'; import ContourDiamondNodeProgram from '../../src/external-deps/sigmajs-diamond-with-contour.js';
import EdgeLineTransparentProgram from '../../src/external-deps/sigmajs-line-transparent.js';
let sigma = Sigma.Sigma; let sigma = Sigma.Sigma;
console.log('imported sigma', Sigma); console.log('imported sigma', Sigma);
...@@ -196,7 +197,7 @@ function _sigma(left, right, el, opts) { ...@@ -196,7 +197,7 @@ function _sigma(left, right, el, opts) {
try { try {
let graph = new Graph(); let graph = new Graph();
const settings = { const settings = {
labelRenderer: drawLabel, defaultDrawNodeLabel: drawLabel,
nodeProgramClasses: { nodeProgramClasses: {
circle: NodeCircleProgram, circle: NodeCircleProgram,
ccircle: ContourCircleNodeProgram, ccircle: ContourCircleNodeProgram,
...@@ -207,6 +208,9 @@ function _sigma(left, right, el, opts) { ...@@ -207,6 +208,9 @@ function _sigma(left, right, el, opts) {
diamond: DiamondNodeProgram, diamond: DiamondNodeProgram,
cdiamond: ContourDiamondNodeProgram cdiamond: ContourDiamondNodeProgram
}, },
edgeProgramClasses: {
line: EdgeLineTransparentProgram
},
...opts.settings ...opts.settings
}; };
let s = new Sigma(graph, el, settings); let s = new Sigma(graph, el, settings);
......
// language=GLSL
const SHADER_SOURCE = /*glsl*/ `
precision mediump float;
varying vec4 v_color;
void main(void) {
gl_FragColor = v_color;
}
`;
export default SHADER_SOURCE;
\ No newline at end of file
// language=GLSL
const SHADER_SOURCE = /*glsl*/ `
attribute vec4 a_id;
attribute vec4 a_color;
attribute vec2 a_position;
uniform mat3 u_matrix;
varying vec4 v_color;
const float bias = 255.0 / 254.0;
void main() {
// Scale from [[-1 1] [-1 1]] to the container:
gl_Position = vec4(
(u_matrix * vec3(a_position, 1)).xy,
0,
1
);
#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
/**
* Sigma.js WebGL Renderer Fast Edge Program
* ==========================================
*
* Program rendering edges using GL_LINES which is presumably very fast but
* won't render thickness correctly on some GPUs and has some quirks.
* @module
*/
import { floatColor } from "sigma/utils";
import { EdgeProgram } from "sigma/rendering";
import FRAGMENT_SHADER_SOURCE from "./line-frag.glsl";
import VERTEX_SHADER_SOURCE from "./line-vert.glsl";
const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
const UNIFORMS = ["u_matrix"];
export default class EdgeLineTransparentProgram extends EdgeProgram {
getDefinition() {
return {
VERTICES: 2,
VERTEX_SHADER_SOURCE,
FRAGMENT_SHADER_SOURCE,
METHOD: WebGLRenderingContext.LINES,
UNIFORMS,
ATTRIBUTES: [
{ name: "a_position", size: 2, type: FLOAT },
{ name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
{ name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
],
};
}
processVisibleItem(
edgeIndex,
startIndex,
sourceData,
targetData,
data
) {
const array = this.array;
const x1 = sourceData.x;
const y1 = sourceData.y;
const x2 = targetData.x;
const y2 = targetData.y;
// console.log("original color: ", data.color);
let colorTransparent;
// Check if color parameter is of expected length (without an alpha component)
if (data.color.length == 7) {
// Add the alpha component
colorTransparent = data.color.concat("bc");
} else {
// Otherwise use as is
colorTransparent = data.color;
}
// console.log("transformed color: ", colorTransparent);
const color = floatColor(colorTransparent);
// First point
array[startIndex++] = x1;
array[startIndex++] = y1;
array[startIndex++] = color;
array[startIndex++] = edgeIndex;
// Second point
array[startIndex++] = x2;
array[startIndex++] = y2;
array[startIndex++] = color;
array[startIndex++] = edgeIndex;
}
setUniforms(params, { gl, uniformLocations }) {
const { u_matrix } = uniformLocations;
gl.uniformMatrix3fv(u_matrix, false, params.matrix);
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment