{"_id":"@cloud-ui/u-relations-diagram.vue","_rev":"9-71b72cb117af0fcb54d01f513109d33b","name":"@cloud-ui/u-relations-diagram.vue","dist-tags":{"latest":"0.9.0"},"versions":{"0.1.0":{"name":"@cloud-ui/u-relations-diagram.vue","description":"基于 Cytoscape.js，传入节点和边的数据来表达各种关系的 Canvas 图。","version":"0.1.0","main":"./index.js","author":{"name":"Forrest","email":"rainforest92@126.com"},"repository":{"type":"git","url":"git+https://github.com/vusion/cloud-ui-materials.git","directory":"src/components/u-relations-diagram.vue"},"homepage":"https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.0/index.html","license":"MIT","keywords":["vusion","material","component"],"scripts":{"dev":"../../../node_modules/.bin/vue-cli-service doc --port 9090","build:doc":"../../../node_modules/.bin/vue-cli-service doc-build","screenshot":"vusion screenshot public/index.html --code-example --smart-crop --package","deploy":"vusion deploy && vusion deploy screenshots","prepublishOnly":"npm run build:doc && npm run screenshot && vusion readme && vusion vetur"},"vuePlugins":{"resolveFrom":"../../../"},"babel":{"presets":["@vue/babel-preset-app"]},"vusion":{"type":"component","title":"关系图","category":"chart","base":"vue","ui":"cloud-ui.vusion","screenshots":["https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.0/screenshots/0.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.0/screenshots/1.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.0/screenshots/2.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.0/screenshots/3.png"],"team":"网易云计算前端","access":"public"},"dependencies":{"vue-cytoscape":"^1.0.8"},"devDependencies":{},"peerDependencies":{"vue":"^2.6.10","cloud-ui.vusion":"^0.6.6"},"vetur":{"tags":"./vetur/tags.json","attributes":"./vetur/attributes.json"},"bugs":{"url":"https://github.com/vusion/cloud-ui-materials/issues"},"_id":"@cloud-ui/u-relations-diagram.vue@0.1.0","_nodeVersion":"10.16.3","_npmVersion":"6.13.2","dist":{"integrity":"sha512-GHvvprILtWC8VsS8w8JGi60hZmagwzT2ax2afiRxrNm2cNd3KqYBQCVbNua5OJ9ic+dJAMSzDVGhiOax++LSZA==","shasum":"f1160d403246838108567d87f72e3edfafa6b62e","tarball":"https://registry.npmjs.org/@cloud-ui/u-relations-diagram.vue/-/u-relations-diagram.vue-0.1.0.tgz","fileCount":18,"unpackedSize":583840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfOmCRA9TVsSAnZWagAArMAQAIeuofsOHTvcD0KuIHYn\nBmzjnzZz3rYVURVPaw4YUivIEhELUVjGyQS/WZX4sdD6w071RtTVA3nhjAHi\nJHhG+rocmdz7/sQhzqfqvVXdP4dvKZ3Zmmyi7pKLYR3PbQa4ADVRNKK2yDp1\nC2j2gXUDbgZoaiptYhnGAbGiDBhvG6XVydnRa0stFCM9EpqIBh7eFbU90t2i\n3V+qeGmtwLid6Ho0Og/9vaxb3R1YS3TPS8LvgoRJbU73xrinm5XHPYtxTE6O\nBYHeDaoK+1kHGmxihsO9AOS81bKVxCAvRZlDtfXgxh3KgkVLel7t1T98R95L\nuRtwlWNSaVCMBSI92biRs95UUQqfUdffzESDAGsFWlRMGg3cZ6jUi7QnSAy6\n0MBK+YSPiGO/ZnSs9hgZzdeU3BQgvwzx0Zl15xu8Rhxv7PG3Mi6tqq7ySvJD\n3XD5C4Skulv6tVrcsc3owHPoTHHFfOT/QntVQH/RJuktqk+XZXl2K6c13r3g\nqE811X9WyyLWkItNRMWrx/q7sljOA1Nov4LcI6SRWdhflXZdm/juGmdG12uC\n5Z2REXvKwUGRcrhMG5wpx+NQpnvgAyVZzHiSHIkZLY64HWTg5Q3ptTZSZ2u9\nNFWn3/qMbeLzJ5SNHY/gTME/10fXns95WIgOzq9zo7A4cRGcL+4c7kn1psl4\n4ebh\r\n=eQ1p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC58oirZoKStOwNNlcjT7lQFWMD9laMDCHpMyT5WMg77AiBal14h/cIMg21Hta6QPC5x8G0Z4lfLQ+ODRA44UgM+uw=="}]},"maintainers":[{"name":"blue_lin","email":"lgfshr@163.com"},{"name":"zhangsanshi","email":"zhangsanshi5566@gmail.com"},{"name":"rainfore","email":"rainforest92@126.com"},{"name":"moujintao","email":"moujintaotest@163.com"},{"name":"cxhtml","email":"lanhai723@126.com"},{"name":"hxtong","email":"kaoyanxinku@163.com"}],"_npmUser":{"name":"rainfore","email":"rainforest92@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-relations-diagram.vue_0.1.0_1586361254175_0.2884610481568213"},"_hasShrinkwrap":false},"0.1.1":{"name":"@cloud-ui/u-relations-diagram.vue","description":"基于 Cytoscape.js，传入节点和边的数据来表达各种关系的 Canvas 图。","version":"0.1.1","main":"./index.js","author":{"name":"Forrest","email":"rainforest92@126.com"},"repository":{"type":"git","url":"git+https://github.com/vusion/cloud-ui-materials.git","directory":"src/components/u-relations-diagram.vue"},"homepage":"https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.1/index.html","license":"MIT","keywords":["vusion","material","component"],"scripts":{"dev":"../../../node_modules/.bin/vue-cli-service doc --port 9090","build:doc":"../../../node_modules/.bin/vue-cli-service doc-build","screenshot":"vusion screenshot public/index.html --code-example --smart-crop --package","deploy":"vusion deploy && vusion deploy screenshots","prepublishOnly":"npm run build:doc && npm run screenshot && vusion readme && vusion vetur"},"vuePlugins":{"resolveFrom":"../../../"},"babel":{"presets":["@vue/babel-preset-app"]},"vusion":{"type":"component","title":"关系图","category":"chart","base":"vue","ui":"cloud-ui.vusion","screenshots":["https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.1/screenshots/0.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.1/screenshots/1.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.1/screenshots/2.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.1/screenshots/3.png"],"team":"网易云计算前端","access":"public"},"dependencies":{"vue-cytoscape":"^1.0.8"},"devDependencies":{},"peerDependencies":{"vue":"^2.6.10","cloud-ui.vusion":"^0.6.6"},"vetur":{"tags":"./vetur/tags.json","attributes":"./vetur/attributes.json"},"bugs":{"url":"https://github.com/vusion/cloud-ui-materials/issues"},"_id":"@cloud-ui/u-relations-diagram.vue@0.1.1","_nodeVersion":"10.16.3","_npmVersion":"6.13.2","dist":{"integrity":"sha512-N0IN3Rql8CFpIvF5vMeCx3KJoXtwLyn5ifepwlvKuB1RvVGVx/uytF+g7QnZ1UPF7A7fpYtIoiXv3Nw9jKCwIQ==","shasum":"fed4ac2c138b556ae5fed61006b3f4d22e3bfb41","tarball":"https://registry.npmjs.org/@cloud-ui/u-relations-diagram.vue/-/u-relations-diagram.vue-0.1.1.tgz","fileCount":18,"unpackedSize":575406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgEeCRA9TVsSAnZWagAA4PMP/iDRd4cL+arZGF0jRZTP\ndkjPC5V+8jZ1HpEkopuVuxDUaCPttZ6KkFVPuofSWT4W4E/qN2rvVgu6ODnI\nvYa2IQ5wxwnhF7sGkO7BUUOHyz0IvWZDGnk2e/QyII3t1TViplDqAmAwKUEb\ni3cY27oywcQSGuxJgGCU24AORQ4w+cP/81P+H3qynZ5fO3kBi4e0EYG9rhrF\nFDv6mD7tQmDH5FdJHv5075AxbCMRG9XOT81Hle45Zb/rzBrP96XEbhE/y7iY\n2is6Lw8wlJWAZVKnmlbu7/FVY4d+QbVqI6ABxMEF1ckg6YXiJSyVaF/45g29\nkqfr8NfWMflJN8XMJy3le2Dq/LWSJ1msVelVAkzndKE6FaLf3cMPvg6e8x90\nY+F7nz9Q0hDA0HUzPIDE2lIYKy8AYXcXfDWBmGGADq1X6Te72/8cjvew1b52\nhUP2teSqO9gbqy5s2brYGhHcHMILzSUFjpIH+Nqpim+i0v7r4SwefhS/O0xM\nsrjbdfenikWoyH8apcKZr0PXe+gsiRaJs6FswJ4psFjJmS9nmyk/mphfCzhm\nT0ruZSakxrBegrTNHlDfkKKwN+L8OlVvd93vnah3X1zmpobAfaTfjNge8RJV\nnyh5DGm/nYz+f4qkJVNiXJM8xNAaAGFS+1V3oFH/9uo/CoLI7T1ycOuLOjtW\nGgXJ\r\n=7dUF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDp7HTwpn4F9SJh8TVeMpVQUFLomFE4EEEd4BrZCRVG0AiAOOYmqjSCqdhG5I71iXaiyu4m2vEjzrPeM5U8l5mrCsg=="}]},"maintainers":[{"name":"blue_lin","email":"lgfshr@163.com"},{"name":"cxhtml","email":"lanhai723@126.com"},{"name":"hxtong","email":"kaoyanxinku@163.com"},{"name":"moujintao","email":"moujintaotest@163.com"},{"name":"rainfore","email":"rainforest92@126.com"},{"name":"zhangsanshi","email":"zhangsanshi5566@gmail.com"}],"_npmUser":{"name":"rainfore","email":"rainforest92@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-relations-diagram.vue_0.1.1_1586364701447_0.9952916321386671"},"_hasShrinkwrap":false},"0.1.2":{"name":"@cloud-ui/u-relations-diagram.vue","description":"基于 [Cytoscape.js](https://js.cytoscape.org)，传入节点和边的数据来表达各种关系的 Canvas 图。","version":"0.1.2","main":"./index.js","author":{"name":"Forrest","email":"rainforest92@126.com"},"repository":{"type":"git","url":"git+https://github.com/vusion/cloud-ui-materials.git","directory":"src/components/u-relations-diagram.vue"},"homepage":"https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/index.html","license":"MIT","keywords":["vusion","material","component"],"scripts":{"dev":"../../../node_modules/.bin/vue-cli-service doc --port 9090","build:doc":"../../../node_modules/.bin/vue-cli-service doc-build","screenshot":"vusion screenshot public/index.html --code-example --smart-crop --package","deploy":"vusion deploy && vusion deploy screenshots","prepublishOnly":"npm run build:doc && npm run screenshot && vusion readme && vusion vetur","release":"vusion publish"},"vuePlugins":{"resolveFrom":"../../../"},"babel":{"presets":["@vue/babel-preset-app"]},"vusion":{"type":"component","title":"关系图","category":"chart","base":"vue","ui":"cloud-ui.vusion","screenshots":["https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/0.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/1.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/2.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/3.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/4.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/5.png"],"team":"网易云计算前端","access":"public"},"dependencies":{"vue-cytoscape":"^1.0.8"},"devDependencies":{},"peerDependencies":{"vue":"^2.6.10","cloud-ui.vusion":"^0.6.6","lodash":"^4.17.15"},"vetur":{"tags":"./vetur/tags.json","attributes":"./vetur/attributes.json"},"bugs":{"url":"https://github.com/vusion/cloud-ui-materials/issues"},"_id":"@cloud-ui/u-relations-diagram.vue@0.1.2","_nodeVersion":"10.16.3","_npmVersion":"6.13.2","dist":{"integrity":"sha512-SAO786H90IKen6esblva+Md6GvCc1gErfbk3GnB9xVN8y1piIUMqDNunvth7aU4xEfnjcMeYd436sAHgVacTAw==","shasum":"556164c69f13af116fd028443d77c063846efa0e","tarball":"https://registry.npmjs.org/@cloud-ui/u-relations-diagram.vue/-/u-relations-diagram.vue-0.1.2.tgz","fileCount":20,"unpackedSize":740649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekIG0CRA9TVsSAnZWagAAkWwP/jUkzCjnLHVEBHd4Mwb7\nfmsUEgx/nrJxhQK19eKOG5CDzIxpK1oPGmlGNLuXsTulejTyQna6aCdrz97O\nGW9FoGjVo9U02lzeaRh7vnaj+m1+egd6plkeMHGDUfiMtw4I+GQkEQVKHciK\ng6ikRgBtPNP9VbWZEMQclk1BIOCSxpj48yz/zCYi7BGk2E64K3frF57zZgA9\nXVe3JE072O0Q6+tZfaekPgP0t0cSc1lkwSuLyOrC6m2qO2X2jcl/7B+bJA11\nV/e6H70ga7XyN14DOfDSHgJtGNj/gtSONghKIaqN5AJ2UrtApIgxa77IgNrm\ntZR+PtFzxjuJtSsZUmnZCLWLeJDoCe03PNGxcEPX26IMaPWn4C1OK/RVtwOm\nPtXB5+bxgaPjwFJUFy4FWKhzhQMZROnzhcDe6dqSgnbK9zBgezT32heLxJaj\n0oJFFhRmtFk6BzX7EgzTI74S/tPOQAQ5YX6ikb+x/y4DlsVJOPqViF0bEqXp\nNjYD4hTU+dhcriT5IDM1CDU6HPLH4plQapl34WM+vyGuX4U9/+ujyZ+homDY\nh4IuHWKOYj1gUT+PjuE0aY9VqUIz92d/5PuE8CErmD/3IcSKGcX3TUvKxF6+\n8+dpPjRzMX1sjBXv6phzhxcdZDeFO6pH5WqRrUNWNFQxAV7ytKQRb9IjPToZ\nDQh0\r\n=pHVz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwLHN9pXD0msYHDD7S9B6bjq56N+NqddrhmknjwC1P5wIgaSPAnnARIjtvqKM0fG9FbmsKrFjOUedSInHenbXnFiQ="}]},"maintainers":[{"name":"blue_lin","email":"lgfshr@163.com"},{"name":"cxhtml","email":"lanhai723@126.com"},{"name":"hxtong","email":"kaoyanxinku@163.com"},{"name":"moujintao","email":"moujintaotest@163.com"},{"name":"rainfore","email":"rainforest92@126.com"},{"name":"zhangsanshi","email":"zhangsanshi5566@gmail.com"}],"_npmUser":{"name":"rainfore","email":"rainforest92@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-relations-diagram.vue_0.1.2_1586528691902_0.5431654901982281"},"_hasShrinkwrap":false},"0.9.0":{"name":"@cloud-ui/u-relations-diagram.vue","description":"基于 [Cytoscape.js](https://js.cytoscape.org)，传入节点和边的数据来表达各种关系的 Canvas 图。","version":"0.9.0","main":"./index.js","author":{"name":"Forrest","email":"rainforest92@126.com"},"repository":{"type":"git","url":"git+https://github.com/vusion/cloud-ui-materials.git","directory":"src/components/u-relations-diagram.vue"},"homepage":"https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.9.0/index.html","license":"MIT","keywords":["vusion","material","component"],"scripts":{"dev":"../../../node_modules/.bin/vue-cli-service doc --port 9090","build:theme":"../../../node_modules/.bin/vue-cli-service library-build --dest dist-theme","build:raw":"../../../node_modules/.bin/vue-cli-service library-build --vusion-mode raw --dest dist-raw","build:doc":"../../../node_modules/.bin/vue-cli-service doc-build","screenshot":"vusion screenshot public/index.html --code-example --smart-crop --package","deploy":"vusion deploy && vusion deploy screenshots","prepublishOnly":"npm run build:theme && npm run build:raw && npm run build:doc && npm run screenshot && vusion readme && vusion vetur","release":"vusion publish"},"vuePlugins":{"resolveFrom":"../../../"},"babel":{"presets":["@vue/app"]},"vusion":{"type":"component","title":"关系图","category":"chart","base":"vue","ui":"cloud-ui.vusion","screenshots":["https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/0.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/1.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/2.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/3.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/4.png","https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.1.2/screenshots/5.png"],"team":"网易云计算前端","access":"public"},"dependencies":{"vue-cytoscape":"^1.0.8"},"devDependencies":{},"peerDependencies":{"@vue/cli-service":"^4.4.1","vue-cli-plugin-vusion":"^0.11.11","vue":"^2.6.10","cloud-ui.vusion":"^0.9.13","lodash":"^4.17.15"},"vetur":{"tags":"./vetur/tags.json","attributes":"./vetur/attributes.json"},"bugs":{"url":"https://github.com/vusion/cloud-ui-materials/issues"},"_id":"@cloud-ui/u-relations-diagram.vue@0.9.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-nGh9h6mcZr4FdbaEqdOA2CNOnefVK/yOpwz2E/aPgHzVqaznd9yI5XDEDC4eytukujUuYtONG42fiHE7ORIr0g==","shasum":"3490cbb4152b572c5bcab6f91438742d99e2397e","tarball":"https://registry.npmjs.org/@cloud-ui/u-relations-diagram.vue/-/u-relations-diagram.vue-0.9.0.tgz","fileCount":26,"unpackedSize":5340728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDKrkCRA9TVsSAnZWagAAPIUQAIAf4Ze3nSOQ1pzPEzwO\nFrGkPwo3/CVT9nj2wY7VkThSJhsddrbOp1nJNI5UW+5SGpZ1TE+XRTt+w1lT\n/3g8EA/u/qGDXUH/R+mAbaRInWkle0v68JgNnUSTsq8/1r+DThuTkUM9JuKT\nWFSEoNpR5sBvpmpTleMchU1NPiWl9/aH4tUki7tAW26XG58PpU6Qmt/RhkEm\nF9bJ6kPyNZNeZ1rYwxVW9ThL8CgHR0b49IB4vZ2X9r3VFZ9O7AiZfyem6sJ6\n82lbnLXXRG+v6d26+twKWeKitmSqH3oLiks4YXyevEJTFEZ5psrSaXUiUX3l\nBdWWnB8rWB6Vv6eM5yYfVJkfBdET4LZtOBWcnrAVRF/eIPP/8zvI05Qfb+bm\nX9k98Gw/EIihIX/iO4LDBI5oJYnqikFROD0vMjHlbYsJjQoGhB+tcWOClIhe\nUxMhaDUOughWwpXyF04EPWmdm2uCGMMsMZC8jtXySAamghyxdm37lR86ov9Y\nFGVSEhqLK/RwAawIOq1/+65EQ18i6chZCPO1zLWqXjd34aV1TMEi68d4Jk7t\n57BQ116lksK8OyltJpehBW1k3hH1KPC23i/X8CwBVzcQdQ9plcbzszwJetDF\nGXNAQiNrGTPVPNVLD32Socnat2G8dcinqCGxv40wCh8xmZCUyqwn5faqaPcQ\nZUXd\r\n=8WQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtrtkTTC0C81XsCUPDGd6JobDa+/VvKBn36x/UBFf5UwIgWlg4+MxwZ/nbku+CRoLNosAsSHZTI8yfWBQvo0ffAGE="}]},"maintainers":[{"name":"blue_lin","email":"lgfshr@163.com"},{"name":"cxhtml","email":"lanhai723@126.com"},{"name":"hxtong","email":"kaoyanxinku@163.com"},{"name":"moujintao","email":"moujintaotest@163.com"},{"name":"rainfore","email":"rainforest92@126.com"},{"name":"zhangsanshi","email":"zhangsanshi5566@gmail.com"}],"_npmUser":{"name":"rainfore","email":"rainforest92@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-relations-diagram.vue_0.9.0_1594665699811_0.12307492710707613"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-08T15:54:14.086Z","0.1.0":"2020-04-08T15:54:14.315Z","modified":"2022-04-06T07:36:18.671Z","0.1.1":"2020-04-08T16:51:41.605Z","0.1.2":"2020-04-10T14:24:52.080Z","0.9.0":"2020-07-13T18:41:40.079Z"},"maintainers":[{"email":"wddpwzz36@gmail.com","name":"lip966"},{"email":"wo978847302@sina.com","name":"damowangdexiaogenban"},{"email":"lifuquan1985@hotmail.com","name":"lifuquan"},{"email":"rainforest92@126.com","name":"rainfore"},{"email":"1033021372@qq.com","name":"zhangxiaoyudaisy"}],"description":"基于 [Cytoscape.js](https://js.cytoscape.org)，传入节点和边的数据来表达各种关系的 Canvas 图。","homepage":"https://static-vusion.163yun.com/packages/@cloud-ui/u-relations-diagram.vue@0.9.0/index.html","keywords":["vusion","material","component"],"repository":{"type":"git","url":"git+https://github.com/vusion/cloud-ui-materials.git","directory":"src/components/u-relations-diagram.vue"},"author":{"name":"Forrest","email":"rainforest92@126.com"},"bugs":{"url":"https://github.com/vusion/cloud-ui-materials/issues"},"license":"MIT","readme":"<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成，为了方便在 GitHub 和 NPM 上查阅。如需修改，请查看源文件 -->\n\n# URelationsDiagram 关系图\n\n- [示例](#示例)\n    - [基本用法](#基本用法)\n    - [图例与配色](#图例与配色)\n    - [节点形状](#节点形状)\n    - [曲线类型](#曲线类型)\n    - [箭头类型](#箭头类型)\n    - [自定义样式](#自定义样式)\n    - [事件](#事件)\n    - [配置](#配置)\n    - [复杂示例](#复杂示例)\n- [API]()\n    - [Props/Attrs](#propsattrs)\n    - [Slots](#slots)\n    - [Events](#events)\n\n基于 [Cytoscape.js](https://js.cytoscape.org)，传入节点和边的数据来表达各种关系的 Canvas 图。\n\n## 示例\n### 基本用法\n\n在`data`属性中传入`nodes`和`edges`的数据。\n\n使用`layout`属性设置布局，可选项有：\n- null\n- random\n- preset\n- grid\n- circle\n- concentric\n- breadthfirst\n- cose\n\n但一般需要设置布局参数，详见 [Cytoscape.js - Layouts](https://js.cytoscape.org/#layouts)。\n\n对原始 Cytoscape.js 节点做了简化：\n\n``` ts\ninterface node {\n    id: string, // 节点 id\n    label: string, // 节点标签，如果不填按 id 显示\n    parent: string, // 组合方式中的父节点\n    color: string, // 配色\n    position: { x: number, y: number }, // 初始化位置\n};\ninterface edge {\n    id: string, // 节点 id 和名称\n    source: string, // 起始节点\n    target: string, // 目标节点\n    color: string, // 配色\n    label: string, // 边的标签\n    'source-label': string, // 边的起始标签\n    'target-label': string, // 边的结束标签\n    curve: string, // 曲线类型\n    'source-arrow': string, // 边的起始箭头类型\n    'target-arrow': string, // 边的结束箭头类型\n    'mid-source-arrow': string, // 边的中间起始箭头类型\n    'mid-target-arrow': string, // 边的中间结束箭头类型\n};\n```\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: 'n0' },\n        { id: 'n1' },\n        { id: 'n2' },\n        { id: 'n3' },\n        { id: 'n4' },\n    ],\n    edges: [\n        { source: 'n0', target: 'n2' },\n        { source: 'n2', target: 'n4' },\n        { source: 'n4', target: 'n1' },\n        { source: 'n1', target: 'n3' },\n        { source: 'n3', target: 'n0' },\n    ],\n}\" :layout=\"{\n    name: 'circle',\n}\"></u-relations-diagram>\n```\n\n### 图例与配色\n\n使用`legend`属性添加图例，使用`color`属性设置节点或边的颜色。\n\n本组件根据 Cloud UI 主题适配了一套配色方案。\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: 'default' },\n        { id: 'primary', color: 'primary' },\n        { id: 'success', color: 'success' },\n        { id: 'normal', color: 'normal' },\n        { id: 'problem', color: 'problem' },\n        { id: 'warning', color: 'warning' },\n        { id: 'error', color: 'error' },\n        { id: 'danger', color: 'danger' },\n        { id: 'disabled', color: 'disabled' },\n    ],\n    edges: [\n        { source: 'default', target: 'primary' },\n        { source: 'primary', target: 'success', color: 'primary' },\n        { source: 'success', target: 'normal', color: 'success' },\n        { source: 'normal', target: 'problem', color: 'normal' },\n        { source: 'problem', target: 'warning', color: 'problem' },\n        { source: 'warning', target: 'error', color: 'warning' },\n        { source: 'error', target: 'danger', color: 'error' },\n        { source: 'danger', target: 'disabled', color: 'danger' },\n        { source: 'disabled', target: 'default', color: 'disabled' },\n    ],\n}\" :layout=\"{\n    name: 'circle',\n}\" :legend=\"[\n    { label: 'default' },\n    { label: 'primary', color: 'primary' },\n    { label: 'success', color: 'success' },\n    { label: 'normal', color: 'normal' },\n    { label: 'problem', color: 'problem' },\n    { label: 'warning', color: 'warning' },\n    { label: 'error', color: 'error' },\n    { label: 'danger', color: 'danger' },\n    { label: 'disabled', color: 'disabled' },\n]\"></u-relations-diagram>\n```\n\n### 节点形状\n\n在 node 对象中，使用`shape`参数指定节点类型。默认为`rectangle`。\n\nshape 的各种类型请直接看下面的示例，其它说明详见 [Cytoscape.js - Node shape](https://js.cytoscape.org/#style/node-body)。\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: 'ellipse', shape: 'ellipse' },\n        { id: 'triangle', shape: 'triangle' },\n        { id: 'round-triangle', shape: 'round-triangle' },\n        { id: 'rectangle', shape: 'rectangle' },\n        { id: 'round-rectangle', shape: 'round-rectangle' },\n        { id: 'bottom-round-rectangle', shape: 'bottom-round-rectangle' },\n        { id: 'cut-rectangle', shape: 'cut-rectangle' },\n        { id: 'barrel', shape: 'barrel' },\n        { id: 'rhomboid', shape: 'rhomboid' },\n        { id: 'diamond', shape: 'diamond' },\n        { id: 'round-diamond', shape: 'round-diamond' },\n        { id: 'pentagon', shape: 'pentagon' },\n        { id: 'round-pentagon', shape: 'round-pentagon' },\n        { id: 'hexagon', shape: 'hexagon' },\n        { id: 'round-hexagon', shape: 'round-hexagon' },\n        { id: 'concave-hexagon', shape: 'concave-hexagon' },\n        { id: 'heptagon', shape: 'heptagon' },\n        { id: 'round-heptagon', shape: 'round-heptagon' },\n        { id: 'octagon', shape: 'octagon' },\n        { id: 'round-octagon', shape: 'round-octagon' },\n        { id: 'star', shape: 'star' },\n        { id: 'tag', shape: 'tag' },\n        { id: 'round-tag', shape: 'round-tag' },\n        { id: 'vee', shape: 'vee' },\n    ],\n}\" :layout=\"{\n    name: 'grid',\n    padding: 10,\n}\"></u-relations-diagram>\n```\n\n### 曲线类型\n\n在 edge 对象中，使用`curve`参数指定曲线类型。默认为`bezier`曲线。\n\ncurve 可选类型：\n- bezier：集束贝塞尔曲线，对于相同节点之间平行的贝塞尔曲线，会通过调整曲率使它们分型。\n- unbundled-bezier：非集束贝塞尔曲线，用于手动控制点。\n- haystack：草堆线，一般用于快速绘制两个节点之间的直线。不支持组合父节点，不能使用起始和结束箭头。\n- straight：普通直线。\n- segments：分段折线\n- taxi：直角线\n\n具体说明详见 [Cytoscape.js - Edge line](https://js.cytoscape.org/#style/edge-line)。\n\n本组件的 edge 类型的参数是对 curve 的使用方式做了简化，如果需要对曲线的参数进一步设置，请使用`element-style`自定义样式。\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: 'n0' },\n        { id: 'n1' },\n        { id: 'n2' },\n        { id: 'n3' },\n        { id: 'n4' },\n    ],\n    edges: [\n        { source: 'n2', target: 'n0' },\n        { source: 'n0', target: 'n2', 'source-label': 'bezier' },\n        { source: 'n2', target: 'n0' },\n        { source: 'n4', target: 'n2', curve: 'unbundled-bezier' },\n        { source: 'n2', target: 'n4', curve: 'unbundled-bezier', 'source-label': 'unbundled-bezier' },\n        { source: 'n4', target: 'n2', curve: 'unbundled-bezier' },\n        { source: 'n4', target: 'n1', curve: 'haystack' },\n        { source: 'n4', target: 'n1', curve: 'haystack', 'source-label': 'haystack' },\n        { source: 'n4', target: 'n1', curve: 'haystack' },\n        { source: 'n1', target: 'n3', curve: 'segments', 'source-label': 'segments' },\n        { source: 'n3', target: 'n0', curve: 'taxi', 'source-label': 'taxi' },\n    ],\n}\" :layout=\"{\n    name: 'circle',\n}\"></u-relations-diagram>\n```\n\n### 箭头类型\n\n在 edge 对象中，使用`source-arrow`参数指定边起始箭头类型，使用`source-arrow`参数指定边结束箭头类型。\n\n默认`source-arrow`为空，`target-arrow`为`triangle`。\n\n箭头的各种类型请直接看下面的示例，其它说明详见 [Cytoscape.js - Edge arrow](https://js.cytoscape.org/#style/edge-arrow)。\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: 'n0' },\n        { id: 'n1' },\n        { id: 'n2' },\n        { id: 'n3' },\n        { id: 'n4' },\n        { id: 'n5' },\n        { id: 'n6' },\n        { id: 'n7' },\n        { id: 'n8' },\n        { id: 'n9' },\n        { id: 'n10' },\n    ],\n    edges: [\n        { color: 'primary', source: 'n0', target: 'n1', 'source-arrow': 'triangle', 'target-arrow': 'triangle', label: 'triangle' },\n        { color: 'primary', source: 'n1', target: 'n2', 'mid-source-arrow': 'triangle-tee', 'source-arrow': 'triangle-tee', 'target-arrow': 'none', label: 'triangle-tee' },\n        { color: 'primary', source: 'n2', target: 'n3', 'mid-target-arrow': 'triangle-cross', 'target-arrow': 'triangle-cross', label: 'triangle-cross' },\n        { color: 'primary', source: 'n3', target: 'n4', 'target-arrow': 'triangle-backcurve', label: 'triangle-backcurve' },\n        { color: 'primary', source: 'n4', target: 'n5', 'target-arrow': 'vee', label: 'vee' },\n        { color: 'primary', source: 'n5', target: 'n6', 'target-arrow': 'tee', label: 'tee' },\n        { color: 'primary', source: 'n6', target: 'n7', 'target-arrow': 'square', label: 'square' },\n        { color: 'primary', source: 'n7', target: 'n8', 'target-arrow': 'circle', label: 'circle' },\n        { color: 'primary', source: 'n8', target: 'n9', 'target-arrow': 'diamond', label: 'diamond' },\n        { color: 'primary', source: 'n9', target: 'n10', 'target-arrow': 'chevron', label: 'chevron' },\n        { color: 'primary', source: 'n10', target: 'n0', 'target-arrow': 'none', label: 'none' },\n    ],\n}\" :layout=\"{\n    name: 'circle',\n}\" :element-style=\"[{\n    selector: 'edge',\n    css: {\n        width: 1,\n        'arrow-scale': 1\n    },\n}]\"></u-relations-diagram>\n```\n\n### 自定义样式\n\n使用`element-style`属性对本组件的默认样式进行覆盖和扩展。样式设置详见 [Cytoscape.js - Style](https://js.cytoscape.org/#style)。\n\n``` html\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: '建德私有云' },\n        { id: '滨江私有云', color: 'success' },\n        { id: '萧山私有云', color: 'success' },\n    ],\n    edges: [\n        { source: '建德私有云', target: '滨江私有云', color: 'primary' },\n        { source: '滨江私有云', target: '萧山私有云', color: 'primary' },\n        { source: '萧山私有云', target: '建德私有云', color: 'primary' },\n    ],\n}\" :legend=\"[\n    { label: '评估完成', color: 'success' },\n    { label: '评估中', color: 'default' },\n]\" :layout=\"{\n    name: 'circle',\n}\" :element-style=\"[{\n    selector: 'node',\n    css: {\n        'border-width': 4,\n        padding: 20,\n    },\n}]\"></u-relations-diagram>\n```\n\n### 事件\n\n透传所有 Cytoscape.js 事件，一般通过`e.target`获取到 Cytoscape 元素进行处理。事件对象详见 [Cytoscape.js - Events](https://js.cytoscape.org/#events)。\n\n下面是一个给节点绑定 click 事件的例子：\n\n``` vue\n<template>\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: '建德私有云' },\n        { id: '滨江私有云', color: 'success' },\n        { id: '萧山私有云', color: 'success' },\n    ],\n    edges: [\n        { source: '建德私有云', target: '滨江私有云', color: 'primary' },\n        { source: '滨江私有云', target: '萧山私有云', color: 'primary' },\n        { source: '萧山私有云', target: '建德私有云', color: 'primary' },\n    ],\n}\" :legend=\"[\n    { label: '评估完成', color: 'success' },\n    { label: '评估中', color: 'default' },\n]\" :layout=\"{\n    name: 'circle',\n}\" :element-style=\"[{\n    selector: 'node',\n    css: {\n        padding: 20,\n    },\n}]\" @click=\"onClick\"></u-relations-diagram>\n</template>\n<script>\nexport default {\n    methods: {\n        onClick(e) {\n            const target = e.target;\n            this.$toast.show('点击了 ' + target.id());\n        },\n    },\n};\n</script>\n```\n\n### 配置\n\n配置 Cytoscape.js 选项。\n\n本组件按照常用习惯，配置了一些默认参数。\n\n``` js\n{\n    userZoomingEnabled: false, // 禁止用户放大缩小，因为该功能经常与滚动冲突。如果需要，开发者可以将这个配置打开。\n    minZoom: 0.5, // 缩放的最小倍数\n    maxZoom: 2, // 缩放的最大倍数\n}\n```\n\n其它参数详见 [Cytoscape.js - Initialisation](https://js.cytoscape.org/#core/initialisation)。\n\n比如下面的配置禁用了移动位置、开启了方框选择。\n\n``` vue\n<template>\n<u-relations-diagram :data=\"{\n    nodes: [\n        { id: '建德私有云' },\n        { id: '滨江私有云', color: 'success' },\n        { id: '萧山私有云', color: 'success' },\n    ],\n    edges: [\n        { source: '建德私有云', target: '滨江私有云', color: 'primary' },\n        { source: '滨江私有云', target: '萧山私有云', color: 'primary' },\n        { source: '萧山私有云', target: '建德私有云', color: 'primary' },\n    ],\n}\" :legend=\"[\n    { label: '评估完成', color: 'success' },\n    { label: '评估中', color: 'default' },\n]\" :layout=\"{\n    name: 'circle',\n}\" :config=\"{\n    userPanningEnabled: false,\n    boxSelectionEnabled: true,\n}\"></u-relations-diagram>\n```\n\n### 复杂示例\n\n下面是一个较复杂的示例，使用了[cose Layout](https://js.cytoscape.org/#layouts/cose)。\n\n``` vue\n<template>\n<u-relations-diagram :data=\"data\" :legend=\"[\n    { label: '正常', color: 'normal' },\n    { label: '风险', color: 'danger' },\n]\" :layout=\"{\n    name: 'cose',\n    animate: false,\n    componentSpacing: 80,\n}\"></u-relations-diagram>\n</template>\n<script>\nexport default {\n    data() {\n        const data = {\n            nodes: [\n                { id: 'RDS' },\n                { id: 'K8S' },\n                { id: 'DNS' },\n                { id: 'nova' },\n                { id: 'CEPH' },\n                { id: 'VPC' },\n                { id: 'rds-on-k8s-with-floating-ip', parent: 'RDS', color: 'danger' },\n                { id: 'k8s-node', parent: 'K8S', color: 'normal' },\n                { id: 'k8s-volume', parent: 'K8S', color: 'danger' },\n                { id: 'dns', parent: 'DNS', color: 'normal' },\n                { id: 'nova-vm', parent: 'nova', color: 'normal' },\n                { id: 'ceph-ssd-volume', parent: 'CEPH', color: 'danger' },\n                { id: 'vpc-floating-ip', parent: 'VPC', color: 'normal' },\n            ],\n            edges: [\n                { id: 'rds-k8s-node', source: 'rds-on-k8s-with-floating-ip', target: 'k8s-node' },\n                { id: 'rds-k8s-volume', source: 'rds-on-k8s-with-floating-ip', target: 'k8s-volume' },\n                { source: 'rds-on-k8s-with-floating-ip', target: 'vpc-floating-ip' },\n                { source: 'k8s-node', target: 'dns' },\n                { source: 'k8s-node', target: 'nova-vm' },\n                { source: 'k8s-volume', target: 'ceph-ssd-volume' },\n                { source: 'ceph-ssd-volume', target: 'nova-vm' },\n                { source: 'dns', target: 'vpc-floating-ip' },\n            ],\n        };\n\n        // layout 使用 cose 的话，最好初始把节点拉开，否则每次位置都是随机的。\n        data.nodes.forEach((node, index) => {\n            node.position = { x: index * 60, y: index * 60 };\n        });\n        return {\n            data,\n        };\n    },\n}\n</script>\n```\n\n## API\n### Props/Attrs\n\n| Prop/Attr | Type | Options | Default | Description |\n| --------- | ---- | ------- | ------- | ----------- |\n| data | { nodes: Array\\<node\\>, edges: Array\\<edge\\> } |  |  | 图数据 |\n| legend | Array\\<{ label: string, color: string }\\> |  |  | 图例。图例项中的样式与图节点的一致 |\n| layout | string \\| LayoutOptions |  | `'grid'` | 布局。字符串类型为 Cytoscape.js 的布局`name`。LayoutOptions 参数详见 [Cytoscape.js Layouts](https://js.cytoscape.org/#layouts)。 |\n| element-style | Array\\<StyleOptions\\> |  | `'\\[\\]'` | 元素样式，包括 node 和 edge，根据 selector 区别。样式设置详见 [Cytoscape.js Style](https://js.cytoscape.org/#style)。 |\n| config | ConfigOptions |  |  | Cytoscape.js 配置选项。详见 [Cytoscape.js - Initialisation](https://js.cytoscape.org/#core/initialisation) |\n\n### Slots\n\n#### (default)\n\n用于扩充其它内容。\n\n### Events\n\n#### @$listeners\n\n透传所有 Cytoscape.js 事件。详见 [Cytoscape.js - Events](https://js.cytoscape.org/#events)\n\n","readmeFilename":"README.md"}