sigma - npm Package Compare versions

Comparing version 2.4.0 to 3.0.0-alpha1

CHANGELOG.md

@@ -5,4 +5,13 @@ # sigma.js - changelog:
 
+### Features
+
+- [#1289](https://github.com/jacomyal/sigma.js/issues/1289) - Adding `Camera.updateState`
+- Program classes given in settings (`nodeProgramClasses`, `edgeProgramClasses`) are now merged with default ones for convenience
+- [#1287](https://github.com/jacomyal/sigma.js/pull/1287) - Adding the `hoverNodeProgramClasses` setting so that it is possible to have different programs rendering nodes and their hover
+- [#1273](https://github.com/jacomyal/sigma.js/issues/1273) - Adding the `Sigma.setGraph` method to renderers
+- Adding renderer generic type to specify graph type (thanks to @lf-)
+
 ### Bug fixes
 
+- [#1285](https://github.com/jacomyal/sigma.js/issues/1285) - Fixing label selection when camera is rotated
 - [#1206](https://github.com/jacomyal/sigma.js/pull/1206), [#1257](https://github.com/jacomyal/sigma.js/issues/1257) - Fixing `node.image` program (thanks to @kaij and @boogheta)
@@ -17,12 +26,7 @@ - [#1286](https://github.com/jacomyal/sigma.js/issues/1286) - Fixing right-click erroneously triggering camera drag events
 
-### Features
+## 2.3.1
 
-- [#1285](https://github.com/jacomyal/sigma.js/issues/1285) - Fixing label selection when camera is rotated
-- [#1289](https://github.com/jacomyal/sigma.js/issues/1289) - Adding `Camera.updateState`
-- Program classes given in settings (`nodeProgramClasses`, `edgeProgramClasses`) are now merged with default ones for convenience
-- [#1287](https://github.com/jacomyal/sigma.js/pull/1287) - Adding the `hoverNodeProgramClasses` setting so that it is possible to have different programs rendering nodes and their hover
-- [#1273](https://github.com/jacomyal/sigma.js/issues/1273) - Adding the `Sigma.setGraph` method to renderers
-- Adding renderer generic type to specify graph type (thanks to @lf-)
+### Feature
 
-## 2.3.1
+- [#1239](https://github.com/jacomyal/sigma.js/pull/1239) - Adds `getContainer` method to public API (thanks to @stefanprobst)
 
@@ -38,6 +42,2 @@ ### Bug fixes
 
-### Feature
-
-- [#1239](https://github.com/jacomyal/sigma.js/pull/1239) - Adds `getContainer` method to public API (thanks to @stefanprobst)
-
 ## 2.3.0
@@ -44,0 +44,0 @@

package.json

 {
   "name": "sigma",
-  "version": "2.4.0",
+  "version": "3.0.0-alpha1",
   "description": "A JavaScript library aimed at visualizing graphs of thousands of nodes and edges.",
@@ -117,5 +117,11 @@ "homepage": "https://www.sigmajs.org",
       "@typescript-eslint/camelcase": "off",
-      "@typescript-eslint/no-empty-interface": "off"
+      "@typescript-eslint/no-empty-interface": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_"
+        }
+      ]
     }
   }
 }

rendering/webgl/programs/common/edge.d.ts

@@ -7,25 +7,23 @@ /**
  */
-import { AbstractProgram, IProgram, RenderParams } from "./program";
-import { EdgeDisplayData, NodeDisplayData } from "../../../../types";
 import Sigma from "../../../../sigma";
-export interface IEdgeProgram extends IProgram {
-    computeIndices(): void;
-    process(sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData, hidden: boolean, offset: number): void;
-    render(params: RenderParams): void;
+import { AbstractProgram, Program } from "./program";
+import { NodeDisplayData, EdgeDisplayData } from "../../../../types";
+export declare abstract class AbstractEdgeProgram extends AbstractProgram {
+    abstract process(offset: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
 }
+export declare abstract class EdgeProgram<Uniform extends string = string> extends Program<Uniform> implements AbstractEdgeProgram {
+    process(offset: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
+    abstract processVisibleItem(i: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
+}
+export interface EdgeProgramConstructor {
+    new (gl: WebGLRenderingContext, renderer: Sigma): AbstractEdgeProgram;
+}
 /**
- * Edge Program class.
+ * Helper function combining two or more programs into a single compound one.
+ * Note that this is more a quick & easy way to combine program than a really
+ * performant option. More performant programs can be written entirely.
  *
- * @constructor
+ * @param  {array}    programClasses - Program classes to combine.
+ * @return {function}
  */
-export declare abstract class AbstractEdgeProgram extends AbstractProgram implements IEdgeProgram {
-    constructor(gl: WebGLRenderingContext, vertexShaderSource: string, fragmentShaderSource: string, points: number, attributes: number);
-    abstract bind(): void;
-    abstract computeIndices(): void;
-    abstract process(sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData, hidden: boolean, offset: number): void;
-    abstract render(params: RenderParams): void;
-}
-export interface EdgeProgramConstructor {
-    new (gl: WebGLRenderingContext, renderer: Sigma): IEdgeProgram;
-}
 export declare function createEdgeCompoundProgram(programClasses: Array<EdgeProgramConstructor>): EdgeProgramConstructor;

rendering/webgl/programs/common/edge.js

@@ -18,19 +18,8 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createEdgeCompoundProgram = exports.AbstractEdgeProgram = void 0;
-/**
- * Sigma.js WebGL Abstract Edge Program
- * =====================================
- *
- * @module
- */
+exports.createEdgeCompoundProgram = exports.EdgeProgram = exports.AbstractEdgeProgram = void 0;
 var program_1 = require("./program");
-/**
- * Edge Program class.
- *
- * @constructor
- */
 var AbstractEdgeProgram = /** @class */ (function (_super) {
     __extends(AbstractEdgeProgram, _super);
-    function AbstractEdgeProgram(gl, vertexShaderSource, fragmentShaderSource, points, attributes) {
-        return _super.call(this, gl, vertexShaderSource, fragmentShaderSource, points, attributes) || this;
+    function AbstractEdgeProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -40,29 +29,45 @@ return AbstractEdgeProgram;
 exports.AbstractEdgeProgram = AbstractEdgeProgram;
+var EdgeProgram = /** @class */ (function (_super) {
+    __extends(EdgeProgram, _super);
+    function EdgeProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EdgeProgram.prototype.process = function (offset, sourceData, targetData, data) {
+        var i = offset * this.STRIDE;
+        // NOTE: dealing with hidden items automatically
+        if (data.hidden || sourceData.hidden || targetData.hidden) {
+            for (var l = i + this.STRIDE; i < l; i++) {
+                this.array[i] = 0;
+            }
+            return;
+        }
+        return this.processVisibleItem(i, sourceData, targetData, data);
+    };
+    return EdgeProgram;
+}(program_1.Program));
+exports.EdgeProgram = EdgeProgram;
+/**
+ * Helper function combining two or more programs into a single compound one.
+ * Note that this is more a quick & easy way to combine program than a really
+ * performant option. More performant programs can be written entirely.
+ *
+ * @param  {array}    programClasses - Program classes to combine.
+ * @return {function}
+ */
 function createEdgeCompoundProgram(programClasses) {
     return /** @class */ (function () {
         function EdgeCompoundProgram(gl, renderer) {
-            this.programs = programClasses.map(function (ProgramClass) { return new ProgramClass(gl, renderer); });
+            this.programs = programClasses.map(function (Program) {
+                return new Program(gl, renderer);
+            });
         }
-        EdgeCompoundProgram.prototype.bufferData = function () {
-            this.programs.forEach(function (program) { return program.bufferData(); });
+        EdgeCompoundProgram.prototype.reallocate = function (capacity) {
+            this.programs.forEach(function (program) { return program.reallocate(capacity); });
         };
-        EdgeCompoundProgram.prototype.allocate = function (capacity) {
-            this.programs.forEach(function (program) { return program.allocate(capacity); });
+        EdgeCompoundProgram.prototype.process = function (offset, sourceData, targetData, data) {
+            this.programs.forEach(function (program) { return program.process(offset, sourceData, targetData, data); });
         };
-        EdgeCompoundProgram.prototype.bind = function () {
-            // nothing todo, it's already done in each program constructor
-        };
-        EdgeCompoundProgram.prototype.computeIndices = function () {
-            this.programs.forEach(function (program) { return program.computeIndices(); });
-        };
         EdgeCompoundProgram.prototype.render = function (params) {
-            this.programs.forEach(function (program) {
-                program.bind();
-                program.bufferData();
-                program.render(params);
-            });
+            this.programs.forEach(function (program) { return program.render(params); });
         };
-        EdgeCompoundProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
-            this.programs.forEach(function (program) { return program.process(sourceData, targetData, data, hidden, offset); });
-        };
         return EdgeCompoundProgram;
@@ -69,0 +74,0 @@ }());

rendering/webgl/programs/common/node.d.ts

@@ -7,27 +7,14 @@ /**
  */
-import { AbstractProgram, IProgram, RenderParams } from "./program";
+import Sigma from "../../../../sigma";
+import { AbstractProgram, Program } from "./program";
 import { NodeDisplayData } from "../../../../types";
-import Sigma from "../../../../sigma";
-export interface INodeProgram extends IProgram {
-    process(data: NodeDisplayData, hidden: boolean, offset: number): void;
-    render(params: RenderParams): void;
+export declare abstract class AbstractNodeProgram extends AbstractProgram {
+    abstract process(offset: number, data: NodeDisplayData): void;
 }
-/**
- * Node Program class.
- *
- * @constructor
- */
-export declare abstract class AbstractNodeProgram extends AbstractProgram implements INodeProgram {
-    positionLocation: GLint;
-    sizeLocation: GLint;
-    colorLocation: GLint;
-    matrixLocation: WebGLUniformLocation;
-    ratioLocation: WebGLUniformLocation;
-    scaleLocation: WebGLUniformLocation;
-    constructor(gl: WebGLRenderingContext, vertexShaderSource: string, fragmentShaderSource: string, points: number, attributes: number);
-    bind(): void;
-    abstract process(data: NodeDisplayData, hidden: boolean, offset: number): void;
+export declare abstract class NodeProgram<Uniform extends string = string> extends Program<Uniform> implements AbstractNodeProgram {
+    process(offset: number, data: NodeDisplayData): void;
+    abstract processVisibleItem(i: number, data: NodeDisplayData): void;
 }
 export interface NodeProgramConstructor {
-    new (gl: WebGLRenderingContext, renderer: Sigma): INodeProgram;
+    new (gl: WebGLRenderingContext, renderer: Sigma): AbstractNodeProgram;
 }
@@ -34,0 +21,0 @@ /**

rendering/webgl/programs/common/node.js

@@ -18,50 +18,31 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNodeCompoundProgram = exports.AbstractNodeProgram = void 0;
-/**
- * Sigma.js WebGL Abstract Node Program
- * =====================================
- *
- * @module
- */
+exports.createNodeCompoundProgram = exports.NodeProgram = exports.AbstractNodeProgram = void 0;
 var program_1 = require("./program");
-/**
- * Node Program class.
- *
- * @constructor
- */
 var AbstractNodeProgram = /** @class */ (function (_super) {
     __extends(AbstractNodeProgram, _super);
-    function AbstractNodeProgram(gl, vertexShaderSource, fragmentShaderSource, points, attributes) {
-        var _this = _super.call(this, gl, vertexShaderSource, fragmentShaderSource, points, attributes) || this;
-        // 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");
-        // Uniform Location
-        var matrixLocation = gl.getUniformLocation(_this.program, "u_matrix");
-        if (matrixLocation === null)
-            throw new Error("AbstractNodeProgram: error while getting matrixLocation");
-        _this.matrixLocation = matrixLocation;
-        var ratioLocation = gl.getUniformLocation(_this.program, "u_ratio");
-        if (ratioLocation === null)
-            throw new Error("AbstractNodeProgram: error while getting ratioLocation");
-        _this.ratioLocation = ratioLocation;
-        var scaleLocation = gl.getUniformLocation(_this.program, "u_scale");
-        if (scaleLocation === null)
-            throw new Error("AbstractNodeProgram: error while getting scaleLocation");
-        _this.scaleLocation = scaleLocation;
-        return _this;
+    function AbstractNodeProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    AbstractNodeProgram.prototype.bind = function () {
-        var gl = this.gl;
-        gl.enableVertexAttribArray(this.positionLocation);
-        gl.enableVertexAttribArray(this.sizeLocation);
-        gl.enableVertexAttribArray(this.colorLocation);
-        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);
-    };
     return AbstractNodeProgram;
 }(program_1.AbstractProgram));
 exports.AbstractNodeProgram = AbstractNodeProgram;
+var NodeProgram = /** @class */ (function (_super) {
+    __extends(NodeProgram, _super);
+    function NodeProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    NodeProgram.prototype.process = function (offset, data) {
+        var i = offset * this.STRIDE;
+        // NOTE: dealing with hidden items automatically
+        if (data.hidden) {
+            for (var l = i + this.STRIDE; i < l; i++) {
+                this.array[i] = 0;
+            }
+            return;
+        }
+        return this.processVisibleItem(i, data);
+    };
+    return NodeProgram;
+}(program_1.Program));
+exports.NodeProgram = NodeProgram;
 /**
@@ -78,23 +59,15 @@ * Helper function combining two or more programs into a single compound one.
         function NodeCompoundProgram(gl, renderer) {
-            this.programs = programClasses.map(function (ProgramClass) { return new ProgramClass(gl, renderer); });
+            this.programs = programClasses.map(function (Program) {
+                return new Program(gl, renderer);
+            });
         }
-        NodeCompoundProgram.prototype.bufferData = function () {
-            this.programs.forEach(function (program) { return program.bufferData(); });
+        NodeCompoundProgram.prototype.reallocate = function (capacity) {
+            this.programs.forEach(function (program) { return program.reallocate(capacity); });
         };
-        NodeCompoundProgram.prototype.allocate = function (capacity) {
-            this.programs.forEach(function (program) { return program.allocate(capacity); });
+        NodeCompoundProgram.prototype.process = function (offset, data) {
+            this.programs.forEach(function (program) { return program.process(offset, data); });
         };
-        NodeCompoundProgram.prototype.bind = function () {
-            // nothing todo, it's already done in each program constructor
-        };
         NodeCompoundProgram.prototype.render = function (params) {
-            this.programs.forEach(function (program) {
-                program.bind();
-                program.bufferData();
-                program.render(params);
-            });
+            this.programs.forEach(function (program) { return program.render(params); });
         };
-        NodeCompoundProgram.prototype.process = function (data, hidden, offset) {
-            this.programs.forEach(function (program) { return program.process(data, hidden, offset); });
-        };
         return NodeCompoundProgram;
@@ -101,0 +74,0 @@ }());

rendering/webgl/programs/common/program.d.ts

@@ -0,37 +1,70 @@
+/**
+ * Sigma.js WebGL Renderer Program
+ * ================================
+ *
+ * Class representing a single WebGL program used by sigma's WebGL renderer.
+ * @module
+ */
+import type Sigma from "../../../../sigma";
 export interface RenderParams {
     width: number;
     height: number;
-    ratio: number;
+    sizeRatio: number;
+    zoomRatio: number;
+    pixelRatio: number;
+    correctionRatio: number;
     matrix: Float32Array;
-    scalingRatio: number;
-    correctionRatio: number;
 }
-export interface IProgram {
-    bufferData(): void;
-    allocate(capacity: number): void;
-    bind(): void;
-    render(params: RenderParams): void;
+export interface ProgramAttributeSpecification {
+    name: string;
+    size: number;
+    type: number;
+    normalized?: boolean;
 }
-/**
- * Abstract Program class.
- *
- * @constructor
- */
-export declare abstract class AbstractProgram implements IProgram {
-    points: number;
-    attributes: number;
+export interface ProgramDefinition<Uniform extends string = string> {
+    VERTICES: number;
+    ARRAY_ITEMS_PER_VERTEX: number;
+    VERTEX_SHADER_SOURCE: string;
+    FRAGMENT_SHADER_SOURCE: string;
+    UNIFORMS: ReadonlyArray<Uniform>;
+    ATTRIBUTES: Array<ProgramAttributeSpecification>;
+}
+export declare abstract class AbstractProgram {
+    constructor(_gl: WebGLRenderingContext, _renderer: Sigma);
+    abstract reallocate(capacity: number): void;
+    abstract render(params: RenderParams): void;
+}
+export declare abstract class Program<Uniform extends string = string> implements AbstractProgram, ProgramDefinition {
+    VERTICES: number;
+    ARRAY_ITEMS_PER_VERTEX: number;
+    VERTEX_SHADER_SOURCE: string;
+    FRAGMENT_SHADER_SOURCE: string;
+    UNIFORMS: ReadonlyArray<Uniform>;
+    ATTRIBUTES: Array<ProgramAttributeSpecification>;
+    STRIDE: number;
+    renderer: Sigma;
     gl: WebGLRenderingContext;
+    buffer: WebGLBuffer;
     array: Float32Array;
-    buffer: WebGLBuffer;
-    vertexShaderSource: string;
+    canUse32BitsIndices: boolean;
+    indicesType: number;
+    indicesBuffer: WebGLBuffer;
+    IndicesArray: Uint16ArrayConstructor | Uint32ArrayConstructor;
+    indicesArray: Uint16Array | Uint32Array | null;
     vertexShader: WebGLShader;
-    fragmentShaderSource: string;
     fragmentShader: WebGLShader;
     program: WebGLProgram;
-    constructor(gl: WebGLRenderingContext, vertexShaderSource: string, fragmentShaderSource: string, points: number, attributes: number);
-    bufferData(): void;
-    allocate(capacity: number): void;
+    uniformLocations: Record<Uniform, WebGLUniformLocation>;
+    attributeLocations: Record<string, GLint>;
+    capacity: number;
+    verticesCount: number;
+    abstract getDefinition(): ProgramDefinition<Uniform>;
+    constructor(gl: WebGLRenderingContext, renderer: Sigma);
+    private bind;
+    private bufferData;
+    reallocateIndices(): void;
+    reallocate(capacity: number): void;
     hasNothingToRender(): boolean;
-    abstract bind(): void;
-    abstract render(params: RenderParams): void;
+    abstract draw(params: RenderParams): void;
+    render(params: RenderParams): void;
 }

rendering/webgl/programs/common/program.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbstractProgram = void 0;
-/**
- * Sigma.js WebGL Renderer Program
- * ================================
- *
- * Class representing a single WebGL program used by sigma's WebGL renderer.
- * @module
- */
-var utils_1 = require("../../shaders/utils");
-/**
- * Abstract Program class.
- *
- * @constructor
- */
+exports.Program = exports.AbstractProgram = void 0;
+var utils_1 = require("../../../../utils");
+var utils_2 = require("../../shaders/utils");
 var AbstractProgram = /** @class */ (function () {
-    function AbstractProgram(gl, vertexShaderSource, fragmentShaderSource, points, attributes) {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function AbstractProgram(_gl, _renderer) {
+    }
+    return AbstractProgram;
+}());
+exports.AbstractProgram = AbstractProgram;
+var Program = /** @class */ (function () {
+    function Program(gl, renderer) {
+        var _this = this;
         this.array = new Float32Array();
-        this.points = points;
-        this.attributes = attributes;
+        this.indicesArray = null;
+        this.uniformLocations = {};
+        this.attributeLocations = {};
+        this.capacity = 0;
+        this.verticesCount = 0;
+        // Reading program definition
+        var definition = this.getDefinition();
+        this.VERTICES = definition.VERTICES;
+        this.ARRAY_ITEMS_PER_VERTEX = definition.ARRAY_ITEMS_PER_VERTEX;
+        this.VERTEX_SHADER_SOURCE = definition.VERTEX_SHADER_SOURCE;
+        this.FRAGMENT_SHADER_SOURCE = definition.FRAGMENT_SHADER_SOURCE;
+        this.UNIFORMS = definition.UNIFORMS;
+        this.ATTRIBUTES = definition.ATTRIBUTES;
+        // Computing stride
+        this.STRIDE = this.VERTICES * this.ARRAY_ITEMS_PER_VERTEX;
+        // Members
         this.gl = gl;
-        this.vertexShaderSource = vertexShaderSource;
-        this.fragmentShaderSource = fragmentShaderSource;
+        this.renderer = renderer;
+        // Webgl buffers
         var buffer = gl.createBuffer();
         if (buffer === null)
-            throw new Error("AbstractProgram: error while creating the buffer");
+            throw new Error("Program: error while creating the webgl buffer.");
         this.buffer = buffer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-        this.vertexShader = (0, utils_1.loadVertexShader)(gl, this.vertexShaderSource);
-        this.fragmentShader = (0, utils_1.loadFragmentShader)(gl, this.fragmentShaderSource);
-        this.program = (0, utils_1.loadProgram)(gl, [this.vertexShader, this.fragmentShader]);
+        var indicesBuffer = gl.createBuffer();
+        if (indicesBuffer === null)
+            throw new Error("Program: error while creating the webgl indices buffer.");
+        this.indicesBuffer = indicesBuffer;
+        // Shaders and program
+        this.vertexShader = (0, utils_2.loadVertexShader)(this.gl, this.VERTEX_SHADER_SOURCE);
+        this.fragmentShader = (0, utils_2.loadFragmentShader)(this.gl, this.FRAGMENT_SHADER_SOURCE);
+        this.program = (0, utils_2.loadProgram)(this.gl, [this.vertexShader, this.fragmentShader]);
+        // Indices
+        this.canUse32BitsIndices = (0, utils_1.canUse32BitsIndices)(this.gl);
+        this.indicesType = this.canUse32BitsIndices ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+        this.IndicesArray = this.canUse32BitsIndices ? Uint32Array : Uint16Array;
+        // Initializing locations
+        this.UNIFORMS.forEach(function (uniformName) {
+            var location = _this.gl.getUniformLocation(_this.program, uniformName);
+            if (location === null)
+                throw new Error("Program: error while getting location for uniform \"".concat(uniformName, "\"."));
+            _this.uniformLocations[uniformName] = location;
+        });
+        this.ATTRIBUTES.forEach(function (attr) {
+            var location = _this.gl.getAttribLocation(_this.program, attr.name);
+            if (location === -1)
+                throw new Error("Program: error while getting location for attribute \"".concat(attr.name, "\"."));
+            _this.attributeLocations[attr.name] = location;
+        });
     }
-    AbstractProgram.prototype.bufferData = function () {
+    Program.prototype.bind = function () {
+        var _this = this;
         var gl = this.gl;
-        gl.bufferData(gl.ARRAY_BUFFER, this.array, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        if (this.indicesArray) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+        }
+        for (var attributeName in this.attributeLocations) {
+            gl.enableVertexAttribArray(this.attributeLocations[attributeName]);
+        }
+        var offset = 0;
+        this.ATTRIBUTES.forEach(function (attr) {
+            var location = _this.attributeLocations[attr.name];
+            gl.vertexAttribPointer(location, attr.size, attr.type, attr.normalized || false, _this.ARRAY_ITEMS_PER_VERTEX * Float32Array.BYTES_PER_ELEMENT, offset);
+            if (attr.type === WebGLRenderingContext.UNSIGNED_BYTE) {
+                offset += attr.size;
+            }
+            else if (attr.type === WebGLRenderingContext.FLOAT) {
+                offset += attr.size * 4;
+            }
+            else {
+                throw new Error("yet unsupported attribute type");
+            }
+        });
     };
-    AbstractProgram.prototype.allocate = function (capacity) {
-        this.array = new Float32Array(this.points * this.attributes * capacity);
+    Program.prototype.bufferData = function () {
+        var gl = this.gl;
+        this.gl.bufferData(gl.ARRAY_BUFFER, this.array, gl.DYNAMIC_DRAW);
+        if (this.indicesArray) {
+            this.gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indicesArray, gl.STATIC_DRAW);
+        }
     };
-    AbstractProgram.prototype.hasNothingToRender = function () {
-        return this.array.length === 0;
+    // NOTE: implementing `reallocateIndices` is optional
+    Program.prototype.reallocateIndices = function () {
+        return;
     };
-    return AbstractProgram;
+    Program.prototype.reallocate = function (capacity) {
+        // If desired capacity has not changed we do nothing
+        // NOTE: it's possible here to implement more subtle reallocation schemes
+        // when the number of rendered items increase or decrease
+        if (capacity === this.capacity)
+            return;
+        this.capacity = capacity;
+        this.verticesCount = this.VERTICES * capacity;
+        this.array = new Float32Array(this.verticesCount * this.ARRAY_ITEMS_PER_VERTEX);
+        if (typeof this.reallocateIndices === "function")
+            this.reallocateIndices();
+    };
+    Program.prototype.hasNothingToRender = function () {
+        return this.verticesCount === 0;
+    };
+    Program.prototype.render = function (params) {
+        if (this.hasNothingToRender())
+            return;
+        this.bind();
+        this.bufferData();
+        this.gl.useProgram(this.program);
+        this.draw(params);
+    };
+    return Program;
 }());
-exports.AbstractProgram = AbstractProgram;
+exports.Program = Program;

rendering/webgl/programs/edge.arrowHead.d.ts

@@ -8,19 +8,28 @@ /**
  */
-import { EdgeDisplayData, NodeDisplayData } from "../../../types";
-import { AbstractEdgeProgram } from "./common/edge";
+import { NodeDisplayData, EdgeDisplayData } from "../../../types";
+import { EdgeProgram } from "./common/edge";
 import { RenderParams } from "./common/program";
-export default class EdgeArrowHeadProgram extends AbstractEdgeProgram {
-    positionLocation: GLint;
-    colorLocation: GLint;
-    normalLocation: GLint;
-    radiusLocation: GLint;
-    barycentricLocation: GLint;
-    matrixLocation: WebGLUniformLocation;
-    sqrtZoomRatioLocation: WebGLUniformLocation;
-    correctionRatioLocation: WebGLUniformLocation;
-    constructor(gl: WebGLRenderingContext);
-    bind(): void;
-    computeIndices(): void;
-    process(sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData, hidden: boolean, offset: number): void;
-    render(params: RenderParams): void;
+declare const UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
+export default class EdgeArrowHeadProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+    getDefinition(): {
+        VERTICES: number;
+        ARRAY_ITEMS_PER_VERTEX: number;
+        VERTEX_SHADER_SOURCE: string;
+        FRAGMENT_SHADER_SOURCE: string;
+        UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: number;
+            normalized?: undefined;
+        } | {
+            name: string;
+            size: number;
+            type: number;
+            normalized: boolean;
+        })[];
+    };
+    processVisibleItem(i: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
+    draw(params: RenderParams): void;
 }
+export {};

rendering/webgl/programs/edge.arrowHead.js

@@ -22,60 +22,42 @@ "use strict";
 var utils_1 = require("../../../utils");
+var edge_1 = require("./common/edge");
 var edge_arrowHead_vert_glsl_1 = __importDefault(require("../shaders/edge.arrowHead.vert.glsl.js"));
 var edge_arrowHead_frag_glsl_1 = __importDefault(require("../shaders/edge.arrowHead.frag.glsl.js"));
-var edge_1 = require("./common/edge");
-var POINTS = 3, ATTRIBUTES = 9, STRIDE = POINTS * ATTRIBUTES;
+var UNSIGNED_BYTE = WebGLRenderingContext.UNSIGNED_BYTE, FLOAT = WebGLRenderingContext.FLOAT;
+var UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
 var EdgeArrowHeadProgram = /** @class */ (function (_super) {
     __extends(EdgeArrowHeadProgram, _super);
-    function EdgeArrowHeadProgram(gl) {
-        var _this = _super.call(this, gl, edge_arrowHead_vert_glsl_1.default, edge_arrowHead_frag_glsl_1.default, POINTS, ATTRIBUTES) || this;
-        // Locations
-        _this.positionLocation = gl.getAttribLocation(_this.program, "a_position");
-        _this.colorLocation = gl.getAttribLocation(_this.program, "a_color");
-        _this.normalLocation = gl.getAttribLocation(_this.program, "a_normal");
-        _this.radiusLocation = gl.getAttribLocation(_this.program, "a_radius");
-        _this.barycentricLocation = gl.getAttribLocation(_this.program, "a_barycentric");
-        // Uniform locations
-        var matrixLocation = gl.getUniformLocation(_this.program, "u_matrix");
-        if (matrixLocation === null)
-            throw new Error("EdgeArrowHeadProgram: error while getting matrixLocation");
-        _this.matrixLocation = matrixLocation;
-        var sqrtZoomRatioLocation = gl.getUniformLocation(_this.program, "u_sqrtZoomRatio");
-        if (sqrtZoomRatioLocation === null)
-            throw new Error("EdgeArrowHeadProgram: error while getting sqrtZoomRatioLocation");
-        _this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
-        var correctionRatioLocation = gl.getUniformLocation(_this.program, "u_correctionRatio");
-        if (correctionRatioLocation === null)
-            throw new Error("EdgeArrowHeadProgram: error while getting correctionRatioLocation");
-        _this.correctionRatioLocation = correctionRatioLocation;
-        _this.bind();
-        return _this;
+    function EdgeArrowHeadProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    EdgeArrowHeadProgram.prototype.bind = function () {
-        var gl = this.gl;
-        // Bindings
-        gl.enableVertexAttribArray(this.positionLocation);
-        gl.enableVertexAttribArray(this.normalLocation);
-        gl.enableVertexAttribArray(this.radiusLocation);
-        gl.enableVertexAttribArray(this.colorLocation);
-        gl.enableVertexAttribArray(this.barycentricLocation);
-        gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
-        gl.vertexAttribPointer(this.normalLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
-        gl.vertexAttribPointer(this.radiusLocation, 1, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
-        gl.vertexAttribPointer(this.colorLocation, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 20);
-        // TODO: maybe we can optimize here by packing this in a bit mask
-        gl.vertexAttribPointer(this.barycentricLocation, 3, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 24);
+    EdgeArrowHeadProgram.prototype.getDefinition = function () {
+        return {
+            VERTICES: 3,
+            ARRAY_ITEMS_PER_VERTEX: 9,
+            VERTEX_SHADER_SOURCE: edge_arrowHead_vert_glsl_1.default,
+            FRAGMENT_SHADER_SOURCE: edge_arrowHead_frag_glsl_1.default,
+            UNIFORMS: UNIFORMS,
+            ATTRIBUTES: [
+                { name: "a_position", size: 2, type: FLOAT },
+                { name: "a_normal", size: 2, type: FLOAT },
+                { name: "a_radius", size: 1, type: FLOAT },
+                { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+                { name: "a_barycentric", size: 3, type: FLOAT },
+            ],
+        };
     };
-    EdgeArrowHeadProgram.prototype.computeIndices = function () {
-        // nothing to do
-    };
-    EdgeArrowHeadProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
-        if (hidden) {
-            for (var i_1 = offset * STRIDE, l = i_1 + STRIDE; i_1 < l; i_1++)
-                this.array[i_1] = 0;
-            return;
-        }
-        var thickness = data.size || 1, radius = targetData.size || 1, x1 = sourceData.x, y1 = sourceData.y, x2 = targetData.x, y2 = targetData.y, color = (0, utils_1.floatColor)(data.color);
+    EdgeArrowHeadProgram.prototype.processVisibleItem = function (i, sourceData, targetData, data) {
+        var thickness = data.size || 1;
+        var radius = targetData.size || 1;
+        var x1 = sourceData.x;
+        var y1 = sourceData.y;
+        var x2 = targetData.x;
+        var y2 = targetData.y;
+        var color = (0, utils_1.floatColor)(data.color);
         // Computing normals
-        var dx = x2 - x1, dy = y2 - y1;
-        var len = dx * dx + dy * dy, n1 = 0, n2 = 0;
+        var dx = x2 - x1;
+        var dy = y2 - y1;
+        var len = dx * dx + dy * dy;
+        var n1 = 0;
+        var n2 = 0;
         if (len) {
@@ -86,3 +68,2 @@ len = 1 / Math.sqrt(len);
         }
-        var i = POINTS * ATTRIBUTES * offset;
         var array = this.array;
@@ -120,17 +101,12 @@ // First point
     };
-    EdgeArrowHeadProgram.prototype.render = function (params) {
-        if (this.hasNothingToRender())
-            return;
+    EdgeArrowHeadProgram.prototype.draw = function (params) {
         var gl = this.gl;
-        var program = this.program;
-        gl.useProgram(program);
-        // Binding uniforms
-        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
-        gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
-        gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
-        // Drawing:
-        gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
+        var _a = this.uniformLocations, u_matrix = _a.u_matrix, u_sizeRatio = _a.u_sizeRatio, u_correctionRatio = _a.u_correctionRatio;
+        gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+        gl.uniform1f(u_sizeRatio, params.sizeRatio);
+        gl.uniform1f(u_correctionRatio, params.correctionRatio);
+        gl.drawArrays(gl.TRIANGLES, 0, this.verticesCount);
     };
     return EdgeArrowHeadProgram;
-}(edge_1.AbstractEdgeProgram));
+}(edge_1.EdgeProgram));
 exports.default = EdgeArrowHeadProgram;

rendering/webgl/programs/edge.clamped.d.ts

@@ -11,24 +11,24 @@ /**
  */
+import EdgeRectangleProgram from "./edge.rectangle";
 import { EdgeDisplayData, NodeDisplayData } from "../../../types";
-import { AbstractEdgeProgram } from "./common/edge";
-import { RenderParams } from "./common/program";
-export default class EdgeClampedProgram extends AbstractEdgeProgram {
-    IndicesArray: Uint32ArrayConstructor | Uint16ArrayConstructor;
-    indicesArray: Uint32Array | Uint16Array;
-    indicesBuffer: WebGLBuffer;
-    indicesType: GLenum;
-    positionLocation: GLint;
-    colorLocation: GLint;
-    normalLocation: GLint;
-    radiusLocation: GLint;
-    matrixLocation: WebGLUniformLocation;
-    sqrtZoomRatioLocation: WebGLUniformLocation;
-    correctionRatioLocation: WebGLUniformLocation;
-    canUse32BitsIndices: boolean;
-    constructor(gl: WebGLRenderingContext);
-    bind(): void;
-    process(sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData, hidden: boolean, offset: number): void;
-    computeIndices(): void;
-    bufferData(): void;
-    render(params: RenderParams): void;
+export default class EdgeClampedProgram extends EdgeRectangleProgram {
+    getDefinition(): {
+        ARRAY_ITEMS_PER_VERTEX: number;
+        VERTEX_SHADER_SOURCE: string;
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: number;
+            normalized?: undefined;
+        } | {
+            name: string;
+            size: number;
+            type: number;
+            normalized: boolean;
+        })[];
+        VERTICES: number;
+        FRAGMENT_SHADER_SOURCE: string;
+        UNIFORMS: readonly ["u_matrix", "u_zoomRatio", "u_sizeRatio", "u_correctionRatio"];
+    };
+    processVisibleItem(i: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
 }

rendering/webgl/programs/edge.clamped.js

@@ -17,2 +17,13 @@ "use strict";
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -22,70 +33,43 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var edge_1 = require("./common/edge");
+/**
+ * Sigma.js WebGL Renderer Edge Program
+ * =====================================
+ *
+ * Program rendering edges as thick lines but with a twist: the end of edge
+ * does not sit in the middle of target node but instead stays by some margin.
+ *
+ * This is useful when combined with arrows to draw directed edges.
+ * @module
+ */
+var edge_rectangle_1 = __importDefault(require("./edge.rectangle"));
+var edge_clamped_vert_glsl_1 = __importDefault(require("../shaders/edge.clamped.vert.glsl.js"));
 var utils_1 = require("../../../utils");
-var edge_clamped_vert_glsl_1 = __importDefault(require("../shaders/edge.clamped.vert.glsl.js"));
-var edge_frag_glsl_1 = __importDefault(require("../shaders/edge.frag.glsl.js"));
-var POINTS = 4, ATTRIBUTES = 6, STRIDE = POINTS * ATTRIBUTES;
+var UNSIGNED_BYTE = WebGLRenderingContext.UNSIGNED_BYTE, FLOAT = WebGLRenderingContext.FLOAT;
 var EdgeClampedProgram = /** @class */ (function (_super) {
     __extends(EdgeClampedProgram, _super);
-    function EdgeClampedProgram(gl) {
-        var _this = _super.call(this, gl, edge_clamped_vert_glsl_1.default, edge_frag_glsl_1.default, POINTS, ATTRIBUTES) || this;
-        // Initializing indices buffer
-        var indicesBuffer = gl.createBuffer();
-        if (indicesBuffer === null)
-            throw new Error("EdgeClampedProgram: error while getting resolutionLocation");
-        _this.indicesBuffer = indicesBuffer;
-        // Locations:
-        _this.positionLocation = gl.getAttribLocation(_this.program, "a_position");
-        _this.colorLocation = gl.getAttribLocation(_this.program, "a_color");
-        _this.normalLocation = gl.getAttribLocation(_this.program, "a_normal");
-        _this.radiusLocation = gl.getAttribLocation(_this.program, "a_radius");
-        // Uniform locations
-        var matrixLocation = gl.getUniformLocation(_this.program, "u_matrix");
-        if (matrixLocation === null)
-            throw new Error("EdgeClampedProgram: error while getting matrixLocation");
-        _this.matrixLocation = matrixLocation;
-        var sqrtZoomRatioLocation = gl.getUniformLocation(_this.program, "u_sqrtZoomRatio");
-        if (sqrtZoomRatioLocation === null)
-            throw new Error("EdgeClampedProgram: error while getting cameraRatioLocation");
-        _this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
-        var correctionRatioLocation = gl.getUniformLocation(_this.program, "u_correctionRatio");
-        if (correctionRatioLocation === null)
-            throw new Error("EdgeClampedProgram: error while getting viewportRatioLocation");
-        _this.correctionRatioLocation = correctionRatioLocation;
-        // Enabling the OES_element_index_uint extension
-        // NOTE: on older GPUs, this means that really large graphs won't
-        // have all their edges rendered. But it seems that the
-        // `OES_element_index_uint` is quite everywhere so we'll handle
-        // the potential issue if it really arises.
-        // NOTE: when using webgl2, the extension is enabled by default
-        _this.canUse32BitsIndices = (0, utils_1.canUse32BitsIndices)(gl);
-        _this.IndicesArray = _this.canUse32BitsIndices ? Uint32Array : Uint16Array;
-        _this.indicesArray = new _this.IndicesArray();
-        _this.indicesType = _this.canUse32BitsIndices ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
-        _this.bind();
-        return _this;
+    function EdgeClampedProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    EdgeClampedProgram.prototype.bind = function () {
-        var gl = this.gl;
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
-        // Bindings
-        gl.enableVertexAttribArray(this.positionLocation);
-        gl.enableVertexAttribArray(this.normalLocation);
-        gl.enableVertexAttribArray(this.colorLocation);
-        gl.enableVertexAttribArray(this.radiusLocation);
-        gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
-        gl.vertexAttribPointer(this.normalLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
-        gl.vertexAttribPointer(this.colorLocation, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
-        gl.vertexAttribPointer(this.radiusLocation, 1, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 20);
+    EdgeClampedProgram.prototype.getDefinition = function () {
+        return __assign(__assign({}, _super.prototype.getDefinition.call(this)), { ARRAY_ITEMS_PER_VERTEX: 6, VERTEX_SHADER_SOURCE: edge_clamped_vert_glsl_1.default, ATTRIBUTES: [
+                { name: "a_position", size: 2, type: FLOAT },
+                { name: "a_normal", size: 2, type: FLOAT },
+                { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+                { name: "a_radius", size: 1, type: FLOAT },
+            ] });
     };
-    EdgeClampedProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
-        if (hidden) {
-            for (var i_1 = offset * STRIDE, l = i_1 + STRIDE; i_1 < l; i_1++)
-                this.array[i_1] = 0;
-            return;
-        }
-        var thickness = data.size || 1, x1 = sourceData.x, y1 = sourceData.y, x2 = targetData.x, y2 = targetData.y, radius = targetData.size || 1, color = (0, utils_1.floatColor)(data.color);
+    EdgeClampedProgram.prototype.processVisibleItem = function (i, sourceData, targetData, data) {
+        var thickness = data.size || 1;
+        var x1 = sourceData.x;
+        var y1 = sourceData.y;
+        var x2 = targetData.x;
+        var y2 = targetData.y;
+        var color = (0, utils_1.floatColor)(data.color);
         // Computing normals
-        var dx = x2 - x1, dy = y2 - y1;
-        var len = dx * dx + dy * dy, n1 = 0, n2 = 0;
+        var dx = x2 - x1;
+        var dy = y2 - y1;
+        var radius = targetData.size || 1;
+        var len = dx * dx + dy * dy;
+        var n1 = 0;
+        var n2 = 0;
         if (len) {
@@ -96,3 +80,2 @@ len = 1 / Math.sqrt(len);
         }
-        var i = POINTS * ATTRIBUTES * offset;
         var array = this.array;
@@ -128,37 +111,4 @@ // First point
     };
-    EdgeClampedProgram.prototype.computeIndices = function () {
-        var l = this.array.length / ATTRIBUTES;
-        var size = l + l / 2;
-        var indices = new this.IndicesArray(size);
-        for (var i = 0, c = 0; i < l; i += 4) {
-            indices[c++] = i;
-            indices[c++] = i + 1;
-            indices[c++] = i + 2;
-            indices[c++] = i + 2;
-            indices[c++] = i + 1;
-            indices[c++] = i + 3;
-        }
-        this.indicesArray = indices;
-    };
-    EdgeClampedProgram.prototype.bufferData = function () {
-        _super.prototype.bufferData.call(this);
-        // Indices data
-        var gl = this.gl;
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indicesArray, gl.STATIC_DRAW);
-    };
-    EdgeClampedProgram.prototype.render = function (params) {
-        if (this.hasNothingToRender())
-            return;
-        var gl = this.gl;
-        var program = this.program;
-        gl.useProgram(program);
-        // Binding uniforms
-        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
-        gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
-        gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
-        // Drawing:
-        gl.drawElements(gl.TRIANGLES, this.indicesArray.length, this.indicesType, 0);
-    };
     return EdgeClampedProgram;
-}(edge_1.AbstractEdgeProgram));
+}(edge_rectangle_1.default));
 exports.default = EdgeClampedProgram;

rendering/webgl/programs/edge.triangle.d.ts

@@ -1,16 +0,34 @@
-import { EdgeDisplayData, NodeDisplayData } from "../../../types";
-import { AbstractEdgeProgram } from "./common/edge";
+/**
+ * Sigma.js WebGL Renderer Triangle Edge Program
+ * ==============================================
+ *
+ * Program rendering directed edges as a single triangle.
+ * @module
+ */
+import { NodeDisplayData, EdgeDisplayData } from "../../../types";
+import { EdgeProgram } from "./common/edge";
 import { RenderParams } from "./common/program";
-export default class EdgeTriangleProgram extends AbstractEdgeProgram {
-    positionLocation: GLint;
-    colorLocation: GLint;
-    normalLocation: GLint;
-    matrixLocation: WebGLUniformLocation;
-    sqrtZoomRatioLocation: WebGLUniformLocation;
-    correctionRatioLocation: WebGLUniformLocation;
-    constructor(gl: WebGLRenderingContext);
-    bind(): void;
-    process(sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData, hidden: boolean, offset: number): void;
-    computeIndices(): void;
-    render(params: RenderParams): void;
+declare const UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
+export default class EdgeTriangleProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+    getDefinition(): {
+        VERTICES: number;
+        ARRAY_ITEMS_PER_VERTEX: number;
+        VERTEX_SHADER_SOURCE: string;
+        FRAGMENT_SHADER_SOURCE: string;
+        UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: number;
+            normalized?: undefined;
+        } | {
+            name: string;
+            size: number;
+            type: number;
+            normalized: boolean;
+        })[];
+    };
+    processVisibleItem(i: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void;
+    draw(params: RenderParams): void;
 }
+export {};

rendering/webgl/programs/edge.triangle.js

@@ -21,57 +21,40 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Sigma.js WebGL Renderer Triangle Edge Program
- * ==============================================
- *
- * Program rendering directed edges as a single triangle.
- * @module
- */
 var utils_1 = require("../../../utils");
+var edge_1 = require("./common/edge");
 var edge_triangle_vert_glsl_1 = __importDefault(require("../shaders/edge.triangle.vert.glsl.js"));
 var edge_triangle_frag_glsl_1 = __importDefault(require("../shaders/edge.triangle.frag.glsl.js"));
-var edge_1 = require("./common/edge");
-var POINTS = 3, ATTRIBUTES = 5, STRIDE = POINTS * ATTRIBUTES;
+var UNSIGNED_BYTE = WebGLRenderingContext.UNSIGNED_BYTE, FLOAT = WebGLRenderingContext.FLOAT;
+var UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"];
 var EdgeTriangleProgram = /** @class */ (function (_super) {
     __extends(EdgeTriangleProgram, _super);
-    function EdgeTriangleProgram(gl) {
-        var _this = _super.call(this, gl, edge_triangle_vert_glsl_1.default, edge_triangle_frag_glsl_1.default, POINTS, ATTRIBUTES) || this;
-        // Locations
-        _this.positionLocation = gl.getAttribLocation(_this.program, "a_position");
-        _this.colorLocation = gl.getAttribLocation(_this.program, "a_color");
-        _this.normalLocation = gl.getAttribLocation(_this.program, "a_normal");
-        var matrixLocation = gl.getUniformLocation(_this.program, "u_matrix");
-        if (matrixLocation === null)
-            throw new Error("EdgeTriangleProgram: error while getting matrixLocation");
-        _this.matrixLocation = matrixLocation;
-        var correctionRatioLocation = gl.getUniformLocation(_this.program, "u_correctionRatio");
-        if (correctionRatioLocation === null)
-            throw new Error("EdgeTriangleProgram: error while getting correctionRatioLocation");
-        _this.correctionRatioLocation = correctionRatioLocation;
-        var sqrtZoomRatioLocation = gl.getUniformLocation(_this.program, "u_sqrtZoomRatio");
-        if (sqrtZoomRatioLocation === null)
-            throw new Error("EdgeTriangleProgram: error while getting sqrtZoomRatioLocation");
-        _this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
-        _this.bind();
-        return _this;
+    function EdgeTriangleProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    EdgeTriangleProgram.prototype.bind = function () {
-        var gl = this.gl;
-        // Bindings
-        gl.enableVertexAttribArray(this.positionLocation);
-        gl.enableVertexAttribArray(this.normalLocation);
-        gl.enableVertexAttribArray(this.colorLocation);
-        gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
-        gl.vertexAttribPointer(this.normalLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
-        gl.vertexAttribPointer(this.colorLocation, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
+    EdgeTriangleProgram.prototype.getDefinition = function () {
+        return {
+            VERTICES: 3,
+            ARRAY_ITEMS_PER_VERTEX: 5,
+            VERTEX_SHADER_SOURCE: edge_triangle_vert_glsl_1.default,
+            FRAGMENT_SHADER_SOURCE: edge_triangle_frag_glsl_1.default,
+            UNIFORMS: UNIFORMS,
+            ATTRIBUTES: [
+                { name: "a_position", size: 2, type: FLOAT },
+                { name: "a_normal", size: 2, type: FLOAT },
+                { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+            ],
+        };
     };
-    EdgeTriangleProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
-        if (hidden) {
-            for (var i_1 = offset * STRIDE, l = i_1 + STRIDE; i_1 < l; i_1++)
-                this.array[i_1] = 0;
-            return;
-        }
-        var thickness = data.size || 1, x1 = sourceData.x, y1 = sourceData.y, x2 = targetData.x, y2 = targetData.y, color = (0, utils_1.floatColor)(data.color);
+    EdgeTriangleProgram.prototype.processVisibleItem = function (i, sourceData, targetData, data) {
+        var thickness = data.size || 1;
+        var x1 = sourceData.x;
+        var y1 = sourceData.y;
+        var x2 = targetData.x;
+        var y2 = targetData.y;
+        var color = (0, utils_1.floatColor)(data.color);
         // Computing normals
-        var dx = x2 - x1, dy = y2 - y1;
-        var len = dx * dx + dy * dy, n1 = 0, n2 = 0;
+        var dx = x2 - x1;
+        var dy = y2 - y1;
+        var len = dx * dx + dy * dy;
+        var n1 = 0;
+        var n2 = 0;
         if (len) {
@@ -82,3 +65,2 @@ len = 1 / Math.sqrt(len);
         }
-        var i = POINTS * ATTRIBUTES * offset;
         var array = this.array;
@@ -102,19 +84,12 @@ // First point
     };
-    EdgeTriangleProgram.prototype.computeIndices = function () {
-        // nothing todo ?
-    };
-    EdgeTriangleProgram.prototype.render = function (params) {
-        if (this.hasNothingToRender())
-            return;
+    EdgeTriangleProgram.prototype.draw = function (params) {
         var gl = this.gl;
-        var 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);
-        // Drawing:
-        gl.drawArrays(gl.TRIANGLES, 0, this.array.length / ATTRIBUTES);
+        var _a = this.uniformLocations, u_matrix = _a.u_matrix, u_sizeRatio = _a.u_sizeRatio, u_correctionRatio = _a.u_correctionRatio;
+        gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+        gl.uniform1f(u_sizeRatio, params.sizeRatio);
+        gl.uniform1f(u_correctionRatio, params.correctionRatio);
+        gl.drawArrays(gl.TRIANGLES, 0, this.verticesCount);
     };
     return EdgeTriangleProgram;
-}(edge_1.AbstractEdgeProgram));
+}(edge_1.EdgeProgram));
 exports.default = EdgeTriangleProgram;

rendering/webgl/programs/node.image.d.ts

@@ -0,23 +1,3 @@
+import { NodeProgramConstructor } from "./common/node";
 /**
- * Sigma.js WebGL Renderer Node Program
- * =====================================
- *
- * Program rendering nodes using GL_POINTS, but that draws an image on top of
- * the classic colored disc.
- * @module
- */
-import { NodeDisplayData } from "../../../types";
-import { AbstractNodeProgram } from "./common/node";
-import { RenderParams } from "./common/program";
-import Sigma from "../../../sigma";
-declare class AbstractNodeImageProgram extends AbstractNodeProgram {
-    constructor(gl: WebGLRenderingContext, renderer: Sigma);
-    bind(): void;
-    process(data: NodeDisplayData & {
-        image?: string;
-    }, hidden: boolean, offset: number): void;
-    render(params: RenderParams): void;
-    rebindTexture(): void;
-}
-/**
  * To share the texture between the program instances of the graph and the
@@ -27,3 +7,2 @@ * hovered nodes (to prevent some flickering, mostly), this program must be
  */
-export default function getNodeImageProgram(): typeof AbstractNodeImageProgram;
-export {};
+export default function getNodeImageProgram(): NodeProgramConstructor;

rendering/webgl/programs/node.image.js

@@ -25,21 +25,7 @@ "use strict";
 var node_1 = require("./common/node");
-var POINTS = 1, ATTRIBUTES = 8, 
 // maximum size of single texture in atlas
-MAX_TEXTURE_SIZE = 192, 
+var MAX_TEXTURE_SIZE = 192;
 // maximum width of atlas texture (limited by browser)
 // low setting of 3072 works on phones & tablets
-MAX_CANVAS_WIDTH = 3072;
-// This class only exists for the return typing of `getNodeImageProgram`:
-var AbstractNodeImageProgram = /** @class */ (function (_super) {
-    __extends(AbstractNodeImageProgram, _super);
-    /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars */
-    function AbstractNodeImageProgram(gl, renderer) {
-        return _super.call(this, gl, node_image_vert_glsl_1.default, node_image_frag_glsl_1.default, POINTS, ATTRIBUTES) || this;
-    }
-    AbstractNodeImageProgram.prototype.bind = function () { };
-    AbstractNodeImageProgram.prototype.process = function (data, hidden, offset) { };
-    AbstractNodeImageProgram.prototype.render = function (params) { };
-    AbstractNodeImageProgram.prototype.rebindTexture = function () { };
-    return AbstractNodeImageProgram;
-}(node_1.AbstractNodeProgram));
+var MAX_CANVAS_WIDTH = 3072;
 /**
@@ -185,6 +171,8 @@ * To share the texture between the program instances of the graph and the
     }
+    var UNSIGNED_BYTE = WebGLRenderingContext.UNSIGNED_BYTE, FLOAT = WebGLRenderingContext.FLOAT;
+    var UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix", "u_atlas"];
     return /** @class */ (function (_super) {
         __extends(NodeImageProgram, _super);
         function NodeImageProgram(gl, renderer) {
-            var _this = _super.call(this, gl, node_image_vert_glsl_1.default, node_image_frag_glsl_1.default, POINTS, ATTRIBUTES) || this;
+            var _this = _super.call(this, gl, renderer) || this;
             rebindTextureFns.push(function () {
@@ -197,25 +185,32 @@ if (_this && _this.rebindTexture)
             textureImage = new ImageData(1, 1);
-            // Attribute Location
-            _this.textureLocation = gl.getAttribLocation(_this.program, "a_texture");
-            // Uniform Location
-            var atlasLocation = gl.getUniformLocation(_this.program, "u_atlas");
-            if (atlasLocation === null)
-                throw new Error("NodeProgramImage: error while getting atlasLocation");
-            _this.atlasLocation = atlasLocation;
-            // Initialize WebGL texture:
             _this.texture = gl.createTexture();
             gl.bindTexture(gl.TEXTURE_2D, _this.texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
-            _this.bind();
             return _this;
         }
-        NodeImageProgram.prototype.bind = function () {
-            _super.prototype.bind.call(this);
+        NodeImageProgram.prototype.getDefinition = function () {
+            return {
+                VERTICES: 1,
+                ARRAY_ITEMS_PER_VERTEX: 8,
+                VERTEX_SHADER_SOURCE: node_image_vert_glsl_1.default,
+                FRAGMENT_SHADER_SOURCE: node_image_frag_glsl_1.default,
+                UNIFORMS: 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_texture", size: 4, type: FLOAT },
+                ],
+            };
+        };
+        NodeImageProgram.prototype.rebindTexture = function () {
             var gl = this.gl;
-            gl.enableVertexAttribArray(this.textureLocation);
-            gl.vertexAttribPointer(this.textureLocation, 4, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+            gl.bindTexture(gl.TEXTURE_2D, this.texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
+            gl.generateMipmap(gl.TEXTURE_2D);
+            if (this.latestRenderParams)
+                this.render(this.latestRenderParams);
         };
-        NodeImageProgram.prototype.process = function (data, hidden, offset) {
+        NodeImageProgram.prototype.processVisibleItem = function (i, data) {
             var array = this.array;
-            var i = offset * POINTS * ATTRIBUTES;
             var imageSource = data.image;
@@ -225,14 +220,2 @@ var imageState = imageSource && images[imageSource];
                 loadImage(imageSource);
-            if (hidden) {
-                array[i++] = 0;
-                array[i++] = 0;
-                array[i++] = 0;
-                array[i++] = 0;
-                // Texture:
-                array[i++] = 0;
-                array[i++] = 0;
-                array[i++] = 0;
-                array[i++] = 0;
-                return;
-            }
             array[i++] = data.x;
@@ -257,29 +240,15 @@ array[i++] = data.y;
         };
-        NodeImageProgram.prototype.render = function (params) {
-            if (this.hasNothingToRender())
-                return;
+        NodeImageProgram.prototype.draw = function (params) {
             this.latestRenderParams = params;
             var gl = this.gl;
-            var 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);
-            gl.uniform1i(this.atlasLocation, 0);
-            gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+            var _a = this.uniformLocations, u_sizeRatio = _a.u_sizeRatio, u_pixelRatio = _a.u_pixelRatio, u_matrix = _a.u_matrix, u_atlas = _a.u_atlas;
+            gl.uniform1f(u_sizeRatio, params.sizeRatio);
+            gl.uniform1f(u_pixelRatio, params.pixelRatio);
+            gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+            gl.uniform1i(u_atlas, 0);
+            gl.drawArrays(gl.POINTS, 0, this.verticesCount);
         };
-        NodeImageProgram.prototype.rebindTexture = function () {
-            var gl = this.gl;
-            gl.bindTexture(gl.TEXTURE_2D, this.texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
-            gl.generateMipmap(gl.TEXTURE_2D);
-            if (this.latestRenderParams) {
-                this.bind();
-                this.bufferData();
-                this.render(this.latestRenderParams);
-            }
-        };
         return NodeImageProgram;
-    }(node_1.AbstractNodeProgram));
+    }(node_1.NodeProgram));
 }
 exports.default = getNodeImageProgram;

rendering/webgl/shaders/edge.arrowHead.vert.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var a={d:(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},o:(a,e)=>Object.prototype.hasOwnProperty.call(a,e),r:a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})}},e={};a.r(e),a.d(e,{default:()=>t});const t="attribute vec2 a_position;\nattribute vec2 a_normal;\nattribute float a_radius;\nattribute vec4 a_color;\nattribute vec3 a_barycentric;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadWidthLengthRatio = 0.66;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl and\n  // edge.clamped.vert.glsl. Please read it to get better comments on what's\n  // happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n  float adaptedWebGLNodeRadius = a_radius * 2.0 * u_correctionRatio * u_sqrtZoomRatio;\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio;\n  float adaptedWebGLArrowHeadHalfWidth = adaptedWebGLArrowHeadLength * arrowHeadWidthLengthRatio / 2.0;\n\n  float da = a_barycentric.x;\n  float db = a_barycentric.y;\n  float dc = a_barycentric.z;\n\n  vec2 delta = vec2(\n      da * (adaptedWebGLNodeRadius * unitNormal.y)\n    + db * ((adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength) * unitNormal.y + adaptedWebGLArrowHeadHalfWidth * unitNormal.x)\n    + dc * ((adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength) * unitNormal.y - adaptedWebGLArrowHeadHalfWidth * unitNormal.x),\n\n      da * (-adaptedWebGLNodeRadius * unitNormal.x)\n    + db * (-(adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength) * unitNormal.x + adaptedWebGLArrowHeadHalfWidth * unitNormal.y)\n    + dc * (-(adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength) * unitNormal.x - adaptedWebGLArrowHeadHalfWidth * unitNormal.y)\n  );\n\n  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;\n\n  gl_Position = vec4(position, 0, 1);\n\n  // Extract the color:\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=e})();
+(()=>{"use strict";var e={d:(a,n)=>{for(var t in n)e.o(n,t)&&!e.o(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:n[t]})},o:(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},a={};e.r(a),e.d(a,{default:()=>n});const n="attribute vec2 a_position;\nattribute vec2 a_normal;\nattribute float a_radius;\nattribute vec4 a_color;\nattribute vec3 a_barycentric;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadWidthLengthRatio = 0.66;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl and\n  // edge.clamped.vert.glsl. Please read it to get better comments on what's\n  // happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sizeRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio / u_sizeRatio;\n  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;\n  float webGLArrowHeadLength = webGLThickness * 2.0 * arrowHeadLengthThicknessRatio;\n  float webGLArrowHeadHalfWidth = webGLArrowHeadLength * arrowHeadWidthLengthRatio / 2.0;\n\n  float da = a_barycentric.x;\n  float db = a_barycentric.y;\n  float dc = a_barycentric.z;\n\n  vec2 delta = vec2(\n      da * (webGLNodeRadius * unitNormal.y)\n    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadHalfWidth * unitNormal.x)\n    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadHalfWidth * unitNormal.x),\n\n      da * (-webGLNodeRadius * unitNormal.x)\n    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadHalfWidth * unitNormal.y)\n    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadHalfWidth * unitNormal.y)\n  );\n\n  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;\n\n  gl_Position = vec4(position, 0, 1);\n\n  // Extract the color:\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=a})();

rendering/webgl/shaders/edge.clamped.vert.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var e={d:(o,n)=>{for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{default:()=>n});const n="attribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl. Please read it to\n  // get better comments on what's happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // Here, we move the point to leave space for the arrow head:\n  float direction = sign(a_radius);\n  float adaptedWebGLNodeRadius = direction * a_radius * 2.0 * u_correctionRatio * u_sqrtZoomRatio;\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio;\n\n  vec2 compensationVector = vec2(-direction * unitNormal.y, direction * unitNormal.x) * (adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength);\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness + compensationVector, 1)).xy, 0, 1);\n\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=o})();
+(()=>{"use strict";var e={d:(o,n)=>{for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{default:()=>n});const n="attribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\n\nuniform mat3 u_matrix;\nuniform float u_zoomRatio;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl. Please read it to\n  // get better comments on what's happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sizeRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio / u_sizeRatio;\n\n  // Here, we move the point to leave space for the arrow head:\n  float direction = sign(a_radius);\n  float webGLNodeRadius = direction * a_radius * 2.0 * u_correctionRatio / u_sizeRatio;\n  float webGLArrowHeadLength = webGLThickness * 2.0 * arrowHeadLengthThicknessRatio;\n\n  vec2 compensationVector = vec2(-direction * unitNormal.y, direction * unitNormal.x) * (webGLNodeRadius + webGLArrowHeadLength);\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * webGLThickness + compensationVector, 1)).xy, 0, 1);\n\n  v_thickness = webGLThickness / u_zoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=o})();

rendering/webgl/shaders/edge.triangle.vert.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var n={d:(o,e)=>{for(var t in e)n.o(e,t)&&!n.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},o:(n,o)=>Object.prototype.hasOwnProperty.call(n,o),r:n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})}},o={};n.r(o),n.d(o,{default:()=>e});const e="attribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  // The only different here with edge.vert.glsl is that we need to handle null\n  // input normal vector. Apart from that, you can read edge.vert.glsl more info\n  // on how it works:\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n  if (normalLength <= 0.0) unitNormal = a_normal;\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness, 1)).xy, 0, 1);\n\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=o})();
+(()=>{"use strict";var n={d:(o,e)=>{for(var t in e)n.o(e,t)&&!n.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},o:(n,o)=>Object.prototype.hasOwnProperty.call(n,o),r:n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})}},o={};n.r(o),n.d(o,{default:()=>e});const e="attribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  // The only different here with edge.vert.glsl is that we need to handle null\n  // input normal vector. Apart from that, you can read edge.vert.glsl more info\n  // on how it works:\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n  if (normalLength <= 0.0) unitNormal = a_normal;\n  float pixelsThickness = max(normalLength, minThickness * u_sizeRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio / u_sizeRatio;\n\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * webGLThickness, 1)).xy, 0, 1);\n\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=o})();

rendering/webgl/shaders/node.image.vert.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>n});const n="attribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  gl_Position = vec4(\n    (u_matrix * vec3(a_position, 1)).xy,\n    0,\n    1\n  );\n\n  // Multiply the point size twice:\n  //  - x SCALING_RATIO to correct the canvas scaling\n  //  - x 2 to correct the formulae\n  gl_PointSize = a_size * u_ratio * u_scale * 2.0;\n\n  v_border = (1.0 / u_ratio) * (0.5 / a_size);\n\n  // Extract the color:\n  v_color = a_color;\n  v_color.a *= bias;\n\n  // Pass the texture coordinates:\n  v_texture = a_texture;\n}\n";module.exports=e})();
+(()=>{"use strict";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>o});const o="attribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\n\nuniform float u_sizeRatio;\nuniform float u_pixelRatio;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  gl_Position = vec4(\n    (u_matrix * vec3(a_position, 1)).xy,\n    0,\n    1\n  );\n\n  // Multiply the point size twice:\n  //  - x SCALING_RATIO to correct the canvas scaling\n  //  - x 2 to correct the formulae\n  gl_PointSize = a_size / u_sizeRatio * u_pixelRatio * 2.0;\n\n  v_border = (0.5 / a_size) * u_sizeRatio;\n\n  // Extract the color:\n  v_color = a_color;\n  v_color.a *= bias;\n\n  // Pass the texture coordinates:\n  v_texture = a_texture;\n}\n";module.exports=e})();

settings.d.ts

@@ -13,4 +13,4 @@ /**
 import { EdgeDisplayData, NodeDisplayData } from "./types";
-import CircleNodeProgram from "./rendering/webgl/programs/node.fast";
-import LineEdgeProgram from "./rendering/webgl/programs/edge";
+import NodePointProgram from "./rendering/webgl/programs/node.point";
+import EdgeRectangleProgram from "./rendering/webgl/programs/edge.rectangle";
 import { EdgeProgramConstructor } from "./rendering/webgl/programs/common/edge";
@@ -55,2 +55,3 @@ import { NodeProgramConstructor } from "./rendering/webgl/programs/common/node";
     stagePadding: number;
+    zoomToSizeRatioFunction: (ratio: number) => number;
     labelDensity: number;
@@ -80,9 +81,9 @@ labelGridCellSize: number;
 export declare const DEFAULT_NODE_PROGRAM_CLASSES: {
-    circle: typeof CircleNodeProgram;
+    circle: typeof NodePointProgram;
 };
 export declare const DEFAULT_EDGE_PROGRAM_CLASSES: {
     arrow: EdgeProgramConstructor;
-    line: typeof LineEdgeProgram;
+    line: typeof EdgeRectangleProgram;
 };
 export declare function validateSettings(settings: Settings): void;
 export declare function resolveSettings(settings: Partial<Settings>): Settings;

settings.js

@@ -11,4 +11,4 @@ "use strict";
 var edge_label_1 = __importDefault(require("./rendering/canvas/edge-label"));
-var node_fast_1 = __importDefault(require("./rendering/webgl/programs/node.fast"));
-var edge_1 = __importDefault(require("./rendering/webgl/programs/edge"));
+var node_point_1 = __importDefault(require("./rendering/webgl/programs/node.point"));
+var edge_rectangle_1 = __importDefault(require("./rendering/webgl/programs/edge.rectangle"));
 var edge_arrow_1 = __importDefault(require("./rendering/webgl/programs/edge.arrow"));
@@ -38,2 +38,3 @@ exports.DEFAULT_SETTINGS = {
     stagePadding: 30,
+    zoomToSizeRatioFunction: Math.sqrt,
     // Labels
@@ -62,7 +63,7 @@ labelDensity: 1,
 exports.DEFAULT_NODE_PROGRAM_CLASSES = {
-    circle: node_fast_1.default,
+    circle: node_point_1.default,
 };
 exports.DEFAULT_EDGE_PROGRAM_CLASSES = {
     arrow: edge_arrow_1.default,
-    line: edge_1.default,
+    line: edge_rectangle_1.default,
 };
@@ -69,0 +70,0 @@ function validateSettings(settings) {

sigma.d.ts

@@ -81,3 +81,4 @@ /**
     private pixelRatio;
-    private displayedLabels;
+    private displayedNodeLabels;
+    private displayedEdgeLabels;
     private highlightedNodes;
@@ -89,3 +90,2 @@ private hoveredNode;
     private needToProcess;
-    private needToSoftProcess;
     private checkEdgesEventsFrame;
@@ -183,16 +183,2 @@ private nodePrograms;
     /**
-     * Method that decides whether to reprocess graph or not, and then render the
-     * graph.
-     *
-     * @return {Sigma}
-     */
-    private _refresh;
-    /**
-     * Method that schedules a `_refresh` call if none has been scheduled yet. It
-     * will then be processed next available frame.
-     *
-     * @return {Sigma}
-     */
-    private _scheduleRefresh;
-    /**
      * Method used to render labels.
@@ -302,2 +288,14 @@ *
     /**
+     * Method used to get the set of currently displayed node labels.
+     *
+     * @return {Set<string>} A set of node keys whose label is displayed.
+     */
+    getNodeDisplayedLabels(): Set<string>;
+    /**
+     * Method used to get the set of currently displayed edge labels.
+     *
+     * @return {Set<string>} A set of edge keys whose label is displayed.
+     */
+    getEdgeDisplayedLabels(): Set<string>;
+    /**
      * Method returning a copy of the settings collection.
@@ -346,3 +344,4 @@ *
     /**
-     * Method used to refresh all computed data.
+     * Method used to refresh, i.e. force the renderer to fully reprocess graph
+     * data and render.
      *
@@ -353,7 +352,17 @@ * @return {Sigma}
     /**
-     * Method used to refresh all computed data, at the next available frame.
-     * If this method has already been called this frame, then it will only render once at the next available frame.
+     * Method used to schedule a render at the next available frame.
+     * This method can be safely called on a same frame because it basically
+     * debounce refresh to the next frame.
      *
      * @return {Sigma}
      */
+    scheduleRender(): this;
+    /**
+     * Method used to schedule a refresh (i.e. fully reprocess graph data and render)
+     * at the next available frame.
+     * This method can be safely called on a same frame because it basically
+     * debounce refresh to the next frame.
+     *
+     * @return {Sigma}
+     */
     scheduleRefresh(): this;
@@ -360,0 +369,0 @@ /**

typedoc.json

 {
-  "entryPointStrategy": "Expand",
+  "entryPointStrategy": "expand",
   "entryPoints": ["./src/sigma.ts", "./src/index.ts", "./src/settings.ts", "./src/types.ts", "./src/core"],
@@ -4,0 +4,0 @@ "exclude": ["./node_modules"],

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

683015

increased by5.43%

Number of package files

96

increased by6.67%

Worsened metrics

Lines of code

12365

decreased by-1.42%

Number of low quality alerts

1

increased byInfinity%

No dependency changes