sigma - npm Package Compare versions

Comparing version 2.0.0-alpha1 to 2.0.0-alpha2

camera.js

@@ -294,3 +294,4 @@ 'use strict';
       // Canceling previous animation if needed
-      if (this.nextFrame) cancelAnimationFrame(this.nextFrame);
+      // if (this.nextFrame)
+      //   cancelAnimationFrame(this.nextFrame);
 
@@ -327,3 +328,8 @@ // State
 
-      this.nextFrame = requestAnimationFrame(fn);
+      if (this.nextFrame) {
+        cancelAnimationFrame(this.nextFrame);
+        this.nextFrame = requestAnimationFrame(fn);
+      } else {
+        fn();
+      }
     }
@@ -330,0 +336,0 @@ }]);

package.json

 {
   "name": "sigma",
-  "version": "2.0.0-alpha1",
+  "version": "2.0.0-alpha2",
   "description": "A JavaScript library dedicated to graph drawing.",
@@ -12,3 +12,3 @@ "homepage": "http://sigmajs.org",
     "dist": "npm run clean && babel src --out-dir . && webpack --config ./webpack.programs.config.js",
-    "examples": "webpack-dev-server --config ./examples/webpack.config.js --port 8000 --progress",
+    "examples": "webpack-dev-server --config ./examples/webpack.config.js --progress",
     "lint": "eslint examples src test",
@@ -15,0 +15,0 @@ "postpublish": "npm run clean",

quadtree.js

@@ -149,7 +149,8 @@ "use strict";
   while (stack.length) {
-    var level = stack.pop(),
-        block = stack.pop();
+    var level = stack.pop();
 
+    var block = stack.pop();
+
     // If we reached max level
-    if (level === maxLevel) {
+    if (level >= maxLevel) {
       containers[block] = containers[block] || [];
@@ -178,4 +179,7 @@ containers[block].push(key);
 
+    // If we have 3 collisions, we have a geometry problem obviously
+    if (collisions === 3) throw new Error("sigma/quadtree.insertNode: 3 impossible collisions (level: " + level + ", key: " + key + ", x: " + x + ", y: " + y + ", size: " + size + ").");
+
     // If we have more that one collision, we stop here and store the node
-    // in the relevant container
+    // in the relevant containers
     if (collisions > 1) {
@@ -185,12 +189,14 @@ containers[block] = containers[block] || [];
       return;
+    } else {
+      level++;
     }
 
-    // Else we recurse into the correct quad
-    if (collidingWithTopLeft) stack.push(topLeftBlock, level + 1);
+    // Else we recurse into the correct quads
+    if (collidingWithTopLeft) stack.push(topLeftBlock, level);
 
-    if (collidingWithTopRight) stack.push(topRightBlock, level + 1);
+    if (collidingWithTopRight) stack.push(topRightBlock, level);
 
-    if (collidingWithBottomLeft) stack.push(bottomLeftBlock, level + 1);
+    if (collidingWithBottomLeft) stack.push(bottomLeftBlock, level);
 
-    if (collidingWithBottomRight) stack.push(bottomRightBlock, level + 1);
+    if (collidingWithBottomRight) stack.push(bottomRightBlock, level);
   }
@@ -254,7 +260,5 @@ }
 
-      while (level <= MAX_LEVEL) {
-
+      do {
         if (this.containers[block]) nodes.push.apply(nodes, this.containers[block]);
 
-        // TODO: should probably use a do...while to avoid useless last op
         var quad = pointIsInQuad(x, y, this.data[block + X_OFFSET], this.data[block + Y_OFFSET], this.data[block + WIDTH_OFFSET], this.data[block + HEIGHT_OFFSET]);
@@ -264,3 +268,3 @@
         level++;
-      }
+      } while (level <= MAX_LEVEL);
 
@@ -267,0 +271,0 @@ return nodes;

renderers/webgl/index.js

@@ -66,4 +66,4 @@ 'use strict';
  */
-var WEBGL_OVERSAMPLING_RATIO = 2;
 var PIXEL_RATIO = (0, _utils2.getPixelRatio)();
+var WEBGL_OVERSAMPLING_RATIO = (0, _utils2.getPixelRatio)();
 
@@ -106,9 +106,2 @@ /**
 
-    _this.nodePrograms = {
-      def: new _node2.default()
-    };
-    _this.edgePrograms = {
-      def: new _edge2.default()
-    };
-
     // TODO: if we drop size scaling => this should become "rescalingFunction"
@@ -124,2 +117,3 @@ _this.nodeRescalingFunction = null;
     _this.hoveredNode = null;
+    _this.wasRenderedInThisFrame = false;
     _this.renderFrame = null;
@@ -138,2 +132,21 @@ _this.renderHighlightedNodesFrame = null;
 
+    // Blending
+    var gl = _this.contexts.nodes;
+
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.BLEND);
+
+    gl = _this.contexts.edges;
+
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.BLEND);
+
+    // Loading programs
+    _this.nodePrograms = {
+      def: new _node2.default(_this.contexts.nodes)
+    };
+    _this.edgePrograms = {
+      def: new _edge2.default(_this.contexts.edges)
+    };
+
     // Initial resize
@@ -158,9 +171,3 @@ _this.resize();
     _this.bindEventHandlers();
-
-    // Loading programs
-    for (var k in _this.nodePrograms) {
-      _this.nodePrograms[k].load(_this.contexts.nodes);
-    }for (var _k in _this.edgePrograms) {
-      _this.edgePrograms[_k].load(_this.contexts.edges);
-    }return _this;
+    return _this;
   }
@@ -216,3 +223,4 @@
       var contextOptions = {
-        preserveDrawingBuffer: true
+        preserveDrawingBuffer: true,
+        antialias: false
       };
@@ -711,7 +719,2 @@
 
-      // Blending
-      // TODO: check the purpose of this
-      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-      gl.enable(gl.BLEND);
-
       // TODO: should probably use another name for the `program` abstraction
@@ -832,4 +835,29 @@ program.render(gl, this.nodeArray, {
 
+      // If we did not render in this frame yet
+      // if (!this.wasRenderedInThisFrame) {
+
+      //   // Do we need to process data?
+      //   if (this.needToProcess || this.needToSoftProcess)
+      //     this.process(this.needToSoftProcess);
+
+      //   // Resetting state
+      //   this.renderFrame = null;
+      //   this.needToProcess = false;
+      //   this.needToSoftProcess = false;
+
+      //   this.render();
+
+      //   this.wasRenderedInThisFrame = true;
+
+      //   requestAnimationFrame(() => {
+      //     this.wasRenderedInThisFrame = false;
+      //   });
+
+      //   return this;
+      // }
+
+      // A frame is already scheduled
       if (this.renderFrame) return this;
 
+      // Let's schedule a frame
       this.renderFrame = requestAnimationFrame(function () {
@@ -836,0 +864,0 @@

renderers/webgl/programs/edge.js

@@ -50,9 +50,33 @@ 'use strict';
 
-  function EdgeProgram() {
+  function EdgeProgram(gl) {
     _classCallCheck(this, EdgeProgram);
 
-    var _this = _possibleConstructorReturn(this, (EdgeProgram.__proto__ || Object.getPrototypeOf(EdgeProgram)).call(this));
+    // Initializing buffers
+    var _this = _possibleConstructorReturn(this, (EdgeProgram.__proto__ || Object.getPrototypeOf(EdgeProgram)).call(this, gl, _edgeVert2.default, _edgeFrag2.default));
 
-    _this.vertexShaderSource = _edgeVert2.default;
-    _this.fragmentShaderSource = _edgeFrag2.default;
+    _this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, _this.buffer);
+
+    _this.indicesBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _this.indicesBuffer);
+
+    // Locations
+    _this.positionLocation = gl.getAttribLocation(_this.program, 'a_position');
+    _this.normalLocation = gl.getAttribLocation(_this.program, 'a_normal');
+    _this.thicknessLocation = gl.getAttribLocation(_this.program, 'a_thickness');
+    _this.colorLocation = gl.getAttribLocation(_this.program, 'a_color');
+    _this.resolutionLocation = gl.getUniformLocation(_this.program, 'u_resolution');
+    _this.ratioLocation = gl.getUniformLocation(_this.program, 'u_ratio');
+    _this.matrixLocation = gl.getUniformLocation(_this.program, 'u_matrix');
+
+    // Bindings
+    gl.enableVertexAttribArray(_this.positionLocation);
+    gl.enableVertexAttribArray(_this.normalLocation);
+    gl.enableVertexAttribArray(_this.thicknessLocation);
+    gl.enableVertexAttribArray(_this.colorLocation);
+
+    gl.vertexAttribPointer(_this.positionLocation, 2, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
+    gl.vertexAttribPointer(_this.normalLocation, 2, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
+    gl.vertexAttribPointer(_this.thicknessLocation, 1, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
+    gl.vertexAttribPointer(_this.colorLocation, 1, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 20);
     return _this;
@@ -151,36 +175,12 @@ }
 
-      // Attribute locations
-      var positionLocation = gl.getAttribLocation(program, 'a_position'),
-          normalLocation = gl.getAttribLocation(program, 'a_normal'),
-          thicknessLocation = gl.getAttribLocation(program, 'a_thickness'),
-          colorLocation = gl.getAttribLocation(program, 'a_color'),
-          resolutionLocation = gl.getUniformLocation(program, 'u_resolution'),
-          ratioLocation = gl.getUniformLocation(program, 'u_ratio'),
-          matrixLocation = gl.getUniformLocation(program, 'u_matrix');
+      // Buffer data
+      gl.bufferData(gl.ARRAY_BUFFER, array, gl.DYNAMIC_DRAW);
 
-      // Creating buffer:
-      var buffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
-
       // Binding uniforms
-      gl.uniform2f(resolutionLocation, params.width, params.height);
-      gl.uniform1f(ratioLocation, params.ratio / Math.pow(params.ratio, params.edgesPowRatio));
+      gl.uniform2f(this.resolutionLocation, params.width, params.height);
+      gl.uniform1f(this.ratioLocation, params.ratio / Math.pow(params.ratio, params.edgesPowRatio));
 
-      gl.uniformMatrix3fv(matrixLocation, false, params.matrix);
+      gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
 
-      // Binding attributes:
-      gl.enableVertexAttribArray(positionLocation);
-      gl.enableVertexAttribArray(normalLocation);
-      gl.enableVertexAttribArray(thicknessLocation);
-      gl.enableVertexAttribArray(colorLocation);
-
-      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
-      gl.vertexAttribPointer(normalLocation, 2, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
-      gl.vertexAttribPointer(thicknessLocation, 1, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
-      gl.vertexAttribPointer(colorLocation, 1, gl.FLOAT, false, EdgeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 20);
-
-      // Creating indices buffer:
-      var indicesBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
+      // Buffering indices data
       gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, params.indices, gl.STATIC_DRAW);
@@ -187,0 +187,0 @@

renderers/webgl/programs/node.js

@@ -47,9 +47,34 @@ 'use strict';
 
-  function NodeProgram() {
+  function NodeProgram(gl) {
     _classCallCheck(this, NodeProgram);
 
-    var _this = _possibleConstructorReturn(this, (NodeProgram.__proto__ || Object.getPrototypeOf(NodeProgram)).call(this));
+    // Initializing buffers
+    var _this = _possibleConstructorReturn(this, (NodeProgram.__proto__ || Object.getPrototypeOf(NodeProgram)).call(this, gl, _nodeVert2.default, _nodeFrag2.default));
 
-    _this.vertexShaderSource = _nodeVert2.default;
-    _this.fragmentShaderSource = _nodeFrag2.default;
+    _this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, _this.buffer);
+
+    // 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');
+    _this.resolutionLocation = gl.getUniformLocation(_this.program, 'u_resolution');
+    _this.matrixLocation = gl.getUniformLocation(_this.program, 'u_matrix');
+    _this.ratioLocation = gl.getUniformLocation(_this.program, 'u_ratio');
+    _this.scaleLocation = gl.getUniformLocation(_this.program, 'u_scale');
+
+    // Bindings
+    gl.enableVertexAttribArray(_this.positionLocation);
+    gl.enableVertexAttribArray(_this.sizeLocation);
+    gl.enableVertexAttribArray(_this.colorLocation);
+    gl.enableVertexAttribArray(_this.angleLocation);
+
+    gl.vertexAttribPointer(_this.positionLocation, 2, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
+
+    gl.vertexAttribPointer(_this.sizeLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
+
+    gl.vertexAttribPointer(_this.colorLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 12);
+
+    gl.vertexAttribPointer(_this.angleLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
     return _this;
@@ -87,36 +112,9 @@ }
 
-      // Attribute locations
-      var positionLocation = gl.getAttribLocation(program, 'a_position'),
-          sizeLocation = gl.getAttribLocation(program, 'a_size'),
-          colorLocation = gl.getAttribLocation(program, 'a_color'),
-          angleLocation = gl.getAttribLocation(program, 'a_angle'),
-          resolutionLocation = gl.getUniformLocation(program, 'u_resolution'),
-          matrixLocation = gl.getUniformLocation(program, 'u_matrix'),
-          ratioLocation = gl.getUniformLocation(program, 'u_ratio'),
-          scaleLocation = gl.getUniformLocation(program, 'u_scale');
-
-      var buffer = gl.createBuffer();
-
-      // TODO: might be possible not to buffer data each time if only the camera changes
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
       gl.bufferData(gl.ARRAY_BUFFER, array, gl.DYNAMIC_DRAW);
 
-      gl.uniform2f(resolutionLocation, params.width, params.height);
-      gl.uniform1f(ratioLocation, 1 / Math.pow(params.ratio, params.nodesPowRatio));
-      gl.uniform1f(scaleLocation, params.scalingRatio);
-      gl.uniformMatrix3fv(matrixLocation, false, params.matrix);
+      gl.uniform2f(this.resolutionLocation, params.width, params.height);
+      gl.uniform1f(this.ratioLocation, 1 / Math.pow(params.ratio, params.nodesPowRatio));
+      gl.uniform1f(this.scaleLocation, params.scalingRatio);
+      gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
 
-      gl.enableVertexAttribArray(positionLocation);
-      gl.enableVertexAttribArray(sizeLocation);
-      gl.enableVertexAttribArray(colorLocation);
-      gl.enableVertexAttribArray(angleLocation);
-
-      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
-
-      gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
-
-      gl.vertexAttribPointer(colorLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 12);
-
-      gl.vertexAttribPointer(angleLocation, 1, gl.FLOAT, false, NodeProgram.ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
-
       gl.drawArrays(gl.TRIANGLES, 0, array.length / NodeProgram.ATTRIBUTES);
@@ -123,0 +121,0 @@ }

renderers/webgl/programs/program.js

@@ -25,16 +25,21 @@ 'use strict';
 var Program = function () {
-  function Program() {
+  function Program(gl, vertexShaderSource, fragmentShaderSource) {
     _classCallCheck(this, Program);
+
+    this.vertexShaderSource = vertexShaderSource;
+    this.fragmentShaderSource = fragmentShaderSource;
+
+    this.load(gl);
   }
 
+  /**
+   * Method used to load the program into a webgl context.
+   *
+   * @param  {WebGLContext} gl - The WebGL context.
+   * @return {WebGLProgram}
+   */
+
+
   _createClass(Program, [{
     key: 'load',
-
-
-    /**
-     * Method used to load the program into a webgl context.
-     *
-     * @param  {WebGLContext} gl - The WebGL context.
-     * @return {WebGLProgram}
-     */
     value: function load(gl) {
@@ -41,0 +46,0 @@ this.vertexShader = (0, _utils.loadVertexShader)(gl, this.vertexShaderSource);

renderers/webgl/shaders/utils.js

@@ -37,3 +37,3 @@ 'use strict';
     gl.deleteShader(shader);
-    throw new Error('sigma/renderers/weblg/shaders/utils.loadShader: error while compiling the shader:\n' + infoLog);
+    throw new Error('sigma/renderers/weblg/shaders/utils.loadShader: error while compiling the shader:\n' + infoLog + '\n' + source);
   }
@@ -40,0 +40,0 @@

renderers/webgl/utils.js

@@ -23,3 +23,5 @@ 'use strict';
 
+// TODO: this is heavy for what we do with it
 
+
 var RGBA_TEST_REGEX = /^\s*rgba?\s*\(/;
@@ -26,0 +28,0 @@ var RGBA_EXTRACT_REGEX = /^\s*rgba?\s*\(\s*([0-9]*)\s*,\s*([0-9]*)\s*,\s*([0-9]*)\s*(,.*)?\)\s*$/;

webpack.programs.config.js

@@ -6,5 +6,9 @@ var path = require('path');
     'node.vert': './src/renderers/webgl/shaders/node.vert.glsl',
+    'node.fast.vert': './src/renderers/webgl/shaders/node.fast.vert.glsl',
     'edge.vert': './src/renderers/webgl/shaders/edge.vert.glsl',
+    'edge.fast.vert': './src/renderers/webgl/shaders/edge.fast.vert.glsl',
     'node.frag': './src/renderers/webgl/shaders/node.frag.glsl',
-    'edge.frag': './src/renderers/webgl/shaders/edge.frag.glsl'
+    'node.fast.frag': './src/renderers/webgl/shaders/node.fast.frag.glsl',
+    'edge.frag': './src/renderers/webgl/shaders/edge.frag.glsl',
+    'edge.fast.frag': './src/renderers/webgl/shaders/edge.fast.frag.glsl'
   },
@@ -11,0 +15,0 @@ output: {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

604433

increased by5.96%

Number of package files

38

increased by18.75%

Lines of code

11459

increased by1.99%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes