@yh7iku/vue-tree-flow 0.1.0

package/dist/vue-tree-flow.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueTreeFlow={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=[`id`],r=[`id`],i=(0,t.defineComponent)({__name:`SingleLineCanvas`,props:{lineId:{},fromAnchor:{},toAnchor:{},scale:{default:1},isSelected:{type:Boolean,default:!1},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let i=e,a=(0,t.ref)(null),o=(0,t.ref)(null),s=null,c={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},l={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},u=()=>{if(!a.value||!o.value)return;let{cp1X:e,cp1Y:t,cp2X:n,cp2Y:r}=f(i.fromAnchor.type,i.toAnchor.type,i.fromAnchor.x,i.fromAnchor.y,i.toAnchor.x,i.toAnchor.y),s=[i.fromAnchor.x,i.toAnchor.x,e,n],c=[i.fromAnchor.y,i.toAnchor.y,t,r],l=Math.min(...s)-30,u=Math.min(...c)-30,d=Math.max(...s)+30,p=Math.max(...c)+30,m=d-l,h=p-u;a.value.style.left=`${l}px`,a.value.style.top=`${u}px`,a.value.style.width=`${m}px`,a.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;o.value.width=Math.round(m*i.scale*g),o.value.height=Math.round(h*i.scale*g),o.value.style.width=`${m}px`,o.value.style.height=`${h}px`},d=(e,t,n,r,i)=>{if(!a.value)return;e.save();let o=t-a.value.offsetLeft,s=n-a.value.offsetTop;e.translate(o,s),e.rotate(r),e.fillStyle=i,e.beginPath(),e.moveTo(0,0),e.lineTo(-15,-8),e.lineTo(-15,8),e.closePath(),e.fill(),e.restore()},f=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},p=()=>{if(!o.value)return;let e=o.value,t=e.getContext(`2d`);if(!t)return;let n=window.devicePixelRatio||1;t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,e.width,e.height),t.scale(i.scale,i.scale);let r=i.theme===`light`?`#3182ce`:`#4299e1`,s=i.isSelected?`#ff6b6b`:r,c=i.isSelected?4:3,l=i.isSelected?1:3;if(!a.value)return;let u=i.fromAnchor.x-a.value.offsetLeft,p=i.fromAnchor.y-a.value.offsetTop,m=i.toAnchor.x-a.value.offsetLeft,h=i.toAnchor.y-a.value.offsetTop,{cp1X:g,cp1Y:_,cp2X:v,cp2Y:y}=f(i.fromAnchor.type,i.toAnchor.type,u,p,m,h);t.strokeStyle=s,t.lineWidth=c,t.lineCap=`round`,i.animated?(t.setLineDash([15,10]),t.lineDashOffset=-(Date.now()/50)*l%100):(t.setLineDash([]),t.lineDashOffset=0),t.beginPath(),t.moveTo(u,p),t.bezierCurveTo(g,_,v,y,m,h),t.stroke();let b=m-v,x=h-y,S=Math.atan2(x,b);d(t,i.toAnchor.x,i.toAnchor.y,S,s)},m=()=>{p(),s=requestAnimationFrame(m)},h=()=>{s||m()},g=()=>{s&&=(cancelAnimationFrame(s),null)},_=()=>{u(),p()};return(0,t.watch)(()=>[i.fromAnchor,i.toAnchor,i.scale,i.isSelected,i.animated,i.theme],()=>{u(),i.animated?h():(g(),p())},{deep:!0}),(0,t.onMounted)(()=>{u(),window.addEventListener(`resize`,_),i.animated?h():p()}),(0,t.onUnmounted)(()=>{window.removeEventListener(`resize`,_),g()}),(i,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`containerRef`,ref:a,id:`linker_${e.lineId}`,class:`shape_box linker_box`,style:c},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:o,id:`linker_canvas_${e.lineId}`,class:`shape_canvas`,style:l},null,8,r)],8,n))}}),a=(0,t.defineComponent)({__name:`TempLineCanvas`,props:{visible:{type:Boolean,default:!1},startX:{default:0},startY:{default:0},endX:{default:0},endY:{default:0},scale:{default:1},startType:{default:`right`},endType:{default:`left`},theme:{default:`dark`}},setup(e){let n=e,r=()=>n.theme===`light`?`#3182ce`:`#4299e1`,i=(0,t.ref)(null),a=(0,t.ref)(null),o=null,s={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},c={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},l=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}let f=t;if(!f){let e=i-n,t=a-r;f=Math.abs(e)>Math.abs(t)?e>0?`left`:`right`:t>0?`top`:`bottom`}switch(f){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},u=()=>{if(!n.visible||!i.value||!a.value)return;let{cp1X:e,cp1Y:t,cp2X:r,cp2Y:o}=l(n.startType||`right`,n.endType,n.startX,n.startY,n.endX,n.endY),s=[n.startX,n.endX,e,r],c=[n.startY,n.endY,t,o],u=Math.min(...s)-30,d=Math.min(...c)-30,f=Math.max(...s)+30,p=Math.max(...c)+30,m=f-u,h=p-d;i.value.style.left=`${u}px`,i.value.style.top=`${d}px`,i.value.style.width=`${m}px`,i.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;a.value.width=Math.round(m*n.scale*g),a.value.height=Math.round(h*n.scale*g),a.value.style.width=`${m}px`,a.value.style.height=`${h}px`},d=()=>{if(!n.visible||!a.value||!i.value)return;let e=a.value,t=e.getContext(`2d`);if(!t)return;let o=window.devicePixelRatio||1;t.setTransform(o,0,0,o,0,0),t.clearRect(0,0,e.width,e.height),t.scale(n.scale,n.scale),t.strokeStyle=r(),t.lineWidth=2,t.lineCap=`round`,t.setLineDash([10,8]);let s=parseFloat(i.value.style.left||`0`),c=parseFloat(i.value.style.top||`0`),u=n.startX-s,d=n.startY-c,f=n.endX-s,p=n.endY-c,{cp1X:m,cp1Y:h,cp2X:g,cp2Y:_}=l(n.startType||`right`,n.endType||`left`,n.startX,n.startY,n.endX,n.endY),v=m-s,y=h-c,b=g-s,x=_-c;t.beginPath(),t.moveTo(u,d),t.bezierCurveTo(v,y,b,x,f,p),t.stroke();let S=f-b,C=p-x,w=Math.atan2(C,S);t.save(),t.translate(f,p),t.rotate(w),t.fillStyle=r(),t.beginPath(),t.moveTo(0,0),t.lineTo(-15,-8),t.lineTo(-15,8),t.closePath(),t.fill(),t.restore()},f=()=>{d(),o=requestAnimationFrame(f)},p=()=>{o||f()},m=()=>{o&&=(cancelAnimationFrame(o),null)};return(0,t.watch)(()=>[n.visible,n.startX,n.startY,n.endX,n.endY,n.scale],()=>{n.visible?(u(),p()):m()},{immediate:!0}),(0,t.onMounted)(()=>{n.visible&&(u(),p())}),(0,t.onUnmounted)(()=>{m()}),(n,r)=>e.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`containerRef`,ref:i,style:s},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,style:c},null,512)],512)):(0,t.createCommentVNode)(``,!0)}}),o=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y-6};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height-6};case`left`:return{x:t.x-6,y:t.y+t.height/2};case`right`:return{x:t.x+t.width-6,y:t.y+t.height/2}}},s=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height};case`left`:return{x:t.x,y:t.y+t.height/2};case`right`:return{x:t.x+t.width,y:t.y+t.height/2}}},c=(e,t,n,r,i,a)=>{let s=(e-a.left-r.x)/i,c=(t-a.top-r.y)/i;for(let e of n)for(let t of e.anchors){let n=o(t,e);if(Math.hypot(s-n.x,c-n.y)<15)return{...t,x:n.x,y:n.y}}return null},l=()=>`line_${Date.now()}_${Math.floor(Math.random()*1e3)}`,u=e=>{e.stopPropagation(),e.preventDefault()},d=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},f=(e,t,n,r,i,a,o,c=8,l)=>{let u,f,p,m;if(l){let t=l.get(e.fromAnchorId),n=l.get(e.toAnchorId);t&&(u=t.anchor,p=t.node),n&&(f=n.anchor,m=n.node)}else{if(u=t.flatMap(e=>e.anchors).find(t=>t.id===e.fromAnchorId),f=t.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId),u){let e=u.nodeId;p=t.find(t=>t.id===e)}if(f){let e=f.nodeId;m=t.find(t=>t.id===e)}}if(!u||!f||!p||!m)return!1;let h=s(u,p),g=s(f,m),_=(n-o.left-i.x)/a,v=(r-o.top-i.y)/a,{cp1X:y,cp1Y:b,cp2X:x,cp2Y:S}=d(u.type,f.type,h.x,h.y,g.x,g.y),C=Math.min(h.x,g.x,y,x)-c,w=Math.max(h.x,g.x,y,x)+c,T=Math.min(h.y,g.y,b,S)-c,E=Math.max(h.y,g.y,b,S)+c;if(_<C||_>w||v<T||v>E)return!1;for(let e=0;e<=1;e+=.005){let t=1-e,n=h.x*t*t*t+3*y*t*t*e+3*x*t*e*e+g.x*e*e*e,r=h.y*t*t*t+3*b*t*t*e+3*S*t*e*e+g.y*e*e*e;if(Math.hypot(_-n,v-r)<c)return!0}return!1},p=e=>{let t=new Map;for(let n of e)for(let e of n.anchors)t.set(e.id,{anchor:e,node:n});return t},m=(e,t,n)=>t.length===0?``:t[(t.findIndex(e=>e.id===n)+1)%t.length].id,h=(e,t,n)=>e.some(e=>e.fromAnchorId===t&&e.toAnchorId===n),g=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},_=(e,t)=>{if(e.length===0)return null;let n=e[0].width||140,r=e[0].height||200,i=Math.max(20,Math.round(n*.3)),a=Math.max(30,Math.round(r*.5)),o=new Map,c=new Set;for(let e of t){let t=g(e.fromAnchorId),n=g(e.toAnchorId);t!==n&&(o.has(t)||o.set(t,[]),o.get(t).includes(n)||o.get(t).push(n),c.add(n))}let l=e=>{let t=new Set,n=e=>{if(!t.has(e)){t.add(e);for(let t of o.get(e)??[])n(t)}};return n(e),t},u=e.filter(e=>!c.has(e.id));if(u.length===0)return null;let d=u[0],f=l(d.id);for(let e of u){let t=l(e.id);t.size>f.size&&(d=e,f=t)}let p=new Map,m=(e,t)=>{if(t.has(e))return 1;t.add(e);let n=o.get(e)??[];return n.length===0?1:n.reduce((e,n)=>e+m(n,new Set(t)),0)};for(let e of f)p.set(e,m(e,new Set));let h=new Map,_=(e,t,s,c)=>{if(c.has(e))return;c.add(e);let l=p.get(e)??1,u=s+(l*n+(l-1)*i)/2;h.set(e,{x:u-n/2,y:t*(r+a)});let d=s;for(let r of o.get(e)??[]){let e=p.get(r)??1,a=e*n+(e-1)*i;_(r,t+1,d,c),d+=a+i}};_(d.id,0,0,new Set);let v=h.get(d.id);if(!v)return null;let y=d.x-v.x,b=d.y-v.y;return e.map(e=>{let t=h.get(e.id);if(!t)return e;let n=t.x+y,r=t.y+b,i=e.anchors.map(t=>{let i=s(t,{...e,x:n,y:r});return{...t,x:i.x,y:i.y}});return{...e,x:n,y:r,anchors:i}})},v=(0,t.defineComponent)({__name:`FlowLinesCanvas`,props:{nodes:{},lines:{},scale:{},tempLine:{},selectedLineId:{default:``},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let n=e,r=e=>{for(let t of n.nodes){let n=t.anchors.find(t=>t.id===e);if(n){let e=s(n,t);return{...n,x:e.x,y:e.y}}}return null},o={position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,pointerEvents:`none`,zIndex:5};return(n,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{style:o},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.lines,n=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:n.id},[r(n.fromAnchorId)&&r(n.toAnchorId)?((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,"line-id":n.id,"from-anchor":r(n.fromAnchorId),"to-anchor":r(n.toAnchorId),scale:e.scale,"is-selected":e.selectedLineId===n.id,animated:e.animated,theme:e.theme},null,8,[`line-id`,`from-anchor`,`to-anchor`,`scale`,`is-selected`,`animated`,`theme`])):(0,t.createCommentVNode)(``,!0)],64))),128)),(0,t.createVNode)(a,{visible:e.tempLine.visible,"start-x":e.tempLine.startX,"start-y":e.tempLine.startY,"end-x":e.tempLine.endX,"end-y":e.tempLine.endY,scale:e.scale,"start-type":e.tempLine.startType,"end-type":e.tempLine.endType,theme:e.theme},null,8,[`visible`,`start-x`,`start-y`,`end-x`,`end-y`,`scale`,`start-type`,`end-type`,`theme`])]))}}),y=[`src`],b={class:`node-name`},x=(0,t.defineComponent)({__name:`FlowNode`,props:{id:{},name:{},desc:{},x:{},y:{},width:{default:300},height:{default:200},pic:{},isDragging:{type:Boolean,default:!1}},emits:[`dragStart`,`anchorClick`,`contextMenu`,`anchorHover`,`anchorLeave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(!1),o=(0,t.computed)(()=>({id:`${r.id}-top`,nodeId:r.id,type:`top`,x:r.x+r.width/2,y:r.y-6})),s=(0,t.computed)(()=>({id:`${r.id}-bottom`,nodeId:r.id,type:`bottom`,x:r.x+r.width/2,y:r.y+r.height-6})),c=(0,t.computed)(()=>({id:`${r.id}-left`,nodeId:r.id,type:`left`,x:r.x-6,y:r.y+r.height/2})),l=(0,t.computed)(()=>({id:`${r.id}-right`,nodeId:r.id,type:`right`,x:r.x+r.width-6,y:r.y+r.height/2})),d=(0,t.computed)(()=>({position:`absolute`,left:`${r.x}px`,top:`${r.y}px`,width:`${r.width}px`,height:`${r.height}px`,backgroundColor:`var(--fd-node-bg)`,border:`1px solid var(--fd-node-border)`,borderRadius:`8px`,color:`var(--fd-node-text)`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:r.pic?`flex-start`:`center`,fontFamily:`Arial, sans-serif`,fontSize:`14px`,boxShadow:`0 4px 12px rgba(0,0,0,0.3)`,cursor:r.isDragging?`grabbing`:`grab`,zIndex:6,userSelect:`none`,transition:`border-color 0.2s ease`,borderColor:a.value?`var(--fd-node-border-hover)`:`var(--fd-node-border)`})),f=e=>{let t={position:`absolute`,width:`12px`,height:`12px`,borderRadius:`50%`,backgroundColor:`rgba(66, 153, 225, 0.6)`,border:`2px solid #fff`,cursor:`crosshair`,zIndex:6,opacity:+!!a.value,visibility:a.value?`visible`:`hidden`,transition:`all 0.2s ease`,pointerEvents:a.value?`auto`:`none`,boxShadow:`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,touchAction:`none`};switch(e){case`top`:t.top=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`bottom`:t.bottom=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`left`:t.left=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`;break;case`right`:t.right=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`}return t},p=e=>{e.target.classList.contains(`node-anchor`)||(u(e),i(`dragStart`,r.id,e,r.x,r.y))},m=(e,t)=>{u(t),i(`anchorClick`,e,t)},h=e=>{u(e),i(`contextMenu`,r.id,e)},g=(e,t)=>{let n=e.target;n.style.opacity=`1`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1.2)`:n.style.transform=`translateY(-50%) scale(1.2)`,n.style.backgroundColor=`#4299e1`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.3), 0 0 0 6px rgba(66, 153, 225, 0.18), 0 0 0 10px rgba(66, 153, 225, 0.08)`,i(`anchorHover`,t)},_=(e,t)=>{let n=e.target;n.style.opacity=`0.9`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1)`:n.style.transform=`translateY(-50%) scale(1)`,n.style.backgroundColor=`rgba(66, 153, 225, 0.6)`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,i(`anchorLeave`)};return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`node`,{"node--with-pic":!!e.pic}]),style:(0,t.normalizeStyle)(d.value),onMousedown:p,onContextmenu:(0,t.withModifiers)(h,[`prevent`]),onMouseenter:r[12]||=e=>a.value=!0,onMouseleave:r[13]||=e=>a.value=!1},[e.pic?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,class:`node-pic`,src:e.pic,alt:``},null,8,y)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,b,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-top`,style:(0,t.normalizeStyle)(f(`top`)),onMousedown:r[0]||=(0,t.withModifiers)(e=>m(o.value,e),[`stop`]),onMouseenter:r[1]||=e=>g(e,`top`),onMouseleave:r[2]||=e=>_(e,`top`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-bottom`,style:(0,t.normalizeStyle)(f(`bottom`)),onMousedown:r[3]||=(0,t.withModifiers)(e=>m(s.value,e),[`stop`]),onMouseenter:r[4]||=e=>g(e,`bottom`),onMouseleave:r[5]||=e=>_(e,`bottom`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-left`,style:(0,t.normalizeStyle)(f(`left`)),onMousedown:r[6]||=(0,t.withModifiers)(e=>m(c.value,e),[`stop`]),onMouseenter:r[7]||=e=>g(e,`left`),onMouseleave:r[8]||=e=>_(e,`left`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-right`,style:(0,t.normalizeStyle)(f(`right`)),onMousedown:r[9]||=(0,t.withModifiers)(e=>m(l.value,e),[`stop`]),onMouseenter:r[10]||=e=>g(e,`right`),onMouseleave:r[11]||=e=>_(e,`right`)},null,36)],38))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-2dead940`]]),w={class:`nodes-container`},T={class:`edit-panel-field`},E={class:`edit-panel-field`};e.FlowDesigner=S((0,t.defineComponent)({__name:`FlowDesigner`,props:{nodes:{},lines:{},theme:{default:`dark`}},emits:[`update:nodes`,`update:lines`,`beforeDeleteNode`,`beforeDeleteLine`,`beforeAddNode`],setup(e,{expose:n,emit:r}){let i=e,a=r,o=[{id:`1`,name:`Reference`,x:0,y:0,width:140,height:200,anchors:[{id:`1-top`,nodeId:`1`,type:`top`,x:70,y:0},{id:`1-bottom`,nodeId:`1`,type:`bottom`,x:70,y:200},{id:`1-left`,nodeId:`1`,type:`left`,x:0,y:100},{id:`1-right`,nodeId:`1`,type:`right`,x:140,y:100}]},{id:`2`,name:`Image Generation`,x:400,y:0,width:140,height:200,anchors:[{id:`2-top`,nodeId:`2`,type:`top`,x:470,y:0},{id:`2-bottom`,nodeId:`2`,type:`bottom`,x:470,y:200},{id:`2-left`,nodeId:`2`,type:`left`,x:400,y:100},{id:`2-right`,nodeId:`2`,type:`right`,x:540,y:100}]},{id:`3`,name:`Video Generation`,x:400,y:250,width:140,height:200,anchors:[{id:`3-top`,nodeId:`3`,type:`top`,x:470,y:250},{id:`3-bottom`,nodeId:`3`,type:`bottom`,x:470,y:450},{id:`3-left`,nodeId:`3`,type:`left`,x:400,y:350},{id:`3-right`,nodeId:`3`,type:`right`,x:540,y:350}]}],d=[{id:`1`,fromAnchorId:`1-right`,toAnchorId:`2-left`},{id:`2`,fromAnchorId:`1-right`,toAnchorId:`3-left`}],g=(0,t.ref)(i.nodes??o),y=(0,t.ref)(i.lines??d);(0,t.watch)(()=>i.nodes,e=>{e&&(g.value=e)},{deep:!0}),(0,t.watch)(()=>i.lines,e=>{e&&(y.value=e)},{deep:!0});let b=e=>{let t=new Set,n=new Set,r=!1,i=a=>{if(n.has(a)){a===e&&(r=!0);return}n.add(a);let o=g.value.find(e=>e.id===a);if(!o)return;let s=new Set(o.anchors.map(e=>e.id));for(let e of y.value){if(!s.has(e.fromAnchorId))continue;let n=g.value.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId);!n||n.nodeId===a||(t.add(n.nodeId),i(n.nodeId))}};return i(e),r?new Set:t},x=(0,t.computed)(()=>{let e=new Set;for(let t of g.value)if(t.collapsed)for(let n of b(t.id))e.add(n);return e}),S=(0,t.computed)(()=>g.value.filter(e=>!x.value.has(e.id))),D=(0,t.computed)(()=>{let e=new Set(S.value.map(e=>e.id));return y.value.filter(t=>{let n=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.fromAnchorId),r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return n&&r&&e.has(n.nodeId)&&e.has(r.nodeId)})}),ee=e=>{let t=g.value.find(t=>t.id===e);if(!t)return!1;let n=new Set(t.anchors.map(e=>e.id));return y.value.some(t=>{if(!n.has(t.fromAnchorId))return!1;let r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return!!r&&r.nodeId!==e})},te=(0,t.computed)(()=>!!W.targetId&&ee(W.targetId)),ne=(0,t.computed)(()=>!!g.value.find(e=>e.id===W.targetId)?.collapsed),re=()=>{let e=W.targetId;if(!e)return;let t=g.value.find(t=>t.id===e);if(!t)return;t.collapsed=!t.collapsed;let n=_(S.value,D.value);if(n){let e=new Map(n.map(e=>[e.id,e]));g.value=g.value.map(t=>{let n=e.get(t.id);return n?{...t,...n}:t})}a(`update:nodes`,g.value),Q()},O=(0,t.reactive)({visible:!1,startX:0,startY:0,endX:0,endY:0}),k=(0,t.ref)(1),A=(0,t.reactive)({x:100,y:100}),j=(0,t.ref)(!1),M=(0,t.reactive)({x:0,y:0}),N=(0,t.ref)(`none`),P=(0,t.reactive)({x:0,y:0}),F=(0,t.reactive)({startDist:0,startScale:1,startX:0,startY:0,midX:0,midY:0,rectLeft:0,rectTop:0}),I=(0,t.ref)(null),L=(0,t.reactive)({x:0,y:0,initialX:0,initialY:0}),R=(0,t.ref)(!1),z=(0,t.ref)(null),B=(0,t.ref)(``),V=!1,H=!1,U=(0,t.ref)(!1),ie=()=>(U.value=!U.value,U.value),ae=()=>{let e=K.value;if(!e)return;let t=S.value;if(t.length===0)return;let n=1/0,r=1/0,i=-1/0,a=-1/0;for(let e of t)e.x<n&&(n=e.x),e.y<r&&(r=e.y),e.x+e.width>i&&(i=e.x+e.width),e.y+e.height>a&&(a=e.y+e.height);let o=(n+i)/2,s=(r+a)/2,c=e.getBoundingClientRect();A.x=c.width/2-o*k.value,A.y=c.height/2-s*k.value},W=(0,t.reactive)({type:`none`,x:0,y:0,targetId:null}),G=(0,t.reactive)({visible:!1,nodeId:null,x:0,y:0,name:``,desc:``}),K=(0,t.ref)(null),oe=(0,t.computed)(()=>({position:`absolute`,top:`${A.y}px`,left:`${A.x}px`,transformOrigin:`0 0`,transform:`scale(${k.value})`,width:`60px`,height:`60px`})),q=(0,t.computed)(()=>({position:`absolute`,left:`${W.x}px`,top:`${W.y}px`})),se=(0,t.computed)(()=>({position:`absolute`,left:`${G.x}px`,top:`${G.y}px`})),J=e=>Math.max(.5,Math.min(2,e)),Y=(e,t)=>Math.hypot(e.clientX-t.clientX,e.clientY-t.clientY),ce=e=>{if(e.touches.length===1)N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY,I.value=null,j.value=!1,Z();else if(e.touches.length===2){N.value=`pinch`;let t=K.value?.getBoundingClientRect();F.startDist=Y(e.touches[0],e.touches[1]),F.startScale=k.value,F.startX=A.x,F.startY=A.y,F.midX=(e.touches[0].clientX+e.touches[1].clientX)/2,F.midY=(e.touches[0].clientY+e.touches[1].clientY)/2,F.rectLeft=t?.left??0,F.rectTop=t?.top??0}u(e)},le=e=>{if(N.value===`pan`&&e.touches.length===1){let t=e.touches[0].clientX-P.x,n=e.touches[0].clientY-P.y;A.x+=t,A.y+=n,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY}else if(N.value===`pinch`&&e.touches.length===2){let t=Y(e.touches[0],e.touches[1]),n=(e.touches[0].clientX+e.touches[1].clientX)/2,r=(e.touches[0].clientY+e.touches[1].clientY)/2;if(F.startDist>0){let e=J(F.startScale*(t/F.startDist)),i=(F.midX-F.rectLeft-F.startX)/F.startScale,a=(F.midY-F.rectTop-F.startY)/F.startScale;k.value=e,A.x=n-F.rectLeft-i*e,A.y=r-F.rectTop-a*e}}u(e)},X=e=>{e.touches.length===0?N.value=`none`:e.touches.length===1&&N.value===`pinch`&&(N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY)},ue=e=>{e.button===0&&!I.value&&!R.value&&(j.value=!0,M.x=e.clientX,M.y=e.clientY,u(e))},de=(e,t,n,r)=>{Q(),I.value=e,L.x=t.clientX,L.y=t.clientY,L.initialX=n,L.initialY=r,j.value=!1,u(t)},fe=e=>{R.value&&(O.endType=e)},pe=()=>{R.value&&(O.endType=void 0)},me=(e,t)=>{if(u(t),R.value&&z.value&&z.value.nodeId!==e.nodeId){if(h(y.value,z.value.id,e.id)){Z(),alert(`该锚点之间已存在连线，禁止重复创建！`);return}let t={id:l(),fromAnchorId:z.value.id,toAnchorId:e.id};y.value.push(t),a(`update:lines`,y.value),Z();return}if(!R.value){Q(),R.value=!0,z.value=e,j.value=!1;let t=g.value.find(t=>t.id===e.nodeId);if(!t)return;let n=s(e,t);switch(O.visible=!0,O.startX=n.x,O.startY=n.y,O.startType=e.type,e.type){case`top`:O.endX=n.x,O.endY=n.y-50;break;case`bottom`:O.endX=n.x,O.endY=n.y+50;break;case`left`:O.endX=n.x-50,O.endY=n.y;break;case`right`:O.endX=n.x+50,O.endY=n.y}}},he=e=>{if(I.value){if(!g.value.find(e=>e.id===I.value))return;let t=(e.clientX-L.x)/k.value,n=(e.clientY-L.y)/k.value,r=L.initialX+t,i=L.initialY+n,a=g.value.findIndex(e=>e.id===I.value);if(a!==-1){let e=g.value[a].anchors.map(e=>{let t=s(e,{...g.value[a],x:r,y:i});return{...e,x:t.x,y:t.y}});g.value[a]={...g.value[a],x:r,y:i,anchors:e}}}else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t)return;let n=(e.clientX-t.left-A.x)/k.value,r=(e.clientY-t.top-A.y)/k.value;O.endX=n,O.endY=r}else if(j.value){let t=e.clientX-M.x,n=e.clientY-M.y;A.x+=t,A.y+=n,M.x=e.clientX,M.y=e.clientY}},ge=e=>{if(j.value)j.value=!1;else if(I.value)I.value=null,a(`update:nodes`,g.value);else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t){Z();return}let n=c(e.clientX,e.clientY,S.value,A,k.value,t);if(n&&n.nodeId!==z.value.nodeId&&!h(y.value,z.value.id,n.id)){let e={id:l(),fromAnchorId:z.value.id,toAnchorId:n.id};y.value.push(e),a(`update:lines`,y.value)}Z()}},Z=()=>{R.value=!1,z.value=null,O.visible=!1,O.startX=0,O.startY=0,O.endX=0,O.endY=0,O.startType=void 0,O.endType=void 0},_e=e=>{if(e.altKey){u(e);let t=k.value+(e.deltaY<0?.1:-.1);k.value=J(t)}},ve=(e,t)=>{u(t),V=!0,H=!0;let n=g.value.find(t=>t.id===e);if(!n)return;let r=K.value?.getBoundingClientRect();r&&(W.type=`node`,W.x=t.clientX-r.left,W.y=t.clientY-r.top,W.targetId=e,G.nodeId=e,G.name=n.name,G.desc=n.desc||``,setTimeout(()=>{H=!1},100))},ye=e=>{a(`beforeDeleteNode`,e);let t=new Map;for(let e of g.value)for(let n of e.anchors)t.set(n.id,e.id);g.value=g.value.filter(t=>t.id!==e),a(`update:nodes`,g.value),y.value=y.value.filter(n=>t.get(n.fromAnchorId)!==e&&t.get(n.toAnchorId)!==e),a(`update:lines`,y.value),B.value=``},be=e=>{a(`beforeDeleteLine`,e),y.value=y.value.filter(t=>t.id!==e),a(`update:lines`,y.value),B.value=``,Q()},xe=()=>{W.targetId&&(ye(W.targetId),Q())},Se=(e={})=>{a(`beforeAddNode`,e);let t=e.width??140,n=e.height??200,r=e.x??100,i=e.y??100,o=`node_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,s={id:o,name:e.name??`新节点`,desc:e.desc,pic:e.pic,x:r,y:i,width:t,height:n,anchors:[{id:`${o}-top`,nodeId:o,type:`top`,x:r+t/2,y:i},{id:`${o}-bottom`,nodeId:o,type:`bottom`,x:r+t/2,y:i+n},{id:`${o}-left`,nodeId:o,type:`left`,x:r,y:i+n/2},{id:`${o}-right`,nodeId:o,type:`right`,x:r+t,y:i+n/2}]};return g.value.push(s),a(`update:nodes`,g.value),s},Ce=()=>{if(!W.x||!W.y)return;let e=(W.x-A.x)/k.value+50,t=(W.y-A.y)/k.value+50,n=W.targetId?g.value.find(e=>e.id===W.targetId):void 0;Se({x:e,y:t,width:n?.width,height:n?.height}),Q()},we=()=>{if(!W.targetId)return;let e=g.value.find(e=>e.id===W.targetId);e&&(G.visible=!0,G.nodeId=W.targetId,G.x=W.x,G.y=W.y,G.name=e.name,G.desc=e.desc||``,W.type=`none`,H=!0,setTimeout(()=>{H=!1},100))},Te=()=>{if(!G.nodeId)return;let e=g.value.findIndex(e=>e.id===G.nodeId);e!==-1&&(g.value[e]={...g.value[e],name:G.name||`未命名节点`,desc:G.desc},a(`update:nodes`,g.value)),G.visible=!1},Ee=(e,t)=>{let n=K.value?.getBoundingClientRect();if(!n)return null;let r=(e-n.left-A.x)/k.value,i=(t-n.top-A.y)/k.value;for(let e=S.value.length-1;e>=0;e--){let t=S.value[e];if(r>=t.x&&r<=t.x+t.width&&i>=t.y&&i<=t.y+t.height)return t}return null},De=e=>{let t=K.value?.getBoundingClientRect();if(!t)return;if(Ee(e.clientX,e.clientY)){B.value=``;return}let n=p(S.value),r=D.value.filter(r=>f(r,S.value,e.clientX,e.clientY,A,k.value,t,8,n));if(r.length){let e=m(D.value,r,B.value);B.value=e}else B.value=``},Oe=e=>{if(V){V=!1;return}let t=K.value?.getBoundingClientRect();if(!t)return;u(e),Q(),H=!0;let n=Ee(e.clientX,e.clientY);if(n){W.type=`node`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n.id,G.nodeId=n.id,G.name=n.name,G.desc=n.desc||``,B.value=``,setTimeout(()=>{H=!1},100);return}let r=p(S.value),i=D.value.filter(n=>f(n,S.value,e.clientX,e.clientY,A,k.value,t,8,r));if(i.length){let n=m(D.value,i,B.value);B.value=n,W.type=`line`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n}setTimeout(()=>{H=!1},100)},Q=()=>{W.type=`none`,W.x=0,W.y=0,W.targetId=null,G.visible=!1,H=!1},ke=e=>{if(H)return;let t=e.target,n=t.closest(`.context-menu`),r=t.closest(`.edit-panel`),i=t.closest(`.toolbar`);!n&&!r&&!i&&Q()},$=e=>{e.key===`Escape`&&Q()};return(0,t.onMounted)(()=>{document.addEventListener(`click`,ke),document.addEventListener(`keydown`,$)}),(0,t.onUnmounted)(()=>{document.removeEventListener(`click`,ke),document.removeEventListener(`keydown`,$)}),n({getNodes:()=>g.value,getLines:()=>y.value,exportData:()=>({nodes:g.value,lines:y.value}),addNode:Se,deleteNode:ye,deleteLine:be,toggleAnimation:ie,centerView:ae}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`flow-designer`,{"flow-designer--light":e.theme===`light`}]),onContextmenu:r[3]||=(0,t.withModifiers)(e=>(0,t.unref)(u)(e),[`prevent`])},[(0,t.createElementVNode)(`div`,{ref_key:`canvasContainerRef`,ref:K,class:(0,t.normalizeClass)([`canvas-container`,{"is-dragging":!!I.value||j.value}]),onMousedown:ue,onMousemove:he,onMouseup:ge,onMouseleave:ge,onWheel:_e,onClick:De,onContextmenu:(0,t.withModifiers)(Oe,[`prevent`]),onTouchstart:ce,onTouchmove:(0,t.withModifiers)(le,[`prevent`]),onTouchend:X,onTouchcancel:X},[(0,t.createElementVNode)(`div`,{class:`canvas-content`,style:(0,t.normalizeStyle)(oe.value)},[(0,t.createVNode)(v,{nodes:S.value,lines:D.value,scale:k.value,"temp-line":O,"selected-line-id":B.value,animated:U.value,theme:e.theme},null,8,[`nodes`,`lines`,`scale`,`temp-line`,`selected-line-id`,`animated`,`theme`]),(0,t.createElementVNode)(`div`,w,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value,e=>((0,t.openBlock)(),(0,t.createBlock)(C,{key:e.id,id:e.id,name:e.name,desc:e.desc,x:e.x,y:e.y,width:e.width,height:e.height,pic:e.pic,"is-dragging":I.value===e.id,onDragStart:de,onAnchorClick:me,onContextMenu:ve,onAnchorHover:fe,onAnchorLeave:pe},null,8,[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`pic`,`is-dragging`]))),128))])],4)],34),W.type===`node`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:we},`编辑节点`),(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:Ce},`新增节点`),te.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu-item`,onClick:re},(0,t.toDisplayString)(ne.value?`显示子节点`:`折叠子节点`),1)):(0,t.createCommentVNode)(``,!0),r[4]||=(0,t.createElementVNode)(`div`,{class:`context-menu-divider`},null,-1),(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:xe},`删除节点`)],4)):(0,t.createCommentVNode)(``,!0),W.type===`line`&&W.targetId?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:r[0]||=e=>be(W.targetId)},`删除连线`)],4)):(0,t.createCommentVNode)(``,!0),G.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:2,class:`edit-panel`,style:(0,t.normalizeStyle)(se.value)},[r[7]||=(0,t.createElementVNode)(`h3`,{class:`edit-panel-title`},`编辑节点`,-1),(0,t.createElementVNode)(`div`,T,[r[5]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点名称`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[1]||=e=>G.name=e,type:`text`,class:`edit-panel-input`,placeholder:`请输入节点名称`},null,512),[[t.vModelText,G.name]])]),(0,t.createElementVNode)(`div`,E,[r[6]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点描述`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[2]||=e=>G.desc=e,type:`text`,class:`edit-panel-input`,placeholder:`可选：输入节点描述信息`},null,512),[[t.vModelText,G.desc]])]),(0,t.createElementVNode)(`div`,{class:`edit-panel-actions`},[(0,t.createElementVNode)(`button`,{class:`edit-panel-btn cancel`,onClick:Q},`取消`),(0,t.createElementVNode)(`button`,{class:`edit-panel-btn save`,onClick:Te},`保存`)])],4)):(0,t.createCommentVNode)(``,!0)],34))}}),[[`__scopeId`,`data-v-0545e5a3`]]),e.FlowLinesCanvas=v,e.FlowNode=C,e.SingleLineCanvas=i,e.TempLineCanvas=a,e.buildAnchorMap=p,e.generateLineId=l,e.getAnchorPosition=o,e.getLineEndpoint=s,e.hitTestAnchor=c,e.isDuplicateLine=h,e.isHit=f,e.relayoutTree=_,e.stopEvent=u,e.toggleSelectedLine=m});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@yh7iku/vue-tree-flow",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Vue 3 树形流程设计器组件，支持节点拖拽、贝塞尔连线、折叠、缩放与主题切换",
+  "keywords": [
+    "vue",
+    "vue3",
+    "flow",
+    "flowchart",
+    "tree",
+    "diagram",
+    "designer"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-tree-flow.umd.cjs",
+  "module": "./dist/vue-tree-flow.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/vue-tree-flow.js",
+      "require": "./dist/vue-tree-flow.umd.cjs"
+    },
+    "./style.css": "./dist/vue-tree-flow.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.js",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/language-core": "^3.3.11",
+    "sass-embedded": "^1.102.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.1",
+    "vite-plugin-dts": "^5.1.0",
+    "vue": "^3.5.0"
+  }
+}