@jalez/react-flow-automated-layout
Version:
A React library for automated layout of nested node graphs with parent-child relationships using React Flow
2 lines (1 loc) • 26.9 kB
JavaScript
(function(N,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react"),require("@xyflow/react"),require("@dagrejs/dagre")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@xyflow/react","@dagrejs/dagre"],i):(N=typeof globalThis<"u"?globalThis:N||self,i(N.reactFlowAutomatedLayout={},N.jsxRuntime,N.React,N.ReactFlow,N.dagre))})(this,function(N,i,T,k,et){"use strict";const st=T.createContext(void 0);function P(){const t=T.useContext(st);if(t===void 0)throw new Error("useLayoutContext must be used within a LayoutProvider");return t}const Lt=t=>{switch(t){case"DOWN":return"TB";case"RIGHT":return"LR";case"UP":return"BT";case"LEFT":return"RL";default:return"TB"}},rt=t=>{switch(t){case"TB":return"DOWN";case"LR":return"RIGHT";case"BT":return"UP";case"RL":return"LEFT";default:return"DOWN"}},Et={enabled:!0,padding:{horizontal:80,vertical:48},respectHeaderHeight:!0,minWidth:200,minHeight:100},St=t=>{switch(t){case"DOWN":return k.Position.Bottom;case"RIGHT":return k.Position.Right;case"UP":return k.Position.Top;case"LEFT":return k.Position.Left;default:return k.Position.Bottom}},vt=t=>{switch(t){case"DOWN":return k.Position.Top;case"RIGHT":return k.Position.Left;case"UP":return k.Position.Bottom;case"LEFT":return k.Position.Right;default:return k.Position.Top}};function Tt(t,s,e){if(e)return{nodes:t,edges:s};const o=t.filter(d=>!d.hidden),r=new Set(o.map(d=>d.id)),c=s.filter(d=>r.has(d.source)&&r.has(d.target));return{nodes:o,edges:c}}const kt=172,Bt=36,I=async(t,s,e,o=0,r=50,c=50,d=kt,l=Bt,h=!1)=>{const a=new et.graphlib.Graph().setDefaultEdgeLabel(()=>({}));a.setGraph({rankdir:e,marginx:o,marginy:o,nodesep:r,ranksep:c,edgesep:Math.max(20,r/4),ranker:"tight-tree"});const n=h?t:t.filter(g=>!g.hidden);if(n.length===0)return{nodes:[],edges:[],width:0,height:0};n.forEach(g=>{var y,w;const f=Number((y=g.style)==null?void 0:y.width)||d,b=Number((w=g.style)==null?void 0:w.height)||l;a.setNode(g.id,{width:f,height:b})}),s.forEach(g=>{var S,E;const f=g.sourceHandle,b=g.targetHandle,y=!!((S=g.data)!=null&&S.isReciprocal),w=!!((E=g.data)!=null&&E.isSyntheticBridge);let p={};y?p={constraint:!1,minlen:1,weight:5}:w?p={constraint:!0,minlen:1,weight:4}:f==="right"&&b==="left"?p={constraint:!1,minlen:1}:f==="bottom"&&b==="top"?p={constraint:!0,minlen:1}:p={constraint:!0,minlen:2},a.setEdge(g.source,g.target,p)}),et.layout(a);const u=a.graph().width||0,x=a.graph().height||0,v=St(rt(e)),C=vt(rt(e));return{nodes:n.map(g=>{var E;const f=a.node(g.id),{width:b,height:y}=f,w={...g,sourcePosition:v,targetPosition:C,selected:!1},p=f.x,S=f.y;switch((E=g.data)==null?void 0:E.positionType){case"center":w.position={x:p,y:S};break;case"topRight":w.position={x:p+b/2,y:S-y/2};break;case"bottomLeft":w.position={x:p-b/2,y:S+y/2};break;case"bottomRight":w.position={x:p+b/2,y:S+y/2};break;case"topLeft":default:w.position={x:p-b/2,y:S-y/2}}return w}),edges:s,width:u,height:x}},ot={calculate:async(t,s,e)=>{const o=e.nodes||t,r=e.edges||s,d=e.dagreDirection||typeof e.direction=="string"&&(e.direction==="RIGHT"||e.direction==="LEFT"?"LR":"TB")||"TB",l=e.margin??(typeof e.padding=="number"?e.padding:0),h=e.nodeSpacing??50,a=e.layerSpacing??50,n=e.nodeWidth??172,u=e.nodeHeight??36,x=e.layoutHidden??!1;return I(o,r,d,l,h,a,n,u,x)}},nt={dagre:ot};function Nt({initialDirection:t="DOWN",initialAlgorithm:s="layered",initialAutoLayout:e=!0,initialPadding:o=50,initialSpacing:r={node:50,layer:50},initialNodeDimensions:c={width:172,height:36},initialParentResizingOptions:d,includeHidden:l=!1,layoutEngines:h}){const[a,n]=T.useState(t),[u,x]=T.useState(s),[v,C]=T.useState(e),[L,g]=T.useState(!1),[f,b]=T.useState(l),[y,w]=T.useState({...nt,...h}),[p,S]=T.useState({}),[E,M]=T.useState(o),[G,B]=T.useState(r.node||150),[D,z]=T.useState(r.layer||180),[_,m]=T.useState(c.width||100),[W,Z]=T.useState(c.height||100),[Q,$]=T.useState({...Et,...d,enabled:e}),[U,K]=T.useState([]);return{direction:a,algorithm:u,autoLayout:v,layoutInProgress:L,layoutHidden:f,layoutEngines:y,layoutEngineOptions:p,padding:E,nodeSpacing:G,layerSpacing:D,nodeWidth:_,nodeHeight:W,parentResizingOptions:Q,selectedNodes:U,setDirection:n,setAlgorithm:x,setAutoLayout:C,setLayoutInProgress:g,setLayoutHidden:b,setLayoutEngines:w,setLayoutEngineOptions:S,setPadding:M,setNodeSpacing:B,setLayerSpacing:z,setNodeWidth:m,setNodeHeight:Z,setParentResizingOptionsState:$,setSelectedNodes:K}}function Mt({nodes:t,externalNodeIdWithNode:s,externalNodeParentIdMapWithChildIdSet:e,noParentKey:o="no-parent"}){const[r,c]=T.useState(new Map),[d,l]=T.useState(new Map),[h,a]=T.useState({}),[n,u]=T.useState(t.length),[x,v]=T.useState(!1),C=s||r,L=e||d,g=C.size;return T.useEffect(()=>{if(!s||!e){const f=new Map,b=new Map;t.forEach(y=>{var p;f.set(y.id,y);const w=y.parentId||o;b.has(w)||b.set(w,new Set),(p=b.get(w))==null||p.add(y.id)}),s||c(f),e||l(b)}},[t,s,e,o]),T.useEffect(()=>{t.length!==n&&u(t.length)},[t]),T.useEffect(()=>{C.size>0&&L.size>0&&!x&&v(!0)},[C,L,x]),T.useEffect(()=>{const f={};L.forEach((y,w)=>{f[w]=y.size});let b=!1;for(const y in f)if(!h.hasOwnProperty(y)||f[y]!==h[y]){b=!0;break}b&&a(f)},[L]),{nodeIdWithNode:C,nodeParentIdMapWithChildIdSet:L,numberOfNodes:g,nodesLength:n,childrenInitialized:x,parentChildStructure:h}}function Dt({nodes:t,edges:s,selectedNodes:e,layoutHidden:o,calculateLayout:r,updateNodes:c,updateEdges:d,setLayoutInProgress:l,setNodeSpacing:h,setLayerSpacing:a}){const n=k.useReactFlow(),u=T.useRef(null),x=T.useRef(null);return{applyLayout:T.useCallback(async(C=[],L=[])=>{u.current&&u.current.abort();const g=new AbortController;u.current=g;const f=C.length>0?C:t,b=L.length>0?L:s;if(f.length===0)return{nodes:f,edges:b};try{if(l(!0),g.signal.aborted)return{nodes:f,edges:b};const{nodes:y,edges:w}=Tt(f,b,o),p=await r(y,w,e,g.signal);return g.signal.aborted?{nodes:f,edges:b}:(u.current===g&&(c?c(p.nodes):n!=null&&n.setNodes&&n.setNodes(p.nodes),d?d(p.edges):n!=null&&n.setEdges&&n.setEdges(p.edges),x.current&&(x.current.node!==void 0&&h(x.current.node),x.current.layer!==void 0&&a(x.current.layer),x.current=null)),p)}catch(y){return g.signal.aborted||console.error("Error applying layout:",y),{nodes:f,edges:b}}finally{u.current===g&&(l(!1),u.current=null)}},[t,s,e,r,c,d,n,o,l,h,a]),pendingSpacingUpdateRef:x}}const Ot=(t,s,e="no-parent")=>{const o=new Set,r=new Map;t.forEach((l,h)=>{const a=s.get(h);a&&r.set(h,{id:h,node:a,children:[],depth:0})});const c=(l,h)=>{if(o.has(l)||!t.has(l)||!s.get(l))return null;o.add(l);const n=r.get(l);n.depth=h;const u=t.get(l)||new Set;for(const x of u)if(t.has(x)&&s.get(x)){const C=c(x,h+1);C&&n.children.push(C)}return n},d=[];return t.forEach((l,h)=>{const a=s.get(h);if(a){const n=a.parentId;if(!n||n===e){const u=c(h,0);u&&d.push(u)}}}),d};function V(t,s,e="no-parent"){const o=[];let r=t;const c=new Set;for(;r&&r!==e;){if(c.has(r)){console.warn(`Cycle detected in ancestor path for node ${t}`);break}c.add(r),o.push(r);const d=s.get(r);if(!d||!d.parentId){r=e;break}r=d.parentId}return r===e&&o.push(e),o}function O(t,s,e,o="no-parent"){if(t===s)return t;const r=V(t,e,o),c=r.indexOf(s);return c===-1?null:c===0?t:r[c-1]||null}function F(t,s,e,o="no-parent"){const r=V(t,e,o),c=V(s,e,o),d=new Set(c);let l=null,h=-1;for(let x=0;x<r.length;x++)if(d.has(r[x])){l=r[x],h=x;break}if(!l)return{lca:null,sourceChild:null,targetChild:null};const a=c.indexOf(l),n=h>0?r[h-1]:t,u=a>0?c[a-1]:s;return{lca:l,sourceChild:n,targetChild:u}}const At=t=>JSON.parse(JSON.stringify(t)),it=(t,s,e,o,r)=>{const c=At(t);return c.source=s,c.target=e,c.id=o,c.data={...c.data,...r},c},zt=t=>{for(const s of t.values()){const e=new Map;s.forEach(r=>{const c=`${r.source}->${r.target}`,d=e.get(c)||[];d.push(r),e.set(c,d)});const o=new Set;s.forEach(r=>{const c=`${r.source}->${r.target}`,d=`${r.target}->${r.source}`;if(o.has(c)||o.has(d))return;const l=e.get(d);if(!l||l.length===0)return;[...e.get(c)||[],...l].forEach(a=>{a.data={...a.data,isReciprocal:!0}}),o.add(c),o.add(d)})}},Ht=(t,s,e,o)=>{const r=new Map,c=new Map;t.forEach(l=>{const h=r.get(l.target)||[];h.push(l),r.set(l.target,h);const a=c.get(l.source)||[];a.push(l),c.set(l.source,a)});const d=new Set;c.forEach((l,h)=>{const a=r.get(h)||[];a.length!==0&&a.forEach(n=>{l.forEach(u=>{if(n.source===u.target)return;const{lca:x,sourceChild:v,targetChild:C}=F(n.source,u.target,s,o),L=F(n.source,h,s,o).lca,g=F(h,u.target,s,o).lca;if(!L||L!==g)return;const f=O(n.source,L,s,o),b=O(u.target,L,s,o),y=O(h,L,s,o);if(!f||!b||!y||f!==b||f===y)return;const w=f,p=O(n.source,w,s,o),S=O(u.target,w,s,o);if(!x||!v||!C||!p||!S||p===S)return;const E=`synthetic_bridge_${n.id}_${h}_${u.id}_${w}`;if(d.has(E))return;const M=it(n,p,S,E,{isTemporary:!0,isSyntheticBridge:!0,bridgeNode:h,bridgeBranch:y,anchorBranch:f,originalSource:n.source,originalTarget:u.target});e.has(w)||e.set(w,[]),e.get(w).push(M),d.add(E)})})})};function ct(t,s,e="no-parent"){const o=new Map;for(const r of t){const{lca:c,sourceChild:d,targetChild:l}=F(r.source,r.target,s,e);if(c&&d&&l&&d!==l){const h=it(r,d,l,`temp_${r.id}_${c}`,{isTemporary:!0,originalSource:r.source,originalTarget:r.target});o.has(c)||o.set(c,[]),o.get(c).push(h)}}return Ht(t,s,o,e),zt(o),o}const Y=10,at=(t,s)=>t.find(e=>e.id===s),lt=(t,s,e)=>{var l,h;const o=e.get(t);if(!o)return null;let r=o.position.x+(o.width||Number((l=o.style)==null?void 0:l.width)||172)/2,c=o.position.y+(o.height||Number((h=o.style)==null?void 0:h.height)||36)/2,d=o.parentId;for(;d&&d!==s;){const a=e.get(d);if(!a)break;r+=a.position.x,c+=a.position.y,d=a.parentId}return{x:r,y:c}},A=t=>{var s,e;return{width:t.width||Number((s=t.style)==null?void 0:s.width)||172,height:t.height||Number((e=t.style)==null?void 0:e.height)||36}},dt=t=>{const{width:s,height:e}=A(t);return{x:t.position.x+s/2,y:t.position.y+e/2}},Pt=(t,s)=>{if(t.length===0)return{nodes:t,width:0,height:0};let e=Number.POSITIVE_INFINITY,o=Number.POSITIVE_INFINITY,r=Number.NEGATIVE_INFINITY,c=Number.NEGATIVE_INFINITY;t.forEach(n=>{const{width:u,height:x}=A(n);e=Math.min(e,n.position.x),o=Math.min(o,n.position.y),r=Math.max(r,n.position.x+u),c=Math.max(c,n.position.y+x)});const d=s-e,l=s-o;t.forEach(n=>{n.position={x:n.position.x+d,y:n.position.y+l}});const h=r-e+s*2,a=c-o+s*2;return{nodes:t,width:h,height:a}},Ft=(t,s,e,o)=>{if(!(t.length<2||o.size===0))if(s==="TB"||s==="BT"){const r=[...t].sort((c,d)=>c.position.x-d.position.x);r.forEach((c,d)=>{if(!o.has(c.id))return;let l=c.position.x+A(c).width;for(let h=d+1;h<r.length;h++){const a=r[h],{width:n}=A(a),u=l+e;a.position.x<u&&(a.position.x=u),l=a.position.x+n}})}else{const r=[...t].sort((c,d)=>c.position.y-d.position.y);r.forEach((c,d)=>{if(!o.has(c.id))return;let l=c.position.y+A(c).height;for(let h=d+1;h<r.length;h++){const a=r[h],{height:n}=A(a),u=l+e;a.position.y<u&&(a.position.y=u),l=a.position.y+n}})}},It=(t,s,e,o)=>{const r=new Map,c=new Map;s.forEach(l=>{const h=r.get(l.target)||[];h.push(l),r.set(l.target,h);const a=c.get(l.source)||[];a.push(l),c.set(l.source,a)});const d=new Map;return c.forEach((l,h)=>{const a=r.get(h)||[];a.length!==0&&a.forEach(n=>{l.forEach(u=>{if(n.source===u.target)return;const x=F(n.source,h,e,o).lca,v=F(h,u.target,e,o).lca;if(x!==t||v!==t)return;const C=O(n.source,t,e,o),L=O(u.target,t,e,o),g=O(h,t,e,o);if(!C||!L||!g||C!==L||C===g)return;const f=O(n.source,C,e,o),b=O(u.target,C,e,o);if(!f||!b||f===b)return;const y=`${C}:${g}:${f}:${b}`;d.set(y,{anchorContainerId:C,bridgeContainerId:g,sourceNodeId:f,targetNodeId:b})})})}),[...d.values()]},Gt=(t,s,e,o,r,c,d)=>{const l=It(s,r,c,d),h=new Set;return l.forEach(a=>{const n=at(t,a.anchorContainerId),u=at(t,a.bridgeContainerId);if(!n||!u)return;const x=lt(a.sourceNodeId,s,c),v=lt(a.targetNodeId,s,c);if(!x||!v)return;const{width:C,height:L}=A(u),{width:g,height:f}=A(n),b=dt(n),y=dt(u);if(e==="TB"||e==="BT"){const w=(x.y+v.y)/2;u.position.y=w-L/2;const p=y.x>=b.x,S=p?u.position.x-(n.position.x+g):n.position.x-(u.position.x+C),E=Math.max(o,S);u.position.x=p?n.position.x+g+E:n.position.x-C-E}else{const w=(x.x+v.x)/2;u.position.x=w-C/2;const p=y.y>=b.y,S=p?u.position.y-(n.position.y+f):n.position.y-(u.position.y+L),E=Math.max(o,S);u.position.y=p?n.position.y+f+E:n.position.y-L-E}h.add(u.id)}),h},ht=async(t,s,e,o,r,c=Y,d=50,l=50,h=172,a=36,n=I,u=!1,x="no-parent")=>{const v=ct(r,o,x),{updatedNodes:C}=await j(t,s,e,o,r,c,d,l,h,a,n,u,v,x),L=o.get(t);if(!L)return{updatedNodes:C,updatedEdges:r};const{updatedNodes:g}=await ht(L.parentId||x,s,e,o,r,c,d,l,h,a,n,u,x);return{updatedNodes:[...g,...C],updatedEdges:r}},j=async(t,s,e,o,r,c=Y,d=50,l=50,h=172,a=36,n=I,u=!1,x=new Map,v="no-parent")=>{const C=e.get(t);if(!C||C.size===0)return{updatedNodes:[]};const L=[];if(C.forEach(E=>{const M=o.get(E);M&&L.push(M)}),L.length===0)return{updatedNodes:[]};let g=s;const f=o.get(t);f&&f.data.layoutDirection&&(g=f.data.layoutDirection);const b=x.get(t)||[],{nodes:y,edges:w}=await n(L,b,g,c,d,l,h,a,u);y.forEach(E=>{o.set(E.id,E)});const p=Gt(y,t,g,d,r,o,v);Ft(y,g,d,p),y.forEach(E=>{o.set(E.id,E)});const S=Pt(y,c);return S.nodes.forEach(E=>{o.set(E.id,E)}),f&&S.width&&S.height&&_t(f,S.width,S.height),{updatedNodes:[...S.nodes],udpatedParentNode:f||void 0}},_t=(t,s,e)=>(t.style||(t.style={}),t.width=s,t.height=e,t.measured={width:s,height:e},t.style.width=s,t.style.height=e,t),mt=async(t,s,e,o,r,c=Y,d=50,l=50,h=172,a=36,n=I,u=!1,x="no-parent")=>{let v=[];const C=ct(r,o,x),L=new Map;let g=0;const f=(y,w)=>{w>g&&(g=w);for(const p of y)L.has(w)||L.set(w,[]),L.get(w).push(p.id),p.children.length>0&&f(p.children,w+1)};f(t,0);for(let y=g;y>=0;y--){const w=L.get(y)||[],p=await Promise.all(w.map(S=>j(S,s,e,o,r,c,d,l,h,a,n,u,C,x)));for(const{updatedNodes:S}of p)v=[...S,...v]}const{updatedNodes:b}=await j(x,s,e,o,r,c,d,l,h,a,n,u,C,x);return v=[...b,...v],{updatedNodes:v,updatedEdges:r}},Ut=(t,s,e,o="no-parent")=>{const r=t.map(a=>a.id),c=t.map(a=>{var n;return((n=e.get(a.id))==null?void 0:n.parentId)||a.parentId}).filter(a=>!!a),l=Array.from(new Set([...r,...c])).filter(a=>s.has(a)),h=l.filter(a=>{const n=e.get(a);return n?!n.parentId||!l.includes(n.parentId):!0});return h.length===0?[o]:h},Vt=async(t,s,e)=>{const{dagreDirection:o,nodeParentIdMapWithChildIdSet:r,nodeIdWithNode:c,nodes:d,edges:l,margin:h,nodeSpacing:a,layerSpacing:n,nodeWidth:u,nodeHeight:x,layoutHidden:v=!1,noParentKey:C="no-parent"}=s,L=Ut(t,r,c,C);if(L.length===0)return{nodes:d,edges:l};const g=new Map,f=new Map;if(e!=null&&e.aborted)return{nodes:d,edges:l};(await Promise.all(L.map(async p=>e!=null&&e.aborted?{updatedNodes:[],updatedEdges:[]}:ht(p,o,r,c,l,h,a,n,u,x,void 0,v)))).forEach(({updatedNodes:p,updatedEdges:S})=>{p.forEach(E=>{g.set(E.id,E)}),S.forEach(E=>{f.set(E.id,E)})});const y=d.map(p=>g.has(p.id)?g.get(p.id):p),w=l.map(p=>f.has(p.id)?f.get(p.id):p);return{nodes:y,edges:w}},Yt=(t,s,e,o,r,c,d,l,h=172,a=36,n=!1,u="no-parent")=>({calculateLayout:T.useCallback(async(v,C,L,g)=>{if(!(t[e]||t.dagre))return console.error(`Layout engine "${e}" not found`),{nodes:v,edges:C};const b=n?v:v.filter(B=>!B.hidden),y=new Set(b.map(B=>B.id)),w=n?C:C.filter(B=>y.has(B.source)&&y.has(B.target)),p=Lt(s),S=o.padding.horizontal;let E=[],M=[];if(L&&L.length>0){const B=n?L:L.filter(z=>!z.hidden),D=await Vt(B,{dagreDirection:p,nodeParentIdMapWithChildIdSet:r,nodeIdWithNode:c,nodes:b,edges:w,margin:S,nodeSpacing:d,layerSpacing:l,nodeWidth:h,nodeHeight:a,layoutHidden:n,noParentKey:u},g);E=D.nodes,M=D.edges}else{if(g!=null&&g.aborted)return{nodes:v,edges:C};const B=Ot(r,c,u),D=await mt(B,p,r,c,w,S,d,l,h,a,void 0,n,u);E=D.updatedNodes,M=D.updatedEdges}return{nodes:v.map(B=>!n&&B.hidden?B:E.find(z=>z.id===B.id)||B),edges:M}},[e,s,t,o.padding.horizontal,r,c,d,l,h,a,n,u])});function jt({children:t,initialDirection:s="DOWN",initialAlgorithm:e="layered",initialAutoLayout:o=!0,initialPadding:r=50,initialSpacing:c={node:50,layer:50},initialNodeDimensions:d={width:172,height:36},initialParentResizingOptions:l,includeHidden:h=!1,layoutEngines:a,updateNodes:n,updateEdges:u,nodeParentIdMapWithChildIdSet:x,nodeIdWithNode:v,noParentKey:C="no-parent",disableAutoLayoutEffect:L=!1}){const g=k.useNodes(),f=k.useEdges(),{direction:b,algorithm:y,autoLayout:w,layoutInProgress:p,layoutHidden:S,layoutEngines:E,layoutEngineOptions:M,padding:G,nodeSpacing:B,layerSpacing:D,nodeWidth:z,nodeHeight:_,parentResizingOptions:m,selectedNodes:W,setDirection:Z,setAlgorithm:Q,setAutoLayout:$,setLayoutInProgress:U,setLayoutHidden:K,setLayoutEngines:gt,setLayoutEngineOptions:qt,setPadding:Jt,setNodeSpacing:pt,setLayerSpacing:ft,setNodeWidth:Wt,setNodeHeight:Zt,setParentResizingOptionsState:yt,setSelectedNodes:xt}=Nt({initialDirection:s,initialAlgorithm:e,initialAutoLayout:o,initialPadding:r,initialSpacing:c,initialNodeDimensions:d,initialParentResizingOptions:l,includeHidden:h,layoutEngines:a}),{nodeIdWithNode:R,nodeParentIdMapWithChildIdSet:wt,numberOfNodes:Qt,nodesLength:$t,childrenInitialized:Ct,parentChildStructure:Kt}=Mt({nodes:g,externalNodeIdWithNode:v,externalNodeParentIdMapWithChildIdSet:x,noParentKey:C}),Rt=T.useCallback(({nodes:H})=>{xt(H)},[xt]);k.useOnSelectionChange({onChange:Rt});const{calculateLayout:te}=Yt(E,b,y,m,wt,R,B,D,z,_,S,C),{applyLayout:bt}=Dt({nodes:g,edges:f,selectedNodes:W,layoutHidden:S,calculateLayout:te,updateNodes:n,updateEdges:u,setLayoutInProgress:U,setNodeSpacing:pt,setLayerSpacing:ft}),ee=T.useCallback((H,tt)=>{gt(oe=>({...oe,[H]:tt}))},[gt]),se=T.useCallback(H=>{yt(tt=>({...tt,...H,enabled:w}))},[w,yt]);T.useEffect(()=>{var H;L||R.has((H=g[g.length-1])==null?void 0:H.id)&&Ct&&w&&bt()},[Ct,w,b,Qt,B,D,Kt,$t]);const re={direction:b,algorithm:y,autoLayout:w,layoutInProgress:p,padding:G,nodeSpacing:B,layerSpacing:D,nodeWidth:z,nodeHeight:_,layoutHidden:S,parentResizingOptions:m,layoutEngines:E,layoutEngineOptions:M,nodeParentIdMapWithChildIdSet:wt,nodeIdWithNode:R,noParentKey:C,updateNodes:n,updateEdges:u,setDirection:Z,setAlgorithm:Q,setAutoLayout:$,setLayoutInProgress:U,setPadding:Jt,setNodeSpacing:pt,setLayerSpacing:ft,setNodeWidth:Wt,setNodeHeight:Zt,setLayoutHidden:K,setParentResizingOptions:se,setLayoutEngineOptions:qt,applyLayout:bt,clearLayoutCache:()=>{},registerLayoutEngine:ee};return i.jsx(st.Provider,{value:re,children:t})}const X=({compact:t=!1})=>{const{direction:s,setDirection:e,clearLayoutCache:o}=P(),r=c=>{e(c),o&&o()};return t?i.jsx(k.ControlButton,{onClick:()=>r(s==="DOWN"?"RIGHT":"DOWN"),title:`Switch to ${s==="DOWN"?"horizontal":"vertical"} layout`,children:i.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:s==="DOWN"?i.jsx("path",{d:"M4 12h16M16 6l6 6-6 6"}):i.jsx("path",{d:"M12 4v16M6 16l6 6 6-6"})})}):i.jsxs(i.Fragment,{children:[i.jsx(k.ControlButton,{onClick:()=>r("DOWN"),className:s==="DOWN"?"selected":"",title:"Top to Bottom",children:i.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:i.jsx("path",{d:"M12 4v16M6 16l6 6 6-6"})})}),i.jsx(k.ControlButton,{onClick:()=>r("RIGHT"),className:s==="RIGHT"?"selected":"",title:"Left to Right",children:i.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:i.jsx("path",{d:"M4 12h16M16 6l6 6-6 6"})})}),i.jsx(k.ControlButton,{onClick:()=>r("LEFT"),className:s==="LEFT"?"selected":"",title:"Right to Left",children:i.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:i.jsx("path",{d:"M20 12H4M8 6L2 12l6 6"})})}),i.jsx(k.ControlButton,{onClick:()=>r("UP"),className:s==="UP"?"selected":"",title:"Bottom to Top",children:i.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:i.jsx("path",{d:"M12 20V4M6 8l6-6 6 6"})})})]})},q=({compact:t=!1})=>{const{nodeSpacing:s,layerSpacing:e,setNodeSpacing:o,setLayerSpacing:r,clearLayoutCache:c}=P(),[d,l]=T.useState(!1),h=n=>{o(n),c&&c()},a=n=>{r(n),c&&c()};return t?i.jsxs("div",{style:{position:"relative"},children:[i.jsx(k.ControlButton,{onClick:()=>l(!d),title:"Adjust node and layer spacing",children:i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:[i.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("path",{d:"M7 10v4M17 10v4M10 7h4M10 17h4"})]})}),d&&i.jsxs("div",{className:"react-flow-spacing-dropdown",style:{position:"absolute",right:"0",top:"100%",marginTop:"8px",background:"white",border:"1px solid #ddd",borderRadius:"4px",padding:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.1)",zIndex:10,minWidth:"200px"},children:[i.jsxs("div",{style:{marginBottom:"12px"},children:[i.jsxs("div",{style:{fontWeight:"bold",marginBottom:"4px"},children:["Node Spacing: ",s,"px"]}),i.jsx("div",{style:{display:"flex",gap:"4px"},children:[50,100,150,200].map(n=>i.jsx("button",{onClick:()=>h(n),style:{background:s===n?"#0041d0":"#f5f5f5",color:s===n?"white":"inherit",border:"1px solid #ddd",borderRadius:"4px",padding:"4px 8px",cursor:"pointer"},children:n},n))})]}),i.jsxs("div",{children:[i.jsxs("div",{style:{fontWeight:"bold",marginBottom:"4px"},children:["Layer Spacing: ",e,"px"]}),i.jsx("div",{style:{display:"flex",gap:"4px"},children:[50,100,150,200].map(n=>i.jsx("button",{onClick:()=>a(n),style:{background:e===n?"#0041d0":"#f5f5f5",color:e===n?"white":"inherit",border:"1px solid #ddd",borderRadius:"4px",padding:"4px 8px",cursor:"pointer"},children:n},n))})]}),i.jsx("div",{style:{marginTop:"12px",textAlign:"right"},children:i.jsx("button",{onClick:()=>l(!1),style:{background:"#f5f5f5",border:"1px solid #ddd",borderRadius:"4px",padding:"4px 8px",cursor:"pointer"},children:"Close"})})]})]}):i.jsxs("div",{className:"spacing-controls",children:[i.jsxs(k.ControlButton,{onClick:()=>h(Math.max(50,s-25)),title:"Decrease node spacing",children:[i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:[i.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("line",{x1:"7",y1:"10",x2:"7",y2:"14"}),i.jsx("line",{x1:"17",y1:"10",x2:"17",y2:"14"}),i.jsx("line",{x1:"10",y1:"7",x2:"14",y2:"7"}),i.jsx("line",{x1:"10",y1:"17",x2:"14",y2:"17"})]}),i.jsx("span",{style:{marginLeft:"4px"},children:"-"})]}),i.jsxs("div",{style:{display:"inline-flex",alignItems:"center",padding:"5px 10px",fontSize:"12px",background:"#f8f8f8",borderRadius:"4px",margin:"0 4px",border:"1px solid #ddd"},children:[s,"px"]}),i.jsxs(k.ControlButton,{onClick:()=>h(Math.min(300,s+25)),title:"Increase node spacing",children:[i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:[i.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),i.jsx("line",{x1:"7",y1:"10",x2:"7",y2:"14"}),i.jsx("line",{x1:"17",y1:"10",x2:"17",y2:"14"}),i.jsx("line",{x1:"10",y1:"7",x2:"14",y2:"7"}),i.jsx("line",{x1:"10",y1:"17",x2:"14",y2:"17"})]}),i.jsx("span",{style:{marginLeft:"4px"},children:"+"})]}),i.jsx("div",{style:{display:"inline-block",width:"1px",height:"24px",background:"#ddd",margin:"0 10px"}}),i.jsxs(k.ControlButton,{onClick:()=>a(Math.max(50,e-25)),title:"Decrease layer spacing",children:[i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:[i.jsx("line",{x1:"4",y1:"6",x2:"20",y2:"6"}),i.jsx("line",{x1:"4",y1:"12",x2:"20",y2:"12"}),i.jsx("line",{x1:"4",y1:"18",x2:"20",y2:"18"})]}),i.jsx("span",{style:{marginLeft:"4px"},children:"-"})]}),i.jsxs("div",{style:{display:"inline-flex",alignItems:"center",padding:"5px 10px",fontSize:"12px",background:"#f8f8f8",borderRadius:"4px",margin:"0 4px",border:"1px solid #ddd"},children:[e,"px"]}),i.jsxs(k.ControlButton,{onClick:()=>a(Math.min(300,e+25)),title:"Increase layer spacing",children:[i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"2",fill:"none",children:[i.jsx("line",{x1:"4",y1:"6",x2:"20",y2:"6"}),i.jsx("line",{x1:"4",y1:"12",x2:"20",y2:"12"}),i.jsx("line",{x1:"4",y1:"18",x2:"20",y2:"18"})]}),i.jsx("span",{style:{marginLeft:"4px"},children:"+"})]})]})},J=({compact:t=!1})=>{const{autoLayout:s,setAutoLayout:e}=P(),o=()=>{e(!s)};return i.jsx(k.ControlButton,{onClick:o,className:s?"selected":"",title:s?"Disable automatic layout":"Enable automatic layout",style:{color:s?"green":"inherit"},children:t?i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"1.5",fill:"none",children:[i.jsx("rect",{x:"4",y:"4",width:"4",height:"4",rx:"1"}),i.jsx("rect",{x:"4",y:"16",width:"4",height:"4",rx:"1"}),i.jsx("rect",{x:"16",y:"10",width:"4",height:"4",rx:"1"}),i.jsxs(i.Fragment,{children:[i.jsx("path",{d:"M8 6c6 0 3 8 8 6"}),i.jsx("path",{d:"M8 18c3-3 2-8 6-6"})]})]}):i.jsxs(i.Fragment,{children:["Auto-Layout ",s?"ON":"OFF"]})})},ut=({compact:t=!1})=>{const{layoutInProgress:s,setLayoutInProgress:e,applyLayout:o}=P(),r=async()=>{if(!s)try{e(!0),await o()}catch(c){console.error("Error applying layout:",c)}};return i.jsxs(k.ControlButton,{onClick:r,title:"Apply layout",disabled:s,style:{color:s?"#999":"#000"},children:[i.jsxs("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",strokeWidth:"1.5",fill:"none",children:[i.jsx("rect",{x:"3",y:"3",width:"5",height:"5",rx:"1"}),i.jsx("rect",{x:"16",y:"3",width:"5",height:"5",rx:"1"}),i.jsx("rect",{x:"3",y:"16",width:"5",height:"5",rx:"1"}),i.jsx("rect",{x:"16",y:"16",width:"5",height:"5",rx:"1"}),i.jsx("path",{d:"M8 5.5h8M5.5 8v8M18.5 8v8M8 18.5h8"}),i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("path",{d:"M11 10.5v3l2-1.5z",fill:"currentColor"})]}),!t&&i.jsx("span",{style:{marginLeft:"4px"},children:"Apply Layout"})]})},Xt=({showDirectionControls:t=!0,showSpacingControls:s=!0,showAutoLayoutToggle:e=!0,showApplyLayoutButton:o=!0,standalone:r=!1,position:c="top-right"})=>{const d=P(),{autoLayout:l}=d;return r?i.jsxs(k.Controls,{position:c,showZoom:!1,showFitView:!1,showInteractive:!1,children:[o&&!l&&i.jsx(ut,{compact:!0}),t&&i.jsx(X,{compact:!0}),s&&i.jsx(q,{compact:!0}),e&&i.jsx(J,{compact:!0})]}):i.jsxs(i.Fragment,{children:[o&&!l&&i.jsx(ut,{compact:!0}),t&&i.jsx(X,{compact:!0}),s&&i.jsx(q,{compact:!0}),e&&i.jsx(J,{compact:!0})]})};N.AutoLayoutToggle=J,N.DagreEngine=ot,N.DirectionControls=X,N.LayoutControls=Xt,N.LayoutProvider=jt,N.SpacingControls=q,N.engines=nt,N.useLayoutContext=P,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});