@joint/react
Version:
React bindings and hooks for JointJS to build interactive diagrams and graphs.
3 lines (2 loc) • 1.73 kB
JavaScript
import{memo as b,useContext as x,useEffect as w,useSyncExternalStore as k}from"react";import{createPortal as L}from"react-dom";import{useCellId as S}from"../../hooks";import{PortGroupContext as R}from"../../context/port-group-context";import{useGraphStore as V}from"../../hooks/use-graph-store";import{PORTAL_SELECTOR as h}from"../../data/create-ports-data";import{jsx as v}from"../../utils/joint-jsx/jsx-to-markup";import{createElements as G}from"../../utils/create";import{PaperContext as N}from"../../context";import{jsx as A}from"react/jsx-runtime";const j=v(A("g",{"joint-selector":h}));var q=(o=>(o.PASSIVE="passive",o))(q||{});function z(C){const{magnet:o,id:e,children:I,groupId:c,z:p,x:u,y:f,dx:P,dy:g}=C,r=S(),y=x(N);if(!y)throw new Error("PortItem must be used within a `PaperProvider` or `Paper` component");const{portsStore:a,paper:l}=y,{graph:n}=V(),E=x(R);w(()=>{const t=n.getCell(r);if(!t)throw new Error(`Cell with id ${r} not found`);if(!t.isElement())return;if(!e)throw new Error("Port id is required");if(t.getPorts().some(d=>d.id===e))throw new Error(`Port with id ${e} already exists`);const m={group:c??E,z:p,id:e,args:{dx:P,dy:g,x:u,y:f},attrs:{[h]:{magnet:o??!0}},markup:j};return t.addPort(m),()=>{t.removePort(e)}},[r,E,n,c,e,u,f,p,o,P,g]);const i=k(a.subscribe,()=>a.getPortElement(r,e),()=>a.getPortElement(r,e));return w(()=>{if(!i)return;const t=l.findViewByModel(r);t.cleanNodesCache();for(const s of n.getConnectedLinks(t.model)){const m=s.target(),d=s.source();!(m.id===r||d.id===r)||!(m.port===e||d.port===e)||s.findView(l).requestConnectionUpdate({async:!1})}},[r,n,e,l,i]),i?L(I,i):null}const K=b(z);G([{id:"port-one"}]);export{q as Magnet,K as PortItem};
//# sourceMappingURL=port-item.js.map