@michael_home/workflow-engine-vue 1.0.3 → 1.0.4
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/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(N,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(N=typeof globalThis<"u"?globalThis:N||self,a(N.WorkflowEngineVue={},N.Vue))})(this,function(N,a){"use strict";const x={Top:"TOP",Right:"RIGHT",Bottom:"BOTTOM",Left:"LEFT"},P=20,T=(s,f)=>{const c=s.position.x+s.size.width/2,y=s.position.y+s.size.height/2;switch(f.direction){case x.Top:return{x:c,y:s.position.y};case x.Right:return{x:s.position.x+s.size.width,y};case x.Bottom:return{x:c,y:s.position.y+s.size.height};case x.Left:return{x:s.position.x,y}}},se=(s,f,c,y)=>{for(const e of f)if(e.id!==s)for(const t of e.ports){const n=T(e,t);if(Math.hypot(n.x-c.x,n.y-c.y)<=y)return{node:e,port:t,point:n}}},ne=(s,f,c)=>{switch(f){case x.Top:return c.y<s.y-P?x.Bottom:x.Top;case x.Bottom:return c.y>s.y+P?x.Top:x.Bottom;case x.Left:return c.x<s.x-P?x.Right:x.Left;case x.Right:return c.x>s.x+P?x.Left:x.Right}},B=(s,f,c)=>{const y=[];for(const t of s){const n=y[y.length-1];(!n||n.x!==t.x||n.y!==t.y)&&y.push(t)}const e=y.slice();for(let t=1;t<=e.length-3;t+=1){const n=e[t-1],i=e[t],o=e[t+1],d=e[t+2];if(n.x===i.x&&i.y===o.y&&o.x===d.x){const m=Math.abs(o.x-i.x),M=i.y-n.y,k=d.y-o.y;m<=P/2&&Math.sign(M)!==0&&Math.sign(k)!==0&&Math.sign(M)!==Math.sign(k)&&(e.splice(t,2,{x:n.x,y:d.y}),t=Math.max(0,t-2));continue}if(n.y===i.y&&i.x===o.x&&o.y===d.y){const m=Math.abs(o.y-i.y),M=i.x-n.x,k=d.x-o.x;m<=P/2&&Math.sign(M)!==0&&Math.sign(k)!==0&&Math.sign(M)!==Math.sign(k)&&(e.splice(t,2,{x:d.x,y:n.y}),t=Math.max(0,t-2))}}for(let t=e.length-1;t>=2;t-=1){const n=e[t-2],i=e[t-1],o=e[t];(n.x===i.x&&i.x===o.x||n.y===i.y&&i.y===o.y)&&e.splice(t-1,1)}if(f!==void 0&&c!==void 0&&f===c&&e.length>=4)if(f===x.Top||f===x.Bottom)for(let n=1;n<=e.length-3;n+=1){const i=e[n-1],o=e[n],d=e[n+1],u=e[n+2];if(!(i.x===o.x&&o.y===d.y&&d.x===u.x))continue;Math.abs(d.x-o.x)<=P&&(e.splice(n,2),n=Math.max(0,n-2))}else for(let n=1;n<=e.length-3;n+=1){const i=e[n-1],o=e[n],d=e[n+1],u=e[n+2];if(!(i.y===o.y&&o.x===d.x&&d.y===u.y))continue;Math.abs(d.y-o.y)<=P&&(e.splice(n,2),n=Math.max(0,n-2))}return e},re=(s,f,c)=>{switch(c){case x.Right:return s>0;case x.Left:return s<0;case x.Bottom:return f>0;case x.Top:return f<0}},ie=(s,f,c)=>{switch(c){case x.Right:case x.Left:return Math.abs(f);case x.Bottom:case x.Top:return Math.abs(s)}},ce=(s,f,c,y)=>{const e=s.x,t=s.y,n=c.x,i=c.y,o=P,d=[s],u=Math.round((e+n)/2),g=Math.round((t+i)/2),m=n>=e&&i<=t,M=n<e&&i<=t,k=n<e&&i>t;if(e===n&&t===i&&f===y){switch(f){case x.Left:d.push({x:e-o,y:t});break;case x.Right:d.push({x:e+o,y:t});break;case x.Top:d.push({x:e,y:t-o});break;case x.Bottom:d.push({x:e,y:t+o});break}return d.push(c),B(d,f,y)}const b=f===x.Top||f===x.Bottom,p=y===x.Top||y===x.Bottom,C=f===x.Left||f===x.Right,R=y===x.Left||y===x.Right;if(f===y){if(b&&Math.abs(n-e)<=o)return d.push({x:e,y:i},c),B(d,f,y);if(C&&Math.abs(i-t)<=o)return d.push({x:n,y:t},c),B(d,f,y)}const Y=Math.abs(n-e)<=o*2&&Math.abs(i-t)<=o*8;if(Y&&b&&p)return d.push({x:e,y:g},{x:n,y:g},c),B(d,f,y);if(Y&&C&&R)return d.push({x:u,y:t},{x:u,y:i},c),B(d,f,y);switch(f){case x.Top:switch(y){case x.Left:m?d.push({x:e,y:i}):M?d.push({x:e,y:g},{x:n-o,y:g},{x:n-o,y:i}):k?d.push({x:e,y:t-o},{x:n-o,y:t-o},{x:n-o,y:i}):d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i});break;case x.Bottom:if(n===e&&i<t)break;i<t-o?d.push({x:e,y:g},{x:n,y:g}):d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i+o},{x:n,y:i+o});break;case x.Right:m?d.push({x:e,y:g},{x:n+o,y:g},{x:n+o,y:i}):M?d.push({x:e,y:i}):k?d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i}):d.push({x:e,y:t-o},{x:n+o,y:t-o},{x:n+o,y:i});break;case x.Top:{const E=i<t?i-o:t-o;if(Math.abs(i-t)<=o*3){const z=Math.round((t+i)/2);d.push({x:e,y:z},{x:n,y:z})}else d.push({x:e,y:E},{x:n,y:E});break}}break;case x.Bottom:switch(y){case x.Left:M?d.push({x:e,y:t+o},{x:n-o,y:t+o},{x:n-o,y:i}):k?d.push({x:e,y:g},{x:n-o,y:g},{x:n-o,y:i}):m?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i}):d.push({x:e,y:i});break;case x.Bottom:{const E=i<t?t+o:i+o;if(Math.abs(i-t)<=o*3){const z=Math.round((t+i)/2);d.push({x:e,y:z},{x:n,y:z})}else d.push({x:e,y:E},{x:n,y:E});break}case x.Right:M?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i}):k?d.push({x:e,y:i}):m?d.push({x:e,y:t+o},{x:n+o,y:t+o},{x:n+o,y:i}):d.push({x:e,y:g},{x:n+o,y:g},{x:n+o,y:i});break;case x.Top:if(n===e&&i>t)break;i-o<t?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i-o},{x:n,y:i-o}):d.push({x:e,y:g},{x:n,y:g});break}break;case x.Left:switch(y){case x.Left:n<e?d.push({x:n-o,y:t},{x:n-o,y:i}):d.push({x:e-o,y:t},{x:e-o,y:i});break;case x.Bottom:M?d.push({x:n,y:t}):k?d.push({x:u,y:t},{x:u,y:i+o},{x:n,y:i+o}):m?d.push({x:e-o,y:t},{x:e-o,y:g},{x:n,y:g}):d.push({x:e-o,y:t},{x:e-o,y:i+o},{x:n,y:i+o});break;case x.Right:if(n<e-o)d.push({x:u,y:t},{x:u,y:i});else{if(n<e&&i===t)break;d.push({x:e-o,y:t},{x:e-o,y:g},{x:n+o,y:g},{x:n+o,y:i})}break;case x.Top:m?d.push({x:e-o,y:t},{x:e-o,y:i-o},{x:n,y:i-o}):M?d.push({x:u,y:t},{x:u,y:i-o},{x:n,y:i-o}):k?d.push({x:n,y:t}):d.push({x:e-o,y:t},{x:e-o,y:g},{x:n,y:g});break}break;case x.Right:switch(y){case x.Left:if(n-o<e)d.push({x:e+o,y:t},{x:e+o,y:g},{x:n-o,y:g},{x:n-o,y:i});else{if(n>e&&i===t)break;d.push({x:u,y:t},{x:u,y:i})}break;case x.Bottom:M?d.push({x:e+o,y:t},{x:e+o,y:g},{x:n,y:g}):k?d.push({x:e+o,y:t},{x:e+o,y:i+o},{x:n,y:i+o}):m?d.push({x:n,y:t}):d.push({x:u,y:t},{x:u,y:i+o},{x:n,y:i+o});break;case x.Right:n<e?d.push({x:e+o,y:t},{x:e+o,y:i}):d.push({x:n+o,y:t},{x:n+o,y:i});break;case x.Top:n>e&&i<t?d.push({x:u,y:t},{x:u,y:i-o},{x:n,y:i-o}):n<=e&&i<=t?d.push({x:e+o,y:t},{x:e+o,y:i-o},{x:n,y:i-o}):n<e&&i>t?d.push({x:e+o,y:t},{x:e+o,y:g},{x:n,y:g}):d.push({x:n,y:t});break}break}return d.push(c),B(d)},O=s=>{const f=T(s.sourceNode,s.sourcePort),c=se(s.sourceNode.id,s.nodes,s.currentPoint,s.hitRadius),y=(c==null?void 0:c.point)??s.currentPoint,e=(c==null?void 0:c.port.direction)??ne(f,s.sourcePort.direction,y);return{points:ce(f,s.sourcePort.direction,y,e),snappedTarget:c}},ae=(s,f,c)=>{const y=T(s,f);let e;for(const t of c)if(t.id!==s.id)for(const n of t.ports){const i=T(t,n),o=i.x-y.x,d=i.y-y.y;if(!re(o,d,f.direction))continue;const u=Math.hypot(o,d),g=ie(o,d,f.direction);(!e||g<e.axisDistance||g===e.axisDistance&&u<e.distance)&&(e={node:t,port:n,distance:u,axisDistance:g})}if(e)return{node:e.node,port:e.port}},le=s=>{if(s.mode==="click")return ae(s.sourceNode,s.sourcePort,s.nodes);if(!s.currentPoint||s.hitRadius===void 0)return;const c=O({sourceNode:s.sourceNode,sourcePort:s.sourcePort,nodes:s.nodes,currentPoint:s.currentPoint,hitRadius:s.hitRadius}).snappedTarget;if(c)return{node:c.node,port:c.port}},A=s=>{const f=s.nodes.find(y=>y.id===s.sourceNodeId);if(!f)return;const c=f.ports.find(y=>y.id===s.sourcePortId);if(c)return{sourceNode:f,sourcePort:c}},de=s=>{const f=le(s);return f?{sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId,targetNodeId:f.node.id,targetPortId:f.port.id}:{sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId}},he=s=>Math.hypot(s.currentClientX-s.pressedClientX,s.currentClientY-s.pressedClientY)>=s.threshold,fe=s=>{let f=s.clientX-s.offsetX,c=s.clientY-s.offsetY;s.snapToGrid&&(f=Math.round(f/s.gridSize)*s.gridSize,c=Math.round(c/s.gridSize)*s.gridSize);const y=s.alignThreshold??10,e=f+s.node.size.width/2,t=c+s.node.size.height/2;if(s.nodes&&s.nodes.length>1&&y>0){let n,i=Number.POSITIVE_INFINITY,o,d=Number.POSITIVE_INFINITY;for(const u of s.nodes){if(u.id===s.node.id)continue;const g=u.position.x+u.size.width/2,m=u.position.y+u.size.height/2,M=Math.abs(g-e);M<=y&&M<i&&(i=M,n=g-s.node.size.width/2);const k=Math.abs(m-t);k<=y&&k<d&&(d=k,o=m-s.node.size.height/2)}n!==void 0&&(f=n),o!==void 0&&(c=o)}return f=Math.min(s.canvasWidth-s.node.size.width,Math.max(0,f)),c=Math.min(s.canvasHeight-s.node.size.height,Math.max(0,c)),{x:f,y:c}},ye=10,xe=6,ue=3,W=s=>Math.round(s),ge=s=>({x:W(s.x),y:W(s.y)}),pe=(s,f,c,y)=>{const e=Math.hypot(f.x-s.x,f.y-s.y),t=Math.hypot(c.x-f.x,c.y-f.y);return e===0||t===0?0:Math.min(y,e/2,t/2)},me=s=>{if(s.length===0)return"";if(s.length<3){const[y,...e]=s,t=[`M ${y.x} ${y.y}`];for(const n of e)t.push(`L ${n.x} ${n.y}`);return t.join(" ")}const f=[`M ${s[0].x} ${s[0].y}`];for(let y=1;y<s.length-1;y+=1){const e=s[y-1],t=s[y],n=s[y+1];if(!(e.x===t.x&&t.y===n.y||e.y===t.y&&t.x===n.x)){f.push(`L ${t.x} ${t.y}`);continue}const o=pe(e,t,n,ue);if(o<=0){f.push(`L ${t.x} ${t.y}`);continue}const d=t.x+Math.sign(e.x-t.x)*o,u=t.y+Math.sign(e.y-t.y)*o,g=t.x+Math.sign(n.x-t.x)*o,m=t.y+Math.sign(n.y-t.y)*o,k=(t.x-e.x)*(n.y-t.y)-(t.y-e.y)*(n.x-t.x)>0?1:0;f.push(`L ${d} ${u}`),f.push(`A ${o} ${o} 0 0 ${k} ${g} ${m}`)}const c=s[s.length-1];return f.push(`L ${c.x} ${c.y}`),f.join(" ")},we=(s,f,c)=>{const y=s.x-f.x,e=s.y-f.y,t=Math.hypot(y,e);if(t===0)return s;const n=y/t,i=e/t;return{x:s.x-n*c,y:s.y-i*c}},ke=(s,f)=>{if(s.length<2)return"";const c=s[s.length-1],y=s[s.length-2],e=c.x-y.x,t=c.y-y.y,n=Math.hypot(e,t);if(n===0)return"";const i=e/n,o=t/n,d=c.x-i*f.arrowLength,u=c.y-o*f.arrowLength,g=-o,m=i,M=d+g*(f.arrowWidth/2),k=u+m*(f.arrowWidth/2),b=d-g*(f.arrowWidth/2),p=u-m*(f.arrowWidth/2);return`${c.x},${c.y} ${M},${k} ${b},${p}`},D=(s,f={})=>{const c={arrowLength:f.arrowLength??ye,arrowWidth:f.arrowWidth??xe,pixelSnap:f.pixelSnap??!0},y=ke(s,c);let e=s.slice();if(e.length>=2){const t=e[e.length-1],n=e[e.length-2];e[e.length-1]=we(t,n,c.arrowLength)}return c.pixelSnap&&(e=e.map(t=>ge(t))),{points:s,path:me(e),arrow:y}},be={class:"zoom-controls"},Me={class:"zoom-text"},Ie=["viewBox"],Ce=["transform"],Pe={class:"edge-layer"},Ne=["d","onMousedown"],Ee=["d","stroke","stroke-dasharray","onMousedown"],ze=["points","fill","stroke","onMousedown"],Be=["x","y","fill"],_e=["d"],Te=["points"],Le={class:"node-layer"},Ye=["transform"],Re=["x","y","width","height","fill","onMousedown"],Se=["x","y","width","height","rx","ry","fill","onMousedown"],Ve=["points","fill","onMousedown"],Xe=["x","y","width","height"],$e={key:0,width:"14",height:"14",class:"node-icon-dom","aria-hidden":"true"},ve=["href","fill"],He={key:1,class:"node-icon-fallback"},Fe={class:"node-title-text"},Oe=["cx","cy","onMousedown"],Ae=((s,f)=>{const c=s.__vccOpts||s;for(const[y,e]of f)c[y]=e;return c})(a.defineComponent({__name:"CanvasView",props:{nodes:{},edges:{},selectedNodeId:{},selectedEdgeId:{},width:{},height:{},panX:{default:0},panY:{default:0},zoom:{default:1},snapToGrid:{type:Boolean,default:!0},gridSize:{default:10},alignThreshold:{default:10},portHitRadius:{default:14},portDragThreshold:{default:4}},emits:["selectionChange","nodePositionChange","edgeCreate","edgeDelete","nodeDelete"],setup(s,{emit:f}){const c=s,y=f,e=a.ref(c.zoom),t=l=>Math.min(2,Math.max(.4,Number(l.toFixed(2)))),n=()=>{e.value=t(e.value+.1)},i=()=>{e.value=t(e.value-.1)};a.watch(()=>c.zoom,l=>{e.value=t(l)});const o=a.computed(()=>`translate(${c.panX} ${c.panY}) scale(${e.value})`),d=a.ref(),u=a.ref(),g=a.reactive({width:700,height:240});let m;const M=a.computed(()=>c.width??g.width),k=a.computed(()=>c.height??g.height),b=a.reactive({active:!1,nodeId:"",offsetX:0,offsetY:0,latestClientX:0,latestClientY:0}),p=a.reactive({active:!1,sourceNodeId:"",sourcePortId:"",pendingClick:!1,pressedClientX:0,pressedClientY:0,currentX:0,currentY:0}),C=a.reactive({rafId:0,scheduled:!1}),R=l=>{const h=l.data;return(h==null?void 0:h.text)??""},Y=l=>{const h=l.data;return(h==null?void 0:h.lineColor)??"#1c7ed6"},E=l=>{const h=l.data;return(h==null?void 0:h.fontColor)??"#0f172a"},z=l=>{const h=l.data;return(h==null?void 0:h.lineStyle)==="dashed"?"6 4":void 0},We=l=>{const h=l.data;return(h==null?void 0:h.runtimeStatus)??"idle"},De=l=>We(l)==="pending",Ge=l=>{if(l.length<2)return;const h=[];let r=0;for(let I=1;I<l.length;I+=1){const _=l[I-1],H=l[I],F=Math.hypot(H.x-_.x,H.y-_.y);F!==0&&(h.push({start:_,end:H,length:F}),r+=F)}if(h.length===0||r===0)return;const w=r/2;let L=0;for(const I of h){if(L+I.length>=w){const _=(w-L)/I.length;return{x:I.start.x+(I.end.x-I.start.x)*_,y:I.start.y+(I.end.y-I.start.y)*_}}L+=I.length}const oe=h[h.length-1];return{x:oe.end.x,y:oe.end.y}},je=a.computed(()=>c.edges.map(l=>{const h=l.points??[],r=D(h,{pixelSnap:!0});return{edge:l,edgeId:l.id,path:r.path,arrow:r.arrow,label:R(l),lineColor:Y(l),lineDasharray:z(l),labelColor:E(l),labelPoint:Ge(h),flowing:De(l)}})),Ue=l=>{const h=l.data;return(h==null?void 0:h.title)??l.id},S=l=>{const h=l.data;return(h==null?void 0:h.icon)??""},G=l=>{const h=S(l);return!h||!h.startsWith("icon-")?"":`#${h}`},V=l=>{const h=l.data;return(h==null?void 0:h.runtimeStatus)==="completed"?h.completedFillColor??"#bbf7d0":(h==null?void 0:h.runtimeStatus)==="active"?"#dcfce7":(h==null?void 0:h.nodeColor)??"#ffffff"},j=l=>{const h=l.data;return(h==null?void 0:h.fontColor)??"#0f172a"},U=l=>{const h=l.data;return(h==null?void 0:h.nodeShape)??"rect"},Qe=l=>{const h=l.size.width/2,r=l.size.height/2;return`0,${-r} ${h},0 0,${r} ${-h},0`},qe=l=>{const h=new Map(l.ports.map(r=>[r.direction,r]));return[{direction:x.Top,dx:0,dy:-l.size.height/2},{direction:x.Right,dx:l.size.width/2,dy:0},{direction:x.Bottom,dx:0,dy:l.size.height/2},{direction:x.Left,dx:-l.size.width/2,dy:0}].map(r=>({...r,port:h.get(r.direction)})).filter(r=>!!r.port)},Q=l=>{const h=u.value;if(!h)return{x:l.clientX,y:l.clientY};const r=h.getBoundingClientRect();return{x:l.clientX-r.left,y:l.clientY-r.top}},X=l=>({x:(l.x-c.panX)/e.value,y:(l.y-c.panY)/e.value}),Ke=()=>{if(C.scheduled=!1,!b.active)return;const l=c.nodes.find(r=>r.id===b.nodeId);if(!l)return;const h=fe({node:l,nodes:c.nodes,alignThreshold:c.alignThreshold,clientX:b.latestClientX,clientY:b.latestClientY,offsetX:b.offsetX,offsetY:b.offsetY,canvasWidth:M.value/e.value,canvasHeight:k.value/e.value,gridSize:c.gridSize,snapToGrid:c.snapToGrid});y("nodePositionChange",{nodeId:b.nodeId,position:h})},Ze=()=>{p.active=!1,p.pendingClick=!1,p.sourceNodeId="",p.sourcePortId=""},q=()=>{b.active=!1,b.nodeId="",C.rafId&&(window.cancelAnimationFrame(C.rafId),C.rafId=0),C.scheduled=!1},Je=()=>{if(!p.active&&!p.pendingClick)return;const l=A({sourceNodeId:p.sourceNodeId,sourcePortId:p.sourcePortId,nodes:c.nodes});if(l){const h=de({sourceNodeId:l.sourceNode.id,sourcePortId:l.sourcePort.id,sourceNode:l.sourceNode,sourcePort:l.sourcePort,nodes:c.nodes,mode:p.pendingClick?"click":"drag",currentPoint:{x:p.currentX,y:p.currentY},hitRadius:c.portHitRadius});h.targetNodeId&&h.targetPortId&&y("edgeCreate",{sourceNodeId:h.sourceNodeId,sourcePortId:h.sourcePortId,targetNodeId:h.targetNodeId,targetPortId:h.targetPortId})}Ze()},K=a.computed(()=>{if(!p.active)return[];const l=A({sourceNodeId:p.sourceNodeId,sourcePortId:p.sourcePortId,nodes:c.nodes});return l?O({sourceNode:l.sourceNode,sourcePort:l.sourcePort,nodes:c.nodes,currentPoint:{x:p.currentX,y:p.currentY},hitRadius:c.portHitRadius}).points:[]}),Z=a.computed(()=>D(K.value,{pixelSnap:!0})),$=(l,h)=>{if(p.active)return;h.preventDefault(),y("selectionChange",{nodeId:l.id}),b.active=!0,b.nodeId=l.id;const r=X(Q(h));b.offsetX=r.x-l.position.x,b.offsetY=r.y-l.position.y,b.latestClientX=r.x,b.latestClientY=r.y},et=(l,h,r)=>{r.preventDefault(),y("selectionChange",{nodeId:l.id});const w=T(l,h);p.active=!1,p.pendingClick=!0,p.pressedClientX=r.clientX,p.pressedClientY=r.clientY,p.sourceNodeId=l.id,p.sourcePortId=h.id,p.currentX=w.x,p.currentY=w.y},v=(l,h)=>{h.preventDefault(),h.stopPropagation(),y("selectionChange",{edgeId:l.id})},tt=()=>{p.active||b.active||y("selectionChange",{})},J=l=>{const h=Q(l);if(p.pendingClick&&!p.active&&he({pressedClientX:p.pressedClientX,pressedClientY:p.pressedClientY,currentClientX:l.clientX,currentClientY:l.clientY,threshold:c.portDragThreshold})&&(p.active=!0,p.pendingClick=!1),p.active){const w=X(h);p.currentX=w.x,p.currentY=w.y;return}if(!b.active)return;const r=X(h);b.latestClientX=r.x,b.latestClientY=r.y,!C.scheduled&&(C.scheduled=!0,C.rafId=window.requestAnimationFrame(Ke))},ee=()=>{q(),Je()},te=l=>{if(l.key!=="Delete"&&l.key!=="Backspace")return;const h=l.target;if(h){const r=h.tagName;if(r==="INPUT"||r==="TEXTAREA"||h.isContentEditable)return}if(c.selectedEdgeId){l.preventDefault(),y("edgeDelete",{edgeId:c.selectedEdgeId});return}c.selectedNodeId&&(l.preventDefault(),y("nodeDelete",{nodeId:c.selectedNodeId}))};return a.onMounted(()=>{const l=()=>{const h=d.value;if(!h)return;const r=h.getBoundingClientRect();r.width>0&&(g.width=r.width),r.height>0&&(g.height=r.height)};l(),m=new ResizeObserver(l),d.value&&m.observe(d.value),window.addEventListener("mousemove",J),window.addEventListener("mouseup",ee),window.addEventListener("keydown",te)}),a.onUnmounted(()=>{q(),m==null||m.disconnect(),window.removeEventListener("mousemove",J),window.removeEventListener("mouseup",ee),window.removeEventListener("keydown",te)}),(l,h)=>(a.openBlock(),a.createElementBlock("section",{ref_key:"containerRef",ref:d,class:"canvas-view",style:{width:"100%",height:"100%"}},[a.createElementVNode("div",be,[a.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:i},"-"),a.createElementVNode("span",Me,a.toDisplayString(Math.round(e.value*100))+"%",1),a.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:n},"+")]),(a.openBlock(),a.createElementBlock("svg",{ref_key:"svgRef",ref:u,class:"canvas-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${M.value} ${k.value}`,onMousedown:a.withModifiers(tt,["self"])},[a.createElementVNode("g",{transform:o.value},[a.createElementVNode("g",Pe,[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(je.value,r=>(a.openBlock(),a.createElementBlock(a.Fragment,{key:r.edgeId},[a.createElementVNode("path",{d:r.path,fill:"none",stroke:"transparent","stroke-width":"15","vector-effect":"non-scaling-stroke",class:"edge-hit",onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,40,Ne),a.createElementVNode("path",{d:r.path,stroke:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,"stroke-width":"1",fill:"none","stroke-linecap":"round","stroke-linejoin":"round","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:a.normalizeClass(["edge-path",{"edge-flowing":r.flowing}]),"stroke-dasharray":r.lineDasharray??(r.flowing?"7 6":void 0),onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,42,Ee),a.createElementVNode("polygon",{points:r.arrow,fill:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,stroke:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,"vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:"edge-arrow",onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,40,ze),r.label&&r.labelPoint?(a.openBlock(),a.createElementBlock("text",{key:0,x:r.labelPoint.x,y:r.labelPoint.y,class:"edge-label",fill:r.labelColor,"text-anchor":"middle","dominant-baseline":"central"},a.toDisplayString(r.label),9,Be)):a.createCommentVNode("",!0)],64))),128)),K.value.length>1?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[a.createElementVNode("path",{d:Z.value.path,stroke:"#94a3b8","stroke-width":"2",fill:"none","stroke-linecap":"round","stroke-linejoin":"round","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision"},null,8,_e),a.createElementVNode("polygon",{points:Z.value.arrow,fill:"#94a3b8",stroke:"#94a3b8","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision"},null,8,Te)],64)):a.createCommentVNode("",!0)]),a.createElementVNode("g",Le,[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(s.nodes,r=>(a.openBlock(),a.createElementBlock("g",{key:r.id,class:"node-group",transform:`translate(${r.position.x+r.size.width/2} ${r.position.y+r.size.height/2})`},[U(r)==="rect"?(a.openBlock(),a.createElementBlock("rect",{key:0,x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,rx:"4",ry:"4",fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Re)):U(r)==="ellipse"?(a.openBlock(),a.createElementBlock("rect",{key:1,x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,rx:r.size.height/2,ry:r.size.height/2,fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Se)):(a.openBlock(),a.createElementBlock("polygon",{key:2,points:Qe(r),fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Ve)),(a.openBlock(),a.createElementBlock("foreignObject",{x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,class:"node-title-foreign"},[a.createElementVNode("div",{xmlns:"http://www.w3.org/1999/xhtml",class:"node-title-dom",style:a.normalizeStyle({color:j(r)})},[G(r)?(a.openBlock(),a.createElementBlock("svg",$e,[a.createElementVNode("use",{href:G(r),fill:j(r)},null,8,ve)])):S(r)?(a.openBlock(),a.createElementBlock("span",He,a.toDisplayString(S(r)),1)):a.createCommentVNode("",!0),a.createElementVNode("span",Fe,a.toDisplayString(Ue(r)),1)],4)],8,Xe)),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(qe(r),w=>a.withDirectives((a.openBlock(),a.createElementBlock("circle",{key:w.port.id,cx:w.dx,cy:w.dy,r:"5",fill:"#ffffff",stroke:"#1d4ed8",class:"port-dot",onMousedown:a.withModifiers(L=>et(r,w.port,L),["stop"])},null,40,Oe)),[[a.vShow,s.selectedNodeId===r.id]])),128))],8,Ye))),128))])],8,Ce)],40,Ie))],512))}}),[["__scopeId","data-v-ed82a114"]]);N.CanvasView=Ae,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(N,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(N=typeof globalThis<"u"?globalThis:N||self,a(N.WorkflowEngineVue={},N.Vue))})(this,function(N,a){"use strict";const x={Top:"TOP",Right:"RIGHT",Bottom:"BOTTOM",Left:"LEFT"},P=20,T=(s,f)=>{const c=s.position.x+s.size.width/2,y=s.position.y+s.size.height/2;switch(f.direction){case x.Top:return{x:c,y:s.position.y};case x.Right:return{x:s.position.x+s.size.width,y};case x.Bottom:return{x:c,y:s.position.y+s.size.height};case x.Left:return{x:s.position.x,y}}},se=(s,f,c,y)=>{for(const e of f)if(e.id!==s)for(const t of e.ports){const n=T(e,t);if(Math.hypot(n.x-c.x,n.y-c.y)<=y)return{node:e,port:t,point:n}}},ne=(s,f,c)=>{switch(f){case x.Top:return c.y<s.y-P?x.Bottom:x.Top;case x.Bottom:return c.y>s.y+P?x.Top:x.Bottom;case x.Left:return c.x<s.x-P?x.Right:x.Left;case x.Right:return c.x>s.x+P?x.Left:x.Right}},B=(s,f,c)=>{const y=[];for(const t of s){const n=y[y.length-1];(!n||n.x!==t.x||n.y!==t.y)&&y.push(t)}const e=y.slice();for(let t=1;t<=e.length-3;t+=1){const n=e[t-1],i=e[t],o=e[t+1],d=e[t+2];if(n.x===i.x&&i.y===o.y&&o.x===d.x){const m=Math.abs(o.x-i.x),M=i.y-n.y,k=d.y-o.y;m<=P/2&&Math.sign(M)!==0&&Math.sign(k)!==0&&Math.sign(M)!==Math.sign(k)&&(e.splice(t,2,{x:n.x,y:d.y}),t=Math.max(0,t-2));continue}if(n.y===i.y&&i.x===o.x&&o.y===d.y){const m=Math.abs(o.y-i.y),M=i.x-n.x,k=d.x-o.x;m<=P/2&&Math.sign(M)!==0&&Math.sign(k)!==0&&Math.sign(M)!==Math.sign(k)&&(e.splice(t,2,{x:d.x,y:n.y}),t=Math.max(0,t-2))}}for(let t=e.length-1;t>=2;t-=1){const n=e[t-2],i=e[t-1],o=e[t];(n.x===i.x&&i.x===o.x||n.y===i.y&&i.y===o.y)&&e.splice(t-1,1)}if(f!==void 0&&c!==void 0&&f===c&&e.length>=4)if(f===x.Top||f===x.Bottom)for(let n=1;n<=e.length-3;n+=1){const i=e[n-1],o=e[n],d=e[n+1],u=e[n+2];if(!(i.x===o.x&&o.y===d.y&&d.x===u.x))continue;Math.abs(d.x-o.x)<=P&&(e.splice(n,2),n=Math.max(0,n-2))}else for(let n=1;n<=e.length-3;n+=1){const i=e[n-1],o=e[n],d=e[n+1],u=e[n+2];if(!(i.y===o.y&&o.x===d.x&&d.y===u.y))continue;Math.abs(d.y-o.y)<=P&&(e.splice(n,2),n=Math.max(0,n-2))}return e},re=(s,f,c)=>{switch(c){case x.Right:return s>0;case x.Left:return s<0;case x.Bottom:return f>0;case x.Top:return f<0}},ie=(s,f,c)=>{switch(c){case x.Right:case x.Left:return Math.abs(f);case x.Bottom:case x.Top:return Math.abs(s)}},ce=(s,f,c,y)=>{const e=s.x,t=s.y,n=c.x,i=c.y,o=P,d=[s],u=Math.round((e+n)/2),g=Math.round((t+i)/2),m=n>=e&&i<=t,M=n<e&&i<=t,k=n<e&&i>t;if(e===n&&t===i&&f===y){switch(f){case x.Left:d.push({x:e-o,y:t});break;case x.Right:d.push({x:e+o,y:t});break;case x.Top:d.push({x:e,y:t-o});break;case x.Bottom:d.push({x:e,y:t+o});break}return d.push(c),B(d,f,y)}const b=f===x.Top||f===x.Bottom,p=y===x.Top||y===x.Bottom,C=f===x.Left||f===x.Right,R=y===x.Left||y===x.Right;if(f===y){if(b&&Math.abs(n-e)<=o)return d.push({x:e,y:i},c),B(d,f,y);if(C&&Math.abs(i-t)<=o)return d.push({x:n,y:t},c),B(d,f,y)}const Y=Math.abs(n-e)<=o*2&&Math.abs(i-t)<=o*8;if(Y&&b&&p)return d.push({x:e,y:g},{x:n,y:g},c),B(d,f,y);if(Y&&C&&R)return d.push({x:u,y:t},{x:u,y:i},c),B(d,f,y);switch(f){case x.Top:switch(y){case x.Left:m?d.push({x:e,y:i}):M?d.push({x:e,y:g},{x:n-o,y:g},{x:n-o,y:i}):k?d.push({x:e,y:t-o},{x:n-o,y:t-o},{x:n-o,y:i}):d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i});break;case x.Bottom:if(n===e&&i<t)break;i<t-o?d.push({x:e,y:g},{x:n,y:g}):d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i+o},{x:n,y:i+o});break;case x.Right:m?d.push({x:e,y:g},{x:n+o,y:g},{x:n+o,y:i}):M?d.push({x:e,y:i}):k?d.push({x:e,y:t-o},{x:u,y:t-o},{x:u,y:i}):d.push({x:e,y:t-o},{x:n+o,y:t-o},{x:n+o,y:i});break;case x.Top:{const E=i<t?i-o:t-o;if(Math.abs(i-t)<=o*3){const z=Math.round((t+i)/2);d.push({x:e,y:z},{x:n,y:z})}else d.push({x:e,y:E},{x:n,y:E});break}}break;case x.Bottom:switch(y){case x.Left:M?d.push({x:e,y:t+o},{x:n-o,y:t+o},{x:n-o,y:i}):k?d.push({x:e,y:g},{x:n-o,y:g},{x:n-o,y:i}):m?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i}):d.push({x:e,y:i});break;case x.Bottom:{const E=i<t?t+o:i+o;if(Math.abs(i-t)<=o*3){const z=Math.round((t+i)/2);d.push({x:e,y:z},{x:n,y:z})}else d.push({x:e,y:E},{x:n,y:E});break}case x.Right:M?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i}):k?d.push({x:e,y:i}):m?d.push({x:e,y:t+o},{x:n+o,y:t+o},{x:n+o,y:i}):d.push({x:e,y:g},{x:n+o,y:g},{x:n+o,y:i});break;case x.Top:if(n===e&&i>t)break;i-o<t?d.push({x:e,y:t+o},{x:u,y:t+o},{x:u,y:i-o},{x:n,y:i-o}):d.push({x:e,y:g},{x:n,y:g});break}break;case x.Left:switch(y){case x.Left:n<e?d.push({x:n-o,y:t},{x:n-o,y:i}):d.push({x:e-o,y:t},{x:e-o,y:i});break;case x.Bottom:M?d.push({x:n,y:t}):k?d.push({x:u,y:t},{x:u,y:i+o},{x:n,y:i+o}):m?d.push({x:e-o,y:t},{x:e-o,y:g},{x:n,y:g}):d.push({x:e-o,y:t},{x:e-o,y:i+o},{x:n,y:i+o});break;case x.Right:if(n<e-o)d.push({x:u,y:t},{x:u,y:i});else{if(n<e&&i===t)break;d.push({x:e-o,y:t},{x:e-o,y:g},{x:n+o,y:g},{x:n+o,y:i})}break;case x.Top:m?d.push({x:e-o,y:t},{x:e-o,y:i-o},{x:n,y:i-o}):M?d.push({x:u,y:t},{x:u,y:i-o},{x:n,y:i-o}):k?d.push({x:n,y:t}):d.push({x:e-o,y:t},{x:e-o,y:g},{x:n,y:g});break}break;case x.Right:switch(y){case x.Left:if(n-o<e)d.push({x:e+o,y:t},{x:e+o,y:g},{x:n-o,y:g},{x:n-o,y:i});else{if(n>e&&i===t)break;d.push({x:u,y:t},{x:u,y:i})}break;case x.Bottom:M?d.push({x:e+o,y:t},{x:e+o,y:g},{x:n,y:g}):k?d.push({x:e+o,y:t},{x:e+o,y:i+o},{x:n,y:i+o}):m?d.push({x:n,y:t}):d.push({x:u,y:t},{x:u,y:i+o},{x:n,y:i+o});break;case x.Right:n<e?d.push({x:e+o,y:t},{x:e+o,y:i}):d.push({x:n+o,y:t},{x:n+o,y:i});break;case x.Top:n>e&&i<t?d.push({x:u,y:t},{x:u,y:i-o},{x:n,y:i-o}):n<=e&&i<=t?d.push({x:e+o,y:t},{x:e+o,y:i-o},{x:n,y:i-o}):n<e&&i>t?d.push({x:e+o,y:t},{x:e+o,y:g},{x:n,y:g}):d.push({x:n,y:t});break}break}return d.push(c),B(d)},O=s=>{const f=T(s.sourceNode,s.sourcePort),c=se(s.sourceNode.id,s.nodes,s.currentPoint,s.hitRadius),y=(c==null?void 0:c.point)??s.currentPoint,e=(c==null?void 0:c.port.direction)??ne(f,s.sourcePort.direction,y);return{points:ce(f,s.sourcePort.direction,y,e),snappedTarget:c}},ae=(s,f,c)=>{const y=T(s,f);let e;for(const t of c)if(t.id!==s.id)for(const n of t.ports){const i=T(t,n),o=i.x-y.x,d=i.y-y.y;if(!re(o,d,f.direction))continue;const u=Math.hypot(o,d),g=ie(o,d,f.direction);(!e||g<e.axisDistance||g===e.axisDistance&&u<e.distance)&&(e={node:t,port:n,distance:u,axisDistance:g})}if(e)return{node:e.node,port:e.port}},le=s=>{if(s.mode==="click")return ae(s.sourceNode,s.sourcePort,s.nodes);if(!s.currentPoint||s.hitRadius===void 0)return;const c=O({sourceNode:s.sourceNode,sourcePort:s.sourcePort,nodes:s.nodes,currentPoint:s.currentPoint,hitRadius:s.hitRadius}).snappedTarget;if(c)return{node:c.node,port:c.port}},A=s=>{const f=s.nodes.find(y=>y.id===s.sourceNodeId);if(!f)return;const c=f.ports.find(y=>y.id===s.sourcePortId);if(c)return{sourceNode:f,sourcePort:c}},de=s=>{const f=le(s);return f?{sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId,targetNodeId:f.node.id,targetPortId:f.port.id}:{sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId}},he=s=>Math.hypot(s.currentClientX-s.pressedClientX,s.currentClientY-s.pressedClientY)>=s.threshold,fe=s=>{let f=s.clientX-s.offsetX,c=s.clientY-s.offsetY;s.snapToGrid&&(f=Math.round(f/s.gridSize)*s.gridSize,c=Math.round(c/s.gridSize)*s.gridSize);const y=s.alignThreshold??10,e=f+s.node.size.width/2,t=c+s.node.size.height/2;if(s.nodes&&s.nodes.length>1&&y>0){let n,i=Number.POSITIVE_INFINITY,o,d=Number.POSITIVE_INFINITY;for(const u of s.nodes){if(u.id===s.node.id)continue;const g=u.position.x+u.size.width/2,m=u.position.y+u.size.height/2,M=Math.abs(g-e);M<=y&&M<i&&(i=M,n=g-s.node.size.width/2);const k=Math.abs(m-t);k<=y&&k<d&&(d=k,o=m-s.node.size.height/2)}n!==void 0&&(f=n),o!==void 0&&(c=o)}return f=Math.min(s.canvasWidth-s.node.size.width,Math.max(0,f)),c=Math.min(s.canvasHeight-s.node.size.height,Math.max(0,c)),{x:f,y:c}},ye=10,xe=6,ue=3,W=s=>Math.round(s),ge=s=>({x:W(s.x),y:W(s.y)}),pe=(s,f,c,y)=>{const e=Math.hypot(f.x-s.x,f.y-s.y),t=Math.hypot(c.x-f.x,c.y-f.y);return e===0||t===0?0:Math.min(y,e/2,t/2)},me=s=>{if(s.length===0)return"";if(s.length<3){const[y,...e]=s,t=[`M ${y.x} ${y.y}`];for(const n of e)t.push(`L ${n.x} ${n.y}`);return t.join(" ")}const f=[`M ${s[0].x} ${s[0].y}`];for(let y=1;y<s.length-1;y+=1){const e=s[y-1],t=s[y],n=s[y+1];if(!(e.x===t.x&&t.y===n.y||e.y===t.y&&t.x===n.x)){f.push(`L ${t.x} ${t.y}`);continue}const o=pe(e,t,n,ue);if(o<=0){f.push(`L ${t.x} ${t.y}`);continue}const d=t.x+Math.sign(e.x-t.x)*o,u=t.y+Math.sign(e.y-t.y)*o,g=t.x+Math.sign(n.x-t.x)*o,m=t.y+Math.sign(n.y-t.y)*o,k=(t.x-e.x)*(n.y-t.y)-(t.y-e.y)*(n.x-t.x)>0?1:0;f.push(`L ${d} ${u}`),f.push(`A ${o} ${o} 0 0 ${k} ${g} ${m}`)}const c=s[s.length-1];return f.push(`L ${c.x} ${c.y}`),f.join(" ")},we=(s,f,c)=>{const y=s.x-f.x,e=s.y-f.y,t=Math.hypot(y,e);if(t===0)return s;const n=y/t,i=e/t;return{x:s.x-n*c,y:s.y-i*c}},ke=(s,f)=>{if(s.length<2)return"";const c=s[s.length-1],y=s[s.length-2],e=c.x-y.x,t=c.y-y.y,n=Math.hypot(e,t);if(n===0)return"";const i=e/n,o=t/n,d=c.x-i*f.arrowLength,u=c.y-o*f.arrowLength,g=-o,m=i,M=d+g*(f.arrowWidth/2),k=u+m*(f.arrowWidth/2),b=d-g*(f.arrowWidth/2),p=u-m*(f.arrowWidth/2);return`${c.x},${c.y} ${M},${k} ${b},${p}`},D=(s,f={})=>{const c={arrowLength:f.arrowLength??ye,arrowWidth:f.arrowWidth??xe,pixelSnap:f.pixelSnap??!0},y=ke(s,c);let e=s.slice();if(e.length>=2){const t=e[e.length-1],n=e[e.length-2];e[e.length-1]=we(t,n,c.arrowLength)}return c.pixelSnap&&(e=e.map(t=>ge(t))),{points:s,path:me(e),arrow:y}},be={class:"zoom-controls"},Me={class:"zoom-text"},Ie=["viewBox"],Ce=["transform"],Pe={class:"edge-layer"},Ne=["d","onMousedown"],Ee=["d","stroke","stroke-dasharray","onMousedown"],ze=["points","fill","stroke","onMousedown"],Be=["x","y","fill"],_e=["d"],Te=["points"],Le={class:"node-layer"},Ye=["transform"],Re=["x","y","width","height","fill","onMousedown"],Se=["x","y","width","height","rx","ry","fill","onMousedown"],Ve=["points","fill","onMousedown"],Xe=["x","y","width","height"],$e={key:0,width:"14",height:"14",class:"node-icon-dom","aria-hidden":"true"},ve=["href","fill"],He={key:1,class:"node-icon-fallback"},Fe={class:"node-title-text"},Oe=["cx","cy","onMousedown"],Ae=((s,f)=>{const c=s.__vccOpts||s;for(const[y,e]of f)c[y]=e;return c})(a.defineComponent({__name:"CanvasView",props:{nodes:{},edges:{},selectedNodeId:{},selectedEdgeId:{},width:{},height:{},panX:{default:0},panY:{default:0},zoom:{default:1},snapToGrid:{type:Boolean,default:!0},gridSize:{default:10},alignThreshold:{default:10},portHitRadius:{default:14},portDragThreshold:{default:4}},emits:["selectionChange","nodePositionChange","edgeCreate","edgeDelete","nodeDelete"],setup(s,{emit:f}){const c=s,y=f,e=a.ref(c.zoom),t=l=>Math.min(2,Math.max(.4,Number(l.toFixed(2)))),n=()=>{e.value=t(e.value+.1)},i=()=>{e.value=t(e.value-.1)};a.watch(()=>c.zoom,l=>{e.value=t(l)});const o=a.computed(()=>`translate(${c.panX} ${c.panY}) scale(${e.value})`),d=a.ref(),u=a.ref(),g=a.reactive({width:700,height:240});let m;const M=a.computed(()=>c.width??g.width),k=a.computed(()=>c.height??g.height),b=a.reactive({active:!1,nodeId:"",offsetX:0,offsetY:0,latestClientX:0,latestClientY:0}),p=a.reactive({active:!1,sourceNodeId:"",sourcePortId:"",pendingClick:!1,pressedClientX:0,pressedClientY:0,currentX:0,currentY:0}),C=a.reactive({rafId:0,scheduled:!1}),R=l=>{const h=l.data;return(h==null?void 0:h.text)??""},Y=l=>{const h=l.data;return(h==null?void 0:h.lineColor)??"#1c7ed6"},E=l=>{const h=l.data;return(h==null?void 0:h.fontColor)??"#0f172a"},z=l=>{const h=l.data;return(h==null?void 0:h.lineStyle)==="dashed"?"6 4":void 0},We=l=>{const h=l.data;return(h==null?void 0:h.runtimeStatus)??"idle"},De=l=>We(l)==="pending",Ge=l=>{if(l.length<2)return;const h=[];let r=0;for(let I=1;I<l.length;I+=1){const _=l[I-1],H=l[I],F=Math.hypot(H.x-_.x,H.y-_.y);F!==0&&(h.push({start:_,end:H,length:F}),r+=F)}if(h.length===0||r===0)return;const w=r/2;let L=0;for(const I of h){if(L+I.length>=w){const _=(w-L)/I.length;return{x:I.start.x+(I.end.x-I.start.x)*_,y:I.start.y+(I.end.y-I.start.y)*_}}L+=I.length}const oe=h[h.length-1];return{x:oe.end.x,y:oe.end.y}},je=a.computed(()=>c.edges.map(l=>{const h=l.points??[],r=D(h,{pixelSnap:!0});return{edge:l,edgeId:l.id,path:r.path,arrow:r.arrow,label:R(l),lineColor:Y(l),lineDasharray:z(l),labelColor:E(l),labelPoint:Ge(h),flowing:De(l)}})),Ue=l=>{const h=l.data;return(h==null?void 0:h.title)??l.id},S=l=>{const h=l.data;return(h==null?void 0:h.icon)??""},G=l=>{const h=S(l);return!h||!h.startsWith("icon-")?"":`#${h}`},V=l=>{const h=l.data;return(h==null?void 0:h.runtimeStatus)==="completed"?h.completedFillColor??"#bbf7d0":(h==null?void 0:h.runtimeStatus)==="active"?"#dcfce7":(h==null?void 0:h.nodeColor)??"#ffffff"},j=l=>{const h=l.data;return(h==null?void 0:h.fontColor)??"#0f172a"},U=l=>{const h=l.data;return(h==null?void 0:h.nodeShape)??"rect"},Qe=l=>{const h=l.size.width/2,r=l.size.height/2;return`0,${-r} ${h},0 0,${r} ${-h},0`},qe=l=>{const h=new Map(l.ports.map(r=>[r.direction,r]));return[{direction:x.Top,dx:0,dy:-l.size.height/2},{direction:x.Right,dx:l.size.width/2,dy:0},{direction:x.Bottom,dx:0,dy:l.size.height/2},{direction:x.Left,dx:-l.size.width/2,dy:0}].map(r=>({...r,port:h.get(r.direction)})).filter(r=>!!r.port)},Q=l=>{const h=u.value;if(!h)return{x:l.clientX,y:l.clientY};const r=h.getBoundingClientRect();return{x:l.clientX-r.left,y:l.clientY-r.top}},X=l=>({x:(l.x-c.panX)/e.value,y:(l.y-c.panY)/e.value}),Ke=()=>{if(C.scheduled=!1,!b.active)return;const l=c.nodes.find(r=>r.id===b.nodeId);if(!l)return;const h=fe({node:l,nodes:c.nodes,alignThreshold:c.alignThreshold,clientX:b.latestClientX,clientY:b.latestClientY,offsetX:b.offsetX,offsetY:b.offsetY,canvasWidth:M.value/e.value,canvasHeight:k.value/e.value,gridSize:c.gridSize,snapToGrid:c.snapToGrid});y("nodePositionChange",{nodeId:b.nodeId,position:h})},Ze=()=>{p.active=!1,p.pendingClick=!1,p.sourceNodeId="",p.sourcePortId=""},q=()=>{b.active=!1,b.nodeId="",C.rafId&&(window.cancelAnimationFrame(C.rafId),C.rafId=0),C.scheduled=!1},Je=()=>{if(!p.active&&!p.pendingClick)return;const l=A({sourceNodeId:p.sourceNodeId,sourcePortId:p.sourcePortId,nodes:c.nodes});if(l){const h=de({sourceNodeId:l.sourceNode.id,sourcePortId:l.sourcePort.id,sourceNode:l.sourceNode,sourcePort:l.sourcePort,nodes:c.nodes,mode:p.pendingClick?"click":"drag",currentPoint:{x:p.currentX,y:p.currentY},hitRadius:c.portHitRadius});h.targetNodeId&&h.targetPortId&&y("edgeCreate",{sourceNodeId:h.sourceNodeId,sourcePortId:h.sourcePortId,targetNodeId:h.targetNodeId,targetPortId:h.targetPortId})}Ze()},K=a.computed(()=>{if(!p.active)return[];const l=A({sourceNodeId:p.sourceNodeId,sourcePortId:p.sourcePortId,nodes:c.nodes});return l?O({sourceNode:l.sourceNode,sourcePort:l.sourcePort,nodes:c.nodes,currentPoint:{x:p.currentX,y:p.currentY},hitRadius:c.portHitRadius}).points:[]}),Z=a.computed(()=>D(K.value,{pixelSnap:!0})),$=(l,h)=>{if(p.active)return;h.preventDefault(),y("selectionChange",{nodeId:l.id}),b.active=!0,b.nodeId=l.id;const r=X(Q(h));b.offsetX=r.x-l.position.x,b.offsetY=r.y-l.position.y,b.latestClientX=r.x,b.latestClientY=r.y},et=(l,h,r)=>{r.preventDefault(),y("selectionChange",{nodeId:l.id});const w=T(l,h);p.active=!1,p.pendingClick=!0,p.pressedClientX=r.clientX,p.pressedClientY=r.clientY,p.sourceNodeId=l.id,p.sourcePortId=h.id,p.currentX=w.x,p.currentY=w.y},v=(l,h)=>{h.preventDefault(),h.stopPropagation(),y("selectionChange",{edgeId:l.id})},tt=()=>{p.active||b.active||y("selectionChange",{})},J=l=>{const h=Q(l);if(p.pendingClick&&!p.active&&he({pressedClientX:p.pressedClientX,pressedClientY:p.pressedClientY,currentClientX:l.clientX,currentClientY:l.clientY,threshold:c.portDragThreshold})&&(p.active=!0,p.pendingClick=!1),p.active){const w=X(h);p.currentX=w.x,p.currentY=w.y;return}if(!b.active)return;const r=X(h);b.latestClientX=r.x,b.latestClientY=r.y,!C.scheduled&&(C.scheduled=!0,C.rafId=window.requestAnimationFrame(Ke))},ee=()=>{q(),Je()},te=l=>{if(l.key!=="Delete"&&l.key!=="Backspace")return;const h=l.target;if(h){const r=h.tagName;if(r==="INPUT"||r==="TEXTAREA"||h.isContentEditable)return}if(c.selectedEdgeId){l.preventDefault(),y("edgeDelete",{edgeId:c.selectedEdgeId});return}c.selectedNodeId&&(l.preventDefault(),y("nodeDelete",{nodeId:c.selectedNodeId}))};return a.onMounted(()=>{const l=()=>{const h=d.value;if(!h)return;const r=h.getBoundingClientRect();r.width>0&&(g.width=r.width),r.height>0&&(g.height=r.height)};l(),m=new ResizeObserver(l),d.value&&m.observe(d.value),window.addEventListener("mousemove",J),window.addEventListener("mouseup",ee),window.addEventListener("keydown",te)}),a.onUnmounted(()=>{q(),m==null||m.disconnect(),window.removeEventListener("mousemove",J),window.removeEventListener("mouseup",ee),window.removeEventListener("keydown",te)}),(l,h)=>(a.openBlock(),a.createElementBlock("section",{ref_key:"containerRef",ref:d,class:"canvas-view",style:{width:"100%",height:"100%"}},[a.createElementVNode("div",be,[a.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:i},"-"),a.createElementVNode("span",Me,a.toDisplayString(Math.round(e.value*100))+"%",1),a.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:n},"+")]),(a.openBlock(),a.createElementBlock("svg",{ref_key:"svgRef",ref:u,class:"canvas-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${M.value} ${k.value}`,onMousedown:a.withModifiers(tt,["self"])},[a.createElementVNode("g",{transform:o.value},[a.createElementVNode("g",Pe,[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(je.value,r=>(a.openBlock(),a.createElementBlock(a.Fragment,{key:r.edgeId},[a.createElementVNode("path",{d:r.path,fill:"none",stroke:"transparent","stroke-width":"15","vector-effect":"non-scaling-stroke",class:"edge-hit",onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,40,Ne),a.createElementVNode("path",{d:r.path,stroke:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,"stroke-width":"1",fill:"none","stroke-linecap":"round","stroke-linejoin":"round","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:a.normalizeClass(["edge-path",{"edge-flowing":r.flowing}]),"stroke-dasharray":r.lineDasharray??(r.flowing?"7 6":void 0),onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,42,Ee),a.createElementVNode("polygon",{points:r.arrow,fill:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,stroke:s.selectedEdgeId===r.edgeId?"#2563eb":r.lineColor,"vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:"edge-arrow",onMousedown:a.withModifiers(w=>v(r.edge,w),["stop"])},null,40,ze),r.label&&r.labelPoint?(a.openBlock(),a.createElementBlock("text",{key:0,x:r.labelPoint.x,y:r.labelPoint.y,class:"edge-label",fill:r.labelColor,"text-anchor":"middle","dominant-baseline":"central"},a.toDisplayString(r.label),9,Be)):a.createCommentVNode("",!0)],64))),128)),K.value.length>1?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[a.createElementVNode("path",{d:Z.value.path,stroke:"#94a3b8","stroke-width":"2",fill:"none","stroke-linecap":"round","stroke-linejoin":"round","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision"},null,8,_e),a.createElementVNode("polygon",{points:Z.value.arrow,fill:"#94a3b8",stroke:"#94a3b8","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision"},null,8,Te)],64)):a.createCommentVNode("",!0)]),a.createElementVNode("g",Le,[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(s.nodes,r=>(a.openBlock(),a.createElementBlock("g",{key:r.id,class:"node-group",transform:`translate(${r.position.x+r.size.width/2} ${r.position.y+r.size.height/2})`},[U(r)==="rect"?(a.openBlock(),a.createElementBlock("rect",{key:0,x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,rx:"4",ry:"4",fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Re)):U(r)==="ellipse"?(a.openBlock(),a.createElementBlock("rect",{key:1,x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,rx:r.size.height/2,ry:r.size.height/2,fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Se)):(a.openBlock(),a.createElementBlock("polygon",{key:2,points:Qe(r),fill:V(r),stroke:"#0f172a",class:a.normalizeClass({selected:s.selectedNodeId===r.id}),onMousedown:a.withModifiers(w=>$(r,w),["stop"])},null,42,Ve)),(a.openBlock(),a.createElementBlock("foreignObject",{x:-r.size.width/2,y:-r.size.height/2,width:r.size.width,height:r.size.height,class:"node-title-foreign"},[a.createElementVNode("div",{xmlns:"http://www.w3.org/1999/xhtml",class:"node-title-dom",style:a.normalizeStyle({color:j(r)})},[G(r)?(a.openBlock(),a.createElementBlock("svg",$e,[a.createElementVNode("use",{href:G(r),fill:j(r)},null,8,ve)])):S(r)?(a.openBlock(),a.createElementBlock("span",He,a.toDisplayString(S(r)),1)):a.createCommentVNode("",!0),a.createElementVNode("span",Fe,a.toDisplayString(Ue(r)),1)],4)],8,Xe)),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(qe(r),w=>a.withDirectives((a.openBlock(),a.createElementBlock("circle",{key:w.port.id,cx:w.dx,cy:w.dy,r:"5",fill:"#ffffff",stroke:"#1d4ed8",class:"port-dot",onMousedown:a.withModifiers(L=>et(r,w.port,L),["stop"])},null,40,Oe)),[[a.vShow,s.selectedNodeId===r.id]])),128))],8,Ye))),128))])],8,Ce)],40,Ie))],512))}}),[["__scopeId","data-v-209f0bd3"]]);N.CanvasView=Ae,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.js
CHANGED
|
@@ -804,7 +804,7 @@ const f = {
|
|
|
804
804
|
for (const [u, e] of h)
|
|
805
805
|
c[u] = e;
|
|
806
806
|
return c;
|
|
807
|
-
}, bt = /* @__PURE__ */ vt(wt, [["__scopeId", "data-v-
|
|
807
|
+
}, bt = /* @__PURE__ */ vt(wt, [["__scopeId", "data-v-209f0bd3"]]);
|
|
808
808
|
export {
|
|
809
809
|
bt as CanvasView
|
|
810
810
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.canvas-view[data-v-
|
|
1
|
+
.canvas-view[data-v-209f0bd3]{position:relative;overflow:hidden;border:1px solid #dee2e6;background:#f8f9fa}.zoom-controls[data-v-209f0bd3]{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:#fffffff2;border:1px solid #cbd5e1;border-radius:6px;padding:4px 6px}.zoom-btn[data-v-209f0bd3]{width:24px;height:24px;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;cursor:pointer;line-height:1}.zoom-text[data-v-209f0bd3]{min-width:44px;text-align:center;font-size:12px;color:#334155}.canvas-svg[data-v-209f0bd3]{width:100%;height:100%}rect.selected[data-v-209f0bd3],polygon.selected[data-v-209f0bd3]{stroke:#2563eb;stroke-width:2}.port-dot[data-v-209f0bd3]{cursor:crosshair}.edge-path[data-v-209f0bd3],.edge-arrow[data-v-209f0bd3]{cursor:pointer}.edge-flowing[data-v-209f0bd3]{animation:edge-flow-209f0bd3 .8s linear infinite}@keyframes edge-flow-209f0bd3{0%{stroke-dashoffset:0}to{stroke-dashoffset:-13}}.edge-label[data-v-209f0bd3]{font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.node-title-foreign[data-v-209f0bd3]{pointer-events:none}.node-title-dom[data-v-209f0bd3]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-icon-dom[data-v-209f0bd3],.node-icon-fallback[data-v-209f0bd3]{flex:0 0 auto}.node-title-text[data-v-209f0bd3]{overflow:hidden;text-overflow:ellipsis}
|