@barefootjs/xyflow 0.30.6 → 0.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -90,6 +90,3 @@ path.bf-flow__edge.bf-flow__edge--reconnect-hover { stroke: var(--text-primary,
90
90
  /* Child nodes render above parents via z-index from @xyflow/system */
91
91
  }
92
92
  `;import{untrack as r0}from"@barefootjs/client";function K9(f,_,Q,J,$){let q=f,F=_,K=J??null,A=$??null;if(Q==="target"){q=_,F=f;let U=K;K=A,A=U}return{source:q,target:F,sourceHandle:K,targetHandle:A}}function hf(f,_){if(!f.isValidConnection)return!0;return f.isValidConnection(_)}function X$(f,_,Q,J,$,q){f.addEventListener("mousedown",(F)=>{if(F.button!==0)return;if(!r0(q.nodesDraggable))return;F.stopPropagation(),F.preventDefault();let K=f.getBoundingClientRect(),A=J.getBoundingClientRect(),[,,U]=q.getTransform(),W=r0(q.viewport),G=(K.left+K.width/2-A.left-W.x)/U,j=(K.top+K.height/2-A.top-W.y)/U,M=document.createElementNS(xf,"svg");M.style.position="absolute",M.style.top="0",M.style.left="0",M.style.width="100%",M.style.height="100%",M.style.overflow="visible",M.style.pointerEvents="none",M.style.zIndex="10",J.appendChild(M);let Y=document.createElementNS(xf,"g");M.appendChild(Y);let w=document.createElementNS(xf,"path");w.setAttribute("fill","none");let L=q.connectionLineStyle;w.setAttribute("stroke",L?.stroke??"#b1b1b7"),w.setAttribute("stroke-width",L?.strokeWidth??"1"),Y.appendChild(w);let Z=null,C=null,H=30;function X(D,R){let I=J.querySelectorAll(".bf-flow__handle"),N=null,T=H;for(let b of I){if(b===f)continue;if(!b.dataset.nodeId||b.dataset.nodeId===_)continue;if((b.classList.contains("bf-flow__handle--target")?"target":"source")===Q)continue;let B=b.getBoundingClientRect(),O=B.left+B.width/2,V=B.top+B.height/2,z=Math.hypot(D-O,R-V);if(z<T)T=z,N=b}return N}let S=(D)=>{let R=J.getBoundingClientRect(),[,,I]=q.getTransform(),N=r0(q.viewport),T=X(D.clientX,D.clientY),b,k;if(T){let V=T.getBoundingClientRect();b=(V.left+V.width/2-R.left-N.x)/I,k=(V.top+V.height/2-R.top-N.y)/I}else b=(D.clientX-R.left-N.x)/I,k=(D.clientY-R.top-N.y)/I;let[B]=Kf({sourceX:G,sourceY:j,sourcePosition:Q==="source"?v.Bottom:v.Top,targetX:b,targetY:k,targetPosition:Q==="source"?v.Top:v.Bottom});w.setAttribute("d",B);let O=r0(q.viewport);if(Y.setAttribute("transform",`translate(${O.x}, ${O.y}) scale(${O.zoom})`),Z&&Z!==T)Z.classList.remove("valid","invalid");if(C=null,T){let V=T.classList.contains("bf-flow__handle--target")?"target":"source",z=Q!==V,u=f.getAttribute("data-handleid")??null,E=T.getAttribute("data-handleid")??null,x=K9(_,T.dataset.nodeId,Q,u,E),h=z&&hf(q,x);if(T.classList.remove("valid","invalid"),T.classList.add(h?"valid":"invalid"),Z=T,h)C=T}else{M.style.display="none";let V=document.elementFromPoint(D.clientX,D.clientY);M.style.display="";let z=V?.closest?.(".bf-flow__handle");if(z&&z!==f&&z.dataset.nodeId&&z.dataset.nodeId!==_){let u=z.classList.contains("bf-flow__handle--target")?"target":"source",E=Q!==u,x=f.getAttribute("data-handleid")??null,h=z.getAttribute("data-handleid")??null,P=K9(_,z.dataset.nodeId,Q,x,h),l=E&&hf(q,P);if(z.classList.remove("valid","invalid"),!l)z.classList.add("invalid");Z=z}else Z=null}},y=(D)=>{if(document.removeEventListener("mousemove",S),document.removeEventListener("mouseup",y),Z)Z.classList.remove("valid","invalid");let R=C;if(!R){M.style.display="none";let I=document.elementFromPoint(D.clientX,D.clientY);M.style.display="",R=I?.closest?.(".bf-flow__handle")}if(R&&R.dataset.nodeId&&R.dataset.nodeId!==_){let I=R.dataset.nodeId,N=R.classList.contains("bf-flow__handle--target")?"target":"source",T=Q!==N,b=f.getAttribute("data-handleid")??null,k=R.getAttribute("data-handleid")??null,B=K9(_,I,Q,b,k);if(T&&hf(q,B))if(q.onConnect)q.onConnect(B);else{let z={id:`e-${B.source}-${B.target}-${Date.now()}`,source:B.source,target:B.target,sourceHandle:B.sourceHandle??void 0,targetHandle:B.targetHandle??void 0};q.addEdge(z)}}M.remove()};document.addEventListener("mousemove",S),document.addEventListener("mouseup",y)})}function L$(f,_,Q,J,$,q){f.addEventListener("mousedown",(F)=>{if(F.button!==0)return;F.stopPropagation(),F.preventDefault();let K=Q==="source"?_.target:_.source,U=r0(q.nodeLookup).get(K);if(!U)return;let W=U.measured.width??150,G=U.measured.height??40,j=U.internals.positionAbsolute,M=j.x+W/2,Y=Q==="source"?j.y:j.y+G,w=$.querySelector(`.bf-flow__edge[data-id="${_.id}"]`),L=$.querySelector(`path[data-hit-id="${_.id}"]`);if(w)w.style.opacity="0.2";if(L)L.style.display="none";let Z=document.createElementNS(xf,"path");Z.setAttribute("fill","none");let C=q.connectionLineStyle;Z.setAttribute("stroke",C?.stroke??"#b1b1b7"),Z.setAttribute("stroke-width",C?.strokeWidth??"1"),Z.setAttribute("pointer-events","none"),$.appendChild(Z);let H=null,X=(y)=>{let D=J.getBoundingClientRect(),[,,R]=q.getTransform(),I=r0(q.viewport),N=(y.clientX-D.left-I.x)/R,T=(y.clientY-D.top-I.y)/R,b=Q==="source"?v.Top:v.Bottom,k=Q==="source"?v.Bottom:v.Top,[B]=Kf({sourceX:M,sourceY:Y,sourcePosition:b,targetX:N,targetY:T,targetPosition:k});Z.setAttribute("d",B);let V=document.elementFromPoint(y.clientX,y.clientY)?.closest?.(".bf-flow__handle");if(H&&H!==V)H.classList.remove("invalid");if(V&&V.dataset.nodeId&&V.dataset.nodeId!==K){let z=V.dataset.nodeId,E=(V.classList.contains("bf-flow__handle--target")?"target":"source")==="target"?{source:K,target:z,sourceHandle:null,targetHandle:null}:{source:z,target:K,sourceHandle:null,targetHandle:null},x=hf(q,E);if(V.classList.remove("invalid"),!x)V.classList.add("invalid");H=V}else H=null},S=(y)=>{if(document.removeEventListener("mousemove",X),document.removeEventListener("mouseup",S),H)H.classList.remove("invalid");if(w)w.style.opacity="";if(L)L.style.display="";let R=document.elementFromPoint(y.clientX,y.clientY)?.closest?.(".bf-flow__handle");if(R&&R.dataset.nodeId&&R.dataset.nodeId!==K){let I=R.dataset.nodeId,T=(R.classList.contains("bf-flow__handle--target")?"target":"source")==="target"?{source:K,target:I,sourceHandle:null,targetHandle:null}:{source:I,target:K,sourceHandle:null,targetHandle:null};if(hf(q,T)){if(q.onReconnect)q.onReconnect(_,T);let k=r0(q.edges),B=V_(_,T,k);q.setEdges(B)}}Z.remove()};document.addEventListener("mousemove",X),document.addEventListener("mouseup",S)})}function w$(f,_,Q){let J=_.call(f,Q);if(J instanceof Node)f.appendChild(J)}import{onCleanup as T$,untrack as vf}from"@barefootjs/client";function O$(f,_,Q,J={}){let{minWidth:$=10,minHeight:q=10,maxWidth:F=Number.MAX_SAFE_INTEGER,maxHeight:K=Number.MAX_SAFE_INTEGER,keepAspectRatio:A=!1,variant:U=Y0.Handle,onResizeStart:W,onResize:G,onResizeEnd:j,shouldResize:M,isVisible:Y=!0,color:w}=J;if(!Y)return()=>{};let L=typeof U==="string"?U==="line"?Y0.Line:Y0.Handle:U,Z=L===Y0.Line?y6:E6;f.classList.add("bf-flow__node--resizable");let C=document.createElement("div");C.className="bf-flow__node-resizer",f.appendChild(C);let H=[];for(let S of Z){let y=document.createElement("div");if(y.className=`bf-flow__resize-handle bf-flow__resize-handle--${S}`,L===Y0.Line)y.classList.add("bf-flow__resize-handle--line");else y.classList.add("bf-flow__resize-handle--corner");if(y.dataset.position=S,w)y.style.setProperty("--bf-resize-color",w);C.appendChild(y);let D=u6({domNode:y,nodeId:_,getStoreItems:()=>{let N=vf(Q.nodeLookup),T=Q.getTransform();return{nodeLookup:N,transform:T,snapGrid:Q.snapToGrid?Q.snapGrid:void 0,snapToGrid:Q.snapToGrid,nodeOrigin:Q.nodeOrigin,paneDomNode:vf(Q.domNode)}},onChange:(N,T)=>{let b=vf(Q.nodeLookup),k=b.get(_);if(!k)return;if(N.width!=null)k.measured.width=N.width,f.style.width=`${N.width}px`;if(N.height!=null)k.measured.height=N.height,f.style.height=`${N.height}px`;if(N.x!=null||N.y!=null){let V=N.x??k.internals.positionAbsolute.x,z=N.y??k.internals.positionAbsolute.y;k.internals.positionAbsolute={x:V,y:z},k.internals.userNode.position={x:V,y:z},f.style.transform=`translate(${V}px, ${z}px)`}for(let V of T){let z=b.get(V.id);if(z)z.internals.positionAbsolute=V.position,z.internals.userNode.position=V.position}let B=new Map;B.set(_,{id:_,nodeElement:f,force:!0});let O=vf(Q.parentLookup);z6(B,b,O,vf(Q.domNode),Q.nodeOrigin,Q.nodeExtent),Q.triggerPositionUpdate()},onEnd:(N)=>{Q.setNodes((T)=>T.map((b)=>b.id===_?{...b,position:{x:N.x,y:N.y},measured:{width:N.width,height:N.height},style:{...b.style,width:N.width,height:N.height}}:b))}}),R=L===Y0.Line,I;if(R){if(S==="left"||S==="right")I="horizontal";else if(S==="top"||S==="bottom")I="vertical"}D.update({controlPosition:S,boundaries:{minWidth:$,minHeight:q,maxWidth:F,maxHeight:K},keepAspectRatio:A,resizeDirection:I,onResizeStart:W,onResize:G,onResizeEnd:j,shouldResize:M}),H.push(D)}let X=()=>{for(let S of H)S.destroy();C.remove(),f.classList.remove("bf-flow__node--resizable")};return T$(X),X}var R$="bf-flow",z$="bf-flow__viewport",H$="bf-flow__edges",D$="bf-flow__nodes",C$="bf-flow__node",I$="bf-flow__node--group",S$="bf-flow__node--child",E$="bf-flow__node--selected",y$="bf-flow__node--custom",N$="bf-flow__edge",u$="bf-flow__edge--selected",b$="bf-flow__edge--animated",x$="bf-flow__handle",k$="bf-flow__handle--target",P$="bf-flow__handle--source",h$="bf-flow__controls",v$="bf-flow__controls-button",m$="bf-flow__minimap",g$="bf-flow__minimap-mask",p$="xyflow__viewport";import{untrack as U0}from"@barefootjs/client";function c$(f){let _=j0();_.setNodes(f);function Q(J){_.setNodes(($)=>a$($,J))}return[_.nodes,_.setNodes,Q]}function l$(f){let _=j0();_.setEdges(f);function Q(J){_.setEdges(($)=>d$($,J))}return[_.edges,_.setEdges,Q]}function r$(){let f=j0();return{getNodes:()=>U0(f.nodes),getEdges:()=>U0(f.edges),getNode:(_)=>U0(f.nodes).find((Q)=>Q.id===_),getZoom:()=>U0(f.viewport).zoom,getViewport:()=>U0(f.viewport),setNodes:f.setNodes,setEdges:f.setEdges,setViewport:(_)=>{let Q=U0(f.panZoom);if(Q)Q.setViewport(_)},setCenter:(_,Q,J)=>{let $=U0(f.panZoom);if(!$)return;let q=U0(f.width),F=U0(f.height),K=J?.zoom??U0(f.viewport).zoom;$.setViewport({x:q/2-_*K,y:F/2-Q*K,zoom:K},{duration:J?.duration})},fitView:f.fitView,zoomIn:(_)=>{U0(f.panZoom)?.scaleBy(1.2,_)},zoomOut:(_)=>{U0(f.panZoom)?.scaleBy(0.8333333333333334,_)},zoomTo:(_,Q)=>{U0(f.panZoom)?.scaleTo(_,Q)},updateNode:(_,Q)=>{f.setNodes((J)=>J.map(($)=>{if($.id!==_)return $;let q=typeof Q==="function"?Q($):Q;return{...$,...q}}))},updateNodeData:(_,Q)=>{f.setNodes((J)=>J.map(($)=>{if($.id!==_)return $;let q=typeof Q==="function"?Q($.data):Q;return{...$,data:{...$.data,...q}}}))},addEdges:(_)=>{f.setEdges((Q)=>[...Q,..._])},deleteElements:f.deleteElements,screenToFlowPosition:(_)=>{let Q=U0(f.domNode);if(!Q)return _;let J=Q.getBoundingClientRect(),$=f.getTransform();return Ff({x:_.x-J.left,y:_.y-J.top},$)}}}function i$(f,_){return X6(f,_)}function s$(f,_,Q){return V_(f,_,Q)}function a$(f,_){let Q=[...f];for(let J of _)switch(J.type){case"position":Q=Q.map(($)=>$.id===J.id?{...$,...J.position?{position:J.position}:{},dragging:J.dragging??$.dragging}:$);break;case"dimensions":Q=Q.map(($)=>$.id===J.id&&J.dimensions?{...$,width:J.dimensions.width,height:J.dimensions.height}:$);break;case"select":Q=Q.map(($)=>$.id===J.id?{...$,selected:J.selected}:$);break;case"remove":Q=Q.filter(($)=>$.id!==J.id);break;case"add":Q.push(J.item);break}return Q}function d$(f,_){let Q=[...f];for(let J of _)switch(J.type){case"select":Q=Q.map(($)=>$.id===J.id?{...$,selected:J.selected}:$);break;case"remove":Q=Q.filter(($)=>$.id!==J.id);break;case"add":Q.push(J.item);break}return Q}export{b6 as useViewport,A$ as useStore,r$ as useReactFlow,c$ as useNodesState,U$ as useNodesInitialized,F$ as useNodes,j0 as useFlow,l$ as useEdgesState,K$ as useEdges,F9 as setupSelectionRectangle,G$ as setupNodeSelection,q9 as setupKeyboardHandlers,W$ as screenToFlowPosition,s$ as reconnectEdge,O$ as initNodeResizer,nQ as getStraightPath,Kf as getSmoothStepPath,B7 as getOutgoers,V7 as getNodesInside,M7 as getNodesBounds,j7 as getIncomers,u7 as getEdgeToolbarTransform,$9 as getEdgePath,Y7 as getConnectedEdges,tQ as getBezierPath,w$ as dispatchNodeType,_$ as createFlowStore,J9 as computeEdgePosition,k6 as clampDragPositionToParent,L$ as attachReconnectionHandler,Z$ as attachFlowSubsystems,X$ as attachConnectionHandler,i$ as addEdge,p$ as XYFLOW_VIEWPORT,Y0 as ResizeControlVariant,v as Position,cQ as MarkerType,Q9 as FlowContext,p0 as ConnectionModeEnum,z$ as BF_FLOW_VIEWPORT,E$ as BF_FLOW_NODE_SELECTED,I$ as BF_FLOW_NODE_GROUP,y$ as BF_FLOW_NODE_CUSTOM,S$ as BF_FLOW_NODE_CHILD,D$ as BF_FLOW_NODES,C$ as BF_FLOW_NODE,g$ as BF_FLOW_MINIMAP_MASK,m$ as BF_FLOW_MINIMAP,k$ as BF_FLOW_HANDLE_TARGET,P$ as BF_FLOW_HANDLE_SOURCE,x$ as BF_FLOW_HANDLE,u$ as BF_FLOW_EDGE_SELECTED,b$ as BF_FLOW_EDGE_ANIMATED,H$ as BF_FLOW_EDGES,N$ as BF_FLOW_EDGE,v$ as BF_FLOW_CONTROLS_BUTTON,h$ as BF_FLOW_CONTROLS,R$ as BF_FLOW};
93
-
94
- //# debugId=F624FCE5A05753E264756E2164756E21
95
- //# sourceMappingURL=xyflow.browser.min.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@barefootjs/xyflow",
3
- "version": "0.30.6",
3
+ "version": "0.31.1",
4
4
  "description": "Signal-based xyflow wrapper for BarefootJS",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -21,7 +21,7 @@
21
21
  "scripts": {
22
22
  "build": "bun run build:js && bun run build:browser && bun run build:types",
23
23
  "build:js": "bun build ./src/index.ts --outdir ./dist --format esm --external '@barefootjs/client' --external '@barefootjs/client/runtime' --external '@barefootjs/client/reactive'",
24
- "build:browser": "bun build ./src/index.ts --outdir ./dist --entry-naming 'xyflow.browser.min.[ext]' --format esm --minify --sourcemap --external '@barefootjs/client' --external '@barefootjs/client/runtime' --external '@barefootjs/client/reactive'",
24
+ "build:browser": "bun build ./src/index.ts --outdir ./dist --entry-naming 'xyflow.browser.min.[ext]' --format esm --minify --external '@barefootjs/client' --external '@barefootjs/client/runtime' --external '@barefootjs/client/reactive'",
25
25
  "build:types": "tsgo --emitDeclarationOnly --outDir ./dist",
26
26
  "test": "bun test src/ && bun run typecheck:tests",
27
27
  "typecheck:tests": "tsgo --noEmit -p src/__tests__/tsconfig.json",