sigma - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

CHANGELOG.md

 # sigma.js - changelog:
 
+## 2.3.0
+
+### Features
+
+- _undocumented_ - Publishes examples to the website
+- [#1142](https://github.com/jacomyal/sigma.js/issues/1142) - Improves TypeScript typings for events
+- [#1170](https://github.com/jacomyal/sigma.js/issues/1170) - Simplifies and optimizes `multiplyVec` internal function
+- [#1196](https://github.com/jacomyal/sigma.js/issues/1196) - Adds new `allowInvalidContainer` to prevent sigma.js from throwing errors when it does not find valid width and/or height
+- [#1205](https://github.com/jacomyal/sigma.js/issues/1205) - Adds a new example showcasing sigma's scalability and performances
+- [#1215](https://github.com/jacomyal/sigma.js/issues/1215) - (ticket still opened) Improves `animateNodes`
+- [#1224](https://github.com/jacomyal/sigma.js/issues/1224) - Adds new internal function `floatArrayColor`
+- [#1225](https://github.com/jacomyal/sigma.js/issues/1225) - Adds new `beforeRender` and `resize` events
+- [#1227](https://github.com/jacomyal/sigma.js/issues/1227) - Implements `#preventSigmaDefault` for mouse move events
+
+### Bug fixes
+
+- [#1214](https://github.com/jacomyal/sigma.js/issues/1214) - Cleans graph lifecycle events handling
+- [#1216](https://github.com/jacomyal/sigma.js/issues/1216) - Fixes CodeSandbox configuration for multiple examples (and the template)
+- [#1219](https://github.com/jacomyal/sigma.js/issues/1219) - Fixes hidden / excess renderings from `node.ts` program
+- [#1223](https://github.com/jacomyal/sigma.js/issues/1223) - Fixes dynamic constant color in various fragment shaders
+- [#1226](https://github.com/jacomyal/sigma.js/issues/1226) - Fixes broken `node.ts` program
+
 ## 2.2.0
@@ -11,3 +33,3 @@
 - [#1176](https://github.com/jacomyal/sigma.js/issues/1176) - Cleans and improves event payloads
-- [#1177](https://github.com/jacomyal/sigma.js/issues/1177) - Allows overriding arguments with `#graphToViewport` and `#vieportToGraph`
+- [#1177](https://github.com/jacomyal/sigma.js/issues/1177) - Allows overriding arguments with `#graphToViewport` and `#viewportToGraph`
 - [#1182](https://github.com/jacomyal/sigma.js/issues/1182) - Adds cached data (from custom reducers) to custom renderers
@@ -69,3 +91,3 @@ - [#1187](https://github.com/jacomyal/sigma.js/issues/1187) - Adds `forceLabel` for nodes and edges
 - _undocumented_ - Edges thickness rendering is now pixel perfect at camera ratio 1, and no more twice bigger on Retina displays
-- _undocumented_ - Cleans some browser warnings for
+- _undocumented_ - Cleans some browser warnings
 - [#1157](https://github.com/jacomyal/sigma.js/issues/1157) - Fixes unexpected node interaction with zIndex
@@ -72,0 +94,0 @@ - [#1148](https://github.com/jacomyal/sigma.js/issues/1148) - Fixes `mousemove` unexpected behaviors

core/camera.d.ts

@@ -13,3 +13,3 @@ /**
  */
-declare type CameraEvents = {
+export declare type CameraEvents = {
     updated(state: CameraState): void;
@@ -138,2 +138,1 @@ };
 }
-export {};

core/captors/mouse.d.ts

@@ -14,3 +14,3 @@ /**
  */
-declare type MouseCaptorEvents = {
+export declare type MouseCaptorEvents = {
     click(coordinates: MouseCoords): void;
@@ -55,2 +55,1 @@ rightClick(coordinates: MouseCoords): void;
 }
-export {};

core/captors/mouse.js

@@ -206,2 +206,4 @@ "use strict";
         }
+        if (mouseCoords.sigmaDefaultPrevented)
+            return;
         // Handle the case when "isMouseDown" all the time, to allow dragging the
@@ -208,0 +210,0 @@ // stage while the mouse is not hover the container:

core/captors/touch.d.ts

@@ -14,3 +14,3 @@ /**
  */
-declare type TouchCaptorEvents = {
+export declare type TouchCaptorEvents = {
     touchdown(coordinates: TouchCoords): void;
@@ -43,2 +43,1 @@ touchup(coordinates: TouchCoords): void;
 }
-export {};

package.json

 {
   "name": "sigma",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A JavaScript library aimed at visualizing graphs of thousands of nodes and edges.",
@@ -23,2 +23,3 @@ "homepage": "https://www.sigmajs.org",
     "examples:prepare": "cd examples && npm install",
+    "examples:build": "cd examples && npm run build",
     "doc:build": "typedoc",
@@ -29,3 +30,3 @@ "demo:prepare": "cd demo && npm install",
     "website:prepare": "rm -Rf website/demo && npm run demo:prepare",
-    "website:build": "npm run demo:build && cp -R demo/build website/demo && npm run doc:build",
+    "website:build": "npm run demo:build && cp -R demo/build website/demo && npm run examples:build && cp -R examples/build website/examples && npm run doc:build",
     "website:all": "npm run website:prepare && npm run website:build",
@@ -32,0 +33,0 @@ "website:watch": "cd website && npx reload"

README.md

@@ -43,11 +43,12 @@ [![Build Status](https://github.com/jacomyal/sigma.js/workflows/Tests/badge.svg)](https://github.com/jacomyal/sigma.js/actions)
 
-- [Fetching and displaying a graph contained in a gexf file](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/load-gexf-file)
-- [Using node & edge reducers to handle interactivity](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/use-reducers)
-- [Fetching, parsing & wrangling a CSV file to create a network map](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/csv-to-network-map)
-- [Handling drag and drop of nodes as well as node & edge creation on click](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/mouse-manipulations)
-- [Displaying arbitrary elements, such as cluster labels, synchronized with the network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/clusters-labels)
-- [Applying different animated layout algorithms to a network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/layouts)
-- [Displaying nodes in various custom ways](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/custom-rendering)
-- [Saving the graph as a PNG image](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/png-snapshot)
-- [Use events to implement interactions](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/events)
+- [Fetching and displaying a graph contained in a gexf file](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/load-gexf-file) ([fallback link](https://sigmajs.org/examples/load-gexf-file))
+- [Using node & edge reducers to handle interactivity](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/use-reducers) ([fallback link](https://sigmajs.org/examples/use-reducers))
+- [Fetching, parsing & wrangling a CSV file to create a network map](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/csv-to-network-map) ([fallback link](https://sigmajs.org/examples/csv-to-network-map))
+- [Handling drag and drop of nodes as well as node & edge creation on click](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/mouse-manipulations) ([fallback link](https://sigmajs.org/examples/mouse-manipulations))
+- [Displaying arbitrary elements, such as cluster labels, synchronized with the network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/clusters-labels) ([fallback link](https://sigmajs.org/examples/clusters-labels))
+- [Applying different animated layout algorithms to a network](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/layouts) ([fallback link](https://sigmajs.org/examples/layouts))
+- [Displaying nodes in various custom ways](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/custom-rendering) ([fallback link](https://sigmajs.org/examples/custom-rendering))
+- [Saving the graph as a PNG image](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/png-snapshot) ([fallback link](https://sigmajs.org/examples/png-snapshot))
+- [Use events to implement interactions](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/events) ([fallback link](https://sigmajs.org/examples/events))
+- [See how sigma behaves with larger graphs](https://githubbox.com/jacomyal/sigma.js/tree/main/examples/large-graphs) ([fallback link](https://sigmajs.org/examples/large-graphs))
 
@@ -54,0 +55,0 @@ Also, a more realistic sigma.js based web application is available in the [`demo`](./demo) folder. It aims to show a real-world usecase, and is the main showcase of [sigma.js website](https://www.sigmajs.org/).

rendering/webgl/programs/common/node.js

@@ -89,3 +89,7 @@ "use strict";
         NodeCompoundProgram.prototype.render = function (params) {
-            this.programs.forEach(function (program) { return program.render(params); });
+            this.programs.forEach(function (program) {
+                program.bind();
+                program.bufferData();
+                program.render(params);
+            });
         };
@@ -92,0 +96,0 @@ NodeCompoundProgram.prototype.process = function (data, hidden, offset) {

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

@@ -1,2 +0,2 @@
-declare const program: import("./common/edge").EdgeProgramConstructor;
-export default program;
+declare const EdgeArrowProgram: import("./common/edge").EdgeProgramConstructor;
+export default EdgeArrowProgram;

rendering/webgl/programs/edge.arrow.js

@@ -16,3 +16,3 @@ "use strict";
 var edge_clamped_1 = __importDefault(require("./edge.clamped"));
-var program = (0, edge_1.createEdgeCompoundProgram)([edge_clamped_1.default, edge_arrowHead_1.default]);
-exports.default = program;
+var EdgeArrowProgram = (0, edge_1.createEdgeCompoundProgram)([edge_clamped_1.default, edge_arrowHead_1.default]);
+exports.default = EdgeArrowProgram;

rendering/webgl/programs/node.js

@@ -25,4 +25,7 @@ "use strict";
 var program_1 = require("./common/program");
-var POINTS = 3, ATTRIBUTES = 5;
-var ANGLE_1 = 0, ANGLE_2 = (2 * Math.PI) / 3, ANGLE_3 = (4 * Math.PI) / 3;
+var POINTS = 3;
+var ATTRIBUTES = 5;
+var ANGLE_1 = 0;
+var ANGLE_2 = (2 * Math.PI) / 3;
+var ANGLE_3 = (4 * Math.PI) / 3;
 var NodeProgram = /** @class */ (function (_super) {
@@ -68,7 +71,4 @@ __extends(NodeProgram, _super);
         if (hidden) {
-            array[i++] = 0;
-            array[i++] = 0;
-            array[i++] = 0;
-            array[i++] = 0;
-            array[i++] = 0;
+            for (var l = i + POINTS * ATTRIBUTES; i < l; i++)
+                array[i] = 0;
             return;
@@ -75,0 +75,0 @@ }

rendering/webgl/shaders/edge.frag.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var e={d:(n,t)=>{for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>t});const t="precision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\n\nvoid main(void) {\n  float dist = length(v_normal) * v_thickness;\n\n  float t = smoothstep(\n    v_thickness - feather,\n    v_thickness,\n    dist\n  );\n\n  gl_FragColor = mix(v_color, transparent, t);\n}";module.exports=n})();
+(()=>{"use strict";var e={d:(n,t)=>{for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>t});const t="precision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  float dist = length(v_normal) * v_thickness;\n\n  float t = smoothstep(\n    v_thickness - feather,\n    v_thickness,\n    dist\n  );\n\n  gl_FragColor = mix(v_color, transparent, t);\n}\n";module.exports=n})();

rendering/webgl/shaders/node.fast.frag.glsl.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var o={d:(e,n)=>{for(var r in n)o.o(n,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r:o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},e={};o.r(e),o.d(e,{default:()=>n});const n="precision mediump float;\n\nvarying vec4 v_color;\nvarying float v_border;\n\nconst float radius = 0.5;\n\nvoid main(void) {\n  vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);\n  vec2 m = gl_PointCoord - vec2(0.5, 0.5);\n  float dist = radius - length(m);\n\n  float t = 0.0;\n  if (dist > v_border)\n    t = 1.0;\n  else if (dist > 0.0)\n    t = dist / v_border;\n\n  gl_FragColor = mix(color0, v_color, t);\n}\n";module.exports=e})();
+(()=>{"use strict";var e={d:(n,o)=>{for(var t in o)e.o(o,t)&&!e.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:o[t]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>o});const o="precision mediump float;\n\nvarying vec4 v_color;\nvarying float v_border;\n\nconst float radius = 0.5;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  vec2 m = gl_PointCoord - vec2(0.5, 0.5);\n  float dist = radius - length(m);\n\n  float t = 0.0;\n  if (dist > v_border)\n    t = 1.0;\n  else if (dist > 0.0)\n    t = dist / v_border;\n\n  gl_FragColor = mix(transparent, v_color, t);\n}\n";module.exports=n})();

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

@@ -1,1 +0,1 @@
-(()=>{"use strict";var e={d:(r,o)=>{for(var n in o)e.o(o,n)&&!e.o(r,n)&&Object.defineProperty(r,n,{enumerable:!0,get:o[n]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{default:()=>o});const o="precision mediump float;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst float radius = 0.5;\n\nvoid main(void) {\n  vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n  vec4 color;\n\n  if (v_texture.w > 0.0) {\n    vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);\n    color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));\n  } else {\n    color = v_color;\n  }\n\n  vec2 m = gl_PointCoord - vec2(0.5, 0.5);\n  float dist = length(m);\n\n  if (dist < radius - v_border) {\n    gl_FragColor = color;\n  } else if (dist < radius) {\n    gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n  } else {\n    gl_FragColor = transparent;\n  }\n}\n";module.exports=r})();
+(()=>{"use strict";var e={d:(o,r)=>{for(var n in r)e.o(r,n)&&!e.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:r[n]})},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:()=>r});const r="precision mediump float;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst float radius = 0.5;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  vec4 color;\n\n  if (v_texture.w > 0.0) {\n    vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);\n    color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));\n  } else {\n    color = v_color;\n  }\n\n  vec2 m = gl_PointCoord - vec2(0.5, 0.5);\n  float dist = length(m);\n\n  if (dist < radius - v_border) {\n    gl_FragColor = color;\n  } else if (dist < radius) {\n    gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n  } else {\n    gl_FragColor = transparent;\n  }\n}\n";module.exports=o})();

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

@@ -1,1 +0,1 @@
-(()=>{"use strict";var o={d:(t,n)=>{for(var i in n)o.o(n,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(o,t)=>Object.prototype.hasOwnProperty.call(o,t),r:o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},t={};o.r(t),o.d(t,{default:()=>n});const n="attribute vec2 a_position;\nattribute float a_size;\nattribute float a_angle;\nattribute vec4 a_color;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_border;\n\nconst float bias = 255.0 / 254.0;\nconst float marginRatio = 1.05;\n\nvoid main() {\n  float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector * marginRatio;\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_border = u_sqrtZoomRatio * u_sqrtZoomRatio / a_size / 50.0;\n  v_diffVector = diffVector;\n  v_radius = size / 2.0 / marginRatio;\n\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=t})();
+(()=>{"use strict";var o={d:(t,n)=>{for(var i in n)o.o(n,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(o,t)=>Object.prototype.hasOwnProperty.call(o,t),r:o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},t={};o.r(t),o.d(t,{default:()=>n});const n="attribute vec2 a_position;\nattribute float a_size;\nattribute float a_angle;\nattribute vec4 a_color;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_border;\n\nconst float bias = 255.0 / 254.0;\nconst float marginRatio = 1.05;\n\nvoid main() {\n  float size = a_size * u_correctionRatio * u_sqrtZoomRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector * marginRatio;\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_border = u_correctionRatio * u_sqrtZoomRatio * u_sqrtZoomRatio;\n  v_diffVector = diffVector;\n  v_radius = size / 2.0 / marginRatio;\n\n  v_color = a_color;\n  v_color.a *= bias;\n}\n";module.exports=t})();

settings.d.ts

@@ -64,2 +64,3 @@ /**
     edgeLabelRenderer: typeof drawEdgeLabel;
+    allowInvalidContainer: boolean;
     nodeProgramClasses: {
@@ -66,0 +67,0 @@ [key: string]: NodeProgramConstructor;

settings.js

@@ -68,2 +68,4 @@ "use strict";
     edgeLabelRenderer: edge_label_1.default,
+    // Lifecycle
+    allowInvalidContainer: false,
     // Program classes
@@ -70,0 +72,0 @@ nodeProgramClasses: {

sigma.d.ts

@@ -15,25 +15,27 @@ /**
  */
-interface SigmaEventPayload {
+export interface SigmaEventPayload {
     event: MouseCoords;
     preventSigmaDefault(): void;
 }
-interface SigmaStageEventPayload extends SigmaEventPayload {
+export interface SigmaStageEventPayload extends SigmaEventPayload {
 }
-interface SigmaNodeEventPayload extends SigmaEventPayload {
+export interface SigmaNodeEventPayload extends SigmaEventPayload {
     node: string;
 }
-interface SigmaEdgeEventPayload extends SigmaEventPayload {
+export interface SigmaEdgeEventPayload extends SigmaEventPayload {
     edge: string;
 }
-declare type SigmaStageEvents = {
+export declare type SigmaStageEvents = {
     [E in MouseInteraction as `${E}Stage`]: (payload: SigmaStageEventPayload) => void;
 };
-declare type SigmaNodeEvents = {
+export declare type SigmaNodeEvents = {
     [E in MouseInteraction as `${E}Node`]: (payload: SigmaNodeEventPayload) => void;
 };
-declare type SigmaEdgeEvents = {
+export declare type SigmaEdgeEvents = {
     [E in MouseInteraction as `${E}Edge`]: (payload: SigmaEdgeEventPayload) => void;
 };
-declare type SigmaAdditionalEvents = {
+export declare type SigmaAdditionalEvents = {
+    beforeRender(): void;
     afterRender(): void;
+    resize(): void;
     kill(): void;
@@ -45,3 +47,3 @@ enterNode(payload: SigmaNodeEventPayload): void;
 };
-declare type SigmaEvents = SigmaStageEvents & SigmaNodeEvents & SigmaEdgeEvents & SigmaAdditionalEvents;
+export declare type SigmaEvents = SigmaStageEvents & SigmaNodeEvents & SigmaEdgeEvents & SigmaAdditionalEvents;
 /**
@@ -71,4 +73,2 @@ * Main class.
     private edgesWithForcedLabels;
-    private nodeKeyToIndex;
-    private edgeKeyToIndex;
     private nodeExtent;
@@ -125,8 +125,2 @@ private matrix;
     /**
-     * Method used to initialize display data cache.
-     *
-     * @return {Sigma}
-     */
-    private initializeCache;
-    /**
      * Method binding camera handlers.
@@ -450,2 +444,1 @@ *
 }
-export {};

sigma.js

@@ -125,4 +125,2 @@ "use strict";
         _this.edgesWithForcedLabels = [];
-        _this.nodeKeyToIndex = {};
-        _this.edgeKeyToIndex = {};
         _this.nodeExtent = { x: [0, 1], y: [0, 1] };
@@ -165,3 +163,2 @@ _this.matrix = (0, matrices_1.identity)();
         _this.container = container;
-        _this.initializeCache();
         // Initializing contexts
@@ -270,22 +267,2 @@ _this.createWebGLContext("edges", { preserveDrawingBuffer: true });
     /**
-     * Method used to initialize display data cache.
-     *
-     * @return {Sigma}
-     */
-    Sigma.prototype.initializeCache = function () {
-        var _this = this;
-        var graph = this.graph;
-        // NOTE: the data caches are never reset to avoid paying a GC cost
-        // But this could prove to be a bad decision. In which case just "reset"
-        // them here.
-        var i = 0;
-        graph.forEachNode(function (key) {
-            _this.nodeKeyToIndex[key] = i++;
-        });
-        i = 0;
-        graph.forEachEdge(function (key) {
-            _this.edgeKeyToIndex[key] = i++;
-        });
-    };
-    /**
      * Method binding camera handlers.
@@ -439,26 +416,34 @@ *
         };
-        this.activeListeners.addNodeGraphUpdate = function (e) {
-            // Adding entry to cache
-            _this.nodeKeyToIndex[e.key] = graph.order - 1;
+        this.activeListeners.dropNodeGraphUpdate = function (e) {
+            delete _this.nodeDataCache[e.key];
+            if (_this.hoveredNode === e.key)
+                _this.hoveredNode = null;
             _this.activeListeners.graphUpdate();
         };
-        this.activeListeners.addEdgeGraphUpdate = function (e) {
-            // Adding entry to cache
-            _this.nodeKeyToIndex[e.key] = graph.order - 1;
+        this.activeListeners.dropEdgeGraphUpdate = function (e) {
+            delete _this.edgeDataCache[e.key];
+            if (_this.hoveredEdge === e.key)
+                _this.hoveredEdge = null;
             _this.activeListeners.graphUpdate();
         };
-        // TODO: clean cache on drop!
-        // TODO: bind this on composed state events
-        // TODO: it could be possible to update only specific node etc. by holding
-        // a fixed-size pool of updated items
-        graph.on("nodeAdded", this.activeListeners.addNodeGraphUpdate);
-        graph.on("nodeDropped", this.activeListeners.graphUpdate);
+        this.activeListeners.clearEdgesGraphUpdate = function () {
+            _this.edgeDataCache = {};
+            _this.hoveredEdge = null;
+            _this.activeListeners.graphUpdate();
+        };
+        this.activeListeners.clearGraphUpdate = function () {
+            _this.nodeDataCache = {};
+            _this.hoveredNode = null;
+            _this.activeListeners.clearEdgesGraphUpdate();
+        };
+        graph.on("nodeAdded", this.activeListeners.graphUpdate);
+        graph.on("nodeDropped", this.activeListeners.dropNodeGraphUpdate);
         graph.on("nodeAttributesUpdated", this.activeListeners.softGraphUpdate);
         graph.on("eachNodeAttributesUpdated", this.activeListeners.graphUpdate);
-        graph.on("edgeAdded", this.activeListeners.addEdgeGraphUpdate);
-        graph.on("edgeDropped", this.activeListeners.graphUpdate);
+        graph.on("edgeAdded", this.activeListeners.graphUpdate);
+        graph.on("edgeDropped", this.activeListeners.dropEdgeGraphUpdate);
         graph.on("edgeAttributesUpdated", this.activeListeners.softGraphUpdate);
         graph.on("eachEdgeAttributesUpdated", this.activeListeners.graphUpdate);
-        graph.on("edgesCleared", this.activeListeners.graphUpdate);
-        graph.on("cleared", this.activeListeners.graphUpdate);
+        graph.on("edgesCleared", this.activeListeners.clearEdgesGraphUpdate);
+        graph.on("cleared", this.activeListeners.clearGraphUpdate);
         return this;
@@ -634,3 +619,2 @@ };
                 this.highlightedNodes.add(node);
-            this.nodeKeyToIndex[node] = i;
         }
@@ -681,3 +665,2 @@ this.labelGrid.organize();
             this.edgePrograms[data.type].process(sourceData, targetData, data, hidden, edgesPerPrograms[data.type]++);
-            this.nodeKeyToIndex[edge] = i;
         }
@@ -914,2 +897,8 @@ for (var type in this.edgePrograms) {
     Sigma.prototype.render = function () {
+        var _this = this;
+        this.emit("beforeRender");
+        var handleEscape = function () {
+            _this.emit("afterRender");
+            return _this;
+        };
         // If a render was scheduled, we cancel it
@@ -930,3 +919,3 @@ if (this.renderFrame) {
         if (!this.graph.order)
-            return this;
+            return handleEscape();
         // TODO: improve this heuristic or move to the captor itself?
@@ -979,8 +968,7 @@ // TODO: deal with the touch captor here as well
         if (this.settings.hideLabelsOnMove && moving)
-            return this;
+            return handleEscape();
         this.renderLabels();
         this.renderEdgeLabels();
         this.renderHighlightedNodes();
-        this.emit("afterRender");
-        return this;
+        return handleEscape();
     };
@@ -1132,9 +1120,18 @@ /**
         this.height = this.container.offsetHeight;
-        if (this.width === 0)
-            throw new Error("Sigma: container has no width.");
-        if (this.height === 0)
-            throw new Error("Sigma: container has no height.");
+        if (this.width === 0) {
+            if (this.settings.allowInvalidContainer)
+                this.width = 1;
+            else
+                throw new Error("Sigma: Container has no width. You can set the allowInvalidContainer setting to true to stop seing this error.");
+        }
+        if (this.height === 0) {
+            if (this.settings.allowInvalidContainer)
+                this.height = 1;
+            else
+                throw new Error("Sigma: Container has no height. You can set the allowInvalidContainer setting to true to stop seing this error.");
+        }
         // If nothing has changed, we can stop right here
         if (previousWidth === this.width && previousHeight === this.height)
             return this;
+        this.emit("resize");
         // Sizing dom elements
@@ -1254,7 +1251,6 @@ for (var id in this.elements) {
                 : this.matrix;
-        var framedGraphVec = [coordinates.x, coordinates.y, 1];
-        var viewportVec = (0, matrices_1.multiplyVec)(matrix, framedGraphVec);
+        var viewportPos = (0, matrices_1.multiplyVec2)(matrix, coordinates);
         return {
-            x: ((1 + viewportVec[0]) * this.width) / 2,
-            y: ((1 - viewportVec[1]) * this.height) / 2,
+            x: ((1 + viewportPos.x) * this.width) / 2,
+            y: ((1 - viewportPos.y) * this.height) / 2,
         };
@@ -1277,8 +1273,6 @@ };
                 : this.invMatrix;
-        var viewportVec = [(coordinates.x / this.width) * 2 - 1, 1 - (coordinates.y / this.height) * 2, 1];
-        var framedGraphVec = (0, matrices_1.multiplyVec)(invMatrix, viewportVec);
-        return {
-            x: framedGraphVec[0],
-            y: framedGraphVec[1],
-        };
+        return (0, matrices_1.multiplyVec2)(invMatrix, {
+            x: (coordinates.x / this.width) * 2 - 1,
+            y: 1 - (coordinates.y / this.height) * 2,
+        });
     };
@@ -1357,12 +1351,12 @@ /**
         // Releasing graph handlers
-        graph.removeListener("nodeAdded", this.activeListeners.addNodeGraphUpdate);
+        graph.removeListener("nodeAdded", this.activeListeners.dropNodeGraphUpdate);
         graph.removeListener("nodeDropped", this.activeListeners.graphUpdate);
         graph.removeListener("nodeAttributesUpdated", this.activeListeners.softGraphUpdate);
         graph.removeListener("eachNodeAttributesUpdated", this.activeListeners.graphUpdate);
-        graph.removeListener("edgeAdded", this.activeListeners.addEdgeGraphUpdate);
-        graph.removeListener("edgeDropped", this.activeListeners.graphUpdate);
+        graph.removeListener("edgeAdded", this.activeListeners.graphUpdate);
+        graph.removeListener("edgeDropped", this.activeListeners.dropEdgeGraphUpdate);
         graph.removeListener("edgeAttributesUpdated", this.activeListeners.softGraphUpdate);
         graph.removeListener("eachEdgeAttributesUpdated", this.activeListeners.graphUpdate);
-        graph.removeListener("edgesCleared", this.activeListeners.graphUpdate);
-        graph.removeListener("cleared", this.activeListeners.graphUpdate);
+        graph.removeListener("edgesCleared", this.activeListeners.clearEdgesGraphUpdate);
+        graph.removeListener("cleared", this.activeListeners.clearGraphUpdate);
         // Releasing cache & state
@@ -1369,0 +1363,0 @@ this.quadtree = new quadtree_1.default();

tsconfig.examples.json

@@ -11,2 +11,4 @@ {
       "sigma/utils/animate": ["./src/utils/animate"],
+      "sigma/rendering/webgl/programs/edge": ["./src/rendering/webgl/programs/edge.ts"],
+      "sigma/rendering/webgl/programs/edge.fast": ["./src/rendering/webgl/programs/edge.fast.ts"],
       "sigma/rendering/webgl/programs/node.image": ["./src/rendering/webgl/programs/node.image.ts"],
@@ -13,0 +15,0 @@ "sigma/rendering/webgl/programs/common/node": ["./src/rendering/webgl/programs/common/node.ts"],

tsconfig.json

@@ -12,3 +12,3 @@ {
     "typeRoots": ["./node_modules/@types/", "./external-types/"],
-    "lib": ["dom"]
+    "lib": ["dom", "dom.iterable"]
   },
@@ -15,0 +15,0 @@ "include": ["./external-types/**/*", "./src/**/*"],

utils/animate.d.ts

@@ -14,4 +14,5 @@ /**
  */
+export declare type Easing = keyof typeof easings | ((k: number) => number);
 export interface AnimateOptions {
-    easing: keyof typeof easings | ((k: number) => number);
+    easing: Easing;
     duration: number;
@@ -18,0 +19,0 @@ }

utils/animate.js

@@ -29,2 +29,3 @@ "use strict";
     var step = function () {
+        frame = null;
         var p = (Date.now() - start) / options.duration;
@@ -35,2 +36,3 @@ if (p >= 1) {
                 var attrs = targets[node];
+                // We use given values to avoid precision issues and for convenience
                 for (var k in attrs)
@@ -37,0 +39,0 @@ graph.setNodeAttribute(node, k, attrs[k]);

utils/index.d.ts

@@ -89,2 +89,10 @@ /**
 export declare function zIndexOrdering<T>(extent: Extent, getter: (e: T) => number, elements: Array<T>): Array<T>;
+declare type RGBAColor = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function parseColor(val: string): RGBAColor;
+export declare function floatArrayColor(val: string): Float32Array;
 export declare function floatColor(val: string): number;
@@ -146,1 +154,2 @@ /**
 export declare function validateGraph(graph: Graph): void;
+export {};

utils/index.js

@@ -22,3 +22,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateGraph = exports.canUse32BitsIndices = exports.extractPixel = exports.getMatrixImpact = exports.matrixFromCamera = exports.getCorrectionRatio = exports.floatColor = exports.zIndexOrdering = exports.createNormalizationFunction = exports.graphExtent = exports.getPixelRatio = exports.createElement = exports.cancelFrame = exports.requestFrame = exports.assignDeep = exports.assign = exports.isPlainObject = void 0;
+exports.validateGraph = exports.canUse32BitsIndices = exports.extractPixel = exports.getMatrixImpact = exports.matrixFromCamera = exports.getCorrectionRatio = exports.floatColor = exports.floatArrayColor = exports.parseColor = exports.zIndexOrdering = exports.createNormalizationFunction = exports.graphExtent = exports.getPixelRatio = exports.createElement = exports.cancelFrame = exports.requestFrame = exports.assignDeep = exports.assign = exports.isPlainObject = void 0;
 var is_graph_1 = __importDefault(require("graphology-utils/is-graph"));
@@ -219,11 +219,7 @@ var matrices_1 = require("./matrices");
 var RGBA_EXTRACT_REGEX = /^\s*rgba?\s*\(\s*([0-9]*)\s*,\s*([0-9]*)\s*,\s*([0-9]*)(?:\s*,\s*(.*)?)?\)\s*$/;
-var FLOAT_COLOR_CACHE = {};
-for (var htmlColor in data_1.HTML_COLORS) {
-    FLOAT_COLOR_CACHE[htmlColor] = floatColor(data_1.HTML_COLORS[htmlColor]);
-}
-function floatColor(val) {
-    // If the color is already computed, we yield it
-    if (typeof FLOAT_COLOR_CACHE[val] !== "undefined")
-        return FLOAT_COLOR_CACHE[val];
-    var r = 0, g = 0, b = 0, a = 1;
+function parseColor(val) {
+    var r = 0; // byte
+    var g = 0; // byte
+    var b = 0; // byte
+    var a = 1; // float
     // Handling hexadecimal notation
@@ -241,2 +237,3 @@ if (val[0] === "#") {
         }
+        // TODO: parse hex with alpha?
     }
@@ -254,2 +251,25 @@ // Handling rgb notation
     }
+    return { r: r, g: g, b: b, a: a };
+}
+exports.parseColor = parseColor;
+var FLOAT_COLOR_CACHE = {};
+for (var htmlColor in data_1.HTML_COLORS) {
+    FLOAT_COLOR_CACHE[htmlColor] = floatColor(data_1.HTML_COLORS[htmlColor]);
+    // Replicating cache for hex values for free
+    FLOAT_COLOR_CACHE[data_1.HTML_COLORS[htmlColor]] = FLOAT_COLOR_CACHE[htmlColor];
+}
+function floatArrayColor(val) {
+    val = data_1.HTML_COLORS[val] || val;
+    // NOTE: this variant is not cached because it is mostly used for uniforms
+    var _a = parseColor(val), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return new Float32Array([r / 255, g / 255, b / 255, a]);
+}
+exports.floatArrayColor = floatArrayColor;
+function floatColor(val) {
+    // If the color is already computed, we yield it
+    if (typeof FLOAT_COLOR_CACHE[val] !== "undefined")
+        return FLOAT_COLOR_CACHE[val];
+    var parsed = parseColor(val);
+    var r = parsed.r, g = parsed.g, b = parsed.b;
+    var a = parsed.a;
     a = (a * 255) | 0;
@@ -327,3 +347,3 @@ INT32[0] = ((a << 24) | (b << 16) | (g << 8) | r) & 0xfeffffff;
 function getMatrixImpact(matrix, cameraState, viewportDimensions) {
-    var _a = __read((0, matrices_1.multiplyVec)(matrix, [Math.cos(cameraState.angle), Math.sin(cameraState.angle), 0]), 2), x = _a[0], y = _a[1];
+    var _a = (0, matrices_1.multiplyVec2)(matrix, { x: Math.cos(cameraState.angle), y: Math.sin(cameraState.angle) }, 0), x = _a.x, y = _a.y;
     return 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) / viewportDimensions.width;
@@ -330,0 +350,0 @@ }

utils/matrices.d.ts

@@ -8,2 +8,3 @@ /**
  */
+import { Coordinates } from "../types";
 export declare function identity(): Float32Array;
@@ -14,2 +15,2 @@ export declare function scale(m: Float32Array, x: number, y?: number): Float32Array;
 export declare function multiply<T extends number[] | Float32Array>(a: T, b: Float32Array | number[]): T;
-export declare function multiplyVec<T extends number[] | Float32Array>(a: Float32Array | number[], b: T): T;
+export declare function multiplyVec2(a: Float32Array | number[], b: Coordinates, z?: number): Coordinates;

utils/matrices.js

 "use strict";
-/**
- * Sigma.js WebGL Matrices Helpers
- * ================================
- *
- * Matrices-related helper functions used by sigma's WebGL renderer.
- * @module
- */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.multiplyVec = exports.multiply = exports.translate = exports.rotate = exports.scale = exports.identity = void 0;
+exports.multiplyVec2 = exports.multiply = exports.translate = exports.rotate = exports.scale = exports.identity = void 0;
 function identity() {
@@ -56,13 +49,14 @@ return Float32Array.of(1, 0, 0, 0, 1, 0, 0, 0, 1);
 exports.multiply = multiply;
-function multiplyVec(a, b) {
-    var a00 = a[0], a01 = a[1], a02 = a[2];
-    var a10 = a[3], a11 = a[4], a12 = a[5];
-    var a20 = a[6], a21 = a[7], a22 = a[8];
-    var b0 = b[0], b1 = b[1], b2 = b[2];
-    var c = Array.isArray(b) ? [0, 0, 0] : Float32Array.of(0, 0, 0);
-    c[0] = b0 * a00 + b1 * a10 + b2 * a20;
-    c[1] = b0 * a01 + b1 * a11 + b2 * a21;
-    c[2] = b0 * a02 + b1 * a12 + b2 * a22;
-    return c;
+function multiplyVec2(a, b, z) {
+    if (z === void 0) { z = 1; }
+    var a00 = a[0];
+    var a01 = a[1];
+    var a10 = a[3];
+    var a11 = a[4];
+    var a20 = a[6];
+    var a21 = a[7];
+    var b0 = b.x;
+    var b1 = b.y;
+    return { x: b0 * a00 + b1 * a10 + a20 * z, y: b0 * a01 + b1 * a11 + a21 * z };
 }
-exports.multiplyVec = multiplyVec;
+exports.multiplyVec2 = multiplyVec2;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

632180

increased by0.83%

Lines of code

12260

increased by0.33%

Number of lines in readme file

85

increased by1.19%

No dependency changes