@reltio/components 1.4.1844 → 1.4.1845

package/esm/features/graph/rendering/webgl/image.js

@@ -0,0 +1,112 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { clearCrossOriginForCORSIfNotSameOrigin } from './helpers/imageHelper';
+/*
+ * ImageLoader is a part of sigma/rendering/webgl/programs/node.image
+ * It loads images in one texture, which used for all nodes.
+ */
+var MAX_TEXTURE_SIZE = 128;
+var WebGLImageLoader = /** @class */ (function () {
+    function WebGLImageLoader() {
+        var _this = this;
+        this.rebindTextureFns = [];
+        this.images = {};
+        this.hasReceivedImages = false;
+        this.pendingImagesFrameID = undefined;
+        /**
+         * Helper to load an image:
+         */
+        this.loadImage = function (id, imageSource) {
+            if (_this.images[id])
+                return;
+            var image = new Image();
+            image.addEventListener('load', function () {
+                _this.images[id] = {
+                    status: 'pending',
+                    image: image
+                };
+                if (typeof _this.pendingImagesFrameID !== 'number') {
+                    _this.pendingImagesFrameID = requestAnimationFrame(function () { return _this.finalizePendingImages(); });
+                }
+            });
+            image.addEventListener('error', function () {
+                _this.images[id] = { status: 'error' };
+            });
+            _this.images[id] = { status: 'loading' };
+            // Load image:
+            clearCrossOriginForCORSIfNotSameOrigin(image, imageSource);
+            // add ?not-from-cache parameter for loading image not from cache
+            // because cached image does not contain cors headers
+            // https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome
+            image.src = imageSource.startsWith('data:image') ? imageSource : imageSource + '?not-from-cache';
+        };
+        /**
+         * Helper that takes all pending images and adds them into the texture:
+         */
+        this.finalizePendingImages = function () {
+            _this.pendingImagesFrameID = undefined;
+            var pendingImages = [];
+            // List all pending images:
+            for (var id in _this.images) {
+                var state = _this.images[id];
+                if (state.status === 'pending') {
+                    pendingImages.push({
+                        id: id,
+                        image: state.image,
+                        size: Math.min(state.image.width, state.image.height) || 1
+                    });
+                }
+            }
+            // Add images to texture:
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = pendingImages.reduce(function (iter, _a) {
+                var size = _a.size;
+                return iter + size;
+            }, _this.hasReceivedImages ? _this.textureImage.width : 0);
+            canvas.height = Math.max.apply(Math, __spreadArray([_this.hasReceivedImages ? _this.textureImage.height : 0], pendingImages.map(function (_a) {
+                var size = _a.size;
+                return size;
+            }), false));
+            var xOffset = 0;
+            if (_this.hasReceivedImages) {
+                ctx.putImageData(_this.textureImage, 0, 0);
+                xOffset = _this.textureImage.width;
+            }
+            pendingImages.forEach(function (_a) {
+                var id = _a.id, image = _a.image, size = _a.size;
+                var imageSizeInTexture = Math.min(MAX_TEXTURE_SIZE, size);
+                // Crop image, to only keep the biggest square, centered:
+                var dx = 0, dy = 0;
+                if ((image.width || 0) > (image.height || 0)) {
+                    dx = (image.width - image.height) / 2;
+                }
+                else {
+                    dy = (image.height - image.width) / 2;
+                }
+                ctx.drawImage(image, dx, dy, size, size, xOffset, 0, imageSizeInTexture, imageSizeInTexture);
+                // Update image state:
+                _this.images[id] = {
+                    status: 'ready',
+                    x: xOffset,
+                    y: 0,
+                    width: imageSizeInTexture,
+                    height: imageSizeInTexture
+                };
+                xOffset += imageSizeInTexture;
+            });
+            _this.textureImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            _this.hasReceivedImages = true;
+            _this.rebindTextureFns.forEach(function (fn) { return fn(); });
+        };
+    }
+    return WebGLImageLoader;
+}());
+export { WebGLImageLoader };

package/esm/features/graph/rendering/webgl/node.border.d.ts

@@ -0,0 +1,11 @@
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { RenderParams } from 'sigma/rendering/webgl/programs/common/program';
+import { GraphNodeAttributes } from '../../types/graphDataTypes';
+export declare class NodeBorderProgram extends AbstractNodeProgram {
+    borderSize: GLint;
+    inactive: GLint;
+    constructor(gl: WebGLRenderingContext);
+    bind(): void;
+    process(data: GraphNodeAttributes, hidden: boolean, offset: number): void;
+    render(params: RenderParams): void;
+}

package/esm/features/graph/rendering/webgl/node.border.js

@@ -0,0 +1,76 @@
+/*
+ * This class copies sigma/examples/custom-rendering/programs/node.border, but with a some
+ * difference: The fragment shader ("./node.border.frag.glsl") draws a transparent
+ * disc with a colored border. Size of border depends on hasBorder and highlighted props
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { floatColor } from 'sigma/utils';
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { vertexShaderSource } from './shaders/node.border.vert.glsl';
+import { fragmentShaderSource } from './shaders/node.border.frag.glsl';
+var POINTS = 1; // number of vertices for a node
+var ATTRIBUTES = 6; // number of attributes for one vertex
+var NodeBorderProgram = /** @class */ (function (_super) {
+    __extends(NodeBorderProgram, _super);
+    function NodeBorderProgram(gl) {
+        var _this = _super.call(this, gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES) || this;
+        // Attribute Location
+        _this.borderSize = gl.getAttribLocation(_this.program, 'a_borderSize');
+        _this.inactive = gl.getAttribLocation(_this.program, 'a_inactive');
+        _this.bind();
+        return _this;
+    }
+    NodeBorderProgram.prototype.bind = function () {
+        _super.prototype.bind.call(this);
+        var gl = this.gl;
+        gl.enableVertexAttribArray(this.borderSize);
+        gl.enableVertexAttribArray(this.inactive);
+        gl.vertexAttribPointer(this.borderSize, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+        gl.vertexAttribPointer(this.inactive, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 20);
+    };
+    NodeBorderProgram.prototype.process = function (data, hidden, offset) {
+        var array = this.array;
+        var i = offset * POINTS * ATTRIBUTES;
+        if (hidden || !data.hasBorder) {
+            // draw border only for nodes with hasBorder or not hidden
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            return;
+        }
+        array[i++] = data.x; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = floatColor(data.color); // color
+        array[i++] = data.highlighted ? 4 : 2; // size of border in pixels
+        array[i] = data.inactive ? 1 : 0; // inactive flag
+    };
+    NodeBorderProgram.prototype.render = function (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.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    };
+    return NodeBorderProgram;
+}(AbstractNodeProgram));
+export { NodeBorderProgram };

package/esm/features/graph/rendering/webgl/node.dashed.border.d.ts

@@ -0,0 +1,11 @@
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { RenderParams } from 'sigma/rendering/webgl/programs/common/program';
+import { GraphNodeAttributes } from '../../types/graphDataTypes';
+export declare class NodeDashedBorderProgram extends AbstractNodeProgram {
+    borderSize: GLint;
+    inactive: GLint;
+    constructor(gl: WebGLRenderingContext);
+    bind(): void;
+    process(data: GraphNodeAttributes, hidden: boolean, offset: number): void;
+    render(params: RenderParams): void;
+}

package/esm/features/graph/rendering/webgl/node.dashed.border.js

@@ -0,0 +1,74 @@
+/*
+ * This class copies our node.border program, but with another fragment shader to support dashed borders
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { floatColor } from 'sigma/utils';
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { vertexShaderSource } from './shaders/node.border.vert.glsl';
+import { fragmentShaderSource } from './shaders/node.dashed.border.frag.glsl';
+var POINTS = 1; // number of vertices for a node
+var ATTRIBUTES = 6; // number of attributes for one vertex
+var NodeDashedBorderProgram = /** @class */ (function (_super) {
+    __extends(NodeDashedBorderProgram, _super);
+    function NodeDashedBorderProgram(gl) {
+        var _this = _super.call(this, gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES) || this;
+        // Attribute Location
+        _this.borderSize = gl.getAttribLocation(_this.program, 'a_borderSize');
+        _this.inactive = gl.getAttribLocation(_this.program, 'a_inactive');
+        _this.bind();
+        return _this;
+    }
+    NodeDashedBorderProgram.prototype.bind = function () {
+        _super.prototype.bind.call(this);
+        var gl = this.gl;
+        gl.enableVertexAttribArray(this.borderSize);
+        gl.enableVertexAttribArray(this.inactive);
+        gl.vertexAttribPointer(this.borderSize, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+        gl.vertexAttribPointer(this.inactive, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 20);
+    };
+    NodeDashedBorderProgram.prototype.process = function (data, hidden, offset) {
+        var array = this.array;
+        var i = offset * POINTS * ATTRIBUTES;
+        if (hidden || !data.hasBorder) {
+            // draw border only for nodes with hasBorder or not hidden
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            return;
+        }
+        array[i++] = data.x; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = floatColor(data.color); // color
+        array[i++] = data.highlighted ? 2 : 1; // size of border in pixels
+        array[i] = data.inactive ? 1 : 0; // inactive flag
+    };
+    NodeDashedBorderProgram.prototype.render = function (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.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    };
+    return NodeDashedBorderProgram;
+}(AbstractNodeProgram));
+export { NodeDashedBorderProgram };

package/esm/features/graph/rendering/webgl/node.image.d.ts

@@ -0,0 +1,18 @@
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { RenderParams } from 'sigma/rendering/webgl/programs/common/program';
+import Sigma from 'sigma/sigma';
+import { WebGLImageLoader } from './image';
+import { GraphNodeAttributes } from '../../types/graphDataTypes';
+export declare class NodeImageProgram extends AbstractNodeProgram {
+    imageLoader: WebGLImageLoader;
+    texture: WebGLTexture;
+    textureLocation: GLint;
+    atlasLocation: WebGLUniformLocation;
+    latestRenderParams?: RenderParams;
+    inactive: GLint;
+    constructor(gl: WebGLRenderingContext, renderer: Sigma);
+    bind(): void;
+    process(data: GraphNodeAttributes, hidden: boolean, offset: number): void;
+    render(params: RenderParams): void;
+    rebindTexture(): void;
+}

package/esm/features/graph/rendering/webgl/node.image.js

@@ -0,0 +1,144 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/*
+ * This class copies sigma/rendering/webgl/programs/node.image, but with a some
+ * difference: it can change color of picture for inactive state
+ * Program rendering nodes using GL_POINTS, but that draws an image on top of
+ * the classic colored disc.
+ */
+import { vertexShaderSource } from './shaders/node.image.vert.glsl';
+import { fragmentShaderSource } from './shaders/node.image.frag.glsl';
+import { AbstractNodeProgram } from 'sigma/rendering/webgl/programs/common/node';
+import { floatColor } from 'sigma/utils';
+import { svg2Url } from '@reltio/mdm-sdk';
+import { DEFAULT_PROFILE_IMAGE } from '../icons/no_photo.inline.svg';
+import { WebGLImageLoader } from './image';
+var POINTS = 1;
+var ATTRIBUTES = 9;
+var defaultImage = { id: 'defaultImage', path: svg2Url(DEFAULT_PROFILE_IMAGE) };
+/*
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+var NodeImageProgram = /** @class */ (function (_super) {
+    __extends(NodeImageProgram, _super);
+    function NodeImageProgram(gl, renderer) {
+        var _this = _super.call(this, gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES) || this;
+        _this.imageLoader = new WebGLImageLoader();
+        _this.imageLoader.rebindTextureFns.push(function () {
+            if (_this && _this.rebindTexture)
+                _this.rebindTexture();
+            if (renderer && renderer.refresh)
+                renderer.refresh();
+        });
+        _this.imageLoader.textureImage = new ImageData(1, 1);
+        // Attribute Location
+        _this.textureLocation = gl.getAttribLocation(_this.program, 'a_texture');
+        _this.inactive = gl.getAttribLocation(_this.program, 'a_inactive');
+        // 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.imageLoader.loadImage(defaultImage.id, defaultImage.path);
+        _this.bind();
+        return _this;
+    }
+    NodeImageProgram.prototype.bind = function () {
+        _super.prototype.bind.call(this);
+        var gl = this.gl;
+        gl.enableVertexAttribArray(this.textureLocation);
+        gl.enableVertexAttribArray(this.inactive);
+        gl.vertexAttribPointer(this.inactive, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+        gl.vertexAttribPointer(this.textureLocation, 4, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 20);
+    };
+    NodeImageProgram.prototype.process = function (data, hidden, offset) {
+        var array = this.array;
+        var i = offset * POINTS * ATTRIBUTES;
+        var imageSource = data.image;
+        var imageState = imageSource && this.imageLoader.images[imageSource];
+        if (typeof imageSource === 'string' && !imageState) {
+            this.imageLoader.loadImage(imageSource, imageSource);
+        }
+        if (hidden) {
+            array[i++] = 0;
+            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; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = floatColor(data.color); // color
+        array[i++] = data.inactive ? 1 : 0; // inactive property
+        // Reference texture:
+        if (!imageState || imageState.status !== 'ready') {
+            imageState = this.imageLoader.images[defaultImage.id];
+        }
+        if (imageState && imageState.status === 'ready') {
+            var _a = this.imageLoader.textureImage, width = _a.width, height = _a.height;
+            array[i++] = imageState.x / width;
+            array[i++] = imageState.y / height;
+            array[i++] = imageState.width / width;
+            array[i++] = imageState.height / height;
+        }
+        else {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+        }
+    };
+    NodeImageProgram.prototype.render = function (params) {
+        if (this.hasNothingToRender())
+            return;
+        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);
+    };
+    NodeImageProgram.prototype.rebindTexture = function () {
+        var gl = this.gl;
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.imageLoader.textureImage);
+        gl.generateMipmap(gl.TEXTURE_2D);
+        if (this.latestRenderParams) {
+            this.bind();
+            this.bufferData();
+            this.render(this.latestRenderParams);
+        }
+    };
+    return NodeImageProgram;
+}(AbstractNodeProgram));
+export { NodeImageProgram };

package/esm/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\nattribute float a_arrowSizeRatio;\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  // our change - apply a_arrowSizeRatio depending on current zoom and minThickness\n  float arrowSizeCoefficient = min(a_arrowSizeRatio, a_arrowSizeRatio / (u_sqrtZoomRatio * minThickness));\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\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio * arrowSizeCoefficient;\n\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}";

package/esm/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.clamped.vert.glsl, but with a some
+ * difference: added calculation of arrowSizeCoefficient using a_arrowSizeRatio attribute
+ */
+export var vertexShaderSource = "\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\nattribute float a_arrowSizeRatio;\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  // our change - apply a_arrowSizeRatio depending on current zoom and minThickness\n  float arrowSizeCoefficient = min(a_arrowSizeRatio, a_arrowSizeRatio / (u_sqrtZoomRatio * minThickness));\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\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio * arrowSizeCoefficient;\n\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}";

package/esm/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition - the position along the line\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float u_dashSize = 0.01; // our addition\nconst float u_gapSize = 0.005; // our addition\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  // our additions\n  float totalSize = u_dashSize + u_gapSize;\n  float positionInDashGap = mod(v_position, totalSize);\n  float dashGapRatio = positionInDashGap / u_dashSize;\n  // end additions (dashGapRatio is used below in if)\n\n  if (dashGapRatio < 1.0) {\n    gl_FragColor = mix(v_color, transparent, t);\n  } else {\n    discard;\n  }\n}\n";

package/esm/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.frag.glsl, but with a some changes
+ * difference: added a dash-gap pattern to the edge
+ */
+export var fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition - the position along the line\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float u_dashSize = 0.01; // our addition\nconst float u_gapSize = 0.005; // our addition\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  // our additions\n  float totalSize = u_dashSize + u_gapSize;\n  float positionInDashGap = mod(v_position, totalSize);\n  float dashGapRatio = positionInDashGap / u_dashSize;\n  // end additions (dashGapRatio is used below in if)\n\n  if (dashGapRatio < 1.0) {\n    gl_FragColor = mix(v_color, transparent, t);\n  } else {\n    discard;\n  }\n}\n";

package/esm/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute float a_lineLength; // our addition\nattribute 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;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // We require edges to be at least 'minThickness' pixels thick *on screen*\n  // (so we need to compensate the SQRT zoom ratio):\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n\n  // Then, we need to retrieve the normalized thickness of the edge in the WebGL\n  // referential (in a ([0, 1], [0, 1]) space), using our \"magic\" correction\n  // ratio:\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n\n  // Finally, we adapt the edge thickness to the \"SQRT rule\" in sigma (so that\n  // items are not too big when zoomed in, and not too small when zoomed out).\n  // The exact computation should be 'adapted = value * zoom / sqrt(zoom)', but\n  // it's simpler like this:\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness, 1)).xy, 0, 1);\n\n  // For the fragment shader though, we need a thickness that takes the \"magic\"\n  // correction ratio into account (as in webGLThickness), but so that the\n  // antialiasing effect does not depend on the zoom level. So here's yet\n  // another thickness version:\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n  v_position = a_lineLength / u_sqrtZoomRatio; // our addition\n}\n";

package/esm/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.vert.glsl, but with a some changes
+ * difference: added v_position calculation based on a_lineLength and u_sqrtZoomRatio
+ */
+export var vertexShaderSource = "\nattribute float a_lineLength; // our addition\nattribute 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;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // We require edges to be at least 'minThickness' pixels thick *on screen*\n  // (so we need to compensate the SQRT zoom ratio):\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n\n  // Then, we need to retrieve the normalized thickness of the edge in the WebGL\n  // referential (in a ([0, 1], [0, 1]) space), using our \"magic\" correction\n  // ratio:\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n\n  // Finally, we adapt the edge thickness to the \"SQRT rule\" in sigma (so that\n  // items are not too big when zoomed in, and not too small when zoomed out).\n  // The exact computation should be 'adapted = value * zoom / sqrt(zoom)', but\n  // it's simpler like this:\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness, 1)).xy, 0, 1);\n\n  // For the fragment shader though, we need a thickness that takes the \"magic\"\n  // correction ratio into account (as in webGLThickness), but so that the\n  // antialiasing effect does not depend on the zoom level. So here's yet\n  // another thickness version:\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n  v_position = a_lineLength / u_sqrtZoomRatio; // our addition\n}\n";

package/esm/features/graph/rendering/webgl/shaders/node.border.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n\n    if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n        gl_FragColor = transparent;\n    else if (distToCenter < v_borderRadius)\n        gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n    else if (distToCenter < radius - v_border)      // distance to outer border radius\n        gl_FragColor = color;\n    else if (distToCenter < radius)\n        gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n    else                                            // points outside the button\n        gl_FragColor = transparent;\n}\n";

package/esm/features/graph/rendering/webgl/shaders/node.border.frag.glsl.js

@@ -0,0 +1,6 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.border.frag.glsl, but with a some
+ * difference: white color was changed to transparent and used border radius from v_borderRadius variable
+ */
+import { toPaleGrayscale } from './utils';
+export var fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\n\n".concat(toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n\n    if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n        gl_FragColor = transparent;\n    else if (distToCenter < v_borderRadius)\n        gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n    else if (distToCenter < radius - v_border)      // distance to outer border radius\n        gl_FragColor = color;\n    else if (distToCenter < radius)\n        gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n    else                                            // points outside the button\n        gl_FragColor = transparent;\n}\n");

package/esm/features/graph/rendering/webgl/shaders/node.border.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute float a_borderSize;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying float v_borderRadius;\nvarying float v_inactive;\n\nconst float bias = 255.0 / 254.0;\nconst float radius = 0.5;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\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    v_borderRadius = radius - (radius * a_borderSize / a_size); // border radius in node's size (full size is 1)\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/esm/features/graph/rendering/webgl/shaders/node.border.vert.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.border.vert.glsl, but with a some
+ * difference: added calculation of v_borderRadius using a_borderSize variable
+ */
+export var vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute float a_borderSize;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying float v_borderRadius;\nvarying float v_inactive;\n\nconst float bias = 255.0 / 254.0;\nconst float radius = 0.5;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\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    v_borderRadius = radius - (radius * a_borderSize / a_size); // border radius in node's size (full size is 1)\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/esm/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\nconst float dashGapRatio = 5.5;  // adjust this to change the ratio of dash size to gap size\nconst float totalLength = 2.0 * 3.14159 * radius;\nconst float dashSize = totalLength / (dashGapRatio + 1.0);\nconst float gapSize = dashSize / dashGapRatio;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n    float distAlongBorder = atan(gl_PointCoord.y - 0.5, gl_PointCoord.x - 0.5); // distance along the border\n    float dashGapRatio = mod(distAlongBorder, dashSize + gapSize) / dashSize; // ratio of dash to gap\n\n    // our change - added if statement to check if within a dash\n    if (dashGapRatio < 1.0) {// if within a dash\n        if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n            gl_FragColor = transparent;\n        else if (distToCenter < v_borderRadius)\n            gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n        else if (distToCenter < radius - v_border)      // distance to outer border radius\n            gl_FragColor = color;\n        else if (distToCenter < radius)\n            gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n        else                                            // points outside the button\n            gl_FragColor = transparent;\n    } else {\n        gl_FragColor = transparent;\n    }\n}\n";

package/esm/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies our node.border.frag.glsl.ts, but with changes to support dashed borders
+ */
+import { toPaleGrayscale } from './utils';
+export var fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\nconst float dashGapRatio = 5.5;  // adjust this to change the ratio of dash size to gap size\nconst float totalLength = 2.0 * 3.14159 * radius;\nconst float dashSize = totalLength / (dashGapRatio + 1.0);\nconst float gapSize = dashSize / dashGapRatio;\n\n".concat(toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n    float distAlongBorder = atan(gl_PointCoord.y - 0.5, gl_PointCoord.x - 0.5); // distance along the border\n    float dashGapRatio = mod(distAlongBorder, dashSize + gapSize) / dashSize; // ratio of dash to gap\n\n    // our change - added if statement to check if within a dash\n    if (dashGapRatio < 1.0) {// if within a dash\n        if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n            gl_FragColor = transparent;\n        else if (distToCenter < v_borderRadius)\n            gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n        else if (distToCenter < radius - v_border)      // distance to outer border radius\n            gl_FragColor = color;\n        else if (distToCenter < radius)\n            gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n        else                                            // points outside the button\n            gl_FragColor = transparent;\n    } else {\n        gl_FragColor = transparent;\n    }\n}\n");

package/esm/features/graph/rendering/webgl/shaders/node.image.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float radius = 0.5;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // set texel as color of point\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    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(color, 0.5);\n    }\n\n    // distance from point to center of node\n    float dist = length(gl_PointCoord - vec2(0.5, 0.5));\n\n    if (dist < radius - v_border)   // points inside node\n        gl_FragColor = color;\n    else if (dist < radius)         // border of node\n        gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n    else                            // points outside node\n        gl_FragColor = transparent;\n}";

package/esm/features/graph/rendering/webgl/shaders/node.image.frag.glsl.js

@@ -0,0 +1,2 @@
+import { toPaleGrayscale } from './utils';
+export var fragmentShaderSource = "\nprecision mediump float;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float radius = 0.5;\n\n".concat(toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // set texel as color of point\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    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(color, 0.5);\n    }\n\n    // distance from point to center of node\n    float dist = length(gl_PointCoord - vec2(0.5, 0.5));\n\n    if (dist < radius - v_border)   // points inside node\n        gl_FragColor = color;\n    else if (dist < radius)         // border of node\n        gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n    else                            // points outside node\n        gl_FragColor = transparent;\n}");

package/esm/features/graph/rendering/webgl/shaders/node.image.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\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    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/esm/features/graph/rendering/webgl/shaders/node.image.vert.glsl.js

@@ -0,0 +1,5 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.image.vert.glsl, but with a some
+ * difference: white color was changed to transparent and used border radius from v_borderRadius variable
+ */
+export var vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\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    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/esm/features/graph/rendering/webgl/shaders/utils.d.ts

@@ -0,0 +1 @@
+export declare const toPaleGrayscale = "\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}";

package/esm/features/graph/rendering/webgl/shaders/utils.js

@@ -0,0 +1 @@
+export var toPaleGrayscale = "\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}";

package/esm/features/graph/types/graphDataTypes.d.ts

@@ -0,0 +1,51 @@
+import Graph from 'graphology';
+import { NodeDisplayData, EdgeDisplayData } from 'sigma/types';
+import { Settings } from 'sigma/settings';
+export type GraphEdgeAttributes = EdgeDisplayData & {
+    loop: boolean;
+    arrowSizeRatio?: number;
+    selected?: boolean;
+    labelColor?: string;
+};
+export type GraphNodeAttributes = NodeDisplayData & {
+    secondaryLabel?: string;
+    image?: string;
+    hasBorder?: boolean;
+    selected?: boolean;
+    inactive?: boolean;
+    labelColor?: string;
+    secondaryLabelColor?: string;
+};
+export declare enum DataModelGraphNodeType {
+    entityType = "entityType",
+    interactionType = "interactionType"
+}
+export type DataModelGraphEdgeAttributes = GraphEdgeAttributes & {
+    edgeType: string;
+};
+export type DataModelGraphNodeAttributes = GraphNodeAttributes & {
+    nodeType: DataModelGraphNodeType;
+};
+export type GraphContainerSettings = Partial<Settings & {
+    secondaryLabelColor: {
+        attribute?: string;
+        color?: string;
+    };
+}>;
+export interface GraphologyLayout<T> {
+    (graph: Graph, options: T): {
+        [node: string]: {
+            [dimension: string]: number;
+        };
+    };
+    assign?(graph: Graph, options: T): void;
+}
+interface GraphologyWorkerLayout {
+    stop: () => void;
+    start: () => void;
+    kill: () => void;
+}
+export interface GraphologyWorkerLayoutConstructor<T> {
+    new (graph: Graph, settings: T): GraphologyWorkerLayout;
+}
+export {};