@reltio/components 1.4.1843 → 1.4.1845

package/cjs/features/graph/hooks/useSigmaCustomRenderers.test.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var core_1 = require("@react-sigma/core");
+var ramda_1 = require("ramda");
+var useSigmaCustomRenderers_1 = require("./useSigmaCustomRenderers");
+var utils_1 = require("sigma/utils");
+jest.mock('@react-sigma/core');
+jest.mock('sigma/utils');
+describe('useSigmaCustomRenderers tests', function () {
+    var addListener = jest.fn();
+    var off = jest.fn();
+    var getRendererByEventName = function (eventName) {
+        return (0, ramda_1.pipe)((0, ramda_1.path)(['mock', 'calls']), (0, ramda_1.findLast)((0, ramda_1.pipe)((0, ramda_1.nth)(0), (0, ramda_1.equals)(eventName))), (0, ramda_1.nth)(1))(addListener);
+    };
+    var sigmaContainerElement = {
+        querySelector: function (val) { return val; },
+        insertBefore: jest.fn()
+    };
+    var sigmaElement = {
+        querySelector: jest.fn(function () { return sigmaContainerElement; }),
+        offsetWidth: 200,
+        offsetHeight: 300
+    };
+    var context = {
+        scale: jest.fn(),
+        clearRect: jest.fn()
+    };
+    var canvas = {
+        style: {},
+        setAttribute: jest.fn(),
+        getContext: jest.fn(function () { return context; }),
+        remove: jest.fn()
+    };
+    beforeEach(function () {
+        core_1.useSigmaContext.mockReturnValue({
+            sigma: { addListener: addListener, off: off },
+            container: sigmaElement
+        });
+    });
+    afterEach(function () {
+        jest.restoreAllMocks();
+        jest.clearAllMocks();
+        canvas.style = {};
+    });
+    it('should add listeners', function () {
+        (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers);
+        expect(addListener).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(addListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+    it('should remove listeners after unmount component', function () {
+        var unmount = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers).unmount;
+        unmount();
+        expect(off).toHaveBeenCalledWith('beforeRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('afterRender', expect.any(Function));
+        expect(off).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+    it('beforeRender should work correctly', function () {
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledWith('.sigma-container');
+        expect(canvas.style.position).toBe('absolute');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('class', 'sigma-customRenderer');
+        expect(canvas.getContext).toHaveBeenCalledWith('2d', { preserveDrawingBuffer: false, antialias: false });
+        expect(sigmaContainerElement.insertBefore).toHaveBeenCalledWith(canvas, '.sigma-element');
+        var canvases = { customRenderer: { canvasElement: canvas, context: context } };
+        expect(result.current).toEqual({
+            addRenderers: expect.any(Function),
+            canvases: canvases,
+            canvasesRef: { current: canvases }
+        });
+        expect(utils_1.getPixelRatio).toHaveBeenCalled();
+    });
+    it('beforeRender should work correctly if canvas already has been created', function () {
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(sigmaElement.querySelector).toHaveBeenCalledTimes(1);
+    });
+    it('resize should work correctly if canvases is empty', function () {
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var resize = getRendererByEventName('resize');
+        (0, react_hooks_1.act)(function () {
+            resize();
+        });
+        expect(utils_1.getPixelRatio).toHaveBeenCalled();
+        expect(canvas.setAttribute).not.toHaveBeenCalled();
+    });
+    it('resize should work correctly if canvas exists and pixelRatio equals 1', function () {
+        utils_1.getPixelRatio.mockReturnValue(1);
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var resize = getRendererByEventName('resize');
+        jest.clearAllMocks();
+        (0, react_hooks_1.act)(function () {
+            resize();
+        });
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '200px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '300px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).not.toHaveBeenCalled();
+    });
+    it('resize should work correctly if canvas exists and pixelRatio does not equal 1', function () {
+        utils_1.getPixelRatio.mockReturnValue(0.9);
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var resize = getRendererByEventName('resize');
+        jest.clearAllMocks();
+        (0, react_hooks_1.act)(function () {
+            resize();
+        });
+        expect(canvas.setAttribute).toHaveBeenCalledTimes(2);
+        expect(canvas.setAttribute).toHaveBeenCalledWith('width', '180px');
+        expect(canvas.setAttribute).toHaveBeenCalledWith('height', '270px');
+        expect(canvas.style.width).toBe('200px');
+        expect(canvas.style.height).toBe('300px');
+        expect(context.scale).toHaveBeenCalledWith(0.9, 0.9);
+    });
+    it('afterRender should work correctly', function () {
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        var customRenderer = jest.fn();
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: customRenderer, insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        var afterRender = getRendererByEventName('afterRender');
+        jest.clearAllMocks();
+        (0, react_hooks_1.act)(function () {
+            afterRender();
+        });
+        expect(context.clearRect).toHaveBeenCalledWith(0, 0, 200, 300);
+        expect(customRenderer).toHaveBeenCalledWith(context);
+    });
+    it('should remove canvas element from DOM and clear canvases ref if component has been unmounted', function () {
+        var _a = (0, react_hooks_1.renderHook)(useSigmaCustomRenderers_1.useSigmaCustomRenderers), result = _a.result, rerender = _a.rerender, unmount = _a.unmount;
+        jest.spyOn(document, 'createElement').mockReturnValue(canvas);
+        (0, react_hooks_1.act)(function () {
+            result.current.addRenderers({ customRenderer: { renderer: jest.fn(), insertBefore: 'element' } });
+        });
+        rerender();
+        var beforeRender = getRendererByEventName('beforeRender');
+        (0, react_hooks_1.act)(function () {
+            beforeRender();
+        });
+        expect(result.current.canvases.customRenderer).not.toBeUndefined();
+        unmount();
+        expect(canvas.remove).toHaveBeenCalled();
+        expect(result.current.canvases).toEqual({});
+    });
+});

package/cjs/features/graph/index.d.ts

@@ -0,0 +1,16 @@
+export { SigmaGraphContainer } from './SigmaGraphContainer';
+export { ZoomSlider } from './ZoomSlider';
+export { DataModelGraph } from './DataModelGraph';
+export { useSigmaCustomRenderers } from './hooks/useSigmaCustomRenderers';
+export { useLoopRenderer } from './hooks/useLoopRenderer';
+export { useAnimatedGraphLayout } from './hooks/useAnimatedGraphLayout';
+export { useCircleLayout } from './hooks/useCircleLayout';
+export { drawTooltip } from './rendering/canvas/tooltip';
+export { NodeImageProgram } from './rendering/webgl/node.image';
+export { NodeBorderProgram } from './rendering/webgl/node.border';
+export { NodeDashedBorderProgram } from './rendering/webgl/node.dashed.border';
+export { WebGLImageLoader } from './rendering/webgl/image';
+export { getCanvasMousePos } from './rendering/canvas/utils';
+export type { GraphNodeAttributes, GraphEdgeAttributes } from './types/graphDataTypes';
+export { DataModelGraphNodeType } from './types/graphDataTypes';
+export type { Canvas } from './types/sigmaCustomRenderersTypes';

package/cjs/features/graph/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataModelGraphNodeType = exports.getCanvasMousePos = exports.WebGLImageLoader = exports.NodeDashedBorderProgram = exports.NodeBorderProgram = exports.NodeImageProgram = exports.drawTooltip = exports.useCircleLayout = exports.useAnimatedGraphLayout = exports.useLoopRenderer = exports.useSigmaCustomRenderers = exports.DataModelGraph = exports.ZoomSlider = exports.SigmaGraphContainer = void 0;
+// components
+var SigmaGraphContainer_1 = require("./SigmaGraphContainer");
+Object.defineProperty(exports, "SigmaGraphContainer", { enumerable: true, get: function () { return SigmaGraphContainer_1.SigmaGraphContainer; } });
+var ZoomSlider_1 = require("./ZoomSlider");
+Object.defineProperty(exports, "ZoomSlider", { enumerable: true, get: function () { return ZoomSlider_1.ZoomSlider; } });
+var DataModelGraph_1 = require("./DataModelGraph");
+Object.defineProperty(exports, "DataModelGraph", { enumerable: true, get: function () { return DataModelGraph_1.DataModelGraph; } });
+// hooks
+var useSigmaCustomRenderers_1 = require("./hooks/useSigmaCustomRenderers");
+Object.defineProperty(exports, "useSigmaCustomRenderers", { enumerable: true, get: function () { return useSigmaCustomRenderers_1.useSigmaCustomRenderers; } });
+var useLoopRenderer_1 = require("./hooks/useLoopRenderer");
+Object.defineProperty(exports, "useLoopRenderer", { enumerable: true, get: function () { return useLoopRenderer_1.useLoopRenderer; } });
+var useAnimatedGraphLayout_1 = require("./hooks/useAnimatedGraphLayout");
+Object.defineProperty(exports, "useAnimatedGraphLayout", { enumerable: true, get: function () { return useAnimatedGraphLayout_1.useAnimatedGraphLayout; } });
+var useCircleLayout_1 = require("./hooks/useCircleLayout");
+Object.defineProperty(exports, "useCircleLayout", { enumerable: true, get: function () { return useCircleLayout_1.useCircleLayout; } });
+// renderers
+var tooltip_1 = require("./rendering/canvas/tooltip");
+Object.defineProperty(exports, "drawTooltip", { enumerable: true, get: function () { return tooltip_1.drawTooltip; } });
+var node_image_1 = require("./rendering/webgl/node.image");
+Object.defineProperty(exports, "NodeImageProgram", { enumerable: true, get: function () { return node_image_1.NodeImageProgram; } });
+var node_border_1 = require("./rendering/webgl/node.border");
+Object.defineProperty(exports, "NodeBorderProgram", { enumerable: true, get: function () { return node_border_1.NodeBorderProgram; } });
+var node_dashed_border_1 = require("./rendering/webgl/node.dashed.border");
+Object.defineProperty(exports, "NodeDashedBorderProgram", { enumerable: true, get: function () { return node_dashed_border_1.NodeDashedBorderProgram; } });
+var image_1 = require("./rendering/webgl/image");
+Object.defineProperty(exports, "WebGLImageLoader", { enumerable: true, get: function () { return image_1.WebGLImageLoader; } });
+var utils_1 = require("./rendering/canvas/utils");
+Object.defineProperty(exports, "getCanvasMousePos", { enumerable: true, get: function () { return utils_1.getCanvasMousePos; } });
+var graphDataTypes_1 = require("./types/graphDataTypes");
+Object.defineProperty(exports, "DataModelGraphNodeType", { enumerable: true, get: function () { return graphDataTypes_1.DataModelGraphNodeType; } });

package/cjs/features/graph/rendering/canvas/hover.d.ts

@@ -0,0 +1,2 @@
+import { GraphContainerSettings, GraphNodeAttributes } from '../../types/graphDataTypes';
+export declare const drawHover: (context: CanvasRenderingContext2D, data: Pick<GraphNodeAttributes, 'x' | 'y' | 'size' | 'label' | 'selected'>, settings: GraphContainerSettings) => void;

package/cjs/features/graph/rendering/canvas/hover.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawHover = void 0;
+var label_1 = require("./label");
+var nodeArc_1 = require("./nodeArc");
+var drawHover = function (context, data, settings) {
+    (0, nodeArc_1.drawTwoArcs)(context, data);
+    (0, label_1.drawLabel)(context, data, settings, { backgroundColor: '#FFF' });
+};
+exports.drawHover = drawHover;

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var hover_1 = require("./hover");
+var label_1 = require("./label");
+var nodeArc_1 = require("./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 () {
+        (0, hover_1.drawHover)(context, data, settings);
+        expect(nodeArc_1.drawTwoArcs).toHaveBeenCalledWith(context, data);
+        expect(label_1.drawLabel).toHaveBeenCalledWith(context, data, settings, { backgroundColor: '#FFF' });
+    });
+});

package/cjs/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/cjs/features/graph/rendering/canvas/label.js

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

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var label_1 = require("./label");
+var labelBackground_1 = require("./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: ''
+        };
+        (0, label_1.drawLabel)(context, data, settings);
+        expect(context.fillText).not.toHaveBeenCalled();
+        expect(labelBackground_1.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'
+        };
+        (0, label_1.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(labelBackground_1.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'
+        };
+        (0, label_1.drawLabel)(context, data, settings, { backgroundColor: '#FFF' });
+        expect(labelBackground_1.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
+        };
+        (0, label_1.drawLabel)(context, data, settings);
+        expect(labelBackground_1.drawLabelBackground).toHaveBeenCalledWith(context, data, settings, {
+            backgroundColor: '#FFF',
+            marginLeft: 6,
+            lineHeight: settings.labelSize * 1.2
+        });
+        expect(context.fillText).toHaveBeenCalledWith(data.label, 28, 5);
+    });
+});

package/cjs/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/cjs/features/graph/rendering/canvas/labelBackground.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawLabelBackground = void 0;
+var PADDING = 2;
+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;
+};
+exports.drawLabelBackground = drawLabelBackground;

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

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

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var labelBackground_1 = require("./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 = (0, labelBackground_1.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 = (0, labelBackground_1.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 = (0, labelBackground_1.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/cjs/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/cjs/features/graph/rendering/canvas/nodeArc.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawTwoArcs = exports.drawOuterArc = exports.drawNodeArc = void 0;
+var PADDING = 1.5;
+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();
+};
+exports.drawNodeArc = drawNodeArc;
+var drawOuterArc = function (context, data) {
+    if (data.selected) {
+        context.shadowColor = 'rgba(0, 114, 206, 0.5)';
+        context.shadowBlur = 10;
+        (0, exports.drawNodeArc)(context, data, {
+            lineWidth: 2,
+            color: '#0072CE',
+            padding: 4.5
+        });
+        context.shadowColor = 'none';
+        context.shadowBlur = 0;
+    }
+};
+exports.drawOuterArc = drawOuterArc;
+var drawTwoArcs = function (context, data) {
+    (0, exports.drawOuterArc)(context, data);
+    (0, exports.drawNodeArc)(context, data);
+};
+exports.drawTwoArcs = drawTwoArcs;

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