butterfly-vue-test - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.es.js

@@ -1,2 +0,2 @@
-import"butterfly-dag/dist/index.css";import{Node as e,Edge as t,Group as n,Canvas as r}from"butterfly-dag";import o from"vue";import i from"lodash";var a={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t)}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?y(e):t}function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=v(e);if(t){var o=v(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function E(e,t,n){return(E="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=v(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw i}}}}var O=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},C=function(t){h(r,e);var n=b(r);function r(){var e;d(this,r);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return l(y(e=n.call.apply(n,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=O(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return r}(),k=function(e){h(r,t);var n=b(r);function r(){return d(this,r),n.apply(this,arguments)}return u(r,[{key:"drawArrow",value:function(e){return E(v(r.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),r}(),$=function(e){h(r,n);var t=b(r);function r(){return d(this,r),t.apply(this,arguments)}return u(r,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),r}(),S=function(e){return Array.isArray(e)?e:[e]},D=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=S(e),t=S(t);var r,o=[],i=[],a=[],s=_(e);try{for(s.s();!(r=s.n()).done;){var d=r.value;t.map((function(e){return e[n]})).includes(d[n])?a.push(d):o.push(d)}}catch(e){s.e(e)}finally{s.f()}var c,u=_(t);try{for(u.s();!(c=u.n()).done;){var l=c.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){u.e(e)}finally{u.f()}return{created:o,deleted:i,updated:a}};function j(e,t,n,r,o,i,a,s,d,c){"boolean"!=typeof a&&(d=s,s=a,a=!1);const u="function"==typeof n?n.options:n;let l;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(l=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__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=l):t&&(l=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(u.functional){const e=u.render;u.render=function(t,n){return l.call(n),e(t,n)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,l):[l]}return n}const N=j({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(o.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const I=j({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(o.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var P=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(s(e)))},R=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return p(p({},e),{},{Class:C})})),edges:o.map((function(e){return document.createElement("div").id=e.id,p(p({},e),{},{type:"endpoint",Class:k})})),groups:a.map((function(e){return p(p({},e),{},{Class:$})}))}},x=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;e.addNodes(R({nodes:i}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){P(e.render,"node");var r=new(o.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeNodes(R({nodes:a}).nodes)},L=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;e.addEdges(R({edges:i}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;P(e.render,"edge");var r=new(o.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeEdges(R({edges:a}).edges.map((function(e){return e.id})))},A=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;R({groups:i}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){P(e.render,"group");var r=new(o.extend(N))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(i),R({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};const F=j({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:r},canvasConf:{type:Object,default:()=>a},canvasData:{type:Object,required:!0}},data:()=>({canvas:null,nodes:[],groups:[],edges:[]}),methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;A(this.canvas,this.groups,n),x(this.canvas,this.nodes,e),L(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){i.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){i.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){i.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){console.log("link:connect");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){console.log("link:delete");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){console.log("link:reconnect");let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e,t){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},created(){this.nodes=this.canvasData.nodes,this.groups=this.canvasData.groups,this.edges=this.canvasData.edges},mounted(){if(this.initCanvas(),!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");R({nodes:this.nodes,groups:this.groups,edges:this.edges});this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))}},undefined,false,undefined,!1,void 0,void 0,void 0);export default F;
+import"butterfly-dag/dist/index.css";import{Node as e,Edge as t,Group as n,Canvas as r}from"butterfly-dag";import o from"vue";import i from"lodash";var a={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t)}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?y(e):t}function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=h(e);if(t){var o=h(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function E(e,t,n){return(E="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=h(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw i}}}}var O=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},C=function(t){v(r,e);var n=b(r);function r(){var e;d(this,r);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return l(y(e=n.call.apply(n,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=O(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return r}(),$=function(e){v(r,t);var n=b(r);function r(){return d(this,r),n.apply(this,arguments)}return u(r,[{key:"drawArrow",value:function(e){return E(h(r.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),r}(),k=function(e){v(r,n);var t=b(r);function r(){return d(this,r),t.apply(this,arguments)}return u(r,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),r}(),S=function(e){return Array.isArray(e)?e:[e]},D=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=S(e),t=S(t);var r,o=[],i=[],a=[],s=_(e);try{for(s.s();!(r=s.n()).done;){var d=r.value;t.map((function(e){return e[n]})).includes(d[n])?a.push(d):o.push(d)}}catch(e){s.e(e)}finally{s.f()}var c,u=_(t);try{for(u.s();!(c=u.n()).done;){var l=c.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){u.e(e)}finally{u.f()}return{created:o,deleted:i,updated:a}};function j(e,t,n,r,o,i,a,s,d,c){"boolean"!=typeof a&&(d=s,s=a,a=!1);const u="function"==typeof n?n.options:n;let l;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(l=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__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=l):t&&(l=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(u.functional){const e=u.render;u.render=function(t,n){return l.call(n),e(t,n)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,l):[l]}return n}const N=j({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(o.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const I=j({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(o.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var P=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(s(e)))},R=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return p(p({},e),{},{Class:C})})),edges:o.map((function(e){return document.createElement("div").id=e.id,p(p({},e),{},{type:"endpoint",Class:$})})),groups:a.map((function(e){return p(p({},e),{},{Class:k})}))}},x=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;e.addNodes(R({nodes:i}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){P(e.render,"node");var r=new(o.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeNodes(R({nodes:a}).nodes)},L=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;e.addEdges(R({edges:i}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;P(e.render,"edge");var r=new(o.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeEdges(R({edges:a}).edges.map((function(e){return e.id})))},A=function(e,t,n){var r=D(t,n),i=r.created,a=r.deleted;R({groups:i}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){P(e.render,"group");var r=new(o.extend(N))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(i),R({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};const F=j({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:r},canvasConf:{type:Object,default:()=>a},canvasData:{type:Object,required:!0}},data(){return{canvas:null,nodes:this.canvasData.nodes,groups:this.canvasData.groups,edges:this.canvasData.edges}},methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;A(this.canvas,this.groups,n),x(this.canvas,this.nodes,e),L(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){i.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){i.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){i.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},mounted(){this.initCanvas(),this.canvas?(this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))):console.warn("当前canvas为null，初始化存在问题")}},undefined,false,undefined,!1,void 0,void 0,void 0);export default F;
 //# sourceMappingURL=index.es.js.map

index.js

@@ -1,2 +0,2 @@
-"use strict";require("butterfly-dag/dist/index.css");var e=require("butterfly-dag"),t=require("vue"),n=require("lodash");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n),a={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t)}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?y(e):t}function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=v(e);if(t){var o=v(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function E(e,t,n){return(E="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=v(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw i}}}}var O=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},C=function(t){h(r,e.Node);var n=b(r);function r(){var e;d(this,r);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return l(y(e=n.call.apply(n,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=O(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return r}(),k=function(t){h(r,e.Edge);var n=b(r);function r(){return d(this,r),n.apply(this,arguments)}return u(r,[{key:"drawArrow",value:function(e){return E(v(r.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),r}(),$=function(t){h(r,e.Group);var n=b(r);function r(){return d(this,r),n.apply(this,arguments)}return u(r,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),r}(),S=function(e){return Array.isArray(e)?e:[e]},j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=S(e),t=S(t);var r,o=[],i=[],a=[],s=_(e);try{for(s.s();!(r=s.n()).done;){var d=r.value;t.map((function(e){return e[n]})).includes(d[n])?a.push(d):o.push(d)}}catch(e){s.e(e)}finally{s.f()}var c,u=_(t);try{for(u.s();!(c=u.n()).done;){var l=c.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){u.e(e)}finally{u.f()}return{created:o,deleted:i,updated:a}};function D(e,t,n,r,o,i,a,s,d,c){"boolean"!=typeof a&&(d=s,s=a,a=!1);const u="function"==typeof n?n.options:n;let l;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(l=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__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=l):t&&(l=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(u.functional){const e=u.render;u.render=function(t,n){return l.call(n),e(t,n)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,l):[l]}return n}const N=D({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(o.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const I=D({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(o.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var P=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(s(e)))},R=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return p(p({},e),{},{Class:C})})),edges:o.map((function(e){return document.createElement("div").id=e.id,p(p({},e),{},{type:"endpoint",Class:k})})),groups:a.map((function(e){return p(p({},e),{},{Class:$})}))}},x=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;e.addNodes(R({nodes:i}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){P(e.render,"node");var r=new(o.default.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeNodes(R({nodes:a}).nodes)},L=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;e.addEdges(R({edges:i}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;P(e.render,"edge");var r=new(o.default.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeEdges(R({edges:a}).edges.map((function(e){return e.id})))},A=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;R({groups:i}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){P(e.render,"group");var r=new(o.default.extend(N))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(i),R({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};const q=D({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:e.Canvas},canvasConf:{type:Object,default:()=>a},canvasData:{type:Object,required:!0}},data:()=>({canvas:null,nodes:[],groups:[],edges:[]}),methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;A(this.canvas,this.groups,n),x(this.canvas,this.nodes,e),L(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){i.default.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){i.default.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){i.default.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){console.log("link:connect");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){console.log("link:delete");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){console.log("link:reconnect");let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e,t){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},created(){this.nodes=this.canvasData.nodes,this.groups=this.canvasData.groups,this.edges=this.canvasData.edges},mounted(){if(this.initCanvas(),!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");R({nodes:this.nodes,groups:this.groups,edges:this.edges});this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))}},undefined,false,undefined,!1,void 0,void 0,void 0);module.exports=q;
+"use strict";require("butterfly-dag/dist/index.css");var e=require("butterfly-dag"),t=require("vue"),n=require("lodash");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n),a={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?f(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t)}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,t){return(g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?y(e):t}function b(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=h(e);if(t){var o=h(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function E(e,t,n){return(E="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=h(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function w(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return w(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?w(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,d=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){d=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(d)throw i}}}}var O=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},C=function(t){v(r,e.Node);var n=b(r);function r(){var e;s(this,r);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return l(y(e=n.call.apply(n,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=O(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return r}(),$=function(t){v(r,e.Edge);var n=b(r);function r(){return s(this,r),n.apply(this,arguments)}return u(r,[{key:"drawArrow",value:function(e){return E(h(r.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),r}(),k=function(t){v(r,e.Group);var n=b(r);function r(){return s(this,r),n.apply(this,arguments)}return u(r,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),r}(),S=function(e){return Array.isArray(e)?e:[e]},j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=S(e),t=S(t);var r,o=[],i=[],a=[],d=_(e);try{for(d.s();!(r=d.n()).done;){var s=r.value;t.map((function(e){return e[n]})).includes(s[n])?a.push(s):o.push(s)}}catch(e){d.e(e)}finally{d.f()}var c,u=_(t);try{for(u.s();!(c=u.n()).done;){var l=c.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){u.e(e)}finally{u.f()}return{created:o,deleted:i,updated:a}};function D(e,t,n,r,o,i,a,d,s,c){"boolean"!=typeof a&&(s=d,d=a,a=!1);const u="function"==typeof n?n.options:n;let l;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),r&&(u._scopeId=r),i?(l=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__),t&&t.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},u._ssrRegister=l):t&&(l=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),l)if(u.functional){const e=u.render;u.render=function(t,n){return l.call(n),e(t,n)}}else{const e=u.beforeCreate;u.beforeCreate=e?[].concat(e,l):[l]}return n}const N=D({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(o.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const I=D({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(o.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var P=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(d(e)))},R=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return p(p({},e),{},{Class:C})})),edges:o.map((function(e){return document.createElement("div").id=e.id,p(p({},e),{},{type:"endpoint",Class:$})})),groups:a.map((function(e){return p(p({},e),{},{Class:k})}))}},x=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;e.addNodes(R({nodes:i}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){P(e.render,"node");var r=new(o.default.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeNodes(R({nodes:a}).nodes)},L=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;e.addEdges(R({edges:i}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;P(e.render,"edge");var r=new(o.default.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(i),e.removeEdges(R({edges:a}).edges.map((function(e){return e.id})))},A=function(e,t,n){var r=j(t,n),i=r.created,a=r.deleted;R({groups:i}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){P(e.render,"group");var r=new(o.default.extend(N))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(i),R({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};const q=D({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:e.Canvas},canvasConf:{type:Object,default:()=>a},canvasData:{type:Object,required:!0}},data(){return{canvas:null,nodes:this.canvasData.nodes,groups:this.canvasData.groups,edges:this.canvasData.edges}},methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;A(this.canvas,this.groups,n),x(this.canvas,this.nodes,e),L(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){i.default.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){i.default.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){i.default.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},mounted(){this.initCanvas(),this.canvas?(this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))):console.warn("当前canvas为null，初始化存在问题")}},undefined,false,undefined,!1,void 0,void 0,void 0);module.exports=q;
 //# sourceMappingURL=index.js.map

index.unpkg.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("butterfly-dag/dist/index.css"),require("butterfly-dag"),require("vue"),require("lodash")):"function"==typeof define&&define.amd?define(["butterfly-dag/dist/index.css","butterfly-dag","vue","lodash"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["butterfly-vue"]=t(null,e.butterflyDag,e.Vue,e._)}(this,(function(e,t,n,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(n),a=o(r),s={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){f(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e,t){return(y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?m(e):t}function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=g(e);if(t){var o=g(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return b(this,n)}}function w(e,t,n){return(w="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=g(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function O(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return _(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(s)throw i}}}}var C=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},k=function(e){v(n,e);var t=E(n);function n(){var e;u(this,n);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return f(m(e=t.call.apply(t,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=C(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return n}(t.Node),$=function(e){v(n,e);var t=E(n);function n(){return u(this,n),t.apply(this,arguments)}return l(n,[{key:"drawArrow",value:function(e){return w(g(n.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),n}(t.Edge),j=function(e){v(n,e);var t=E(n);function n(){return u(this,n),t.apply(this,arguments)}return l(n,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),n}(t.Group),D=function(e){return Array.isArray(e)?e:[e]},S=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=D(e),t=D(t);var r,o=[],i=[],a=[],s=O(e);try{for(s.s();!(r=s.n()).done;){var d=r.value;t.map((function(e){return e[n]})).includes(d[n])?a.push(d):o.push(d)}}catch(e){s.e(e)}finally{s.f()}var u,c=O(t);try{for(c.s();!(u=c.n()).done;){var l=u.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){c.e(e)}finally{c.f()}return{created:o,deleted:i,updated:a}};function N(e,t,n,r,o,i,a,s,d,u){"boolean"!=typeof a&&(d=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let l;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),r&&(c._scopeId=r),i?(l=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__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=l):t&&(l=a?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(c.functional){const e=c.render;c.render=function(t,n){return l.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,l):[l]}return n}const I=N({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(i.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const P=N({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(i.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var R=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(d(e)))},x=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return h(h({},e),{},{Class:k})})),edges:o.map((function(e){return document.createElement("div").id=e.id,h(h({},e),{},{type:"endpoint",Class:$})})),groups:a.map((function(e){return h(h({},e),{},{Class:j})}))}},L=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;e.addNodes(x({nodes:o}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){R(e.render,"node");var r=new(i.default.extend(P))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(o),e.removeNodes(x({nodes:a}).nodes)},A=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;e.addEdges(x({edges:o}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;R(e.render,"edge");var r=new(i.default.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(o),e.removeEdges(x({edges:a}).edges.map((function(e){return e.id})))},q=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;x({groups:o}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){R(e.render,"group");var r=new(i.default.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(o),x({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};return N({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:t.Canvas},canvasConf:{type:Object,default:()=>s},canvasData:{type:Object,required:!0}},data:()=>({canvas:null,nodes:[],groups:[],edges:[]}),methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;q(this.canvas,this.groups,n),L(this.canvas,this.nodes,e),A(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){a.default.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){a.default.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){a.default.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){console.log("link:connect");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){console.log("link:delete");let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){console.log("link:reconnect");let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e,t){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},created(){this.nodes=this.canvasData.nodes,this.groups=this.canvasData.groups,this.edges=this.canvasData.edges},mounted(){if(this.initCanvas(),!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");x({nodes:this.nodes,groups:this.groups,edges:this.edges});this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))}},undefined,false,undefined,!1,void 0,void 0,void 0)}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("butterfly-dag/dist/index.css"),require("butterfly-dag"),require("vue"),require("lodash")):"function"==typeof define&&define.amd?define(["butterfly-dag/dist/index.css","butterfly-dag","vue","lodash"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["butterfly-vue"]=t(null,e.butterflyDag,e.Vue,e._)}(this,(function(e,t,n,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(n),a=o(r),d={disLinkable:!0,linkable:!0,draggable:!0,zoomable:!0,moveable:!0,theme:{edge:{arrow:!0,type:"Straight"}}};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),e}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){f(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e,t){return(y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?m(e):t}function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=g(e);if(t){var o=g(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return b(this,n)}}function w(e,t,n){return(w="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=g(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function O(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return _(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,d=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){d=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(d)throw i}}}}var C=function(e,t){return{left:e+"px",top:t+"px",position:"absolute"}},$=function(e){h(n,e);var t=E(n);function n(){var e;u(this,n);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return f(m(e=t.call.apply(t,[this].concat(o))),"draw",(function(e){var t=document.createElement("div"),n=C(e.left,e.top);return Reflect.ownKeys(n).forEach((function(e){t.style[e]=n[e]})),t.className="butterfly-node",t.id="bf_node_"+e.id,t})),e}return n}(t.Node),k=function(e){h(n,e);var t=E(n);function n(){return u(this,n),t.apply(this,arguments)}return l(n,[{key:"drawArrow",value:function(e){return w(g(n.prototype),"drawArrow",this).call(this,e)}},{key:"drawLabel",value:function(){var e=document.createElement("div");return this.id||(this.id=String(Number(new Date))),e.id="edge_label_".concat(this.id),e.className="butterflies-label",e}}]),n}(t.Edge),j=function(e){h(n,e);var t=E(n);function n(){return u(this,n),t.apply(this,arguments)}return l(n,[{key:"draw",value:function(e){var t,n,r=document.createElement("div"),o=(t=e.left,n=e.top,{left:t+"px",top:n+"px",position:"absolute"});return Object.keys(o).forEach((function(e){r.style[e]=o[e]})),r.className="butterfly-group",r.id="bf_group_".concat(e.id),r.className="butterflies-group",r}}]),n}(t.Group),D=function(e){return Array.isArray(e)?e:[e]},S=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"id";e=D(e),t=D(t);var r,o=[],i=[],a=[],d=O(e);try{for(d.s();!(r=d.n()).done;){var s=r.value;t.map((function(e){return e[n]})).includes(s[n])?a.push(s):o.push(s)}}catch(e){d.e(e)}finally{d.f()}var u,c=O(t);try{for(c.s();!(u=c.n()).done;){var l=u.value;e.map((function(e){return e[n]})).includes(l[n])||i.push(l)}}catch(e){c.e(e)}finally{c.f()}return{created:o,deleted:i,updated:a}};function N(e,t,n,r,o,i,a,d,s,u){"boolean"!=typeof a&&(s=d,d=a,a=!1);const c="function"==typeof n?n.options:n;let l;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),r&&(c._scopeId=r),i?(l=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__),t&&t.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=l):t&&(l=a?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),l)if(c.functional){const e=c.render;c.render=function(t,n){return l.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,l):[l]}return n}const I=N({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"groupContent"})},staticRenderFns:[]},undefined,{name:"Vue-group",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-group">\n      <div class="vue-bf-group-header">\n          {{ id }}\n        </div>\n        <div class="vue-bf-group-content"></div> \n      </div>\n    '}},methods:{renderDom(){const e=new(i.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.groupContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);const P=N({render:function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:"nodeContent"})},staticRenderFns:[]},undefined,{name:"Vue-node",props:{id:{type:String,required:!0},render:{type:String,default:'\n      <div class="vue-bf-node">\n        {{ id }}\n      </div>\n    '}},methods:{renderDom(){const e=new(i.default.extend({template:`${this.render}`,props:{id:{type:String,required:!0}},methods:{},created(){}}))({propsData:{id:this.id}}).$mount();this.$refs.nodeContent.appendChild(e.$el)}},mounted(){this.renderDom()}},undefined,false,undefined,!1,void 0,void 0,void 0);var R=function(e,t){if(!t.render)return null;if("string"!=typeof e)throw Error("".concat(t,"存在render属性，应该为string类型，现在是").concat(s(e)))},x=function(e){var t=e.nodes,n=void 0===t?[]:t,r=e.edges,o=void 0===r?[]:r,i=e.groups,a=void 0===i?[]:i;return{nodes:n.map((function(e){return v(v({},e),{},{Class:$})})),edges:o.map((function(e){return document.createElement("div").id=e.id,v(v({},e),{},{type:"endpoint",Class:k})})),groups:a.map((function(e){return v(v({},e),{},{Class:j})}))}},L=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;e.addNodes(x({nodes:o}).nodes),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_node_"+e.id);if(n){R(e.render,"node");var r=new(i.default.extend(P))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("nodes的".concat(t,"不含ID属性，请检查格式"))}))}(o),e.removeNodes(x({nodes:a}).nodes)},A=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;e.addEdges(x({edges:o}).edges,!0),function(e){e.map((function(e,t){if(e.id){if(e.render){var n=document.getElementById("edge_label_"+e.id);if(!n)return;R(e.render,"edge");var r=new(i.default.extend({template:"".concat(e.render),props:{id:{type:String,required:!0}}}))({propsData:{id:e.id}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("edges的".concat(t,"不含ID属性，请检查格式"))}))}(o),e.removeEdges(x({edges:a}).edges.map((function(e){return e.id})))},q=function(e,t,n){var r=S(t,n),o=r.created,a=r.deleted;x({groups:o}).groups.forEach((function(t){e.addGroup(t)})),function(e){e.map((function(e,t){if(e.id){var n=document.getElementById("bf_group_"+e.id);if(n){R(e.render,"group");var r=new(i.default.extend(I))({propsData:{id:e.id,render:e.render}}).$mount();console.log(r.$el,"==>",n),n.appendChild(r.$el)}}else console.warn("groups的".concat(t,"不含ID属性，请检查格式"))}))}(o),x({groups:a}).groups.forEach((function(t){e.removeGroup(t.id)}))};return N({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"butterfly-vue",class:e.className},[n("div",{ref:"canvas-dag",staticClass:"butterfly-vue-container"})])},staticRenderFns:[]},undefined,{name:"butterfly-vue",props:{className:{type:String},baseCanvas:{type:Function,default:t.Canvas},canvasConf:{type:Object,default:()=>d},canvasData:{type:Object,required:!0}},data(){return{canvas:null,nodes:this.canvasData.nodes,groups:this.canvasData.groups,edges:this.canvasData.edges}},methods:{initCanvas(){const e=this.$refs["canvas-dag"];e?(this.canvasConf.root=e,this.canvas=new this.baseCanvas(this.canvasConf)):console.warn("当前canvas没有绑定dom节点，无法渲染")},updateCavans(){if(!this.canvas)return void console.warn("当前canvas为null，初始化存在问题");const e=this.canvas.nodes,t=this.canvas.edges,n=this.canvas.groups;q(this.canvas,this.groups,n),L(this.canvas,this.nodes,e),A(this.canvas,this.edges,t)},re(){var e;this.canvas?((e=this.canvas)&&(e.recalc=function(){this.nodes.forEach((function(e){e.endpoints.forEach((function(e){a.default.isFunction(e.updatePos)&&e.updatePos()}))})),this.edges.forEach((function(e){a.default.isFunction(e.redraw)&&e.redraw()})),this.groups.forEach((function(e){a.default.isFunction(e.redraw)&&e.redraw()}))},e.recalc()),function(e){e&&(e.relayout=function(){e._autoLayout(e),this.nodes.forEach((function(e){e.moveTo(e.left,e.top)})),e.recalc&&e.recalc()},e.relayout())}(this.canvas)):console.warn("当前canvas为null，初始化存在问题")},onCreateEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onCreateEdge",t)},onDeleteEdge(e){let t={sourceEndpointId:e.links[0].sourceEndpoint.id,sourceNodeId:e.links[0].sourceNode.id,targetEndpointId:e.links[0].targetEndpoint.id,targetNodeId:e.links[0].targetNode.id};this.$emit("onDeleteEdge",t)},onChangeEdges(e){let t={addLink:{sourceEndpointId:e.addLinks[0].sourceEndpoint.id,sourceNodeId:e.addLinks[0].sourceNode.id,targetEndpointId:e.addLinks[0].targetEndpoint.id,targetNodeId:e.addLinks[0].targetNode.id},delLinks:{sourceEndpointId:e.delLinks[0].sourceEndpoint.id,sourceNodeId:e.delLinks[0].sourceNode.id,targetEndpointId:e.delLinks[0].targetEndpoint.id,targetNodeId:e.delLinks[0].targetNode.id},info:e.info};this.$emit("onChangeEdges",t)},onOtherEvent(e){this.$emit("onOtherEvent",e)}},watch:{canvasData:{handler(e){this.nodes=e.nodes,this.groups=e.groups,this.edges=e.edges,this.updateCavans(),this.re()},deep:!0}},mounted(){this.initCanvas(),this.canvas?(this.updateCavans(),this.re(),this.$emit("onLoaded",this.canvas),this.canvas.on("events",(e=>{"link:connect"===e.type?this.onCreateEdge(e):"links:delete"===e.type&&e.links.length>0?this.onDeleteEdge(e):"link:reconnect"===e.type?this.onChangeEdges(e):this.onOtherEvent(e)}))):console.warn("当前canvas为null，初始化存在问题")}},undefined,false,undefined,!1,void 0,void 0,void 0)}));
 //# sourceMappingURL=index.unpkg.js.map

package.json

 {
   "name": "butterfly-vue-test",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "vue version for butterfly",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

41397

-1.5%

Lines of code

193

-1.03%

No dependency changes