dd-js-library

dd-js-workspace

vue3 + vite + antv/x6 工具栏拖拽项目 业务需要的功能点目前已经都支持了，接下来，将会对样式以及antv画布工具做持续的优化

使用

npm install --save dd-js-library

main.js / main.ts

import ddJsLibrary from 'dd-js-library'
import 'dd-js-library/lib/style.css'

app.use(ddJsLibrary)

1.2.1版本功能

1、拖拽组件树种组件到画布
2、双击组件显示/修改属性
3、连接组件及其上下游
4、格式化
5、复制节点
6、序列化&反序列化

节点类型

1、d-node：圆角，支持输入输出节点——暂不启用
2、img-node：矩形，带图标，支持输入输出节点

mock数据

const compList = [{
    id: '1',
    label: 'SHELL',
    type: 'img-node',
    color: 'whitesmoke',
    title: 'SHELL',
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAMAAACbFsmhAAAAAXNSR0IArs4c6QAAASxQTFRFAAAA////////v7+/mZmZtra2oqKiqqqqnZ2dpKSkmZmZn5+fpaWlnJycmZmZoqKim5ubn5+fmZmZnJycmZmZmZmZm5ubmpqam5ubnJycm5ubnZ2dmZmZmpqanJycm5ubnJycmpqam5ubm5ubmpqam5ubmpqanJycmpqampqampqampqamZmZmpqampqamZmZm5ubmZmZmZmZmpqampqampqampqamZmZmZmZmpqamZmZmpqamZmZmpqamZmZmpqampqamZmZmpqampqampqampqamZmZmpqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZmZmZmpqamZmZmZmZmpqamZmZmpqampqampqamZmZmZmZmpqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZTrBa4AAAAGN0Uk5TAAECBAUHCwwNDg8QERIUFhcYHh8jKCkrLjEzNDc6Oz0+P0BCREVMTU5laGpub3JzdXZ4eY2SnaCjp6qur7Gys7W5u72/wMPExsfIzM3Q0dLX4OLk5enq7e/w8fLz9PX3+Pr+lq1DxAAAAP5JREFUOMvd1FszglEUxvGng0RySCHSASUJCaHQQU55C1FUDvF8/+/gord407bu+1/u+c2aPXvWbGDo2yiWFOVCXROkupZDRwnj+UGGPEqR2X2SXNZR0mA+rB5yeuyLXlODZGAgYrZEXhRI7YRqZOwHaceKHn+huOpxTvvQzKSMTPXmkjwpz+cFEY1es+aREMZv+eSWEJx3fHBJCFP3rIjIUWbVLCDbDV+8wqSRc7Z8wsUtZ3wPSk9wyHYYwGwqrRf9i6ztzwgAbPWW5NKA9hgHsLoIALDHEp225/om7ahWJddDuyz75we2/ka/jlb+2d7Xie7QzStNUWFt+L+mb0aLhpoPTGQ8AAAAAElFTkSuQmCC',
    imgHover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAAAXNSR0IArs4c6QAAASxQTFRFAAAA////gP//QL//M5n/SZL/LqL/KpX/O53/N5L/M5n/MI//LZb/K5z/M5n/Lpf/LJD/KpX/KpD/KZT/LJL/LZP/LI//KpT/LJD/KpL/KJH/LJP/KpD/LJH/K5P/KpL/KZD/KJL/LI//K5P/KZL/KZD/KJD/K5L/K5D/KJD/KpH/KZD/KpD/KZH/KI//KpD/KZD/KZH/KJD/KI//KpH/KI//KZH/KY//KZD/KZD/KZD/KZD/KZD/KJD/KI//KZD/KZD/KY//KY//KI//KJD/KY//KZD/KI//KZD/KZD/KZD/KJD/KY//KI//KJD/KI//KJD/KY//KY//KI//KJD/KI//KJD/KY//KZD/KI//KJD/KI//KZD/KY//KZD/KJD/KJD/KZD/KJD/KI//qfRwfQAAAGN0Uk5TAAECBAUHCwwNDg8QERIUFhcYHh8jKCkrLjEzNDc6Oz0+P0BCREVMTU5laGpub3JzdXZ4eY2SnaCjp6qur7Gys7W5u72/wMPExsfIzM3Q0dLX4OLk5enq7e/w8fLz9PX3+Pr+lq1DxAAAAPxJREFUOMvl1MdSAkEURuEfxYhZUTEg5oSKCbMgZgRzxoCe938HF1oDIzQ9e862v7pV3XWrpepq9ihtKDlaUBHM5QIOi7lP1ndgMw6JNYBhh6241Kc/CB1N34R8L8CIgZFIw3EKMrtUYu6KWWbL0J2LRU1PtVfCOtu8MN/j66CXaQc89XtgDWc8BO1MzRfc99iZWq+46bIztV9z6YEFstzWWFn9Oc8h67S6Q3JD1ivU7vMRsT/IBvlJSd3x7b9myjF//mtKkhacFTr5x1aJShofkCQ1zsV+W+wtmbZkWqRkEVsmG+4r2/Q7YYeNVdjxt5bC6PnTjKHURJX9bD8Ovoaaq/CXIwAAAABJRU5ErkJggg==',
    level: 1,
    desc: '描述',
    children: null,
    detailMode: 'dialog',
    // status: 'success'
}, {
    id: '2',
    label: 'Data-X',
    type: 'img-node',
    color: 'wheat',
    title: 'Data-X',
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAMAAACbFsmhAAAAAXNSR0IArs4c6QAAAddQTFRFAAAA////////qqqqv7+/mZmZqqqqtra2qqqqoqKiqqqqnZ2dpKSkmZmZn5+fpaWlnJycoaGhmZmZnp6eoqKim5ubmZmZn5+fm5ubnp6emZmZnJycmpqanZ2dmZmZm5ubmZmZm5ubnZ2dmpqamZmZm5ubnZ2dmpqamZmZnJycmpqam5ubmZmZmpqampqampqampqanJycmpqamZmZm5ubmpqampqam5ubmpqamZmZmpqampqamZmZmpqamZmZmpqa7OzsmpqamZmZmZmZmpqam5ubmpqam5ubmpqa8/Pzm5ubmpqampqampqamZmZmpqamZmZmZmZmpqampqamZmZmpqamZmZmZmZmZmZmpqampqamZmZmpqamZmZmpqamZmZ7Ozsurq6mpqampqampqamZmZmpqa0NDQ4uLimpqampqampqampqamZmZmpqamZmZxsbGmZmZmZmZmpqampqamZmZmZmZ7u7umpqamZmZxcXFmZmZmZmZmpqamZmZmpqas7OzmZmZycnJmpqara2tuLi41dXVmpqanp6emZmZmZmZmZmZmpqamZmZo6OjmZmZmpqamZmZmpqa8vLympqanp6epaWlmZmZn5+fo6Ojqqqqs7Oz29vbywBn/gAAAJd0Uk5TAAECAwQFBgcJCwwNDg8QERITFBUWHB4gISIjJCYnKCktLi8wNzg5Ojw+P0BBREdJTE1OUFdYW1xdX2BlZ2hsbW1vcXN5en5/gYGEiImNj5CRlJednqSlqKqrrK+xsrW5ury9v8LDxMTEycrMz9DU1dXX2Nnb3N/f4OLi5ufo6erq6+zt7e7u7+/w8fP09fb4+fr8/P7+/uZb3loAAAGWSURBVBgZzcH5X4sBHMDx756JlRGqlRzdB+VKMoUILVE6pJM0OUrkmFtPC8mxtbbGR/hja89Ta2vP8/zm9fJ+yz9kt4klR033w3eR8JuxzkNpYmxne5C4ueZ0MdD0lSTvT8pGjl5StNslScY4Bm7aJYFtEEMdksCDiXqJyw1hYsYpa3ow1SqrXFFMBRyia8RCjei8WOgWXRDUA1VnQ2iWfqIZOk3dHZgUzTZgSnl05CLRbxH48BkIhAhkDeSEYU40BYCqMFr4vbSyYP7vZedtnhTm36A1o40VDokpAlSF8ZyZ/tdlfkYaYPZFi5tRecoKp8RkAarCrTzvvlMuPyMN/HpwtNrNif3ngaBobGGYUp7X1rWciRT5eXv/x+9zNLtfZvq2T4NPdBOglpUf/9i35/CxT/xZfPVlb2XtpWseLlyHQdF5sFAvuhLMRXbJqruY6pE15ZhZyJW4XkxckXVbH2PIu0kS7J7GgG+HJMmfJMW9bNnAOUCyaNdmSXVwjATDJWKs4uozYqITnmKxsCWvotSVJv+/ZeXgg0iCb1IyAAAAAElFTkSuQmCC',
    imgHover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAAAXNSR0IArs4c6QAAAdpQTFRFAAAA////gP//Var/QL//M5n/Kqr/SZL/Oar/LqL/KpX/O53/N5L/SaT/M5n/MI//LZb/K5z/KJT/M5n/MZL/Lpf/LpL/KpD/MI//LpP/LZb/LJL/K5X/KJT/LpD/LZP/LI//LZP/LJD/K5L/Ko//KpD/KZL/KI//LJH/KpD/KZD/KJL/LI//K5H/KZL/K5D/Ko//KJD/K5L/K5D/KY//KZD/KZH/KpL/KpD/KZH/KJH/Ko//KJD/KpD/KpH/KJD/KpH/2uz/KZH/KZD/KpD/KI//KpD/KJD/KJH/KpD/4/H/KZH/KZD/KY//KpH/KZD/KY//KJD/KY//KZD/KZH/KJD/KI//KJD/KZD/KZD/KI//KJD/KZD/KJD/KI//KZD/KY//1+r/bbP/KI//KJD/KY//KZD/KI//nMz/wuD/KY//KJD/KJD/KZD/KI//KY//KZD/hcD/KJD/KJD/KY//KY//KZD/KJD/2u3/KY//KY//hcD/KY//KZD/KZD/KI//KJD/Xav/KI//jMT/KY//U6b/arL/p9H/KZD/MpT/KI//KJD/KZD/KY//KZD/PJn/KJD/KY//KZD/KJD/4/H/KJD/MpX/P5z/KI//M5X/PZr/S6L/X6z/stf/6XNlIwAAAJh0Uk5TAAECAwQFBgcJCwwNDg4PEBESExQVFhweICEiIyQmJygpLS4vMDc4OTo8Pj9AQURHSUxNTlBXWFtcXV9gZWdobG1tb3FzeXp+f4GBhIiJjY+QkZSXnZ6kpaiqq6yvsbK1ubq8vb/Cw8TExMnKzM/Q1NXV19jZ29zf3+Di4ubn6Onq6uvs7e3u7u/v8PHz9PX2+Pn6/Pz+/v66C8EpAAABl0lEQVQYGdXB+UOLcRzA8c+eickIpZUclW63mkwROVoqkSTK1eRoRcXcelqu0GY24+3of5Xas/a057t+8oPXS/41u02W4ajtHn4Ziz4f6tqTJSobO8MkTbesFksnPmLy6pCkc/SSptMuS2T7sXDNLia2fiydFxMvCg2SoiCCwpRTFvWg1CZJrjhKIYcYjpFBrRh8ZNAthjDoNbuaIsz7+Z15V49QfwtGJWEdMKHd33eK+KcYvH4PhCKE8vryozAtCcWArjFYMlNeXfx59szam4yVFF2iLfsscxyyoBTQNfz5U1eeVQQZaIR3j1s9DMo4c5yyIA/QNa4X+rYddgUZaOTHvf27PRzc3gyEJcEWhQntkbu+9WisNMiLu99+HafF82R9IGcSAmIYAb2isu7N5S17D7zl99enH7ZWu0+f83LyIvSLwUsGDWIoQy2WK0m3UeqRRZWofCmQFL0otEuqNQ+w5FshJpsnsRDYIEsUjZLmziZJ4+zDLH5hpVjZOUSKG2WiUtXxkL/iI94dktGqwqpyV5b8R/4AFDmGNLkFgHsAAAAASUVORK5CYII=',
    level: 1,
    desc: '描述',
    children: null,
    detailMode: 'dialog',
    // status: 'fail'
}, {
    id: '3',
    label: 'Python',
    type: 'img-node',
    color: 'wheat',
    title: 'Python',
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAMAAACbFsmhAAAAAXNSR0IArs4c6QAAAqlQTFRFAAAA////////qqqqv7+/mZmZqqqqtra2n5+fqqqqoqKiqqqqnZ2dpKSkmZmZn5+fpaWlnJycoaGhmZmZnp6eoqKim5ubn5+fmZmZnZ2dl5eXm5ubnp6emZmZnJycl5eXm5ubnp6emZmZmJiYnZ2dmZmZm5ubnp6empqanJycmZmZm5uboaGhn5+fnJycmZmZm5ubnZ2dmpqanJycmZmZnp6em5ubnZ2dnJycmZmZlpaWl5eXm5ubm5ubmJiYmJiYmpqamJiYnJycmpqamJiYm5ubl5eXmpqamJiYmpqalZWVm5ubmpqanJycmJiYm5ubmZmZmJiYm5ubmpqamJiYm5ubnJycmZmZl5eXmpqamZmZmZmZmZmZmZmZmpqampqal5eXmpqamZmZmJiYmZmZmJiYmZmZl5eXmpqamZmZmJiYmZmZmpqamZmZmpqamZmZmJiYmpqamZmZmpqamZmZmZmZmJiYmZmZmJiYmZmZmZmZmJiYmZmZmZmZmJiYmZmZmJiYmZmZmJiYmpqal5eXmJiYmZmZmZmZmJiYmJiYmpqamZmZmJiYmZmZmJiYmpqampqamJiYmJiYmJiYmZmZmpqamJiYmZmZmJiYmJiYmpqamZmZmZmZmJiYmZmZmJiYmpqamJiYmZmZmJiYmZmZmJiYl5eXmZmZmJiYmJiYmJiYmpqamZmZmpqamZmZmZmZmZmZmZmZmJiYmpqamZmZmpqamZmZmJiYmZmZmZmZmZmZmpqamZmZmJiYmZmZmJiYmZmZmpqamZmZmZmZmZmZmJiYmZmZmZmZmZmZmJiYmZmZmZmZmpqamZmZmZmZmZmZmZmZmJiYmZmZmZmZmZmZmJiYmZmZmZmZmpqampqamZmZmZmZmZmZmpqamZmZmZmZmpqamJiYmZmZMtN1HgAAAOF0Uk5TAAECAwQFBgcICQsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMlJygpKissLS4uMDEyMzQ1Njc3ODk7PD1AQEJDRUdISElNT1NTVFZXV1hYWVlaXF5gYWFiZGVlZmdpbG1vc3R7fH1+f4CBgoOHiImJiouLjI2Oj5CRlJSWl5ibnJ2enp+foqOlp6ipqaytra6usLKztba2t7e4urq7vL2+v7/BwcPDxMXFxsjJycrKy8zNzs/Q0dHS09TV1tbX2Nna29vc3d7f3+Lj5OTl5efo7e7z8/T19vf4+Pn6+/z8/f7+pTOBRwAAAmpJREFUGBnFwfdfzHEcB/DX9xrXklJKxqUQCQ0jUXbZfM1KA4mmQkZR4mxlRGRkRBSSUKESZZXskUSnz/svcZ/7Vo9H971+8YvnE//A2FY1ZJizg5UCPRG8YnJuPX/7ob7sWlb4IBhkmvyOtDTfiCuZAkOWtDaf2rB0hveIcbNWZDRRoyvkLE6zZOMAT0gWv6YUBWT63GEBvkT+kKgpzwQyDuVs7NBfNB+SOLreCzKO5TQB3jPRIY4KrdGN4DJ+WcgzSljOiX2hFUc3fcaolOhis7u6lVEnliUAiKf2tp91GU7oYHeSqOrqpU7Fc6EVT5+qa7/Sg97QMU6gjxH9zMw7WYCLp2KV09THf9YJ4BxKKVGAvjgqtAaCfhfZgpvU2ugCmQN01gSwK2v2BbeaLltAn18DbVMAwnEKB7eL9kBi5xkZrxO77yXVj4TWVpYG7jAlQcf//Gfq0hAKLpoOgsumWHAL3tOX+zckeds9oLOGjoHLpFRouVZS4UR7a4mpApJEygS3nnJNACGanrpBn3CEYsBNpydOgJBNmyHjWPHDD5xzrSYIsLrCRMgs1JTYgzNSU5EKlgVMhD7He2yjAJ3Rb6hWnVrDRGg5rV3VJSJHU+WCDmIlIyImAhDUrANxdfPQZXDYjv21TITWnAsXuVKq2Zu5M8wD3VgWMBGcmVI5argylPLNIWNZwERIfNta3YMp3xwyynMUDEkgkX8kyzWGjFEanbCBRJzdv4TSBci5v9LcnmwrABDsp51pb/KCIYGP6PvdQ1uiUo7ea6EXi2CY26aHLcSIqLki3Rs9GugTEp0UtdJrgID/6C+AUREYJ6AaCAAAAABJRU5ErkJggg==',
    imgHover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAAAXNSR0IArs4c6QAAAelQTFRFAAAA////gP//Var/QL//Kqr/SZL/Oar/M5n/KpX/O53/N5L/LZb/K5z/KJT/M5n/Lpf/LJD/KZn/LpL/LJX/KZT/LpP/LZb/LJL/K5X/KJT/LpD/LI//K5L/KpT/KZH/LZP/LJD/K5L/Ko//KZT/KJH/LJP/K5D/KpL/KI//KpD/KpL/LI//K5P/KpH/KZL/KZD/KJL/K5D/K5H/Ko//KZH/KZL/KJD/K5L/KpH/KY//KZH/KI//K5D/K5L/KpH/KZD/KI//K5H/KpL/KpD/KZH/KZD/KJH/Ko//KJD/KpD/KpH/KY//KZD/KY//KpD/KZD/KZD/KI//KpD/KY//KZD/KZH/KJD/KpD/KZH/KpD/KY//KZD/KI//KJD/KpH/KZD/KZD/KJD/KY//KZD/KZH/KI//KZD/KZH/KJD/KY//KZD/KJD/KZD/KZD/KZD/KZD/KY//KJD/KI//KY//KZD/KJD/KY//KY//KZD/KI//KJD/KJD/KY//KZD/KY//KI//KJD/KZD/KZD/KY//KJD/KJD/KY//KZD/KZD/KI//KJD/KI//KZD/KY//KZD/KZD/KI//KZD/KZD/KI//KI//KZD/KY//KZD/KI//KJD/KJD/KY//KZD/KY//KJD/KI//KJD/KI//H6PTKgAAAKJ0Uk5TAAECAwQGBwkKDA0OERITFBYXGRwdHyEiIyQmJykqKywtLi8wMjM0NTY5PD1AQkNERUZHSElKS0xNT1BRUlNUVldZWltcXV5fYGVnaGlqcHN1d3l6e3x9foGEh4mKi4yNjo+RlJWWmZqdn6Chpaanra+wsbK0tbi5u7y9vr/AwcLExcbHycrMzc7P0NHS1tna3N3h5+vw8/T19vf4+fr7/P3+83t5LAAAAehJREFUGBnNwftbS3EAB+DP2pmJXGpyqLGGWKQt2sjIiGIVIoSa69BM5BZtUkwil1yGpmz7/KXO6Xu29uyc/OZ5vC/+IbPnwr3J6S/vntzp2YRFuT5TkflO1f0yGFs7+/PirqqVJZDKN7Z/4HMTDIXow84tEKzv6YehIS6rI+shdLAfhmKUqn8zAMHLKAzFKGFrEzReRqFnqbYnWGNXVULlZRTFGsdnuWAPFD5m078mj6NALzl2+2bO1XIofPz2MpFkCHm7+bUWxXyMAsvj2R3IeUg3dHyMArClB6Gxzn2EXicvQ/F4xgLBxVvQWTLFg1Cc5WYIx9gJjbnWK3RMcUKCIsAjEE7Sj3ml4STzJmSo3DwB4TS9UK2ZZnL4rnAlIGHedp6BEGQbFKZnHChFsWYGIXjYB0UD4ybodLMRwgqOQdHD/dAbSVmhSWRsAAZYBZ3KzBByuhgFEKEMnRvcixzLaw53tb6gDNU6Z96285lRLLA9pUqGoomFxitQqOZQ8BVlKFZduq4a5Ggw2OY0o1iEMjT29XAwDEMRyhDq0nMOB8MwdI1OCM1kvYshGGplLzSHD6CfR2FIepM5txRCWV/2kwXGVsf548GpFk9L96MU31ZgMSX7RlJUzcTaJfyN5HD7GzaY8T/4Ayc6qS17WRLVAAAAAElFTkSuQmCC',
    level: 1,
    desc: '描述',
    children: null,
    detailMode: 'dialog',
    // status: 'pending'
}, {
    id: '4',
    label: 'SQL',
    type: 'img-node',
    color: 'wheat',
    title: 'SQL',
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAMAAACbFsmhAAAAAXNSR0IArs4c6QAAAhBQTFRFAAAA////////qqqqv7+/mZmZqqqqtra2n5+fqqqqmZmZoqKinZ2dpKSkmZmZn5+fpaWlnJycmZmZoqKim5ubn5+fmZmZoaGhnp6emZmZnJycn5+fm5ubnp6emZmZnJycn5+fmpqanZ2dmZmZnp6empqanJycm5ubnZ2dmpqanJycmZmZnZ2dmpqam5ubnZ2dmpqam5ubnJycmpqam5ubmZmZm5ubmpqamZmZmpqanJycmpqampqanJycmpqam5ubmZmZmpqam5ubmpqamZmZm5ubmpqam5ubm5ubmZmZmpqampqampqam5ubmpqampqamZmZmZmZm5ubmpqampqamZmZmpqamZmZmZmZmZmZmZmZmZmZmpqampqamZmZmpqampqampqampqampqamZmZmZmZmpqampqamZmZmpqampqampqamZmZmpqampqampqamZmZmZmZmpqampqamZmZmpqamZmZmpqamZmZmpqampqamZmZmZmZmpqamZmZmpqampqampqamZmZmpqamZmZmpqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZmpqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZmZmZmpqamZmZmpqamZmZmZmZmpqamZmZmZmZmpqamZmZmpqamZmZmpqampqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZmpqamZmZpRRZ2gAAAK90Uk5TAAECAwQFBgcICQoLDQ4PEBESFBYXGBkbHR4fICEiIyQlJicoKissLi8wMTI0NTg5Oj0+P0BBQkRGR0hJTE1OT1BRUlNVV1hcXl9gYmVmaGpsbnBydHZ5fYCChYeIiYqLjZCSl5mbnJ2en6Gio6Smp6iqq6ytrq+xsrO2uby9vr/AwsPFxsfIycvMzc7R09TV1trb3d/g4eLj5OXm6err7O3u7/Hy9Pb3+Pn6+/z9/rq41S0AAAIISURBVDjLzdTZV1JRFAbwT7xk5XDVLMvKTMUsRbI0tGzSsIEib9BspYVNNmdRJmlZNBlFmENkEFJCIt+/2EMDnMtdy8faT+ec9Vt77b3vPQf4r0NaXt3Qam1vqi3N1gb65vOvovwTiQ839xem5XB8IpmYfHbves/V2wO+GMnopWLB5L0gR8+a5WTeGvsTMrQpFfVyco9Onb3Kzc+ptYVZqVFmppdbUrZktz4dtcywVUD0dRQJYuH2flKFAmTijVPZZVq31mBsPnjG/Y2MhVQo1zY8RyFGO1c+UCEJyG+09z5+7Z+aeO/pO9leDkADpYcaVWh9yhF14ZZMtakeVHdHjnU1Ffw9yDI6hpk2AvsYSQY8rhuXr/UN+n+QjF7wqAuXtnV748kBBO5al2h3p69o2Wtz2K27TbJmdyVaIyipyhXQu7p5f26S9Bw2ZABYXN+YByCjbHMOkG+UU1HPLMkwUPuFjDRg9UsydgRt3CEUvtT+MEjgFjcapx/hafSQaYj1agQA5YCTV2pkrKITKONFAX1n6e9VkWuWb9dvpQ1A7LmAXPSbf60KDfK+8PgGngBk9guo2Ed6j9YtALxT2XAnCj6Or0AnOwSEnHNfSc4AO+emR3gf5kg8xIGsNkaCwWCSLTpwZ4IAKo+dskjAMkfco8MaRVEURZypcK2Ps2v+J0Z32iL9q+ftJ1uy2l7X8i0wAAAAAElFTkSuQmCC',
    imgHover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAAAXNSR0IArs4c6QAAAexQTFRFAAAA////gP//Var/QL//M5n/Kqr/SZL/QJ//M5n/LqL/KpX/O53/N5L/M5n/MI//LZb/K5z/KJT/Lpf/LJD/KpX/KZn/MZP/L5f/LpL/KpD/MI//LpP/LZb/LJL/K5X/KZH/KJT/LZP/K5L/KpT/KZH/LZP/K5L/KpL/KJH/LJP/K5D/KpL/KpD/K5P/KpD/KpH/KZL/KZD/KJL/K5H/Ko//K5D/KY//KZH/KI//K5D/KpD/KpH/KZD/KZH/K5H/KZH/Ko//Ko//KJD/KpH/KZD/KpH/KZD/KI//KpD/KpH/KZD/KZH/KJD/KpD/KZD/KZH/KJD/Ko//KY//KZH/KJD/KpD/KZD/KI//KpH/KZD/KY//KJD/KpD/KY//KZD/KZD/KZD/KJD/KZD/KY//KZD/KI//KZD/KZD/KJD/KY//KJD/KI//KZD/KZD/KJD/KJD/KY//KZD/KI//KJD/KJD/KY//KZD/KI//KZD/KZD/KZD/KY//KJD/KI//KY//KZD/KI//KJD/KI//KZD/KY//KZD/KJD/KZD/KI//KJD/KJD/KY//KZD/KY//KI//KJD/KI//KJD/KZD/KZD/KJD/KI//KZD/KY//KZD/KI//KJD/KJD/KY//KZD/KY//KJD/KI//KJD/KI//meMr/AAAAKN0Uk5TAAECAwQFBgcICgsMDQ4PEBESExYXGBkaGxweICEiIyQlJigqKywtLzEzNDU2Nzs8Q0RFRkhJTlBRUlNVVldYWl1gYmVoam1xcnN0dXZ4enx9foCChIWHiouNjpCRk5SVl5qeoaKjpKeorLCxsrO1t7i5ur2+v8DDxMbHyMnKy83O0NHS09TW2Nrd3t/g4eLk5enq7u/x8vP09fb3+Pn6+/z9/mSkwPAAAAIBSURBVDjL1dT7V8thHAfw97fVLi3CsoyQNhtJFho1cq+5FEm+rFxrZilFWnSRGa3RYmXDWH239z/qB+P0vXROvzk+P33Oc17POc/7uQH/SRVt2V13uN6+1bA2cVwemM+zUEtjt9wlGqjlDUlKC9PhkdFXsQxJLl4vUyDjEzIVPOPQ/RnY5vHHyQ9OObvDVJtZMVU4+o5x+SIXeVBjIaY5HpINkFc0WG2KTQrG8WN6Odr3YIUq9p1MD15rqrVtNm20Ohpb++ZJZlTMdiNBeX17VDeoYsWA47T/xVwyy3z609TDS24joMkKZRD+tmpm0zq/KRWbrVcha1CdlJxosxetMi2Ps1Sz22mSX6dDd8Wum72B8GeSHIqoI5SfC31ZtR3SZKdjjaTC9obz7d09/s5W7169dlKLVtL9jRUKNl61jjdAcjnk2QQAQlV1MQCYdwqA0WqQs2GS+fdAdYxMuGAZyDF5As30KCK4/BGJQD+9x3+MYUjq8kZzLjUDYHYD/ey27im1MQC4eF/BsqwsdLtmKA3vOMILgJB9qWCjfG3/3ekqajoyswfYAZTyuYLVJJkbOWUDEF3Q4RktyVg5fGxXMFQGV0gmgLOMP5XCOLm8FOXbsmZ+jEQismtzdeInATTc67u4AXD2cNIEpyiKoqjYZL3ssfbSt57fyRDwlfzjD/IXv5LKA8lmV0IAAAAASUVORK5CYII=',
    level: 1,
    desc: '描述',
    children: null,
    detailMode: 'dialog',
    // status: 'warning'
}, {
    id: '5',
    label: 'Spark',
    type: 'img-node',
    color: 'wheat',
    title: 'Spark',
    img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAmCAMAAACbFsmhAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAA////////qqqqmZmZqqqqtra2n5+fqqqqmZmZoqKiqqqqnZ2dmZmZn5+fpaWlnJycmZmZnp6eoqKin5+foaGhnp6emZmZnJycn5+fm5ubmZmZmpqanZ2dmZmZm5ubnp6enJycnZ2dmpqanJycmZmZm5ubnZ2dmpqam5ubnZ2dmpqanJycnJycmZmZm5ubnJycmpqampqam5ubmpqanJycm5ubmpqam5ubm5ubm5ubm5ubmZmZm5ubm5ubmZmZm5ubmpqampqamZmZmpqam5ubmZmZmpqamZmZmpqam5ubmpqampqamZmZmZmZmpqamZmZmpqampqampqamZmZmpqampqampqamZmZmZmZmZmZmpqampqampqamZmZmpqamZmZmpqampqampqamZmZmZmZmpqamZmZmpqampqampqampqampqampqamZmZmZmZmZmZmpqamZmZmZmZmpqampqamZmZmZmZmpqamZmZmpqampqamZmZmZmZmZmZmZmZmpqamZmZmpqamZmZmpqamZmZmpqamZmZmZmZmpqamZmZmpqamZmZmpqamZmZmpqamZmZ7a4xowAAAJB0Uk5TAAECAwUGBwgJCgsMDQ8QERIUFRYYGx0eHyAhIyYnKCkqLC8wMTIzNDU4OTo7PkFCQ0RJSkxNT1FUV1leX2FjZGZqb3F0dXh5fX5/gYOFh4mKjY6QkZKVl5mbnqKkp6qur7Gztbe5vb7AwsXKzM/Q09XW19jZ29zd3t/g4+Tm6+zt7u/x8vP09fb3+Pn7/P3+yY5kHQAAAYpJREFUGBnVwflbDAEAx+Hv7CQR1rFSrsKmpBVJjhxFiEVLbtZtHDlSZFeZlrWOpPn8ySZ5mqPnmf2xp/fVwlp/tEbl1Np82akyLGBoiSKtchiFtCLthV3v+V2vKGcoma0OLwz9t6xC89znmXQVjklmY8/tV0WmOxU2xkVpeQ6793GRWWmFJKBDUpvDjG9Pzl5wnG0KOQBr5LrJ10e9zaaSJa4rZPM9PmjGih0xuWo/M1Qtv6ZLw8AdeeLvKGySJ5nJ4xob2Ko5lc/5uVtz9rzB9elyiyGPkeVPpzwT8LG/WUH9cEIec5p8h6GgLWDJ7ykw0l2lgJdMbZRP9ck8YKfXyWc/3FCAeXgQyMbk85rJhEJSD08p4BBkVE5smFJc8xxs16zk+e2SuuCcQowMTZJWV0h1kLuSqswzUaWgGohLibf7JOM7LjsHKxWUoiDVjXJNUsNp6xcuSyFdDKp+nKkj+mdpW9/dgYRC+sg22vxoV5RbWEUKLYr0ABhvULTjk4xsUDlrW+NaPP4CQl16gd1J7B0AAAAASUVORK5CYII=',
    imgHover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAAAXNSR0IArs4c6QAAAbNQTFRFAAAA////gP//Var/M5n/Kqr/SZL/QJ//Oar/M5n/LqL/KpX/O53/M5n/MI//LZb/K5z/M5n/MZL/Lpf/KpX/L5f/LJX/KpD/KZT/MI//LpP/LJL/KJT/LpD/LZP/LI//K5L/KZH/K5L/Ko//KpL/KZT/KJH/LJP/K5D/KZL/KI//LJH/K5P/KZD/K5H/K5P/KpH/KZL/Ko//KZH/KJD/K5L/KpH/KZH/K5L/KZD/KI//KZD/KJH/KpH/KZD/KZH/KJH/KZD/KZH/KZD/KpH/KZD/KJD/KI//KZH/KJD/KJH/KpD/KZD/KJD/KpD/KY//KZD/KpH/KZD/KY//KJD/KI//KZD/KZD/KI//KY//KJD/KY//KI//KZD/KZD/KZD/KZD/KJD/KZD/KZD/KJD/KY//KI//KJD/KY//KY//KJD/KJD/KJD/KZD/KI//KZD/KZD/KZD/KJD/KJD/KY//KY//KZD/KI//KJD/KJD/KY//KJD/KI//KY//KI//KZD/KY//KZD/KZD/KJD/KI//KZD/KY//KZD/KI//KJD/KJD/KY//KY//KJD/KI//KJD/KI//vOsVVAAAAJB0Uk5TAAECAwUGBwgJCgsMDQ8QERIUFRYYGx0eHyAhIyYnKCkqLC8wMTIzNDU4OTo7PkFCQ0RJSkxNT1FUV1leX2FjZGZqb3F0dXh5fX5/gYOFh4mKjY6QkZKVl5mbnqKkp6qur7Gztbe5vb7AwsXKzM/Q09XW19jZ29zd3t/g4+Tm6+zt7u/x8vP09fb3+Pn7/P3+yY5kHQAAAYlJREFUGBnVwflbDAEAx+Hv7CQRlqyUq7Ad0ookR4guZdGSm3UbR44U2VWmZa0jaT5/skk9mtnpaX7lffVP2HS8UuGqbD7VK5QFjKxQiHUO45BUiP2w5y0/a7S8Pgpms8MzQwtWlWgJd3kiXYYTkll3+uaLPLPtCprgvLQ6g93zMM+8pAJi0CapxWHOl0dnzjnOTgUcgg1yXefzg55GU/ECVxWw7Q7vNGfN7ohcVR8ZKZdfw4VR4JYWRd+Q2yqveCqLa2Joh/4qfcr3vfLY9wrXh4tNhhYZaX61y2sK3g82ym8QOuVlzpJtM+S3HSz5PQbGTpXJ5zkzW+RT3pUF7ORGeRyEaypiHh0G0hF5vGQ6poDE/W75HIGUwkVGKUS1hMOtmhc/u0tSBwwowEjRIGl9iVQNmUuJ0ixTZSpWCVEp9vqAZHzFZWdgrYolyEnV41yRVNtr/cBlKaCDYdVMMnNMf6xs6b89FFNAP+k6m2+tWt4NrDy5JoW4B0zWKszJacY2K1xFc1T/od9QRHqBvM4OIwAAAABJRU5ErkJggg==',
    level: 1,
    desc: '描述',
    children: null,
    detailMode: 'dialog'
}]
export default compList

引用示例

<script setup>
import DdPanel from "../packages/DdPanel/src/dd-panel.vue";
import compList from "./mock/compsNoTree.js";
import {reactive, ref} from "vue";

const dialogVisible = ref(false)
const form = reactive({
  formValue: {}
})

const openDialog = (e) => {
  form.formValue = e
  options.value = []
  console.log(1, e)
  getAllNodes().forEach(item => {
    console.log(item)
    if (item.data.content.id !== e._node.id) {
      options.value.push(item)
    }
  })
  dialogVisible.value = true
}

const handleConfirm = () => {
  form.formValue._node.setData({
    content: {
      ...form.formValue,
      isNew: false
    }
  }, {
    overwrite: true,
    deep: true
  })
  dialogVisible.value = false
}

const save = (e) => {
  console.log('save', JSON.stringify(e))
}
const closePanel = () => {
  console.log('关闭')
}
const options = ref([])

const ddPanelT = ref(null)
const getAllNodes = () => {
  return ddPanelT.value.getAllNodes()
}
const getAllLines = () => {
  console.log(ddPanelT.value.getAllLines())
  return ddPanelT.value.getAllLines()
}

const cancel = () => {
  dialogVisible.value = false
  console.log(form.formValue)
  if (form.formValue._node.data.content.isNew) {
    ddPanelT.value.dltNode(form.formValue._node.id)
  }
}
</script>

<template>
  <div style="width: 100%;height: 100vh">
<!--    <dd-panel ref="ddPanelT" :graphJson="graphJson" :comps="compList" @openCompDialog="openDialog" :title="'创建工作流'" @save="save" @closePanel="closePanel"></dd-panel>-->
    <dd-panel ref="ddPanelT" :graphJson="[]" :comps="compList" @openCompDialog="openDialog" :title="'创建工作流'" @save="save" @closePanel="closePanel"></dd-panel>
    <el-dialog  v-model="dialogVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="form.formValue" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="form.formValue.title" />
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="form.formValue.label" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.formValue.desc" />
        </el-form-item>
        <el-form-item label="前置节点">
          <el-select v-model="form.formValue.preId" multiple>
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.data.content.label"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style></style>

淘宝源：http://registry.npmmirror.com/ npm官方源：https://registry.npmjs.org/ npm config set registry=源