@reltio/components 1.4.1844 → 1.4.1845

package/esm/features/graph/rendering/canvas/hover.spec.d.ts

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

package/esm/features/graph/rendering/canvas/hover.spec.js

@@ -0,0 +1,24 @@
+import { drawHover } from './hover';
+import { drawLabel } from './label';
+import { drawTwoArcs } from './nodeArc';
+jest.mock('./label', function () { return ({
+    drawLabel: jest.fn()
+}); });
+jest.mock('./nodeArc', function () { return ({
+    drawTwoArcs: jest.fn()
+}); });
+describe('drawHover tests', function () {
+    var context = {};
+    var settings = {};
+    var data = {
+        x: 1,
+        y: 1,
+        size: 12,
+        label: 'Test label'
+    };
+    it('should call drawTwoArcs and drawLabel', function () {
+        drawHover(context, data, settings);
+        expect(drawTwoArcs).toHaveBeenCalledWith(context, data);
+        expect(drawLabel).toHaveBeenCalledWith(context, data, settings, { backgroundColor: '#FFF' });
+    });
+});

package/esm/features/graph/rendering/canvas/label.d.ts

@@ -0,0 +1,7 @@
+import { GraphContainerSettings, GraphNodeAttributes } from '../../types/graphDataTypes';
+type Options = {
+    backgroundColor?: string;
+    borderColor?: string;
+};
+export declare const drawLabel: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected' | 'labelColor' | 'secondaryLabel'>, settings: GraphContainerSettings, { backgroundColor, borderColor }?: Options) => Path2D;
+export {};

package/esm/features/graph/rendering/canvas/label.js

@@ -0,0 +1,28 @@
+import { drawLabelBackground } from './labelBackground';
+export var drawLabel = function (context, data, settings, _a) {
+    var _b, _c, _d, _e;
+    var _f = _a === void 0 ? {} : _a, backgroundColor = _f.backgroundColor, borderColor = _f.borderColor;
+    if (!data.label)
+        return;
+    var size = settings.labelSize, font = settings.labelFont, weight = settings.labelWeight, marginLeft = data.selected ? 6 : 2, lineHeight = size * 1.2;
+    var PERMANENT_MARGIN_LEFT = 9;
+    var labelBackgroundPath = drawLabelBackground(context, data, settings, {
+        backgroundColor: data.selected ? '#FFF' : backgroundColor,
+        marginLeft: marginLeft,
+        borderColor: borderColor,
+        lineHeight: lineHeight
+    });
+    context.fillStyle = ((_b = settings.labelColor) === null || _b === void 0 ? void 0 : _b.attribute)
+        ? data[settings.labelColor.attribute] || settings.labelColor.color || '#000'
+        : settings.labelColor.color;
+    context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
+    var y = data.secondaryLabel ? data.y - size / (3 * 1.25) : data.y + size / 3;
+    context.fillText(data.label, data.x + data.size + PERMANENT_MARGIN_LEFT + marginLeft, y);
+    if (data.secondaryLabel) {
+        context.fillStyle = ((_c = settings.secondaryLabelColor) === null || _c === void 0 ? void 0 : _c.attribute)
+            ? data[settings.secondaryLabelColor.attribute] || ((_d = settings.secondaryLabelColor) === null || _d === void 0 ? void 0 : _d.color) || '#000'
+            : (_e = settings.secondaryLabelColor) === null || _e === void 0 ? void 0 : _e.color;
+        context.fillText(data.secondaryLabel, data.x + data.size + PERMANENT_MARGIN_LEFT + marginLeft, y + lineHeight);
+    }
+    return labelBackgroundPath;
+};

package/esm/features/graph/rendering/canvas/label.spec.d.ts

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

package/esm/features/graph/rendering/canvas/label.spec.js

@@ -0,0 +1,79 @@
+import { drawLabel } from './label';
+import { drawLabelBackground } from './labelBackground';
+jest.mock('./labelBackground', function () { return ({
+    drawLabelBackground: jest.fn()
+}); });
+describe('drawLabel tests', function () {
+    var context = {
+        fillText: jest.fn()
+    };
+    var settings = {
+        labelFont: 'Roboto',
+        labelSize: 12,
+        labelColor: {
+            color: 'rgba(0, 0, 0, 0.87)'
+        },
+        labelWeight: 'normal'
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should not call context.fillText if label is empty', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: ''
+        };
+        drawLabel(context, data, settings);
+        expect(context.fillText).not.toHaveBeenCalled();
+        expect(drawLabelBackground).not.toHaveBeenCalled();
+    });
+    it('should call context.fillText if label is not empty', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        drawLabel(context, data, settings);
+        expect(context.font).toBe('normal 12px Roboto');
+        expect(context.fillStyle).toBe(settings.labelColor.color);
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 24, 5);
+        expect(drawLabelBackground).toHaveBeenCalledWith(context, data, settings, {
+            marginLeft: 2,
+            lineHeight: settings.labelSize * 1.2
+        });
+    });
+    it('should call drawLabelBackground to show background with specified color', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        drawLabel(context, data, settings, { backgroundColor: '#FFF' });
+        expect(drawLabelBackground).toHaveBeenCalledWith(context, data, settings, {
+            backgroundColor: '#FFF',
+            marginLeft: 2,
+            lineHeight: settings.labelSize * 1.2
+        });
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 24, 5);
+    });
+    it('should call drawLabelBackground with special background and margin in selected state', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label',
+            selected: true
+        };
+        drawLabel(context, data, settings);
+        expect(drawLabelBackground).toHaveBeenCalledWith(context, data, settings, {
+            backgroundColor: '#FFF',
+            marginLeft: 6,
+            lineHeight: settings.labelSize * 1.2
+        });
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 28, 5);
+    });
+});

package/esm/features/graph/rendering/canvas/labelBackground.d.ts

@@ -0,0 +1,9 @@
+import { GraphContainerSettings, GraphNodeAttributes } from '../../types/graphDataTypes';
+type Options = {
+    backgroundColor?: string;
+    marginLeft?: number;
+    lineHeight?: number;
+    borderColor?: string;
+};
+export declare const drawLabelBackground: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'secondaryLabel'>, settings: GraphContainerSettings, { backgroundColor, marginLeft, borderColor, lineHeight }?: Options) => Path2D;
+export {};

package/esm/features/graph/rendering/canvas/labelBackground.js

@@ -0,0 +1,33 @@
+var PADDING = 2;
+export var drawLabelBackground = function (context, data, settings, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.backgroundColor, backgroundColor = _c === void 0 ? 'rgba(245, 245, 245, 0.9)' : _c, _d = _b.marginLeft, marginLeft = _d === void 0 ? 2 : _d, borderColor = _b.borderColor, lineHeight = _b.lineHeight;
+    context.fillStyle = backgroundColor;
+    if (borderColor) {
+        context.strokeStyle = borderColor;
+    }
+    var path = new Path2D();
+    if (typeof data.label === 'string') {
+        var secondLineHeight = data.secondaryLabel ? lineHeight : 0;
+        var size = settings.labelSize + secondLineHeight + 2;
+        var borderRadius = 2;
+        var textWidth = Math.max(context.measureText(data.label).width, context.measureText(data.secondaryLabel || '').width), boxWidth = Math.round(textWidth + 14), boxHeight = Math.round(size + 2 * PADDING), radius = data.size + PADDING;
+        var top_1 = data.y - boxHeight / 2;
+        var bottom = data.y + boxHeight / 2;
+        var left = data.x + radius + marginLeft;
+        var right = left + boxWidth;
+        path.moveTo(left, bottom - borderRadius);
+        path.quadraticCurveTo(left, bottom, left + borderRadius, bottom);
+        path.lineTo(right - borderRadius, bottom);
+        path.quadraticCurveTo(right, bottom, right, bottom - borderRadius);
+        path.lineTo(right, top_1 + borderRadius);
+        path.quadraticCurveTo(right, top_1, right - borderRadius, top_1);
+        path.lineTo(left + borderRadius, top_1);
+        path.quadraticCurveTo(left, top_1, left, top_1 + borderRadius);
+        path.closePath();
+        context.fill(path);
+        if (borderColor) {
+            context.stroke(path);
+        }
+    }
+    return path;
+};

package/esm/features/graph/rendering/canvas/labelBackground.spec.d.ts

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

package/esm/features/graph/rendering/canvas/labelBackground.spec.js

@@ -0,0 +1,90 @@
+import { drawLabelBackground } from './labelBackground';
+describe('drawLabelBackground tests', function () {
+    var context = {
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        arc: jest.fn(),
+        closePath: jest.fn(),
+        fill: jest.fn(),
+        measureText: jest.fn().mockReturnValue({
+            width: 100
+        }),
+        fillText: jest.fn(),
+        quadraticCurveTo: jest.fn(),
+        stroke: jest.fn()
+    };
+    var settings = {
+        labelFont: 'Roboto',
+        labelSize: 12,
+        labelColor: {
+            color: 'rgba(0, 0, 0, 0.87)'
+        },
+        labelWeight: 'normal'
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var get2DPathEventTypes = function (path) {
+        return path._events.map(function (event) { return event.type; });
+    };
+    it('should call context methods if label is string (hover behavior)', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        var canvasPath = drawLabelBackground(context, data, settings);
+        var expectedEvents = [
+            'moveTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'closePath'
+        ];
+        expect(get2DPathEventTypes(canvasPath)).toEqual(expectedEvents);
+        expect(context.fill).toHaveBeenCalledWith(canvasPath);
+        expect(context.stroke).not.toHaveBeenCalled();
+    });
+    it('should not call context methods if label is not string', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: null
+        };
+        var canvasPath = drawLabelBackground(context, data, settings);
+        expect(get2DPathEventTypes(canvasPath)).toEqual([]);
+        expect(context.fill).not.toHaveBeenCalled();
+        expect(context.stroke).not.toHaveBeenCalled();
+    });
+    it('should draw stroke if borderColor option is provided', function () {
+        var data = {
+            x: 1,
+            y: 1,
+            size: 12,
+            label: 'Test label'
+        };
+        var canvasPath = drawLabelBackground(context, data, settings, { borderColor: 'red' });
+        expect(context.strokeStyle).toEqual('red');
+        var expectedEvents = [
+            'moveTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'lineTo',
+            'quadraticCurveTo',
+            'closePath'
+        ];
+        expect(get2DPathEventTypes(canvasPath)).toEqual(expectedEvents);
+        expect(context.fill).toHaveBeenCalledWith(canvasPath);
+        expect(context.stroke).toHaveBeenCalledWith(canvasPath);
+    });
+});

package/esm/features/graph/rendering/canvas/nodeArc.d.ts

@@ -0,0 +1,10 @@
+import { GraphNodeAttributes } from '../../types/graphDataTypes';
+type Options = {
+    padding?: number;
+    lineWidth?: number;
+    color?: string;
+};
+export declare const drawNodeArc: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected'>, { padding, color, lineWidth }?: Options) => void;
+export declare const drawOuterArc: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected'>) => void;
+export declare const drawTwoArcs: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected'>) => void;
+export {};

package/esm/features/graph/rendering/canvas/nodeArc.js

@@ -0,0 +1,27 @@
+var PADDING = 1.5;
+export var drawNodeArc = function (context, data, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.padding, padding = _c === void 0 ? PADDING : _c, _d = _b.color, color = _d === void 0 ? '#FFF' : _d, _e = _b.lineWidth, lineWidth = _e === void 0 ? 4 : _e;
+    context.lineWidth = lineWidth;
+    context.strokeStyle = color;
+    context.beginPath();
+    context.arc(data.x, data.y, data.size + padding, 0, Math.PI * 2);
+    context.closePath();
+    context.stroke();
+};
+export var drawOuterArc = function (context, data) {
+    if (data.selected) {
+        context.shadowColor = 'rgba(0, 114, 206, 0.5)';
+        context.shadowBlur = 10;
+        drawNodeArc(context, data, {
+            lineWidth: 2,
+            color: '#0072CE',
+            padding: 4.5
+        });
+        context.shadowColor = 'none';
+        context.shadowBlur = 0;
+    }
+};
+export var drawTwoArcs = function (context, data) {
+    drawOuterArc(context, data);
+    drawNodeArc(context, data);
+};

package/esm/features/graph/rendering/canvas/selfRelationLoop.d.ts

@@ -0,0 +1,11 @@
+import { NodeDisplayData, PartialButFor } from 'sigma/types';
+import { GraphEdgeAttributes } from '../../types/graphDataTypes';
+export declare const LOOP_SCALE = 0.6;
+export declare const getSelfLoopControlPoints: (x: number, y: number, size: number, a?: number) => {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+declare const drawSelfRelationLoop: (context: CanvasRenderingContext2D, edgeData: GraphEdgeAttributes, sourceData: PartialButFor<NodeDisplayData, 'x' | 'y' | 'size'>) => Path2D;
+export { drawSelfRelationLoop };

package/esm/features/graph/rendering/canvas/selfRelationLoop.js

@@ -0,0 +1,69 @@
+var ARROW_SCALE = 0.4;
+export var LOOP_SCALE = 0.6;
+var ARROW_SIZE_RATIO_SCALE = 2.2;
+export var getSelfLoopControlPoints = function (x, y, size, a) {
+    if (a === void 0) { a = 0; }
+    return {
+        x1: x - (size + a) * 7,
+        y1: y,
+        x2: x,
+        y2: y + (size + a) * 7
+    };
+};
+var getArrowPoints = function (x, y, d, sX, sY, size, aSize) {
+    var aX = x + ((sX - x) * (d - aSize - size)) / d;
+    var aY = y + ((sY - y) * (d - aSize - size)) / d;
+    var vX = ((sX - x) * aSize) / d;
+    var vY = ((sY - y) * aSize) / d;
+    return { aX: aX, aY: aY, vX: vX, vY: vY };
+};
+var getFirstArrowPoints = function (cp, sX, sY, size, aSize) {
+    var d = Math.sqrt(Math.pow(sX - cp.x1, 2) + Math.pow(sY - cp.y1, 2));
+    return getArrowPoints(cp.x2, cp.y2, d, sX, sY, size, aSize);
+};
+var getSecondArrowPoints = function (cp, sX, sY, size, aSize) {
+    var d = Math.sqrt(Math.pow(sX - cp.x1, 2) + Math.pow(sY - cp.y1, 2));
+    return getArrowPoints(cp.x1, cp.y1, d, sX, sY, size, aSize);
+};
+var drawArrow = function (context, aX, aY, vX, vY) {
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * ARROW_SCALE, aY - vX * ARROW_SCALE);
+    context.lineTo(aX - vY * ARROW_SCALE, aY + vX * ARROW_SCALE);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+};
+var drawSelfRelationLoop = function (context, edgeData, sourceData) {
+    var size = edgeData.size, color = edgeData.color, _a = edgeData.arrowSizeRatio, arrowSizeRatio = _a === void 0 ? 1 : _a;
+    var sX = sourceData.x;
+    var sY = sourceData.y;
+    var sSize = sourceData.size;
+    var scale = sSize * LOOP_SCALE;
+    var cp = getSelfLoopControlPoints(sX, sY, scale);
+    context.strokeStyle = color;
+    context.lineWidth = size;
+    var bezier = new Path2D();
+    if (edgeData.type === 'arrow' || edgeData.type === 'doubleArrow') {
+        context.fillStyle = color;
+        if (edgeData.type === 'doubleArrow') {
+            var firstArrowPoints = getFirstArrowPoints(cp, sX, sY, sSize, size * arrowSizeRatio * ARROW_SIZE_RATIO_SCALE);
+            drawArrow(context, firstArrowPoints.aX, firstArrowPoints.aY, firstArrowPoints.vX, firstArrowPoints.vY);
+            bezier.moveTo(firstArrowPoints.aX, firstArrowPoints.aY);
+        }
+        else {
+            bezier.moveTo(sX, sY);
+        }
+        var secondArrowPoints = getSecondArrowPoints(cp, sX, sY, sSize, size * arrowSizeRatio * ARROW_SIZE_RATIO_SCALE);
+        bezier.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, secondArrowPoints.aX, secondArrowPoints.aY);
+        context.stroke(bezier);
+        drawArrow(context, secondArrowPoints.aX, secondArrowPoints.aY, secondArrowPoints.vX, secondArrowPoints.vY);
+    }
+    else {
+        bezier.moveTo(sX, sY);
+        bezier.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, sX, sY);
+        context.stroke(bezier);
+    }
+    return bezier;
+};
+export { drawSelfRelationLoop };

package/esm/features/graph/rendering/canvas/selfRelationLoop.spec.d.ts

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

package/esm/features/graph/rendering/canvas/selfRelationLoop.spec.js

@@ -0,0 +1,90 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { drawSelfRelationLoop } from './selfRelationLoop';
+describe('Graph selfRelationLoop behavior', function () {
+    var context = {
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        bezierCurveTo: jest.fn(),
+        stroke: jest.fn(),
+        closePath: jest.fn(),
+        fill: jest.fn()
+    };
+    var pathInstance = {
+        moveTo: jest.fn(),
+        bezierCurveTo: jest.fn()
+    };
+    var edgeData = {
+        key: 'id_47',
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        hidden: false,
+        label: '',
+        type: 'line',
+        zIndex: 1
+    };
+    var sourceData = {
+        x: 20,
+        y: 30,
+        size: 1
+    };
+    beforeEach(function () {
+        jest.spyOn(window, 'Path2D').mockImplementation(function () {
+            return pathInstance;
+        });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should call context methods for not arrow edge', function () {
+        drawSelfRelationLoop(context, edgeData, sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, sourceData.y);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(15.8, 30, 20, 34.2, sourceData.x, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+    });
+    it('should call context methods for arrow edge correctly', function () {
+        drawSelfRelationLoop(context, __assign(__assign({}, edgeData), { type: 'arrow' }), sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, sourceData.y);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(sourceData.x, 34.2, 15.8, 30, 16.8, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+        expect(context.beginPath).toHaveBeenCalled();
+        expect(context.moveTo).toHaveBeenCalledWith(19, 30);
+        expect(context.lineTo).toHaveBeenNthCalledWith(1, 16.8, 29.12);
+        expect(context.lineTo).toHaveBeenNthCalledWith(2, 16.8, 30.88);
+        expect(context.lineTo).toHaveBeenNthCalledWith(3, 19, 30);
+        expect(context.closePath).toHaveBeenCalled();
+        expect(context.fill).toHaveBeenCalled();
+    });
+    it('should call context methods for doubleArrow edge correctly', function () {
+        drawSelfRelationLoop(context, __assign(__assign({}, edgeData), { type: 'doubleArrow' }), sourceData);
+        expect(Path2D).toHaveBeenCalled();
+        expect(context.beginPath).toHaveBeenCalledTimes(2);
+        expect(context.fill).toHaveBeenCalledTimes(2);
+        expect(context.closePath).toHaveBeenCalledTimes(2);
+        expect(context.moveTo).toHaveBeenNthCalledWith(1, sourceData.x, 31);
+        expect(context.lineTo).toHaveBeenNthCalledWith(1, 19.119999999999997, 33.2);
+        expect(context.lineTo).toHaveBeenNthCalledWith(2, 20.880000000000003, 33.2);
+        expect(context.lineTo).toHaveBeenNthCalledWith(3, sourceData.x, 31);
+        expect(pathInstance.moveTo).toHaveBeenCalledWith(sourceData.x, 33.2);
+        expect(pathInstance.bezierCurveTo).toHaveBeenCalledWith(sourceData.x, 34.2, 15.8, 30, 16.8, sourceData.y);
+        expect(context.stroke).toHaveBeenCalledWith(pathInstance);
+        expect(context.moveTo).toHaveBeenNthCalledWith(2, 19, sourceData.y);
+        expect(context.lineTo).toHaveBeenNthCalledWith(4, 16.8, 29.12);
+        expect(context.lineTo).toHaveBeenNthCalledWith(5, 16.8, 30.88);
+        expect(context.lineTo).toHaveBeenNthCalledWith(6, 19, sourceData.y);
+    });
+});

package/esm/features/graph/rendering/canvas/tooltip.d.ts

@@ -0,0 +1,2 @@
+declare const drawTooltip: (context: CanvasRenderingContext2D, centerX: number, centerY: number, text: string) => void;
+export { drawTooltip };

package/esm/features/graph/rendering/canvas/tooltip.js

@@ -0,0 +1,25 @@
+var drawRoundedRect = function (context, x, y, width, height, radius) {
+    context.beginPath();
+    context.moveTo(x, y + radius);
+    context.arcTo(x, y + height, x + radius, y + height, radius);
+    context.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+    context.arcTo(x + width, y, x + width - radius, y, radius);
+    context.arcTo(x, y, x, y + radius, radius);
+    context.fill();
+};
+var drawTooltip = function (context, centerX, centerY, text) {
+    context.font = 'normal 10px Roboto';
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    var xPadding = 8;
+    var width = context.measureText(text).width + xPadding * 2;
+    var height = 24;
+    var radius = 4;
+    var x = centerX - width / 2;
+    var y = centerY - height / 2;
+    context.fillStyle = 'rgba(0, 0, 0, 0.54)';
+    drawRoundedRect(context, x, y, width, height, radius);
+    context.fillStyle = '#fff';
+    context.fillText(text, x + width / 2, y + height / 2);
+};
+export { drawTooltip };

package/esm/features/graph/rendering/canvas/tooltip.spec.d.ts

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

package/esm/features/graph/rendering/canvas/tooltip.spec.js

@@ -0,0 +1,30 @@
+import { drawTooltip } from './tooltip';
+describe('tests', function () {
+    var context = {
+        beginPath: jest.fn(),
+        moveTo: jest.fn(),
+        fill: jest.fn(),
+        measureText: jest.fn(function (text) { return ({ width: text.length * 5 }); }),
+        arcTo: jest.fn(),
+        fillText: jest.fn()
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('drawTooltip should work correctly', function () {
+        var label = 'label';
+        drawTooltip(context, 600, 600, label);
+        expect(context.beginPath).toHaveBeenCalledTimes(1);
+        expect(context.measureText).toHaveBeenCalledWith(label);
+        expect(context.moveTo).toHaveBeenCalledWith(579.5, 592);
+        expect(context.arcTo).toHaveBeenNthCalledWith(1, 579.5, 612, 583.5, 612, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(2, 620.5, 612, 620.5, 608, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(3, 620.5, 588, 616.5, 588, 4);
+        expect(context.arcTo).toHaveBeenNthCalledWith(4, 579.5, 588, 579.5, 592, 4);
+        expect(context.fill).toHaveBeenCalled();
+        expect(context.fillText).toHaveBeenCalledWith(label, 600, 600);
+        expect(context.font).toBe('normal 10px Roboto');
+        expect(context.textAlign).toBe('center');
+        expect(context.textBaseline).toBe('middle');
+    });
+});

package/esm/features/graph/rendering/canvas/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const getCanvasMousePos: (canvas: HTMLCanvasElement, event: MouseEvent) => {
+    x: number;
+    y: number;
+};

package/esm/features/graph/rendering/canvas/utils.js

@@ -0,0 +1,6 @@
+export var getCanvasMousePos = function (canvas, event) {
+    var rect = canvas.getBoundingClientRect();
+    var x = ((event.clientX - rect.left) / (rect.right - rect.left)) * canvas.width;
+    var y = ((event.clientY - rect.top) / (rect.bottom - rect.top)) * canvas.height;
+    return { x: x, y: y };
+};

package/esm/features/graph/rendering/canvas/utils.spec.d.ts

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

package/esm/features/graph/rendering/canvas/utils.spec.js

@@ -0,0 +1,20 @@
+import { getCanvasMousePos } from './utils';
+describe('getCanvasMousePos behaviour', function () {
+    it('should return real mouse position correctly', function () {
+        var canvas = {
+            getBoundingClientRect: function () { return ({
+                left: 64,
+                right: 888,
+                top: 148,
+                bottom: 1000
+            }); },
+            width: 772,
+            height: 798
+        };
+        var mouseEvent = {
+            clientX: 864,
+            clientY: 547
+        };
+        expect(getCanvasMousePos(canvas, mouseEvent)).toEqual({ x: 749.5145631067961, y: 373.7112676056338 });
+    });
+});

package/esm/features/graph/rendering/icons/no_photo.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PROFILE_IMAGE = "\n<svg width=\"400px\" height=\"400px\" viewBox=\"0 0 400 400\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>Group</title>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Group\" fill-rule=\"nonzero\">\n            <rect id=\"Rectangle\" fill=\"#DFE5E9\" x=\"0\" y=\"0\" width=\"400\" height=\"400\"></rect>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M5.68434189e-14,387.023257 L5.68434189e-14,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 5.68434189e-14,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n        </g>\n    </g>\n</svg>\n";

package/esm/features/graph/rendering/icons/no_photo.inline.svg.js

@@ -0,0 +1 @@
+export var DEFAULT_PROFILE_IMAGE = "\n<svg width=\"400px\" height=\"400px\" viewBox=\"0 0 400 400\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>Group</title>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Group\" fill-rule=\"nonzero\">\n            <rect id=\"Rectangle\" fill=\"#DFE5E9\" x=\"0\" y=\"0\" width=\"400\" height=\"400\"></rect>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n            <path d=\"M5.68434189e-14,387.023257 L5.68434189e-14,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 5.68434189e-14,387.023257 Z\" id=\"Path\" fill=\"#B3BCC4\"></path>\n        </g>\n    </g>\n</svg>\n";

package/esm/features/graph/rendering/webgl/edge.arrowHead.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This class extends src/rendering/webgl/programs/edge.arrowHead.ts for arrowSizeRatio support
+ */
+import SigmaEdgeArrowHeadProgram from 'sigma/rendering/webgl/programs/edge.arrowHead';
+import { GraphEdgeAttributes, GraphNodeAttributes } from '../../types/graphDataTypes';
+export default class EdgeArrowHeadProgram extends SigmaEdgeArrowHeadProgram {
+    process(sourceData: GraphNodeAttributes, targetData: GraphNodeAttributes, data: GraphEdgeAttributes, hidden: boolean, offset: number): void;
+}