@react-sigma/core
Version:
React Sigma
101 lines • 3.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SigmaContainer = void 0;
const tslib_1 = require("tslib");
const graphology_1 = tslib_1.__importDefault(require("graphology"));
const react_1 = tslib_1.__importStar(require("react"));
const sigma_1 = require("sigma");
const context_1 = require("../hooks/context");
const utils_1 = require("../utils");
/**
* The `SigmaContainer` component is responsible of create the Sigma instance, and provide it to its child components using a React Context that can be accessible via the hook {@link useSigma}.
*
* ```jsx
* <SigmaContainer id="sigma-graph">
* <MyCustomGraph />
* </SigmaContainer>
*```
*
* See {@link SigmaContainerProps} for the component's properties.
*
* @category Component
*/
const SigmaContainerComponent = ({ graph, id, className, style, settings = {}, children }, ref) => {
// Root HTML element
const rootRef = (0, react_1.useRef)(null);
// HTML element for the sigma instance
const containerRef = (0, react_1.useRef)(null);
// Common html props for the container
const props = { className: `react-sigma ${className ? className : ''}`, id, style };
// Sigma instance
const [sigma, setSigma] = (0, react_1.useState)(null);
// Sigma settings
const [sigmaSettings, setSigmaSettings] = (0, react_1.useState)(settings);
(0, react_1.useEffect)(() => {
setSigmaSettings((prev) => {
if (!(0, utils_1.isEqual)(prev, settings))
return settings;
return prev;
});
}, [settings]);
/**
* When graph or settings changed
* => create sigma
*/
(0, react_1.useEffect)(() => {
setSigma((prev) => {
let instance = null;
if (containerRef.current !== null) {
let sigGraph = new graphology_1.default();
if (graph) {
sigGraph = typeof graph === 'function' ? new graph() : graph;
}
let prevCameraState = null;
if (prev) {
prevCameraState = prev.getCamera().getState();
prev.kill();
}
instance = new sigma_1.Sigma(sigGraph, containerRef.current, sigmaSettings);
if (prevCameraState)
instance.getCamera().setState(prevCameraState);
}
return instance;
});
}, [containerRef, graph, sigmaSettings]);
/**
* Forward the sigma ref
*/
(0, react_1.useImperativeHandle)(ref, () => sigma, [sigma]);
/**
* Memoify the context
*/
const context = (0, react_1.useMemo)(() => {
return sigma && rootRef.current ? { sigma, container: rootRef.current } : null;
}, [sigma, rootRef]);
// When context is created we provide it to children
const contents = context !== null ? react_1.default.createElement(context_1.SigmaProvider, { value: context }, children) : null;
return (react_1.default.createElement("div", Object.assign({}, props, { ref: rootRef }),
react_1.default.createElement("div", { className: "sigma-container", ref: containerRef }),
contents));
};
/**
* Redefine forwardRef for generics
*/
function fixedForwardRef(render) {
return (0, react_1.forwardRef)(render);
}
/**
* The `SigmaContainer` component is responsible of create the Sigma instance, and provide it to its child components using a React Context that can be accessible via the hook {@link useSigma}.
*
* ```jsx
* <SigmaContainer id="sigma-graph">
* <MyCustomGraph />
* </SigmaContainer>
*```
*
* See {@link SigmaContainerProps} for the component's properties.
*
* @category Component
*/
exports.SigmaContainer = fixedForwardRef(SigmaContainerComponent);
//# sourceMappingURL=SigmaContainer.js.map