@michael_home/workflow-engine-vue 1.0.2 → 1.0.4

package/dist/CanvasView.vue.d.ts

@@ -0,0 +1,108 @@
+import type { GraphEdge, GraphNode, Point } from '@michael_home/workflow-engine-core';
+type __VLS_Props = {
+    nodes: GraphNode<unknown>[];
+    edges: GraphEdge<unknown>[];
+    selectedNodeId?: string;
+    selectedEdgeId?: string;
+    width?: number;
+    height?: number;
+    panX?: number;
+    panY?: number;
+    zoom?: number;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    alignThreshold?: number;
+    portHitRadius?: number;
+    portDragThreshold?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    panX: number;
+    panY: number;
+    zoom: number;
+    snapToGrid: boolean;
+    gridSize: number;
+    alignThreshold: number;
+    portHitRadius: number;
+    portDragThreshold: number;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selectionChange: (selection: {
+        nodeId?: string;
+        edgeId?: string;
+    }) => void;
+    nodePositionChange: (payload: {
+        nodeId: string;
+        position: Point;
+    }) => void;
+    edgeCreate: (payload: {
+        sourceNodeId: string;
+        sourcePortId: string;
+        targetNodeId: string;
+        targetPortId: string;
+    }) => void;
+    edgeDelete: (payload: {
+        edgeId: string;
+    }) => void;
+    nodeDelete: (payload: {
+        nodeId: string;
+    }) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    panX: number;
+    panY: number;
+    zoom: number;
+    snapToGrid: boolean;
+    gridSize: number;
+    alignThreshold: number;
+    portHitRadius: number;
+    portDragThreshold: number;
+}>>> & Readonly<{
+    onSelectionChange?: ((selection: {
+        nodeId?: string;
+        edgeId?: string;
+    }) => any) | undefined;
+    onNodePositionChange?: ((payload: {
+        nodeId: string;
+        position: Point;
+    }) => any) | undefined;
+    onEdgeCreate?: ((payload: {
+        sourceNodeId: string;
+        sourcePortId: string;
+        targetNodeId: string;
+        targetPortId: string;
+    }) => any) | undefined;
+    onEdgeDelete?: ((payload: {
+        edgeId: string;
+    }) => any) | undefined;
+    onNodeDelete?: ((payload: {
+        nodeId: string;
+    }) => any) | undefined;
+}>, {
+    panX: number;
+    panY: number;
+    zoom: number;
+    snapToGrid: boolean;
+    gridSize: number;
+    alignThreshold: number;
+    portHitRadius: number;
+    portDragThreshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+//# sourceMappingURL=CanvasView.vue.d.ts.map

package/dist/CanvasView.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasView.vue.d.ts","sourceRoot":"","sources":["../src/CanvasView.vue"],"names":[],"mappings":"AAqwBA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAQ,MAAM,oCAAoC,CAAA;AAG3F,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAA;IAC3B,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAC;AAwvBJ,QAAA,MAAM,YAAY;;;;;;;;;;;iBAxuBwB,MAAM;iBAAW,MAAM;;;gBACvB,MAAM;kBAAY,KAAK;;;sBACzB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;;;gBAC9E,MAAM;;;gBACN,MAAM;;;;;;;;;;;;;iBAJE,MAAM;iBAAW,MAAM;;;gBACvB,MAAM;kBAAY,KAAK;;;sBACzB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;;;gBAC9E,MAAM;;;gBACN,MAAM;;;UA5B7B,MAAM;UACN,MAAM;UACN,MAAM;gBACA,OAAO;cACT,MAAM;oBACA,MAAM;mBACP,MAAM;uBACF,MAAM;4EA4vB5B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAChD;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAC7C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/EdgeView.vue.d.ts

@@ -0,0 +1,41 @@
+import type { Point } from '@michael_home/workflow-engine-core';
+type __VLS_Props = {
+    points: Point[];
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+}>>> & Readonly<{}>, {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+//# sourceMappingURL=EdgeView.vue.d.ts.map

package/dist/EdgeView.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeView.vue.d.ts","sourceRoot":"","sources":["../src/EdgeView.vue"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAA;AAG/D,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC;AAwDJ,QAAA,MAAM,YAAY;;;;;;;;;UAzDP,MAAM;YAFJ,MAAM;iBACD,MAAM;4EA4DtB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAChD;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAC7C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/index.cjs

@@ -1 +1 @@
-(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@michael_home/workflow-engine-core"),require("@michael_home/workflow-engine-svg-renderer")):typeof define=="function"&&define.amd?define(["exports","vue","@michael_home/workflow-engine-core","@michael_home/workflow-engine-svg-renderer"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.WorkflowVue={},g.Vue,g.WorkflowEngineCore,g.WorkflowEngineSvgRenderer))})(this,function(g,t,h,M){"use strict";const A={class:"zoom-controls"},H={class:"zoom-text"},j=["viewBox"],q=["transform"],G={class:"edge-layer"},U=["d","onMousedown"],K=["d","stroke","stroke-dasharray","onMousedown"],Z=["points","fill","stroke","onMousedown"],J=["x","y","fill"],Q=["d"],ee=["points"],te={class:"node-layer"},oe=["transform"],ne=["x","y","width","height","fill","onMousedown"],se=["x","y","width","height","rx","ry","fill","onMousedown"],re=["points","fill","onMousedown"],ie=["x","y","width","height"],ce={key:0,width:"14",height:"14",class:"node-icon-dom","aria-hidden":"true"},le=["href","fill"],de={key:1,class:"node-icon-fallback"},ae={class:"node-title-text"},he=["cx","cy","onMousedown"],fe=((a,I)=>{const r=a.__vccOpts||a;for(const[f,d]of I)r[f]=d;return r})(t.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(a,{emit:I}){const r=a,f=I,d=t.ref(r.zoom),x=o=>Math.min(2,Math.max(.4,Number(o.toFixed(2)))),ge=()=>{d.value=x(d.value+.1)},ue=()=>{d.value=x(d.value-.1)};t.watch(()=>r.zoom,o=>{d.value=x(o)});const pe=t.computed(()=>`translate(${r.panX} ${r.panY}) scale(${d.value})`),k=t.ref(),b=t.ref(),y=t.reactive({width:700,height:240});let m;const S=t.computed(()=>r.width??y.width),D=t.computed(()=>r.height??y.height),c=t.reactive({active:!1,nodeId:"",offsetX:0,offsetY:0,latestClientX:0,latestClientY:0}),s=t.reactive({active:!1,sourceNodeId:"",sourcePortId:"",pendingClick:!1,pressedClientX:0,pressedClientY:0,currentX:0,currentY:0}),u=t.reactive({rafId:0,scheduled:!1}),me=o=>{const n=o.data;return(n==null?void 0:n.text)??""},we=o=>{const n=o.data;return(n==null?void 0:n.lineColor)??"#1c7ed6"},ke=o=>{const n=o.data;return(n==null?void 0:n.fontColor)??"#0f172a"},ye=o=>{const n=o.data;return(n==null?void 0:n.lineStyle)==="dashed"?"6 4":void 0},Ie=o=>{const n=o.data;return(n==null?void 0:n.runtimeStatus)??"idle"},xe=o=>Ie(o)==="pending",Ce=o=>{if(o.length<2)return;const n=[];let e=0;for(let l=1;l<o.length;l+=1){const p=o[l-1],z=o[l],B=Math.hypot(z.x-p.x,z.y-p.y);B!==0&&(n.push({start:p,end:z,length:B}),e+=B)}if(n.length===0||e===0)return;const i=e/2;let w=0;for(const l of n){if(w+l.length>=i){const p=(i-w)/l.length;return{x:l.start.x+(l.end.x-l.start.x)*p,y:l.start.y+(l.end.y-l.start.y)*p}}w+=l.length}const W=n[n.length-1];return{x:W.end.x,y:W.end.y}},Ne=t.computed(()=>r.edges.map(o=>{const n=o.points??[],e=M.renderSvgEdge(n,{pixelSnap:!0});return{edge:o,edgeId:o.id,path:e.path,arrow:e.arrow,label:me(o),lineColor:we(o),lineDasharray:ye(o),labelColor:ke(o),labelPoint:Ce(n),flowing:xe(o)}})),Pe=o=>{const n=o.data;return(n==null?void 0:n.title)??o.id},C=o=>{const n=o.data;return(n==null?void 0:n.icon)??""},X=o=>{const n=C(o);return!n||!n.startsWith("icon-")?"":`#${n}`},N=o=>{const n=o.data;return(n==null?void 0:n.runtimeStatus)==="completed"?n.completedFillColor??"#bbf7d0":(n==null?void 0:n.runtimeStatus)==="active"?"#dcfce7":(n==null?void 0:n.nodeColor)??"#ffffff"},Y=o=>{const n=o.data;return(n==null?void 0:n.fontColor)??"#0f172a"},v=o=>{const n=o.data;return(n==null?void 0:n.nodeShape)??"rect"},_e=o=>{const n=o.size.width/2,e=o.size.height/2;return`0,${-e} ${n},0 0,${e} ${-n},0`},Ee=o=>{const n=new Map(o.ports.map(e=>[e.direction,e]));return[{direction:h.PortDirection.Top,dx:0,dy:-o.size.height/2},{direction:h.PortDirection.Right,dx:o.size.width/2,dy:0},{direction:h.PortDirection.Bottom,dx:0,dy:o.size.height/2},{direction:h.PortDirection.Left,dx:-o.size.width/2,dy:0}].map(e=>({...e,port:n.get(e.direction)})).filter(e=>!!e.port)},V=o=>{const n=b.value;if(!n)return{x:o.clientX,y:o.clientY};const e=n.getBoundingClientRect();return{x:o.clientX-e.left,y:o.clientY-e.top}},P=o=>({x:(o.x-r.panX)/d.value,y:(o.y-r.panY)/d.value}),ze=()=>{if(u.scheduled=!1,!c.active)return;const o=r.nodes.find(e=>e.id===c.nodeId);if(!o)return;const n=h.resolveNodeDragPosition({node:o,nodes:r.nodes,alignThreshold:r.alignThreshold,clientX:c.latestClientX,clientY:c.latestClientY,offsetX:c.offsetX,offsetY:c.offsetY,canvasWidth:S.value/d.value,canvasHeight:D.value/d.value,gridSize:r.gridSize,snapToGrid:r.snapToGrid});f("nodePositionChange",{nodeId:c.nodeId,position:n})},Be=()=>{s.active=!1,s.pendingClick=!1,s.sourceNodeId="",s.sourcePortId=""},L=()=>{c.active=!1,c.nodeId="",u.rafId&&(window.cancelAnimationFrame(u.rafId),u.rafId=0),u.scheduled=!1},Me=()=>{if(!s.active&&!s.pendingClick)return;const o=h.resolveLinkSource({sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId,nodes:r.nodes});if(o){const n=h.resolveLinkCompletion({sourceNodeId:o.sourceNode.id,sourcePortId:o.sourcePort.id,sourceNode:o.sourceNode,sourcePort:o.sourcePort,nodes:r.nodes,mode:s.pendingClick?"click":"drag",currentPoint:{x:s.currentX,y:s.currentY},hitRadius:r.portHitRadius});n.targetNodeId&&n.targetPortId&&f("edgeCreate",{sourceNodeId:n.sourceNodeId,sourcePortId:n.sourcePortId,targetNodeId:n.targetNodeId,targetPortId:n.targetPortId})}Be()},R=t.computed(()=>{if(!s.active)return[];const o=h.resolveLinkSource({sourceNodeId:s.sourceNodeId,sourcePortId:s.sourcePortId,nodes:r.nodes});return o?h.buildPreviewRoute({sourceNode:o.sourceNode,sourcePort:o.sourcePort,nodes:r.nodes,currentPoint:{x:s.currentX,y:s.currentY},hitRadius:r.portHitRadius}).points:[]}),T=t.computed(()=>M.renderSvgEdge(R.value,{pixelSnap:!0})),_=(o,n)=>{if(s.active)return;n.preventDefault(),f("selectionChange",{nodeId:o.id}),c.active=!0,c.nodeId=o.id;const e=P(V(n));c.offsetX=e.x-o.position.x,c.offsetY=e.y-o.position.y,c.latestClientX=e.x,c.latestClientY=e.y},be=(o,n,e)=>{e.preventDefault(),f("selectionChange",{nodeId:o.id});const i=h.getPortPoint(o,n);s.active=!1,s.pendingClick=!0,s.pressedClientX=e.clientX,s.pressedClientY=e.clientY,s.sourceNodeId=o.id,s.sourcePortId=n.id,s.currentX=i.x,s.currentY=i.y},E=(o,n)=>{n.preventDefault(),n.stopPropagation(),f("selectionChange",{edgeId:o.id})},Se=()=>{s.active||c.active||f("selectionChange",{})},F=o=>{const n=V(o);if(s.pendingClick&&!s.active&&h.shouldActivateLinkDrag({pressedClientX:s.pressedClientX,pressedClientY:s.pressedClientY,currentClientX:o.clientX,currentClientY:o.clientY,threshold:r.portDragThreshold})&&(s.active=!0,s.pendingClick=!1),s.active){const i=P(n);s.currentX=i.x,s.currentY=i.y;return}if(!c.active)return;const e=P(n);c.latestClientX=e.x,c.latestClientY=e.y,!u.scheduled&&(u.scheduled=!0,u.rafId=window.requestAnimationFrame(ze))},$=()=>{L(),Me()},O=o=>{if(o.key!=="Delete"&&o.key!=="Backspace")return;const n=o.target;if(n){const e=n.tagName;if(e==="INPUT"||e==="TEXTAREA"||n.isContentEditable)return}if(r.selectedEdgeId){o.preventDefault(),f("edgeDelete",{edgeId:r.selectedEdgeId});return}r.selectedNodeId&&(o.preventDefault(),f("nodeDelete",{nodeId:r.selectedNodeId}))};return t.onMounted(()=>{const o=()=>{const n=k.value;if(!n)return;const e=n.getBoundingClientRect();e.width>0&&(y.width=e.width),e.height>0&&(y.height=e.height)};o(),m=new ResizeObserver(o),k.value&&m.observe(k.value),window.addEventListener("mousemove",F),window.addEventListener("mouseup",$),window.addEventListener("keydown",O)}),t.onUnmounted(()=>{L(),m==null||m.disconnect(),window.removeEventListener("mousemove",F),window.removeEventListener("mouseup",$),window.removeEventListener("keydown",O)}),(o,n)=>(t.openBlock(),t.createElementBlock("section",{ref_key:"containerRef",ref:k,class:"canvas-view",style:{width:"100%",height:"100%"}},[t.createElementVNode("div",A,[t.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:ue},"-"),t.createElementVNode("span",H,t.toDisplayString(Math.round(d.value*100))+"%",1),t.createElementVNode("button",{type:"button",class:"zoom-btn",onClick:ge},"+")]),(t.openBlock(),t.createElementBlock("svg",{ref_key:"svgRef",ref:b,class:"canvas-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${S.value} ${D.value}`,onMousedown:t.withModifiers(Se,["self"])},[t.createElementVNode("g",{transform:pe.value},[t.createElementVNode("g",G,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(Ne.value,e=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:e.edgeId},[t.createElementVNode("path",{d:e.path,fill:"none",stroke:"transparent","stroke-width":"15","vector-effect":"non-scaling-stroke",class:"edge-hit",onMousedown:t.withModifiers(i=>E(e.edge,i),["stop"])},null,40,U),t.createElementVNode("path",{d:e.path,stroke:a.selectedEdgeId===e.edgeId?"#2563eb":e.lineColor,"stroke-width":"1",fill:"none","stroke-linecap":"round","stroke-linejoin":"round","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:t.normalizeClass(["edge-path",{"edge-flowing":e.flowing}]),"stroke-dasharray":e.lineDasharray??(e.flowing?"7 6":void 0),onMousedown:t.withModifiers(i=>E(e.edge,i),["stop"])},null,42,K),t.createElementVNode("polygon",{points:e.arrow,fill:a.selectedEdgeId===e.edgeId?"#2563eb":e.lineColor,stroke:a.selectedEdgeId===e.edgeId?"#2563eb":e.lineColor,"vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision",class:"edge-arrow",onMousedown:t.withModifiers(i=>E(e.edge,i),["stop"])},null,40,Z),e.label&&e.labelPoint?(t.openBlock(),t.createElementBlock("text",{key:0,x:e.labelPoint.x,y:e.labelPoint.y,class:"edge-label",fill:e.labelColor,"text-anchor":"middle","dominant-baseline":"central"},t.toDisplayString(e.label),9,J)):t.createCommentVNode("",!0)],64))),128)),R.value.length>1?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("path",{d:T.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,Q),t.createElementVNode("polygon",{points:T.value.arrow,fill:"#94a3b8",stroke:"#94a3b8","vector-effect":"non-scaling-stroke","shape-rendering":"geometricPrecision"},null,8,ee)],64)):t.createCommentVNode("",!0)]),t.createElementVNode("g",te,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.nodes,e=>(t.openBlock(),t.createElementBlock("g",{key:e.id,class:"node-group",transform:`translate(${e.position.x+e.size.width/2} ${e.position.y+e.size.height/2})`},[v(e)==="rect"?(t.openBlock(),t.createElementBlock("rect",{key:0,x:-e.size.width/2,y:-e.size.height/2,width:e.size.width,height:e.size.height,rx:"4",ry:"4",fill:N(e),stroke:"#0f172a",class:t.normalizeClass({selected:a.selectedNodeId===e.id}),onMousedown:t.withModifiers(i=>_(e,i),["stop"])},null,42,ne)):v(e)==="ellipse"?(t.openBlock(),t.createElementBlock("rect",{key:1,x:-e.size.width/2,y:-e.size.height/2,width:e.size.width,height:e.size.height,rx:e.size.height/2,ry:e.size.height/2,fill:N(e),stroke:"#0f172a",class:t.normalizeClass({selected:a.selectedNodeId===e.id}),onMousedown:t.withModifiers(i=>_(e,i),["stop"])},null,42,se)):(t.openBlock(),t.createElementBlock("polygon",{key:2,points:_e(e),fill:N(e),stroke:"#0f172a",class:t.normalizeClass({selected:a.selectedNodeId===e.id}),onMousedown:t.withModifiers(i=>_(e,i),["stop"])},null,42,re)),(t.openBlock(),t.createElementBlock("foreignObject",{x:-e.size.width/2,y:-e.size.height/2,width:e.size.width,height:e.size.height,class:"node-title-foreign"},[t.createElementVNode("div",{xmlns:"http://www.w3.org/1999/xhtml",class:"node-title-dom",style:t.normalizeStyle({color:Y(e)})},[X(e)?(t.openBlock(),t.createElementBlock("svg",ce,[t.createElementVNode("use",{href:X(e),fill:Y(e)},null,8,le)])):C(e)?(t.openBlock(),t.createElementBlock("span",de,t.toDisplayString(C(e)),1)):t.createCommentVNode("",!0),t.createElementVNode("span",ae,t.toDisplayString(Pe(e)),1)],4)],8,ie)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(Ee(e),i=>t.withDirectives((t.openBlock(),t.createElementBlock("circle",{key:i.port.id,cx:i.dx,cy:i.dy,r:"5",fill:"#ffffff",stroke:"#1d4ed8",class:"port-dot",onMousedown:t.withModifiers(w=>be(e,i.port,w),["stop"])},null,40,he)),[[t.vShow,a.selectedNodeId===e.id]])),128))],8,oe))),128))])],8,q)],40,j))],512))}}),[["__scopeId","data-v-72a1e4d3"]]);g.CanvasView=fe,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+(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.d.ts

@@ -1,3 +1,2 @@
-import { DefineComponent } from 'vue'
-
-export declare const CanvasView: DefineComponent<{}, {}, any>
+export { default as CanvasView } from './CanvasView.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}