vue-tree-diagram/dist/tree-diagram.js

A simple component for render tree diagram for Vue.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TreeDiagram",[],e):"object"==typeof exports?exports.TreeDiagram=e():t.TreeDiagram=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=4)}([function(t,e,n){var i=n(2);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(5).default)("da67f13c",i,!0,{})},function(t,e,n){"use strict";var i=n(0);n.n(i).a},function(t,e,n){var i=n(3);(t.exports=i(!1)).push([t.i,"\n.wrap[data-v-693f8a44] {\n  position: relative;\n  white-space: nowrap;\n}\n.node-wrap[data-v-693f8a44] {\n  position: absolute;\n}\npath[data-v-693f8a44] {\n  fill: transparent;\n  stroke: #000;\n  stroke-width: 2;\n}\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=(r=i,s=btoa(unescape(encodeURIComponent(JSON.stringify(r)))),d="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(d," */")),a=i.sources.map((function(t){return"/*# sourceURL=".concat(i.sourceRoot).concat(t," */")}));return[n].concat(a).concat([o]).join("\n")}var r,s,d;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i=0;i<t.length;i++){var o=[].concat(t[i]);n&&(o[2]?o[2]="".concat(n," and ").concat(o[2]):o[2]=n),e.push(o)}},e}},function(t,e,n){"use strict";n.r(e);const i="ROOT_LEVLE_PID";class o{constructor(t,e,n,i,o,a,r,s){this.config={nodePad:t,levelPad:e,PIDMap:i,ChildIDMap:o,levelID:a,maxLevel:r,direction:n},this.getNodeRef=s,this.nodeStyleMap={},this.levelMaxHeightMap={},this.nodeOffsetWidth={},this.scaleW=null,this.scaleH=null,this.hasChild=this.hasChild.bind(this),this.getNodeSize=this.getNodeSize.bind(this),this.getNodeOffsetWidth=this.getNodeOffsetWidth.bind(this),this.getChildSpaceRange=this.getChildSpaceRange.bind(this)}hasChild(t){const{ChildIDMap:e}=this.config;return e[t]&&e[t].length>0}getNodeSize(t){const{nodeStyleMap:e,scaleW:n}=this,{direction:i}=this.config;if(!e[t]){const o=this.getNodeRef(t);let{width:a,height:r}=o.getBoundingClientRect();if(null===n&&a>0&&r>0){const t=o.offsetWidth,e=o.offsetHeight;this.scaleW=t/a,this.scaleH=e/r}switch(this.scaleW&&(a*=this.scaleW,r*=this.scaleH),i){case"l-r":e[t]={width:r,height:a,top:0,childPad:0};break;default:e[t]={width:a,height:r,top:0,childPad:0}}}return e[t]}getNodeOffsetWidth(t){const{nodeOffsetWidth:e,getChildSpaceRange:n,getNodeSize:i,hasChild:o}=this;if(!e[t]){let a=0;o(t)&&(a=n(t).space),e[t]=Math.max(i(t).width,a)}return e[t]}getChildSpaceRange(t){const{ChildIDMap:e,nodePad:n}=this.config,{getNodeSize:i,hasChild:o}=this;if(o(t)){const o=e[t],{childPad:a}=i(t),r=i(o[o.length-1]),s=i(o[0]).left,d=r.left+r.width+n;return{start:s+a,end:d+a,space:d-s}}return null}distributionNodePosition(){const{nodePad:t,levelPad:e,direction:n,PIDMap:i,levelID:o,maxLevel:a}=this.config,{nodeStyleMap:r,levelMaxHeightMap:s,getNodeSize:d,getNodeOffsetWidth:l,getChildSpaceRange:h,hasChild:c}=this;for(let e=a;e>=0;e-=1){const n=o[e]||[];let i=0,a=0,f=0,u=0,p=0;for(let e=0;e<n.length;e+=1){const o=n[e],s=n[e+1],g=n[e-1],{width:m,height:v}=d(o);u=Math.max(u,v);const y=l(o);let b=0,x=0;if(c(o)){r[o].childPad+=f;const{start:s,end:l,space:u}=h(o),p=Math.abs((u-m)/2);if(u>m){r[o].left=s+p,a=r[o].left+m+t;let i=0;for(;e+1<n.length&&!c(n[e+1]);){e+=1;const o=n[e],{width:s}=d(o);if(r[o].left=a,a+=s+t,i+=s+t,i>p+t)break}a>l?f+=a-l:a=l}else r[o].childPad+=p,r[o].left=s-p,a=l+p;if(i>0){const{width:e,left:a}=d(g),s=r[o].left-t-e-a;if(s>0)for(let t=0;t<i;t+=1)r[n[t]].left+=s;i=0}}else{if((0===e||i>0)&&(i+=1),f+=m+t,p+=m+t,c(g)){const{width:e,left:n}=d(g),i=a-n-e-t;i>0&&(b=Math.min(p,i),p-=b,f-=b,a-=b)}if(p&&c(s)){const{space:e}=h(s),n=(e-d(s).width)/2-t;n>0&&(x=Math.min(p,n),f-=x),p=0}r[o].left=a,a+=y+t-x}}s[e]=u}let f,u,p=Number.MAX_SAFE_INTEGER,g=0,m=0,v="";switch(n){case"l-r":f=t=>{const e=i[t];if(i[e]){const n=r[e],i=r[t];v+=`M${n.top+n.height} ${n.left+n.width/2} L${i.top} ${i.left+i.width/2} `}},u=t=>{const e=this.getNodeRef(t),{left:n,top:i,width:o,height:a}=r[t];e.style.left=`${i}px`,e.style.top=`${n}px`,m=Math.max(m,r[t].left+o),g=Math.max(g,r[t].top+a)};break;default:f=t=>{const e=i[t];if(i[e]){const n=r[e],i=r[t];v+=`M${n.left+n.width/2} ${n.top+n.height} L${i.left+i.width/2} ${i.top} `}},u=t=>{const e=this.getNodeRef(t),{left:n,top:i,width:o,height:a}=r[t];e.style.left=`${n}px`,e.style.top=`${i}px`,g=Math.max(g,n+o),m=Math.max(m,i+a)}}for(let t=0,n=0;t<=a;t+=1){const a=o[t]||[],d=s[t];for(let t=0;t<a.length;t+=1){const e=a[t],{height:o}=r[e],{childPad:s}=r[i[e]]||{childPad:0};r[e].top=n+(d-o)/2,r[e].left+=s,r[e].childPad+=s,p=Math.min(p,r[e].left),u(e),f(e)}n+=d+e}return p=p===Number.MAX_SAFE_INTEGER?0:p,{startEmptySpace:p,diagramWidth:g,diagramHeight:m,linkPath:v}}}var a={distributionNodePosition:function(t,e,n,i,a,r,s,d){return new o(t,e,n,i,a,r,s,d).distributionNodePosition()},getNodeInfo:function(t=[]){const e=[],n={},o={},a={},r={};let s=0;const d=(t,i,l)=>{let h=t.id||Math.random();r[h]&&(h=Math.random()),r[h]=!0,n[h]=i,o[i]=o[i]||[],o[i].push(h),a[l]=a[l]||[],a[l].push(h),e.push({id:h,PID:i,node:t}),s=Math.max(l,s),t.children&&t.children.forEach&&t.children.forEach(t=>d(t,h,l+1))};return t.forEach(t=>d(t,i,0)),{list:e,PIDMap:n,ChildIDMap:o,levelID:a,maxLevel:s}}},r={data:()=>({diagramWidth:0,diagramHeight:0,startEmptySpace:0,linkPath:""}),components:{},methods:{handleNodePosition(){this.$emit("before-render-node"),this.$nextTick(()=>{const{nodePad:t,levelPad:e,direction:n}=this,{PIDMap:i,ChildIDMap:o,levelID:r,maxLevel:s}=this.nodeInfo,{startEmptySpace:d,diagramWidth:l,diagramHeight:h,linkPath:c}=a.distributionNodePosition(t,e,n,i,o,r,s,t=>this.$refs[`node-${t}`]);this.startEmptySpace=d,this.diagramWidth=l,this.diagramHeight=h,this.linkPath=c,this.$emit("after-render-node")})},handleNodeClick(t){let e;if(t.path)for(let n=0;n<t.path.length;n+=1){const i=t.path[n],o=i&&i.getAttribute&&i.getAttribute("node-index");if(o){e=this.nodeInfo.list[o].node;break}}e&&this.$emit("node-click",e,t)}},mounted(){},watch:{nodeInfo(){this.handleNodePosition()},nodePad(){this.handleNodePosition()},levelPad(){this.handleNodePosition()},direction(){this.handleNodePosition()}},computed:{nodeInfo(){return a.getNodeInfo(this.data)}},props:{data:null,nodePad:{type:Number,default:1},levelPad:{type:Number,default:10},direction:{type:String,default:"l-r"}},render(t){const{diagramWidth:e,diagramHeight:n,linkPath:i,startEmptySpace:o,nodeInfo:a,direction:r,$scopedSlots:s,_l:d}=this,l=d(a.list,({id:e,node:n},i)=>{const o=s[n.type]||s.default;return t("div",{staticClass:"node-wrap",key:e,ref:`node-${e}`,attrs:{"node-index":i},on:{click:this.handleNodeClick}},[o?o(n):null])});let h;l.unshift(t("svg",{attrs:{width:e,height:n},style:{width:`${e}px`,height:`${n}px`}},[t("path",{attrs:{d:i}})]));let c=e,f=n;switch(r){case"l-r":f-=o,h="translateY";break;default:c-=o,h="translateX"}return t("div",{staticClass:"wrap",style:{width:`${c}px`,height:`${f}px`}},[t("div",{staticClass:"node-box",style:{transform:`${h}(${-o}px)`}},l)])}};n(1);var s=function(t,e,n,i,o,a,r,s){var d,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),r?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=d):o&&(d=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),d)if(l.functional){l._injectStyles=d;var h=l.render;l.render=function(t,e){return d.call(e),h(t,e)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,d):[d]}return{exports:t,options:l}}(r,void 0,void 0,!1,null,"693f8a44",null).exports;n.d(e,"TreeDiagram",(function(){return s})),s.install=function(t){t.component("TreeDiagram",s)};e.default=s},function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},o=0;o<e.length;o++){var a=e[o],r=a[0],s={id:t+":"+o,css:a[1],media:a[2],sourceMap:a[3]};i[r]?i[r].parts.push(s):n.push(i[r]={id:r,parts:[s]})}return n}n.r(e),n.d(e,"default",(function(){return p}));var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},r=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,h=function(){},c=null,f="data-vue-ssr-id",u="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,e,n,o){l=n,c=o||{};var r=i(t,e);return g(r),function(e){for(var n=[],o=0;o<r.length;o++){var s=r[o];(d=a[s.id]).refs--,n.push(d)}e?g(r=i(t,e)):r=[];for(o=0;o<n.length;o++){var d;if(0===(d=n[o]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete a[d.id]}}}}function g(t){for(var e=0;e<t.length;e++){var n=t[e],i=a[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(v(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var r=[];for(o=0;o<n.parts.length;o++)r.push(v(n.parts[o]));a[n.id]={id:n.id,refs:1,parts:r}}}}function m(){var t=document.createElement("style");return t.type="text/css",r.appendChild(t),t}function v(t){var e,n,i=document.querySelector("style["+f+'~="'+t.id+'"]');if(i){if(l)return h;i.parentNode.removeChild(i)}if(u){var o=d++;i=s||(s=m()),e=x.bind(null,i,o,!1),n=x.bind(null,i,o,!0)}else i=m(),e=P.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var y,b=(y=[],function(t,e){return y[t]=e,y.filter(Boolean).join("\n")});function x(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var a=document.createTextNode(o),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(a,r[e]):t.appendChild(a)}}function P(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),c.ssrId&&t.setAttribute(f,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}}])}));