vue-diagram-editor-improved/dist/vue-diagram-editor.cjs.min.js

Highly customizable diagram editor support for Vue.js

/*!
 * vue-diagram-editor v1.2.8 | (c) 2021-2025 Maksim Kutishchev
 * Released under the Apache 2 License.
 * https://vue-diagram-editor.js.org
 */
module.exports=function(e){var t={};function r(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(i,o,function(t){return e[t]}.bind(null,o));return i},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/",r(r.s=7)}([function(e,t){e.exports=require("vue")},function(e,t){e.exports=require("lodash/isEqual")},function(e,t){e.exports=require("ulid")},function(e,t){e.exports=require("lodash/cloneDeep")},function(e,t){e.exports=require("svg-pan-zoom")},function(e,t){e.exports=require("lodash/throttle")},function(e,t,r){},function(e,t,r){"use strict";r.r(t),r.d(t,"Diagram",(function(){return W})),r.d(t,"Node",(function(){return p})),r.d(t,"Link",(function(){return z})),r.d(t,"Size",(function(){return u})),r.d(t,"Coordinates",(function(){return a}));var i=function(){var e=this,t=e._self._c;return t("div",{staticClass:"diagram-editor__wrapper"},[t("DiagramRoot",{ref:"diagram",attrs:{width:e.width,height:e.height,"grid-snap":e.gridSnap,"zoom-enabled":e.zoomEnabled,"node-color":e.nodeColor,"node-pulsable":e.nodePulsable,"node-deletable":e.nodeDeletable,"node-pulse-color":e.nodePulseColor,"before-delete-node":e.beforeDeleteNode,"before-delete-link":e.beforeDeleteLink,"port-disabled":e.portDisabled,"port-available":e.portAvailable,pan:e.pan,"prevent-mouse-events-default":e.preventMouseEventsDefault},on:{"select-node":function(t){return e.$emit("select-node",t)},"deleted-node":function(t){return e.$emit("deleted-node",t)},"deleted-link":function(t){return e.$emit("deleted-link",t)},"updated-node":function(t){return e.$emit("updated-node",t)},"click-port":function(t){return e.$emit("click-port",t)},"created-link":function(t){return e.$emit("created-link",t)}},scopedSlots:e._u([{key:"default",fn:function(t){return[e._t("node",null,null,t)]}}],null,!0)})],1)};i._withStripped=!0;var o=function(){var e=this,t=e._self._c;return t("svg",{ref:"diagramRoot",staticClass:"diagram-editor__svg-content",attrs:{id:"diagram-root-"+e.uniqId,version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 "+e.width/1.2+" "+e.height/1.2,width:e.width,height:e.height,preserveAspectRatio:"xMinYMin meet"}},[t("g",{ref:"viewPort",staticClass:"svg-pan-zoom_viewport",attrs:{x:"50",y:"50"}},[t("defs",[t("pattern",{attrs:{id:"diagram-small-grid-"+e.uniqId,width:"16",height:"16",patternUnits:"userSpaceOnUse"}},[t("path",{attrs:{d:"M 16 0 L 0 0 0 16",fill:"none",stroke:"#ccc","stroke-width":"0.5"}})]),t("pattern",{attrs:{id:"diagram-grid-"+e.uniqId,width:"80",height:"80",patternUnits:"userSpaceOnUse"}},[t("rect",{attrs:{width:"80",height:"80",fill:`url(#diagram-small-grid-${e.uniqId})`}}),t("path",{attrs:{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"#ccc","stroke-width":"1"}})])]),t("rect",{ref:"grid",attrs:{x:"-5000px",y:"-5000px",width:"10000px",height:"10000px",fill:`url(#diagram-grid-${e.uniqId})`},on:{mousedown:e.clearSelection}}),e._l(e.links,(function(r){return t("DiagramLink",{key:r.id,attrs:{id:r.id,link:r,"node-start":e.nodes[r.start_id],"node-end":e.nodes[r.end_id],selected:e.selectedLink===r.id},on:{mousedown:function(t){return e.selectLink(r.id)},"type-changed":e.handleLinkTypeChange}})})),e._l(e.nodes,(function(r){return t("DiagramNode",{key:r.id,attrs:{node:r,color:e.nodeColor,"pulse-color":e.nodePulseColor,pulsable:e.nodePulsable,deletable:e.nodeDeletable,dragging:e.draggedNode===r.id,selected:e.selectedNode===r.id,"port-disabled":e.portDisabled,"port-available":e.portAvailable,"active-port":e.activePort,"hovered-port":e.hoveredPort},on:{delete:e.deleteNode,"drag-start":e.onNodeDragStart,"resize-start":e.onNodeResizeStart,"hovered-port":e.setHoveredPort,"active-port":e.setActivePort},scopedSlots:e._u([{key:"default",fn:function(t){return[e._t("default",null,{node:r},t)]}}],null,!0)})})),e.newLink?t("line",{staticStyle:{stroke:"rgb(255,0,0)","stroke-width":"2"},attrs:{x1:e.newLink.x1,y1:e.newLink.y1,x2:e.newLink.x2,y2:e.newLink.y2,"pointer-events":"none"}}):e._e()],2)])};o._withStripped=!0;var n=function(){var e=this,t=e._self._c;return t("g",{attrs:{id:e.node.id}},[e.pulsable(e.node)?t("rect",{staticClass:"diagram--editor__pulse",attrs:{fill:e.pulseColor(e.node),stroke:e.pulseColor(e.node),x:e.node.x,y:e.node.y,rx:"3",ry:"3",width:e.node.width,height:e.node.height}}):e._e(),t("rect",{attrs:{fill:e.node.color?e.node.color:e.color(e.node),stroke:"#000000","stroke-width":e.selected?1:0,x:e.node.x,y:e.node.y,rx:"3",ry:"3",width:e.node.width,height:e.node.height}}),t("DiagramNodeTitle",{attrs:{x:e.node.x+2,y:e.node.y+2,width:e.node.size.width-4,title:e.node.title,category:e.node.category,state:e.node.state,performer:e.node.performer,color:e.node.color,dragging:e.dragging,deletable:e.node.deletable},on:{delete:e.deleteNode},nativeOn:{mousedown:function(t){return t.stopPropagation(),e.onDragStart.apply(null,arguments)}}}),t("rect",{staticClass:"node-light-background",attrs:{fill:"#ffffff",x:e.node.x+2,y:e.node.y+20,rx:"3",ry:"3",width:e.node.width-4,height:e.node.height-22}}),t("foreignObject",{attrs:{x:e.node.x+2,y:e.node.y+20,width:e.slotWidth,height:e.slotHeight}},[t("body",{staticClass:"diagram-editor__node-body",attrs:{xmlns:"http://www.w3.org/1999/xhtml"}},[e._t("default",null,{width:e.slotWidth,height:e.slotHeight})],2)]),t("svg",{attrs:{x:e.node.x-4,y:e.node.y+e.node.height-e.portsHeight-2,width:e.node.width+8,height:e.portsHeight}},[e._l(e.portsIn,(function([r,i],o){return t("DiagramPort",{key:e.node.id+"_in_"+r,attrs:{id:e.node.id+"_in_"+r,title:e.getPortTitle(i),width:o+1>e.portsOut.length?e.node.width:e.node.width/2,x:0,y:18*o,type:i.type,isExecution:0===o,value:i.value,disabled:e.portsInDisabled[r],available:e.portsInAvailable[r],hovered:e.isHoveredPort("in",r),align:"start"},on:{mousedown:function(t){return e.mouseDownPort("in",r,t)},mouseenter:function(t){return e.mouseEnterPort("in",r,t)},mouseleave:function(t){return e.mouseLeavePort("in",r,t)}}})})),e._l(e.portsOut,(function([r,i],o){return t("DiagramPort",{key:e.node.id+"_out_"+r,attrs:{id:e.node.id+"_out_"+r,title:e.getPortTitle(i),width:e.node.width+8,x:0,y:18*o,disabled:e.portsOutDisabled[r],available:e.portsOutAvailable[r],hovered:e.isHoveredPort("out",r),type:i.type,isExecution:0===o,value:i.value,align:"end"},on:{mousedown:function(t){return e.mouseDownPort("out",r,t)},mouseenter:function(t){return e.mouseEnterPort("out",r,t)},mouseleave:function(t){return e.mouseLeavePort("out",r,t)}}})}))],2),t("svg",{attrs:{width:"10",height:"10",x:e.node.x+e.node.width-10,y:e.node.y+e.node.height-10},on:{mousedown:e.onResizeStart}},[t("path",{staticStyle:{cursor:"nwse-resize"},attrs:{d:"M 0,10 10,0 v 10 z",fill:"#000"}})])],1)};n._withStripped=!0;var s=r(2);function d(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class a{constructor(e){var{x:t=10,y:r=10}=e;d(this,"x",null),d(this,"y",null),this.x=Number(t),this.y=Number(r)}}function l(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class u{constructor(e){var{width:t=150,height:r=150}=e;l(this,"width",null),l(this,"height",null),this.width=Number(t),this.height=Number(r)}}function h(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class p{constructor(e){h(this,"id",null),h(this,"title",null),h(this,"category",null),h(this,"state",null),h(this,"performer",null),h(this,"deletable",null),h(this,"color",null),h(this,"size",null),h(this,"coordinates",null),h(this,"data",{}),h(this,"portsIn",{}),h(this,"portsOut",{}),this.id=p.prepareProp("id",e.id),this.title=e.title,this.category=p.prepareProp("category",e.category),this.state=p.prepareProp("state",e.state),this.performer=p.prepareProp("performer",e.performer),this.deletable=p.prepareProp("deletable",e.deletable),this.coordinates=p.prepareProp("coordinates",e.coordinates),this.color=p.prepareProp("color",e.color),this.size=p.prepareProp("size",e.size),this.data=p.prepareProp("data",e.data),this.portsIn=p.prepareProp("portsIn",e.portsIn),this.portsOut=p.prepareProp("portsOut",e.portsOut)}static prepareProp(e,t){switch(e){case"id":return t||Object(s.ulid)();case"coordinates":return new a(t||{});case"size":return new u(t||{});case"portsIn":case"portsOut":return Object.entries(t||{}).reduce((e,t)=>{var[r,i]=t;return e[r]={type:i.type||"text",value:i.value||""},e},{});case"data":return t||{};case"category":return t||"default";case"color":return t||"#4249FF";case"state":return t||null;case"performer":return t||"CPU";case"deletable":return!1!==t;default:return t}}get portsHeight(){return Math.max(Object.keys(this.portsIn).length,Object.keys(this.portsOut).length)*p.PORT_HEIGHT}get width(){return this.size.width}get height(){return this.size.height}get x(){return this.coordinates.x}get y(){return this.coordinates.y}get x1(){return this.coordinates.x+this.size.width}get y1(){return this.coordinates.y+this.size.height}getPortCoordinates(e,t){if(!["in","out"].includes(e))throw new Error("Undefined port type "+e);var r=Object.keys("in"===e?this.portsIn:this.portsOut).findIndex(e=>e===t);if(-1===r)throw new Error('"'.concat(e,'" port with name "').concat(t,'" is undefined!'));return{x:this.x+("out"===e?this.width:1),y:this.y+this.height-(this.portsHeight-2)+r*p.PORT_HEIGHT+1}}static intersect(e,t){return!(e.x>t.x1||t.x>e.x1||e.y>t.y1||t.y>e.y1)}}h(p,"PORT_HEIGHT",18);var c=function(e,t){return e("svg",{attrs:{x:t.props.x,y:t.props.y,width:t.props.width,height:"16"}},[t.props.isExecution?e("rect",t._g({attrs:{fill:"rgb(66, 73, 255)",x:"start"===t.props.align?0:t.props.width-10,y:"0",rx:"0",ry:"0",cursor:t.props.disabled?"default":"pointer",width:"10",height:"10"}},t.listeners)):e("rect",t._g({attrs:{fill:t.$options.fill(t.props.available,t.props.hovered),x:"start"===t.props.align?0:t.props.width-10,y:"0",rx:"5",ry:"5",cursor:t.props.disabled?"default":"pointer",width:"10",height:"10"}},t.listeners)),e("text",{attrs:{x:"start"===t.props.align?12:t.props.width-12,y:"9","font-size":"8pt","text-anchor":t.props.align}},[t._v("\n    "+t._s(t.props.title)+t._s("<"+t.props.type+">")+"\n  ")])])};function f(e,t,r,i,o,n,s,d){var a,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=r,l._compiled=!0),i&&(l.functional=!0),n&&(l._scopeId="data-v-"+n),s?(a=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=a):o&&(a=d?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),a)if(l.functional){l._injectStyles=a;var u=l.render;l.render=function(e,t){return a.call(t),u(e,t)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,a):[a]}return{exports:e,options:l}}c._withStripped=!0;var g=f({fill:(e,t)=>e?t?"#04ff00":"#f00":t?"#888":"#444"},c,[],!0,null,null,null);g.options.__file="src/components/DiagramPort.vue";var y=g.exports,v=function(){var e=this,t=e._self._c;return t("svg",{style:{cursor:e.dragging?"grabbing":"grab"},attrs:{x:e.x,y:e.y,width:e.width,height:"16"},on:{mouseenter:function(t){e.hover=!0},mouseleave:function(t){e.hover=!1}}},[t("rect",{attrs:{fill:"#000","fill-opacity":e.titleFillOpacity,x:"0",y:"0",rx:"3",ry:"3",width:e.width,height:"16"}}),t("svg",{attrs:{x:"0",y:"0",width:e.deletable?e.width-17:e.width,height:"16"}},[t("title",[e._v(e._s(e.title)+" "+e._s(e.category))]),e.loading?t("g",{attrs:{transform:"translate(8, 8)"}},[t("circle",{attrs:{r:"4",cx:"0",cy:"0",fill:"none",stroke:"#fff","stroke-width":"2","stroke-dasharray":"10","stroke-dashoffset":"2"}},[t("animateTransform",{attrs:{attributeName:"transform",type:"rotate",from:"0 0 0",to:"360 0 0",dur:"2s",repeatCount:"indefinite"}})],1)]):e._e(),t("text",{attrs:{x:e.loading?20:2,y:"13","font-size":"15","font-weight":"normal",fill:"#fff"}},[e._v("\n      "+e._s(e.title+" <"+e.category+">")+"\n    ")])]),e.deletable?t("svg",{staticClass:"diagram-editor__delete",attrs:{x:e.width-15,y:"1",width:"14",height:"14"},on:{click:function(t){return e.$emit("delete")}}},[t("rect",{attrs:{x:"0",y:"0",width:"14",height:"14",rx:"2",ry:"2"}}),t("line",{attrs:{x1:1,y1:1,x2:13,y2:13}}),t("line",{attrs:{x1:13,y1:1,x2:1,y2:13}})]):e._e()])};v._withStripped=!0;var m=f({name:"DiagramNodeTitle",props:{x:{type:Number,required:!0},y:{type:Number,required:!0},width:{type:Number,required:!0},title:{type:String,required:!0},category:{type:String,default:"default"},deletable:{type:Boolean,default:!0},color:{type:String,default:"#4249FF"},dragging:{type:Boolean,default:!1},state:{type:String,default:"default"}},data(){return{hover:!1,loading:"running"===(null==this?void 0:this.state)}},watch:{state(e){this.loading="running"===e}},computed:{titleFillOpacity(){return this.hover?.7:.5}}},v,[],!1,null,null,null);m.options.__file="src/components/DiagramNodeTitle.vue";var b=m.exports,w=r(1),P=r.n(w);function x(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){_(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function _(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var O=f({name:"DiagramNode",components:{DiagramNodeTitle:b,DiagramPort:y},props:{node:{type:p,required:!0},color:{type:Function,required:!0},pulseColor:{type:Function,required:!0},pulsable:{type:Function,required:!0},portDisabled:{type:Function,required:!0},portAvailable:{type:Function,required:!0},deletable:{type:Function,required:!0},activePort:{type:Object,default:null},hoveredPort:{type:Object,default:null},selected:{type:Boolean,default:!1},dragging:{type:Boolean,default:!1}},data:()=>({nodeStrokeWidth:0,titleFillOpacity:.25}),computed:{portsIn(){return Object.entries(this.node.portsIn)},portsOut(){return Object.entries(this.node.portsOut)},portsInDisabled(){return Object.keys(this.node.portsIn).reduce((e,t)=>k(k({},e),{},{[t]:this.portDisabled({id:this.node.id,type:"in",port:t})}),{})},portsOutDisabled(){return Object.keys(this.node.portsOut).reduce((e,t)=>k(k({},e),{},{[t]:this.portDisabled({id:this.node.id,type:"out",port:t})}),{})},portsInAvailable(){return Object.keys(this.node.portsIn).reduce((e,t)=>k(k({},e),{},{[t]:this.activePort&&this.isAvailablePort("in",t)}),{})},portsOutAvailable(){return Object.keys(this.node.portsOut).reduce((e,t)=>k(k({},e),{},{[t]:this.activePort&&this.isAvailablePort("out",t)}),{})},portsHeight(){return this.node.portsHeight},slotWidth(){return this.node.size.width-4},slotHeight(){return this.node.size.height-22},nodeDeletable(){return this.deletable(this.node)}},methods:{isAvailablePort(e,t){var r={id:this.node.id,type:e,port:t},i=k({},this.activePort),o=this.hoveredPort?k({},this.hoveredPort):null;return!(!!o&&P()(i,o))&&!P()(i,r)&&this.portAvailable(k(k({},r),{},{activePort:k({},this.activePort)}))},deleteNode(){this.$emit("delete",this.node.id)},getPortTitle:e=>e.value.toString(),onDragStart(e){this.$emit("drag-start",{node:this.node,eX:e.x,eY:e.y})},onResizeStart(e){this.$emit("resize-start",{node:this.node,eX:e.x,eY:e.y})},isHoveredPort(e,t){return this.hoveredPort&&this.node.id===this.hoveredPort.id&&t===this.hoveredPort.port&&e===this.hoveredPort.type},mouseDownPort(e,t){("in"===e?this.portsInDisabled[t]:this.portsOutDisabled[t])||this.$emit("active-port",{id:this.node.id,port:t,type:e})},mouseEnterPort(e,t){this.$emit("hovered-port",{id:this.node.id,port:t,type:e})},mouseLeavePort(){this.$emit("hovered-port",null)}}},n,[],!1,null,null,null).exports,D=function(){var e=this,t=e._self._c;return t("g",{on:{mouseenter:function(t){e.hovered=!0},mouseleave:function(t){e.hovered=!1},mousedown:function(t){return e.$emit("mousedown",t)}}},[t("path",{style:e.largeStrokeStyle,attrs:{d:e.curve,"stroke-width":"8",fill:"none"}}),t("path",{style:e.strokeStyle,attrs:{d:e.curve,"stroke-width":"2",fill:"none"}})])};function N(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}D._withStripped=!0;class z{constructor(e){if(N(this,"id",null),N(this,"start_id",null),N(this,"start_port",null),N(this,"end_id",null),N(this,"end_port",null),N(this,"type",null),this.id=e.id||Object(s.ulid)(),!e.start_id)throw new Error("start_id is empty!");if(this.start_id=e.start_id,this.start_port=e.start_port||"default",!e.end_id)throw new Error("end_id is empty!");this.end_id=e.end_id,this.end_port=e.end_port||"default",this.type=e.type||"default"}}var S=f({name:"DiagramLink",props:{link:{type:z,required:!0},nodeStart:{type:p,required:!0},nodeEnd:{type:p,required:!0},selected:{type:Boolean,default:!1}},data:()=>({hovered:!1}),computed:{startCoordinates(){return this.nodeStart.getPortCoordinates("out",this.link.start_port)},endCoordinates(){return this.nodeEnd.getPortCoordinates("in",this.link.end_port)},x1(){return this.startCoordinates.x-2},y1(){return this.startCoordinates.y},x2(){return this.endCoordinates.x+1},y2(){return this.endCoordinates.y},isExecutionFlow(){var e=this.getPortIndex("out",this.link.start_port),t=this.getPortIndex("in",this.link.end_port);return 0===e&&0===t},curve(){var e=Math.trunc(this.x1),t=Math.trunc(this.y1),r=Math.trunc(this.x2),i=Math.trunc(this.y2),o=Math.trunc(4*Math.sqrt(Math.abs(e-r)))+10;return"M".concat(e,",").concat(t," C").concat(e+o,",").concat(t," ").concat(r-o,",").concat(i," ").concat(r,",").concat(i)},largeStrokeStyle(){return this.selected?this.hovered?"stroke:rgba(0,0,255,0.6);":"stroke:rgba(0,0,255,0.4);":this.hovered?"stroke:rgba(255,0,0,0.5);":"stroke:rgba(255,0,0,0.0);"},strokeStyle(){return this.isExecutionFlow?"stroke:rgb(0,80,255);":"stroke:rgb(0,0,0);"}},watch:{isExecutionFlow:{immediate:!0,handler(e){var t=e?"execution":"default";this.link.type!==t&&this.isExecutionFlow&&(this.link.type=t,this.$emit("type-changed",{linkId:this.link.id,type:t}))}}},methods:{getPortIndex(e,t){for(var r="out"===e?this.nodeStart:this.nodeEnd,i="out"===e?r.portsOut:r.portsIn,o=Object.entries(i),n=0;n<o.length;n++){var[s,d]=o[n];if(s===t)return n}return-1}}},D,[],!1,null,null,null).exports,C=r(0),j=r.n(C),E=(e,t)=>t*Math.round(e/t),M=r(3),$=r.n(M);function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function q(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function I(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var F=r(4),T=r.n(F),Z=f({name:"DiagramRoot",components:{DiagramNode:O,DiagramLink:S},mixins:[{data:()=>({nodes:{},links:{},draggedNode:null,resizedNode:null,selectedNode:null,selectedLink:null,initialCursorOffset:{x:0,y:0},activePort:null,hoveredPort:null,nodeCoordinatesBeforeDrag:{x:0,y:0},nodeSizeBeforeResize:{width:0,height:0},currentCursorPos:null}),computed:{newLink(){if(!this.activePort||null===this.currentCursorPos)return null;var{id:e,type:t,port:r}=this.activePort,i=this.nodes[e].getPortCoordinates(t,r);return{x1:i.x,y1:i.y,x2:this.currentCursorPos.x,y2:this.currentCursorPos.y}}},watch:{selectedNode(e){e&&this.$emit("select-node",e)},draggedNode(e){if(e){var t=this.nodes[e];this.nodeCoordinatesBeforeDrag=q({},t.coordinates)}this.toggleMoveEventListener(null!==e)},resizedNode(e){if(e){var t=this.nodes[e];this.nodeSizeBeforeResize=q({},t.size)}this.toggleMoveEventListener(null!==e)},activePort(e){this.toggleMoveEventListener(null!==e)}},methods:{setModel(e){this.nodes=Object.values(e.nodes||[]).reduce((e,t)=>{var r=new p(t);return q(q({},e),{},{[r.id]:r})},{}),this.links=Object.values(e.links||[]).reduce((e,t)=>{var r=new z(t);return q(q({},e),{},{[r.id]:r})},{})},beforePan(){return this.pan&&!(this.draggedNode||this.resizedNode||this.activePort)},addNode(e){var t=new p(e);j.a.set(this.nodes,t.id,t)},addLink(e){var t=new z(e);j.a.set(this.links,t.id,t)},deleteNode(e){var t=this.nodes[e];if(!1!==this.beforeDeleteNode(t)){for(var r in j.a.delete(this.nodes,e),this.links)if(this.links.hasOwnProperty(r)){var i=this.links[r];i.start_id!==e&&i.end_id!==e||j.a.delete(this.links,r)}this.$emit("deleted-node",e)}},deleteLink(e){!1!==this.beforeDeleteLink(this.links[e])&&(j.a.delete(this.links,e),this.$emit("deleted-link",e))},selectLink(e){this.selectedLink=e},clearSelection(){this.selectedNode=null,this.selectedLink=null},toggleMoveEventListener(e){e?(document.body.addEventListener("mousemove",this.mouseMove),document.body.addEventListener("mouseup",this.mouseUp)):(document.body.removeEventListener("mousemove",this.mouseMove),document.body.removeEventListener("mouseup",this.mouseUp))},mouseMove(e){if(this.draggedNode||this.resizedNode)this.dragMove({gridSnap:this.gridSnap,x:e.x,y:e.y});else if(this.activePort&&"out"===this.activePort.type){var{x:t,y:r}=this.convertXYtoViewPort(e.pageX,e.pageY);this.currentCursorPos={x:t,y:r}}},mouseUp(){if(this.draggedNode||this.resizedNode){var e=this.draggedNode||this.resizedNode,t=e?this.nodes[e]:null,r=!!this.draggedNode,i=this.draggedNode&&!P()(q({},t.coordinates),q({},this.nodeCoordinatesBeforeDrag))||this.resizedNode&&!P()(q({},t.size),q({},this.nodeSizeBeforeResize));this.dragEnd(),i?this.$emit("updated-node",t):r&&(this.selectedNode=e)}else if(this.activePort){var o=q({},this.activePort);if(this.hoveredPort){var n=q({},this.hoveredPort);if(P()(o,n))this.$emit("click-port",o);else if(this.portAvailable(q(q({},n),{},{activePort:o}))){var s=new z({start_id:o.id,start_port:o.port,end_id:n.id,end_port:n.port});j.a.set(this.links,s.id,s),this.$emit("created-link",s)}}this.activePort=null,this.currentCursorPos=null}},serialize(){return{nodes:Object.values(this.nodes).map(e=>$()(e)),links:Object.values(this.links).map(e=>$()(e))}},dragStart(e){var{id:t,offset:r,type:i}=e;"drag"===i?(this.draggedNode=t,this.resizedNode=null):"resize"===i&&(this.draggedNode=null,this.resizedNode=t),this.initialCursorOffset=r},dragMove(e){var{gridSnap:t,x:r,y:i}=e,o=(e,r)=>{var{x:i,y:o}=this.convertXYtoViewPort(e,r);return i=E(i,t)-t/2,o=E(o,t),{x:i-=this.initialCursorOffset.x,y:o-=this.initialCursorOffset.y}};if(this.draggedNode&&this.updateNode({id:this.draggedNode,name:"coordinates",value:new a(o(r,i))}),this.resizedNode){var n=this.nodes[this.resizedNode],s=o(r,i),d=new u({width:Math.abs(s.x-n.coordinates.x),height:Math.abs(s.y-n.coordinates.y)});d.width<30&&(d.width=30),d.height<30&&(d.height=30),this.updateNode({id:this.resizedNode,name:"size",value:d})}},dragEnd(){this.draggedNode=null,this.resizedNode=null},updateNode(e){var{id:t,name:r,value:i}=e;j.a.set(this.nodes[t],r,p.prepareProp(r,i))}}},{data:()=>({spz:null}),mounted(){this.spz=T()(this.$refs.diagramRoot,{viewportSelector:this.$refs.viewPort,center:!1,preventMouseEventsDefault:this.preventMouseEventsDefault,beforePan:this.beforePan,beforeZoom:()=>this.zoomEnabled})},beforeDestroy(){this.spz&&this.spz.destroy()},methods:{enableDblClickZoom(){if(this.spz)return this.spz.enableDblClickZoom()},disableDblClickZoom(){if(this.spz)return this.spz.disableDblClickZoom()},isDblClickZoomEnabled(){if(this.spz)return this.spz.isDblClickZoomEnabled()},enableMouseWheelZoom(){if(this.spz)return this.spz.enableMouseWheelZoom()},disableMouseWheelZoom(){if(this.spz)return this.spz.disableMouseWheelZoom()},isMouseWheelZoomEnabled(){if(this.spz)return this.spz.isMouseWheelZoomEnabled()},resetZoom(){if(this.spz)return this.spz.resetZoom()},updateBBox(){if(this.spz)return this.spz.updateBBox()},fit(){if(this.spz)return this.spz.fit()},contain(){if(this.spz)return this.spz.contain()},center(){if(this.spz)return this.spz.center()}}}],props:{width:{type:Number,default:0},height:{type:Number,required:!0},gridSnap:{type:Number,required:!0},zoomEnabled:{type:Boolean,required:!0},nodeColor:{type:Function,required:!0},nodePulseColor:{type:Function,required:!0},nodePulsable:{type:Function,required:!0},nodeDeletable:{type:Function,required:!0},beforeDeleteNode:{type:Function,required:!0},beforeDeleteLink:{type:Function,required:!0},portDisabled:{type:Function,required:!0},portAvailable:{type:Function,required:!0},pan:{type:Boolean,required:!0},preventMouseEventsDefault:{type:Boolean,default:!0}},computed:{uniqId:()=>Object(s.ulid)()},mounted(){document.addEventListener("keydown",this.keyDownHandler)},beforeDestroy(){document.removeEventListener("keydown",this.keyDownHandler)},methods:{handleLinkTypeChange(e){var{linkId:t,type:r}=e;this.$emit("link-type-changed",{linkId:t,type:r})},keyDownHandler(e){46===e.keyCode&&(this.selectedNode&&!1!==this.nodes[this.selectedNode].deletable&&this.deleteNode(this.selectedNode),this.selectedLink&&this.deleteLink(this.selectedLink)),27===e.keyCode&&this.clearSelection()},convertXYtoViewPort(e,t){var r,i,o,n,s,d=this.$refs.diagramRoot,a=this.$refs.viewPort,l=d.createSVGPoint(),u=(r=d,i=document.documentElement,o=r.getBoundingClientRect(),n=i.scrollLeft,s=i.scrollTop,{x:o.left+n,y:o.top+s});l.x=e-u.x,l.y=t-u.y;var h=a.getCTM().inverse();return l.matrixTransform(h)},onNodeDragStart(e){var{node:t,eX:r,eY:i}=e,{x:o,y:n}=this.convertXYtoViewPort(r,i);this.dragStart({type:"drag",id:t.id,offset:{x:Math.round(o-t.x),y:Math.round(n-t.y)}})},onNodeResizeStart(e){var{node:t,eX:r,eY:i}=e,{x:o,y:n}=this.convertXYtoViewPort(r,i);this.dragStart({type:"resize",id:t.id,offset:{x:-Math.round(t.x+t.width-o),y:-Math.round(t.y+t.height-n)}})},setActivePort(e){this.activePort=e},setHoveredPort(e){this.hoveredPort=e}}},o,[],!1,null,null,null).exports,B=r(5),R=f({name:"Diagram",components:{DiagramRoot:Z},props:{height:{type:Number,default:500},gridSnap:{type:Number,default:1},zoomEnabled:{type:Boolean,default:!0},nodeColor:{type:Function,default:()=>"#66cc00"},nodePulseColor:{type:Function,default:()=>"#f00"},nodePulsable:{type:Function,default:()=>!1},nodeDeletable:{type:Function,default:()=>!0},beforeDeleteNode:{type:Function,default:()=>!0},beforeDeleteLink:{type:Function,default:()=>!0},portDisabled:{type:Function,default:()=>!1},portAvailable:{type:Function,default:()=>!0},pan:{type:Boolean,default:!0},preventMouseEventsDefault:{type:Boolean,default:!0}},data:()=>({width:null}),mounted(){window.addEventListener("resize",this.updateWrapperWidth),this.updateWrapperWidth()},beforeDestroy(){window.removeEventListener("resize",this.updateWrapperWidth)},methods:{updateWrapperWidth:r.n(B)()((function(){var{width:e}=this.$el.getBoundingClientRect();this.width=e}),100),setModel(e){this.$refs.diagram.setModel(e)},serialize(){return this.$refs.diagram.serialize()},addNode(e){this.$refs.diagram.addNode(e)},addLink(e){this.$refs.diagram.addLink(e)},updateNode(e){var{id:t,name:r,value:i}=e;this.$refs.diagram.updateNode({id:t,name:r,value:i})},deleteNode(e){this.$refs.diagram.deleteNode(e)},deleteLink(e){this.$refs.diagram.deleteLink(e)},enableDblClickZoom(){return this.$refs.diagram.enableDblClickZoom()},disableDblClickZoom(){return this.$refs.diagram.disableDblClickZoom()},isDblClickZoomEnabled(){return this.$refs.diagram.isDblClickZoomEnabled()},enableMouseWheelZoom(){return this.$refs.diagram.enableMouseWheelZoom()},disableMouseWheelZoom(){return this.$refs.diagram.disableMouseWheelZoom()},isMouseWheelZoomEnabled(){return this.$refs.diagram.isMouseWheelZoomEnabled()},resetZoom(){return this.$refs.diagram.resetZoom()},updateBBox(){return this.$refs.diagram.updateBBox()},fit(){return this.$refs.diagram.fit()},contain(){return this.$refs.diagram.contain()},center(){return this.$refs.diagram.center()}}},i,[],!1,null,null,null);R.options.__file="src/components/Diagram.vue";var W=R.exports;r(6),t.default=W}]);
//# sourceMappingURL=vue-diagram-editor.cjs.min.js.map