Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-sigma/core
Advanced tools
@react-sigma/core - npm Package Compare versions
Comparing version 3.4.2 to 4.0.0
| import React, { CSSProperties, RefObject } from "react"; | ||
| declare type FullScreenLabelKeys = "enter" | "exit"; | ||
| type FullScreenLabelKeys = "enter" | "exit"; | ||
| export interface FullScreenControlProps { | ||
@@ -4,0 +4,0 @@ id?: string; |
| import React, { CSSProperties } from "react"; | ||
| declare type SearchLabelKeys = "text" | "placeholder"; | ||
| type SearchLabelKeys = "text" | "placeholder"; | ||
| export interface SearchControlProps { | ||
@@ -4,0 +4,0 @@ id?: string; |
| import React, { CSSProperties } from "react"; | ||
| declare type ZoomLabelKeys = "zoomIn" | "zoomOut" | "reset"; | ||
| type ZoomLabelKeys = "zoomIn" | "zoomOut" | "reset"; | ||
| export interface ZoomControlProps { | ||
@@ -4,0 +4,0 @@ className?: string; |
@@ -1,9 +0,9 @@ | ||
| import React, { CSSProperties } from "react"; | ||
| import Graph from "graphology"; | ||
| import { GraphConstructor } from "graphology-types"; | ||
| import React, { CSSProperties, ReactElement } from "react"; | ||
| import { Sigma } from "sigma"; | ||
| import { Settings } from "sigma/settings"; | ||
| export interface SigmaContainerProps { | ||
| graph?: Graph | GraphConstructor; | ||
| settings?: Partial<Settings>; | ||
| import { GraphType } from "../types"; | ||
| import { Attributes } from "graphology-types"; | ||
| export interface SigmaContainerProps<N extends Attributes, E extends Attributes, G extends Attributes> { | ||
| graph?: GraphType<N, E, G>; | ||
| settings?: Partial<Settings<N, E, G>>; | ||
| id?: string; | ||
@@ -13,4 +13,4 @@ className?: string; | ||
| } | ||
| export declare const SigmaContainer: React.ForwardRefExoticComponent<SigmaContainerProps & { | ||
| export declare const SigmaContainer: <N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(props: SigmaContainerProps<N, E, G> & { | ||
| children?: React.ReactNode; | ||
| } & React.RefAttributes<Sigma<import("graphology-types").AbstractGraph<import("graphology-types").Attributes, import("graphology-types").Attributes, import("graphology-types").Attributes>>>>; | ||
| } & React.RefAttributes<Sigma<N, E, G> | null>) => ReactElement; |
@@ -6,3 +6,2 @@ "use strict"; | ||
| const react_1 = tslib_1.__importStar(require("react")); | ||
| const lodash_1 = require("lodash"); | ||
| const graphology_1 = tslib_1.__importDefault(require("graphology")); | ||
@@ -16,10 +15,10 @@ const sigma_1 = require("sigma"); | ||
| const [sigma, setSigma] = (0, react_1.useState)(null); | ||
| const sigmaSettings = (0, react_1.useRef)({}); | ||
| if (!(0, lodash_1.isEqual)(sigmaSettings.current, settings)) | ||
| sigmaSettings.current = settings || {}; | ||
| (0, react_1.useEffect)(() => { | ||
| let instance = null; | ||
| if (containerRef.current !== null) { | ||
| const sigGraph = graph ? (typeof graph === "function" ? new graph() : graph) : new graphology_1.default(); | ||
| instance = new sigma_1.Sigma(sigGraph, containerRef.current, Object.assign({ allowInvalidContainer: true }, sigmaSettings.current)); | ||
| let sigGraph = new graphology_1.default(); | ||
| if (graph) { | ||
| sigGraph = typeof graph === "function" ? new graph() : graph; | ||
| } | ||
| instance = new sigma_1.Sigma(sigGraph, containerRef.current, settings); | ||
| if (sigma) | ||
@@ -35,3 +34,3 @@ instance.getCamera().setState(sigma.getCamera().getState()); | ||
| }; | ||
| }, [containerRef, graph, sigmaSettings]); | ||
| }, [containerRef, graph, settings]); | ||
| (0, react_1.useImperativeHandle)(ref, () => sigma, [sigma]); | ||
@@ -44,3 +43,6 @@ const context = (0, react_1.useMemo)(() => (sigma && rootRef.current ? { sigma, container: rootRef.current } : null), [sigma, rootRef.current]); | ||
| }; | ||
| exports.SigmaContainer = (0, react_1.forwardRef)(SigmaContainerComponent); | ||
| function fixedForwardRef(render) { | ||
| return (0, react_1.forwardRef)(render); | ||
| } | ||
| exports.SigmaContainer = fixedForwardRef(SigmaContainerComponent); | ||
| //# sourceMappingURL=SigmaContainer.js.map |
| /// <reference types="react" /> | ||
| import Sigma from "sigma/sigma"; | ||
| export interface SigmaContextInterface { | ||
| sigma: Sigma; | ||
| import { Attributes } from "graphology-types"; | ||
| import Sigma from "sigma"; | ||
| export interface SigmaContextInterface<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes> { | ||
| sigma: Sigma<N, E, G>; | ||
| container: HTMLElement; | ||
| } | ||
| export declare const SigmaContext: import("react").Context<SigmaContextInterface | null>; | ||
| export declare const SigmaProvider: import("react").Provider<SigmaContextInterface | null>; | ||
| export declare function useSigmaContext(): SigmaContextInterface; | ||
| export declare const SigmaContext: import("react").Context<SigmaContextInterface<Attributes, Attributes, Attributes> | null>; | ||
| export declare const SigmaProvider: import("react").Provider<SigmaContextInterface<Attributes, Attributes, Attributes> | null>; | ||
| export declare function useSigmaContext<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(): SigmaContextInterface<N, E, G>; |
@@ -1,4 +0,4 @@ | ||
| import { AnimateOptions } from "sigma/utils/animate"; | ||
| import { AnimateOptions } from "sigma/utils"; | ||
| import { CameraState } from "sigma/types"; | ||
| declare type CameraOptions = Partial<AnimateOptions> & { | ||
| type CameraOptions = Partial<AnimateOptions> & { | ||
| factor?: number; | ||
@@ -5,0 +5,0 @@ }; |
| import Graph from "graphology"; | ||
| export declare function useLoadGraph(): (graph: Graph, clear?: boolean) => void; | ||
| import { Attributes } from "graphology-types"; | ||
| export declare function useLoadGraph<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(): (graph: Graph<N, E, G>, clear?: boolean) => void; |
| import { EventHandlers } from "../types"; | ||
| export declare function useRegisterEvents(): (eventHandlers: Partial<EventHandlers>) => void; | ||
| import { Attributes } from "graphology-types"; | ||
| export declare function useRegisterEvents<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(): (eventHandlers: Partial<EventHandlers>) => void; |
@@ -53,22 +53,2 @@ "use strict"; | ||
| const eventTypes = Object.keys(userEvents); | ||
| const edgeSettings = {}; | ||
| const reverseEdgeSettings = {}; | ||
| const sigmaSettings = sigma.getSettings(); | ||
| if (eventTypes.some((event) => ["clickEdge", "rightClickEdge", "doubleClickEdge", "downEdge"].includes(event)) && | ||
| sigmaSettings.enableEdgeClickEvents === false) { | ||
| edgeSettings["enableEdgeClickEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeClickEvents"] = false; | ||
| } | ||
| if (eventTypes.some((event) => ["enterEdge", "leaveEdge"].includes(event)) && | ||
| sigmaSettings.enableEdgeHoverEvents === false) { | ||
| edgeSettings["enableEdgeHoverEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeHoverEvents"] = false; | ||
| } | ||
| if (eventTypes.some((event) => ["wheelEdge"].includes(event)) && sigmaSettings.enableEdgeWheelEvents === false) { | ||
| edgeSettings["enableEdgeWheelEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeWheelEvents"] = false; | ||
| } | ||
| if (Object.keys(edgeSettings).length > 0) { | ||
| setSettings(edgeSettings); | ||
| } | ||
| eventTypes.forEach((event) => { | ||
@@ -90,5 +70,2 @@ const eventHandler = userEvents[event]; | ||
| return () => { | ||
| if (Object.keys(reverseEdgeSettings).length > 0) { | ||
| setSettings(reverseEdgeSettings); | ||
| } | ||
| if (sigma) { | ||
@@ -95,0 +72,0 @@ eventTypes.forEach((event) => { |
| import { Settings } from "sigma/settings"; | ||
| export declare function useSetSettings(): (newSettings: Partial<Settings>) => void; | ||
| import { Attributes } from "graphology-types"; | ||
| export declare function useSetSettings<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(): (newSettings: Partial<Settings<N, E, G>>) => void; |
@@ -14,3 +14,3 @@ "use strict"; | ||
| const prevSettings = {}; | ||
| Object.keys(settings).forEach(key => { | ||
| Object.keys(settings).forEach((key) => { | ||
| prevSettings[key] = settings[key]; | ||
@@ -21,3 +21,3 @@ sigma.setSetting(key, settings[key]); | ||
| if (sigma && container && container.offsetWidth > 0 && container.offsetHeight > 0) { | ||
| Object.keys(prevSettings).forEach(key => { | ||
| Object.keys(prevSettings).forEach((key) => { | ||
| sigma.setSetting(key, prevSettings[key]); | ||
@@ -24,0 +24,0 @@ }); |
@@ -1,2 +0,3 @@ | ||
| import Sigma from "sigma/sigma"; | ||
| export declare function useSigma(): Sigma; | ||
| import Sigma from "sigma"; | ||
| import { Attributes } from "graphology-types"; | ||
| export declare function useSigma<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>(): Sigma<N, E, G>; |
@@ -1,2 +0,2 @@ | ||
| import*as e from"react";import t,{createContext as n,useContext as a,useState as r,useEffect as s,useCallback as c,useRef as l,forwardRef as o,useImperativeHandle as i,useMemo as d}from"react";import{isEqual as u}from"lodash";import g from"graphology";import{Sigma as m}from"sigma";const h=n(null),v=h.Provider;function f(){const e=a(h);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function p(){return f().sigma}function b(){const{sigma:e,container:t}=f(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a={};return Object.keys(n).forEach((t=>{a[t]=n[t],e.setSetting(t,n[t])})),()=>{e&&t&&t.offsetWidth>0&&t.offsetHeight>0&&Object.keys(a).forEach((t=>{e.setSetting(t,a[t])}))}}),[e,n,t]),a}const E=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","beforeRender","afterRender","kill"],w=["click","rightClick","mouseup","mousedown","mousemove","mousemovebody","doubleClick","wheel"],C=["touchup","touchdown","touchmove"],O=["updated"];function _(){const e=p(),t=b(),[n,a]=r({});return s((()=>{if(!e||!n)return;const a=n,r=Object.keys(a),s={},c={},l=e.getSettings();return r.some((e=>["clickEdge","rightClickEdge","doubleClickEdge","downEdge"].includes(e)))&&!1===l.enableEdgeClickEvents&&(s.enableEdgeClickEvents=!0,c.enableEdgeClickEvents=!1),r.some((e=>["enterEdge","leaveEdge"].includes(e)))&&!1===l.enableEdgeHoverEvents&&(s.enableEdgeHoverEvents=!0,c.enableEdgeHoverEvents=!1),r.some((e=>["wheelEdge"].includes(e)))&&!1===l.enableEdgeWheelEvents&&(s.enableEdgeWheelEvents=!0,c.enableEdgeWheelEvents=!1),Object.keys(s).length>0&&t(s),r.forEach((t=>{const n=a[t];E.find((e=>e===t))&&e.on(t,n),w.find((e=>e===t))&&e.getMouseCaptor().on(t,n),C.find((e=>e===t))&&e.getTouchCaptor().on(t,n),O.find((e=>e===t))&&e.getCamera().on(t,n)})),()=>{Object.keys(c).length>0&&t(c),e&&r.forEach((t=>{const n=a[t];E.find((e=>e===t))&&e.off(t,n),w.find((e=>e===t))&&e.getMouseCaptor().off(t,n),C.find((e=>e===t))&&e.getTouchCaptor().off(t,n),O.find((e=>e===t))&&e.getCamera().off(t,n)}))}}),[e,n,t]),a}function y(){const e=p();return c(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])}function j(e){const t=p(),n=l();u(n.current,e)||(n.current=e);const a=c((e=>{t.getCamera().animatedZoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),r=c((e=>{t.getCamera().animatedUnzoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),s=c((e=>{t.getCamera().animatedReset(Object.assign(Object.assign({},n.current),e))}),[t,n]),o=c(((e,a)=>{t.getCamera().animate(e,Object.assign(Object.assign({},n.current),a))}),[t,n]),i=c(((e,a)=>{const r=t.getNodeDisplayData(e);r?t.getCamera().animate(r,Object.assign(Object.assign({},n.current),a)):console.log(`Node ${e} not found`)}),[t,n]);return{zoomIn:a,zoomOut:r,reset:s,goto:o,gotoNode:i}}function x(e){const t=f(),[n,a]=r(!1),[l,o]=r(e||t.container),i=()=>a((e=>!e));return s((()=>(document.addEventListener("fullscreenchange",i),()=>document.removeEventListener("fullscreenchange",i))),[i]),s((()=>{o(e||t.container)}),[e,t.container]),{toggle:c((()=>{var e;e=l,document.fullscreenElement!==e?e.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[l]),isFullScreen:n}}const k=o((({graph:e,id:n,className:a,style:c,settings:o,children:h},f)=>{const p=l(null),b=l(null),E={className:`react-sigma ${a||""}`,id:n,style:c},[w,C]=r(null),O=l({});u(O.current,o)||(O.current=o||{}),s((()=>{let t=null;if(null!==b.current){const n=e?"function"==typeof e?new e:e:new g;t=new m(n,b.current,Object.assign({allowInvalidContainer:!0},O.current)),w&&t.getCamera().setState(w.getCamera().getState())}return C(t),()=>{t&&t.kill(),C(null)}}),[b,e,O]),i(f,(()=>w),[w]);const _=d((()=>w&&p.current?{sigma:w,container:p.current}:null),[w,p.current]),y=null!==_?t.createElement(v,{value:_},h):null;return t.createElement("div",Object.assign({},E,{ref:p}),t.createElement("div",{className:"sigma-container",ref:b}),y)})),S=({id:e,className:n,style:a,children:r,position:s="bottom-left"})=>{const c={className:`react-sigma-controls ${n||""} ${s}`,id:e,style:a};return t.createElement("div",Object.assign({},c),r)};var N;function z(){return z=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},z.apply(this,arguments)}var H,M=function(t){return e.createElement("svg",z({"aria-hidden":"true","data-prefix":"fas","data-icon":"plus",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),N||(N=e.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function $(){return $=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},$.apply(this,arguments)}var F,V=function(t){return e.createElement("svg",$({"aria-hidden":"true","data-prefix":"fas","data-icon":"minus",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),H||(H=e.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function G(){return G=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},G.apply(this,arguments)}var P=function(t){return e.createElement("svg",G({"aria-hidden":"true","data-prefix":"far","data-icon":"dot-circle",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"1em",height:"1em"},t),F||(F=e.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"})))};const I=({className:e,style:n,animationDuration:a=200,children:r,labels:s={}})=>{const{zoomIn:c,zoomOut:l,reset:o}=j({duration:a,factor:1.5}),i={style:n,className:`react-sigma-control ${e||""}`};return t.createElement(t.Fragment,null,t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>c(),title:s.zoomIn||"Zoom In"},r?r[0]:t.createElement(M,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>l(),title:s.zoomOut||"Zoom Out"},r?r[1]:t.createElement(V,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>o(),title:s.reset||"See whole graph"},r?r[2]:t.createElement(P,{style:{width:"1em"}}))))};var R;function B(){return B=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},B.apply(this,arguments)}var L,W=function(t){return e.createElement("svg",B({"aria-hidden":"true","data-prefix":"fas","data-icon":"expand",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),R||(R=e.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"})))};function Z(){return Z=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},Z.apply(this,arguments)}var D=function(t){return e.createElement("svg",Z({"aria-hidden":"true","data-prefix":"fas","data-icon":"compress",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),L||(L=e.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"})))};const q=({id:e,className:n,style:a,container:r,children:s,labels:c={}})=>{const{isFullScreen:l,toggle:o}=x(null==r?void 0:r.current),i={className:`react-sigma-control ${n||""}`,id:e,style:a};return document.fullscreenEnabled?t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:o,title:l?c.exit||"Exit fullscreen":c.enter||"Enter fullscreen"},s&&!l&&s[0],s&&l&&s[1],!s&&!l&&t.createElement(W,{style:{width:"1em"}}),!s&&l&&t.createElement(D,{style:{width:"1em"}}))):null},A=({id:e,className:n,style:a,labels:c={}})=>{const l=p(),o=_(),{gotoNode:i}=j(),[d,u]=r(""),[g,m]=r([]),[h,v]=r(null),[f,b]=r("");s((()=>{b(`search-${Math.random().toString(36).slice(2)}`)}),[]),s((()=>{const e=[];!h&&d.length>1&&l.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(d.toLowerCase())&&e.push({id:t,label:n.label})})),m(e)}),[d]),s((()=>{o({clickStage:()=>{v(null),u("")}})}),[o]),s((()=>{if(h)return l.getGraph().setNodeAttribute(h,"highlighted",!0),i(h),()=>{l.getGraph().setNodeAttribute(h,"highlighted",!1)}}),[h]);const E={className:`react-sigma-search ${n||""}`,id:e,style:a};return t.createElement("div",Object.assign({},E),t.createElement("label",{htmlFor:f,style:{display:"none"}},c.text||"Search a node"),t.createElement("input",{id:f,type:"text",placeholder:c.placeholder||"Search...",list:`${f}-datalist`,value:d,onChange:e=>{const t=e.target.value,n=g.find((e=>e.label===t));n?(u(n.label),m([]),v(n.id)):(v(null),u(t))}}),t.createElement("datalist",{id:`${f}-datalist`},g.map((e=>t.createElement("option",{key:e.id,value:e.label},e.label)))))};export{S as ControlsContainer,q as FullScreenControl,A as SearchControl,k as SigmaContainer,h as SigmaContext,v as SigmaProvider,I as ZoomControl,j as useCamera,x as useFullScreen,y as useLoadGraph,_ as useRegisterEvents,b as useSetSettings,p as useSigma,f as useSigmaContext}; | ||
| import*as e from"react";import t,{createContext as n,useContext as r,useState as a,useEffect as c,useCallback as o,useRef as l,forwardRef as s,useImperativeHandle as i,useMemo as u}from"react";import{isEqual as d}from"lodash";import m from"graphology";import{Sigma as g}from"sigma";const h=n(null),f=h.Provider;function v(){const e=r(h);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function p(){return v().sigma}function b(){const{sigma:e,container:t}=v(),[n,r]=a({});return c((()=>{if(!e||!n)return;const r={};return Object.keys(n).forEach((t=>{r[t]=n[t],e.setSetting(t,n[t])})),()=>{e&&t&&t.offsetWidth>0&&t.offsetHeight>0&&Object.keys(r).forEach((t=>{e.setSetting(t,r[t])}))}}),[e,n,t]),r}const w=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","beforeRender","afterRender","kill"],E=["click","rightClick","mouseup","mousedown","mousemove","mousemovebody","doubleClick","wheel"],_=["touchup","touchdown","touchmove"],O=["updated"];function y(){const e=p(),t=b(),[n,r]=a({});return c((()=>{if(!e||!n)return;const t=n,r=Object.keys(t);return r.forEach((n=>{const r=t[n];w.find((e=>e===n))&&e.on(n,r),E.find((e=>e===n))&&e.getMouseCaptor().on(n,r),_.find((e=>e===n))&&e.getTouchCaptor().on(n,r),O.find((e=>e===n))&&e.getCamera().on(n,r)})),()=>{e&&r.forEach((n=>{const r=t[n];w.find((e=>e===n))&&e.off(n,r),E.find((e=>e===n))&&e.getMouseCaptor().off(n,r),_.find((e=>e===n))&&e.getTouchCaptor().off(n,r),O.find((e=>e===n))&&e.getCamera().off(n,r)}))}}),[e,n,t]),r}function C(){const e=p();return o(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])}function j(e){const t=p(),n=l();d(n.current,e)||(n.current=e);const r=o((e=>{t.getCamera().animatedZoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),a=o((e=>{t.getCamera().animatedUnzoom(Object.assign(Object.assign({},n.current),e))}),[t,n]),c=o((e=>{t.getCamera().animatedReset(Object.assign(Object.assign({},n.current),e))}),[t,n]),s=o(((e,r)=>{t.getCamera().animate(e,Object.assign(Object.assign({},n.current),r))}),[t,n]),i=o(((e,r)=>{const a=t.getNodeDisplayData(e);a?t.getCamera().animate(a,Object.assign(Object.assign({},n.current),r)):console.log(`Node ${e} not found`)}),[t,n]);return{zoomIn:r,zoomOut:a,reset:c,goto:s,gotoNode:i}}function N(e){const t=v(),[n,r]=a(!1),[l,s]=a(e||t.container),i=()=>r((e=>!e));c((()=>(document.addEventListener("fullscreenchange",i),()=>document.removeEventListener("fullscreenchange",i))),[i]),c((()=>{s(e||t.container)}),[e,t.container]);return{toggle:o((()=>{var e;e=l,document.fullscreenElement!==e?e.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[l]),isFullScreen:n}}const x=s((({graph:e,id:n,className:r,style:o,settings:s,children:d},h)=>{const v=l(null),p=l(null),b={className:`react-sigma ${r||""}`,id:n,style:o},[w,E]=a(null);c((()=>{let t=null;if(null!==p.current){let n=new m;e&&(n="function"==typeof e?new e:e),t=new g(n,p.current,s),w&&t.getCamera().setState(w.getCamera().getState())}return E(t),()=>{t&&t.kill(),E(null)}}),[p,e,s]),i(h,(()=>w),[w]);const _=u((()=>w&&v.current?{sigma:w,container:v.current}:null),[w,v.current]),O=null!==_?t.createElement(f,{value:_},d):null;return t.createElement("div",Object.assign({},b,{ref:v}),t.createElement("div",{className:"sigma-container",ref:p}),O)}));const k=({id:e,className:n,style:r,children:a,position:c="bottom-left"})=>{const o={className:`react-sigma-controls ${n||""} ${c}`,id:e,style:r};return t.createElement("div",Object.assign({},o),a)};var S;function H(){return H=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},H.apply(this,arguments)}var M,$=function(t){return e.createElement("svg",H({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14","data-icon":"plus","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),S||(S=e.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32"})))};function V(){return V=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},V.apply(this,arguments)}var z,F=function(t){return e.createElement("svg",V({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14","data-icon":"minus","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),M||(M=e.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32"})))};function G(){return G=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},G.apply(this,arguments)}var P=function(t){return e.createElement("svg",G({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16","data-icon":"dot-circle","data-prefix":"far",viewBox:"0 0 512 512",width:"1em",height:"1em"},t),z||(z=e.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8m0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80"})))};const B=({className:e,style:n,animationDuration:r=200,children:a,labels:c={}})=>{const{zoomIn:o,zoomOut:l,reset:s}=j({duration:r,factor:1.5}),i={style:n,className:`react-sigma-control ${e||""}`};return t.createElement(t.Fragment,null,t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>o(),title:c.zoomIn||"Zoom In"},a?a[0]:t.createElement($,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>l(),title:c.zoomOut||"Zoom Out"},a?a[1]:t.createElement(F,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>s(),title:c.reset||"See whole graph"},a?a[2]:t.createElement(P,{style:{width:"1em"}}))))};var I;function L(){return L=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},L.apply(this,arguments)}var D,R=function(t){return e.createElement("svg",L({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14","data-icon":"expand","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),I||(I=e.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12M288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12m148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12M160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12"})))};function Z(){return Z=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Z.apply(this,arguments)}var A=function(t){return e.createElement("svg",Z({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14","data-icon":"compress","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},t),D||(D=e.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24m0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12m192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12"})))};const T=({id:e,className:n,style:r,container:a,children:c,labels:o={}})=>{const{isFullScreen:l,toggle:s}=N(null==a?void 0:a.current),i={className:`react-sigma-control ${n||""}`,id:e,style:r};return document.fullscreenEnabled?t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:s,title:l?o.exit||"Exit fullscreen":o.enter||"Enter fullscreen"},c&&!l&&c[0],c&&l&&c[1],!c&&!l&&t.createElement(R,{style:{width:"1em"}}),!c&&l&&t.createElement(A,{style:{width:"1em"}}))):null};const q=({id:e,className:n,style:r,labels:o={}})=>{const l=p(),s=y(),{gotoNode:i}=j(),[u,d]=a(""),[m,g]=a([]),[h,f]=a(null),[v,b]=a("");c((()=>{b(`search-${Math.random().toString(36).slice(2)}`)}),[]),c((()=>{const e=[];!h&&u.length>1&&l.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(u.toLowerCase())&&e.push({id:t,label:n.label})})),g(e)}),[u]),c((()=>{s({clickStage:()=>{f(null),d("")}})}),[s]),c((()=>{if(h)return l.getGraph().setNodeAttribute(h,"highlighted",!0),i(h),()=>{l.getGraph().setNodeAttribute(h,"highlighted",!1)}}),[h]);const w={className:`react-sigma-search ${n||""}`,id:e,style:r};return t.createElement("div",Object.assign({},w),t.createElement("label",{htmlFor:v,style:{display:"none"}},o.text||"Search a node"),t.createElement("input",{id:v,type:"text",placeholder:o.placeholder||"Search...",list:`${v}-datalist`,value:u,onChange:e=>{const t=e.target.value,n=m.find((e=>e.label===t));n?(d(n.label),g([]),f(n.id)):(f(null),d(t))}}),t.createElement("datalist",{id:`${v}-datalist`},m.map((e=>t.createElement("option",{key:e.id,value:e.label},e.label)))))};export{k as ControlsContainer,T as FullScreenControl,q as SearchControl,x as SigmaContainer,h as SigmaContext,f as SigmaProvider,B as ZoomControl,j as useCamera,N as useFullScreen,C as useLoadGraph,y as useRegisterEvents,b as useSetSettings,p as useSigma,v as useSigmaContext}; | ||
| //# sourceMappingURL=react-sigma_core.esm.min.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("lodash"),require("graphology"),require("sigma")):"function"==typeof define&&define.amd?define(["exports","react","lodash","graphology","sigma"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@react-sigma/core"]={},e.React,e.lodash,e.Graph,e.sigma)}(this,(function(e,t,n,a,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t),s=function(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}(t),o=l(a);const i=t.createContext(null),u=i.Provider;function d(){const e=t.useContext(i);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function g(){return d().sigma}function f(){const{sigma:e,container:n}=d(),[a,r]=t.useState({});return t.useEffect((()=>{if(!e||!a)return;const t={};return Object.keys(a).forEach((n=>{t[n]=a[n],e.setSetting(n,a[n])})),()=>{e&&n&&n.offsetWidth>0&&n.offsetHeight>0&&Object.keys(t).forEach((n=>{e.setSetting(n,t[n])}))}}),[e,a,n]),r}const m=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","beforeRender","afterRender","kill"],h=["click","rightClick","mouseup","mousedown","mousemove","mousemovebody","doubleClick","wheel"],v=["touchup","touchdown","touchmove"],p=["updated"];function b(){const e=g(),n=f(),[a,r]=t.useState({});return t.useEffect((()=>{if(!e||!a)return;const t=a,r=Object.keys(t),l={},c={},s=e.getSettings();return r.some((e=>["clickEdge","rightClickEdge","doubleClickEdge","downEdge"].includes(e)))&&!1===s.enableEdgeClickEvents&&(l.enableEdgeClickEvents=!0,c.enableEdgeClickEvents=!1),r.some((e=>["enterEdge","leaveEdge"].includes(e)))&&!1===s.enableEdgeHoverEvents&&(l.enableEdgeHoverEvents=!0,c.enableEdgeHoverEvents=!1),r.some((e=>["wheelEdge"].includes(e)))&&!1===s.enableEdgeWheelEvents&&(l.enableEdgeWheelEvents=!0,c.enableEdgeWheelEvents=!1),Object.keys(l).length>0&&n(l),r.forEach((n=>{const a=t[n];m.find((e=>e===n))&&e.on(n,a),h.find((e=>e===n))&&e.getMouseCaptor().on(n,a),v.find((e=>e===n))&&e.getTouchCaptor().on(n,a),p.find((e=>e===n))&&e.getCamera().on(n,a)})),()=>{Object.keys(c).length>0&&n(c),e&&r.forEach((n=>{const a=t[n];m.find((e=>e===n))&&e.off(n,a),h.find((e=>e===n))&&e.getMouseCaptor().off(n,a),v.find((e=>e===n))&&e.getTouchCaptor().off(n,a),p.find((e=>e===n))&&e.getCamera().off(n,a)}))}}),[e,a,n]),r}function E(e){const a=g(),r=t.useRef();n.isEqual(r.current,e)||(r.current=e);const l=t.useCallback((e=>{a.getCamera().animatedZoom(Object.assign(Object.assign({},r.current),e))}),[a,r]),c=t.useCallback((e=>{a.getCamera().animatedUnzoom(Object.assign(Object.assign({},r.current),e))}),[a,r]),s=t.useCallback((e=>{a.getCamera().animatedReset(Object.assign(Object.assign({},r.current),e))}),[a,r]),o=t.useCallback(((e,t)=>{a.getCamera().animate(e,Object.assign(Object.assign({},r.current),t))}),[a,r]),i=t.useCallback(((e,t)=>{const n=a.getNodeDisplayData(e);n?a.getCamera().animate(n,Object.assign(Object.assign({},r.current),t)):console.log(`Node ${e} not found`)}),[a,r]);return{zoomIn:l,zoomOut:c,reset:s,goto:o,gotoNode:i}}function w(e){const n=d(),[a,r]=t.useState(!1),[l,c]=t.useState(e||n.container),s=()=>r((e=>!e));return t.useEffect((()=>(document.addEventListener("fullscreenchange",s),()=>document.removeEventListener("fullscreenchange",s))),[s]),t.useEffect((()=>{c(e||n.container)}),[e,n.container]),{toggle:t.useCallback((()=>{var e;e=l,document.fullscreenElement!==e?e.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[l]),isFullScreen:a}}const C=t.forwardRef((({graph:e,id:a,className:l,style:s,settings:i,children:d},g)=>{const f=t.useRef(null),m=t.useRef(null),h={className:`react-sigma ${l||""}`,id:a,style:s},[v,p]=t.useState(null),b=t.useRef({});n.isEqual(b.current,i)||(b.current=i||{}),t.useEffect((()=>{let t=null;if(null!==m.current){const n=e?"function"==typeof e?new e:e:new o.default;t=new r.Sigma(n,m.current,Object.assign({allowInvalidContainer:!0},b.current)),v&&t.getCamera().setState(v.getCamera().getState())}return p(t),()=>{t&&t.kill(),p(null)}}),[m,e,b]),t.useImperativeHandle(g,(()=>v),[v]);const E=t.useMemo((()=>v&&f.current?{sigma:v,container:f.current}:null),[v,f.current]),w=null!==E?c.default.createElement(u,{value:E},d):null;return c.default.createElement("div",Object.assign({},h,{ref:f}),c.default.createElement("div",{className:"sigma-container",ref:m}),w)}));var y;function O(){return O=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},O.apply(this,arguments)}var _,j=function(e){return s.createElement("svg",O({"aria-hidden":"true","data-prefix":"fas","data-icon":"plus",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),y||(y=s.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},S.apply(this,arguments)}var k,x=function(e){return s.createElement("svg",S({"aria-hidden":"true","data-prefix":"fas","data-icon":"minus",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),_||(_=s.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"})))};function N(){return N=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},N.apply(this,arguments)}var z,H=function(e){return s.createElement("svg",N({"aria-hidden":"true","data-prefix":"far","data-icon":"dot-circle",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"1em",height:"1em"},e),k||(k=s.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"})))};function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},M.apply(this,arguments)}var P,R=function(e){return s.createElement("svg",M({"aria-hidden":"true","data-prefix":"fas","data-icon":"expand",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),z||(z=s.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"})))};function $(){return $=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},$.apply(this,arguments)}var F=function(e){return s.createElement("svg",$({"aria-hidden":"true","data-prefix":"fas","data-icon":"compress",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),P||(P=s.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"})))};e.ControlsContainer=({id:e,className:t,style:n,children:a,position:r="bottom-left"})=>{const l={className:`react-sigma-controls ${t||""} ${r}`,id:e,style:n};return c.default.createElement("div",Object.assign({},l),a)},e.FullScreenControl=({id:e,className:t,style:n,container:a,children:r,labels:l={}})=>{const{isFullScreen:s,toggle:o}=w(null==a?void 0:a.current),i={className:`react-sigma-control ${t||""}`,id:e,style:n};return document.fullscreenEnabled?c.default.createElement("div",Object.assign({},i),c.default.createElement("button",{onClick:o,title:s?l.exit||"Exit fullscreen":l.enter||"Enter fullscreen"},r&&!s&&r[0],r&&s&&r[1],!r&&!s&&c.default.createElement(R,{style:{width:"1em"}}),!r&&s&&c.default.createElement(F,{style:{width:"1em"}}))):null},e.SearchControl=({id:e,className:n,style:a,labels:r={}})=>{const l=g(),s=b(),{gotoNode:o}=E(),[i,u]=t.useState(""),[d,f]=t.useState([]),[m,h]=t.useState(null),[v,p]=t.useState("");t.useEffect((()=>{p(`search-${Math.random().toString(36).slice(2)}`)}),[]),t.useEffect((()=>{const e=[];!m&&i.length>1&&l.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(i.toLowerCase())&&e.push({id:t,label:n.label})})),f(e)}),[i]),t.useEffect((()=>{s({clickStage:()=>{h(null),u("")}})}),[s]),t.useEffect((()=>{if(m)return l.getGraph().setNodeAttribute(m,"highlighted",!0),o(m),()=>{l.getGraph().setNodeAttribute(m,"highlighted",!1)}}),[m]);const w={className:`react-sigma-search ${n||""}`,id:e,style:a};return c.default.createElement("div",Object.assign({},w),c.default.createElement("label",{htmlFor:v,style:{display:"none"}},r.text||"Search a node"),c.default.createElement("input",{id:v,type:"text",placeholder:r.placeholder||"Search...",list:`${v}-datalist`,value:i,onChange:e=>{const t=e.target.value,n=d.find((e=>e.label===t));n?(u(n.label),f([]),h(n.id)):(h(null),u(t))}}),c.default.createElement("datalist",{id:`${v}-datalist`},d.map((e=>c.default.createElement("option",{key:e.id,value:e.label},e.label)))))},e.SigmaContainer=C,e.SigmaContext=i,e.SigmaProvider=u,e.ZoomControl=({className:e,style:t,animationDuration:n=200,children:a,labels:r={}})=>{const{zoomIn:l,zoomOut:s,reset:o}=E({duration:n,factor:1.5}),i={style:t,className:`react-sigma-control ${e||""}`};return c.default.createElement(c.default.Fragment,null,c.default.createElement("div",Object.assign({},i),c.default.createElement("button",{onClick:()=>l(),title:r.zoomIn||"Zoom In"},a?a[0]:c.default.createElement(j,{style:{width:"1em"}}))),c.default.createElement("div",Object.assign({},i),c.default.createElement("button",{onClick:()=>s(),title:r.zoomOut||"Zoom Out"},a?a[1]:c.default.createElement(x,{style:{width:"1em"}}))),c.default.createElement("div",Object.assign({},i),c.default.createElement("button",{onClick:()=>o(),title:r.reset||"See whole graph"},a?a[2]:c.default.createElement(H,{style:{width:"1em"}}))))},e.useCamera=E,e.useFullScreen=w,e.useLoadGraph=function(){const e=g();return t.useCallback(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])},e.useRegisterEvents=b,e.useSetSettings=f,e.useSigma=g,e.useSigmaContext=d,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("lodash"),require("graphology"),require("sigma")):"function"==typeof define&&define.amd?define(["exports","react","lodash","graphology","sigma"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@react-sigma/core"]={},e.React,e.lodash,e.Graph,e.sigma)}(this,(function(e,t,n,a,r){"use strict";function c(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(t);const l=t.createContext(null),o=l.Provider;function i(){const e=t.useContext(l);if(null==e)throw new Error("No context provided: useSigmaContext() can only be used in a descendant of <SigmaContainer>");return e}function u(){return i().sigma}function d(){const{sigma:e,container:n}=i(),[a,r]=t.useState({});return t.useEffect((()=>{if(!e||!a)return;const t={};return Object.keys(a).forEach((n=>{t[n]=a[n],e.setSetting(n,a[n])})),()=>{e&&n&&n.offsetWidth>0&&n.offsetHeight>0&&Object.keys(t).forEach((n=>{e.setSetting(n,t[n])}))}}),[e,a,n]),r}const g=["clickNode","rightClickNode","downNode","enterNode","leaveNode","doubleClickNode","wheelNode","clickEdge","rightClickEdge","downEdge","enterEdge","leaveEdge","doubleClickEdge","wheelEdge","clickStage","rightClickStage","downStage","doubleClickStage","wheelStage","beforeRender","afterRender","kill"],m=["click","rightClick","mouseup","mousedown","mousemove","mousemovebody","doubleClick","wheel"],f=["touchup","touchdown","touchmove"],h=["updated"];function v(){const e=u(),n=d(),[a,r]=t.useState({});return t.useEffect((()=>{if(!e||!a)return;const t=a,n=Object.keys(t);return n.forEach((n=>{const a=t[n];g.find((e=>e===n))&&e.on(n,a),m.find((e=>e===n))&&e.getMouseCaptor().on(n,a),f.find((e=>e===n))&&e.getTouchCaptor().on(n,a),h.find((e=>e===n))&&e.getCamera().on(n,a)})),()=>{e&&n.forEach((n=>{const a=t[n];g.find((e=>e===n))&&e.off(n,a),m.find((e=>e===n))&&e.getMouseCaptor().off(n,a),f.find((e=>e===n))&&e.getTouchCaptor().off(n,a),h.find((e=>e===n))&&e.getCamera().off(n,a)}))}}),[e,a,n]),r}function p(e){const a=u(),r=t.useRef();n.isEqual(r.current,e)||(r.current=e);const c=t.useCallback((e=>{a.getCamera().animatedZoom(Object.assign(Object.assign({},r.current),e))}),[a,r]),s=t.useCallback((e=>{a.getCamera().animatedUnzoom(Object.assign(Object.assign({},r.current),e))}),[a,r]),l=t.useCallback((e=>{a.getCamera().animatedReset(Object.assign(Object.assign({},r.current),e))}),[a,r]),o=t.useCallback(((e,t)=>{a.getCamera().animate(e,Object.assign(Object.assign({},r.current),t))}),[a,r]),i=t.useCallback(((e,t)=>{const n=a.getNodeDisplayData(e);n?a.getCamera().animate(n,Object.assign(Object.assign({},r.current),t)):console.log(`Node ${e} not found`)}),[a,r]);return{zoomIn:c,zoomOut:s,reset:l,goto:o,gotoNode:i}}function b(e){const n=i(),[a,r]=t.useState(!1),[c,s]=t.useState(e||n.container),l=()=>r((e=>!e));t.useEffect((()=>(document.addEventListener("fullscreenchange",l),()=>document.removeEventListener("fullscreenchange",l))),[l]),t.useEffect((()=>{s(e||n.container)}),[e,n.container]);return{toggle:t.useCallback((()=>{var e;e=c,document.fullscreenElement!==e?e.requestFullscreen():document.exitFullscreen&&document.exitFullscreen()}),[c]),isFullScreen:a}}const w=(E=({graph:e,id:n,className:c,style:s,settings:l,children:i},u)=>{const d=t.useRef(null),g=t.useRef(null),m={className:`react-sigma ${c||""}`,id:n,style:s},[f,h]=t.useState(null);t.useEffect((()=>{let t=null;if(null!==g.current){let n=new a;e&&(n="function"==typeof e?new e:e),t=new r.Sigma(n,g.current,l),f&&t.getCamera().setState(f.getCamera().getState())}return h(t),()=>{t&&t.kill(),h(null)}}),[g,e,l]),t.useImperativeHandle(u,(()=>f),[f]);const v=t.useMemo((()=>f&&d.current?{sigma:f,container:d.current}:null),[f,d.current]),p=null!==v?t.createElement(o,{value:v},i):null;return t.createElement("div",Object.assign({},m,{ref:d}),t.createElement("div",{className:"sigma-container",ref:g}),p)},t.forwardRef(E));var E;var C;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},y.apply(this,arguments)}var O,_=function(e){return s.createElement("svg",y({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"plus-solid_svg__svg-inline--fa plus-solid_svg__fa-plus plus-solid_svg__fa-w-14","data-icon":"plus","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),C||(C=s.createElement("path",{fill:"currentColor",d:"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32"})))};function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},j.apply(this,arguments)}var S,x=function(e){return s.createElement("svg",j({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"minus-solid_svg__svg-inline--fa minus-solid_svg__fa-minus minus-solid_svg__fa-w-14","data-icon":"minus","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),O||(O=s.createElement("path",{fill:"currentColor",d:"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32"})))};function k(){return k=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},k.apply(this,arguments)}var N=function(e){return s.createElement("svg",k({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"dot-circle-regular_svg__svg-inline--fa dot-circle-regular_svg__fa-dot-circle dot-circle-regular_svg__fa-w-16","data-icon":"dot-circle","data-prefix":"far",viewBox:"0 0 512 512",width:"1em",height:"1em"},e),S||(S=s.createElement("path",{fill:"currentColor",d:"M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8m0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80"})))};var H;function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},M.apply(this,arguments)}var $,F=function(e){return s.createElement("svg",M({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"expand-solid_svg__svg-inline--fa expand-solid_svg__fa-expand expand-solid_svg__fa-w-14","data-icon":"expand","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),H||(H=s.createElement("path",{fill:"currentColor",d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12M288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12m148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12M160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12"})))};function P(){return P=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},P.apply(this,arguments)}var R=function(e){return s.createElement("svg",P({xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"compress-solid_svg__svg-inline--fa compress-solid_svg__fa-compress compress-solid_svg__fa-w-14","data-icon":"compress","data-prefix":"fas",viewBox:"0 0 448 512",width:"1em",height:"1em"},e),$||($=s.createElement("path",{fill:"currentColor",d:"M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24m0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12m192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12"})))};e.ControlsContainer=({id:e,className:n,style:a,children:r,position:c="bottom-left"})=>{const s={className:`react-sigma-controls ${n||""} ${c}`,id:e,style:a};return t.createElement("div",Object.assign({},s),r)},e.FullScreenControl=({id:e,className:n,style:a,container:r,children:c,labels:s={}})=>{const{isFullScreen:l,toggle:o}=b(null==r?void 0:r.current),i={className:`react-sigma-control ${n||""}`,id:e,style:a};return document.fullscreenEnabled?t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:o,title:l?s.exit||"Exit fullscreen":s.enter||"Enter fullscreen"},c&&!l&&c[0],c&&l&&c[1],!c&&!l&&t.createElement(F,{style:{width:"1em"}}),!c&&l&&t.createElement(R,{style:{width:"1em"}}))):null},e.SearchControl=({id:e,className:n,style:a,labels:r={}})=>{const c=u(),s=v(),{gotoNode:l}=p(),[o,i]=t.useState(""),[d,g]=t.useState([]),[m,f]=t.useState(null),[h,b]=t.useState("");t.useEffect((()=>{b(`search-${Math.random().toString(36).slice(2)}`)}),[]),t.useEffect((()=>{const e=[];!m&&o.length>1&&c.getGraph().forEachNode(((t,n)=>{n.label&&n.label.toLowerCase().includes(o.toLowerCase())&&e.push({id:t,label:n.label})})),g(e)}),[o]),t.useEffect((()=>{s({clickStage:()=>{f(null),i("")}})}),[s]),t.useEffect((()=>{if(m)return c.getGraph().setNodeAttribute(m,"highlighted",!0),l(m),()=>{c.getGraph().setNodeAttribute(m,"highlighted",!1)}}),[m]);const w={className:`react-sigma-search ${n||""}`,id:e,style:a};return t.createElement("div",Object.assign({},w),t.createElement("label",{htmlFor:h,style:{display:"none"}},r.text||"Search a node"),t.createElement("input",{id:h,type:"text",placeholder:r.placeholder||"Search...",list:`${h}-datalist`,value:o,onChange:e=>{const t=e.target.value,n=d.find((e=>e.label===t));n?(i(n.label),g([]),f(n.id)):(f(null),i(t))}}),t.createElement("datalist",{id:`${h}-datalist`},d.map((e=>t.createElement("option",{key:e.id,value:e.label},e.label)))))},e.SigmaContainer=w,e.SigmaContext=l,e.SigmaProvider=o,e.ZoomControl=({className:e,style:n,animationDuration:a=200,children:r,labels:c={}})=>{const{zoomIn:s,zoomOut:l,reset:o}=p({duration:a,factor:1.5}),i={style:n,className:`react-sigma-control ${e||""}`};return t.createElement(t.Fragment,null,t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>s(),title:c.zoomIn||"Zoom In"},r?r[0]:t.createElement(_,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>l(),title:c.zoomOut||"Zoom Out"},r?r[1]:t.createElement(x,{style:{width:"1em"}}))),t.createElement("div",Object.assign({},i),t.createElement("button",{onClick:()=>o(),title:c.reset||"See whole graph"},r?r[2]:t.createElement(N,{style:{width:"1em"}}))))},e.useCamera=p,e.useFullScreen=b,e.useLoadGraph=function(){const e=u();return t.useCallback(((t,n=!0)=>{e&&t&&(n&&e.getGraph().order>0&&e.getGraph().clear(),e.getGraph().import(t),e.refresh())}),[e])},e.useRegisterEvents=v,e.useSetSettings=d,e.useSigma=u,e.useSigmaContext=i})); | ||
| //# sourceMappingURL=react-sigma_core.umd.min.js.map |
@@ -1,5 +0,6 @@ | ||
| import { SigmaEvents } from "sigma/sigma"; | ||
| import { TouchCaptorEvents } from "sigma/core/captors/touch"; | ||
| import { MouseCaptorEvents } from "sigma/core/captors/mouse"; | ||
| import { CameraEvents } from "sigma/core/camera"; | ||
| export declare type EventHandlers = SigmaEvents & TouchCaptorEvents & MouseCaptorEvents & CameraEvents; | ||
| import AbstractGraph, { Attributes, GraphOptions } from "graphology-types"; | ||
| import { SigmaEvents, MouseCaptorEvents, TouchCaptorEvents, CameraEvents } from "sigma/types"; | ||
| export type EventHandlers = SigmaEvents & TouchCaptorEvents & MouseCaptorEvents & CameraEvents; | ||
| type GraphConstructor<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes> = new (options?: GraphOptions) => AbstractGraph<N, E, G>; | ||
| export type GraphType<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes> = AbstractGraph<N, E, G> | GraphConstructor<N, E, G>; | ||
| export {}; |
| { | ||
| "name": "@react-sigma/core", | ||
| "version": "3.4.2", | ||
| "private": false, | ||
| "version": "4.0.0", | ||
| "description": "React Sigma", | ||
@@ -21,2 +20,3 @@ "author": "Benoit Simard", | ||
| ], | ||
| "type": "module", | ||
| "main": "./lib/react-sigma_core.umd.min.js", | ||
@@ -40,21 +40,8 @@ "module": "./lib/react-sigma_core.esm.min.js", | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "registry": "https://registry.npmjs.org/" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "^18.7.18", | ||
| "@types/react": "^18.0.9", | ||
| "@types/react-dom": "^18.0.5", | ||
| "copyfiles": "^2.4.1", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "graphology": "^0.25.1", | ||
| "lodash": "^4.17.21", | ||
| "react": "^17.0.0 || ^18.0.0", | ||
| "sigma": "^2.4.0" | ||
| "react": "^18.0.0", | ||
| "sigma": "^3.0.0-beta.16" | ||
| }, | ||
| "gitHead": "a56b1119559bc8ded1ad024b72644317cc39d3fe" | ||
| "gitHead": "4caccd544dbf593ee18bb686e11ee501de6a58ef" | ||
| } |
@@ -0,6 +1,11 @@ | ||
| import { Attributes } from "graphology-types"; | ||
| import { createContext, useContext } from "react"; | ||
| import Sigma from "sigma/sigma"; | ||
| import Sigma from "sigma"; | ||
| export interface SigmaContextInterface { | ||
| sigma: Sigma; | ||
| export interface SigmaContextInterface< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| > { | ||
| sigma: Sigma<N, E, G>; | ||
| container: HTMLElement; | ||
@@ -29,3 +34,7 @@ } | ||
| */ | ||
| export function useSigmaContext(): SigmaContextInterface { | ||
| export function useSigmaContext< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| >(): SigmaContextInterface<N, E, G> { | ||
| const context = useContext(SigmaContext); | ||
@@ -35,3 +44,4 @@ if (context == null) { | ||
| } | ||
| return context; | ||
| // cast context to the one with good generics | ||
| return context as unknown as SigmaContextInterface<N, E, G>; | ||
| } |
| import { useCallback, useRef } from "react"; | ||
| import { isEqual } from "lodash"; | ||
| import { AnimateOptions } from "sigma/utils/animate"; | ||
| import { AnimateOptions } from "sigma/utils"; | ||
| import { CameraState } from "sigma/types"; | ||
@@ -19,5 +19,3 @@ | ||
| */ | ||
| export function useCamera( | ||
| options?: CameraOptions, | ||
| ): { | ||
| export function useCamera(options?: CameraOptions): { | ||
| zoomIn: (options?: CameraOptions) => void; | ||
@@ -24,0 +22,0 @@ zoomOut: (options?: CameraOptions) => void; |
| import { useCallback } from "react"; | ||
| import Graph from "graphology"; | ||
| import { Attributes } from "graphology-types"; | ||
@@ -13,11 +14,18 @@ import { useSigma } from "./useSigma"; | ||
| * const loadGraph = useLoadGraph(); | ||
| * loadGraph(erdosRenyi(UndirectedGraph, { order: 100, probability: 0.2 }), true); | ||
| * ... | ||
| * useEffect(() => { | ||
| * loadGraph(erdosRenyi(UndirectedGraph, { order: 100, probability: 0.2 }), true); | ||
| * }, []); | ||
| *``` | ||
| * @category Hook | ||
| */ | ||
| export function useLoadGraph(): (graph: Graph, clear?: boolean) => void { | ||
| const sigma = useSigma(); | ||
| export function useLoadGraph< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| >(): (graph: Graph<N, E, G>, clear?: boolean) => void { | ||
| const sigma = useSigma<N, E, G>(); | ||
| return useCallback( | ||
| (graph: Graph, clear = true) => { | ||
| (graph: Graph<N, E, G>, clear = true) => { | ||
| if (sigma && graph) { | ||
@@ -24,0 +32,0 @@ if (clear && sigma.getGraph().order > 0) sigma.getGraph().clear(); |
| import { useEffect, useState } from "react"; | ||
| import { Settings } from "sigma/settings"; | ||
| import { SigmaEvents } from "sigma/sigma"; | ||
| import { TouchCaptorEvents } from "sigma/core/captors/touch"; | ||
| import { MouseCaptorEvents } from "sigma/core/captors/mouse"; | ||
| import { CameraEvents } from "sigma/core/camera"; | ||
| import { SigmaEvents, TouchCaptorEvents, MouseCaptorEvents, CameraEvents } from "sigma/types"; | ||
@@ -11,2 +7,3 @@ import { useSigma } from "./useSigma"; | ||
| import { EventHandlers } from "../types"; | ||
| import { Attributes } from "graphology-types"; | ||
@@ -58,12 +55,20 @@ type EventType = keyof EventHandlers; | ||
| * const registerEvents = useRegisterEvents(); | ||
| * registerEvents({ | ||
| * enterNode: event => setHoveredNode(event.node), | ||
| * leaveNode: event => setHoveredNode(null), | ||
| * }); | ||
| * const [setHoveredNode,setHoveredNode] = useState<string|null>(null); | ||
| * ... | ||
| * useEffect(() => { | ||
| * registerEvents({ | ||
| * enterNode: event => setHoveredNode(event.node), | ||
| * leaveNode: event => setHoveredNode(null), | ||
| * }); | ||
| * }, []); | ||
| *``` | ||
| * @category Hook | ||
| */ | ||
| export function useRegisterEvents(): (eventHandlers: Partial<EventHandlers>) => void { | ||
| const sigma = useSigma(); | ||
| const setSettings = useSetSettings(); | ||
| export function useRegisterEvents< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| >(): (eventHandlers: Partial<EventHandlers>) => void { | ||
| const sigma = useSigma<N, E, G>(); | ||
| const setSettings = useSetSettings<N, E, G>(); | ||
| const [eventHandlers, setEventHandlers] = useState<Partial<EventHandlers>>({}); | ||
@@ -81,28 +86,3 @@ | ||
| // Set settings for edge event if needed | ||
| const edgeSettings: Partial<Settings> = {}; | ||
| const reverseEdgeSettings: Partial<Settings> = {}; | ||
| const sigmaSettings = sigma.getSettings(); | ||
| if ( | ||
| eventTypes.some((event) => ["clickEdge", "rightClickEdge", "doubleClickEdge", "downEdge"].includes(event)) && | ||
| sigmaSettings.enableEdgeClickEvents === false | ||
| ) { | ||
| edgeSettings["enableEdgeClickEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeClickEvents"] = false; | ||
| } | ||
| if ( | ||
| eventTypes.some((event) => ["enterEdge", "leaveEdge"].includes(event)) && | ||
| sigmaSettings.enableEdgeHoverEvents === false | ||
| ) { | ||
| edgeSettings["enableEdgeHoverEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeHoverEvents"] = false; | ||
| } | ||
| if (eventTypes.some((event) => ["wheelEdge"].includes(event)) && sigmaSettings.enableEdgeWheelEvents === false) { | ||
| edgeSettings["enableEdgeWheelEvents"] = true; | ||
| reverseEdgeSettings["enableEdgeWheelEvents"] = false; | ||
| } | ||
| if (Object.keys(edgeSettings).length > 0) { | ||
| setSettings(edgeSettings); | ||
| } | ||
| // register events | ||
| eventTypes.forEach((event: EventType) => { | ||
@@ -114,7 +94,5 @@ const eventHandler = userEvents[event] as (...args: unknown[]) => void; | ||
| if (mouseEvents.find((e) => e === event)) { | ||
| //eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| sigma.getMouseCaptor().on(event as keyof MouseCaptorEvents, eventHandler); | ||
| } | ||
| if (touchEvents.find((e) => e === event)) { | ||
| //eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| sigma.getTouchCaptor().on(event as keyof TouchCaptorEvents, eventHandler); | ||
@@ -129,7 +107,2 @@ } | ||
| return () => { | ||
| // Reverse settings | ||
| if (Object.keys(reverseEdgeSettings).length > 0) { | ||
| setSettings(reverseEdgeSettings); | ||
| } | ||
| // remove events listener | ||
@@ -136,0 +109,0 @@ if (sigma) { |
@@ -5,2 +5,3 @@ import { useEffect, useState } from "react"; | ||
| import { useSigmaContext } from "./context"; | ||
| import { Attributes } from "graphology-types"; | ||
@@ -12,12 +13,19 @@ /** | ||
| * const setSettings = useSetSettings(); | ||
| * setSettings({ | ||
| * hideEdgesOnMove: true, | ||
| * hideLabelsOnMove: true, | ||
| * }); | ||
| * ... | ||
| * useEffect(() => { | ||
| * setSettings({ | ||
| * hideEdgesOnMove: true, | ||
| * hideLabelsOnMove: true, | ||
| * }); | ||
| * }, []); | ||
| *``` | ||
| * @category Hook | ||
| */ | ||
| export function useSetSettings(): (newSettings: Partial<Settings>) => void { | ||
| const { sigma, container } = useSigmaContext(); | ||
| const [settings, setSettings] = useState<Partial<Settings>>({}); | ||
| export function useSetSettings< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| >(): (newSettings: Partial<Settings<N, E, G>>) => void { | ||
| const { sigma, container } = useSigmaContext<N, E, G>(); | ||
| const [settings, setSettings] = useState<Partial<Settings<N, E, G>>>({}); | ||
@@ -29,5 +37,5 @@ useEffect(() => { | ||
| const prevSettings: Partial<Settings> = {}; | ||
| const prevSettings: Partial<Settings<N, E, G>> = {}; | ||
| (Object.keys(settings) as Array<keyof Settings>).forEach(key => { | ||
| (Object.keys(settings) as Array<keyof Settings<N, E, G>>).forEach((key) => { | ||
| // as never because of https://stackoverflow.com/questions/58656353/how-to-avoid-dynamic-keyof-object-assign-error-in-typescript | ||
@@ -41,3 +49,3 @@ prevSettings[key] = settings[key] as never; | ||
| if (sigma && container && container.offsetWidth > 0 && container.offsetHeight > 0) { | ||
| (Object.keys(prevSettings) as Array<keyof Settings>).forEach(key => { | ||
| (Object.keys(prevSettings) as Array<keyof Settings<N, E, G>>).forEach((key) => { | ||
| // as never because of https://stackoverflow.com/questions/58656353/how-to-avoid-dynamic-keyof-object-assign-error-in-typescript | ||
@@ -44,0 +52,0 @@ sigma.setSetting(key, prevSettings[key] as never); |
@@ -1,4 +0,5 @@ | ||
| import Sigma from "sigma/sigma"; | ||
| import Sigma from "sigma"; | ||
| import { useSigmaContext } from "./context"; | ||
| import { Attributes } from "graphology-types"; | ||
@@ -13,4 +14,8 @@ /** | ||
| */ | ||
| export function useSigma(): Sigma { | ||
| return useSigmaContext().sigma; | ||
| export function useSigma< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| >(): Sigma<N, E, G> { | ||
| return useSigmaContext<N, E, G>().sigma; | ||
| } |
@@ -1,5 +0,3 @@ | ||
| import { SigmaEvents } from "sigma/sigma"; | ||
| import { TouchCaptorEvents } from "sigma/core/captors/touch"; | ||
| import { MouseCaptorEvents } from "sigma/core/captors/mouse"; | ||
| import { CameraEvents } from "sigma/core/camera"; | ||
| import AbstractGraph, { Attributes, GraphOptions } from "graphology-types"; | ||
| import { SigmaEvents, MouseCaptorEvents, TouchCaptorEvents, CameraEvents } from "sigma/types"; | ||
@@ -10,1 +8,15 @@ /** | ||
| export type EventHandlers = SigmaEvents & TouchCaptorEvents & MouseCaptorEvents & CameraEvents; | ||
| /** | ||
| * Graph type helpers. | ||
| */ | ||
| type GraphConstructor< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| > = new (options?: GraphOptions) => AbstractGraph<N, E, G>; | ||
| export type GraphType< | ||
| N extends Attributes = Attributes, | ||
| E extends Attributes = Attributes, | ||
| G extends Attributes = Attributes, | ||
| > = AbstractGraph<N, E, G> | GraphConstructor<N, E, G>; |
@@ -5,7 +5,8 @@ { | ||
| "include": ["./src/**/*.ts"], | ||
| "composite":true, | ||
| "compilerOptions": { | ||
| "rootDir": "./src", | ||
| "outDir": "./lib", | ||
| "declarationDir": "./lib" | ||
| "declarationDir": "./lib", | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-25%
3
- Dev dependency count
- decreased by-100%
0
- Number of package files
- increased by1.22%
83
- Lines of code
- increased by0.39%
1814
- Is type module
Yes
Worsened metrics
- Total package byte prevSize
- decreased by-2.27%
143782
No dependency changes