首先预览地址：http://oxoyo.co/X-Flowchart-Vue/然后仓库地址：https://github.com/OXOYO/X-Flowchart-初衷Vue的实现很简单，基于Vue开发一个流程编辑器。项目之初研究了jsplumb，但不是很理想。后来开始直接用SVG堆一个，开发后第一个版本基本满足需求。经过3个版本的迭代，算是有了比较完善的编辑器，下面简单介绍一下。V1.0该版本使用原生SVG开发，实现了基本的节点拖拽、连接、属性配置、右键菜单、数据导出等功能，基本满足项目需求。V2.0的原计划是在V1.0的基础上进行功能优化和功能扩展，但经过一段时间的开发，整体设计不理想而搁置。V3.0是基于antvis/G6实现的，是前两个版本的重构。功能目前实现的功能如下表所示：功能状态快捷键工具栏右键菜单notelogo???Logoundo?ctrl+z??undoclearLog?ctrl+shift+l??clearoperationlogredo?ctrl+shift+z??redocopy?ctrl+c??copypaste?ctrl+v??pastedelete?Delete??deleteclear?ctrl+shift+e??clearcanvaszoom??zoomzoomIn?ctrl++??ZoominzoomOut?ctrl+-??缩小适合?ctrl+0??适合屏幕实际尺寸?ctrl+1??实际尺寸填充???填充颜色lineColor???线条颜色lineWidth???线宽lineStyle???线条样式lineType???线型startArrow???起点endArrow???终点toFront???放到最前面toBack???放到最下面selectAll?ctrl+a??全选marquee???box选择edit???编辑预览???预览上传???上传下载???下载语言???语言github???Githubfeedback???反馈撤消，清除日志，重做撤消，清除日志，重做，存储日志数据状态,通过突变更新日志数据。statcurrent是当前画布上的数据。list是操作日??志列表。///src/store.jsexportdefaultnewVuex.Store({state:{editor:{...//操作日志log:{current:null,list:[]}...}},...mutations:{...'editor/log/update':(state,data)=>{...}}})更新日志数据由commiteditor/currentItem/update更新，其中需要记录操作//updateoperationLog_t.$store.commit('editor/log/update',{//Operationtype:undo,clearLog,redoaction:''})copy,pastecopy,paste,通过剪贴板存储复制的节点数据，通过addItem方法将节点粘贴到画布上。///src/components/Editor/Index.vue...//数据定义data(){return{...clipboard:{data:null,//pastecountercount:0}...}}...handleToolTrigger(info){...switch(info.name){...case'copy':(()=>{//FIXME目前只支持节点复制，不支持边复制，边只能通过Dragand下降生成letdata=_t.currentItem?_t.currentItem.filter(item=>item.type==='node'):[]_t.clipboard={data,count:0}})()breakcase'paste':(()=>{letdata=_t.clipboard.data_t.clipboard.count++if(data.length){data.forEach((item,index)=>{letmodel=item.model//计算坐标，加上一定的偏移，防止重叠letx=model.x+10*_t.clipboard.countlety=model.y+10*_t.clipboard.count//如果是右键菜单触发，得到trigger菜单的画布坐标if(info&&info.context==='ContextMenu'&&am;info.data){if(info.data.hasOwnProperty('canvasX')){x=model.x+info.data.canvasX-data[0].model.x}if(info.data.hasOwnProperty('canvasY')){y=model.y+info.data.canvasY-data[0].model.y}}letnode={...model,id:G6.Util.uniqueId(),groupId:'',x,y}//添加节点到canvas_t.editor.addItem('node',node)})}})()break...}...}delete通过removeItem方法删除元素Node和edgeclear清除画布，并通过clear方法清空画布。zoom,zoomIn,zoomOut缩放、放大、缩小，通过zoomTo方法fit、actualSize将画布缩放到一定比例以适应屏幕，通过fitView方法缩放画布以适应屏幕；经过。实际大小，画布通过zoomTo方法缩放为1。fill,lineColor,lineWidth,lineStyle,lineType,startArrow,endArrow填充颜色，线颜色，线宽，线型，线型，起点，终点，通过updateItem方法更新节点和边的属性。toFront和toBack置顶，通过toFront方法将节点和边置顶。设置到底部，使用toBack方法将节点和边设置到底部。selectAll全选，通过updateItem方法将所有节点设置为同一个groupId，通过setItemState方法设置所有节点的激活状态。编辑、预览、预览，通过setMode方法设置画布的不同模式，不同的模式会执行不同的行为。///src/components/Editor/index.vue//生成编辑器实例_t.editor=newG6.Graph({...//模式modes:{//编辑模式edit:[{//自定义节点控件交互type:'node-control',config:{...}}],//预览模式preview:['zoom-canvas','drag-canvas','preview-canvas']...})upload,下载上传，通过输入文本选择窗口上传json数据文件，通过FileReader解析数据，通过data设置画布数据，通过render渲染画布。下载，通过downloadImage下载为图片，通过save下载为json数据。语言国际化，通过i18n处理多种语言。热键使用捕鼠器来处理快捷键绑定。自定义节点在/src/global/g6/node/目录下实现，通过G6.registerNode方法注册自定义节点。自定义边在/src/global/g6/edge/目录下实现，通过G6.registerEdge方法注册自定义边。自定义交互在/src/global/g6/behavior/目录下实现，通过G6.registerBehavior方法注册自定义交互。自定义插件是自定义插件在/src/global/g6/plugins/目录下的实现。通过继承扩展插件，创建实例newG6.Graph时使用该插件。开发过程中参考@antvis/g6产品，部分实现参考以下项目：@alibaba/GGEditor@guozhaolong/wfdgrapheditor最后欢迎大家star，pr。
