@linkurious/ogma-react
Version:
A light adaptation of Ogma for React application
8 lines (7 loc) • 12.8 kB
JavaScript
(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("@linkurious/ogma"),require("react-dom/server"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","@linkurious/ogma","react-dom/server","react-dom"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.OgmaReact={},a.React,a.Ogma,a.ReactDOMServer,a.ReactDOM))})(this,function(a,t,V,F,A){"use strict";const M=t.createContext(null),g=()=>{const e=t.useContext(M);if(!e)throw new Error("useOgma must be used within an OgmaProvider");return e.ogma};function D(e,o){Object.keys(e).forEach(s=>{const n=e[s];n&&o(s,n)})}function _(e){return e.startsWith("on")&&e.length>2?e[2].toLowerCase()+e.substring(3):null}const j={},Y=(e,o)=>{const{options:s=j,children:n,graph:i,onReady:r,theme:l,className:d="ogma-container"}=e,f=t.useRef({}),[u,v]=t.useState(!1),[c,T]=t.useState(),[w,h]=t.useState(null),[S,P]=t.useState(),[I,m]=t.useState(j),[b,H]=t.useState();return t.useImperativeHandle(o,()=>c,[c]),t.useEffect(()=>{if(!w)return;const E=new V({container:w,graph:i,options:s});l&&(H(l),E.styles.setTheme(l)),T(E),v(!0),r&&r(E)},[w]),t.useLayoutEffect(()=>{const E=()=>c==null?void 0:c.view.forceResize();return E(),window.addEventListener("resize",E),()=>window.removeEventListener("resize",E)},[]),t.useEffect(()=>{c&&(i&&i!==S&&(P(i),c.setGraph(i)),s&&I!==s&&(m(s),c.setOptions(s)))},[i,s]),t.useEffect(()=>{c&&l&&l!==b&&(H(l),c.styles.setTheme(l))},[l]),t.useEffect(()=>{if(!c)return;const E={};Object.keys(e).forEach(y=>{if(!y.startsWith("on"))return;const N=_(y),K=e[y];N&&typeof K=="function"&&(E[N]=K)}),D(f.current,(y,C)=>{E[y]||(c.events.off(C),delete f.current[y])}),D(E,(y,C)=>{const N=f.current[y];N&&N!==C&&c.events.off(N),(!N||N!==C)&&(c.events.on(y,C),f.current[y]=C)})},[e]),t.createElement("div",{style:{width:"100%",height:"100%"},className:d,ref:E=>h(E)},c&&t.createElement(M.Provider,{value:{ogma:c}},u&&n))},J=t.memo(t.forwardRef(Y));function Q(e,o,s){const n=s||[];return t.useCallback(o,n)}const X=t.forwardRef(({selector:e,attributes:o},s)=>{const n=g(),[i,r]=t.useState();return t.useImperativeHandle(s,()=>i,[i]),t.useEffect(()=>{const l=e?n.styles.addNodeRule(e,o):n.styles.addNodeRule(o);return r(l),()=>{l.destroy(),r(void 0)}},[e,o]),null}),z=Object.assign(X,{Hovered:({attributes:e,fullOverwrite:o})=>{const s=g();return t.useEffect(()=>(s.styles.setHoveredNodeAttributes(e,o),()=>{s.styles.setHoveredNodeAttributes(null)}),[e,o]),null},Selected:({attributes:e,fullOverwrite:o})=>{const s=g();return t.useEffect(()=>(s.styles.setSelectedNodeAttributes(e,o),()=>{s.styles.setSelectedNodeAttributes(null)}),[e,o]),null}}),Z=t.forwardRef(({selector:e,attributes:o},s)=>{const n=g(),[i,r]=t.useState();return t.useImperativeHandle(s,()=>i,[i]),t.useEffect(()=>{const l=e?n.styles.addEdgeRule(e,o):n.styles.addEdgeRule(o);return r(l),()=>{l.destroy(),r(void 0)}},[e,o]),null}),U=Object.assign(Z,{Hovered:({attributes:e,fullOverwrite:o})=>{const s=g();return t.useEffect(()=>(s.styles.setHoveredEdgeAttributes(e,o),()=>{s.styles.setHoveredEdgeAttributes(null)}),[e,o]),null},Selected:({attributes:e,fullOverwrite:o})=>{const s=g();return t.useEffect(()=>(s.styles.setSelectedEdgeAttributes(e,o),()=>{s.styles.setSelectedEdgeAttributes(null)}),[e,o]),null}}),x=({name:e,edgeAttributes:o,edgeDependencies:s,edgeOutput:n,nodeAttributes:i,nodeDependencies:r,nodeOutput:l},d)=>{const f=g(),[u,v]=t.useState(null);return t.useImperativeHandle(d,()=>u,[u]),t.useEffect(()=>{const c={edgeAttributes:o,edgeDependencies:s,edgeOutput:n,nodeAttributes:i,nodeDependencies:r,nodeOutput:l};async function T(){const w=f.styles.createClass({name:e,...c});await f.view.afterNextFrame(),v(w)}return T(),()=>{async function w(){const h=f.styles.getClass(e);h&&await h.destroy(),v(null)}w()}},[]),t.useEffect(()=>{u&&u.update({edgeAttributes:o,edgeDependencies:s,edgeOutput:n,nodeAttributes:i,nodeDependencies:r,nodeOutput:l})},[o,s,n,i,r,l]),null},R=(e,o)=>e.name===o.name&&e.edgeAttributes===o.edgeAttributes&&e.edgeDependencies===o.edgeDependencies&&e.edgeOutput===o.edgeOutput&&e.nodeAttributes===o.nodeAttributes&&e.nodeDependencies===o.nodeDependencies&&e.nodeOutput===o.nodeOutput,p=t.memo(t.forwardRef(x),R);function O(e,o,s){o===e.isEnabled()&&(o?e.disable(s):e.enable(s))}function L(e,o,s){const n=({target:u})=>{u===o&&e.onEnabled&&e.onEnabled(o)},i=({target:u})=>{u===o&&e.onDisabled&&e.onDisabled(o)},r=({target:u})=>{u===o&&e.onUpdated&&e.onUpdated(o)},l=({target:u,index:v})=>{u===o&&e.onSetIndex&&e.onSetIndex(o,v)},d=({target:u})=>{u===o&&(e.onDestroyed&&e.onDestroyed(o),s.events.off(n).off(i).off(r).off(l).off(d))};return s.events.on("transformationEnabled",n).on("transformationDisabled",i).on("transformationDestroyed",d).on("transformationSetIndex",l).on("transformationRefresh",r),()=>{s.events.off(n).off(i).off(r).off(l).off(d)}}function ee(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addNodeGrouping({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.groupIdFunction,e.groupSelfLoopEdges,e.edgeGenerator,e.nodeGenerator,e.groupEdges,e.padding,e.selector,e.showContents,e.separateEdgesByDirection]),null}const te=t.forwardRef(ee);function ne(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addEdgeGrouping({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.selector,e.generator,e.groupIdFunction,e.separateEdgesByDirection]),null}const oe=t.forwardRef(ne);function W(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addNodeCollapsing({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.edgeGenerator,e.selector]),null}const se=t.forwardRef(W);function re(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addNeighborMerging({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.dataFunction,e.selector]),null}const ie=t.forwardRef(re);function ue(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addNeighborGeneration({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.edgeGenerator,e.nodeGenerator,e.neighborIdFunction,e.selector]),null}const le=t.forwardRef(ue);function de(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addEdgeFilter({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled,e.duration]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.criteria]),null}const fe=t.forwardRef(de);function ae(e,o){const s=g(),[n,i]=t.useState();return t.useImperativeHandle(o,()=>n,[n]),t.useEffect(()=>{const r=s.transformations.addNodeFilter({...e,enabled:!e.disabled});return L(e,r,s),i(r),()=>{r.destroy(),i(void 0)}},[]),t.useEffect(()=>{n&&O(n,!!e.disabled,e.duration)},[e.disabled,e.duration]),t.useEffect(()=>{n==null||n.setOptions(e)},[e.criteria]),null}const ce=t.forwardRef(ae);function B(e,o,s,n){return typeof s=="string"?s:typeof s=="function"?F.renderToString(s(e,o)):F.renderToString(n)}function G(e,o){return typeof e=="function"?e(o):e}const $=(e,o)=>`${e} ${e}--${o}`;function ge(e="×",o){if(e){const s=typeof e=="string"?e:F.renderToString(e);return`<div class=${o}>${s}</div>`}return""}function me(e,o,s,n){const{width:i,height:r}=n.view.getSize(),{x:l,y:d}=n.view.graphToScreenCoordinates(e);let f=o;const{width:u,height:v}=s;return o==="left"&&l-u<0?f="right":o==="right"&&l+u>i?f="left":o==="bottom"&&d+v>r?f="top":o==="top"&&d-v<0&&(f="bottom"),f==="right"||f==="left"?d+v/2>r?f="top":d-v/2<0&&(f="bottom"):l+u/2>i?f="left":l-u/2<0&&(f="right"),f}function ye(){}const k={x:-9999,y:-9999},Ee="ogma-popup--content",ve="ogma-popup--close",Se="ogma-popup--body",he="ogma-popup",be=({content:e,position:o,children:s,isOpen:n=!0,closeButton:i,onClose:r=ye,placement:l="top",popupClass:d=he,closeButtonClass:f=ve,contentClass:u=Ee,popupBodyClass:v=Se,size:c,closeOnEsc:T=!0},w)=>{const h=g(),[S,P]=t.useState(null);if(t.useImperativeHandle(w,()=>S,[S]),t.useEffect(()=>{let m=null,b=null,H=null;if(n){const E=G(o,h)||k;if(m=h.layers.addOverlay({position:E||k,element:`<div class="${$(d,l)}"/>
<div class="${v}">
${ge(i,f)}
<div class="${u} "></div>
</div>
</div>`,size:c||{width:"auto",height:"auto"},scaled:!1}),H=y=>{const C=m==null?void 0:m.element.querySelector(`.${f}`);y.target&&C.contains(y.target)&&(y.stopPropagation(),y.preventDefault(),r())},b=({code:y})=>{y===27&&r()},T&&h.events.on("keyup",b),m.element.addEventListener("click",H),P(m),e&&!s){const y=m.element.querySelector(`.${u}`),C=B(h,E,e,s);y&&(y.innerHTML=C)}P(m)}return()=>{m&&(H&&m.element.removeEventListener("click",H),b&&h.events.off(b),m.destroy(),P(null))}},[n,h]),t.useEffect(()=>{if(S&&S.element){const m=G(o,h)||k;if(S.setPosition(m),S.element.className=$(d,l),e&&!s){const b=S.element.querySelector(`.${u}`);b&&(b.innerHTML=typeof e=="string"?e:"")}n?S.show():S.hide()}},[S,o,n,l,d,e,s]),!S||!n)return null;const I=S.element.querySelector(`.${u}`);return I&&s?A.createPortal(s,I):null},we=t.forwardRef(be),Ce=({tooltipClass:e="ogma-tooltip",placement:o="right",position:s,size:n={width:"auto",height:"auto"},children:i,content:r,visible:l=!0},d)=>{const f=g(),[u,v]=t.useState(),[c,T]=t.useState(),[w,h]=t.useState(""),[S,P]=t.useState(),I=t.useRef(0);return t.useImperativeHandle(d,()=>u,[u]),t.useEffect(()=>{const b=`<div class="${$(e,o)}"><div class="${e}--content" /></div>`,H={x:-9999,y:-9999};T(H);const E=f.layers.addOverlay({position:H,element:b,scaled:!1,size:n});return v(E),()=>{E.destroy()}},[]),t.useEffect(()=>{const m=B(f,c,r,i);if(u){m!==w&&(u.element.firstElementChild.innerHTML=m,h(m),P({width:u.element.offsetWidth,height:u.element.offsetHeight}));const b=G(s,f);c!==b&&T(b),l?u.show():u.hide()}return I.current=requestAnimationFrame(()=>{u&&u.element&&c&&S&&(u.element.className=$(e,me(c,o,S,f)),u.setPosition(c))}),()=>cancelAnimationFrame(I.current)},[i,r,s,l]),null},He=t.forwardRef(Ce),Te=({noClear:e=!1,isStatic:o=!1,render:s,index:n,visible:i=!0},r)=>{const l=g(),[d,f]=t.useState(null);return t.useImperativeHandle(r,()=>d,[d]),t.useEffect(()=>{const u=l.layers.addCanvasLayer(s,{isStatic:o,noClear:e},n);return f(u),()=>{u&&(u.destroy(),f(null))}},[]),t.useEffect(()=>{d&&(n!==void 0&&isFinite(n)&&d.moveTo(n),i?d.show():d.hide())},[d,n,i]),null},Ne=t.forwardRef(Te),q={x:-9999,y:-9999},Oe=t.forwardRef(({position:e,children:o,className:s="",size:n,scaled:i},r)=>{const l=g(),[d,f]=t.useState(null);return t.useImperativeHandle(r,()=>d,[d]),t.useEffect(()=>{const u=G(e,l)||q,v=document.createElement("div");v.className=s;const c=l.layers.addOverlay({position:u||q,element:v,size:n||{width:"auto",height:"auto"},scaled:i});return f(c),()=>{d&&(d.destroy(),f(null))}},[]),t.useEffect(()=>{if(d){const u=G(e,l)||q;s&&(d.element.className=s),d.setPosition(u)}},[e,s]),d?A.createPortal(o,d.element):null}),Le=t.forwardRef(({children:e,className:o="",index:s},n)=>{const i=g(),[r,l]=t.useState(null);return t.useImperativeHandle(n,()=>r,[r]),t.useEffect(()=>{const d=document.createElement("div");d.className=o;const f=i.layers.addLayer(d,s);return l(f),()=>{r&&(r.destroy(),l(null))}},[]),t.useEffect(()=>{r&&(r.element.className=o)},[o]),r?A.createPortal(e,r.element):null});function Pe({enabled:e=!1,...o}){const s=g();return t.useEffect(()=>{e?s.geo.enable(o):s.geo.disable()},[e]),null}a.CanvasLayer=Ne,a.EdgeFilter=fe,a.EdgeGrouping=oe,a.EdgeStyle=U,a.EdgeStyleRule=U,a.Geo=Pe,a.Layer=Le,a.NeighborGeneration=le,a.NeighborMerging=ie,a.NodeCollapsing=se,a.NodeCollapsingComponent=W,a.NodeFilter=ce,a.NodeGrouping=te,a.NodeStyle=z,a.NodeStyleRule=z,a.Ogma=J,a.Overlay=Oe,a.Popup=we,a.StyleClass=p,a.Tooltip=He,a.forEachEventHandler=D,a.getEventNameFromProp=_,a.useEvent=Q,a.useOgma=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.js.map