├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── dist
    ├── index.html
    ├── static
    │   └── js
    │   │   ├── app.c5d489d7531359a95ae4.js
    │   │   ├── app.c5d489d7531359a95ae4.js.map
    │   │   ├── manifest.f13e4d0131d6e7563fda.js
    │   │   ├── manifest.f13e4d0131d6e7563fda.js.map
    │   │   ├── vendor.23b2cff6f2751bc97233.js
    │   │   └── vendor.23b2cff6f2751bc97233.js.map
    ├── vue-svg-tree.min.css
    └── vue-svg-tree.min.css.map
├── example
    ├── index.html
    └── static
    │   ├── css
    │       ├── app.dd870e83d2d18ad7e43a150936800b79.css
    │       └── app.dd870e83d2d18ad7e43a150936800b79.css.map
    │   └── js
    │       ├── app.5c5463d855fa5c7c0f66.js
    │       ├── app.5c5463d855fa5c7c0f66.js.map
    │       ├── manifest.3ad1d5771e9b13dbdad2.js
    │       ├── manifest.3ad1d5771e9b13dbdad2.js.map
    │       ├── vendor.643b326d854820d6ddbb.js
    │       └── vendor.643b326d854820d6ddbb.js.map
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── example
    │   ├── index.vue
    │   └── list.js
    ├── lib
    │   ├── index.js
    │   ├── index.vue
    │   └── ruler.js
    ├── main.js
    └── router
    │   └── index.js
├── static
    └── .gitkeep
└── vue-svg-tree-1.0.0.tgz


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log*
 4 | yarn-debug.log*
 5 | yarn-error.log*
 6 | package-lock.json
 7 | /config/
 8 | /build/
 9 | 
10 | # Editor directories and files
11 | .idea
12 | .vscode
13 | *.suo
14 | *.ntvs*
15 | *.njsproj
16 | *.sln
17 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-svg-tree
 2 | > 基于vue和svg的动态树形UI
 3 | 
 4 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://https://www.calamus.xyz)
 5 |  [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.calamus.xyz)
 6 | 
 7 | ### [截图](http://calamus.wiki/vue-svg-tree/example/index.html)
 8 | <img alt="截图" src="https://cdn.calamus.xyz/svgTree.png" style="width:400px"/>
 9 | 
10 | ### [应用](http://calamus.wiki/vue-svg-tree/example/index.html)
11 | ```bash
12 |   npm install vue-svg-tree
13 | ```
14 | 
15 | ### [示例](http://calamus.wiki/vue-svg-tree/example/index.html)
16 | ```vue
17 | <template>
18 |   <div>
19 |       <vue-svg-tree
20 |         :treeData="treeData"
21 |         svgId='svg'
22 |         ref="svgTree"
23 |       ></vue-svg-tree>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import VueSvgTree from "vue-svg-tree"
29 | export default {
30 |   components:{
31 |     VueSvgTree
32 |   },
33 |   data(){
34 |     return {
35 |         treeData:[
36 |             {id: 100, name: 'Calamus',  des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你', value: 123, delay: 120, fatherId: 0,tlevel:1},
37 |             {id: 101, name: 'Calamus1', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 0, fatherId: 100,tlevel:1},
38 |             {id: 102, name: 'Calamus2', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 100, fatherId: 100,tlevel:0},
39 |             {id: 103, name: 'Calamus3', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 100,tlevel:0},
40 |             {id: 104, name: 'Calamus4', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 200, fatherId: 100,tlevel:0},
41 |             {id: 105, name: 'Calamus5', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 101,tlevel:0},
42 |             {id: 106, name: 'Calamus6', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
43 |             {id: 107, name: 'Calamus7', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
44 |             {id: 108, name: 'Calamus8', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
45 |             {id: 109, name: 'Calamus9', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
46 |             {id: 110, name: 'Calamus10', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
47 |             {id: 111, name: 'Calamus11', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
48 |             {id: 112, name: 'Calamus12', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 300, fatherId: 103,tlevel:0},
49 |             {id: 113, name: 'Calamus13', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 103,tlevel:0},
50 |             {id: 114, name: 'Calamus14', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
51 |             {id: 116, name: 'Calamus15', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
52 |             {id: 117, name: 'Calamus16', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
53 |           ]
54 |     }
55 |   }
56 | }
57 | </script>
58 | ```
59 | 
60 | ### 参数
61 | |    参数    |    描述   |   类型   |	 默认/是否必须 	|
62 | | ----------  | ------- | :--------: | :-------: |
63 | | treeData       | 树形结构数据 |Array| 必须 |
64 | | direction         | 树形方向 | String | 'row'/'col'(纵/横)|
65 | | svgId  | svgId | String | 'svgId'(一个页面多个图时svgId不能相同) |
66 | | curveness     | 连接线是直线还是弧线 | Boolean | false(false：弧线；true：直线) |
67 | 
68 | ### ToDo
69 | - [x]横向显示还有点小问题没有修复
70 | - [x]弧度不可调整
71 | - [x]框框样式暂时不可自定义，暂时建议复制源码修改，后期会修改为可配置，[欢迎pr](https://github.com/calamus0427/vue-svg-tree)
72 | 
73 | ### 链接
74 | [github](https://github.com/calamus0427/vue-svg-tree)
75 | [官网](https://www.calamus.xyz)
76 | [组件介绍](https://www.cnblogs.com/calamus/p/10643952.html)
77 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-svg-tree</title><link href=vue-svg-tree.min.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.f13e4d0131d6e7563fda.js></script><script type=text/javascript src=static/js/vendor.23b2cff6f2751bc97233.js></script><script type=text/javascript src=static/js/app.c5d489d7531359a95ae4.js></script></body></html>


--------------------------------------------------------------------------------
/dist/static/js/app.c5d489d7531359a95ae4.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueSvgtree",[],e):"object"==typeof exports?exports.VueSvgtree=e():t.VueSvgtree=e()}("undefined"!=typeof self?self:this,function(){return webpackJsonpVueSvgtree([1],{fl6T:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n("mvHQ"),o=n.n(i),r={name:"VueSvgTree",data:function(){return{rules:{min:200,max:350},delayRules:{min:10,max:300},root:null,list:null,levels:null}},props:{treeData:{type:Array},direction:{type:String,default:"row"},svgId:{type:String,default:"svg"},curveness:{type:Boolean,default:!1}},mounted:function(){this.treeData&&this.treeData.length>0&&this.initData(JSON.parse(o()(this.treeData)))},watch:{treeData:function(t){t&&t.length>0&&this.initData(JSON.parse(o()(t)))}},methods:{compare:function(t,e){return t.deep!==e.deep?t.deep-e.deep:t.parent===e.parent?t.id-e.id:this.compare(t.parent,e.parent)},initData:function(t){var e=this;console.log("data",t);var n={},i=null,o=[];(t||t.length>0)&&(t.forEach(function(t){n[t.id]=t,t.deep=0,t.top=0,t.height=0,t.width=0,t.path="",t.left=0,t.prev=null}),t.forEach(function(t){if(t.fatherId||t.fatherId>0){var o=n[t.fatherId];o.children=o.children||[],o.children.push(t),t.parent=o,t.deep=o.deep+1,t.left="col"==e.direction?300*t.deep+10:0,t.top="row"==e.direction?250*t.deep+5:0,t.open=t.deep<1,t.show=t.deep<2}else i=t,t.open=!0,t.show=!0}),t.sort(this.compare),t.forEach(function(t){o[t.deep]=o[t.deep]||[],o[t.deep].push(t),t.prev=o[t.deep][o[t.deep].length-2]}),this.root=i,this.list=t,console.log("daya",t),this.levels=o,"col"==this.direction?(this.calcHeight(i),this.calcTop(),this.calSvg()):(this.calWidth(i),this.calcLeft(),this.calSvgVer()))},calcHeight:function(t){var e=this,n=0;t.parent&&!t.parent.open?(t.height=0,t.open=!1):t.open||(t.height=50),t.children&&t.children.length>0&&t.children.forEach(function(t){e.calcHeight(t),n+=t.height}),t.open&&(t.height=n||50)},calWidth:function(t){var e=this,n=0;t.parent&&!t.parent.open?(t.height=0,t.width=0,t.open=!1):t.open||(t.width=300),t.children&&t.children.length>0&&t.children.forEach(function(t){e.calWidth(t),n+=t.width}),t.open&&(t.width=n||300)},calSvg:function(){var t=this;this.$nextTick(function(){t.levels.flat(1/0).filter(function(t){return t.show}).sort(function(t,e){return e.top-t.top})[0].top;var e=document.getElementById(t.svgId);console.log("svg",e),e.setAttribute("height",500),e.setAttribute("width",700),t.$emit("toggle",t.$refs.treeContent.scrollWidth,t.root.height)})},calSvgVer:function(){var t=this;this.$nextTick(function(){t.levels.flat(1/0).filter(function(t){return t.show}).sort(function(t,e){return e.top-t.top})[0].top;var e=document.getElementById(t.svgId);e.setAttribute("height",t.$refs.treeContent.scrollHeight),e.setAttribute("width",t.root.width),t.$emit("toggle",{width:t.root.width,height:t.$refs.treeContent.scrollHeight})})},calcTop:function(t,e){if(t||(t=this.root),e=e||0,t.top=e+t.height/2,t.children&&t.children.length>0)for(var n=0;n<t.children.length;n++){var i=t.children[n].height;this.calcTop(t.children[n],e),e+=i}if(t.parent){var o=t.parent.left+300-40,r=t.parent.top,s=(t.left+o)/2;t.top;t.path="M"+t.left+","+t.top+" C "+s+" "+t.top+","+s+" "+r+","+o+" "+r+"L "+(t.parent.left+10)+","+r}},calcLeft:function(t,e){if(t||(t=this.root),e=e||0,t.left=e+t.width/2,t.children&&t.children.length>0)for(var n=0;n<t.children.length;n++){var i=t.children[n].width;this.calcLeft(t.children[n],e),e+=i}if(t.parent){var o=t.parent.left+115,r=t.parent.top+150,s=t.left+115,l=t.top,a=(o+s)/2,c=s>o?s+5:s-5;t.path=s==o?"M"+s+","+l+"  L "+o+","+r:"M"+s+","+l+" Q "+c+","+(l-30)+" "+a+","+(l-30)+" T "+o+","+r}},toggle:function(t){t.open=!t.open,console.log("vnode",t),t.children&&t.children.map(function(t){t.show=!t.show}),"col"==this.direction?(this.calcHeight(this.root),this.calcTop(),this.calSvg()):(this.calWidth(this.root),this.calcLeft(),this.calSvgVer()),console.log("toggle:",t,t.open)},showDetail:function(t){delete t.children,this.$emit("detail",t)},addTarget:function(t){delete t.children,console.log("1111111",t),this.$emit("add",t)},editTarget:function(t){delete t.children,console.log("2222222",t),this.$emit("edit",t)},detailTarget:function(t){delete t.children,this.$emit("detail",t)},refreshTarget:function(t){delete t.children,console.log("3333333",t),this.$emit("refresh",t)}}},s={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{ref:"treeContent",staticClass:"draw-area",attrs:{id:"treeContent"}},[t._l(t.levels,function(e,i){return n("div",{key:i},t._l(e,function(e,i){return!e.parent||e.parent.open?n("div",{key:i,staticClass:"vnode",class:{pnode:e.children&&e.children.length>0},style:"left:"+e.left+"px; top:"+e.top+"px",on:{click:function(n){return t.toggle(e)}}},[n("div",{staticClass:"text"},[n("div",{staticClass:"node_title"},[n("span",{staticClass:"OKR",class:"0"==e.tlevel?"pink":"blue"},[t._v("\n                          "+t._s("0"==e.tlevel?"C":"L")+"\n                        ")]),t._v(" "),n("span",{staticClass:"label"},[t._v("\n                          "+t._s(e.name)+"\n                        ")])]),t._v(" "),n("div",{staticClass:"node_des"},[n("div",[t._v(t._s(e.content))])]),t._v(" "),n("div",{staticClass:"node_progress"},[t._v("\n                        "+t._s(e.des)+"\n                      ")]),t._v(" "),t._m(0,!0)])]):t._e()}),0)}),t._v(" "),t.curveness?n("svg",{attrs:{id:t.svgId}},t._l(t.list,function(e,i){return e.deep>0&&e.parent.open?n("line",{staticClass:"link",attrs:{x1:e.left+90,y1:e.top,x2:e.parent.left+105,y2:e.parent.top+150,stroke:e.color?e.color:"#aaa","stroke-width":e.strokeWidth?e.strokeWidth:"1px"}}):t._e()}),0):t._e(),t._v(" "),t.curveness?t._e():n("svg",{attrs:{id:t.svgId}},t._l(t.list,function(e,i){return e.deep>0&&e.parent.open?n("path",{staticClass:"link",attrs:{d:e.path,stroke:e.color?e.color:"#aaa","stroke-width":e.strokeWidth?e.strokeWidth:"1px"}}):t._e()}),0)],2)])},staticRenderFns:[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"showTips"},[e("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://www.cnblogs.com/calamus"}},[this._v("\n                            B\n                          ")]),this._v(" "),e("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://www.calamus.xyz"}},[this._v("\n                            C\n                          ")]),this._v(" "),e("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://github.com/calamus0427"}},[this._v("\n                            G\n                          ")])])}]};var l=n("VU/8")(r,s,!1,function(t){n("gH1I")},null,null).exports;e.default=l;"undefined"!=typeof window&&window.Vue&&window.Vue.component(l.name,l)},gH1I:function(t,e){}},["fl6T"])});
2 | //# sourceMappingURL=app.c5d489d7531359a95ae4.js.map


--------------------------------------------------------------------------------
/dist/static/js/app.c5d489d7531359a95ae4.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///src/lib/index.vue","webpack:///./src/lib/index.vue?86c0","webpack:///./src/lib/index.vue","webpack:///./src/lib/index.js"],"names":["root","factory","exports","module","define","amd","self","this","lib","name","data","rules","min","max","delayRules","list","levels","props","treeData","type","Array","direction","String","default","svgId","curveness","Boolean","mounted","length","initData","JSON","parse","stringify_default","watch","val","methods","compare","v1","v2","deep","parent","id","_this","console","log","keys","forEach","v","top","height","width","path","left","prev","fatherId","p","children","push","open","show","sort","calcHeight","calcTop","calSvg","calWidth","calcLeft","calSvgVer","vnode","me","_this2","$nextTick","flat","Infinity","filter","item","a","b","svg","document","getElementById","setAttribute","$emit","$refs","treeContent","scrollWidth","_this3","scrollHeight","prevHeight","i","pLeft","pTop","mLeft","prevWidth","vLeft","vTop","x1","toggle","map","child","showDetail","addTarget","editTarget","detailTarget","refreshTarget","selectortype_template_index_0_src_lib","render","_vm","_h","$createElement","_c","_self","attrs","ref","staticClass","_l","arr","index","key","class","pnode","style","on","click","$event","tlevel","_v","_s","content","des","_m","_e","link","y1","x2","y2","stroke","color","stroke-width","strokeWidth","d","staticRenderFns","target","href","src_lib","__webpack_require__","normalizeComponent","ssrContext","VueSvgTree","window","Vue","component"],"mappings":"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","file":"static/js/app.c5d489d7531359a95ae4.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"VueSvgtree\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"VueSvgtree\"] = factory();\n\telse\n\t\troot[\"VueSvgtree\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","<template>\n  <div id=\"app\">\n        <div  class=\"draw-area\" id=\"treeContent\" ref=\"treeContent\">\n              <div   v-for=\"(arr, index) in levels\" :key=\"index\">\n                  <div v-for=\"(v,index) in arr\" v-if=\"!v.parent || v.parent.open\" class=\"vnode\" v-bind:class=\"{pnode: v.children && v.children.length > 0}\" :key=\"index\" :style=\"'left:' + (v.left) + 'px; top:' + (v.top) + 'px'\" @click=\"toggle(v)\">\n                      <div class=\"text\">\n                        <div class=\"node_title\">\n                          <span :class=\"v.tlevel == '0' ? 'pink':'blue'\" class=\"OKR\">\n                            {{v.tlevel == '0' ? 'C' : 'L'}}\n                          </span>\n                          <span class=\"label\">\n                            {{v.name}}\n                          </span>\n                        </div>\n                        <div class=\"node_des\">\n                          <div>{{v.content}}</div>\n                        </div>\n                        <div class=\"node_progress\">\n                          {{v.des}}\n                        </div>\n                        <div class=\"showTips\">\n                            <a target=\"_blank\" href=\"https://www.cnblogs.com/calamus\"   class=\"tips_icon icon_edit \">\n                              B\n                            </a>\n                            <a target=\"_blank\" href=\"https://www.calamus.xyz\"  class=\"tips_icon icon_edit \">\n                              C\n                            </a>\n                            <a target=\"_blank\" href=\"https://github.com/calamus0427\"  class=\"tips_icon icon_edit \">\n                              G\n                            </a>\n                        </div>\n                      </div>\n\n                  </div>\n            </div>\n            <svg :id=\"svgId\" v-if=\"curveness\">\n                <!-- 直线 -->\n                <line  class=\"link\" v-for=\"(link, index) in list\" v-if=\"link.deep > 0 && link.parent.open\" :x1=\"link.left + 90\" :y1=\"link.top\" :x2=\"link.parent.left + 105\" :y2=\"link.parent.top + 150\" :stroke=\"link.color ? link.color : '#aaa'\" :stroke-width=\"link.strokeWidth ? link.strokeWidth : '1px'\"></line>\n            </svg>\n\n            <svg :id=\"svgId\" v-if=\"!curveness\">\n                <path  class=\"link\" v-for=\"(link, index) in list\" v-if=\"link.deep > 0 && link.parent.open\"  :d=\"link.path\" :stroke=\"link.color ? link.color : '#aaa'\"  :stroke-width=\"link.strokeWidth ? link.strokeWidth : '1px'\"></path>\n            </svg>\n        </div>\n    </div>\n</template>\n\n\n\n<script>\n// import { list } from './list.js'\n//TODO:横向排列有问题\n\nvar width = 800;\nvar height = 600;\nvar blockHeight = 50;\nvar blockWidth = 300;\n\nexport default {\n    name:\"VueSvgTree\",\n    data(){\n      return {\n          rules: {\n              min: 200,\n              max: 350\n          },\n          delayRules: {\n              min: 10,\n              max: 300\n          },\n          root: null, // 顶层根节点s\n          list: null, // 列表\n          levels: null, // 层次存储\n      }\n    },\n    props:{\n      treeData:{\n        type:Array\n      },\n      direction:{\n        type:String,\n        default:'row'  //col:横向 row:纵向\n      },\n      svgId:{\n        type:String,\n        default:'svg'\n      },\n      curveness:{\n        type:Boolean,\n        default:false\n      }\n    },\n    mounted(){\n      if(this.treeData && this.treeData.length > 0){\n          this.initData(JSON.parse(JSON.stringify(this.treeData)))\n      }\n    },\n    watch:{\n      treeData(val){\n        if(val && val.length > 0){\n          this.initData(JSON.parse(JSON.stringify(val)))\n        }\n      }\n    },\n    methods: {\n        compare: function (v1, v2) {\n            if (v1.deep !== v2.deep) {\n                return v1.deep - v2.deep;\n            }\n\n            if (v1.parent === v2.parent) {\n                return v1.id - v2.id;\n            }\n\n            return this.compare(v1.parent, v2.parent);\n        },\n        // 初始化数据： 计算deep等\n        initData (data) {\n          console.log(\"data\",data)\n            var keys = {};\n            var root = null;\n            var levels = [];\n\n            if (!data && !(data.length > 0)) {\n                return;\n            }\n\n            data.forEach( (v) =>{\n                keys[v.id] = v;\n                v.deep = 0;\n                v.top = 0;\n                v.height = 0;\n                v.width = 0 ;\n                v.path = '';\n                v.left = 0;\n                v.prev = null; // 前一个节点\n            });\n            data.forEach( (v)=> {\n                if (v.fatherId || v.fatherId > 0) {\n                    var p = keys[v.fatherId];\n                    p.children = p.children || [];\n                    p.children.push(v);\n                    v.parent = p;\n                    v.deep = p.deep + 1;\n                    // v.left = v.deep * 150 + 10;\n                    v.left = this.direction == 'col' ? v.deep * 300 + 10 : 0;\n                    v.top = this.direction == 'row' ? v.deep * 250 + 5 : 0;\n                    v.open = v.deep < 1;\n                    v.show = v.deep < 2;\n                }\n                else {\n                    root = v ;\n                    v.open = true;\n                    v.show = true\n                }\n            });\n            data.sort(this.compare);\n            data.forEach( (v) =>{\n                levels[v.deep] = levels[v.deep] || [];\n                levels[v.deep].push(v);\n                v.prev = levels[v.deep][levels[v.deep].length - 2];\n            });\n\n            this.root = root;\n            this.list = data;\n            console.log(\"daya\",data)\n            this.levels = levels;\n            if(this.direction == 'col'){\n              this.calcHeight(root);\n              this.calcTop();\n              this.calSvg();\n            }else{\n              //default\n              this.calWidth(root);\n              this.calcLeft();\n              this.calSvgVer();\n            }\n        },\n        // 计算所有节点占用的高度和宽度是否展示\n        calcHeight (vnode) {\n            var me = this;\n            var height = 0;\n            if (vnode.parent && !vnode.parent.open) {\n                // 存在父节点并且父节点不展开\n                vnode.height = 0;\n                vnode.open = false;\n            }\n            else if (!vnode.open) {\n                vnode.height = blockHeight;\n            }\n\n            if (vnode.children && vnode.children.length > 0) {\n                vnode.children.forEach( (v) => {\n                    me.calcHeight(v);\n                    height += v.height;\n                });\n            }\n\n            if (vnode.open) {\n                vnode.height = height || blockHeight;\n            }\n\n        },\n        calWidth(vnode){\n            var me = this;\n            var width = 0;\n            if (vnode.parent && !vnode.parent.open) {\n                // 存在父节点并且父节点不展开\n                vnode.height = 0;\n                vnode.width = 0 ;\n                vnode.open = false;\n            }\n            else if (!vnode.open) {\n                vnode.width = blockWidth;\n            }\n            if (vnode.children && vnode.children.length > 0) {\n                vnode.children.forEach( (v)=> {\n                    me.calWidth(v);\n                    width += v.width\n                });\n            }\n            if (vnode.open) {\n                vnode.width = width  || blockWidth;\n            }\n        },\n        //计算svg的大小\n        calSvg(){\n          this.$nextTick( () =>{\n            let maxHeight = this.levels.flat(Infinity).filter((item)=>{\n              return item.show\n            }).sort((a,b) =>{\n                return b.top - a.top\n              })[0].top ;\n            let svg = document.getElementById(this.svgId)\n            console.log(\"svg\",svg)\n            svg.setAttribute('height', 500)\n            svg.setAttribute('width', 700 )\n            this.$emit('toggle', this.$refs.treeContent.scrollWidth ,this.root.height)\n          })\n\n        },\n        calSvgVer(){\n          this.$nextTick( () =>{\n            let maxHeight = this.levels.flat(Infinity).filter((item)=>{\n              return item.show\n            }).sort((a,b) =>{\n                return b.top - a.top\n            })[0].top ;\n            // let svg = document.getElementById('svg')\n            let svg = document.getElementById(this.svgId)\n            svg.setAttribute('height', this.$refs.treeContent.scrollHeight)\n            svg.setAttribute('width', this.root.width )\n            this.$emit('toggle',{'width':this.root.width,'height':this.$refs.treeContent.scrollHeight})\n          })\n        },\n        // 计算节点top的位置\n        calcTop (vnode, prevHeight) {\n            if (!vnode) {\n                vnode = this.root;\n            }\n            prevHeight = prevHeight || 0;\n            vnode.top = prevHeight + vnode.height / 2;\n            if (vnode.children && vnode.children.length > 0) {\n                for (var i = 0; i < vnode.children.length; i++) {\n                    var height = vnode.children[i].height;\n                    this.calcTop(vnode.children[i], prevHeight);\n                    prevHeight += height;\n                }\n            }\n            if (vnode.parent) {\n                var pLeft = vnode.parent.left + blockWidth - 40;\n                var pTop = vnode.parent.top;\n                var mLeft = (vnode.left + pLeft) / 2;\n                var mTop = (vnode.top + pTop) / 2;\n                vnode.path = 'M' + vnode.left + ',' + vnode.top\n                    + ' C ' + mLeft + ' ' + vnode.top + ',' + mLeft + ' ' + pTop\n                    + ',' + pLeft + ' ' + pTop + 'L ' + (vnode.parent.left + 10) + ',' + pTop;\n            }\n        },\n        // 节点左边位置\n        calcLeft(vnode, prevWidth){\n            if (!vnode) {\n                vnode = this.root;\n            }\n            prevWidth = prevWidth || 0;\n            vnode.left = prevWidth + vnode.width / 2;\n            if (vnode.children && vnode.children.length > 0) {\n                for (var i = 0; i < vnode.children.length; i++) {\n                    var width = vnode.children[i].width;\n                    this.calcLeft(vnode.children[i], prevWidth);\n                    prevWidth += width;\n                }\n            }\n            if (vnode.parent) {\n                var pLeft = vnode.parent.left + 115;\n                var pTop =  vnode.parent.top + 150 ;\n                var vLeft = vnode.left + 115 ;\n                var vTop = vnode.top  ;\n                var mLeft = (pLeft + vLeft) /2\n                var mTop = (pTop + vTop) /2\n                var x1 = vLeft > pLeft ? vLeft +  5 : vLeft -  5\n                if(vLeft == pLeft){\n                  vnode.path = 'M' + vLeft + ',' + vTop + ' ' + ' L ' + pLeft  + ',' + pTop\n                }else{\n                  vnode.path = 'M' + vLeft + ',' + vTop +\n                      ' Q ' + x1 + ',' + (vTop - 30) + ' ' +\n                      mLeft+ ',' + (vTop - 30) +\n                      ' T '  + pLeft  + ',' + pTop\n                }\n            }\n        },\n        // 收缩和展开\n        toggle (vnode) {\n            vnode.open = !vnode.open;\n            console.log(\"vnode\",vnode)\n            if(vnode.children){\n              vnode.children.map( (child) =>{\n                child.show = !child.show\n              })\n            }\n            if(this.direction == \"col\"){\n                this.calcHeight(this.root);\n                this.calcTop()\n                this.calSvg() ;\n            }else{\n              this.calWidth(this.root);\n              this.calcLeft();\n              this.calSvgVer() ;\n            }\n            console.log('toggle:', vnode, vnode.open);\n        },\n        //自定义事件\n        showDetail(data){\n          delete data.children\n          this.$emit(\"detail\",data)\n        },\n        addTarget(data){\n          delete data.children\n          console.log(\"1111111\",data)\n          this.$emit(\"add\",data)\n        },\n        editTarget(data){\n          delete data.children\n          console.log(\"2222222\",data)\n          this.$emit(\"edit\",data)\n        },\n        detailTarget(data){\n          delete data.children\n          this.$emit(\"detail\",data)\n        },\n        refreshTarget(data){\n          delete data.children\n          console.log(\"3333333\",data)\n          this.$emit(\"refresh\",data)\n        }\n    }\n}\n</script>\n\n<style>\nhtml, body {\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  font-size: 14px;\n}\n.draw-area {\n    position: relative;\n    width:100%;\n    height:calc( 100vh - 100px );\n    margin:40px auto;\n}\nsvg {\n    z-index: 0;\n}\n.vnode {\n    position: absolute;\n    z-index: 100;\n    top: 10px;\n    left: 10px;\n    height: 160px;\n    margin: 0;\n    margin-top: -10px;\n    font-size: 13px;\n    line-height: 20px;\n    border-radius: 3px;\n    background: #FFFFFF;\n    box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);;\n    transition: top .3s;\n    cursor: pointer;\n    width: auto ;\n    /* width: 230px;\n    overflow:hidden; */\n}\n.vnode .text {\n    padding: 0 10px;\n}\n.pnode::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    left:0;\n    display: inline-block;\n    width: 216px;\n    height: 1px;\n    background: #E1244E;\n}\n.link {\n    fill-opacity: 0;\n}\n.tip {\n    z-index: 999;\n    display: block;\n    padding: 5px;\n    border: 1px solid #eee;\n    line-height: 20px;\n    border-radius: 5px;\n    background: transparent;\n}\n.vnode:hover {\n    z-index: 999;\n}\n.vnode:hover .tip {\n    display: block;\n}\n\n/**ruler部分*/\n.ruler-head {\n    font-size: 14px;\n    text-align: left;\n}\n.ruler-head  span {\n    display: inline-block;\n    width: 50px;\n    text-align: center;\n}\n.ruler {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 100px;\n    margin-top: 10px;\n    margin-left: 10px;\n}\n.ruler-ruler {\n    position: relative;\n    right: 10px;\n    left: 5px;\n    display: inline-block;\n    width: 10px;\n    height: 100px;\n    background: #9a9797;\n}\n.ruler-deg {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    width: 0;\n    width: 0;\n    height: 10px;\n    margin-top: -5px;\n    padding-left: 3px;\n    border-left: 20px solid #666;\n    font-size: 10px;\n    line-height: 10px;\n    text-align: center;\n    color: #666;\n    background: transparent;\n    cursor: row-resize;\n    -webkit-user-select: none; /* Chrome/Safari/Opera */\n       -moz-user-select: none; /* Firefox */\n            user-select: none;\n\n    -webkit-touch-callout: none; /* iOS Safari */\n}\n.vnode .text {\n  position: relative;\n  height: 100%;\n  max-width: 230px;\n}\n.vnode .text .node_title {\n  padding: 3px 11px 0px 11px;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n.vnode .text .node_title .OKR {\n  display: inline-block;\n  width: 35px;\n  height: 35px;\n  border-radius: 50%;\n  color: #fff;\n  line-height: 35px;\n  text-align: center;\n  font-size: 1.2rem;\n}\n.vnode .text .node_title .OKR.pink {\n  background-color: #E1244E;\n}\n.vnode .text .node_title .OKR.blue {\n  background-color: #58C2EF;\n}\n.vnode .text .node_title .label {\n  max-width: 130px;\n  height: 40px;\n  line-height: 40px;\n  overflow: hidden;\n  padding-left: 10px;\n  font-size: 1rem;\n  color: #1F1F1F;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.vnode .text .node_title .label button {\n  overflow: hidden;\n  color: #1F1F1F !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 140px;\n  display: inline-block;\n  line-height: 35px;\n  text-align: left;\n}\n.vnode .text .node_des {\n  display: flex;\n  flex-direction: column;\n  margin-left: 56px;\n  height: 60px;\n  color: #777777;\n  font-size: 12px;\n  justify-content: start;\n}\n.vnode .text .node_des div {\n  width: 140px;\n  text-align: left;\n}\n.vnode .text .node_des div:nth-child(2) {\n  margin-top: 5px;\n}\n.vnode .text .node_progress {\n  position: absolute;\n  width: 200px;\n  bottom: 0px;\n  height: 40px;\n  border-top: 1px solid #D8D8D8;\n  line-height: 40px;\n}\n.vnode .text .node_progress .el-progress {\n  display: inline;\n}\n.vnode .text .node_progress .el-progress .el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n.vnode .text .showTips {\n  position: absolute;\n  left: 225px;\n  top: 0px;\n  opacity: 0;\n}\n.vnode .text .showTips a {\n  display: inline-block;\n}\n.vnode .text .showTips .tips_icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n  text-align: center;\n  text-decoration: none;\n  padding: 3px;\n  background: #FFFFFF;\n  box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n  transition: all 0.5s ease 0s;\n  color: #777777;\n}\n.vnode .text .showTips .tips_icon:hover {\n  color: #58C2EF;\n}\n.vnode .text:hover .showTips {\n  opacity: 1;\n}\n\n.el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n</style>\n\n\n\n\n\n// WEBPACK FOOTER //\n// src/lib/index.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{ref:\"treeContent\",staticClass:\"draw-area\",attrs:{\"id\":\"treeContent\"}},[_vm._l((_vm.levels),function(arr,index){return _c('div',{key:index},_vm._l((arr),function(v,index){return (!v.parent || v.parent.open)?_c('div',{key:index,staticClass:\"vnode\",class:{pnode: v.children && v.children.length > 0},style:('left:' + (v.left) + 'px; top:' + (v.top) + 'px'),on:{\"click\":function($event){return _vm.toggle(v)}}},[_c('div',{staticClass:\"text\"},[_c('div',{staticClass:\"node_title\"},[_c('span',{staticClass:\"OKR\",class:v.tlevel == '0' ? 'pink':'blue'},[_vm._v(\"\\n                          \"+_vm._s(v.tlevel == '0' ? 'C' : 'L')+\"\\n                        \")]),_vm._v(\" \"),_c('span',{staticClass:\"label\"},[_vm._v(\"\\n                          \"+_vm._s(v.name)+\"\\n                        \")])]),_vm._v(\" \"),_c('div',{staticClass:\"node_des\"},[_c('div',[_vm._v(_vm._s(v.content))])]),_vm._v(\" \"),_c('div',{staticClass:\"node_progress\"},[_vm._v(\"\\n                        \"+_vm._s(v.des)+\"\\n                      \")]),_vm._v(\" \"),_vm._m(0,true)])]):_vm._e()}),0)}),_vm._v(\" \"),(_vm.curveness)?_c('svg',{attrs:{\"id\":_vm.svgId}},_vm._l((_vm.list),function(link,index){return (link.deep > 0 && link.parent.open)?_c('line',{staticClass:\"link\",attrs:{\"x1\":link.left + 90,\"y1\":link.top,\"x2\":link.parent.left + 105,\"y2\":link.parent.top + 150,\"stroke\":link.color ? link.color : '#aaa',\"stroke-width\":link.strokeWidth ? link.strokeWidth : '1px'}}):_vm._e()}),0):_vm._e(),_vm._v(\" \"),(!_vm.curveness)?_c('svg',{attrs:{\"id\":_vm.svgId}},_vm._l((_vm.list),function(link,index){return (link.deep > 0 && link.parent.open)?_c('path',{staticClass:\"link\",attrs:{\"d\":link.path,\"stroke\":link.color ? link.color : '#aaa',\"stroke-width\":link.strokeWidth ? link.strokeWidth : '1px'}}):_vm._e()}),0):_vm._e()],2)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"showTips\"},[_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://www.cnblogs.com/calamus\"}},[_vm._v(\"\\n                            B\\n                          \")]),_vm._v(\" \"),_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://www.calamus.xyz\"}},[_vm._v(\"\\n                            C\\n                          \")]),_vm._v(\" \"),_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://github.com/calamus0427\"}},[_vm._v(\"\\n                            G\\n                          \")])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-2fbe735b\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/lib/index.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-2fbe735b\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-2fbe735b\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./index.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/lib/index.vue\n// module id = null\n// module chunks = ","// import VueSvgTree from './index.vue'\n\n// /* istanbul ignore next */\n// VueSvgTree.install = function(Vue) {\n//   Vue.component(VueSvgTree.name, VueSvgTree);\n// }\n\n// export default VueSvgTree\n\nimport VueSvgTree from './index.vue';\nexport default VueSvgTree;\n\nif (typeof window !== 'undefined' && window.Vue) {\n  window.Vue.component(VueSvgTree.name, VueSvgTree);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/index.js"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/static/js/manifest.f13e4d0131d6e7563fda.js:
--------------------------------------------------------------------------------
1 | !function(e){var r=window.webpackJsonpVueSvgtree;window.webpackJsonpVueSvgtree=function(n,u,c){for(var f,i,p,a=0,l=[];a<n.length;a++)i=n[a],t[i]&&l.push(t[i][0]),t[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(e[f]=u[f]);for(r&&r(n,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=o(o.s=c[a]);return p};var n={},t={2:0};function o(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=e,o.c=n,o.d=function(e,r,n){o.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="",o.oe=function(e){throw console.error(e),e}}([]);
2 | //# sourceMappingURL=manifest.f13e4d0131d6e7563fda.js.map


--------------------------------------------------------------------------------
/dist/static/js/manifest.f13e4d0131d6e7563fda.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap b7622878698690c62b75"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,uBACAA,OAAA,gCAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,GAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.f13e4d0131d6e7563fda.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonpVueSvgtree\"];\n \twindow[\"webpackJsonpVueSvgtree\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap b7622878698690c62b75"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/static/js/vendor.23b2cff6f2751bc97233.js:
--------------------------------------------------------------------------------
1 | webpackJsonpVueSvgtree([0],{FeBl:function(e,t){var n=e.exports={version:"2.6.5"};"number"==typeof __e&&(__e=n)},"VU/8":function(e,t){e.exports=function(e,t,n,r,o,s){var i,f=e=e||{},_=typeof e.default;"object"!==_&&"function"!==_||(i=e,f=e.default);var a,c="function"==typeof f?f.options:f;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o),s?(a=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=a):r&&(a=r),a){var d=c.functional,u=d?c.render:c.beforeCreate;d?(c._injectStyles=a,c.render=function(e,t){return a.call(t),u(e,t)}):c.beforeCreate=u?[].concat(u,a):[a]}return{esModule:i,exports:f,options:c}}},mvHQ:function(e,t,n){e.exports={default:n("qkKv"),__esModule:!0}},qkKv:function(e,t,n){var r=n("FeBl"),o=r.JSON||(r.JSON={stringify:JSON.stringify});e.exports=function(e){return o.stringify.apply(o,arguments)}}});
2 | //# sourceMappingURL=vendor.23b2cff6f2751bc97233.js.map


--------------------------------------------------------------------------------
/dist/static/js/vendor.23b2cff6f2751bc97233.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///./node_modules/core-js/library/modules/_core.js","webpack:///./node_modules/vue-loader/lib/component-normalizer.js","webpack:///./node_modules/babel-runtime/core-js/json/stringify.js","webpack:///./node_modules/core-js/library/fn/json/stringify.js"],"names":["core","module","exports","version","__e","rawScriptExports","compiledTemplate","functionalTemplate","injectStyles","scopeId","moduleIdentifier","esModule","scriptExports","type","default","hook","options","render","staticRenderFns","_compiled","functional","_scopeId","context","this","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","existing","beforeCreate","_injectStyles","h","concat","__webpack_require__","__esModule","$JSON","JSON","stringify","it","apply","arguments"],"mappings":"+CAAA,IAAAA,EAAAC,EAAAC,SAA6BC,QAAA,SAC7B,iBAAAC,UAAAJ,yBCKAC,EAAAC,QAAA,SACAG,EACAC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAAC,EACAC,EAAAP,QAGAQ,SAAAR,EAAAS,QACA,WAAAD,GAAA,aAAAA,IACAF,EAAAN,EACAO,EAAAP,EAAAS,SAIA,IAqBAC,EArBAC,EAAA,mBAAAJ,EACAA,EAAAI,QACAJ,EA+CA,GA5CAN,IACAU,EAAAC,OAAAX,EAAAW,OACAD,EAAAE,gBAAAZ,EAAAY,gBACAF,EAAAG,WAAA,GAIAZ,IACAS,EAAAI,YAAA,GAIAX,IACAO,EAAAK,SAAAZ,GAIAC,GACAK,EAAA,SAAAO,IAEAA,EACAA,GACAC,KAAAC,QAAAD,KAAAC,OAAAC,YACAF,KAAAG,QAAAH,KAAAG,OAAAF,QAAAD,KAAAG,OAAAF,OAAAC,aAEA,oBAAAE,sBACAL,EAAAK,qBAGAnB,GACAA,EAAAoB,KAAAL,KAAAD,GAGAA,KAAAO,uBACAP,EAAAO,sBAAAC,IAAApB,IAKAM,EAAAe,aAAAhB,GACGP,IACHO,EAAAP,GAGAO,EAAA,CACA,IAAAK,EAAAJ,EAAAI,WACAY,EAAAZ,EACAJ,EAAAC,OACAD,EAAAiB,aAEAb,GAQAJ,EAAAkB,cAAAnB,EAEAC,EAAAC,OAAA,SAAAkB,EAAAb,GAEA,OADAP,EAAAa,KAAAN,GACAU,EAAAG,EAAAb,KAVAN,EAAAiB,aAAAD,KACAI,OAAAJ,EAAAjB,IACAA,GAaA,OACAJ,WACAT,QAAAU,EACAI,kCCpGAf,EAAAC,SAAkBY,QAAYuB,EAAQ,QAAmCC,YAAA,yBCAzE,IAAAtC,EAAWqC,EAAQ,QACnBE,EAAAvC,EAAAwC,OAAAxC,EAAAwC,MAAuCC,UAAAD,KAAAC,YACvCxC,EAAAC,QAAA,SAAAwC,GACA,OAAAH,EAAAE,UAAAE,MAAAJ,EAAAK","file":"static/js/vendor.23b2cff6f2751bc97233.js","sourcesContent":["var core = module.exports = { version: '2.6.5' };\nif (typeof __e == 'number') __e = core; // eslint-disable-line no-undef\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/modules/_core.js\n// module id = FeBl\n// module chunks = 0","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n  rawScriptExports,\n  compiledTemplate,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier /* server only */\n) {\n  var esModule\n  var scriptExports = rawScriptExports = rawScriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof rawScriptExports.default\n  if (type === 'object' || type === 'function') {\n    esModule = rawScriptExports\n    scriptExports = rawScriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (compiledTemplate) {\n    options.render = compiledTemplate.render\n    options.staticRenderFns = compiledTemplate.staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = injectStyles\n  }\n\n  if (hook) {\n    var functional = options.functional\n    var existing = functional\n      ? options.render\n      : options.beforeCreate\n\n    if (!functional) {\n      // inject component registration as beforeCreate hook\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    } else {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return existing(h, context)\n      }\n    }\n  }\n\n  return {\n    esModule: esModule,\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/component-normalizer.js\n// module id = VU/8\n// module chunks = 0","module.exports = { \"default\": require(\"core-js/library/fn/json/stringify\"), __esModule: true };\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/babel-runtime/core-js/json/stringify.js\n// module id = mvHQ\n// module chunks = 0","var core = require('../../modules/_core');\nvar $JSON = core.JSON || (core.JSON = { stringify: JSON.stringify });\nmodule.exports = function stringify(it) { // eslint-disable-line no-unused-vars\n  return $JSON.stringify.apply($JSON, arguments);\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/core-js/library/fn/json/stringify.js\n// module id = qkKv\n// module chunks = 0"],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/vue-svg-tree.min.css:
--------------------------------------------------------------------------------
1 | body,html{padding:0;margin:0;height:100%;font-size:14px}.draw-area{position:relative;width:100%;height:calc(100vh - 100px);margin:40px auto}svg{z-index:0}.vnode{position:absolute;z-index:100;top:10px;left:10px;height:160px;margin:0;margin-top:-10px;font-size:13px;line-height:20px;border-radius:3px;background:#fff;box-shadow:1px 2px 10px 3px rgba(0,0,0,.08);transition:top .3s;cursor:pointer;width:auto}.vnode .text{padding:0 10px}.pnode:after{content:"";position:absolute;bottom:0;left:0;display:inline-block;width:216px;height:1px;background:#e1244e}.link{fill-opacity:0}.tip{display:block;padding:5px;border:1px solid #eee;line-height:20px;border-radius:5px;background:transparent}.tip,.vnode:hover{z-index:999}.vnode:hover .tip{display:block}.ruler-head{font-size:14px;text-align:left}.ruler-head span{display:inline-block;width:50px;text-align:center}.ruler{width:44px;margin-top:10px;margin-left:10px}.ruler,.ruler-ruler{position:relative;display:inline-block;height:100px}.ruler-ruler{right:10px;left:5px;width:10px;background:#9a9797}.ruler-deg{position:absolute;top:50px;left:0;width:0;height:10px;margin-top:-5px;padding-left:3px;border-left:20px solid #666;font-size:10px;line-height:10px;text-align:center;color:#666;background:transparent;cursor:row-resize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.vnode .text{position:relative;height:100%;max-width:230px}.vnode .text .node_title{padding:3px 11px 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.vnode .text .node_title .OKR{display:inline-block;width:35px;height:35px;border-radius:50%;color:#fff;line-height:35px;text-align:center;font-size:1.2rem}.vnode .text .node_title .OKR.pink{background-color:#e1244e}.vnode .text .node_title .OKR.blue{background-color:#58c2ef}.vnode .text .node_title .label{max-width:130px;height:40px;line-height:40px;padding-left:10px;font-size:1rem;color:#1f1f1f}.vnode .text .node_title .label,.vnode .text .node_title .label button{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.vnode .text .node_title .label button{color:#1f1f1f!important;width:140px;line-height:35px;text-align:left}.vnode .text .node_des{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:56px;height:60px;color:#777;font-size:12px;-ms-flex-pack:start;justify-content:start}.vnode .text .node_des div{width:140px;text-align:left}.vnode .text .node_des div:nth-child(2){margin-top:5px}.vnode .text .node_progress{position:absolute;width:200px;bottom:0;height:40px;border-top:1px solid #d8d8d8;line-height:40px}.vnode .text .node_progress .el-progress{display:inline}.vnode .text .node_progress .el-progress .el-progress__text{font-size:12px!important;color:#777!important}.vnode .text .showTips{position:absolute;left:225px;top:0;opacity:0}.vnode .text .showTips a{display:inline-block}.vnode .text .showTips .tips_icon{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;text-decoration:none;padding:3px;background:#fff;box-shadow:1px 2px 10px 3px rgba(0,0,0,.08);transition:all .5s ease 0s;color:#777}.vnode .text .showTips .tips_icon:hover{color:#58c2ef}.vnode .text:hover .showTips{opacity:1}.el-progress__text{font-size:12px!important;color:#777!important}
2 | /*# sourceMappingURL=vue-svg-tree.min.css.map */


--------------------------------------------------------------------------------
/dist/vue-svg-tree.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["vue-svg-tree.min.css"],"names":[],"mappings":"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","file":"vue-svg-tree.min.css","sourcesContent":["\nhtml, body {\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  font-size: 14px;\n}\n.draw-area {\n    position: relative;\n    width:100%;\n    height:calc( 100vh - 100px );\n    margin:40px auto;\n}\nsvg {\n    z-index: 0;\n}\n.vnode {\n    position: absolute;\n    z-index: 100;\n    top: 10px;\n    left: 10px;\n    height: 160px;\n    margin: 0;\n    margin-top: -10px;\n    font-size: 13px;\n    line-height: 20px;\n    border-radius: 3px;\n    background: #FFFFFF;\n    -webkit-box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);\n            box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);;\n    -webkit-transition: top .3s;;\n    transition: top .3s;\n    cursor: pointer;\n    width: auto ;\n    /* width: 230px;\n    overflow:hidden; */\n}\n.vnode .text {\n    padding: 0 10px;\n}\n.pnode::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    left:0;\n    display: inline-block;\n    width: 216px;\n    height: 1px;\n    background: #E1244E;\n}\n.link {\n    fill-opacity: 0;\n}\n.tip {\n    z-index: 999;\n    display: block;\n    padding: 5px;\n    border: 1px solid #eee;\n    line-height: 20px;\n    border-radius: 5px;\n    background: transparent;\n}\n.vnode:hover {\n    z-index: 999;\n}\n.vnode:hover .tip {\n    display: block;\n}\n/**ruler部分*/\n.ruler-head {\n    font-size: 14px;\n    text-align: left;\n}\n.ruler-head  span {\n    display: inline-block;\n    width: 50px;\n    text-align: center;\n}\n.ruler {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 100px;\n    margin-top: 10px;\n    margin-left: 10px;\n}\n.ruler-ruler {\n    position: relative;\n    right: 10px;\n    left: 5px;\n    display: inline-block;\n    width: 10px;\n    height: 100px;\n    background: #9a9797;\n}\n.ruler-deg {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    width: 0;\n    width: 0;\n    height: 10px;\n    margin-top: -5px;\n    padding-left: 3px;\n    border-left: 20px solid #666;\n    font-size: 10px;\n    line-height: 10px;\n    text-align: center;\n    color: #666;\n    background: transparent;\n    cursor: row-resize;\n    -webkit-user-select: none; /* Chrome/Safari/Opera */\n       -moz-user-select: none; /* Firefox */\n            -ms-user-select: none;\n        user-select: none;\n\n    -webkit-touch-callout: none; /* iOS Safari */\n}\n.vnode .text {\n  position: relative;\n  height: 100%;\n  max-width: 230px;\n}\n.vnode .text .node_title {\n  padding: 3px 11px 0px 11px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n.vnode .text .node_title .OKR {\n  display: inline-block;\n  width: 35px;\n  height: 35px;\n  border-radius: 50%;\n  color: #fff;\n  line-height: 35px;\n  text-align: center;\n  font-size: 1.2rem;\n}\n.vnode .text .node_title .OKR.pink {\n  background-color: #E1244E;\n}\n.vnode .text .node_title .OKR.blue {\n  background-color: #58C2EF;\n}\n.vnode .text .node_title .label {\n  max-width: 130px;\n  height: 40px;\n  line-height: 40px;\n  overflow: hidden;\n  padding-left: 10px;\n  font-size: 1rem;\n  color: #1F1F1F;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.vnode .text .node_title .label button {\n  overflow: hidden;\n  color: #1F1F1F !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 140px;\n  display: inline-block;\n  line-height: 35px;\n  text-align: left;\n}\n.vnode .text .node_des {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  margin-left: 56px;\n  height: 60px;\n  color: #777777;\n  font-size: 12px;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: start;\n}\n.vnode .text .node_des div {\n  width: 140px;\n  text-align: left;\n}\n.vnode .text .node_des div:nth-child(2) {\n  margin-top: 5px;\n}\n.vnode .text .node_progress {\n  position: absolute;\n  width: 200px;\n  bottom: 0px;\n  height: 40px;\n  border-top: 1px solid #D8D8D8;\n  line-height: 40px;\n}\n.vnode .text .node_progress .el-progress {\n  display: inline;\n}\n.vnode .text .node_progress .el-progress .el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n.vnode .text .showTips {\n  position: absolute;\n  left: 225px;\n  top: 0px;\n  opacity: 0;\n}\n.vnode .text .showTips a {\n  display: inline-block;\n}\n.vnode .text .showTips .tips_icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n  text-align: center;\n  text-decoration: none;\n  padding: 3px;\n  background: #FFFFFF;\n  -webkit-box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n          box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n  -webkit-transition: all 0.5s ease 0s;\n  transition: all 0.5s ease 0s;\n  color: #777777;\n}\n.vnode .text .showTips .tips_icon:hover {\n  color: #58C2EF;\n}\n.vnode .text:hover .showTips {\n  opacity: 1;\n}\n.el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n"]}


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-pack-try</title><link href=./static/css/app.dd870e83d2d18ad7e43a150936800b79.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.643b326d854820d6ddbb.js></script><script type=text/javascript src=./static/js/app.5c5463d855fa5c7c0f66.js></script></body></html>


--------------------------------------------------------------------------------
/example/static/css/app.dd870e83d2d18ad7e43a150936800b79.css:
--------------------------------------------------------------------------------
1 | #app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}h1[data-v-3e5cda44],h2[data-v-3e5cda44]{font-weight:400}ul[data-v-3e5cda44]{list-style-type:none;padding:0}li[data-v-3e5cda44]{display:inline-block;margin:0 10px}a[data-v-3e5cda44]{color:#42b983}body,html{padding:0;margin:0;height:100%;font-size:14px}.draw-area{position:relative;width:100%;height:calc(100vh - 100px);margin:40px auto}svg{z-index:0}.vnode{position:absolute;z-index:100;top:10px;left:10px;height:160px;margin:0;margin-top:-10px;font-size:13px;line-height:20px;border-radius:3px;background:#fff;box-shadow:1px 2px 10px 3px rgba(0,0,0,.08);transition:top .3s;cursor:pointer;width:auto}.vnode .text{padding:0 10px}.pnode:after{content:"";position:absolute;bottom:0;left:0;display:inline-block;width:216px;height:1px;background:#e1244e}.link{fill-opacity:0}.tip{display:block;padding:5px;border:1px solid #eee;line-height:20px;border-radius:5px;background:transparent}.tip,.vnode:hover{z-index:999}.vnode:hover .tip{display:block}.ruler-head{font-size:14px;text-align:left}.ruler-head span{display:inline-block;width:50px;text-align:center}.ruler{width:44px;margin-top:10px;margin-left:10px}.ruler,.ruler-ruler{position:relative;display:inline-block;height:100px}.ruler-ruler{right:10px;left:5px;width:10px;background:#9a9797}.ruler-deg{position:absolute;top:50px;left:0;width:0;height:10px;margin-top:-5px;padding-left:3px;border-left:20px solid #666;font-size:10px;line-height:10px;text-align:center;color:#666;background:transparent;cursor:row-resize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.vnode .text{position:relative;height:100%;max-width:230px}.vnode .text .node_title{padding:3px 11px 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.vnode .text .node_title .OKR{display:inline-block;width:35px;height:35px;border-radius:50%;color:#fff;line-height:35px;text-align:center;font-size:1.2rem}.vnode .text .node_title .OKR.pink{background-color:#e1244e}.vnode .text .node_title .OKR.blue{background-color:#58c2ef}.vnode .text .node_title .label{max-width:130px;height:40px;line-height:40px;padding-left:10px;font-size:1rem;color:#1f1f1f}.vnode .text .node_title .label,.vnode .text .node_title .label button{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.vnode .text .node_title .label button{color:#1f1f1f!important;width:140px;line-height:35px;text-align:left}.vnode .text .node_des{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:56px;height:60px;color:#777;font-size:12px;-ms-flex-pack:start;justify-content:start}.vnode .text .node_des div{width:140px;text-align:left}.vnode .text .node_des div:nth-child(2){margin-top:5px}.vnode .text .node_progress{position:absolute;width:200px;bottom:0;height:40px;border-top:1px solid #d8d8d8;line-height:40px}.vnode .text .node_progress .el-progress{display:inline}.vnode .text .node_progress .el-progress .el-progress__text{font-size:12px!important;color:#777!important}.vnode .text .showTips{position:absolute;left:225px;top:0;opacity:0}.vnode .text .showTips a{display:inline-block}.vnode .text .showTips .tips_icon{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;text-decoration:none;padding:3px;background:#fff;box-shadow:1px 2px 10px 3px rgba(0,0,0,.08);transition:all .5s ease 0s;color:#777}.vnode .text .showTips .tips_icon:hover{color:#58c2ef}.vnode .text:hover .showTips{opacity:1}.el-progress__text{font-size:12px!important;color:#777!important}
2 | /*# sourceMappingURL=app.dd870e83d2d18ad7e43a150936800b79.css.map */


--------------------------------------------------------------------------------
/example/static/css/app.dd870e83d2d18ad7e43a150936800b79.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["app.dd870e83d2d18ad7e43a150936800b79.css"],"names":[],"mappings":"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","file":"app.dd870e83d2d18ad7e43a150936800b79.css","sourcesContent":["\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #2c3e50;\n}\n\nh1[data-v-3e5cda44], h2[data-v-3e5cda44] {\n  font-weight: normal;\n}\nul[data-v-3e5cda44] {\n  list-style-type: none;\n  padding: 0;\n}\nli[data-v-3e5cda44] {\n  display: inline-block;\n  margin: 0 10px;\n}\na[data-v-3e5cda44] {\n  color: #42b983;\n}\n\nhtml, body {\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  font-size: 14px;\n}\n.draw-area {\n    position: relative;\n    width:100%;\n    height:calc( 100vh - 100px );\n    margin:40px auto;\n}\nsvg {\n    z-index: 0;\n}\n.vnode {\n    position: absolute;\n    z-index: 100;\n    top: 10px;\n    left: 10px;\n    height: 160px;\n    margin: 0;\n    margin-top: -10px;\n    font-size: 13px;\n    line-height: 20px;\n    border-radius: 3px;\n    background: #FFFFFF;\n    -webkit-box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);\n            box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);;\n    -webkit-transition: top .3s;;\n    transition: top .3s;\n    cursor: pointer;\n    width: auto ;\n    /* width: 230px;\n    overflow:hidden; */\n}\n.vnode .text {\n    padding: 0 10px;\n}\n.pnode::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    left:0;\n    display: inline-block;\n    width: 216px;\n    height: 1px;\n    background: #E1244E;\n}\n.link {\n    fill-opacity: 0;\n}\n.tip {\n    z-index: 999;\n    display: block;\n    padding: 5px;\n    border: 1px solid #eee;\n    line-height: 20px;\n    border-radius: 5px;\n    background: transparent;\n}\n.vnode:hover {\n    z-index: 999;\n}\n.vnode:hover .tip {\n    display: block;\n}\n/**ruler部分*/\n.ruler-head {\n    font-size: 14px;\n    text-align: left;\n}\n.ruler-head  span {\n    display: inline-block;\n    width: 50px;\n    text-align: center;\n}\n.ruler {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 100px;\n    margin-top: 10px;\n    margin-left: 10px;\n}\n.ruler-ruler {\n    position: relative;\n    right: 10px;\n    left: 5px;\n    display: inline-block;\n    width: 10px;\n    height: 100px;\n    background: #9a9797;\n}\n.ruler-deg {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    width: 0;\n    width: 0;\n    height: 10px;\n    margin-top: -5px;\n    padding-left: 3px;\n    border-left: 20px solid #666;\n    font-size: 10px;\n    line-height: 10px;\n    text-align: center;\n    color: #666;\n    background: transparent;\n    cursor: row-resize;\n    -webkit-user-select: none; /* Chrome/Safari/Opera */\n       -moz-user-select: none; /* Firefox */\n            -ms-user-select: none;\n        user-select: none;\n\n    -webkit-touch-callout: none; /* iOS Safari */\n}\n.vnode .text {\n  position: relative;\n  height: 100%;\n  max-width: 230px;\n}\n.vnode .text .node_title {\n  padding: 3px 11px 0px 11px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n.vnode .text .node_title .OKR {\n  display: inline-block;\n  width: 35px;\n  height: 35px;\n  border-radius: 50%;\n  color: #fff;\n  line-height: 35px;\n  text-align: center;\n  font-size: 1.2rem;\n}\n.vnode .text .node_title .OKR.pink {\n  background-color: #E1244E;\n}\n.vnode .text .node_title .OKR.blue {\n  background-color: #58C2EF;\n}\n.vnode .text .node_title .label {\n  max-width: 130px;\n  height: 40px;\n  line-height: 40px;\n  overflow: hidden;\n  padding-left: 10px;\n  font-size: 1rem;\n  color: #1F1F1F;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.vnode .text .node_title .label button {\n  overflow: hidden;\n  color: #1F1F1F !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 140px;\n  display: inline-block;\n  line-height: 35px;\n  text-align: left;\n}\n.vnode .text .node_des {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  margin-left: 56px;\n  height: 60px;\n  color: #777777;\n  font-size: 12px;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: start;\n}\n.vnode .text .node_des div {\n  width: 140px;\n  text-align: left;\n}\n.vnode .text .node_des div:nth-child(2) {\n  margin-top: 5px;\n}\n.vnode .text .node_progress {\n  position: absolute;\n  width: 200px;\n  bottom: 0px;\n  height: 40px;\n  border-top: 1px solid #D8D8D8;\n  line-height: 40px;\n}\n.vnode .text .node_progress .el-progress {\n  display: inline;\n}\n.vnode .text .node_progress .el-progress .el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n.vnode .text .showTips {\n  position: absolute;\n  left: 225px;\n  top: 0px;\n  opacity: 0;\n}\n.vnode .text .showTips a {\n  display: inline-block;\n}\n.vnode .text .showTips .tips_icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n  text-align: center;\n  text-decoration: none;\n  padding: 3px;\n  background: #FFFFFF;\n  -webkit-box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n          box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n  -webkit-transition: all 0.5s ease 0s;\n  transition: all 0.5s ease 0s;\n  color: #777777;\n}\n.vnode .text .showTips .tips_icon:hover {\n  color: #58C2EF;\n}\n.vnode .text:hover .showTips {\n  opacity: 1;\n}\n.el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n"]}


--------------------------------------------------------------------------------
/example/static/js/app.5c5463d855fa5c7c0f66.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([1],{NHnr:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=a("7+uW"),l={render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"app"}},[t("router-view")],1)},staticRenderFns:[]};var i=a("VU/8")({name:"App"},l,!1,function(e){a("W43E")},null,null).exports,r=a("/ocq"),o=a("vp0u"),s=[{id:100,name:"Calamus",des:"www.calamus.xyz",color:"#E1244E",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,delay:120,fatherId:0,tlevel:1},{id:101,name:"Calamus1",des:"www.calamus.xyz",color:"#E1244E",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:0,fatherId:100,tlevel:1},{id:102,name:"Calamus2",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:100,fatherId:100,tlevel:0},{id:103,name:"Calamus3",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:100,tlevel:0},{id:104,name:"Calamus4",des:"www.calamus.xyz",color:"#E1244E",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:200,fatherId:100,tlevel:0},{id:105,name:"Calamus5",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:101,tlevel:0},{id:106,name:"Calamus6",des:"www.calamus.xyz",color:"#E1244E",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:107,name:"Calamus7",des:"www.calamus.xyz",color:"#E1244E",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:108,name:"Calamus8",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:109,name:"Calamus9",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:110,name:"Calamus10",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:111,name:"Calamus11",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:102,tlevel:0},{id:112,name:"Calamus12",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:300,fatherId:103,tlevel:0},{id:113,name:"Calamus13",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:103,tlevel:0},{id:114,name:"Calamus14",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:108,tlevel:0},{id:116,name:"Calamus15",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:108,tlevel:0},{id:117,name:"Calamus16",des:"www.calamus.xyz",color:"#aaa",content:"你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你",value:123,fatherId:108,tlevel:0}];s.forEach(function(e){e.delay||(e.delay=200*Math.random())});var c=s,d={name:"HelloWorld",components:{VueSvgTree:o.a},data:function(){return{msg:"Welcome to Your Vue.js App",treeData:c}}},h={render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-svg-tree",{ref:"svgTree",attrs:{treeData:this.treeData,svgId:"svg"}})],1)},staticRenderFns:[]};var u=a("VU/8")(d,h,!1,function(e){a("xeEF")},"data-v-3e5cda44",null).exports;n.a.use(r.a);var p=new r.a({routes:[{path:"/",name:"HelloWorld",component:u}]});n.a.config.productionTip=!1,new n.a({el:"#app",router:p,components:{App:i},template:"<App/>"})},W43E:function(e,t){},ayXY:function(e,t){},ue7O:function(e,t,a){"use strict";var n=a("mvHQ"),l=a.n(n),i={name:"VueSvgTree",data:function(){return{rules:{min:200,max:350},delayRules:{min:10,max:300},root:null,list:null,levels:null}},props:{treeData:{type:Array},direction:{type:String,default:"row"},svgId:{type:String,default:"svg"},curveness:{type:Boolean,default:!1}},mounted:function(){this.treeData&&this.treeData.length>0&&this.initData(JSON.parse(l()(this.treeData)))},watch:{treeData:function(e){e&&e.length>0&&this.initData(JSON.parse(l()(e)))}},methods:{compare:function(e,t){return e.deep!==t.deep?e.deep-t.deep:e.parent===t.parent?e.id-t.id:this.compare(e.parent,t.parent)},initData:function(e){var t=this;console.log("data",e);var a={},n=null,l=[];(e||e.length>0)&&(e.forEach(function(e){a[e.id]=e,e.deep=0,e.top=0,e.height=0,e.width=0,e.path="",e.left=0,e.prev=null}),e.forEach(function(e){if(e.fatherId||e.fatherId>0){var l=a[e.fatherId];l.children=l.children||[],l.children.push(e),e.parent=l,e.deep=l.deep+1,e.left="col"==t.direction?300*e.deep+10:0,e.top="row"==t.direction?250*e.deep+5:0,e.open=e.deep<1,e.show=e.deep<2}else n=e,e.open=!0,e.show=!0}),e.sort(this.compare),e.forEach(function(e){l[e.deep]=l[e.deep]||[],l[e.deep].push(e),e.prev=l[e.deep][l[e.deep].length-2]}),this.root=n,this.list=e,console.log("daya",e),this.levels=l,"col"==this.direction?(this.calcHeight(n),this.calcTop(),this.calSvg()):(this.calWidth(n),this.calcLeft(),this.calSvgVer()))},calcHeight:function(e){var t=this,a=0;e.parent&&!e.parent.open?(e.height=0,e.open=!1):e.open||(e.height=50),e.children&&e.children.length>0&&e.children.forEach(function(e){t.calcHeight(e),a+=e.height}),e.open&&(e.height=a||50)},calWidth:function(e){var t=this,a=0;e.parent&&!e.parent.open?(e.height=0,e.width=0,e.open=!1):e.open||(e.width=300),e.children&&e.children.length>0&&e.children.forEach(function(e){t.calWidth(e),a+=e.width}),e.open&&(e.width=a||300)},calSvg:function(){var e=this;this.$nextTick(function(){e.levels.flat(1/0).filter(function(e){return e.show}).sort(function(e,t){return t.top-e.top})[0].top;var t=document.getElementById(e.svgId);console.log("svg",t),t.setAttribute("height",500),t.setAttribute("width",700),e.$emit("toggle",e.$refs.treeContent.scrollWidth,e.root.height)})},calSvgVer:function(){var e=this;this.$nextTick(function(){e.levels.flat(1/0).filter(function(e){return e.show}).sort(function(e,t){return t.top-e.top})[0].top;var t=document.getElementById(e.svgId);t.setAttribute("height",e.$refs.treeContent.scrollHeight),t.setAttribute("width",e.root.width),e.$emit("toggle",{width:e.root.width,height:e.$refs.treeContent.scrollHeight})})},calcTop:function(e,t){if(e||(e=this.root),t=t||0,e.top=t+e.height/2,e.children&&e.children.length>0)for(var a=0;a<e.children.length;a++){var n=e.children[a].height;this.calcTop(e.children[a],t),t+=n}if(e.parent){var l=e.parent.left+300-40,i=e.parent.top,r=(e.left+l)/2;e.top;e.path="M"+e.left+","+e.top+" C "+r+" "+e.top+","+r+" "+i+","+l+" "+i+"L "+(e.parent.left+10)+","+i}},calcLeft:function(e,t){if(e||(e=this.root),t=t||0,e.left=t+e.width/2,e.children&&e.children.length>0)for(var a=0;a<e.children.length;a++){var n=e.children[a].width;this.calcLeft(e.children[a],t),t+=n}if(e.parent){var l=e.parent.left+115,i=e.parent.top+150,r=e.left+115,o=e.top,s=(l+r)/2,c=r>l?r+5:r-5;e.path=r==l?"M"+r+","+o+"  L "+l+","+i:"M"+r+","+o+" Q "+c+","+(o-30)+" "+s+","+(o-30)+" T "+l+","+i}},toggle:function(e){e.open=!e.open,console.log("vnode",e),e.children&&e.children.map(function(e){e.show=!e.show}),"col"==this.direction?(this.calcHeight(this.root),this.calcTop(),this.calSvg()):(this.calWidth(this.root),this.calcLeft(),this.calSvgVer()),console.log("toggle:",e,e.open)},showDetail:function(e){delete e.children,this.$emit("detail",e)},addTarget:function(e){delete e.children,console.log("1111111",e),this.$emit("add",e)},editTarget:function(e){delete e.children,console.log("2222222",e),this.$emit("edit",e)},detailTarget:function(e){delete e.children,this.$emit("detail",e)},refreshTarget:function(e){delete e.children,console.log("3333333",e),this.$emit("refresh",e)}}},r={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{attrs:{id:"app"}},[a("div",{ref:"treeContent",staticClass:"draw-area",attrs:{id:"treeContent"}},[e._l(e.levels,function(t,n){return a("div",{key:n},e._l(t,function(t,n){return!t.parent||t.parent.open?a("div",{key:n,staticClass:"vnode",class:{pnode:t.children&&t.children.length>0},style:"left:"+t.left+"px; top:"+t.top+"px",on:{click:function(a){return e.toggle(t)}}},[a("div",{staticClass:"text"},[a("div",{staticClass:"node_title"},[a("span",{staticClass:"OKR",class:"0"==t.tlevel?"pink":"blue"},[e._v("\n                          "+e._s("0"==t.tlevel?"C":"L")+"\n                        ")]),e._v(" "),a("span",{staticClass:"label"},[e._v("\n                          "+e._s(t.name)+"\n                        ")])]),e._v(" "),a("div",{staticClass:"node_des"},[a("div",[e._v(e._s(t.content))])]),e._v(" "),a("div",{staticClass:"node_progress"},[e._v("\n                        "+e._s(t.des)+"\n                      ")]),e._v(" "),e._m(0,!0)])]):e._e()}),0)}),e._v(" "),e.curveness?a("svg",{attrs:{id:e.svgId}},e._l(e.list,function(t,n){return t.deep>0&&t.parent.open?a("line",{staticClass:"link",attrs:{x1:t.left+90,y1:t.top,x2:t.parent.left+105,y2:t.parent.top+150,stroke:t.color?t.color:"#aaa","stroke-width":t.strokeWidth?t.strokeWidth:"1px"}}):e._e()}),0):e._e(),e._v(" "),e.curveness?e._e():a("svg",{attrs:{id:e.svgId}},e._l(e.list,function(t,n){return t.deep>0&&t.parent.open?a("path",{staticClass:"link",attrs:{d:t.path,stroke:t.color?t.color:"#aaa","stroke-width":t.strokeWidth?t.strokeWidth:"1px"}}):e._e()}),0)],2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"showTips"},[t("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://www.cnblogs.com/calamus"}},[this._v("\n                            B\n                          ")]),this._v(" "),t("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://www.calamus.xyz"}},[this._v("\n                            C\n                          ")]),this._v(" "),t("a",{staticClass:"tips_icon icon_edit ",attrs:{target:"_blank",href:"https://github.com/calamus0427"}},[this._v("\n                            G\n                          ")])])}]};var o=a("VU/8")(i,r,!1,function(e){a("ayXY")},null,null);t.a=o.exports},xeEF:function(e,t){}},["NHnr"]);
2 | //# sourceMappingURL=app.5c5463d855fa5c7c0f66.js.map


--------------------------------------------------------------------------------
/example/static/js/app.5c5463d855fa5c7c0f66.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///./src/App.vue?012a","webpack:///./src/App.vue","webpack:///src/App.vue","webpack:///./src/components/list.js","webpack:///src/components/HelloWorld.vue","webpack:///./src/components/HelloWorld.vue?32ab","webpack:///./src/components/HelloWorld.vue","webpack:///./src/router/index.js","webpack:///./src/main.js","webpack:///node_modules/vue-svg-tree/src/lib/index.vue","webpack:///./node_modules/vue-svg-tree/src/lib/index.vue?ba7c","webpack:///./node_modules/vue-svg-tree/src/lib/index.vue"],"names":["selectortype_template_index_0_src_App","render","_h","this","$createElement","_c","_self","attrs","id","staticRenderFns","src_App","__webpack_require__","normalizeComponent","name","ssrContext","listData","des","color","content","value","delay","fatherId","tlevel","forEach","v","Math","random","list","HelloWorld","components","VueSvgTree","lib","data","msg","treeData","components_HelloWorld","ref","svgId","src_components_HelloWorld","HelloWorld_normalizeComponent","Vue","use","Router","router","routes","path","component","config","productionTip","el","App","template","rules","min","max","delayRules","root","levels","props","type","Array","direction","String","default","curveness","Boolean","mounted","length","initData","JSON","parse","stringify_default","watch","val","methods","compare","v1","v2","deep","parent","_this","console","log","keys","top","height","width","left","prev","p","children","push","open","show","sort","calcHeight","calcTop","calSvg","calWidth","calcLeft","calSvgVer","vnode","me","_this2","$nextTick","flat","Infinity","filter","item","a","b","svg","document","getElementById","setAttribute","$emit","$refs","treeContent","scrollWidth","_this3","scrollHeight","prevHeight","i","pLeft","pTop","mLeft","prevWidth","vLeft","vTop","x1","toggle","map","child","showDetail","addTarget","editTarget","detailTarget","refreshTarget","src_lib","_vm","staticClass","_l","arr","index","key","class","pnode","style","on","click","$event","_v","_s","_m","_e","link","y1","x2","y2","stroke","stroke-width","strokeWidth","d","target","href","Component","__webpack_exports__"],"mappings":"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","file":"static/js/app.5c5463d855fa5c7c0f66.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('router-view')],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-0dc5660f\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0dc5660f\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\nimport __vue_script__ from \"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-0dc5660f\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = null\n// module chunks = ","<template>\n  <div id=\"app\">\n    <router-view/>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App'\n}\n</script>\n\n<style>\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #2c3e50;\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/App.vue","var listData = [\n  {id: 100, name: 'Calamus',  des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你', value: 123, delay: 120, fatherId: 0,tlevel:1},\n  {id: 101, name: 'Calamus1', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 0, fatherId: 100,tlevel:1},\n  {id: 102, name: 'Calamus2', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 100, fatherId: 100,tlevel:0},\n  {id: 103, name: 'Calamus3', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 100,tlevel:0},\n  {id: 104, name: 'Calamus4', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 200, fatherId: 100,tlevel:0},\n  {id: 105, name: 'Calamus5', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 101,tlevel:0},\n  {id: 106, name: 'Calamus6', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 107, name: 'Calamus7', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 108, name: 'Calamus8', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 109, name: 'Calamus9', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 110, name: 'Calamus10', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 111, name: 'Calamus11', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},\n  {id: 112, name: 'Calamus12', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 300, fatherId: 103,tlevel:0},\n  {id: 113, name: 'Calamus13', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 103,tlevel:0},\n  {id: 114, name: 'Calamus14', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},\n  {id: 116, name: 'Calamus15', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},\n  {id: 117, name: 'Calamus16', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},\n];\nlistData.forEach(function (v) {\n  if (!v.delay) {\n      v.delay = 200 * Math.random();\n  }\n});\nexport const list = listData\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/list.js","<template>\n  <div>\n    <vue-svg-tree\n        :treeData=\"treeData\"\n        svgId='svg'\n        ref=\"svgTree\"\n      ></vue-svg-tree>\n  </div>\n</template>\n\n<script>\nimport VueSvgTree from 'vue-svg-tree'\nimport { list } from './list.js'\nexport default {\n  name: 'HelloWorld',\n  components:{\n    VueSvgTree\n  },\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App',\n      treeData:list\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/HelloWorld.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('vue-svg-tree',{ref:\"svgTree\",attrs:{\"treeData\":_vm.treeData,\"svgId\":\"svg\"}})],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-3e5cda44\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/HelloWorld.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-3e5cda44\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./HelloWorld.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./HelloWorld.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./HelloWorld.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-3e5cda44\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./HelloWorld.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-3e5cda44\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/HelloWorld.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\nimport Router from 'vue-router'\nimport HelloWorld from '@/components/HelloWorld'\n\nVue.use(Router)\n\nexport default new Router({\n  routes: [\n    {\n      path: '/',\n      name: 'HelloWorld',\n      component: HelloWorld\n    }\n  ]\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/router/index.js","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport router from './router'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n  el: '#app',\n  router,\n  components: { App },\n  template: '<App/>'\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","<template>\n  <div id=\"app\">\n        <div  class=\"draw-area\" id=\"treeContent\" ref=\"treeContent\">\n              <div   v-for=\"(arr, index) in levels\" :key=\"index\">\n                  <div v-for=\"(v,index) in arr\" v-if=\"!v.parent || v.parent.open\" class=\"vnode\" v-bind:class=\"{pnode: v.children && v.children.length > 0}\" :key=\"index\" :style=\"'left:' + (v.left) + 'px; top:' + (v.top) + 'px'\" @click=\"toggle(v)\">\n                      <div class=\"text\">\n                        <div class=\"node_title\">\n                          <span :class=\"v.tlevel == '0' ? 'pink':'blue'\" class=\"OKR\">\n                            {{v.tlevel == '0' ? 'C' : 'L'}}\n                          </span>\n                          <span class=\"label\">\n                            {{v.name}}\n                          </span>\n                        </div>\n                        <div class=\"node_des\">\n                          <div>{{v.content}}</div>\n                        </div>\n                        <div class=\"node_progress\">\n                          {{v.des}}\n                        </div>\n                        <div class=\"showTips\">\n                            <a target=\"_blank\" href=\"https://www.cnblogs.com/calamus\"   class=\"tips_icon icon_edit \">\n                              B\n                            </a>\n                            <a target=\"_blank\" href=\"https://www.calamus.xyz\"  class=\"tips_icon icon_edit \">\n                              C\n                            </a>\n                            <a target=\"_blank\" href=\"https://github.com/calamus0427\"  class=\"tips_icon icon_edit \">\n                              G\n                            </a>\n                        </div>\n                      </div>\n\n                  </div>\n            </div>\n            <svg :id=\"svgId\" v-if=\"curveness\">\n                <!-- 直线 -->\n                <line  class=\"link\" v-for=\"(link, index) in list\" v-if=\"link.deep > 0 && link.parent.open\" :x1=\"link.left + 90\" :y1=\"link.top\" :x2=\"link.parent.left + 105\" :y2=\"link.parent.top + 150\" :stroke=\"link.color ? link.color : '#aaa'\" :stroke-width=\"link.strokeWidth ? link.strokeWidth : '1px'\"></line>\n            </svg>\n\n            <svg :id=\"svgId\" v-if=\"!curveness\">\n                <path  class=\"link\" v-for=\"(link, index) in list\" v-if=\"link.deep > 0 && link.parent.open\"  :d=\"link.path\" :stroke=\"link.color ? link.color : '#aaa'\"  :stroke-width=\"link.strokeWidth ? link.strokeWidth : '1px'\"></path>\n            </svg>\n        </div>\n    </div>\n</template>\n\n\n\n<script>\n// import { list } from './list.js'\n//TODO:横向排列有问题\n\nvar width = 800;\nvar height = 600;\nvar blockHeight = 50;\nvar blockWidth = 300;\n\nexport default {\n    name:\"VueSvgTree\",\n    data(){\n      return {\n          rules: {\n              min: 200,\n              max: 350\n          },\n          delayRules: {\n              min: 10,\n              max: 300\n          },\n          root: null, // 顶层根节点s\n          list: null, // 列表\n          levels: null, // 层次存储\n      }\n    },\n    props:{\n      treeData:{\n        type:Array\n      },\n      direction:{\n        type:String,\n        default:'row'  //col:横向 row:纵向\n      },\n      svgId:{\n        type:String,\n        default:'svg'\n      },\n      curveness:{\n        type:Boolean,\n        default:false\n      }\n    },\n    mounted(){\n      if(this.treeData && this.treeData.length > 0){\n          this.initData(JSON.parse(JSON.stringify(this.treeData)))\n      }\n    },\n    watch:{\n      treeData(val){\n        if(val && val.length > 0){\n          this.initData(JSON.parse(JSON.stringify(val)))\n        }\n      }\n    },\n    methods: {\n        compare: function (v1, v2) {\n            if (v1.deep !== v2.deep) {\n                return v1.deep - v2.deep;\n            }\n\n            if (v1.parent === v2.parent) {\n                return v1.id - v2.id;\n            }\n\n            return this.compare(v1.parent, v2.parent);\n        },\n        // 初始化数据： 计算deep等\n        initData (data) {\n          console.log(\"data\",data)\n            var keys = {};\n            var root = null;\n            var levels = [];\n\n            if (!data && !(data.length > 0)) {\n                return;\n            }\n\n            data.forEach( (v) =>{\n                keys[v.id] = v;\n                v.deep = 0;\n                v.top = 0;\n                v.height = 0;\n                v.width = 0 ;\n                v.path = '';\n                v.left = 0;\n                v.prev = null; // 前一个节点\n            });\n            data.forEach( (v)=> {\n                if (v.fatherId || v.fatherId > 0) {\n                    var p = keys[v.fatherId];\n                    p.children = p.children || [];\n                    p.children.push(v);\n                    v.parent = p;\n                    v.deep = p.deep + 1;\n                    // v.left = v.deep * 150 + 10;\n                    v.left = this.direction == 'col' ? v.deep * 300 + 10 : 0;\n                    v.top = this.direction == 'row' ? v.deep * 250 + 5 : 0;\n                    v.open = v.deep < 1;\n                    v.show = v.deep < 2;\n                }\n                else {\n                    root = v ;\n                    v.open = true;\n                    v.show = true\n                }\n            });\n            data.sort(this.compare);\n            data.forEach( (v) =>{\n                levels[v.deep] = levels[v.deep] || [];\n                levels[v.deep].push(v);\n                v.prev = levels[v.deep][levels[v.deep].length - 2];\n            });\n\n            this.root = root;\n            this.list = data;\n            console.log(\"daya\",data)\n            this.levels = levels;\n            if(this.direction == 'col'){\n              this.calcHeight(root);\n              this.calcTop();\n              this.calSvg();\n            }else{\n              //default\n              this.calWidth(root);\n              this.calcLeft();\n              this.calSvgVer();\n            }\n        },\n        // 计算所有节点占用的高度和宽度是否展示\n        calcHeight (vnode) {\n            var me = this;\n            var height = 0;\n            if (vnode.parent && !vnode.parent.open) {\n                // 存在父节点并且父节点不展开\n                vnode.height = 0;\n                vnode.open = false;\n            }\n            else if (!vnode.open) {\n                vnode.height = blockHeight;\n            }\n\n            if (vnode.children && vnode.children.length > 0) {\n                vnode.children.forEach( (v) => {\n                    me.calcHeight(v);\n                    height += v.height;\n                });\n            }\n\n            if (vnode.open) {\n                vnode.height = height || blockHeight;\n            }\n\n        },\n        calWidth(vnode){\n            var me = this;\n            var width = 0;\n            if (vnode.parent && !vnode.parent.open) {\n                // 存在父节点并且父节点不展开\n                vnode.height = 0;\n                vnode.width = 0 ;\n                vnode.open = false;\n            }\n            else if (!vnode.open) {\n                vnode.width = blockWidth;\n            }\n            if (vnode.children && vnode.children.length > 0) {\n                vnode.children.forEach( (v)=> {\n                    me.calWidth(v);\n                    width += v.width\n                });\n            }\n            if (vnode.open) {\n                vnode.width = width  || blockWidth;\n            }\n        },\n        //计算svg的大小\n        calSvg(){\n          this.$nextTick( () =>{\n            let maxHeight = this.levels.flat(Infinity).filter((item)=>{\n              return item.show\n            }).sort((a,b) =>{\n                return b.top - a.top\n              })[0].top ;\n            let svg = document.getElementById(this.svgId)\n            console.log(\"svg\",svg)\n            svg.setAttribute('height', 500)\n            svg.setAttribute('width', 700 )\n            this.$emit('toggle', this.$refs.treeContent.scrollWidth ,this.root.height)\n          })\n\n        },\n        calSvgVer(){\n          this.$nextTick( () =>{\n            let maxHeight = this.levels.flat(Infinity).filter((item)=>{\n              return item.show\n            }).sort((a,b) =>{\n                return b.top - a.top\n            })[0].top ;\n            // let svg = document.getElementById('svg')\n            let svg = document.getElementById(this.svgId)\n            svg.setAttribute('height', this.$refs.treeContent.scrollHeight)\n            svg.setAttribute('width', this.root.width )\n            this.$emit('toggle',{'width':this.root.width,'height':this.$refs.treeContent.scrollHeight})\n          })\n        },\n        // 计算节点top的位置\n        calcTop (vnode, prevHeight) {\n            if (!vnode) {\n                vnode = this.root;\n            }\n            prevHeight = prevHeight || 0;\n            vnode.top = prevHeight + vnode.height / 2;\n            if (vnode.children && vnode.children.length > 0) {\n                for (var i = 0; i < vnode.children.length; i++) {\n                    var height = vnode.children[i].height;\n                    this.calcTop(vnode.children[i], prevHeight);\n                    prevHeight += height;\n                }\n            }\n            if (vnode.parent) {\n                var pLeft = vnode.parent.left + blockWidth - 40;\n                var pTop = vnode.parent.top;\n                var mLeft = (vnode.left + pLeft) / 2;\n                var mTop = (vnode.top + pTop) / 2;\n                vnode.path = 'M' + vnode.left + ',' + vnode.top\n                    + ' C ' + mLeft + ' ' + vnode.top + ',' + mLeft + ' ' + pTop\n                    + ',' + pLeft + ' ' + pTop + 'L ' + (vnode.parent.left + 10) + ',' + pTop;\n            }\n        },\n        // 节点左边位置\n        calcLeft(vnode, prevWidth){\n            if (!vnode) {\n                vnode = this.root;\n            }\n            prevWidth = prevWidth || 0;\n            vnode.left = prevWidth + vnode.width / 2;\n            if (vnode.children && vnode.children.length > 0) {\n                for (var i = 0; i < vnode.children.length; i++) {\n                    var width = vnode.children[i].width;\n                    this.calcLeft(vnode.children[i], prevWidth);\n                    prevWidth += width;\n                }\n            }\n            if (vnode.parent) {\n                var pLeft = vnode.parent.left + 115;\n                var pTop =  vnode.parent.top + 150 ;\n                var vLeft = vnode.left + 115 ;\n                var vTop = vnode.top  ;\n                var mLeft = (pLeft + vLeft) /2\n                var mTop = (pTop + vTop) /2\n                var x1 = vLeft > pLeft ? vLeft +  5 : vLeft -  5\n                if(vLeft == pLeft){\n                  vnode.path = 'M' + vLeft + ',' + vTop + ' ' + ' L ' + pLeft  + ',' + pTop\n                }else{\n                  vnode.path = 'M' + vLeft + ',' + vTop +\n                      ' Q ' + x1 + ',' + (vTop - 30) + ' ' +\n                      mLeft+ ',' + (vTop - 30) +\n                      ' T '  + pLeft  + ',' + pTop\n                }\n            }\n        },\n        // 收缩和展开\n        toggle (vnode) {\n            vnode.open = !vnode.open;\n            console.log(\"vnode\",vnode)\n            if(vnode.children){\n              vnode.children.map( (child) =>{\n                child.show = !child.show\n              })\n            }\n            if(this.direction == \"col\"){\n                this.calcHeight(this.root);\n                this.calcTop()\n                this.calSvg() ;\n            }else{\n              this.calWidth(this.root);\n              this.calcLeft();\n              this.calSvgVer() ;\n            }\n            console.log('toggle:', vnode, vnode.open);\n        },\n        //自定义事件\n        showDetail(data){\n          delete data.children\n          this.$emit(\"detail\",data)\n        },\n        addTarget(data){\n          delete data.children\n          console.log(\"1111111\",data)\n          this.$emit(\"add\",data)\n        },\n        editTarget(data){\n          delete data.children\n          console.log(\"2222222\",data)\n          this.$emit(\"edit\",data)\n        },\n        detailTarget(data){\n          delete data.children\n          this.$emit(\"detail\",data)\n        },\n        refreshTarget(data){\n          delete data.children\n          console.log(\"3333333\",data)\n          this.$emit(\"refresh\",data)\n        }\n    }\n}\n</script>\n\n<style>\nhtml, body {\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  font-size: 14px;\n}\n.draw-area {\n    position: relative;\n    width:100%;\n    height:calc( 100vh - 100px );\n    margin:40px auto;\n}\nsvg {\n    z-index: 0;\n}\n.vnode {\n    position: absolute;\n    z-index: 100;\n    top: 10px;\n    left: 10px;\n    height: 160px;\n    margin: 0;\n    margin-top: -10px;\n    font-size: 13px;\n    line-height: 20px;\n    border-radius: 3px;\n    background: #FFFFFF;\n    box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);;\n    transition: top .3s;\n    cursor: pointer;\n    width: auto ;\n    /* width: 230px;\n    overflow:hidden; */\n}\n.vnode .text {\n    padding: 0 10px;\n}\n.pnode::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    left:0;\n    display: inline-block;\n    width: 216px;\n    height: 1px;\n    background: #E1244E;\n}\n.link {\n    fill-opacity: 0;\n}\n.tip {\n    z-index: 999;\n    display: block;\n    padding: 5px;\n    border: 1px solid #eee;\n    line-height: 20px;\n    border-radius: 5px;\n    background: transparent;\n}\n.vnode:hover {\n    z-index: 999;\n}\n.vnode:hover .tip {\n    display: block;\n}\n\n/**ruler部分*/\n.ruler-head {\n    font-size: 14px;\n    text-align: left;\n}\n.ruler-head  span {\n    display: inline-block;\n    width: 50px;\n    text-align: center;\n}\n.ruler {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 100px;\n    margin-top: 10px;\n    margin-left: 10px;\n}\n.ruler-ruler {\n    position: relative;\n    right: 10px;\n    left: 5px;\n    display: inline-block;\n    width: 10px;\n    height: 100px;\n    background: #9a9797;\n}\n.ruler-deg {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    width: 0;\n    width: 0;\n    height: 10px;\n    margin-top: -5px;\n    padding-left: 3px;\n    border-left: 20px solid #666;\n    font-size: 10px;\n    line-height: 10px;\n    text-align: center;\n    color: #666;\n    background: transparent;\n    cursor: row-resize;\n    -webkit-user-select: none; /* Chrome/Safari/Opera */\n       -moz-user-select: none; /* Firefox */\n            user-select: none;\n\n    -webkit-touch-callout: none; /* iOS Safari */\n}\n.vnode .text {\n  position: relative;\n  height: 100%;\n  max-width: 230px;\n}\n.vnode .text .node_title {\n  padding: 3px 11px 0px 11px;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n.vnode .text .node_title .OKR {\n  display: inline-block;\n  width: 35px;\n  height: 35px;\n  border-radius: 50%;\n  color: #fff;\n  line-height: 35px;\n  text-align: center;\n  font-size: 1.2rem;\n}\n.vnode .text .node_title .OKR.pink {\n  background-color: #E1244E;\n}\n.vnode .text .node_title .OKR.blue {\n  background-color: #58C2EF;\n}\n.vnode .text .node_title .label {\n  max-width: 130px;\n  height: 40px;\n  line-height: 40px;\n  overflow: hidden;\n  padding-left: 10px;\n  font-size: 1rem;\n  color: #1F1F1F;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.vnode .text .node_title .label button {\n  overflow: hidden;\n  color: #1F1F1F !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 140px;\n  display: inline-block;\n  line-height: 35px;\n  text-align: left;\n}\n.vnode .text .node_des {\n  display: flex;\n  flex-direction: column;\n  margin-left: 56px;\n  height: 60px;\n  color: #777777;\n  font-size: 12px;\n  justify-content: start;\n}\n.vnode .text .node_des div {\n  width: 140px;\n  text-align: left;\n}\n.vnode .text .node_des div:nth-child(2) {\n  margin-top: 5px;\n}\n.vnode .text .node_progress {\n  position: absolute;\n  width: 200px;\n  bottom: 0px;\n  height: 40px;\n  border-top: 1px solid #D8D8D8;\n  line-height: 40px;\n}\n.vnode .text .node_progress .el-progress {\n  display: inline;\n}\n.vnode .text .node_progress .el-progress .el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n.vnode .text .showTips {\n  position: absolute;\n  left: 225px;\n  top: 0px;\n  opacity: 0;\n}\n.vnode .text .showTips a {\n  display: inline-block;\n}\n.vnode .text .showTips .tips_icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n  text-align: center;\n  text-decoration: none;\n  padding: 3px;\n  background: #FFFFFF;\n  box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);\n  transition: all 0.5s ease 0s;\n  color: #777777;\n}\n.vnode .text .showTips .tips_icon:hover {\n  color: #58C2EF;\n}\n.vnode .text:hover .showTips {\n  opacity: 1;\n}\n\n.el-progress__text {\n  font-size: 12px !important;\n  color: #777777 !important;\n}\n</style>\n\n\n\n\n\n// WEBPACK FOOTER //\n// node_modules/vue-svg-tree/src/lib/index.vue","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{ref:\"treeContent\",staticClass:\"draw-area\",attrs:{\"id\":\"treeContent\"}},[_vm._l((_vm.levels),function(arr,index){return _c('div',{key:index},_vm._l((arr),function(v,index){return (!v.parent || v.parent.open)?_c('div',{key:index,staticClass:\"vnode\",class:{pnode: v.children && v.children.length > 0},style:('left:' + (v.left) + 'px; top:' + (v.top) + 'px'),on:{\"click\":function($event){return _vm.toggle(v)}}},[_c('div',{staticClass:\"text\"},[_c('div',{staticClass:\"node_title\"},[_c('span',{staticClass:\"OKR\",class:v.tlevel == '0' ? 'pink':'blue'},[_vm._v(\"\\n                          \"+_vm._s(v.tlevel == '0' ? 'C' : 'L')+\"\\n                        \")]),_vm._v(\" \"),_c('span',{staticClass:\"label\"},[_vm._v(\"\\n                          \"+_vm._s(v.name)+\"\\n                        \")])]),_vm._v(\" \"),_c('div',{staticClass:\"node_des\"},[_c('div',[_vm._v(_vm._s(v.content))])]),_vm._v(\" \"),_c('div',{staticClass:\"node_progress\"},[_vm._v(\"\\n                        \"+_vm._s(v.des)+\"\\n                      \")]),_vm._v(\" \"),_vm._m(0,true)])]):_vm._e()}),0)}),_vm._v(\" \"),(_vm.curveness)?_c('svg',{attrs:{\"id\":_vm.svgId}},_vm._l((_vm.list),function(link,index){return (link.deep > 0 && link.parent.open)?_c('line',{staticClass:\"link\",attrs:{\"x1\":link.left + 90,\"y1\":link.top,\"x2\":link.parent.left + 105,\"y2\":link.parent.top + 150,\"stroke\":link.color ? link.color : '#aaa',\"stroke-width\":link.strokeWidth ? link.strokeWidth : '1px'}}):_vm._e()}),0):_vm._e(),_vm._v(\" \"),(!_vm.curveness)?_c('svg',{attrs:{\"id\":_vm.svgId}},_vm._l((_vm.list),function(link,index){return (link.deep > 0 && link.parent.open)?_c('path',{staticClass:\"link\",attrs:{\"d\":link.path,\"stroke\":link.color ? link.color : '#aaa',\"stroke-width\":link.strokeWidth ? link.strokeWidth : '1px'}}):_vm._e()}),0):_vm._e()],2)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"showTips\"},[_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://www.cnblogs.com/calamus\"}},[_vm._v(\"\\n                            B\\n                          \")]),_vm._v(\" \"),_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://www.calamus.xyz\"}},[_vm._v(\"\\n                            C\\n                          \")]),_vm._v(\" \"),_c('a',{staticClass:\"tips_icon icon_edit \",attrs:{\"target\":\"_blank\",\"href\":\"https://github.com/calamus0427\"}},[_vm._v(\"\\n                            G\\n                          \")])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-c49d3a12\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vue-svg-tree/src/lib/index.vue\n// module id = null\n// module chunks = ","function injectStyle (ssrContext) {\n  require(\"!!../../../extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../../vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-c49d3a12\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../../vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n}\nvar normalizeComponent = require(\"!../../../vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../../vue-loader/lib/selector?type=script&index=0!./index.vue\"\nimport __vue_script__ from \"!!babel-loader!../../../vue-loader/lib/selector?type=script&index=0!./index.vue\"\n/* template */\nimport __vue_template__ from \"!!../../../vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-c49d3a12\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../vue-loader/lib/selector?type=template&index=0!./index.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-svg-tree/src/lib/index.vue\n// module id = null\n// module chunks = "],"sourceRoot":""}


--------------------------------------------------------------------------------
/example/static/js/manifest.3ad1d5771e9b13dbdad2.js:
--------------------------------------------------------------------------------
1 | !function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="./",t.oe=function(r){throw console.error(r),r}}([]);
2 | //# sourceMappingURL=manifest.3ad1d5771e9b13dbdad2.js.map


--------------------------------------------------------------------------------
/example/static/js/manifest.3ad1d5771e9b13dbdad2.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap be1ca8c0aa354e19346c"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,KAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.3ad1d5771e9b13dbdad2.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap be1ca8c0aa354e19346c"],"sourceRoot":""}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-svg-tree</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-svg-tree",
 3 |   "version": "1.0.2",
 4 |   "description": "A Vue.js project",
 5 |   "author": "calamus0427 <1211994507@qq.com>",
 6 |   "private": false,
 7 |   "main": "src/lib/index.js",
 8 |   "scripts": {
 9 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
10 |     "start": "npm run dev",
11 |     "build": "node build/build.js"
12 |   },
13 |   "dependencies": {
14 |     "vue": "^2.5.2",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/calamus0427/vue-svg-tree.git"
20 |   },
21 |   "files": [
22 |     "dist",
23 |     "src",
24 |     "example"
25 |   ],
26 |   "keywords": [
27 |     "vue",
28 |     "tree",
29 |     "calamus",
30 |     "svg"
31 |   ],
32 |   "homepage": "https://github.com/calamus0427/vue-svg-tree#readme",
33 |   "license": "MIT",
34 |   "devDependencies": {
35 |     "autoprefixer": "^7.1.2",
36 |     "babel-core": "^6.22.1",
37 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
38 |     "babel-loader": "^7.1.1",
39 |     "babel-plugin-syntax-jsx": "^6.18.0",
40 |     "babel-plugin-transform-runtime": "^6.22.0",
41 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
42 |     "babel-preset-env": "^1.3.2",
43 |     "babel-preset-stage-2": "^6.22.0",
44 |     "chalk": "^2.0.1",
45 |     "copy-webpack-plugin": "^4.0.1",
46 |     "css-loader": "^0.28.0",
47 |     "extract-text-webpack-plugin": "^3.0.0",
48 |     "file-loader": "^1.1.4",
49 |     "friendly-errors-webpack-plugin": "^1.6.1",
50 |     "html-webpack-plugin": "^2.30.1",
51 |     "node-notifier": "^5.1.2",
52 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
53 |     "ora": "^1.2.0",
54 |     "portfinder": "^1.0.13",
55 |     "postcss-import": "^11.0.0",
56 |     "postcss-loader": "^2.0.8",
57 |     "postcss-url": "^7.2.1",
58 |     "rimraf": "^2.6.0",
59 |     "semver": "^5.3.0",
60 |     "shelljs": "^0.7.6",
61 |     "uglifyjs-webpack-plugin": "^1.1.1",
62 |     "url-loader": "^0.5.8",
63 |     "vue-loader": "^13.3.0",
64 |     "vue-style-loader": "^3.0.1",
65 |     "vue-template-compiler": "^2.5.2",
66 |     "webpack": "^3.6.0",
67 |     "webpack-bundle-analyzer": "^2.9.0",
68 |     "webpack-dev-server": "^2.9.1",
69 |     "webpack-merge": "^4.1.0"
70 |   },
71 |   "engines": {
72 |     "node": ">= 6.0.0",
73 |     "npm": ">= 3.0.0"
74 |   },
75 |   "browserslist": [
76 |     "> 1%",
77 |     "last 2 versions",
78 |     "not ie <= 8"
79 |   ]
80 | }
81 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   color: #2c3e50;
20 | }
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/example/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <vue-svg-tree
 4 |         :treeData="treeData"
 5 |         svgId='svg'
 6 |         ref="svgTree"
 7 |       ></vue-svg-tree>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import VueSvgTree from "@/lib/index";
13 | import { list } from './list.js'
14 | export default {
15 |   components:{
16 |     VueSvgTree
17 |   },
18 |   data(){
19 |     return {
20 |         treeData:list
21 |     }
22 |   }
23 | }
24 | </script>
25 | 
26 | 


--------------------------------------------------------------------------------
/src/example/list.js:
--------------------------------------------------------------------------------
 1 | var listData = [
 2 |   {id: 100, name: 'Calamus',  des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你', value: 123, delay: 120, fatherId: 0,tlevel:1},
 3 |   {id: 101, name: 'Calamus1', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 0, fatherId: 100,tlevel:1},
 4 |   {id: 102, name: 'Calamus2', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 100, fatherId: 100,tlevel:0},
 5 |   {id: 103, name: 'Calamus3', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 100,tlevel:0},
 6 |   {id: 104, name: 'Calamus4', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 200, fatherId: 100,tlevel:0},
 7 |   {id: 105, name: 'Calamus5', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 101,tlevel:0},
 8 |   {id: 106, name: 'Calamus6', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
 9 |   {id: 107, name: 'Calamus7', des:'www.calamus.xyz',color:'#E1244E',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
10 |   {id: 108, name: 'Calamus8', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
11 |   {id: 109, name: 'Calamus9', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
12 |   {id: 110, name: 'Calamus10', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
13 |   {id: 111, name: 'Calamus11', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 102,tlevel:0},
14 |   {id: 112, name: 'Calamus12', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 300, fatherId: 103,tlevel:0},
15 |   {id: 113, name: 'Calamus13', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 103,tlevel:0},
16 |   {id: 114, name: 'Calamus14', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
17 |   {id: 116, name: 'Calamus15', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
18 |   {id: 117, name: 'Calamus16', des:'www.calamus.xyz',color:'#aaa',content:'你可以选择爱我或者不爱我，而我只能选择爱你或者更爱你',value: 123, fatherId: 108,tlevel:0},
19 | ]
20 | listData.forEach(function (v) {
21 |   if (!v.delay) {
22 |       v.delay = 200 * Math.random();
23 |   }
24 | });
25 | export const list = listData
26 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
 1 | // import VueSvgTree from './index.vue'
 2 | 
 3 | // /* istanbul ignore next */
 4 | // VueSvgTree.install = function(Vue) {
 5 | //   Vue.component(VueSvgTree.name, VueSvgTree);
 6 | // }
 7 | 
 8 | // export default VueSvgTree
 9 | 
10 | import VueSvgTree from './index.vue';
11 | export default VueSvgTree;
12 | 
13 | if (typeof window !== 'undefined' && window.Vue) {
14 |   window.Vue.component(VueSvgTree.name, VueSvgTree);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lib/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |         <div  class="draw-area" id="treeContent" ref="treeContent">
  4 |               <div   v-for="(arr, index) in levels" :key="index">
  5 |                   <div v-for="(v,index) in arr" v-if="!v.parent || v.parent.open" class="vnode" v-bind:class="{pnode: v.children && v.children.length > 0}" :key="index" :style="'left:' + (v.left) + 'px; top:' + (v.top) + 'px'" @click="toggle(v)">
  6 |                       <div class="text">
  7 |                         <div class="node_title">
  8 |                           <span :class="v.tlevel == '0' ? 'pink':'blue'" class="OKR">
  9 |                             {{v.tlevel == '0' ? 'C' : 'L'}}
 10 |                           </span>
 11 |                           <span class="label">
 12 |                             {{v.name}}
 13 |                           </span>
 14 |                         </div>
 15 |                         <div class="node_des">
 16 |                           <div>{{v.content}}</div>
 17 |                         </div>
 18 |                         <div class="node_progress">
 19 |                           {{v.des}}
 20 |                         </div>
 21 |                         <div class="showTips">
 22 |                             <a target="_blank" href="https://www.cnblogs.com/calamus"   class="tips_icon icon_edit ">
 23 |                               B
 24 |                             </a>
 25 |                             <a target="_blank" href="https://www.calamus.xyz"  class="tips_icon icon_edit ">
 26 |                               C
 27 |                             </a>
 28 |                             <a target="_blank" href="https://github.com/calamus0427"  class="tips_icon icon_edit ">
 29 |                               G
 30 |                             </a>
 31 |                         </div>
 32 |                       </div>
 33 | 
 34 |                   </div>
 35 |             </div>
 36 |             <svg :id="svgId" v-if="curveness">
 37 |                 <!-- 直线 -->
 38 |                 <line  class="link" v-for="(link, index) in list" v-if="link.deep > 0 && link.parent.open" :x1="link.left + 90" :y1="link.top" :x2="link.parent.left + 105" :y2="link.parent.top + 150" :stroke="link.color ? link.color : '#aaa'" :stroke-width="link.strokeWidth ? link.strokeWidth : '1px'"></line>
 39 |             </svg>
 40 | 
 41 |             <svg :id="svgId" v-if="!curveness">
 42 |                 <path  class="link" v-for="(link, index) in list" v-if="link.deep > 0 && link.parent.open"  :d="link.path" :stroke="link.color ? link.color : '#aaa'"  :stroke-width="link.strokeWidth ? link.strokeWidth : '1px'"></path>
 43 |             </svg>
 44 |         </div>
 45 |     </div>
 46 | </template>
 47 | 
 48 | 
 49 | 
 50 | <script>
 51 | // import { list } from './list.js'
 52 | //TODO:横向排列有问题
 53 | 
 54 | var width = 800;
 55 | var height = 600;
 56 | var blockHeight = 50;
 57 | var blockWidth = 300;
 58 | 
 59 | export default {
 60 |     name:"VueSvgTree",
 61 |     data(){
 62 |       return {
 63 |           rules: {
 64 |               min: 200,
 65 |               max: 350
 66 |           },
 67 |           delayRules: {
 68 |               min: 10,
 69 |               max: 300
 70 |           },
 71 |           root: null, // 顶层根节点s
 72 |           list: null, // 列表
 73 |           levels: null, // 层次存储
 74 |       }
 75 |     },
 76 |     props:{
 77 |       treeData:{
 78 |         type:Array
 79 |       },
 80 |       direction:{
 81 |         type:String,
 82 |         default:'row'  //col:横向 row:纵向
 83 |       },
 84 |       svgId:{
 85 |         type:String,
 86 |         default:'svg'
 87 |       },
 88 |       curveness:{
 89 |         type:Boolean,
 90 |         default:false
 91 |       }
 92 |     },
 93 |     mounted(){
 94 |       if(this.treeData && this.treeData.length > 0){
 95 |           this.initData(JSON.parse(JSON.stringify(this.treeData)))
 96 |       }
 97 |     },
 98 |     watch:{
 99 |       treeData(val){
100 |         if(val && val.length > 0){
101 |           this.initData(JSON.parse(JSON.stringify(val)))
102 |         }
103 |       }
104 |     },
105 |     methods: {
106 |         compare: function (v1, v2) {
107 |             if (v1.deep !== v2.deep) {
108 |                 return v1.deep - v2.deep;
109 |             }
110 | 
111 |             if (v1.parent === v2.parent) {
112 |                 return v1.id - v2.id;
113 |             }
114 | 
115 |             return this.compare(v1.parent, v2.parent);
116 |         },
117 |         // 初始化数据： 计算deep等
118 |         initData (data) {
119 |           console.log("data",data)
120 |             var keys = {};
121 |             var root = null;
122 |             var levels = [];
123 | 
124 |             if (!data && !(data.length > 0)) {
125 |                 return;
126 |             }
127 | 
128 |             data.forEach( (v) =>{
129 |                 keys[v.id] = v;
130 |                 v.deep = 0;
131 |                 v.top = 0;
132 |                 v.height = 0;
133 |                 v.width = 0 ;
134 |                 v.path = '';
135 |                 v.left = 0;
136 |                 v.prev = null; // 前一个节点
137 |             });
138 |             data.forEach( (v)=> {
139 |                 if (v.fatherId || v.fatherId > 0) {
140 |                     var p = keys[v.fatherId];
141 |                     p.children = p.children || [];
142 |                     p.children.push(v);
143 |                     v.parent = p;
144 |                     v.deep = p.deep + 1;
145 |                     // v.left = v.deep * 150 + 10;
146 |                     v.left = this.direction == 'col' ? v.deep * 300 + 10 : 0;
147 |                     v.top = this.direction == 'row' ? v.deep * 250 + 5 : 0;
148 |                     v.open = v.deep < 1;
149 |                     v.show = v.deep < 2;
150 |                 }
151 |                 else {
152 |                     root = v ;
153 |                     v.open = true;
154 |                     v.show = true
155 |                 }
156 |             });
157 |             data.sort(this.compare);
158 |             data.forEach( (v) =>{
159 |                 levels[v.deep] = levels[v.deep] || [];
160 |                 levels[v.deep].push(v);
161 |                 v.prev = levels[v.deep][levels[v.deep].length - 2];
162 |             });
163 | 
164 |             this.root = root;
165 |             this.list = data;
166 |             console.log("daya",data)
167 |             this.levels = levels;
168 |             if(this.direction == 'col'){
169 |               this.calcHeight(root);
170 |               this.calcTop();
171 |               this.calSvg();
172 |             }else{
173 |               //default
174 |               this.calWidth(root);
175 |               this.calcLeft();
176 |               this.calSvgVer();
177 |             }
178 |         },
179 |         // 计算所有节点占用的高度和宽度是否展示
180 |         calcHeight (vnode) {
181 |             var me = this;
182 |             var height = 0;
183 |             if (vnode.parent && !vnode.parent.open) {
184 |                 // 存在父节点并且父节点不展开
185 |                 vnode.height = 0;
186 |                 vnode.open = false;
187 |             }
188 |             else if (!vnode.open) {
189 |                 vnode.height = blockHeight;
190 |             }
191 | 
192 |             if (vnode.children && vnode.children.length > 0) {
193 |                 vnode.children.forEach( (v) => {
194 |                     me.calcHeight(v);
195 |                     height += v.height;
196 |                 });
197 |             }
198 | 
199 |             if (vnode.open) {
200 |                 vnode.height = height || blockHeight;
201 |             }
202 | 
203 |         },
204 |         calWidth(vnode){
205 |             var me = this;
206 |             var width = 0;
207 |             if (vnode.parent && !vnode.parent.open) {
208 |                 // 存在父节点并且父节点不展开
209 |                 vnode.height = 0;
210 |                 vnode.width = 0 ;
211 |                 vnode.open = false;
212 |             }
213 |             else if (!vnode.open) {
214 |                 vnode.width = blockWidth;
215 |             }
216 |             if (vnode.children && vnode.children.length > 0) {
217 |                 vnode.children.forEach( (v)=> {
218 |                     me.calWidth(v);
219 |                     width += v.width
220 |                 });
221 |             }
222 |             if (vnode.open) {
223 |                 vnode.width = width  || blockWidth;
224 |             }
225 |         },
226 |         //计算svg的大小
227 |         calSvg(){
228 |           this.$nextTick( () =>{
229 |             let maxHeight = this.levels.flat(Infinity).filter((item)=>{
230 |               return item.show
231 |             }).sort((a,b) =>{
232 |                 return b.top - a.top
233 |               })[0].top ;
234 |             let svg = document.getElementById(this.svgId)
235 |             console.log("svg",svg)
236 |             svg.setAttribute('height', 500)
237 |             svg.setAttribute('width', 700 )
238 |             this.$emit('toggle', this.$refs.treeContent.scrollWidth ,this.root.height)
239 |           })
240 | 
241 |         },
242 |         calSvgVer(){
243 |           this.$nextTick( () =>{
244 |             let maxHeight = this.levels.flat(Infinity).filter((item)=>{
245 |               return item.show
246 |             }).sort((a,b) =>{
247 |                 return b.top - a.top
248 |             })[0].top ;
249 |             // let svg = document.getElementById('svg')
250 |             let svg = document.getElementById(this.svgId)
251 |             svg.setAttribute('height', this.$refs.treeContent.scrollHeight)
252 |             svg.setAttribute('width', this.root.width )
253 |             this.$emit('toggle',{'width':this.root.width,'height':this.$refs.treeContent.scrollHeight})
254 |           })
255 |         },
256 |         // 计算节点top的位置
257 |         calcTop (vnode, prevHeight) {
258 |             if (!vnode) {
259 |                 vnode = this.root;
260 |             }
261 |             prevHeight = prevHeight || 0;
262 |             vnode.top = prevHeight + vnode.height / 2;
263 |             if (vnode.children && vnode.children.length > 0) {
264 |                 for (var i = 0; i < vnode.children.length; i++) {
265 |                     var height = vnode.children[i].height;
266 |                     this.calcTop(vnode.children[i], prevHeight);
267 |                     prevHeight += height;
268 |                 }
269 |             }
270 |             if (vnode.parent) {
271 |                 var pLeft = vnode.parent.left + blockWidth - 40;
272 |                 var pTop = vnode.parent.top;
273 |                 var mLeft = (vnode.left + pLeft) / 2;
274 |                 var mTop = (vnode.top + pTop) / 2;
275 |                 vnode.path = 'M' + vnode.left + ',' + vnode.top
276 |                     + ' C ' + mLeft + ' ' + vnode.top + ',' + mLeft + ' ' + pTop
277 |                     + ',' + pLeft + ' ' + pTop + 'L ' + (vnode.parent.left + 10) + ',' + pTop;
278 |             }
279 |         },
280 |         // 节点左边位置
281 |         calcLeft(vnode, prevWidth){
282 |             if (!vnode) {
283 |                 vnode = this.root;
284 |             }
285 |             prevWidth = prevWidth || 0;
286 |             vnode.left = prevWidth + vnode.width / 2;
287 |             if (vnode.children && vnode.children.length > 0) {
288 |                 for (var i = 0; i < vnode.children.length; i++) {
289 |                     var width = vnode.children[i].width;
290 |                     this.calcLeft(vnode.children[i], prevWidth);
291 |                     prevWidth += width;
292 |                 }
293 |             }
294 |             if (vnode.parent) {
295 |                 var pLeft = vnode.parent.left + 115;
296 |                 var pTop =  vnode.parent.top + 150 ;
297 |                 var vLeft = vnode.left + 115 ;
298 |                 var vTop = vnode.top  ;
299 |                 var mLeft = (pLeft + vLeft) /2
300 |                 var mTop = (pTop + vTop) /2
301 |                 var x1 = vLeft > pLeft ? vLeft +  5 : vLeft -  5
302 |                 if(vLeft == pLeft){
303 |                   vnode.path = 'M' + vLeft + ',' + vTop + ' ' + ' L ' + pLeft  + ',' + pTop
304 |                 }else{
305 |                   vnode.path = 'M' + vLeft + ',' + vTop +
306 |                       ' Q ' + x1 + ',' + (vTop - 30) + ' ' +
307 |                       mLeft+ ',' + (vTop - 30) +
308 |                       ' T '  + pLeft  + ',' + pTop
309 |                 }
310 |             }
311 |         },
312 |         // 收缩和展开
313 |         toggle (vnode) {
314 |             vnode.open = !vnode.open;
315 |             console.log("vnode",vnode)
316 |             if(vnode.children){
317 |               vnode.children.map( (child) =>{
318 |                 child.show = !child.show
319 |               })
320 |             }
321 |             if(this.direction == "col"){
322 |                 this.calcHeight(this.root);
323 |                 this.calcTop()
324 |                 this.calSvg() ;
325 |             }else{
326 |               this.calWidth(this.root);
327 |               this.calcLeft();
328 |               this.calSvgVer() ;
329 |             }
330 |             console.log('toggle:', vnode, vnode.open);
331 |         },
332 |         //自定义事件
333 |         showDetail(data){
334 |           delete data.children
335 |           this.$emit("detail",data)
336 |         },
337 |         addTarget(data){
338 |           delete data.children
339 |           console.log("1111111",data)
340 |           this.$emit("add",data)
341 |         },
342 |         editTarget(data){
343 |           delete data.children
344 |           console.log("2222222",data)
345 |           this.$emit("edit",data)
346 |         },
347 |         detailTarget(data){
348 |           delete data.children
349 |           this.$emit("detail",data)
350 |         },
351 |         refreshTarget(data){
352 |           delete data.children
353 |           console.log("3333333",data)
354 |           this.$emit("refresh",data)
355 |         }
356 |     }
357 | }
358 | </script>
359 | 
360 | <style>
361 | html, body {
362 |   padding: 0;
363 |   margin: 0;
364 |   height: 100%;
365 |   font-size: 14px;
366 | }
367 | .draw-area {
368 |     position: relative;
369 |     width:100%;
370 |     height:calc( 100vh - 100px );
371 |     margin:40px auto;
372 | }
373 | svg {
374 |     z-index: 0;
375 | }
376 | .vnode {
377 |     position: absolute;
378 |     z-index: 100;
379 |     top: 10px;
380 |     left: 10px;
381 |     height: 160px;
382 |     margin: 0;
383 |     margin-top: -10px;
384 |     font-size: 13px;
385 |     line-height: 20px;
386 |     border-radius: 3px;
387 |     background: #FFFFFF;
388 |     box-shadow: 1px 2px 10px 3px rgba(0,0,0,0.08);;
389 |     transition: top .3s;
390 |     cursor: pointer;
391 |     width: auto ;
392 |     /* width: 230px;
393 |     overflow:hidden; */
394 | }
395 | .vnode .text {
396 |     padding: 0 10px;
397 | }
398 | .pnode::after {
399 |     content: "";
400 |     position: absolute;
401 |     bottom: 0;
402 |     left:0;
403 |     display: inline-block;
404 |     width: 216px;
405 |     height: 1px;
406 |     background: #E1244E;
407 | }
408 | .link {
409 |     fill-opacity: 0;
410 | }
411 | .tip {
412 |     z-index: 999;
413 |     display: block;
414 |     padding: 5px;
415 |     border: 1px solid #eee;
416 |     line-height: 20px;
417 |     border-radius: 5px;
418 |     background: transparent;
419 | }
420 | .vnode:hover {
421 |     z-index: 999;
422 | }
423 | .vnode:hover .tip {
424 |     display: block;
425 | }
426 | 
427 | /**ruler部分*/
428 | .ruler-head {
429 |     font-size: 14px;
430 |     text-align: left;
431 | }
432 | .ruler-head  span {
433 |     display: inline-block;
434 |     width: 50px;
435 |     text-align: center;
436 | }
437 | .ruler {
438 |     position: relative;
439 |     display: inline-block;
440 |     width: 44px;
441 |     height: 100px;
442 |     margin-top: 10px;
443 |     margin-left: 10px;
444 | }
445 | .ruler-ruler {
446 |     position: relative;
447 |     right: 10px;
448 |     left: 5px;
449 |     display: inline-block;
450 |     width: 10px;
451 |     height: 100px;
452 |     background: #9a9797;
453 | }
454 | .ruler-deg {
455 |     position: absolute;
456 |     top: 50px;
457 |     left: 0;
458 |     width: 0;
459 |     width: 0;
460 |     height: 10px;
461 |     margin-top: -5px;
462 |     padding-left: 3px;
463 |     border-left: 20px solid #666;
464 |     font-size: 10px;
465 |     line-height: 10px;
466 |     text-align: center;
467 |     color: #666;
468 |     background: transparent;
469 |     cursor: row-resize;
470 |     -webkit-user-select: none; /* Chrome/Safari/Opera */
471 |        -moz-user-select: none; /* Firefox */
472 |             user-select: none;
473 | 
474 |     -webkit-touch-callout: none; /* iOS Safari */
475 | }
476 | .vnode .text {
477 |   position: relative;
478 |   height: 100%;
479 |   max-width: 230px;
480 | }
481 | .vnode .text .node_title {
482 |   padding: 3px 11px 0px 11px;
483 |   display: flex;
484 |   align-items: center;
485 |   flex-wrap: nowrap;
486 | }
487 | .vnode .text .node_title .OKR {
488 |   display: inline-block;
489 |   width: 35px;
490 |   height: 35px;
491 |   border-radius: 50%;
492 |   color: #fff;
493 |   line-height: 35px;
494 |   text-align: center;
495 |   font-size: 1.2rem;
496 | }
497 | .vnode .text .node_title .OKR.pink {
498 |   background-color: #E1244E;
499 | }
500 | .vnode .text .node_title .OKR.blue {
501 |   background-color: #58C2EF;
502 | }
503 | .vnode .text .node_title .label {
504 |   max-width: 130px;
505 |   height: 40px;
506 |   line-height: 40px;
507 |   overflow: hidden;
508 |   padding-left: 10px;
509 |   font-size: 1rem;
510 |   color: #1F1F1F;
511 |   display: inline-block;
512 |   text-overflow: ellipsis;
513 |   white-space: nowrap;
514 | }
515 | .vnode .text .node_title .label button {
516 |   overflow: hidden;
517 |   color: #1F1F1F !important;
518 |   text-overflow: ellipsis;
519 |   white-space: nowrap;
520 |   width: 140px;
521 |   display: inline-block;
522 |   line-height: 35px;
523 |   text-align: left;
524 | }
525 | .vnode .text .node_des {
526 |   display: flex;
527 |   flex-direction: column;
528 |   margin-left: 56px;
529 |   height: 60px;
530 |   color: #777777;
531 |   font-size: 12px;
532 |   justify-content: start;
533 | }
534 | .vnode .text .node_des div {
535 |   width: 140px;
536 |   text-align: left;
537 | }
538 | .vnode .text .node_des div:nth-child(2) {
539 |   margin-top: 5px;
540 | }
541 | .vnode .text .node_progress {
542 |   position: absolute;
543 |   width: 200px;
544 |   bottom: 0px;
545 |   height: 40px;
546 |   border-top: 1px solid #D8D8D8;
547 |   line-height: 40px;
548 | }
549 | .vnode .text .node_progress .el-progress {
550 |   display: inline;
551 | }
552 | .vnode .text .node_progress .el-progress .el-progress__text {
553 |   font-size: 12px !important;
554 |   color: #777777 !important;
555 | }
556 | .vnode .text .showTips {
557 |   position: absolute;
558 |   left: 225px;
559 |   top: 0px;
560 |   opacity: 0;
561 | }
562 | .vnode .text .showTips a {
563 |   display: inline-block;
564 | }
565 | .vnode .text .showTips .tips_icon {
566 |   display: inline-block;
567 |   width: 20px;
568 |   height: 20px;
569 |   line-height: 20px;
570 |   text-align: center;
571 |   text-decoration: none;
572 |   padding: 3px;
573 |   background: #FFFFFF;
574 |   box-shadow: 1px 2px 10px 3px rgba(0, 0, 0, 0.08);
575 |   transition: all 0.5s ease 0s;
576 |   color: #777777;
577 | }
578 | .vnode .text .showTips .tips_icon:hover {
579 |   color: #58C2EF;
580 | }
581 | .vnode .text:hover .showTips {
582 |   opacity: 1;
583 | }
584 | 
585 | .el-progress__text {
586 |   font-size: 12px !important;
587 |   color: #777777 !important;
588 | }
589 | </style>
590 | 
591 | 
592 | 


--------------------------------------------------------------------------------
/src/lib/ruler.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @file 标尺选择工具
  3 |  * @author muzhilong
  4 |  */
  5 | import Vue from 'vue'
  6 | 
  7 | /* global Vue */
  8 | Vue.component('ruler', {
  9 |   template: '<div class="ruler"><p class="ruler-ruler"></p><span deg="min" class="ruler-deg" :style="minTop" @mousemove="move" @mousedown="press">{{vmin}}</span><span deg="max" class="ruler-deg" :style="maxTop" @mousemove="move" @mousedown="press">{{vmax}}</span></div>',
 10 |   data: function () {
 11 |       return {
 12 |           vmin: 0,
 13 |           vmax: this._max || 100,
 14 |           startY: 0
 15 |       };
 16 |   },
 17 |   computed: {
 18 |       _min: function () {
 19 |           return typeof this.min === 'number' ? this.min : 0;
 20 |       },
 21 |       _max: function () {
 22 |           return typeof this.max === 'number' ? this.max : 100;
 23 |       },
 24 |       minTop: function () {
 25 |           var all = this._max - this._min;
 26 |           var now = Math.min(this.vmin, this.vmax);
 27 |           var percent = (now - this._min) / (this._max - this._min);
 28 |           return 'top:' + (100 - percent * 100) + 'px';
 29 |       },
 30 |       maxTop: function () {
 31 |           var all = this._max - this._min;
 32 |           var now = Math.max(this.vmin, this.vmax);
 33 |           var percent = (now - this._min) / (this._max - this._min);
 34 |           return 'top:' + (100 - percent * 100) + 'px';
 35 |       },
 36 |       // 1px代表的数值
 37 |       perPx: function () {
 38 |           return (this._max - this._min) / 100;
 39 |       }
 40 |   },
 41 |   props: ['min', 'max', 'value'],
 42 |   created() {
 43 |       if (this.value) {
 44 |           this.vmin = parseFloat(this.value.min);
 45 |           this.vmax = parseFloat(this.value.max);
 46 |           if (this.vmin < this._min) {
 47 |               this.vmin = this._min;
 48 |               this.emit();
 49 |           }
 50 |           else if (this.vmax > this._max) {
 51 |               this.vmax = this._max;
 52 |               this.emit();
 53 |           }
 54 |       }
 55 |       else {
 56 |           this.vmin = this._min;
 57 |           this.vmax = this._max;
 58 |       }
 59 |   },
 60 |   methods: {
 61 |       press: function (e) {
 62 |           this.startY = e.clientY;
 63 |           this.startDeg = 'v' + e.target.getAttribute('deg');
 64 |       },
 65 |       move: function (e) {
 66 |           if (!e.buttons) {
 67 |               return;
 68 |           }
 69 | 
 70 |           // console.log('drag:', e);
 71 |           var nowY = e.clientY;
 72 |           var move = nowY - this.startY;
 73 |           this.startY = nowY;
 74 |           var deg = 'v' + e.target.getAttribute('deg');
 75 |           if (deg !== this.startDeg) {
 76 |               return;
 77 |           }
 78 | 
 79 |           if (typeof this[deg] === 'undefined') {
 80 |               return;
 81 |           }
 82 | 
 83 |           var val = this[deg] - move * this.perPx;
 84 |           if (val > this._max) {
 85 |               val = this._max;
 86 |           }
 87 | 
 88 |           if (val < this._min) {
 89 |               val = this._min;
 90 |           }
 91 | 
 92 |           if (this[deg] !== val) {
 93 |               this[deg] = val;
 94 |               if (this.vmin > this.vmax) {
 95 |                   var a = this.vmax;
 96 |                   this.vmax = this.vmin;
 97 |                   this.vmin = a;
 98 |               }
 99 | 
100 |               clearTimeout(this.timer);
101 |               this.timer = setTimeout(this.emit, 100);
102 |           }
103 | 
104 |       },
105 |       emit() {
106 |           if (this.value) {
107 |               this.value.min = this.vmin;
108 |               this.value.max = this.vmax;
109 |           }
110 | 
111 |           this.$emit('update', [this.vmin, this.vmax]);
112 |       }
113 |   }
114 | });
115 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   components: { App },
14 |   template: '<App/>'
15 | })
16 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | const _import_ = file => () => import('@/example/' + file + '.vue')
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'home',
12 |       component: _import_('index')
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/vue-svg-tree/b8abe8a28d8608d3184f93ff17863d1db8b25f72/static/.gitkeep


--------------------------------------------------------------------------------
/vue-svg-tree-1.0.0.tgz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/vue-svg-tree/b8abe8a28d8608d3184f93ff17863d1db8b25f72/vue-svg-tree-1.0.0.tgz


--------------------------------------------------------------------------------