treechartjs - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

dist/index.js

		@@ -1,1 +0,1 @@
		function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable\|\|!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var a=function(){function t(n){e(this,t);var i=n.scrollContainer,r=n.eventContainer,o=n.autoScrollTriggerDistance,a=n.autoScrollSpeed;this.scrollContainer=i,this.eventContainer=r,this.autoScrollSpeed=a,this.triggerDistance=o\|\|0,this.targetNode=null,this.interval=0,this.directData={left:!1,right:!1,top:!1,bottom:!1},this.setEvent()}return n(t,[{key:"setEvent",value:function(){var e=this,t=this.eventContainer;this.mouseMoveHandler=function(t){var n=t.button,i=t.movementX,r=t.movementY;0===i&&0===r\|\|!n&&e.targetNode&&(e.setDirectData(t),e.triggerScroll())},t.addEventListener("mousemove",this.mouseMoveHandler)}},{key:"setDirectData",value:function(e){var t=e.movementX,n=e.movementY,i=this.scrollContainer,r=this.targetNode,o=this.triggerDistance,a=this.directData,s=i.scrollLeft,l=i.scrollTop,c=i.scrollWidth,d=i.scrollHeight,h=i.clientWidth,u=i.clientHeight,v=i.getBoundingClientRect(),g=v.left,f=v.right,m=v.top,y=v.bottom,p=r.getBoundingClientRect(),C=p.left,k=p.right,E=p.top,L=p.bottom;C-g<o&&(a.left=!0),E-m<o&&(a.top=!0),f-k<o&&(a.right=!0),y-L<o&&(a.bottom=!0),(t>0\|\|0===s)&&(a.left=!1),(n>0\|\|0===l)&&(a.top=!1),(t<0\|\|s+h>=c)&&(a.right=!1),(n<0\|\|l+u>=d)&&(a.bottom=!1)}},{key:"triggerScroll",value:function(){var e=this.directData,t=this.scrollContainer,n=this.autoScrollSpeed,i=!1;for(var r in e)if(e[r]){i=!0;break}if(!i)return this.stop(!0);this.interval\|\|(this.interval=setInterval((function(){var i=t.scrollLeft,r=t.scrollTop;e.left&&(i-=n),e.right&&(i+=n),e.top&&(r-=n),e.bottom&&(r+=n),t.scrollLeft=i,t.scrollTop=r}),20))}},{key:"start",value:function(e){this.targetNode=e}},{key:"stop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];e\|\|(this.targetNode=null),this.interval&&(clearInterval(this.interval),this.interval=0)}},{key:"destroy",value:function(){this.eventContainer.removeEventListener("mousemove",this.mouseMoveHandler),this.targetNode=this.scrollContainer=this.eventContainer=null,this.interval=0}}]),t}(),s=function(e){return/HTML/.test(Object.prototype.toString.call(e))&&1===e.nodeType},l=function(e){return/Number/.test(Object.prototype.toString.call(e))},c=function(e,t){var n=e.style;for(var i in t)n[i]=t[i]},d=function(){function t(n){e(this,t),this.initData(n),this.createChartElement(),this.resize(),this.setEvent()}return n(t,[{key:"getKeyByElement",value:function(e){return s(e)&&e.classList.contains("tree-chart-node")?e.getAttribute("data-key"):null}},{key:"getNodeElement",value:function(e){return this.elements.nodesContainer.querySelector(".tree-chart-item-".concat(e))}},{key:"getPreviousKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.previousElementSibling.querySelector(".tree-chart-node"))}catch(e){return null}}},{key:"getNextKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.nextElementSibling.querySelector(".tree-chart-node"))}catch(e){return null}}},{key:"getParentKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.parentElement.previousElementSibling)}catch(e){return null}}},{key:"getChildrenKeys",value:function(e){var t=this.getNodeElement(e).getAttribute("data-children");return t?t.split(","):[]}},{key:"existChildren",value:function(e){var t=this.getNodeElement(e);return!!t&&Boolean(t.getAttribute("data-children"))}},{key:"insertNode",value:function(e,t,n){var i=this.getNodeElement(e);if(!/next\|previous/.test(n)\|\|i!==this.elements.rootNode){var r=null,o=null,a=null;if(/Object/.test(Object.prototype.toString.call(t)))r=this.getKeyField(t),o=this.createNode(t),(a=this.createNodeContainer()).appendChild(o),this.setNodeEvent(o);else{r=t,a=(o=this.getNodeElement(r)).parentElement;var s=this.getParentKey(r);this.removeChildrenKey(s,r),this.existChildren(s)\|\|(this.removeChildrenContainer(s),this.allowFold&&this.removeFoldButton(s))}if("child"===n){if(this.existChildren(e))this.getChildrenContainer(e).appendChild(a),this.nodeIsFold(e)&&this.toggleFold(e);else{var l=this.createChildrenContainer();l.appendChild(a),i.parentElement.appendChild(l),this.createFoldButton(i)}this.addChildrenKey(e,r)}else{var c=this.getParentKey(e),d=this.getChildrenContainer(c),h=i.parentElement;"previous"===n&&d.insertBefore(a,h),"next"===n&&d.insertBefore(a,h.nextElementSibling),this.addChildrenKey(c,r)}this.reloadLink()}}},{key:"removeNode",value:function(e){var t=this.getNodeElement(e);if(t){if(t===this.elements.rootNode)return console.warn("not allow remove root node");var n=this.getParentKey(e);this.removeChildrenKey(n,e);var i=t.parentElement;i.parentElement.removeChild(i),this.existChildren(n)\|\|(this.removeChildrenContainer(n),this.allowFold&&this.removeFoldButton(n)),this.reloadLink()}}},{key:"nodeIsFold",value:function(e){return this.getFoldButton(e).classList.contains("is-fold")}},{key:"toggleFold",value:function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])\|\|arguments[2],i=this.getFoldButton(e);if(i){var r=this.getChildrenContainer(e),o=this.nodeIsFold(e);if(o!==t){o?(r.classList.remove("is-hidden"),i.classList.remove("is-fold")):(r.classList.add("is-hidden"),i.classList.add("is-fold")),n&&this.reloadLink();var a=this.hooks.foldChange;"function"==typeof a&&a(e,this.nodeIsFold(e))}}}},{key:"reRenderNode",value:function(e,t){var n=this,i=e.toString(),r=this.getKeyField(t),o=this.getNodeElement(i),a=this.getChildrenKeys(e);if(r!==i){var s=this.elements.linkContainer,l=this.getParentKey(i);this.replaceChildrenKey(l,i,r);var c="line-".concat(l,"-").concat(i),d=s.querySelector(".".concat(c));d.classList.remove(c),d.classList.add("line-".concat(l,"-").concat(r)),a.forEach((function(e){var t="line-".concat(i,"-").concat(e),o=n.linkContainer.querySelector(".".concat(t));o.classList.remove(t),o.classList.add("line-".concat(r,"-").concat(e))})),this.replacePositionNodeKey(i,r)}var h=this.createNode(t);a.length&&h.setAttribute("data-children",a.join()),o.querySelector(".tree-chart-unfold")&&this.createFoldButton(h);var u=o.parentElement;u.insertBefore(h,o),u.removeChild(o)}},{key:"reloadLink",value:function(){this.createLink(),this.resize()}},{key:"reRender",value:function(e){var t=this.elements.nodesContainer;this.elements.rootNode=null,t.innerHTML="";var n=this.createNodeContainer();t.appendChild(n),this.createNodes(e,n),this.reloadLink()}},{key:"registerEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window;this.eventList\|\|(this.eventList=[]);var i=t.bind(this);this.eventList.push({eventTarget:n,type:e,handler:i}),n.addEventListener(e,i)}},{key:"unregisterEvent",value:function(){this.eventList.forEach((function(e){return e.eventTarget.removeEventListener(e.type,e.handler)}))}},{key:"addChildrenKey",value:function(e,t){var n=this.getNodeElement(e),i=n.getAttribute("data-children")\|\|"";n.setAttribute("data-children",i?"".concat(i,",").concat(t):t)}},{key:"removeChildrenKey",value:function(e,t){var n=this.getChildrenKeys(e);if(n.length){var i=n.indexOf(t);i>-1&&n.splice(i,1);var r=this.getNodeElement(e);n.length?r.setAttribute("data-children",n.join()):r.removeAttribute("data-children")}}},{key:"replaceChildrenKey",value:function(e,t,n){var i=this.getChildrenKeys(e);if(i.length){var r=i.indexOf(t);-1!==r&&(i.splice(r,1,n),this.getNodeElement(e).setAttribute("data-children",i.join()))}}},{key:"createChildrenContainer",value:function(e){var t=document.createElement("div");return t.classList.add("tree-chart-children-container"),e&&t.classList.add(e),t}},{key:"getChildrenContainer",value:function(e){return this.getNodeElement(e).nextElementSibling}},{key:"removeChildrenContainer",value:function(e){var t=this.getChildrenContainer(e);t.parentElement.removeChild(t)}},{key:"getKeyField",value:function(e){return e[this.option.keyField].toString()\|\|null}}]),n(t,[{key:"initData",value:function(e){var t=o({keyField:"id",isVertical:!0,distanceX:40,distanceY:40,allowFold:!1,foldNodeKeys:[],draggable:!1,dragScroll:!1,autoScrollTriggerDistance:50,autoScrollSpeed:6,line:{type:"bezier",smooth:50},hook:{}},e),n=t.draggable,i=t.allowFold,r=t.dragScroll,a=t.isVertical,s=t.line,c=t.padding,d=t.distanceX,h=t.distanceY;d<40&&(t.distanceX=40),h<40&&(t.distanceY=40),this.draggable=n,this.allowFold=i,this.dragScroll=r,this.isVertical=a,this.lineConfig=s;var u=o({top:30,right:30,bottom:30,left:30},c);for(var v in u){var g=u[v];l(g)\|\|(g=0),n&&g<30&&(g=30),u[v]=g}this.containerPadding=u,this.option=t,this.elements={container:null,ghostContainer:null,nodesContainer:null,linkContainer:null,rootNode:null},this.initHook()}},{key:"initHook",value:function(){var e=this,t=this.option.hook;this.hooks={};["dragStart","dragEnd","click","mouseEnter","mouseLeave","foldChange"].forEach((function(n){var i=t[n];"function"==typeof i&&(e.hooks[n]=i)}))}},{key:"createChartElement",value:function(){var e=this.isVertical,t=this.option,n=t.container,i=t.data;n.classList.add("tree-chart"),e&&n.classList.add("is-vertical"),this.elements.container=n,this.createNodes(i,this.createNodesContainer()),this.createLinkContainer(),this.createLink(),this.createGhostContainer()}},{key:"createNodesContainer",value:function(){var e=this.containerPadding,t=this.createNodeContainer();for(var n in t.classList.add("is-nodes-container"),e)if(/left\|top\|right\|bottom/.test(n)){var i=e[n];t.style["padding".concat(n.replace(/^./,(function(e){return e.toUpperCase()})))]="".concat(i,"px")}this.elements.container.appendChild(t),this.elements.nodesContainer=t;var r=this.createNodeContainer();return t.append(r),r}},{key:"createNodeContainer",value:function(){var e=document.createElement("div");return e.classList.add("tree-chart-container"),e}},{key:"createNodes",value:function(e,t){var n=this,i=this.allowFold,r=this.option,o=this.elements,a=e.children,s=r.foldNodeKeys,l=Array.isArray(a)&&a.length>0,c=this.createNode(e);if(t.appendChild(c),o.rootNode\|\|(o.rootNode=c),l){var d=this.createChildrenContainer();if(t.appendChild(d),i){var h=this.createFoldButton(c);s.includes(this.getKeyField(e))&&(h.classList.add("is-fold"),d.classList.add("is-hidden"))}var u=[];a.forEach((function(e){u.push(n.getKeyField(e));var t=n.createNodeContainer();d.appendChild(t),n.createNodes(e,t)})),c.setAttribute("data-children",u.join())}}},{key:"createNode",value:function(e){var t=this.draggable,n=this.option,i=n.distanceX,r=n.distanceY,a=n.contentRender,l=n.nodeControl,d=document.createElement("div"),h=this.getKeyField(e);d.classList.add("tree-chart-node","tree-chart-item-".concat(h)),d.setAttribute("data-key",h),c(d,{marginBottom:"".concat(r,"px"),marginRight:"".concat(i,"px")});var u=document.createElement("div");if(u.classList.add("tree-render-container"),a){var v=a(e);"string"==typeof v?u.innerHTML=v.replace(/>\s+</g,"><"):s(v)?u.appendChild(v):u.innerText="Please check contentRender return type is string or element"}else u.innerText="option.contentRender is required";if(d.appendChild(u),this.setNodeEvent(d),t&&l){var g=o({draggable:!0,insertChild:!0,insertPrevious:!0,insertNext:!0},l(e));!g.draggable&&d.classList.add("not-allow-drag"),!g.insertChild&&d.classList.add("not-allow-insert-child"),!g.insertPrevious&&d.classList.add("not-allow-insert-previous"),!g.insertNext&&d.classList.add("not-allow-insert-next")}return d}},{key:"createGhostContainer",value:function(){var e=document.createElement("div");e.classList.add("tree-chart-ghost-container"),this.elements.container.appendChild(e),this.elements.ghostContainer=e}},{key:"createFoldButton",value:function(e){if(!e.querySelector(".tree-chart-unfold")){var t=document.createElement("div");return t.classList.add("tree-chart-unfold"),t.innerHTML="<div></div><div></div>",e.appendChild(t),t}}},{key:"getFoldButton",value:function(e){return this.getNodeElement(e).querySelector(".tree-chart-unfold")}},{key:"removeFoldButton",value:function(e){var t=this.getFoldButton(e);t&&t.parentElement.removeChild(t)}},{key:"createLinkContainer",value:function(){var e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.classList.add("tree-chart-link-container"),this.elements.container.appendChild(e),this.elements.linkContainer=e}},{key:"createLink",value:function(){var e=this,t=this.draggable,n=this.isVertical,i=this.elements,r=i.container,o=i.nodesContainer,a=i.linkContainer,s=r.getBoundingClientRect(),l=s.left,c=s.top,d=r.scrollLeft,h=r.scrollTop;a.innerHTML="",t&&this.initPositionData(),o.querySelectorAll(".tree-chart-node").forEach((function(i){var r=i.getAttribute("data-children"),o=i.getBoundingClientRect(),a=o.left,s=o.right,u=o.top,v=o.bottom,g=e.getKeyByElement(i),f=i.nextElementSibling;if(r&&!f.classList.contains("is-hidden")){var m={x:a-l+d+(n?i.offsetWidth/2:i.offsetWidth),y:u-c+h+(n?i.offsetHeight:i.offsetHeight/2),key:g};r.split(",").forEach((function(t){var i=e.getNodeElement(t),r=i.getBoundingClientRect(),o=r.left,a=r.top,s=i.offsetWidth,u=(i.offsetHeight,{x:o-l+d+(n?s/2:0),y:a-c+h+(n?0:i.offsetHeight/2),key:t});e.drawLine(m,u)}))}t&&e.addPositionData(g,{left:a-l+d,right:s-l+d,top:u-c+h,bottom:v-c+h})}))}},{key:"initPositionData",value:function(){this.positionData={left:{sortList:[]},right:{sortList:[]},top:{sortList:[]},bottom:{sortList:[]},node:{}}}},{key:"addPositionData",value:function(e,t){var n=this.positionData;for(var i in n.node[e]=t,t){var r=t[i],o=n[i];o[r]?o[r].push(e):o[r]=[e];var a=o.sortList;if(a.length)for(var s=0,l=a.length;s<l;s++){var c=a[s];if(r===c)break;if(r<c){a.splice(s,0,r);break}s===l-1&&a.push(r)}else a.push(r)}}},{key:"replacePositionNodeKey",value:function(e,t){var n=this.positionData;n.node[t]=n.node[e],delete n.node[e],["left","top","right","bottom"].forEach((function(i){var r=n[i];for(var o in r)if("sortList"!==o){var a=r[o],s=a.indexOf(e);if(s>-1){a.splice(s,1,t);break}}}))}},{key:"setEvent",value:function(){var e=this.allowFold,t=this.draggable,n=this.dragScroll;e&&this.setFoldEvent(),this.setClickHook(),t&&this.setDragEvent(),n&&this.setDragScroll()}},{key:"setFoldEvent",value:function(){var e=this;this.elements.nodesContainer.addEventListener("click",(function(t){var n=t.target;n.classList.contains("tree-chart-unfold")&&e.toggleFold(e.getKeyByElement(n.parentElement))}))}},{key:"drawLine",value:function(e,t,n){var i=this.isVertical,r=this.allowFold,o=this.elements.linkContainer,a=this.lineConfig,s=a.type,l=a.smooth,c="line-".concat(e.key,"-").concat(t.key),d=document.querySelector(".".concat(c));d\|\|((d=document.createElementNS("http://www.w3.org/2000/svg","path")).classList.add(c,"line-from-".concat(e.key)),n&&d.classList.add("is-temp-line"),o.appendChild(d));var h="",u=e.x,v=e.y,g=t.x,f=t.y;r&&this.existChildren(e.key)&&(i?v+=5:u+=5);var m=(g-u)/2,y=(f-v)/2,p="".concat(u," ").concat(v),C="".concat(g," ").concat(f);if("straight"===s&&(h="M".concat(p," T ").concat(C)),"broken"===s){var k="",E="";i?(k="".concat(u," ").concat(v+y),E="".concat(g," ").concat(f-y)):(k="".concat(u+m," ").concat(v),E="".concat(g-m," ").concat(f)),h="M".concat(p," L").concat(k," L").concat(E," L").concat(C)}if("bezier"===s){var L=l/100,b="";b=i?"".concat(u," ").concat(v+(y-yL)):"".concat(u+(m-mL)," ").concat(v);var N="".concat(u+m," ").concat(v+y);h="M".concat(p," Q").concat(b," ").concat(N," T ").concat(C)}d.setAttribute("d",h)}},{key:"getCurrentEventNode",value:function(e){var t=this.elements.nodesContainer;if(e.classList.contains("tree-chart-unfold"))return null;for(var n=e;t!==n;){if(n.classList.contains("tree-chart-node"))return n;n=n.parentElement}return null}},{key:"isDragging",value:function(){var e=this.draggable,t=this.dragData;if(!e)return!1;var n=t.ghostTranslateX,i=t.ghostTranslateY;return t.key&&(0!==n\|\|0!==i)}},{key:"setClickHook",value:function(){var e=this,t=this.elements.nodesContainer,n=this.hooks.click;if(n){var i=null;t.addEventListener("mousedown",(function(t){var n=t.button,r=t.target;0===n&&(i=e.getCurrentEventNode(r))})),t.addEventListener("mouseup",(function(t){var r=t.button,o=t.target;if(0===r){var a=e.getCurrentEventNode(o);a&&a===i&&!e.isDragging()&&n({key:e.getKeyByElement(a),element:a},t)}}))}}},{key:"setNodeEvent",value:function(e){var t=this,n=this.hooks,i=n.mouseEnter,r=n.mouseLeave,o={key:this.getKeyByElement(e),element:e},a=e.querySelector(".tree-render-container");i&&a.addEventListener("mouseenter",(function(e){t.isDragging()\|\|i(o,e)})),r&&a.addEventListener("mouseleave",(function(e){t.isDragging()\|\|r(o,e)}))}},{key:"createNodeParams",value:function(e){return{key:e,parentKey:this.getParentKey(e),previousKey:this.getPreviousKey(e),nextKey:this.getNextKey(e)}}},{key:"initDragData",value:function(){this.dragData={key:null,ghostElement:null,ghostTranslateX:0,ghostTranslateY:0,mouseDownOffsetX:0,mouseDownOffsetY:0}}},{key:"setDragEvent",value:function(){var e=this,t=this.option,n=t.autoScrollTriggerDistance,i=t.autoScrollSpeed,r=t.preventDrag,o=this.elements,s=o.container,l=o.nodesContainer,c=o.ghostContainer,d=this.hooks,h=d.dragStart,u=d.dragEnd,v=!0;this.initDragData(),l.addEventListener("mousedown",(function(t){var n=t.button,i=t.clientX,o=t.clientY;if(0===n){var a=e.getCurrentEventNode(t.target),l=e.getKeyByElement(a);if(a&&a!==e.elements.rootNode&&!(a.classList.contains("not-allow-drag")\|\|r&&r({key:l,element:a},t))){var c=e.positionData.node[l],d=c.left,h=c.top,u=a.cloneNode(!0);u.style.margin="0px",Object.assign(e.dragData,{key:l,ghostElement:u,mouseDownOffsetX:i+s.scrollLeft-d,mouseDownOffsetY:o+s.scrollTop-h}),e.FollowScroll.start(u)}}})),l.addEventListener("mousemove",(function(t){var n=t.button,i=t.movementX,r=t.movementY,o=t.clientX,a=t.clientY,l=t.currentTarget,d=e.dragData,u=d.ghostElement,g=d.mouseDownOffsetX,f=d.mouseDownOffsetY,m=d.key;if(0===n&&m&&(0!==i\|\|0!==r)){getSelection&&getSelection().removeAllRanges(),l.classList.add("cursor-move"),!c.contains(u)&&c.appendChild(u);var y=o+s.scrollLeft-g,p=a+s.scrollTop-f;u.style.transform="translate(".concat(y,"px, ").concat(p,"px)"),Object.assign(e.dragData,{ghostTranslateX:y,ghostTranslateY:p});var C=e.getGhostPosition();e.setDragEffect(C),h&&v&&(v=!1,h({key:m,element:e.getNodeElement(m)}))}})),this.registerEvent("mouseup",(function(){v=!0;var t=e.dragData.key;if(t){var n="",i="",r=l.querySelector(".collide-node");if(r&&(n=e.getKeyByElement(r),r.classList.contains("become-previous")&&(i="previous"),r.classList.contains("become-next")&&(i="next"),r.classList.contains("become-child")&&(i="child")),e.FollowScroll.stop(),l.classList.remove("cursor-move"),c.innerHTML="",e.removeDragEffect(),e.initDragData(),r){var o=e.createNodeParams(t);e.insertNode(n,t,i);var a=e.createNodeParams(t);u&&u({from:o,to:a,target:n,key:t,type:i})}}}));var g={top:s.scrollTop,left:s.scrollLeft};this.registerEvent("scroll",(function(t){var n=t.target,i=e.dragData,r=i.key,o=i.ghostElement,a=i.ghostTranslateY,s=i.ghostTranslateX,l=g.left,c=g.top,d=n.scrollLeft,h=n.scrollTop;if(r&&o){var u=s+d-l,v=a+h-c;o.style.transform="translate(".concat(u,"px, ").concat(v,"px)"),Object.assign(e.dragData,{ghostTranslateX:u,ghostTranslateY:v}),e.setDragEffect(e.getGhostPosition())}g.left=d,g.top=h}),s),this.FollowScroll=new a({scrollContainer:s,autoScrollTriggerDistance:n,eventContainer:l,autoScrollSpeed:i})}},{key:"getGhostPosition",value:function(){var e=this.dragData,t=e.ghostTranslateX,n=e.ghostTranslateY,i=e.ghostElement;return{left:t,top:n,right:t+i.offsetWidth,bottom:n+i.offsetHeight}}},{key:"removeDragEffect",value:function(){var e=this.elements,t=e.nodesContainer,n=e.linkContainer,i=n.querySelector(".is-temp-line");i&&n.removeChild(i);var r=t.querySelector(".collide-node");r&&r.classList.remove("collide-node","become-previous","become-next","become-child");var o=t.querySelector(".temp-children-container");o&&o.parentElement.removeChild(o);var a=t.querySelector(".show-not-allow");a&&a.classList.remove("show-not-allow")}},{key:"getCollideType",value:function(e,t){var n=this.isVertical,i=this.dragData,r=this.positionData,o=this.elements.rootNode,a=i.key,s=r.node[e],l=s.top,c=s.bottom,d=s.left,h=s.right,u=t.left,v=t.right,g=t.top,f=t.bottom,m=this.getNodeElement(a),y=this.getNodeElement(e),p=e===this.getParentKey(a),C=e===this.getPreviousKey(a),k=e===this.getNextKey(a),E={child:!y.classList.contains("not-allow-insert-child")&&!p,next:!y.classList.contains("not-allow-insert-next")&&!C,previous:!y.classList.contains("not-allow-insert-previous")&&!k};if(y===o)return E.child?"child":"notAllow";if(m.parentElement.contains(y))return"notAllow";if(n){var L=.5(h-d);if(v<=d+L&&E.previous)return"previous";if(u>=h-L&&E.next)return"next"}else{var b=.5(c-l);if(f<=l+b&&E.previous)return"previous";if(g>=c-b&&E.next)return"next"}if(E.child)return"child";for(var N in E)if(E[N])return N;return"notAllow"}},{key:"getCollideLinePosition",value:function(e,t){var n=this.isVertical,i=this.positionData,r=this.option,o=r.distanceX,a=r.distanceY,s={},l=i.node[t],c=l.top,d=l.bottom,h=l.left,u=l.right;if(n){if("child"===e){if(s.from={x:(h+u)/2,y:d,key:t},this.existChildren(t)&&!this.nodeIsFold(t)){var v=this.getChildrenKeys(t).pop(),g=i.node[v],f=g.right,m=g.top;return s.to={x:f+20,y:m,key:"temp"},s}return s.to={x:(h+u)/2,y:d+a,key:"temp"},s}var y=this.getParentKey(t),p=i.node[y];return s.from={x:(p.left+p.right)/2,y:p.bottom,key:y},s.to={x:"previous"===e?h-20:u+20,y:c,key:"temp"},s}if("child"===e){if(s.from={x:u,y:(c+d)/2,key:t},this.existChildren(t)&&!this.nodeIsFold(t)){var C=this.getChildrenKeys(t).pop(),k=i.node[C],E=k.left,L=k.bottom;return s.to={x:E,y:L+20,key:"temp"},s}return s.to={x:u+o,y:(c+d)/2,key:"temp"},s}var b=this.getParentKey(t),N=i.node[b];return s.from={x:N.right,y:(N.top+N.bottom)/2,key:b},s.to={x:h,y:"previous"===e?c-20:d+20,key:"temp"},s}},{key:"createDragEffect",value:function(e,t){var n=this.positionData,i=this.getNodeElement(e),r=this.getCollideType(e,t);if("notAllow"===r)return i.classList.add("show-not-allow");i.classList.add("become-".concat(r),"collide-node");var o=this.getCollideLinePosition(r,e),a=o.from,s=o.to;if(this.drawLine(a,s,!0),"child"===r&&(!this.existChildren(e)\|\|this.nodeIsFold(e))){var l=n.node[e],d=l.top,h=l.bottom,u=l.left,v=l.right,g=document.createElement("div");g.classList.add("tree-chart-node"),c(g,{width:"".concat(v-u,"px"),height:"".concat(h-d,"px")});var f=this.createChildrenContainer("temp-children-container"),m=this.createNodeContainer(!0);m.appendChild(g),f.appendChild(m);var y=i.parentElement;i.nextElementSibling?y.insertBefore(f,i.nextElementSibling):y.appendChild(f)}}},{key:"getCollideNode",value:function(e){var t=e.left,n=e.right,i=e.top,r=e.bottom,o=this.dragData.key,a=this.positionData,s=a.left,c=a.right,d=a.top,h=a.bottom,u=a.node,v=function(e,t,n){var i=t.length;if(n){for(var r=0;r<i;r++)if(t[r]>=e)return t[r]}else for(var o=i-1;o>-1;o--)if(t[o]<=e)return t[o];return null},g=v(t,c.sortList,!0),f=v(i,h.sortList,!0),m=v(n,s.sortList),y=v(r,d.sortList),p=function(e,t,n){var i=[];return l(e)&&t.sortList.forEach((function(r){(n?r>=e:r<=e)&&(i=i.concat(t[r]))})),i},C=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var i=t.length;if(i<2)return[];var r=[],o={};return t.reduce((function(e,t){return e.concat(t)}),[]).forEach((function(e){o[e]?(o[e]++,o[e]===i&&r.push(e)):o[e]=1})),r}(p(g,c,!0),p(f,h,!0),p(m,s),p(y,d)),k=C.indexOf(o);if(k>-1&&C.splice(k,1),!C.length)return null;if(1===C.length)return C[0];var E={nodeKey:"",nodeArea:0};return C.forEach((function(e){var o=function(e){var o=u[e],a=o.left,s=o.right,l=o.top,c=o.bottom;return(a<=t?s-t:n-a)*(l<=i?c-i:r-l)}(e);o>E.nodeArea&&Object.assign(E,{nodeKey:e,nodeArea:o})})),E.nodeKey}},{key:"setDragEffect",value:function(e){this.removeDragEffect();var t=this.getCollideNode(e);t&&this.createDragEffect(t,e)}},{key:"resize",value:function(){var e=this.draggable,t=this.isVertical,n=this.elements,i=n.rootNode,r=n.nodesContainer,o=n.ghostContainer,a=n.linkContainer;c(r,{height:"auto",width:"auto",minHeight:"auto",minWidth:"auto"});var s=r.clientWidth,l=r.clientHeight;if(e){var d=i.getBoundingClientRect(),h=d.width,u=d.height;t?l+=u:s+=h}var v="".concat(s,"px"),g="".concat(l,"px");c(r,{height:g,width:v,minHeight:"100%",minWidth:"100%"}),c(a,{height:g,width:v}),e&&c(o,{height:g,width:v})}},{key:"setDragScroll",value:function(){var e=this.elements,t=e.nodesContainer,n=e.container,i=!0;t.addEventListener("mousedown",(function(e){0!==e.button\|\|function(e){if(e.classList.contains("tree-chart-node"))return e;for(var n=e;t!==n;){if(n.classList.contains("tree-chart-node"))return n;n=n.parentElement}return null}(e.target)\|\|(n.classList.add("drag-scroll-start"),i=!1)})),t.addEventListener("mousemove",(function(e){e.preventDefault(),0!==e.button\|\|i\|\|(n.scrollLeft=n.scrollLeft-e.movementX,n.scrollTop=n.scrollTop-e.movementY,!n.classList.contains("drag-scroll-move")&&n.classList.add("drag-scroll-move"))})),this.registerEvent("mouseup",(function(e){0===e.button&&(n.classList.remove("drag-scroll-start","drag-scroll-move"),i=!0)}))}},{key:"destroy",value:function(){for(var e in this.FollowScroll.destroy(),this.unregisterEvent(),this.elements.container.innerHTML="",this)this[e]=null}}]),t}();export default d;
		function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable\|\|!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var a=function(){function t(n){e(this,t);var i=n.scrollContainer,r=n.eventContainer,o=n.autoScrollTriggerDistance,a=n.autoScrollSpeed;this.scrollContainer=i,this.eventContainer=r,this.autoScrollSpeed=a,this.triggerDistance=o\|\|0,this.targetNode=null,this.interval=0,this.directData={left:!1,right:!1,top:!1,bottom:!1},this.setEvent()}return n(t,[{key:"setEvent",value:function(){var e=this,t=this.eventContainer;this.mouseMoveHandler=function(t){var n=t.button,i=t.movementX,r=t.movementY;0===i&&0===r\|\|!n&&e.targetNode&&(e.setDirectData(t),e.triggerScroll())},t.addEventListener("mousemove",this.mouseMoveHandler)}},{key:"setDirectData",value:function(e){var t=e.movementX,n=e.movementY,i=this.scrollContainer,r=this.targetNode,o=this.triggerDistance,a=this.directData,s=i.scrollLeft,l=i.scrollTop,c=i.scrollWidth,d=i.scrollHeight,h=i.clientWidth,u=i.clientHeight,v=i.getBoundingClientRect(),f=v.left,g=v.right,m=v.top,y=v.bottom,p=r.getBoundingClientRect(),C=p.left,k=p.right,E=p.top,L=p.bottom;C-f<o&&(a.left=!0),E-m<o&&(a.top=!0),g-k<o&&(a.right=!0),y-L<o&&(a.bottom=!0),(t>0\|\|0===s)&&(a.left=!1),(n>0\|\|0===l)&&(a.top=!1),(t<0\|\|s+h>=c)&&(a.right=!1),(n<0\|\|l+u>=d)&&(a.bottom=!1)}},{key:"triggerScroll",value:function(){var e=this.directData,t=this.scrollContainer,n=this.autoScrollSpeed,i=!1;for(var r in e)if(e[r]){i=!0;break}if(!i)return this.stop(!0);this.interval\|\|(this.interval=setInterval((function(){var i=t.scrollLeft,r=t.scrollTop;e.left&&(i-=n),e.right&&(i+=n),e.top&&(r-=n),e.bottom&&(r+=n),t.scrollLeft=i,t.scrollTop=r}),20))}},{key:"start",value:function(e){this.targetNode=e}},{key:"stop",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];e\|\|(this.targetNode=null),this.interval&&(clearInterval(this.interval),this.interval=0)}},{key:"destroy",value:function(){this.eventContainer.removeEventListener("mousemove",this.mouseMoveHandler),this.targetNode=this.scrollContainer=this.eventContainer=null,this.interval=0}}]),t}(),s=function(e){return/HTML/.test(Object.prototype.toString.call(e))&&1===e.nodeType},l=function(e){return/Number/.test(Object.prototype.toString.call(e))},c=function(e,t){var n=e.style;for(var i in t)n[i]=t[i]},d=function(){function t(n){e(this,t),this.initData(n),this.createChartElement(),this.resize(),this.setEvent()}return n(t,[{key:"getKeyByElement",value:function(e){return s(e)&&e.classList.contains("tree-chart-node")?e.getAttribute("data-key"):null}},{key:"getNodeElement",value:function(e){return this.elements.nodesContainer.querySelector(".tree-chart-item-".concat(e))}},{key:"getPreviousKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.previousElementSibling.querySelector(".tree-chart-node"))}catch(e){return null}}},{key:"getNextKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.nextElementSibling.querySelector(".tree-chart-node"))}catch(e){return null}}},{key:"getParentKey",value:function(e){try{var t=this.getNodeElement(e);return this.getKeyByElement(t.parentElement.parentElement.previousElementSibling)}catch(e){return null}}},{key:"getChildrenKeys",value:function(e){var t=this.getNodeElement(e).getAttribute("data-children");return t?t.split(","):[]}},{key:"existChildren",value:function(e){var t=this.getNodeElement(e);return!!t&&Boolean(t.getAttribute("data-children"))}},{key:"insertNode",value:function(e,t,n){var i=this.getNodeElement(e);if(!/next\|previous/.test(n)\|\|i!==this.elements.rootNode){var r=null,o=null,a=null;if(/Object/.test(Object.prototype.toString.call(t)))r=this.getKeyField(t),o=this.createNode(t),(a=this.createNodeContainer()).appendChild(o),this.setNodeEvent(o);else{r=t,a=(o=this.getNodeElement(r)).parentElement;var s=this.getParentKey(r);this.removeChildrenKey(s,r),this.existChildren(s)\|\|(this.removeChildrenContainer(s),this.allowFold&&this.removeFoldButton(s))}if("child"===n){if(this.existChildren(e))this.getChildrenContainer(e).appendChild(a),this.nodeIsFold(e)&&this.toggleFold(e);else{var l=this.createChildrenContainer();l.appendChild(a),i.parentElement.appendChild(l),this.createFoldButton(i)}this.addChildrenKey(e,r)}else{var c=this.getParentKey(e),d=this.getChildrenContainer(c),h=i.parentElement;"previous"===n&&d.insertBefore(a,h),"next"===n&&d.insertBefore(a,h.nextElementSibling),this.addChildrenKey(c,r)}this.reloadLink()}}},{key:"removeNode",value:function(e){var t=this.getNodeElement(e);if(t){if(t===this.elements.rootNode)return console.warn("not allow remove root node");var n=this.getParentKey(e);this.removeChildrenKey(n,e);var i=t.parentElement;i.parentElement.removeChild(i),this.existChildren(n)\|\|(this.removeChildrenContainer(n),this.allowFold&&this.removeFoldButton(n)),this.reloadLink()}}},{key:"nodeIsFold",value:function(e){return this.getFoldButton(e).classList.contains("is-fold")}},{key:"toggleFold",value:function(e,t){var n=this.getFoldButton(e);if(n){var i=Object.assign({fold:void 0,reloadLink:!0},t),r=i.fold,o=i.reloadLink,a=this.getChildrenContainer(e),s=this.nodeIsFold(e);if("boolean"!=typeof r\|\|s!==r){s?(a.classList.remove("is-hidden"),n.classList.remove("is-fold")):(a.classList.add("is-hidden"),n.classList.add("is-fold")),o&&this.reloadLink();var l=this.hooks.foldChange;"function"==typeof l&&l(e,this.nodeIsFold(e))}}}},{key:"reRenderNode",value:function(e,t){var n=this,i=e.toString(),r=this.getKeyField(t),o=this.getNodeElement(i),a=this.getChildrenKeys(e);if(r!==i){var s=this.elements.linkContainer,l=this.getParentKey(i);this.replaceChildrenKey(l,i,r);var c="line-".concat(l,"-").concat(i),d=s.querySelector(".".concat(c));d.classList.remove(c),d.classList.add("line-".concat(l,"-").concat(r)),a.forEach((function(e){var t="line-".concat(i,"-").concat(e),o=n.linkContainer.querySelector(".".concat(t));o.classList.remove(t),o.classList.add("line-".concat(r,"-").concat(e))})),this.replacePositionNodeKey(i,r)}var h=this.createNode(t);a.length&&h.setAttribute("data-children",a.join()),o.querySelector(".tree-chart-unfold")&&this.createFoldButton(h);var u=o.parentElement;u.insertBefore(h,o),u.removeChild(o)}},{key:"reloadLink",value:function(){this.createLink(),this.resize()}},{key:"reRender",value:function(e){var t=this.elements.nodesContainer;this.elements.rootNode=null,t.innerHTML="";var n=this.createNodeContainer();t.appendChild(n),this.createNodes(e,n),this.reloadLink()}},{key:"registerEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window;this.eventList\|\|(this.eventList=[]);var i=t.bind(this);this.eventList.push({eventTarget:n,type:e,handler:i}),n.addEventListener(e,i)}},{key:"unregisterEvent",value:function(){this.eventList.forEach((function(e){return e.eventTarget.removeEventListener(e.type,e.handler)}))}},{key:"addChildrenKey",value:function(e,t){var n=this.getNodeElement(e),i=n.getAttribute("data-children")\|\|"";n.setAttribute("data-children",i?"".concat(i,",").concat(t):t)}},{key:"removeChildrenKey",value:function(e,t){var n=this.getChildrenKeys(e);if(n.length){var i=n.indexOf(t);i>-1&&n.splice(i,1);var r=this.getNodeElement(e);n.length?r.setAttribute("data-children",n.join()):r.removeAttribute("data-children")}}},{key:"replaceChildrenKey",value:function(e,t,n){var i=this.getChildrenKeys(e);if(i.length){var r=i.indexOf(t);-1!==r&&(i.splice(r,1,n),this.getNodeElement(e).setAttribute("data-children",i.join()))}}},{key:"createChildrenContainer",value:function(e){var t=document.createElement("div");return t.classList.add("tree-chart-children-container"),e&&t.classList.add(e),t}},{key:"getChildrenContainer",value:function(e){return this.getNodeElement(e).nextElementSibling}},{key:"removeChildrenContainer",value:function(e){var t=this.getChildrenContainer(e);t.parentElement.removeChild(t)}},{key:"getKeyField",value:function(e){return e[this.option.keyField].toString()\|\|null}}]),n(t,[{key:"initData",value:function(e){var t=o({keyField:"id",isVertical:!0,distanceX:40,distanceY:40,allowFold:!1,foldNodeKeys:[],draggable:!1,dragScroll:!1,autoScrollTriggerDistance:50,autoScrollSpeed:6,line:{type:"bezier",smooth:50},hook:{}},e),n=t.draggable,i=t.allowFold,r=t.dragScroll,a=t.isVertical,s=t.line,c=t.padding,d=t.distanceX,h=t.distanceY;d<40&&(t.distanceX=40),h<40&&(t.distanceY=40),this.draggable=n,this.allowFold=i,this.dragScroll=r,this.isVertical=a,this.lineConfig=s;var u=o({top:30,right:30,bottom:30,left:30},c);for(var v in u){var f=u[v];l(f)\|\|(f=0),n&&f<30&&(f=30),u[v]=f}this.containerPadding=u,this.option=t,this.elements={container:null,ghostContainer:null,nodesContainer:null,linkContainer:null,rootNode:null},this.initHook()}},{key:"initHook",value:function(){var e=this,t=this.option.hook;this.hooks={};["dragStart","dragEnd","click","mouseEnter","mouseLeave","foldChange"].forEach((function(n){var i=t[n];"function"==typeof i&&(e.hooks[n]=i)}))}},{key:"createChartElement",value:function(){var e=this.isVertical,t=this.option,n=t.container,i=t.data;n.classList.add("tree-chart"),e&&n.classList.add("is-vertical"),this.elements.container=n,this.createNodes(i,this.createNodesContainer()),this.createLinkContainer(),this.createLink(),this.createGhostContainer()}},{key:"createNodesContainer",value:function(){var e=this.containerPadding,t=this.createNodeContainer();for(var n in t.classList.add("is-nodes-container"),e)if(/left\|top\|right\|bottom/.test(n)){var i=e[n];t.style["padding".concat(n.replace(/^./,(function(e){return e.toUpperCase()})))]="".concat(i,"px")}this.elements.container.appendChild(t),this.elements.nodesContainer=t;var r=this.createNodeContainer();return t.append(r),r}},{key:"createNodeContainer",value:function(){var e=document.createElement("div");return e.classList.add("tree-chart-container"),e}},{key:"createNodes",value:function(e,t){var n=this,i=this.allowFold,r=this.option,o=this.elements,a=e.children,s=r.foldNodeKeys,l=Array.isArray(a)&&a.length>0,c=this.createNode(e);if(t.appendChild(c),o.rootNode\|\|(o.rootNode=c),l){var d=this.createChildrenContainer();if(t.appendChild(d),i){var h=this.createFoldButton(c);s.includes(this.getKeyField(e))&&(h.classList.add("is-fold"),d.classList.add("is-hidden"))}var u=[];a.forEach((function(e){u.push(n.getKeyField(e));var t=n.createNodeContainer();d.appendChild(t),n.createNodes(e,t)})),c.setAttribute("data-children",u.join())}}},{key:"createNode",value:function(e){var t=this.draggable,n=this.option,i=n.distanceX,r=n.distanceY,a=n.contentRender,l=n.nodeControl,d=document.createElement("div"),h=this.getKeyField(e);d.classList.add("tree-chart-node","tree-chart-item-".concat(h)),d.setAttribute("data-key",h),c(d,{marginBottom:"".concat(r,"px"),marginRight:"".concat(i,"px")});var u=document.createElement("div");if(u.classList.add("tree-render-container"),a){var v=a(e);"string"==typeof v?u.innerHTML=v.replace(/>\s+</g,"><"):s(v)?u.appendChild(v):u.innerText="Please check contentRender return type is string or element"}else u.innerText="option.contentRender is required";if(d.appendChild(u),this.setNodeEvent(d),t&&l){var f=o({draggable:!0,insertChild:!0,insertPrevious:!0,insertNext:!0},l(e));!f.draggable&&d.classList.add("not-allow-drag"),!f.insertChild&&d.classList.add("not-allow-insert-child"),!f.insertPrevious&&d.classList.add("not-allow-insert-previous"),!f.insertNext&&d.classList.add("not-allow-insert-next")}return d}},{key:"createGhostContainer",value:function(){var e=document.createElement("div");e.classList.add("tree-chart-ghost-container"),this.elements.container.appendChild(e),this.elements.ghostContainer=e}},{key:"createFoldButton",value:function(e){if(!e.querySelector(".tree-chart-unfold")){var t=document.createElement("div");return t.classList.add("tree-chart-unfold"),t.innerHTML="<div></div><div></div>",e.appendChild(t),t}}},{key:"getFoldButton",value:function(e){return this.getNodeElement(e).querySelector(".tree-chart-unfold")}},{key:"removeFoldButton",value:function(e){var t=this.getFoldButton(e);t&&t.parentElement.removeChild(t)}},{key:"createLinkContainer",value:function(){var e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.classList.add("tree-chart-link-container"),this.elements.container.appendChild(e),this.elements.linkContainer=e}},{key:"createLink",value:function(){var e=this,t=this.draggable,n=this.isVertical,i=this.elements,r=i.container,o=i.nodesContainer,a=i.linkContainer,s=r.getBoundingClientRect(),l=s.left,c=s.top,d=r.scrollLeft,h=r.scrollTop;a.innerHTML="",t&&this.initPositionData(),o.querySelectorAll(".tree-chart-node").forEach((function(i){var r=i.getAttribute("data-children"),o=i.getBoundingClientRect(),a=o.left,s=o.right,u=o.top,v=o.bottom,f=e.getKeyByElement(i),g=i.nextElementSibling;if(r&&!g.classList.contains("is-hidden")){var m={x:a-l+d+(n?i.offsetWidth/2:i.offsetWidth),y:u-c+h+(n?i.offsetHeight:i.offsetHeight/2),key:f};r.split(",").forEach((function(t){var i=e.getNodeElement(t),r=i.getBoundingClientRect(),o=r.left,a=r.top,s=i.offsetWidth,u=(i.offsetHeight,{x:o-l+d+(n?s/2:0),y:a-c+h+(n?0:i.offsetHeight/2),key:t});e.drawLine(m,u)}))}t&&e.addPositionData(f,{left:a-l+d,right:s-l+d,top:u-c+h,bottom:v-c+h})}))}},{key:"initPositionData",value:function(){this.positionData={left:{sortList:[]},right:{sortList:[]},top:{sortList:[]},bottom:{sortList:[]},node:{}}}},{key:"addPositionData",value:function(e,t){var n=this.positionData;for(var i in n.node[e]=t,t){var r=t[i],o=n[i];o[r]?o[r].push(e):o[r]=[e];var a=o.sortList;if(a.length)for(var s=0,l=a.length;s<l;s++){var c=a[s];if(r===c)break;if(r<c){a.splice(s,0,r);break}s===l-1&&a.push(r)}else a.push(r)}}},{key:"replacePositionNodeKey",value:function(e,t){var n=this.positionData;n.node[t]=n.node[e],delete n.node[e],["left","top","right","bottom"].forEach((function(i){var r=n[i];for(var o in r)if("sortList"!==o){var a=r[o],s=a.indexOf(e);if(s>-1){a.splice(s,1,t);break}}}))}},{key:"setEvent",value:function(){var e=this.allowFold,t=this.draggable,n=this.dragScroll;e&&this.setFoldEvent(),this.setClickHook(),t&&this.setDragEvent(),n&&this.setDragScroll()}},{key:"setFoldEvent",value:function(){var e=this;this.elements.nodesContainer.addEventListener("click",(function(t){var n=t.target;n.classList.contains("tree-chart-unfold")&&e.toggleFold(e.getKeyByElement(n.parentElement))}))}},{key:"drawLine",value:function(e,t,n){var i=this.isVertical,r=this.allowFold,o=this.elements.linkContainer,a=this.lineConfig,s=a.type,l=a.smooth,c="line-".concat(e.key,"-").concat(t.key),d=document.querySelector(".".concat(c));d\|\|((d=document.createElementNS("http://www.w3.org/2000/svg","path")).classList.add(c,"line-from-".concat(e.key)),n&&d.classList.add("is-temp-line"),o.appendChild(d));var h="",u=e.x,v=e.y,f=t.x,g=t.y;r&&this.existChildren(e.key)&&(i?v+=5:u+=5);var m=(f-u)/2,y=(g-v)/2,p="".concat(u," ").concat(v),C="".concat(f," ").concat(g);if("straight"===s&&(h="M".concat(p," T ").concat(C)),"broken"===s){var k="",E="";i?(k="".concat(u," ").concat(v+y),E="".concat(f," ").concat(g-y)):(k="".concat(u+m," ").concat(v),E="".concat(f-m," ").concat(g)),h="M".concat(p," L").concat(k," L").concat(E," L").concat(C)}if("bezier"===s){var L=l/100,b="";b=i?"".concat(u," ").concat(v+(y-yL)):"".concat(u+(m-mL)," ").concat(v);var N="".concat(u+m," ").concat(v+y);h="M".concat(p," Q").concat(b," ").concat(N," T ").concat(C)}d.setAttribute("d",h)}},{key:"getCurrentEventNode",value:function(e){var t=this.elements.nodesContainer;if(e.classList.contains("tree-chart-unfold"))return null;for(var n=e;t!==n;){if(n.classList.contains("tree-chart-node"))return n;n=n.parentElement}return null}},{key:"isDragging",value:function(){var e=this.draggable,t=this.dragData;if(!e)return!1;var n=t.ghostTranslateX,i=t.ghostTranslateY;return t.key&&(0!==n\|\|0!==i)}},{key:"setClickHook",value:function(){var e=this,t=this.elements.nodesContainer,n=this.hooks.click;if(n){var i=null;t.addEventListener("mousedown",(function(t){var n=t.button,r=t.target;0===n&&(i=e.getCurrentEventNode(r))})),t.addEventListener("mouseup",(function(t){var r=t.button,o=t.target;if(0===r){var a=e.getCurrentEventNode(o);a&&a===i&&!e.isDragging()&&n({key:e.getKeyByElement(a),element:a},t)}}))}}},{key:"setNodeEvent",value:function(e){var t=this,n=this.hooks,i=n.mouseEnter,r=n.mouseLeave,o={key:this.getKeyByElement(e),element:e},a=e.querySelector(".tree-render-container");i&&a.addEventListener("mouseenter",(function(e){t.isDragging()\|\|i(o,e)})),r&&a.addEventListener("mouseleave",(function(e){t.isDragging()\|\|r(o,e)}))}},{key:"createNodeParams",value:function(e){return{key:e,parentKey:this.getParentKey(e),previousKey:this.getPreviousKey(e),nextKey:this.getNextKey(e)}}},{key:"initDragData",value:function(){this.dragData={key:null,ghostElement:null,ghostTranslateX:0,ghostTranslateY:0,mouseDownOffsetX:0,mouseDownOffsetY:0}}},{key:"setDragEvent",value:function(){var e=this,t=this.option,n=t.autoScrollTriggerDistance,i=t.autoScrollSpeed,r=t.preventDrag,o=this.elements,s=o.container,l=o.nodesContainer,c=o.ghostContainer,d=this.hooks,h=d.dragStart,u=d.dragEnd,v=!0;this.initDragData(),l.addEventListener("mousedown",(function(t){var n=t.button,i=t.clientX,o=t.clientY;if(0===n){var a=e.getCurrentEventNode(t.target),l=e.getKeyByElement(a);if(a&&a!==e.elements.rootNode&&!(a.classList.contains("not-allow-drag")\|\|r&&r({key:l,element:a},t))){var c=e.positionData.node[l],d=c.left,h=c.top,u=a.cloneNode(!0);u.style.margin="0px",Object.assign(e.dragData,{key:l,ghostElement:u,mouseDownOffsetX:i+s.scrollLeft-d,mouseDownOffsetY:o+s.scrollTop-h}),e.FollowScroll.start(u)}}})),l.addEventListener("mousemove",(function(t){var n=t.button,i=t.movementX,r=t.movementY,o=t.clientX,a=t.clientY,l=t.currentTarget,d=e.dragData,u=d.ghostElement,f=d.mouseDownOffsetX,g=d.mouseDownOffsetY,m=d.key;if(0===n&&m&&(0!==i\|\|0!==r)){getSelection&&getSelection().removeAllRanges(),l.classList.add("cursor-move"),!c.contains(u)&&c.appendChild(u);var y=o+s.scrollLeft-f,p=a+s.scrollTop-g;u.style.transform="translate(".concat(y,"px, ").concat(p,"px)"),Object.assign(e.dragData,{ghostTranslateX:y,ghostTranslateY:p});var C=e.getGhostPosition();e.setDragEffect(C),h&&v&&(v=!1,h({key:m,element:e.getNodeElement(m)}))}})),this.registerEvent("mouseup",(function(){v=!0;var t=e.dragData.key;if(t){var n="",i="",r=l.querySelector(".collide-node");if(r&&(n=e.getKeyByElement(r),r.classList.contains("become-previous")&&(i="previous"),r.classList.contains("become-next")&&(i="next"),r.classList.contains("become-child")&&(i="child")),e.FollowScroll.stop(),l.classList.remove("cursor-move"),c.innerHTML="",e.removeDragEffect(),e.initDragData(),r){var o=e.createNodeParams(t);e.insertNode(n,t,i);var a=e.createNodeParams(t);u&&u({from:o,to:a,target:n,key:t,type:i})}}}));var f={top:s.scrollTop,left:s.scrollLeft};this.registerEvent("scroll",(function(t){var n=t.target,i=e.dragData,r=i.key,o=i.ghostElement,a=i.ghostTranslateY,s=i.ghostTranslateX,l=f.left,c=f.top,d=n.scrollLeft,h=n.scrollTop;if(r&&o){var u=s+d-l,v=a+h-c;o.style.transform="translate(".concat(u,"px, ").concat(v,"px)"),Object.assign(e.dragData,{ghostTranslateX:u,ghostTranslateY:v}),e.setDragEffect(e.getGhostPosition())}f.left=d,f.top=h}),s),this.FollowScroll=new a({scrollContainer:s,autoScrollTriggerDistance:n,eventContainer:l,autoScrollSpeed:i})}},{key:"getGhostPosition",value:function(){var e=this.dragData,t=e.ghostTranslateX,n=e.ghostTranslateY,i=e.ghostElement;return{left:t,top:n,right:t+i.offsetWidth,bottom:n+i.offsetHeight}}},{key:"removeDragEffect",value:function(){var e=this.elements,t=e.nodesContainer,n=e.linkContainer,i=n.querySelector(".is-temp-line");i&&n.removeChild(i);var r=t.querySelector(".collide-node");r&&r.classList.remove("collide-node","become-previous","become-next","become-child");var o=t.querySelector(".temp-children-container");o&&o.parentElement.removeChild(o);var a=t.querySelector(".show-not-allow");a&&a.classList.remove("show-not-allow")}},{key:"getCollideType",value:function(e,t){var n=this.isVertical,i=this.dragData,r=this.positionData,o=this.elements.rootNode,a=i.key,s=r.node[e],l=s.top,c=s.bottom,d=s.left,h=s.right,u=t.left,v=t.right,f=t.top,g=t.bottom,m=this.getNodeElement(a),y=this.getNodeElement(e),p=e===this.getParentKey(a),C=e===this.getPreviousKey(a),k=e===this.getNextKey(a),E={child:!y.classList.contains("not-allow-insert-child")&&!p,next:!y.classList.contains("not-allow-insert-next")&&!C,previous:!y.classList.contains("not-allow-insert-previous")&&!k};if(y===o)return E.child?"child":"notAllow";if(m.parentElement.contains(y))return"notAllow";if(n){var L=.5(h-d);if(v<=d+L&&E.previous)return"previous";if(u>=h-L&&E.next)return"next"}else{var b=.5(c-l);if(g<=l+b&&E.previous)return"previous";if(f>=c-b&&E.next)return"next"}if(E.child)return"child";for(var N in E)if(E[N])return N;return"notAllow"}},{key:"getCollideLinePosition",value:function(e,t){var n=this.isVertical,i=this.positionData,r=this.option,o=r.distanceX,a=r.distanceY,s={},l=i.node[t],c=l.top,d=l.bottom,h=l.left,u=l.right;if(n){if("child"===e){if(s.from={x:(h+u)/2,y:d,key:t},this.existChildren(t)&&!this.nodeIsFold(t)){var v=this.getChildrenKeys(t).pop(),f=i.node[v],g=f.right,m=f.top;return s.to={x:g+20,y:m,key:"temp"},s}return s.to={x:(h+u)/2,y:d+a,key:"temp"},s}var y=this.getParentKey(t),p=i.node[y];return s.from={x:(p.left+p.right)/2,y:p.bottom,key:y},s.to={x:"previous"===e?h-20:u+20,y:c,key:"temp"},s}if("child"===e){if(s.from={x:u,y:(c+d)/2,key:t},this.existChildren(t)&&!this.nodeIsFold(t)){var C=this.getChildrenKeys(t).pop(),k=i.node[C],E=k.left,L=k.bottom;return s.to={x:E,y:L+20,key:"temp"},s}return s.to={x:u+o,y:(c+d)/2,key:"temp"},s}var b=this.getParentKey(t),N=i.node[b];return s.from={x:N.right,y:(N.top+N.bottom)/2,key:b},s.to={x:h,y:"previous"===e?c-20:d+20,key:"temp"},s}},{key:"createDragEffect",value:function(e,t){var n=this.positionData,i=this.getNodeElement(e),r=this.getCollideType(e,t);if("notAllow"===r)return i.classList.add("show-not-allow");i.classList.add("become-".concat(r),"collide-node");var o=this.getCollideLinePosition(r,e),a=o.from,s=o.to;if(this.drawLine(a,s,!0),"child"===r&&(!this.existChildren(e)\|\|this.nodeIsFold(e))){var l=n.node[e],d=l.top,h=l.bottom,u=l.left,v=l.right,f=document.createElement("div");f.classList.add("tree-chart-node"),c(f,{width:"".concat(v-u,"px"),height:"".concat(h-d,"px")});var g=this.createChildrenContainer("temp-children-container"),m=this.createNodeContainer(!0);m.appendChild(f),g.appendChild(m);var y=i.parentElement;i.nextElementSibling?y.insertBefore(g,i.nextElementSibling):y.appendChild(g)}}},{key:"getCollideNode",value:function(e){var t=e.left,n=e.right,i=e.top,r=e.bottom,o=this.dragData.key,a=this.positionData,s=a.left,c=a.right,d=a.top,h=a.bottom,u=a.node,v=function(e,t,n){var i=t.length;if(n){for(var r=0;r<i;r++)if(t[r]>=e)return t[r]}else for(var o=i-1;o>-1;o--)if(t[o]<=e)return t[o];return null},f=v(t,c.sortList,!0),g=v(i,h.sortList,!0),m=v(n,s.sortList),y=v(r,d.sortList),p=function(e,t,n){var i=[];return l(e)&&t.sortList.forEach((function(r){(n?r>=e:r<=e)&&(i=i.concat(t[r]))})),i},C=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var i=t.length;if(i<2)return[];var r=[],o={};return t.reduce((function(e,t){return e.concat(t)}),[]).forEach((function(e){o[e]?(o[e]++,o[e]===i&&r.push(e)):o[e]=1})),r}(p(f,c,!0),p(g,h,!0),p(m,s),p(y,d)),k=C.indexOf(o);if(k>-1&&C.splice(k,1),!C.length)return null;if(1===C.length)return C[0];var E={nodeKey:"",nodeArea:0};return C.forEach((function(e){var o=function(e){var o=u[e],a=o.left,s=o.right,l=o.top,c=o.bottom;return(a<=t?s-t:n-a)*(l<=i?c-i:r-l)}(e);o>E.nodeArea&&Object.assign(E,{nodeKey:e,nodeArea:o})})),E.nodeKey}},{key:"setDragEffect",value:function(e){this.removeDragEffect();var t=this.getCollideNode(e);t&&this.createDragEffect(t,e)}},{key:"resize",value:function(){var e=this.draggable,t=this.isVertical,n=this.elements,i=n.rootNode,r=n.nodesContainer,o=n.ghostContainer,a=n.linkContainer;c(r,{height:"auto",width:"auto",minHeight:"auto",minWidth:"auto"});var s=r.clientWidth,l=r.clientHeight;if(e){var d=i.getBoundingClientRect(),h=d.width,u=d.height;t?l+=u:s+=h}var v="".concat(s,"px"),f="".concat(l,"px");c(r,{height:f,width:v,minHeight:"100%",minWidth:"100%"}),c(a,{height:f,width:v}),e&&c(o,{height:f,width:v})}},{key:"setDragScroll",value:function(){var e=this.elements,t=e.nodesContainer,n=e.container,i=!0;t.addEventListener("mousedown",(function(e){0!==e.button\|\|function(e){if(e.classList.contains("tree-chart-node"))return e;for(var n=e;t!==n;){if(n.classList.contains("tree-chart-node"))return n;n=n.parentElement}return null}(e.target)\|\|(n.classList.add("drag-scroll-start"),i=!1)})),t.addEventListener("mousemove",(function(e){e.preventDefault(),0!==e.button\|\|i\|\|(n.scrollLeft=n.scrollLeft-e.movementX,n.scrollTop=n.scrollTop-e.movementY,!n.classList.contains("drag-scroll-move")&&n.classList.add("drag-scroll-move"))})),this.registerEvent("mouseup",(function(e){0===e.button&&(n.classList.remove("drag-scroll-start","drag-scroll-move"),i=!0)}))}},{key:"destroy",value:function(){for(var e in this.FollowScroll.destroy(),this.unregisterEvent(),this.elements.container.innerHTML="",this)this[e]=null}}]),t}();export default d;

package.json

		{
		"name": "treechartjs",
		"version": "0.0.9",
		"version": "0.1.0",
		"description": "Generate tree chart based on structured data, and support node expansion/collapse, and edit nodes through API or drag-and-drop behavior",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -6,2 +6,4 @@ # treechartjs

		If `treechartjs` can help you, give me [Star](https://github.com/grajs/treechartjs) will let me invest more time in open source, thank you very much

		## Installation
		@@ -441,8 +443,19 @@ ```sh

		`toggleFold(nodeKey: string): void`
		`toggleFold(nodeKey: string, option?: { fold: boolean, reloadLink: boolean }): void`

		The node corresponding to `nodeKey` will change the collapsed state
		The node corresponding to `nodeKey` will change the collapsed state:
		```javascript
		chart.toggleFold('2')
		```
		You can set ʻoption.fold` to specify the folding state:
		```javascript
		chart.toggleFold('2', { fold: true }) // Collapse the node whose nodeKey is 2
		```
		If a large number of nodes need to change the folding state, you can set ʻoption.reloadLink = false` and manually execute `chart.reloadLink()` to improve performance:
		```javascript
		['1', '2', '3', '4', '5', '6'].forEach(nodeKey => {
		chart.toggleFold(nodeKey, { reloadLink: false })
		})
		chart.reloadLink()
		```

		@@ -449,0 +462,0 @@ #### reRenderNode

treechartjs - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics