@linkurious/ogma-react/index.umd.js

A light adaptation of Ogma for React application

(function(c,n){typeof exports=="object"&&typeof module<"u"?n(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"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.OgmaReact={},c.React,c.Ogma,c.ReactDOMServer,c.ReactDOM))})(this,(function(c,n,$,I,H){"use strict";const q=n.createContext(null),E=()=>{const e=n.useContext(q);if(!e)throw new Error("useOgma must be used within an OgmaProvider");return e.ogma};function D(e,o){Object.keys(e).forEach(t=>{const s=e[t];s&&o(t,s)})}function M(e){return e.startsWith("on")&&e.length>2?e[2].toLowerCase()+e.substring(3):null}function U(e,o,t){const s={};Object.keys(o).forEach(i=>{if(!i.startsWith("on"))return;const f=M(i),g=o[i];f&&typeof g=="function"&&(s[f]=g)}),D(t,(i,r)=>{s[i]||(e.events.off(r),delete t[i])}),D(s,(i,r)=>{const f=t[i];f&&f!==r&&e.events.off(f),(!f||f!==r)&&(e.events.on(i,r),t[i]=r)})}function W(e,o){if(e===o)return!0;try{return JSON.stringify(e)===JSON.stringify(o)}catch{return!1}}const z={},K=(e,o)=>{const{options:t=z,children:s,graph:i,onReady:r,theme:f,className:g="ogma-container"}=e,l=n.useRef({}),d=n.useRef(null),[y,O]=n.useState(),[P,a]=n.useState(),[w,h]=n.useState(z),[T,b]=n.useState();return n.useImperativeHandle(o,()=>y,[y]),n.useEffect(()=>{if(!d.current||y)return;const m=new $.Ogma({container:d.current,graph:i,options:t});a(i),h(t),f&&(b(f),m.styles.setTheme(f)),U(m,e,l.current),O(m),r&&r(m)},[d.current]),n.useLayoutEffect(()=>{const m=()=>y?.view.forceResize();return m(),window.addEventListener("resize",m),()=>window.removeEventListener("resize",m)},[]),n.useEffect(()=>{y&&(i&&W(i,P)===!1&&(a(i),y.setGraph(i)),t&&W(t,w)===!1&&(h(t),y.setOptions(t)))},[i,t]),n.useEffect(()=>{y&&f&&W(f,T)===!1&&(b(f),y.styles.setTheme(f))},[f]),n.useEffect(()=>{y&&U(y,e,l.current)},[e]),n.createElement("div",{style:{width:"100%",height:"100%"},className:g,ref:d},y&&n.createElement(q.Provider,{value:{ogma:y}},s))},Y=n.memo(n.forwardRef(K));function Q(e,o,t){const s=t||[];return n.useCallback(o,s)}const X=n.forwardRef(({selector:e,attributes:o},t)=>{const s=E(),[i,r]=n.useState();return n.useImperativeHandle(t,()=>i,[i]),n.useEffect(()=>{const f=e?s.styles.addNodeRule(e,o):s.styles.addNodeRule(o);return r(f),()=>{f.destroy(),r(void 0)}},[e,o]),null}),_=Object.assign(X,{Hovered:({attributes:e,fullOverwrite:o})=>{const t=E();return n.useEffect(()=>(t.styles.setHoveredNodeAttributes(e,o),()=>{t.styles.setHoveredNodeAttributes(null)}),[e,o]),null},Selected:({attributes:e,fullOverwrite:o})=>{const t=E();return n.useEffect(()=>(t.styles.setSelectedNodeAttributes(e,o),()=>{t.styles.setSelectedNodeAttributes(null)}),[e,o]),null}}),R=n.forwardRef(({selector:e,attributes:o},t)=>{const s=E(),[i,r]=n.useState();return n.useImperativeHandle(t,()=>i,[i]),n.useEffect(()=>{const f=e?s.styles.addEdgeRule(e,o):s.styles.addEdgeRule(o);return r(f),()=>{f.destroy(),r(void 0)}},[e,o]),null}),j=Object.assign(R,{Hovered:({attributes:e,fullOverwrite:o})=>{const t=E();return n.useEffect(()=>(t.styles.setHoveredEdgeAttributes(e,o),()=>{t.styles.setHoveredEdgeAttributes(null)}),[e,o]),null},Selected:({attributes:e,fullOverwrite:o})=>{const t=E();return n.useEffect(()=>(t.styles.setSelectedEdgeAttributes(e,o),()=>{t.styles.setSelectedEdgeAttributes(null)}),[e,o]),null}}),p=n.forwardRef(({name:e,edgeAttributes:o,edgeDependencies:t,edgeOutput:s,nodeAttributes:i,nodeDependencies:r,nodeOutput:f},g)=>{const l=E(),[d,y]=n.useState(null);return n.useImperativeHandle(g,()=>d,[d]),n.useEffect(()=>{const O={edgeAttributes:o,edgeDependencies:t,edgeOutput:s,nodeAttributes:i,nodeDependencies:r,nodeOutput:f};async function P(){const a=l.styles.createClass({name:e,...O});await l.view.afterNextFrame(),y(a)}return P(),()=>{async function a(){const w=l.styles.getClass(e);w&&await w.destroy(),y(null)}a()}},[]),n.useEffect(()=>{d&&d.update({edgeAttributes:o,edgeDependencies:t,edgeOutput:s,nodeAttributes:i,nodeDependencies:r,nodeOutput:f})},[o,t,s,i,r,f]),null}),ee=(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,te=n.memo(p,ee);function ne(e,o){const t=E(),[s,i]=n.useState(null);return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const{disabled:r,...f}=e,g=t.transformations.addDrillDown({...f,enabled:!r});return i(g),()=>{g.destroy(),i(null)}},[]),n.useEffect(()=>{if(s){const r=!!e.disabled,f=e.duration;r?s.disable(f):s.enable(f)}},[e.disabled]),n.useEffect(()=>{const{disabled:r,...f}=e;s?.setOptions(f)},[e.copyData,e.depthPath,e.duration,e.easing,e.nodeGenerator,e.onDestroyed,e.onDisabled,e.onEnabled,e.onGetSubgraph,e.onGroupUpdate,e.onSetIndex,e.onUpdated,e.padding,e.parentPath,e.showContents]),null}const oe=n.forwardRef(ne);function N(e,o,t){o===e.isEnabled()&&(o?e.disable(t):e.enable(t))}function k(e,o,t){const s=({target:d})=>{d===o&&e.onEnabled&&e.onEnabled(o)},i=({target:d})=>{d===o&&e.onDisabled&&e.onDisabled(o)},r=({target:d})=>{d===o&&e.onUpdated&&e.onUpdated(o)},f=({target:d,index:y})=>{d===o&&e.onSetIndex&&e.onSetIndex(o,y)},g=({target:d})=>{d===o&&(e.onDestroyed&&e.onDestroyed(o),t.events.off(s).off(i).off(r).off(f).off(g))};return t.events.on("transformationEnabled",s).on("transformationDisabled",i).on("transformationDestroyed",g).on("transformationSetIndex",f).on("transformationRefresh",r),()=>{t.events.off(s).off(i).off(r).off(f).off(g)}}function se(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addNodeGrouping({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled,e.duration]),n.useEffect(()=>{s?.setOptions(e)},[e.groupIdFunction,e.groupSelfLoopEdges,e.edgeGenerator,e.nodeGenerator,e.groupEdges,e.padding,e.selector,e.showContents,e.separateEdgesByDirection]),null}const re=n.forwardRef(se);function ie(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addEdgeGrouping({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled,e.duration]),n.useEffect(()=>{s?.setOptions(e)},[e.selector,e.generator,e.groupIdFunction,e.separateEdgesByDirection]),null}const fe=n.forwardRef(ie);function B(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addNodeCollapsing({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled,e.duration]),n.useEffect(()=>{s?.setOptions(e)},[e.edgeGenerator,e.selector]),null}const ue=n.forwardRef(B);function le(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addNeighborMerging({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled,e.duration]),n.useEffect(()=>{s?.setOptions(e)},[e.dataFunction,e.selector]),null}const de=n.forwardRef(le);function ae(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addNeighborGeneration({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled,e.duration]),n.useEffect(()=>{s?.setOptions(e)},[e.edgeGenerator,e.nodeGenerator,e.neighborIdFunction,e.selector]),null}const ce=n.forwardRef(ae);function ge(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addEdgeFilter({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled]),n.useEffect(()=>{s?.setOptions(e)},[e.criteria]),null}const me=n.forwardRef(ge);function ye(e,o){const t=E(),[s,i]=n.useState();return n.useImperativeHandle(o,()=>s,[s]),n.useEffect(()=>{const r=t.transformations.addNodeFilter({...e,enabled:!e.disabled});return k(e,r,t),i(r),()=>{r.destroy(),i(void 0)}},[]),n.useEffect(()=>{s&&N(s,!!e.disabled,e.duration)},[e.disabled]),n.useEffect(()=>{s?.setOptions(e)},[e.criteria]),null}const Ee=n.forwardRef(ye);function he(e,o,t,s){return typeof t=="string"?t:typeof t=="function"?I.renderToString(t(e,o)):I.renderToString(s)}function G(e,o){return typeof e=="function"?e(o):e}const Z=(e,o)=>`${e} ${e}--${o}`;function be(e="&times;",o){if(e){const t=typeof e=="string"?e:I.renderToString(e);return`<div class=${o}>${t}</div>`}return""}function Se(e){return e.endsWith("Doubleclick")?"doubleclick":e.toLowerCase().endsWith("click")?"click":"mouseover"}function we(e,o){if(e instanceof $.Node){const t=e.getAttribute("radius"),s=x("outer",e,o),i=x("inner",e,o);return t+s+i}else if(e instanceof $.Edge)return e.size;return 0}function x(e,o,t){const s=o.getAttribute(`${e}Stroke.width`);return o.getAttribute(`${e}Stroke.minVisibleSize`)>o.size?0:o.getAttribute(`${e}Stroke.scalingMethod`)==="fixed"?s:s/t}function V(e,o,t){const s=we(e,o),i={x:0,y:0};switch(t){case"top":i.y=-s;break;case"bottom":i.y=s;break;case"left":i.x=-s;break;case"right":i.x=s;break}return i}function ve(e,o,t){return e.left<0?"right":e.right>o?"left":e.top<0?"bottom":e.bottom>t?"top":null}function J(e,o,t){switch(e||o){case"top":return`translate(calc(-50% + ${t.x}px),calc(-100% + ${t.y}px))`;case"bottom":return`translate(calc(-50% + ${t.x}px),${t.y}px)`;case"left":return`translate(calc(-100% + ${t.x}px),calc(-50% + ${t.y}px))`;default:return`translate(${t.x}px,calc(-50% + ${t.y}px))`}}const F={x:-9999,y:-9999},Ce="ogma-popup--content",Oe="ogma-popup--close",Te="ogma-popup--body",Pe="ogma-popup",Le=({content:e,position:o,children:t,isOpen:s=!0,closeButton:i,onClose:r=()=>{},placement:f="top",popupClass:g=Pe,closeButtonClass:l=Oe,contentClass:d=Ce,popupBodyClass:y=Te,size:O,closeOnEsc:P=!0},a)=>{const w=E(),[h,T]=n.useState(null);if(n.useImperativeHandle(a,()=>h,[h]),n.useEffect(()=>{let m=null,v=null,u=null;if(s){const S=G(o,w)||F;if(m=w.layers.addOverlay({position:S||F,element:`<div class="${Z(g,f)}"/>
          <div class="${y}">
            ${be(i,l)}
            <div class="${d} "></div>
          </div>
        </div>`,size:O||{width:"auto",height:"auto"},scaled:!1}),u=C=>{const L=m?.element.querySelector(`.${l}`);C.target&&L.contains(C.target)&&(C.stopPropagation(),C.preventDefault(),r())},v=({code:C})=>{C===27&&r()},P&&w.events.on("keyup",v),m.element.addEventListener("click",u),T(m),e&&!t){const C=m.element.querySelector(`.${d}`),L=he(w,S,e,t);C&&(C.innerHTML=L)}T(m)}return()=>{m&&(u&&m.element.removeEventListener("click",u),v&&w.events.off(v),m.destroy(),T(null))}},[s,w]),n.useEffect(()=>{if(h&&h.element){const m=G(o,w)||F;if(h.setPosition(m),h.element.className=Z(g,f),e&&!t){const v=h.element.querySelector(`.${d}`);v&&(v.innerHTML=typeof e=="string"?e:"")}s?h.show():h.hide()}},[h,o,s,f,g,e,t]),!h||!s)return null;const b=h.element.querySelector(`.${d}`);return b&&t?H.createPortal(t,b):null},Ne=n.forwardRef(Le),ke={x:-9999,y:-9999},$e=({eventName:e,position:o,children:t,placement:s="top",bodyClass:i="ogma-tooltip--body",translate:r={x:0,y:0},size:f},g)=>{const l=E(),[d,y]=n.useState(),[O,P]=n.useState(),[a,w]=n.useState(null);n.useImperativeHandle(g,()=>a,[a]);function h(b,m){if(o)a?.show();else{const S=l.geo.enabled()?l.geo.getZoom():l.view.getZoom(),C=V(b,S,s),L={x:m.x+C.x,y:m.y+C.y};P(m),a?.setPosition(L)}const v=J(null,s,r),u=a.element.children[0];u.style.transform=v}function T(){a?.hide(),y(void 0)}if(n.useEffect(()=>{const b=l.layers.addOverlay({position:o||ke,element:`
      <div style="pointer-events: none">
        <div class="${i}" style="pointer-events: auto">
        </div>
      </div>`,size:f||{width:"auto",height:"auto"},scaled:!1});w(b)},[]),n.useEffect(()=>{if(!a)return;let b=()=>null,m=()=>null;const v=Se(e);return v==="mouseover"?(b=u=>{if(e.startsWith("node")){if(u.target?.isNode){const S=u.target;y(S),h(S,S.getPosition())}}else if(e.startsWith("edge")&&u.target&&!u.target.isNode){const S=l.view.screenToGraphCoordinates({x:u.x,y:u.y});y(u.target),h(u.target,S)}},m=u=>{(e.startsWith("node")&&u.target?.isNode||e.startsWith("edge")&&u.target&&!u.target.isNode)&&T()},l.events.on("mouseout",m)):(b=u=>{if(!(e.endsWith("Rightclick")&&u.button==="left")){if(e.startsWith("background")){if(!u.target){const S=l.view.screenToGraphCoordinates({x:u.x,y:u.y});y(S),h("background",S)}}else if(e.startsWith("node")){if(u.target?.isNode){const S=u.target;y(S),h(S,S.getPosition())}}else if(u.target&&!u.target.isNode){const S=l.view.screenToGraphCoordinates({x:u.x,y:u.y});y(u.target),h(u.target,S)}}},m=u=>{e.startsWith("node")?u.target?.isNode||T():e.startsWith("edge")?(!u.target||u.target.isNode)&&T():e.startsWith("background")&&(u.target||e.endsWith("Rightclick")&&u.button==="left"||e.endsWith("Click")&&u.button==="right")&&T()},l.events.on("click",m)),a.hide(),l.events.on(v,b),()=>{l.events.off(b),l.events.off(m),a&&(a.destroy(),w(null))}},[a]),n.useEffect(()=>{!a||!a.element||(o&&a.setPosition(o),(s||i)&&(a.element.firstElementChild.className="ogma-popup--body "+i),f&&a.setSize(f))},[o,s,f,i]),n.useEffect(()=>{if(!a||!a.element||!d)return;const b=a.element,m=b.children[0].getBoundingClientRect(),v=b.ownerDocument.defaultView,u=ve(m,v.innerWidth,v.innerHeight);if(u){const S=l.geo.enabled()?l.geo.getZoom():l.view.getZoom(),C=d instanceof $.Node||d instanceof $.Edge?d:"background",L=V(C,S,u);a?.setPosition({x:O.x+L.x,y:O.y+L.y});const Ae=J(u,s,r);b.children[0].style.transform=Ae}a.show()},[O]),!a||!a.element)return null;if(t instanceof Function){if(!d)return null;const b=t(d);return b===null?(a.hide(),null):H.createPortal(b,a.element.firstElementChild)}else return t?H.createPortal(t,a.element.firstElementChild):null},He=n.forwardRef($e),Ge=({noClear:e=!1,isStatic:o=!1,render:t,index:s,visible:i=!0},r)=>{const f=E(),[g,l]=n.useState(null);return n.useImperativeHandle(r,()=>g,[g]),n.useEffect(()=>{const d=f.layers.addCanvasLayer(t,{isStatic:o,noClear:e},s);return l(d),()=>{d&&(d.destroy(),l(null))}},[]),n.useEffect(()=>{g&&(s!==void 0&&isFinite(s)&&g.moveTo(s),i?g.show():g.hide())},[g,s,i]),null},Ie=n.forwardRef(Ge),A={x:-9999,y:-9999},De=n.forwardRef(({position:e,children:o,className:t="",size:s,scaled:i,index:r},f)=>{const g=E(),[l,d]=n.useState(null);return n.useImperativeHandle(f,()=>l,[l]),n.useEffect(()=>{const y=G(e,g)||A,O=document.createElement("div");O.className=t;const P=g.layers.addOverlay({position:y||A,element:O,size:s||{width:"auto",height:"auto"},scaled:i},r);return d(P),()=>{l&&(l.destroy(),d(null))}},[]),n.useEffect(()=>{if(l){const y=G(e,g)||A;t&&(l.element.className=t),r!==void 0&&isFinite(r)&&l.moveTo(r),l.setPosition(y)}},[e,t,r]),l?H.createPortal(o,l.element):null}),We=n.forwardRef(({children:e,className:o="",index:t},s)=>{const i=E(),[r,f]=n.useState(null);return n.useImperativeHandle(s,()=>r,[r]),n.useEffect(()=>{const g=document.createElement("div");g.className=o;const l=i.layers.addLayer(g,t);return f(l),()=>{r&&(r.destroy(),f(null))}},[]),n.useEffect(()=>{r&&(o&&(r.element.className=o),t!==void 0&&isFinite(t)&&r.moveTo(t))},[o,t]),r?H.createPortal(e,r.element):null});function Fe({enabled:e=!1,...o}){const t=E();return n.useEffect(()=>{e?t.geo.enable(o):t.geo.disable()},[e]),null}c.CanvasLayer=Ie,c.EdgeFilter=me,c.EdgeGrouping=fe,c.EdgeStyle=j,c.EdgeStyleRule=j,c.Geo=Fe,c.Layer=We,c.NeighborGeneration=ce,c.NeighborMerging=de,c.NodeCollapsing=ue,c.NodeCollapsingComponent=B,c.NodeDrilldown=oe,c.NodeFilter=Ee,c.NodeGrouping=re,c.NodeStyle=_,c.NodeStyleRule=_,c.Ogma=Y,c.Overlay=De,c.Popup=Ne,c.StyleClass=te,c.Tooltip=He,c.forEachEventHandler=D,c.getEventNameFromProp=M,c.useEvent=Q,c.useOgma=E,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=index.umd.js.map