@reltio/components 1.4.1844 → 1.4.1846

package/cjs/features/graph/ZoomSlider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomSlider = void 0;
+var ZoomSlider_1 = require("./ZoomSlider");
+Object.defineProperty(exports, "ZoomSlider", { enumerable: true, get: function () { return ZoomSlider_1.ZoomSlider; } });

package/cjs/features/graph/ZoomSlider/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "icon" | "thumb" | "maxButton" | "minButton" | "thumbIcon" | "rail" | "sliderRoot">;

package/cjs/features/graph/ZoomSlider/styles.js

@@ -0,0 +1,63 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var boxShadow = '0 1px 1px rgba(0,0,0,0.14), 0 2px 1px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.2)';
+var buttonStyle = {
+    background: '#FFFFFF',
+    boxShadow: boxShadow,
+    width: '28px',
+    height: '28px'
+};
+exports.useStyles = (0, styles_1.makeStyles)({
+    container: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    maxButton: __assign(__assign({}, buttonStyle), { borderRadius: '2px 4px 4px 2px' }),
+    minButton: __assign(__assign({}, buttonStyle), { borderRadius: '4px 2px 2px 4px' }),
+    thumb: {
+        boxShadow: boxShadow,
+        borderRadius: '2px',
+        width: '8px',
+        height: '28px',
+        marginLeft: '5px',
+        color: 'rgba(0,0,0,0.54)',
+        backgroundColor: '#FFFFFF',
+        '&.MuiSlider-thumb.Mui-focusVisible, &:hover': {
+            boxShadow: boxShadow
+        },
+        '&:before': {
+            boxShadow: 'none'
+        }
+    },
+    thumbIcon: {
+        transform: 'rotate(90deg)'
+    },
+    icon: {
+        width: '18px',
+        height: '18px'
+    },
+    rail: {
+        opacity: 1,
+        height: '4px',
+        paddingRight: '10px',
+        marginTop: '1px'
+    },
+    sliderRoot: {
+        color: '#EDEDED',
+        marginRight: '10px',
+        height: '2px'
+    }
+});

package/cjs/features/graph/contexts/SigmaCustomRenderersContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Renderers, Canvases } from '../types/sigmaCustomRenderersTypes';
+type Props = {
+    addRenderers: (renderers: Renderers) => void;
+    canvases: Canvases;
+};
+export declare const SigmaCustomRenderersContext: import("react").Context<Props>;
+export declare const useSigmaCustomRenderers: () => Props;
+export {};

package/cjs/features/graph/contexts/SigmaCustomRenderersContext.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSigmaCustomRenderers = exports.SigmaCustomRenderersContext = void 0;
+var react_1 = require("react");
+var core_1 = require("../../../core");
+exports.SigmaCustomRenderersContext = (0, react_1.createContext)({
+    addRenderers: core_1.noop,
+    canvases: {}
+});
+var useSigmaCustomRenderers = function () {
+    var sigmaCustomRenderers = (0, react_1.useContext)(exports.SigmaCustomRenderersContext);
+    return sigmaCustomRenderers;
+};
+exports.useSigmaCustomRenderers = useSigmaCustomRenderers;
+exports.SigmaCustomRenderersContext.displayName = 'SigmaCustomRenderersContext';

package/cjs/features/graph/hooks/useAnimatedGraphLayout.d.ts

@@ -0,0 +1,13 @@
+import Graph from 'graphology';
+import { GraphologyLayout, GraphologyWorkerLayoutConstructor } from '../types/graphDataTypes';
+type Props = {
+    graph: Graph;
+    syncLayout?: GraphologyLayout<Record<string, unknown>>;
+    workerLayout?: GraphologyWorkerLayoutConstructor<Record<string, unknown>>;
+    layoutSettings?: Record<string, unknown>;
+    initialCameraRatio?: number;
+    animationDuration?: number;
+    relayoutTrigger?: unknown;
+};
+export declare const useAnimatedGraphLayout: ({ graph, syncLayout, workerLayout, layoutSettings, initialCameraRatio, animationDuration, relayoutTrigger }: Props) => void;
+export {};

package/cjs/features/graph/hooks/useAnimatedGraphLayout.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimatedGraphLayout = void 0;
+var react_1 = require("react");
+var core_1 = require("@react-sigma/core");
+var animate_1 = require("sigma/utils/animate");
+var WORKER_LAYOUT_ANIMATION_DURATION = 5000;
+var SYNC_LAYOUT_ANIMATION_DURATION = 1000;
+var useAnimatedGraphLayout = function (_a) {
+    var graph = _a.graph, syncLayout = _a.syncLayout, workerLayout = _a.workerLayout, layoutSettings = _a.layoutSettings, _b = _a.initialCameraRatio, initialCameraRatio = _b === void 0 ? 1.2 : _b, animationDuration = _a.animationDuration, relayoutTrigger = _a.relayoutTrigger;
+    var sigma = (0, core_1.useSigma)();
+    var loadGraph = (0, core_1.useLoadGraph)();
+    (0, react_1.useEffect)(function () {
+        sigma.getCamera().setState({ ratio: initialCameraRatio });
+    }, [graph, sigma, initialCameraRatio]);
+    (0, react_1.useEffect)(function () {
+        loadGraph(graph);
+        if (syncLayout) {
+            var positions = syncLayout(sigma.getGraph(), layoutSettings);
+            (0, animate_1.animateNodes)(sigma.getGraph(), positions, { duration: animationDuration || SYNC_LAYOUT_ANIMATION_DURATION });
+        }
+        if (workerLayout) {
+            var worker_1 = new workerLayout(sigma.getGraph(), layoutSettings);
+            worker_1.start();
+            var timer_1 = setTimeout(function () {
+                worker_1.stop();
+            }, animationDuration || WORKER_LAYOUT_ANIMATION_DURATION);
+            return function () {
+                clearTimeout(timer_1);
+                worker_1.kill();
+            };
+        }
+    }, [graph, layoutSettings, loadGraph, sigma, syncLayout, workerLayout, animationDuration, relayoutTrigger]);
+};
+exports.useAnimatedGraphLayout = useAnimatedGraphLayout;

package/cjs/features/graph/hooks/useCircleLayout.d.ts

@@ -0,0 +1,9 @@
+import Graph from 'graphology';
+type Props = {
+    graph: Graph;
+    newNodesIds?: string[];
+    animationDuration?: number;
+    relayoutTrigger?: unknown;
+};
+export declare const useCircleLayout: ({ graph, newNodesIds, animationDuration, relayoutTrigger }: Props) => void;
+export {};

package/cjs/features/graph/hooks/useCircleLayout.js

@@ -0,0 +1,50 @@
+"use strict";
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCircleLayout = void 0;
+var react_1 = require("react");
+var circular_1 = __importDefault(require("graphology-layout/circular"));
+var graphology_layout_forceatlas2_1 = __importDefault(require("graphology-layout-forceatlas2"));
+var worker_1 = __importDefault(require("graphology-layout-forceatlas2/worker"));
+var useAnimatedGraphLayout_1 = require("./useAnimatedGraphLayout");
+var hooks_1 = require("../../../hooks");
+var useCircleLayout = function (_a) {
+    var graph = _a.graph, newNodesIds = _a.newNodesIds, animationDuration = _a.animationDuration, relayoutTrigger = _a.relayoutTrigger;
+    var layoutSettings = (0, react_1.useMemo)(function () {
+        circular_1.default.assign(graph);
+        return {
+            settings: __assign(__assign({}, graphology_layout_forceatlas2_1.default.inferSettings(graph)), { gravity: 1 })
+        };
+    }, [graph]);
+    (0, hooks_1.useDidUpdateEffect)(function () {
+        if (newNodesIds === null || newNodesIds === void 0 ? void 0 : newNodesIds.length) {
+            var tempGraph_1 = graph.copy();
+            circular_1.default.assign(tempGraph_1);
+            newNodesIds.forEach(function (id) {
+                graph.setNodeAttribute(id, 'x', tempGraph_1.getNodeAttribute(id, 'x'));
+                graph.setNodeAttribute(id, 'y', tempGraph_1.getNodeAttribute(id, 'y'));
+            });
+        }
+    }, [newNodesIds]);
+    (0, useAnimatedGraphLayout_1.useAnimatedGraphLayout)({
+        workerLayout: worker_1.default,
+        layoutSettings: layoutSettings,
+        animationDuration: animationDuration,
+        graph: graph,
+        relayoutTrigger: relayoutTrigger
+    });
+};
+exports.useCircleLayout = useCircleLayout;

package/cjs/features/graph/hooks/useLoopRenderer.d.ts

@@ -0,0 +1,5 @@
+import Graph from 'graphology';
+export declare const useLoopRenderer: (graph: Graph) => {
+    selfRelationsPathsMap: Record<string, Path2D>;
+    selfRelationLoopsCanvas: import("..").Canvas;
+};

package/cjs/features/graph/hooks/useLoopRenderer.js

@@ -0,0 +1,47 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoopRenderer = void 0;
+var react_1 = require("react");
+var core_1 = require("@react-sigma/core");
+var SigmaCustomRenderersContext_1 = require("../contexts/SigmaCustomRenderersContext");
+var selfRelationLoop_1 = require("../rendering/canvas/selfRelationLoop");
+var useLoopRenderer = function (graph) {
+    var sigma = (0, core_1.useSigma)();
+    var _a = (0, SigmaCustomRenderersContext_1.useSigmaCustomRenderers)(), addCustomRenderers = _a.addRenderers, canvases = _a.canvases;
+    var selfRelationsPathsMap = (0, react_1.useRef)({});
+    var selfRelationLoopsCanvas = canvases.selfRelationLoops;
+    (0, react_1.useEffect)(function () {
+        addCustomRenderers({
+            selfRelationLoops: {
+                renderer: function (context) {
+                    graph.forEachEdge(function (edgeId, edgeData, sourceId) {
+                        if (edgeData.loop) {
+                            delete selfRelationsPathsMap.current[edgeId];
+                            var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
+                            var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
+                            var isHidden = edgeDisplayData.hidden || sourceDisplayData.hidden;
+                            if (isHidden)
+                                return;
+                            var path = (0, selfRelationLoop_1.drawSelfRelationLoop)(context, __assign(__assign({}, edgeDisplayData), { size: sigma.scaleSize(edgeDisplayData.size) }), __assign(__assign(__assign({}, sourceDisplayData), sigma.framedGraphToViewport(sourceDisplayData)), { size: sigma.scaleSize(sourceDisplayData.size) }));
+                            selfRelationsPathsMap.current[edgeId] = path;
+                        }
+                    });
+                },
+                insertBefore: 'edges'
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+    return { selfRelationsPathsMap: selfRelationsPathsMap.current, selfRelationLoopsCanvas: selfRelationLoopsCanvas };
+};
+exports.useLoopRenderer = useLoopRenderer;

package/cjs/features/graph/hooks/useLoopRenderer.test.d.ts

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

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

@@ -0,0 +1,221 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var graphology_1 = require("graphology");
+var core_1 = require("@react-sigma/core");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var useLoopRenderer_1 = require("./useLoopRenderer");
+var SigmaCustomRenderersContext_1 = require("../contexts/SigmaCustomRenderersContext");
+var selfRelationLoop_1 = require("../rendering/canvas/selfRelationLoop");
+jest.mock('@react-sigma/core');
+jest.mock('../contexts/SigmaCustomRenderersContext');
+jest.mock('../rendering/canvas/selfRelationLoop');
+var graphJson = {
+    attributes: {},
+    nodes: [
+        {
+            key: 'node1',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hcp',
+                traversedRelationsCount: 2,
+                untraversedRelationsCount: 0,
+                x: 1,
+                y: 1
+            }
+        },
+        {
+            key: 'node2',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hcp',
+                traversedRelationsCount: 3,
+                untraversedRelationsCount: 2,
+                x: 1,
+                y: 1
+            }
+        },
+        {
+            key: 'node3',
+            attributes: {
+                label: '<No label>',
+                entityTypeUri: 'hca',
+                traversedRelationsCount: 1,
+                untraversedRelationsCount: 0,
+                x: 1,
+                y: 1
+            }
+        }
+    ],
+    edges: [
+        {
+            key: 'r1',
+            source: 'node1',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: false,
+                loop: false,
+                relationTypeUri: 'relType1',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r2',
+            source: 'node3',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: false,
+                loop: false,
+                relationTypeUri: 'relType2',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r3',
+            source: 'node2',
+            target: 'node2',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: true,
+                loop: true,
+                relationTypeUri: 'relType3',
+                direction: 'directed'
+            }
+        },
+        {
+            key: 'r4',
+            source: 'node1',
+            target: 'node1',
+            attributes: {
+                size: 1,
+                color: 'rgba(0, 0, 0, 0.2)',
+                forceLabel: true,
+                loop: true,
+                relationTypeUri: 'relType4',
+                direction: 'directed'
+            }
+        }
+    ]
+};
+var edges = {
+    r1: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType1',
+        direction: mdm_sdk_1.RelationTypeDirection.directed
+    },
+    r2: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        loop: false,
+        relationTypeUri: 'relType2',
+        direction: mdm_sdk_1.RelationTypeDirection.directed
+    },
+    r3: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: false,
+        hidden: true,
+        loop: true,
+        relationTypeUri: 'relType3',
+        direction: mdm_sdk_1.RelationTypeDirection.directed
+    },
+    r4: {
+        size: 1,
+        color: 'rgba(0, 0, 0, 0.2)',
+        forceLabel: true,
+        loop: true,
+        relationTypeUri: 'relType4',
+        direction: mdm_sdk_1.RelationTypeDirection.directed
+    }
+};
+var nodes = {
+    node1: {
+        size: 12,
+        label: 'node 1',
+        x: 0.5,
+        y: 0.4
+    },
+    node2: {
+        size: 12,
+        label: 'node 2',
+        x: 0.6,
+        y: 0.6
+    },
+    node3: {
+        size: 12,
+        label: 'node 3',
+        x: 0.8,
+        y: 0.7
+    }
+};
+var startHook = function (graph) { return (0, react_hooks_1.renderHook)(useLoopRenderer_1.useLoopRenderer, { initialProps: graph }); };
+var createGraph = function () {
+    var graph = new graphology_1.MultiGraph();
+    graph.import(graphJson);
+    return graph;
+};
+describe('useLoopRenderer tests', function () {
+    var getEdgeDisplayData = jest.fn().mockImplementation(function (edgeId) { return edges[edgeId]; });
+    var getNodeDisplayData = jest.fn().mockImplementation(function (nodeId) { return nodes[nodeId]; });
+    var scaleSize = jest.fn().mockImplementation(function (size) { return size * 2; });
+    var framedGraphToViewport = jest.fn().mockImplementation(function (_a) {
+        var x = _a.x, y = _a.y;
+        return ({ x: x * 100, y: y * 100 });
+    });
+    var addRenderers = jest.fn();
+    var canvases = { selfRelationLoops: {} };
+    beforeAll(function () {
+        selfRelationLoop_1.drawSelfRelationLoop.mockImplementation(function (_context, edgeData) { return "path-".concat(edgeData.relationTypeUri); });
+        SigmaCustomRenderersContext_1.useSigmaCustomRenderers.mockReturnValue({
+            addRenderers: addRenderers,
+            canvases: canvases
+        });
+        core_1.useSigma.mockReturnValue({
+            getEdgeDisplayData: getEdgeDisplayData,
+            getNodeDisplayData: getNodeDisplayData,
+            scaleSize: scaleSize,
+            framedGraphToViewport: framedGraphToViewport
+        });
+    });
+    var getSelfRelationLoopsRenderer = function () {
+        return addRenderers.mock.calls[addRenderers.mock.calls.length - 1][0].selfRelationLoops;
+    };
+    it('should draw self relations correctly and with correctly setting paths', function () {
+        var graph = createGraph();
+        var result = startHook(graph).result;
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: {},
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+        var renderer = getSelfRelationLoopsRenderer().renderer;
+        (0, react_hooks_1.act)(function () {
+            renderer('canvas');
+        });
+        expect(selfRelationLoop_1.drawSelfRelationLoop).toHaveBeenCalledTimes(1);
+        expect(selfRelationLoop_1.drawSelfRelationLoop).toHaveBeenCalledWith('canvas', __assign(__assign({}, edges.r4), { size: 2 }), __assign(__assign({}, nodes.node1), { size: 24, x: 50, y: 40 }));
+        expect(result.current).toEqual({
+            selfRelationsPathsMap: { r4: 'path-relType4' },
+            selfRelationLoopsCanvas: canvases.selfRelationLoops
+        });
+    });
+});

package/cjs/features/graph/hooks/useSigmaCustomRenderers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Canvases, Renderers } from '../types/sigmaCustomRenderersTypes';
+export declare const useSigmaCustomRenderers: () => {
+    addRenderers: (renderers: Renderers) => void;
+    canvases: Canvases;
+    canvasesRef: import("react").MutableRefObject<Canvases>;
+};

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSigmaCustomRenderers = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var core_1 = require("@react-sigma/core");
+var utils_1 = require("sigma/utils");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var createCanvasContext = function (canvas) {
+    var contextOptions = { preserveDrawingBuffer: false, antialias: false };
+    return canvas.getContext('2d', contextOptions);
+};
+var createCanvas = function (id) {
+    var canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.setAttribute('class', "sigma-".concat(id));
+    return canvas;
+};
+var useSigmaCustomRenderers = function () {
+    var _a = (0, core_1.useSigmaContext)(), container = _a.container, sigma = _a.sigma;
+    var _b = (0, react_1.useState)({}), renderers = _b[0], setRenderers = _b[1];
+    var canvasesRef = (0, react_1.useRef)({});
+    var widthRef = (0, react_1.useRef)(0);
+    var heightRef = (0, react_1.useRef)(0);
+    var addRenderers = (0, react_1.useCallback)(function (renderers) {
+        setRenderers((0, ramda_1.mergeLeft)(renderers));
+    }, []);
+    var resize = (0, react_1.useCallback)(function () {
+        widthRef.current = container.offsetWidth;
+        heightRef.current = container.offsetHeight;
+        var pixelRatio = (0, utils_1.getPixelRatio)();
+        for (var id in canvasesRef.current) {
+            var _a = canvasesRef.current[id], canvas = _a.canvasElement, context = _a.context;
+            canvas.style.width = widthRef.current + 'px';
+            canvas.style.height = heightRef.current + 'px';
+            canvas.setAttribute('width', widthRef.current * pixelRatio + 'px');
+            canvas.setAttribute('height', heightRef.current * pixelRatio + 'px');
+            if (pixelRatio !== 1) {
+                context.scale(pixelRatio, pixelRatio);
+            }
+        }
+    }, [container.offsetHeight, container.offsetWidth]);
+    var afterRender = (0, react_1.useCallback)(function () {
+        for (var id in renderers) {
+            var context = canvasesRef.current[id].context;
+            context.clearRect(0, 0, widthRef.current, heightRef.current);
+            var renderer = renderers[id].renderer;
+            renderer(context);
+        }
+    }, [renderers]);
+    var beforeRender = (0, react_1.useCallback)(function () {
+        for (var id in renderers) {
+            var shouldCreateCanvas = (0, mdm_sdk_1.isEmptyValue)(canvasesRef.current[id]);
+            if (!shouldCreateCanvas)
+                continue;
+            var insertBefore = renderers[id].insertBefore;
+            var sigmaContainer = container.querySelector('.sigma-container');
+            var canvas = createCanvas(id);
+            var context = createCanvasContext(canvas);
+            sigmaContainer.insertBefore(canvas, sigmaContainer.querySelector(".sigma-".concat(insertBefore)));
+            canvasesRef.current[id] = { canvasElement: canvas, context: context };
+            resize();
+        }
+    }, [renderers, container, resize]);
+    (0, react_1.useEffect)(function () {
+        sigma.addListener('beforeRender', beforeRender);
+        return function () {
+            sigma.off('beforeRender', beforeRender);
+        };
+    }, [sigma, beforeRender]);
+    (0, react_1.useEffect)(function () {
+        sigma.addListener('afterRender', afterRender);
+        return function () {
+            sigma.off('afterRender', afterRender);
+        };
+    }, [sigma, afterRender]);
+    (0, react_1.useEffect)(function () {
+        sigma.addListener('resize', resize);
+        return function () {
+            sigma.off('resize', resize);
+        };
+    }, [sigma, resize]);
+    (0, react_1.useEffect)(function () {
+        var canvases = canvasesRef.current;
+        return function () {
+            for (var id in canvases) {
+                var canvas = canvases[id];
+                canvas.canvasElement.remove();
+                delete canvases[id];
+            }
+        };
+    }, []);
+    return { addRenderers: addRenderers, canvases: canvasesRef.current, canvasesRef: canvasesRef };
+};
+exports.useSigmaCustomRenderers = useSigmaCustomRenderers;

package/cjs/features/graph/hooks/useSigmaCustomRenderers.test.d.ts

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