@reltio/components 1.4.1844 → 1.4.1846

package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.js

@@ -0,0 +1,41 @@
+"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.useSelectedNodeRenderer = void 0;
+var react_1 = require("react");
+var core_1 = require("@react-sigma/core");
+var nodeArc_1 = require("../../rendering/canvas/nodeArc");
+var useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
+var useEdgeLabelsRenderer_1 = require("./useEdgeLabelsRenderer");
+var useSelectedNodeRenderer = function (graph) {
+    var sigma = (0, core_1.useSigma)();
+    var addCustomRenderers = (0, useSigmaCustomRenderers_1.useSigmaCustomRenderers)().addRenderers;
+    (0, react_1.useEffect)(function () {
+        addCustomRenderers({
+            selectedNodeBorder: {
+                renderer: function (context) {
+                    graph.forEachNode(function (nodeId) {
+                        var data = sigma.getNodeDisplayData(nodeId);
+                        if (!data.selected)
+                            return;
+                        var scaledData = __assign(__assign(__assign({}, data), sigma.framedGraphToViewport(data)), { size: sigma.scaleSize(data.size) });
+                        (0, nodeArc_1.drawTwoArcs)(context, scaledData);
+                    });
+                },
+                // we need to have "selected" node renderer layer before 'labels' layer to have labels of other nodes on top of it in case of overlapping
+                insertBefore: useEdgeLabelsRenderer_1.CUSTOM_EDGE_LABELS_CANVAS_NAME
+            }
+        });
+    }, [addCustomRenderers, graph, sigma]);
+};
+exports.useSelectedNodeRenderer = useSelectedNodeRenderer;

package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.d.ts

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

package/cjs/features/graph/DataModelGraph/hooks/useSelectedNodeRenderer.test.js

@@ -0,0 +1,63 @@
+"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 useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
+var useSelectedNodeRenderer_1 = require("./useSelectedNodeRenderer");
+var defaultGraph_test_data_1 = require("./defaultGraph.test-data");
+var nodeArc_1 = require("../../rendering/canvas/nodeArc");
+jest.mock('@react-sigma/core');
+jest.mock('../../hooks/useSigmaCustomRenderers', function () { return ({
+    useSigmaCustomRenderers: jest.fn()
+}); });
+jest.mock('../../rendering/canvas/nodeArc', function () { return ({
+    drawTwoArcs: jest.fn().mockImplementation(jest.requireActual('../../rendering/canvas/nodeArc').drawTwoArcs)
+}); });
+describe('useSelectedNodeRenderer tests', function () {
+    var graph;
+    var setUp = function (graphArg) {
+        graph = graphArg || (0, defaultGraph_test_data_1.createDefaultGraph)();
+        return (0, react_hooks_1.renderHook)(useSelectedNodeRenderer_1.useSelectedNodeRenderer, {
+            initialProps: graph
+        });
+    };
+    var getNodeDisplayData = jest.fn().mockImplementation(function (nodeId) { return graph.getNodeAttributes(nodeId); });
+    var renderers = {};
+    var addRenderers = function (rendererObject) { return Object.assign(renderers, rendererObject); };
+    beforeEach(function () {
+        useSigmaCustomRenderers_1.useSigmaCustomRenderers.mockReturnValue({
+            addRenderers: addRenderers
+        });
+        core_1.useSigma.mockReturnValue({
+            getNodeDisplayData: getNodeDisplayData,
+            framedGraphToViewport: function (x) { return x; },
+            scaleSize: function (x) { return x; }
+        });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var getRenderer = function () { return renderers.selectedNodeBorder; };
+    it('should not draw 2 arcs for regular node', function () {
+        setUp();
+        var renderer = getRenderer().renderer;
+        var canvas = document.createElement('canvas');
+        var canvasContext = canvas.getContext('2d');
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+        });
+        expect(nodeArc_1.drawTwoArcs).not.toHaveBeenCalled();
+    });
+    it('should draw 2 arcs for selected node', function () {
+        var graph = (0, defaultGraph_test_data_1.createDefaultGraph)();
+        graph.setNodeAttribute('hcp', 'selected', true);
+        setUp(graph);
+        var renderer = getRenderer().renderer;
+        var canvas = document.createElement('canvas');
+        var canvasContext = canvas.getContext('2d');
+        (0, react_hooks_1.act)(function () {
+            renderer(canvasContext);
+        });
+        expect(nodeArc_1.drawTwoArcs).toHaveBeenCalledTimes(1);
+    });
+});

package/cjs/features/graph/DataModelGraph/icons/interaction.inline.svg.d.ts

@@ -0,0 +1 @@
+export declare const interactionIcon = "\n<svg id=\"123\" width=\"500px\" height=\"500px\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"#E7EAED\" stroke=\"#E7EAED\" stroke-width=\"0\"/>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M26 26.1458C26.1784 26.3176 26.3127 26.5349 26.3841 26.7791L28.7321 28.1346C28.9712 28.2727 29.0531 28.5785 28.9151 28.8177L28.4151 29.6837C28.277 29.9228 27.9712 30.0048 27.7321 29.8667L25.4564 28.5529C25.313 28.6007 25.1595 28.6266 25 28.6266C24.8405 28.6266 24.687 28.6007 24.5436 28.5529L22.2679 29.8667C22.0288 30.0048 21.723 29.9228 21.5849 29.6837L21.0849 28.8177C20.9469 28.5785 21.0288 28.2727 21.2679 28.1346L23.6159 26.7791C23.6873 26.5349 23.8216 26.3176 24 26.1458V23.8846C24 23.6085 24.2239 23.3846 24.5 23.3846H25.5C25.7761 23.3846 26 23.6085 26 23.8846V26.1458ZM24.8 22.3846C23.1431 22.3846 21.8 21.0415 21.8 19.3846C21.8 17.7278 23.1431 16.3846 24.8 16.3846C26.4569 16.3846 27.8 17.7278 27.8 19.3846C27.8 21.0415 26.4569 22.3846 24.8 22.3846ZM18 34.3846C16.3431 34.3846 15 33.0415 15 31.3846C15 29.7278 16.3431 28.3846 18 28.3846C19.6569 28.3846 21 29.7278 21 31.3846C21 33.0415 19.6569 34.3846 18 34.3846ZM32 34.3846C30.3431 34.3846 29 33.0415 29 31.3846C29 29.7278 30.3431 28.3846 32 28.3846C33.6569 28.3846 35 29.7278 35 31.3846C35 33.0415 33.6569 34.3846 32 34.3846Z\" fill=\"#37474F\"/>\n</svg>\n";

package/cjs/features/graph/DataModelGraph/icons/interaction.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interactionIcon = void 0;
+exports.interactionIcon = "\n<svg id=\"123\" width=\"500px\" height=\"500px\" viewBox=\"0 0 50 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"25\" fill=\"#E7EAED\" stroke=\"#E7EAED\" stroke-width=\"0\"/>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M26 26.1458C26.1784 26.3176 26.3127 26.5349 26.3841 26.7791L28.7321 28.1346C28.9712 28.2727 29.0531 28.5785 28.9151 28.8177L28.4151 29.6837C28.277 29.9228 27.9712 30.0048 27.7321 29.8667L25.4564 28.5529C25.313 28.6007 25.1595 28.6266 25 28.6266C24.8405 28.6266 24.687 28.6007 24.5436 28.5529L22.2679 29.8667C22.0288 30.0048 21.723 29.9228 21.5849 29.6837L21.0849 28.8177C20.9469 28.5785 21.0288 28.2727 21.2679 28.1346L23.6159 26.7791C23.6873 26.5349 23.8216 26.3176 24 26.1458V23.8846C24 23.6085 24.2239 23.3846 24.5 23.3846H25.5C25.7761 23.3846 26 23.6085 26 23.8846V26.1458ZM24.8 22.3846C23.1431 22.3846 21.8 21.0415 21.8 19.3846C21.8 17.7278 23.1431 16.3846 24.8 16.3846C26.4569 16.3846 27.8 17.7278 27.8 19.3846C27.8 21.0415 26.4569 22.3846 24.8 22.3846ZM18 34.3846C16.3431 34.3846 15 33.0415 15 31.3846C15 29.7278 16.3431 28.3846 18 28.3846C19.6569 28.3846 21 29.7278 21 31.3846C21 33.0415 19.6569 34.3846 18 34.3846ZM32 34.3846C30.3431 34.3846 29 33.0415 29 31.3846C29 29.7278 30.3431 28.3846 32 28.3846C33.6569 28.3846 35 29.7278 35 31.3846C35 33.0415 33.6569 34.3846 32 34.3846Z\" fill=\"#37474F\"/>\n</svg>\n";

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

@@ -0,0 +1 @@
+export { DataModelGraph } from './DataModelGraph';

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

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

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "graph" | "rightBottomControls" | "zoomSlider">;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    wrapper: {
+        height: '100%',
+        position: 'relative',
+        background: 'rgb(245, 245, 245)'
+    },
+    graph: {
+        height: '100%'
+    },
+    rightBottomControls: {
+        position: 'absolute',
+        zIndex: 100,
+        right: '18px',
+        bottom: '16px',
+        display: 'flex',
+        width: '200px'
+    },
+    zoomSlider: {
+        flexGrow: 1,
+        marginRight: '8px'
+    }
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+export declare const SigmaCustomRenderersContainer: ({ children }: Props) => JSX.Element;
+export {};

package/cjs/features/graph/SigmaCustomRenderersContainer/SigmaCustomRenderersContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SigmaCustomRenderersContainer = void 0;
+var react_1 = __importDefault(require("react"));
+var useSigmaCustomRenderers_1 = require("../hooks/useSigmaCustomRenderers");
+var SigmaCustomRenderersContext_1 = require("../contexts/SigmaCustomRenderersContext");
+var SigmaCustomRenderersContainer = function (_a) {
+    var children = _a.children;
+    var sigmaCustomRenderers = (0, useSigmaCustomRenderers_1.useSigmaCustomRenderers)();
+    return (react_1.default.createElement(SigmaCustomRenderersContext_1.SigmaCustomRenderersContext.Provider, { value: sigmaCustomRenderers }, children));
+};
+exports.SigmaCustomRenderersContainer = SigmaCustomRenderersContainer;

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

@@ -0,0 +1 @@
+export { SigmaCustomRenderersContainer } from './SigmaCustomRenderersContainer';

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import { GraphContainerSettings } from '../types/graphDataTypes';
+type Props = {
+    children?: React.ReactElement;
+    initialSettings?: GraphContainerSettings;
+};
+export declare const SigmaGraphContainer: ({ children, initialSettings: initialSettingsProp }: Props) => JSX.Element;
+export {};

package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SigmaGraphContainer = void 0;
+var react_1 = __importStar(require("react"));
+var graphology_1 = require("graphology");
+var ramda_1 = require("ramda");
+var core_1 = require("@react-sigma/core");
+require("@react-sigma/core/lib/react-sigma.min.css");
+var node_1 = require("sigma/rendering/webgl/programs/common/node");
+var edge_1 = require("sigma/rendering/webgl/programs/common/edge");
+var edge_2 = __importDefault(require("sigma/rendering/webgl/programs/edge"));
+var SigmaCustomRenderersContainer_1 = require("../SigmaCustomRenderersContainer");
+var SigmaGraphResizer_1 = require("../SigmaGraphResizer");
+var hover_1 = require("../rendering/canvas/hover");
+var label_1 = require("../rendering/canvas/label");
+var node_dashed_border_1 = require("../rendering/webgl/node.dashed.border");
+var node_image_1 = require("../rendering/webgl/node.image");
+var edge_arrowHead_1 = __importDefault(require("../rendering/webgl/edge.arrowHead"));
+var edge_reversedArrowHead_1 = __importDefault(require("../rendering/webgl/edge.reversedArrowHead"));
+var edge_clamped_1 = __importDefault(require("../rendering/webgl/edge.clamped"));
+var edge_dashed_1 = __importDefault(require("../rendering/webgl/edge.dashed"));
+var SigmaGraphContainer = function (_a) {
+    var children = _a.children, initialSettingsProp = _a.initialSettings;
+    var initialSettings = (0, react_1.useMemo)(function () {
+        return (0, ramda_1.mergeDeepRight)({
+            allowInvalidContainer: true,
+            defaultNodeType: 'image',
+            hoverRenderer: hover_1.drawHover,
+            labelRenderer: label_1.drawLabel,
+            nodeProgramClasses: {
+                image: (0, node_1.createNodeCompoundProgram)([node_image_1.NodeImageProgram, node_dashed_border_1.NodeDashedBorderProgram])
+            },
+            edgeProgramClasses: {
+                line: edge_2.default,
+                arrow: (0, edge_1.createEdgeCompoundProgram)([edge_clamped_1.default, edge_arrowHead_1.default]),
+                doubleArrow: (0, edge_1.createEdgeCompoundProgram)([
+                    edge_clamped_1.default,
+                    edge_arrowHead_1.default,
+                    edge_reversedArrowHead_1.default
+                ]),
+                dashed: edge_dashed_1.default
+            },
+            labelFont: 'Roboto',
+            labelSize: 13,
+            labelColor: {
+                color: 'rgba(0, 0, 0, 0.87)',
+                attribute: 'labelColor'
+            },
+            secondaryLabelColor: {
+                color: 'rgba(0, 0, 0, 0.54)',
+                attribute: 'secondaryLabelColor'
+            }
+        }, initialSettingsProp || {});
+    }, [initialSettingsProp]);
+    return (react_1.default.createElement(core_1.SigmaContainer, { graph: graphology_1.MultiGraph, style: { background: 'transparent' }, settings: initialSettings },
+        react_1.default.createElement(SigmaCustomRenderersContainer_1.SigmaCustomRenderersContainer, null,
+            react_1.default.createElement(SigmaGraphResizer_1.SigmaGraphResizer, null),
+            children)));
+};
+exports.SigmaGraphContainer = SigmaGraphContainer;

package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.d.ts

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

package/cjs/features/graph/SigmaGraphContainer/SigmaGraphContainer.test.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var core_1 = require("@react-sigma/core");
+var graphology_1 = require("graphology");
+var SigmaGraphContainer_1 = require("./SigmaGraphContainer");
+var SigmaCustomRenderersContainer_1 = require("../SigmaCustomRenderersContainer");
+var children = react_1.default.createElement("div", { className: "children" }, "children");
+var setUp = function () { return (0, enzyme_1.shallow)(react_1.default.createElement(SigmaGraphContainer_1.SigmaGraphContainer, null, children)); };
+describe('SigmaGraphContainer behavior', function () {
+    it('should render SigmaContainer with passed children', function () {
+        var component = setUp();
+        expect(component.find(core_1.SigmaContainer)).toHaveLength(1);
+        expect(component.find(core_1.SigmaContainer).prop('graph')).toBe(graphology_1.MultiGraph);
+        expect(component.find(core_1.SigmaContainer).find(SigmaCustomRenderersContainer_1.SigmaCustomRenderersContainer).find('.children')).toHaveLength(1);
+    });
+    it('should render SigmaContainer with initialSettings', function () {
+        var component = setUp();
+        expect(component.find(core_1.SigmaContainer)).toHaveLength(1);
+        expect(component.find(core_1.SigmaContainer).prop('settings')).not.toBeUndefined();
+    });
+});

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

@@ -0,0 +1 @@
+export { SigmaGraphContainer } from './SigmaGraphContainer';

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

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

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

@@ -0,0 +1 @@
+export declare const SigmaGraphResizer: () => JSX.Element;

package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SigmaGraphResizer = void 0;
+var react_1 = __importStar(require("react"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var core_1 = require("@react-sigma/core");
+var SigmaGraphResizer = function () {
+    var sigma = (0, core_1.useSigma)();
+    var onResize = (0, react_1.useCallback)(function () {
+        sigma.refresh();
+    }, [sigma]);
+    return react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: onResize });
+};
+exports.SigmaGraphResizer = SigmaGraphResizer;

package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.d.ts

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

package/cjs/features/graph/SigmaGraphResizer/SigmaGraphResizer.test.js

@@ -0,0 +1,37 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var core_1 = require("@react-sigma/core");
+var SigmaGraphResizer_1 = require("./SigmaGraphResizer");
+jest.mock('@react-sigma/core', function () { return (__assign(__assign({}, jest.requireActual('@react-sigma/core')), { useSigma: jest.fn().mockReturnValue({
+        refresh: jest.fn()
+    }) })); });
+var setUp = function () { return (0, enzyme_1.shallow)(react_1.default.createElement(SigmaGraphResizer_1.SigmaGraphResizer, null)); };
+describe('SigmaGraphResizer behavior', function () {
+    it('should render ReactResizeDetector', function () {
+        var component = setUp();
+        expect(component.find(react_resize_detector_1.default)).toHaveLength(1);
+    });
+    it('should refresh sigma instance on resize', function () {
+        var component = setUp();
+        expect((0, core_1.useSigma)().refresh).not.toHaveBeenCalled();
+        component.find(react_resize_detector_1.default).prop('onResize')();
+        expect((0, core_1.useSigma)().refresh).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export { SigmaGraphResizer } from './SigmaGraphResizer';

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

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

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

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    max: number;
+    min: number;
+};
+export declare const ZoomSlider: ({ className, max, min }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomSlider = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var core_1 = require("@react-sigma/core");
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
+var Slider_1 = __importStar(require("@mui/material/Slider"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var styles_1 = require("./styles");
+var percentsToRatio = function (percent) { return Math.pow(100 / percent, 2); };
+var ratioToPercents = function (ratio) { return 100 / Math.sqrt(ratio); };
+var ZoomSliderThumb = function (props) {
+    var children = props.children, other = __rest(props, ["children"]);
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(Slider_1.SliderThumb, __assign({}, other),
+        children,
+        react_1.default.createElement(Remove_1.default, { className: (0, classnames_1.default)(styles.icon, styles.thumbIcon) })));
+};
+var ZoomSlider = function (_a) {
+    var className = _a.className, max = _a.max, min = _a.min;
+    var styles = (0, styles_1.useStyles)();
+    var setSettings = (0, core_1.useSetSettings)();
+    var registerEvents = (0, core_1.useRegisterEvents)();
+    var camera = (0, core_1.useSigma)().getCamera();
+    var _b = (0, core_1.useCamera)({ factor: 1.2 }), zoomIn = _b.zoomIn, zoomOut = _b.zoomOut;
+    var _c = (0, react_1.useState)((0, ramda_1.clamp)(min, max, ratioToPercents(camera.getState().ratio))), value = _c[0], setValue = _c[1];
+    var maxCameraRatio = (0, react_1.useMemo)(function () { return (min > 0 ? percentsToRatio(min) : null); }, [min]);
+    var minCameraRatio = (0, react_1.useMemo)(function () { return (max > 0 ? percentsToRatio(max) : null); }, [max]);
+    (0, react_1.useEffect)(function () {
+        setSettings({
+            maxCameraRatio: maxCameraRatio,
+            minCameraRatio: minCameraRatio
+        });
+        return function () {
+            setSettings({
+                maxCameraRatio: null,
+                minCameraRatio: null
+            });
+        };
+    }, [setSettings, minCameraRatio, maxCameraRatio]);
+    (0, react_1.useEffect)(function () {
+        registerEvents({
+            updated: function (event) { return setValue(ratioToPercents(event.ratio)); }
+        });
+    }, [registerEvents]);
+    var handleChange = function (event, newValue) {
+        return camera.setState({ ratio: camera.getBoundedRatio(percentsToRatio(newValue)) });
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.container, className) },
+        react_1.default.createElement(IconButton_1.default, { className: styles.minButton, onClick: function () { return zoomOut(); }, size: "large" },
+            react_1.default.createElement(Remove_1.default, { className: styles.icon })),
+        react_1.default.createElement(Slider_1.default, { slots: {
+                thumb: ZoomSliderThumb
+            }, slotProps: {
+                thumb: {
+                    className: styles.thumb
+                }
+            }, classes: { root: styles.sliderRoot, rail: styles.rail }, track: false, value: value, min: min, max: max, onChange: handleChange }),
+        react_1.default.createElement(IconButton_1.default, { className: styles.maxButton, onClick: function () { return zoomIn(); }, size: "large" },
+            react_1.default.createElement(Add_1.default, { className: styles.icon }))));
+};
+exports.ZoomSlider = ZoomSlider;

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

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

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

@@ -0,0 +1,83 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var test_utils_1 = require("react-dom/test-utils");
+var core_1 = require("@react-sigma/core");
+var ZoomSlider_1 = require("./ZoomSlider");
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
+var Slider_1 = __importDefault(require("@mui/material/Slider"));
+jest.mock('@react-sigma/core', function () { return (__assign(__assign({}, jest.requireActual('@react-sigma/core')), { useCamera: jest.fn().mockReturnValue({
+        zoomOut: jest.fn(),
+        zoomIn: jest.fn()
+    }), useSigma: jest.fn().mockReturnValue({
+        getCamera: function () { return ({
+            setState: function () { },
+            getState: function () { return ({ ratio: 1 }); },
+            getBoundedRatio: jest.fn()
+        }); }
+    }), useSetSettings: jest.fn().mockReturnValue(jest.fn()), useRegisterEvents: jest.fn().mockReturnValue(jest.fn()) })); });
+describe('ZoomSlider tests', function () {
+    it('should render main parts', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        expect(component.find(IconButton_1.default)).toHaveLength(2);
+        expect(component.find(Add_1.default)).toHaveLength(1);
+        expect(component.find(Remove_1.default)).toHaveLength(1);
+        var slider = component.find(Slider_1.default);
+        expect(slider).toHaveLength(1);
+        expect(slider.props()).toEqual({
+            slots: { thumb: expect.any(Function) },
+            classes: { root: 'sliderRoot', rail: 'rail' },
+            slotProps: { thumb: { className: 'thumb' } },
+            track: false,
+            value: 100,
+            min: 30,
+            max: 300,
+            onChange: expect.any(Function)
+        });
+    });
+    it('should call registerEvents and setSettings', function () {
+        var setSettings = (0, core_1.useSetSettings)();
+        var registerEvents = (0, core_1.useRegisterEvents)();
+        (0, enzyme_1.mount)(react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: "testClass", min: 50, max: 200 }));
+        expect(setSettings).toHaveBeenCalledWith({
+            maxCameraRatio: 4,
+            minCameraRatio: 0.25
+        });
+        expect(registerEvents).toHaveBeenCalledWith({
+            updated: expect.any(Function)
+        });
+    });
+    it('should call zoomOut on min button click', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        var zoomOut = (0, core_1.useCamera)().zoomOut;
+        (0, test_utils_1.act)(function () {
+            component.find(IconButton_1.default).at(0).simulate('click');
+        });
+        expect(zoomOut).toHaveBeenCalled();
+    });
+    it('should call zoomIn on max button click', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ZoomSlider_1.ZoomSlider, { className: "testClass", min: 30, max: 300 }));
+        var zoomIn = (0, core_1.useCamera)().zoomIn;
+        (0, test_utils_1.act)(function () {
+            component.find(IconButton_1.default).at(1).simulate('click');
+        });
+        expect(zoomIn).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export { ZoomSlider } from './ZoomSlider';