@reltio/components 1.4.1843 → 1.4.1845

package/cjs/features/graph/rendering/webgl/edge.dashed.js

@@ -0,0 +1,162 @@
+"use strict";
+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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * This is a copy of sigma/src/rendering/webgl/programs/edge.ts
+ * with changes to add dashed edge support
+ */
+var utils_1 = require("sigma/utils");
+var edge_1 = require("sigma/rendering/webgl/programs/common/edge");
+var edge_dashed_frag_glsl_1 = require("./shaders/edge.dashed.frag.glsl");
+var edge_dashed_vert_glsl_1 = require("./shaders/edge.dashed.vert.glsl");
+var POINTS = 4, ATTRIBUTES = 6, // our change 5 -> 6
+STRIDE = POINTS * ATTRIBUTES;
+var DashedEdgeProgram = /** @class */ (function (_super) {
+    __extends(DashedEdgeProgram, _super);
+    function DashedEdgeProgram(gl) {
+        var _this = _super.call(this, gl, edge_dashed_vert_glsl_1.vertexShaderSource, edge_dashed_frag_glsl_1.fragmentShaderSource, POINTS, ATTRIBUTES) || this;
+        // Initializing indices buffer
+        var indicesBuffer = gl.createBuffer();
+        if (indicesBuffer === null)
+            throw new Error('EdgeProgram: error while creating indicesBuffer');
+        _this.indicesBuffer = indicesBuffer;
+        // Locations
+        _this.positionLocation = gl.getAttribLocation(_this.program, 'a_position');
+        _this.colorLocation = gl.getAttribLocation(_this.program, 'a_color');
+        _this.normalLocation = gl.getAttribLocation(_this.program, 'a_normal');
+        _this.lineLengthLocation = gl.getAttribLocation(_this.program, 'a_lineLength'); // our addition
+        var matrixLocation = gl.getUniformLocation(_this.program, 'u_matrix');
+        if (matrixLocation === null)
+            throw new Error('EdgeProgram: error while getting matrixLocation');
+        _this.matrixLocation = matrixLocation;
+        var correctionRatioLocation = gl.getUniformLocation(_this.program, 'u_correctionRatio');
+        if (correctionRatioLocation === null)
+            throw new Error('EdgeProgram: error while getting correctionRatioLocation');
+        _this.correctionRatioLocation = correctionRatioLocation;
+        var sqrtZoomRatioLocation = gl.getUniformLocation(_this.program, 'u_sqrtZoomRatio');
+        if (sqrtZoomRatioLocation === null)
+            throw new Error('EdgeProgram: error while getting sqrtZoomRatioLocation');
+        _this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
+        // Enabling the OES_element_index_uint extension
+        // NOTE: on older GPUs, this means that really large graphs won't
+        // have all their edges rendered. But it seems that the
+        // `OES_element_index_uint` is quite everywhere so we'll handle
+        // the potential issue if it really arises.
+        // NOTE: when using webgl2, the extension is enabled by default
+        _this.canUse32BitsIndices = (0, utils_1.canUse32BitsIndices)(gl);
+        _this.IndicesArray = _this.canUse32BitsIndices ? Uint32Array : Uint16Array;
+        _this.indicesArray = new _this.IndicesArray();
+        _this.indicesType = _this.canUse32BitsIndices ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+        _this.bind();
+        return _this;
+    }
+    DashedEdgeProgram.prototype.bind = function () {
+        var gl = this.gl;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+        // Bindings
+        gl.enableVertexAttribArray(this.positionLocation);
+        gl.enableVertexAttribArray(this.normalLocation);
+        gl.enableVertexAttribArray(this.lineLengthLocation); // our addition
+        gl.enableVertexAttribArray(this.colorLocation);
+        gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
+        gl.vertexAttribPointer(this.normalLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
+        gl.vertexAttribPointer(this.lineLengthLocation, 1, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16); // our addition
+        gl.vertexAttribPointer(this.colorLocation, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 20 // changed from 16 to 20
+        );
+    };
+    DashedEdgeProgram.prototype.computeIndices = function () {
+        var l = this.array.length / ATTRIBUTES;
+        var size = l + l / 2;
+        var indices = new this.IndicesArray(size);
+        for (var i = 0, c = 0; i < l; i += 4) {
+            indices[c++] = i;
+            indices[c++] = i + 1;
+            indices[c++] = i + 2;
+            indices[c++] = i + 2;
+            indices[c++] = i + 1;
+            indices[c++] = i + 3;
+        }
+        this.indicesArray = indices;
+    };
+    DashedEdgeProgram.prototype.bufferData = function () {
+        _super.prototype.bufferData.call(this);
+        // Indices data
+        var gl = this.gl;
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indicesArray, gl.STATIC_DRAW);
+    };
+    DashedEdgeProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
+        if (hidden) {
+            for (var i_1 = offset * STRIDE, l = i_1 + STRIDE; i_1 < l; i_1++)
+                this.array[i_1] = 0;
+            return;
+        }
+        var thickness = data.size || 1, x1 = sourceData.x, y1 = sourceData.y, x2 = targetData.x, y2 = targetData.y, color = (0, utils_1.floatColor)(data.color);
+        // Computing normals
+        var dx = x2 - x1, dy = y2 - y1;
+        var len = dx * dx + dy * dy, n1 = 0, n2 = 0;
+        var lineLength = Math.sqrt(len); // our addition
+        if (len) {
+            len = 1 / Math.sqrt(len);
+            n1 = -dy * len * thickness;
+            n2 = dx * len * thickness;
+        }
+        var i = POINTS * ATTRIBUTES * offset;
+        var array = this.array;
+        // First point
+        array[i++] = x1;
+        array[i++] = y1;
+        array[i++] = n1;
+        array[i++] = n2;
+        array[i++] = 0; // our addition
+        array[i++] = color;
+        // First point flipped
+        array[i++] = x1;
+        array[i++] = y1;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = 0; // our addition
+        array[i++] = color;
+        // Second point
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = n1;
+        array[i++] = n2;
+        array[i++] = lineLength; // our addition
+        array[i++] = color;
+        // Second point flipped
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = lineLength; // our addition
+        array[i] = color;
+    };
+    DashedEdgeProgram.prototype.render = function (params) {
+        if (this.hasNothingToRender())
+            return;
+        var gl = this.gl;
+        var program = this.program;
+        gl.useProgram(program);
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+        gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
+        gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
+        // Drawing:
+        gl.drawElements(gl.TRIANGLES, this.indicesArray.length, this.indicesType, 0);
+    };
+    return DashedEdgeProgram;
+}(edge_1.AbstractEdgeProgram));
+exports.default = DashedEdgeProgram;

package/cjs/features/graph/rendering/webgl/edge.reversedArrowHead.d.ts

@@ -0,0 +1,5 @@
+import { GraphEdgeAttributes, GraphNodeAttributes } from '../../types/graphDataTypes';
+import EdgeArrowHeadProgram from './edge.arrowHead';
+export default class EdgeReversedArrowHeadProgram extends EdgeArrowHeadProgram {
+    process(sourceData: GraphNodeAttributes, targetData: GraphNodeAttributes, data: GraphEdgeAttributes, hidden: boolean, offset: number): void;
+}

package/cjs/features/graph/rendering/webgl/edge.reversedArrowHead.js

@@ -0,0 +1,32 @@
+"use strict";
+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 __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var edge_arrowHead_1 = __importDefault(require("./edge.arrowHead"));
+var EdgeReversedArrowHeadProgram = /** @class */ (function (_super) {
+    __extends(EdgeReversedArrowHeadProgram, _super);
+    function EdgeReversedArrowHeadProgram() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EdgeReversedArrowHeadProgram.prototype.process = function (sourceData, targetData, data, hidden, offset) {
+        _super.prototype.process.call(this, targetData, sourceData, data, hidden, offset);
+    };
+    return EdgeReversedArrowHeadProgram;
+}(edge_arrowHead_1.default));
+exports.default = EdgeReversedArrowHeadProgram;

package/cjs/features/graph/rendering/webgl/helpers/imageHelper.d.ts

@@ -0,0 +1,17 @@
+import { Coordinates, Dimensions } from 'sigma/types';
+type ImageLoading = {
+    status: 'loading';
+};
+type ImageError = {
+    status: 'error';
+};
+type ImagePending = {
+    status: 'pending';
+    image: HTMLImageElement;
+};
+type ImageReady = {
+    status: 'ready';
+} & Coordinates & Dimensions;
+export type ImageType = ImageLoading | ImageError | ImagePending | ImageReady;
+export declare const clearCrossOriginForCORSIfNotSameOrigin: (img: HTMLImageElement, url: string) => void;
+export {};

package/cjs/features/graph/rendering/webgl/helpers/imageHelper.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearCrossOriginForCORSIfNotSameOrigin = void 0;
+var clearCrossOriginForCORSIfNotSameOrigin = function (img, url) {
+    if (new URL(url, window.location.href).origin !== window.location.origin) {
+        img.crossOrigin = '';
+    }
+};
+exports.clearCrossOriginForCORSIfNotSameOrigin = clearCrossOriginForCORSIfNotSameOrigin;

package/cjs/features/graph/rendering/webgl/helpers/imageHelper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/features/graph/rendering/webgl/helpers/imageHelper.spec.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var imageHelper_1 = require("./imageHelper");
+describe('clearCrossOriginForCORSIfNotSameOrigin tests', function () {
+    var savedLocation = window.location;
+    beforeEach(function () {
+        delete window.location;
+        window.location = {
+            origin: 'http://test'
+        };
+    });
+    afterEach(function () {
+        window.location = savedLocation;
+    });
+    it('should clear crossOrigin if origin is not the same', function () {
+        var img = new Image();
+        var url = 'http://imagePath/images/123.png';
+        img.crossOrigin = 'testValue';
+        (0, imageHelper_1.clearCrossOriginForCORSIfNotSameOrigin)(img, url);
+        expect(img.crossOrigin).toBe('');
+    });
+    it('should not clear crossOrigin if origin is the same', function () {
+        var img = new Image();
+        var url = 'http://test/images/123.png';
+        img.crossOrigin = 'testValue';
+        (0, imageHelper_1.clearCrossOriginForCORSIfNotSameOrigin)(img, url);
+        expect(img.crossOrigin).toBe('testValue');
+    });
+});

package/cjs/features/graph/rendering/webgl/image.d.ts

@@ -0,0 +1,17 @@
+import { ImageType } from './helpers/imageHelper';
+export declare class WebGLImageLoader {
+    rebindTextureFns: (() => void)[];
+    images: Record<string, ImageType>;
+    textureImage: ImageData;
+    hasReceivedImages: boolean;
+    pendingImagesFrameID: number | undefined;
+    constructor();
+    /**
+     * Helper to load an image:
+     */
+    loadImage: (id: string, imageSource: string) => void;
+    /**
+     * Helper that takes all pending images and adds them into the texture:
+     */
+    finalizePendingImages: () => void;
+}

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

@@ -0,0 +1,115 @@
+"use strict";
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebGLImageLoader = void 0;
+var imageHelper_1 = require("./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:
+            (0, imageHelper_1.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;
+}());
+exports.WebGLImageLoader = WebGLImageLoader;

package/cjs/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/cjs/features/graph/rendering/webgl/node.border.js

@@ -0,0 +1,79 @@
+"use strict";
+/*
+ * 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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeBorderProgram = void 0;
+var utils_1 = require("sigma/utils");
+var node_1 = require("sigma/rendering/webgl/programs/common/node");
+var node_border_vert_glsl_1 = require("./shaders/node.border.vert.glsl");
+var node_border_frag_glsl_1 = require("./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, node_border_vert_glsl_1.vertexShaderSource, node_border_frag_glsl_1.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++] = (0, utils_1.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;
+}(node_1.AbstractNodeProgram));
+exports.NodeBorderProgram = NodeBorderProgram;

package/cjs/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/cjs/features/graph/rendering/webgl/node.dashed.border.js

@@ -0,0 +1,77 @@
+"use strict";
+/*
+ * 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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeDashedBorderProgram = void 0;
+var utils_1 = require("sigma/utils");
+var node_1 = require("sigma/rendering/webgl/programs/common/node");
+var node_border_vert_glsl_1 = require("./shaders/node.border.vert.glsl");
+var node_dashed_border_frag_glsl_1 = require("./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, node_border_vert_glsl_1.vertexShaderSource, node_dashed_border_frag_glsl_1.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++] = (0, utils_1.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;
+}(node_1.AbstractNodeProgram));
+exports.NodeDashedBorderProgram = NodeDashedBorderProgram;

package/cjs/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;
+}