@jeevandev/flow-canvas 0.1.1 → 0.1.3
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.
package/dist/flow-canvas.es.js
CHANGED
|
@@ -2813,8 +2813,8 @@ const ar = ({ pos: t, onDragStart: e, onDragMove: n, onDragEnd: s, className: r
|
|
|
2813
2813
|
width: "100%",
|
|
2814
2814
|
height: "100%",
|
|
2815
2815
|
overflow: "visible",
|
|
2816
|
-
pointerEvents: "
|
|
2817
|
-
//
|
|
2816
|
+
pointerEvents: "none",
|
|
2817
|
+
// Allow clicks to pass through to background
|
|
2818
2818
|
zIndex: 0
|
|
2819
2819
|
},
|
|
2820
2820
|
children: [
|
package/dist/flow-canvas.umd.js
CHANGED
|
@@ -10,4 +10,4 @@ Please add \`${r}Action\` when creating your handler.`);return}const i=n+"Start"
|
|
|
10
10
|
[data-node-id="${t}"] {
|
|
11
11
|
${i.customCss}
|
|
12
12
|
}
|
|
13
|
-
`}),y.jsx(Bn,{id:t,children:e}),g&&!a.viewOnly&&y.jsx("button",{className:"ce-delete-node-btn",onPointerDown:v=>v.stopPropagation(),onClick:v=>{v.stopPropagation(),d(t)},title:"Remove Node",children:"×"})]})]})},yn=I.memo(is),as=()=>{const t=z(c=>c.edges),e=z(c=>c.nodes),n=z(c=>c.connectionState),r=z(c=>c.selectNode),s=z(c=>c.selectedIds),o=z(c=>c.removeEdge),i=(c,g,p,b,v)=>{const D=1-c;return Math.pow(D,3)*g+3*Math.pow(D,2)*c*p+3*D*Math.pow(c,2)*b+Math.pow(c,3)*v},a=(c,g,p,b)=>{const v=Math.abs(p-c)/2,D=c+v,h=g,O=p-v;return`M ${c} ${g} C ${D} ${h}, ${O} ${b}, ${p} ${b}`},l=(c,g,p,b)=>`M ${c} ${g} L ${p} ${b}`,d=(c,g,p,b)=>{const v=(c+p)/2;return`M ${c} ${g} L ${v} ${g} L ${v} ${b} L ${p} ${b}`},f=(c,g,p,b,v)=>{switch(c){case"straight":return l(g,p,b,v);case"step":return d(g,p,b,v);default:return a(g,p,b,v)}},_=z(c=>c.camera),m=z(c=>c.dimensions),N=I.useMemo(()=>m.width===0||m.height===0?Object.values(t):Object.values(t).filter(c=>{const g=e[c.source],p=e[c.target];if(!g||!p)return!1;const b=Math.min(g.x,p.x),v=Math.max(g.x+g.width,p.x+p.width),D=Math.min(g.y,p.y),h=Math.max(g.y+g.height,p.y+p.height),O=_.zoom,T=b*O+_.x,k=v*O+_.x,S=D*O+_.y,j=h*O+_.y,R=100;return!(k<-R||T>m.width+R||j<-R||S>m.height+R)}),[t,e,_,m]).map(c=>{const g=e[c.source],p=e[c.target];if(!g||!p)return null;let b=g.x+g.width/2,v=g.y+g.height/2,D=p.x+p.width/2,h=p.y+p.height/2;if(g.handles&&c.sourceHandle&&g.handles[c.sourceHandle]){const x=g.handles[c.sourceHandle];typeof x.x=="number"&&typeof x.y=="number"&&x.x!==0?(b=g.x+x.x,v=g.y+x.y):x.position==="top"?(b=g.x+g.width/2,v=g.y):x.position==="bottom"?(b=g.x+g.width/2,v=g.y+g.height):x.position==="left"?(b=g.x,v=g.y+g.height/2):x.position==="right"&&(b=g.x+g.width,v=g.y+g.height/2)}if(p.handles&&c.targetHandle&&p.handles[c.targetHandle]){const x=p.handles[c.targetHandle];typeof x.x=="number"&&typeof x.y=="number"&&x.x!==0?(D=p.x+x.x,h=p.y+x.y):x.position==="top"?(D=p.x+p.width/2,h=p.y):x.position==="bottom"?(D=p.x+p.width/2,h=p.y+p.height):x.position==="left"?(D=p.x,h=p.y+p.height/2):x.position==="right"&&(D=p.x+p.width,h=p.y+p.height/2)}const O=f(c.type,b,v,D,h),T=s.includes(c.id),k=(b+D)/2,S=(v+h)/2;let j=k,R=S;if(!c.type||c.type==="default"){const x=Math.abs(D-b)/2;j=i(.5,b,b+x,D-x,D),R=i(.5,v,v,h,h)}return y.jsxs("g",{className:"ce-edge-group",style:{pointerEvents:"all"},children:[y.jsx("path",{d:O,stroke:"transparent",strokeWidth:"20",fill:"none",style:{cursor:"pointer"},onClick:x=>{x.stopPropagation(),r(c.id)}}),y.jsx("path",{d:O,stroke:T?"#3b82f6":"#b1b1b7",strokeWidth:T?"3":"2",fill:"none",markerEnd:"url(#arrow-closed)",style:{pointerEvents:"none"}}),y.jsx("foreignObject",{x:j-10,y:R-10,width:20,height:20,className:"ce-edge-delete-fo",style:{overflow:"visible"},children:y.jsx("button",{className:"ce-edge-delete-btn",onClick:x=>{x.stopPropagation(),o(c.id)},title:"Disconnect",style:{width:"20px",height:"20px",borderRadius:"50%",background:"#ff4d4f",color:"white",border:"1px solid white",padding:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",lineHeight:1,cursor:"pointer",boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:"×"})})]},c.id)});let C=null;if(n.isValid&&n.nodeId&&n.position&&e[n.nodeId]){const c=e[n.nodeId];let g=c.x+c.width/2,p=c.y+c.height/2;if(n.handleId&&c.handles&&c.handles[n.handleId]){const h=c.handles[n.handleId];typeof h.x=="number"&&typeof h.y=="number"&&h.x!==0?(g=c.x+h.x,p=c.y+h.y):h.position==="top"?(g=c.x+c.width/2,p=c.y):h.position==="bottom"?(g=c.x+c.width/2,p=c.y+c.height):h.position==="left"?(g=c.x,p=c.y+c.height/2):h.position==="right"&&(g=c.x+c.width,p=c.y+c.height/2)}const b=n.position.x,v=n.position.y,D=a(g,p,b,v);C=y.jsx("path",{d:D,stroke:"#3b82f6",strokeWidth:"2",strokeDasharray:"5,5",fill:"none",markerEnd:"url(#arrow-closed)",className:"ce-connection-line"})}return y.jsxs("svg",{className:"ce-edge-layer",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"
|
|
13
|
+
`}),y.jsx(Bn,{id:t,children:e}),g&&!a.viewOnly&&y.jsx("button",{className:"ce-delete-node-btn",onPointerDown:v=>v.stopPropagation(),onClick:v=>{v.stopPropagation(),d(t)},title:"Remove Node",children:"×"})]})]})},yn=I.memo(is),as=()=>{const t=z(c=>c.edges),e=z(c=>c.nodes),n=z(c=>c.connectionState),r=z(c=>c.selectNode),s=z(c=>c.selectedIds),o=z(c=>c.removeEdge),i=(c,g,p,b,v)=>{const D=1-c;return Math.pow(D,3)*g+3*Math.pow(D,2)*c*p+3*D*Math.pow(c,2)*b+Math.pow(c,3)*v},a=(c,g,p,b)=>{const v=Math.abs(p-c)/2,D=c+v,h=g,O=p-v;return`M ${c} ${g} C ${D} ${h}, ${O} ${b}, ${p} ${b}`},l=(c,g,p,b)=>`M ${c} ${g} L ${p} ${b}`,d=(c,g,p,b)=>{const v=(c+p)/2;return`M ${c} ${g} L ${v} ${g} L ${v} ${b} L ${p} ${b}`},f=(c,g,p,b,v)=>{switch(c){case"straight":return l(g,p,b,v);case"step":return d(g,p,b,v);default:return a(g,p,b,v)}},_=z(c=>c.camera),m=z(c=>c.dimensions),N=I.useMemo(()=>m.width===0||m.height===0?Object.values(t):Object.values(t).filter(c=>{const g=e[c.source],p=e[c.target];if(!g||!p)return!1;const b=Math.min(g.x,p.x),v=Math.max(g.x+g.width,p.x+p.width),D=Math.min(g.y,p.y),h=Math.max(g.y+g.height,p.y+p.height),O=_.zoom,T=b*O+_.x,k=v*O+_.x,S=D*O+_.y,j=h*O+_.y,R=100;return!(k<-R||T>m.width+R||j<-R||S>m.height+R)}),[t,e,_,m]).map(c=>{const g=e[c.source],p=e[c.target];if(!g||!p)return null;let b=g.x+g.width/2,v=g.y+g.height/2,D=p.x+p.width/2,h=p.y+p.height/2;if(g.handles&&c.sourceHandle&&g.handles[c.sourceHandle]){const x=g.handles[c.sourceHandle];typeof x.x=="number"&&typeof x.y=="number"&&x.x!==0?(b=g.x+x.x,v=g.y+x.y):x.position==="top"?(b=g.x+g.width/2,v=g.y):x.position==="bottom"?(b=g.x+g.width/2,v=g.y+g.height):x.position==="left"?(b=g.x,v=g.y+g.height/2):x.position==="right"&&(b=g.x+g.width,v=g.y+g.height/2)}if(p.handles&&c.targetHandle&&p.handles[c.targetHandle]){const x=p.handles[c.targetHandle];typeof x.x=="number"&&typeof x.y=="number"&&x.x!==0?(D=p.x+x.x,h=p.y+x.y):x.position==="top"?(D=p.x+p.width/2,h=p.y):x.position==="bottom"?(D=p.x+p.width/2,h=p.y+p.height):x.position==="left"?(D=p.x,h=p.y+p.height/2):x.position==="right"&&(D=p.x+p.width,h=p.y+p.height/2)}const O=f(c.type,b,v,D,h),T=s.includes(c.id),k=(b+D)/2,S=(v+h)/2;let j=k,R=S;if(!c.type||c.type==="default"){const x=Math.abs(D-b)/2;j=i(.5,b,b+x,D-x,D),R=i(.5,v,v,h,h)}return y.jsxs("g",{className:"ce-edge-group",style:{pointerEvents:"all"},children:[y.jsx("path",{d:O,stroke:"transparent",strokeWidth:"20",fill:"none",style:{cursor:"pointer"},onClick:x=>{x.stopPropagation(),r(c.id)}}),y.jsx("path",{d:O,stroke:T?"#3b82f6":"#b1b1b7",strokeWidth:T?"3":"2",fill:"none",markerEnd:"url(#arrow-closed)",style:{pointerEvents:"none"}}),y.jsx("foreignObject",{x:j-10,y:R-10,width:20,height:20,className:"ce-edge-delete-fo",style:{overflow:"visible"},children:y.jsx("button",{className:"ce-edge-delete-btn",onClick:x=>{x.stopPropagation(),o(c.id)},title:"Disconnect",style:{width:"20px",height:"20px",borderRadius:"50%",background:"#ff4d4f",color:"white",border:"1px solid white",padding:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",lineHeight:1,cursor:"pointer",boxShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:"×"})})]},c.id)});let C=null;if(n.isValid&&n.nodeId&&n.position&&e[n.nodeId]){const c=e[n.nodeId];let g=c.x+c.width/2,p=c.y+c.height/2;if(n.handleId&&c.handles&&c.handles[n.handleId]){const h=c.handles[n.handleId];typeof h.x=="number"&&typeof h.y=="number"&&h.x!==0?(g=c.x+h.x,p=c.y+h.y):h.position==="top"?(g=c.x+c.width/2,p=c.y):h.position==="bottom"?(g=c.x+c.width/2,p=c.y+c.height):h.position==="left"?(g=c.x,p=c.y+c.height/2):h.position==="right"&&(g=c.x+c.width,p=c.y+c.height/2)}const b=n.position.x,v=n.position.y,D=a(g,p,b,v);C=y.jsx("path",{d:D,stroke:"#3b82f6",strokeWidth:"2",strokeDasharray:"5,5",fill:"none",markerEnd:"url(#arrow-closed)",className:"ce-connection-line"})}return y.jsxs("svg",{className:"ce-edge-layer",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none",zIndex:0},children:[y.jsx("defs",{children:y.jsx("marker",{id:"arrow-closed",viewBox:"0 0 10 10",refX:"9",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:y.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#b1b1b7"})})}),N,N,C]})},cs=({children:t,grid:e,background:n,className:r="",style:s,canvasStyle:o})=>{const i=I.useRef(null),a=z(h=>h.camera),l=z(h=>h.config),d=z(h=>h.panCamera),f=z(h=>h.zoomCamera),_=z(h=>h.deselectAll),m=z(h=>h.deleteSelected),w=z(h=>h.setDimensions);I.useEffect(()=>{const h=k=>{k.ctrlKey&&k.preventDefault()},O=i.current;O&&O.addEventListener("wheel",h,{passive:!1});let T=null;return O&&(T=new ResizeObserver(k=>{for(const S of k){const{width:j,height:R}=S.contentRect;w(j,R)}}),T.observe(O)),()=>{O&&O.removeEventListener("wheel",h),T&&T.disconnect()}},[w]);const[N,C]=I.useState(!1);I.useEffect(()=>{const h=T=>{if(T.code==="Space"&&!T.repeat&&C(!0),(T.code==="Delete"||T.code==="Backspace")&&!l.viewOnly){const k=T.target;k.tagName!=="INPUT"&&k.tagName!=="TEXTAREA"&&m()}},O=T=>{T.code==="Space"&&C(!1)};return window.addEventListener("keydown",h),window.addEventListener("keyup",O),()=>{window.removeEventListener("keydown",h),window.removeEventListener("keyup",O)}},[m,l.viewOnly]),Ne({onDrag:({delta:[h,O],event:T})=>{const k=T.target,S=k.closest(".ce-element")||k.closest(".ce-resize-handle");(N||l.pan&&!S)&&d(h,O)},onWheel:({event:h,delta:[,O],ctrlKey:T})=>{if(T||h.metaKey){if(l.zoom){const k=i.current?.getBoundingClientRect();if(k){let S,j;!l.pan&&!N?(S=(k.width||window.innerWidth)/2,j=(k.height||window.innerHeight)/2):(S=h.clientX-k.left,j=h.clientY-k.top),f(1-O/500,S,j)}}}else d(-h.deltaX,-h.deltaY)}},{target:i,drag:{filterTaps:!0}});const c=z(h=>h.connectionState),g=z(h=>h.updateConnection),p=z(h=>h.endConnection),b=z(h=>h.addEdge);I.useEffect(()=>{if(!c.isValid)return;const h=T=>{if(!i.current)return;const k=i.current.getBoundingClientRect();let S=(T.clientX-k.left-a.x)/a.zoom,j=(T.clientY-k.top-a.y)/a.zoom;const x=document.elementFromPoint(T.clientX,T.clientY)?.closest(".ce-handle");if(document.querySelectorAll(".ce-handle--valid").forEach(B=>B.classList.remove("ce-handle--valid")),x&&c.nodeId){const B=x.closest("[data-node-id]")?.getAttribute("data-node-id"),Z=x.dataset.handleId,q=x.dataset.handleType,Y=c.handleType,U=B===c.nodeId;if(B&&Z&&!U&&(Y==="source"&&q==="target"||Y==="target"&&q==="source")){x.classList.add("ce-handle--valid");const se=x.getBoundingClientRect();S=(se.left+se.width/2-k.left-a.x)/a.zoom,j=(se.top+se.height/2-k.top-a.y)/a.zoom}}g({x:S,y:j})},O=T=>{const S=document.elementFromPoint(T.clientX,T.clientY)?.closest(".ce-handle");if(S&&c.nodeId){const j=S.closest("[data-node-id]")?.getAttribute("data-node-id"),R=S.dataset.handleId,x=S.dataset.handleType,B=c.handleType,Z=j===c.nodeId;if(j&&R&&!Z&&(B==="source"&&x==="target"||B==="target"&&x==="source")){let Y=c.nodeId,U=c.handleId||void 0,de=j,se=R;B==="target"&&x==="source"&&(Y=j,U=R,de=c.nodeId,se=c.handleId||void 0),b({id:`e-${Date.now()}`,source:Y,sourceHandle:U||void 0,target:de,targetHandle:se})}}document.querySelectorAll(".ce-handle--valid").forEach(j=>j.classList.remove("ce-handle--valid")),p()};return window.addEventListener("pointermove",h),window.addEventListener("pointerup",O),()=>{window.removeEventListener("pointermove",h),window.removeEventListener("pointerup",O),document.querySelectorAll(".ce-handle--valid").forEach(T=>T.classList.remove("ce-handle--valid"))}},[c.isValid,a,g,p,b,c.nodeId,c.handleType,c.handleId]);const v=()=>{l.viewOnly||_()},D=l.isLimited?{touchAction:"none",cursor:N?"grab":"default"}:{...s,touchAction:"none",cursor:N?"grab":"default"};return y.jsxs("div",{ref:i,className:`ce-editor__viewport ${N?"ce-editor__viewport--panning":""} ${r} ${l.viewOnly?"ce-editor--view-only":""} ${c.isValid?"ce-editor--connecting":""}`,style:D,onClick:v,children:[n,y.jsxs("div",{className:"ce-editor__canvas",style:{transform:`translate(${a.x}px, ${a.y}px) scale(${a.zoom})`,...o},children:[l.showGrid&&y.jsx("div",{className:"ce-editor__grid-layer",children:e||y.jsxs("svg",{width:"100%",height:"100%",children:[y.jsx("defs",{children:y.jsx("pattern",{id:"default-grid",width:l.gridSize,height:l.gridSize,patternUnits:"userSpaceOnUse",children:y.jsx("circle",{cx:"1",cy:"1",r:"1",fill:l.gridColor||"#ccc"})})}),y.jsx("rect",{width:"100%",height:"100%",fill:"url(#default-grid)"})]})}),y.jsx(as,{}),l.isLimited?y.jsx("div",{className:"ce-editor__content-area",style:{width:l.width||1920,height:l.height||1080,...s},children:t}):y.jsx("div",{className:"ce-editor__infinite-area",children:t})]})]})},ls={default:Xe,input:Yt,output:Ht,workflow:Xe},us=({nodeTypes:t={}})=>{const e=z(i=>i.nodes),n=z(i=>i.camera),r=z(i=>i.dimensions),s=I.useMemo(()=>({...ls,...t}),[t]),o=I.useMemo(()=>{if(r.width<=0||r.height<=0)return Object.values(e);const i=100;return Object.values(e).filter(a=>{const l=n.zoom,d=a.x*l+n.x,f=a.y*l+n.y,_=a.width*l,m=a.height*l;return!(d+_<-i||d>r.width+i||f+m<-i||f>r.height+i)})},[e,n,r]);return y.jsx(y.Fragment,{children:o.map(i=>{const a=s[i.type||"default"]||Xe;return i.type==="custom"||i.type==="design"||i.resizable||i.rotatable?y.jsx(gn,{id:i.id,draggable:i.draggable,resizable:i.resizable,rotatable:i.rotatable,children:y.jsx(a,{style:i.style,className:i.className,data:i.data,id:i.id})},i.id):y.jsx(yn,{id:i.id,draggable:i.draggable,className:i.className,style:i.style,children:y.jsx(a,{data:i.data,id:i.id})},i.id)})})};G.Canvas=cs,G.DefaultNode=Xe,G.Editor=Un,G.ElementWrapper=gn,G.Handle=Pe,G.InputNode=Yt,G.NodeLayer=us,G.OutputNode=Ht,G.WorkflowNodeWrapper=yn,G.useEditor=z,G.useEditorStoreApi=We,Object.defineProperty(G,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jeevandev/flow-canvas",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/flow-canvas.umd.js",
|
|
6
6
|
"module": "./dist/flow-canvas.es.js",
|
|
@@ -22,16 +22,20 @@
|
|
|
22
22
|
"lint": "eslint .",
|
|
23
23
|
"preview": "vite preview"
|
|
24
24
|
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": "^19.0.0",
|
|
27
|
+
"react-dom": "^19.0.0"
|
|
28
|
+
},
|
|
25
29
|
"dependencies": {
|
|
26
30
|
"@use-gesture/react": "^10.3.1",
|
|
27
31
|
"immer": "^11.0.1",
|
|
28
32
|
"lucide-react": "^0.561.0",
|
|
29
|
-
"react": "^19.2.0",
|
|
30
|
-
"react-dom": "^19.2.0",
|
|
31
33
|
"sass": "^1.96.0",
|
|
32
34
|
"zustand": "^5.0.9"
|
|
33
35
|
},
|
|
34
36
|
"devDependencies": {
|
|
37
|
+
"react": "^19.2.0",
|
|
38
|
+
"react-dom": "^19.2.0",
|
|
35
39
|
"@eslint/js": "^9.39.1",
|
|
36
40
|
"@types/node": "^24.10.1",
|
|
37
41
|
"@types/react": "^19.2.5",
|