目的：希望通过这篇废话，大家能在中找到两毛钱毛钱自己能用到的东西（因为找了很多资料，有一些问题没能快速找到答案，所以就自己也记录一下）。
产品原型如下：
由于没有接触过流程图，而且市面上已经有很成熟的做流程的软件，没想到还会在项目里加这种功能，于是便开始了长达1天的前期探索。有了产品原型，公司没有给时间去做更多的调研或者demo。于是，直接在项目上开始上手。
ps:此功能的代码还有大量的肉眼可见的可优化的和改进的地方，而且对jsplumb的理解尚不够深入，欢迎交流！
上一周在家开发，有些资料和参考的链接就没法贴全了。参考的部分：
https://segmentfault.com/a/1190000013422507#item-2-6
https://zhuanlan.zhihu.com/p/43642654
https://www.jianshu.com/p/d9e9918fd928
https://www.jianshu.com/p/0e7bb5c081c8
https://www.cnblogs.com/seberina/p/3645298.html
https://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral
等等...
正式废话：
一、基本思路
1.不可编辑的可视区域：只画节点画线，没有任何拖拽功能。
2.流程区域，左右布局，左边为模板类型。从左边往右边编辑流程区域拖拽之后做相应的初始化处理。这里以jquery为主来写。这里也是jsplumb相关的能力。
3.设置面板部分。使用vue去双向绑定在界面上的显示，不去直接操作dom。
二、开搞
我是先去了解了一下基础的的知识，了解了一下jsplumb的基本能力和一些常用的概念。我觉得这几个概念会比较重要，就贴出来了。
1.安装jsplumb。这个就不多讲了 npm install jsplumb --save 。加不加-dev就看各自需要了。
main.js引入，挂载原型，让每个页面都能取到。然后引入了jquery和jqueryui，因为想用jqueryui拖拽相关的api。
2.初始化jsplumb
我这里S1区域是放模型的，可以往右侧绘制区域拖动的模型；s2区域就是绘制区域；s3区域就是取消确认了。
这里要注意的是：
1.定位。jsplumb的绘制区域是需要定位元素的，所以要css加上定位的属性。另外，要考虑绘制区域的滚动问题，我这里只做了y方向的overflow-y:scroll；2.显示隐藏。我这里是子组件，jsplumb初始化的时候可能会有偏移量的计算，源码里面好像是offsetHeight或者offsetxxx，就要注意不能是display：node,否则偏移量就是0了；3.z-index。这里面可能有一些业务逻辑用了element-ui的一些message的弹窗或者弹出，要注意一些定位元素的z-index与饿了么的元素的关系。
这里主要是wd_node和wd_conn，分别存放节点和连线的信息，与后台交互的时候需要的参数。这个timer也有用，后面会提到。vmdata就是用来展示每条线，每个节点对应的信息的参数。
mounted的时候初始化jsplumb或者可以加速jsplumb.ready再去初始化。
这里就是整个初始化相关的代码，是借鉴了网上其他大佬们的自己再调整的。接下来按js的执行顺序来说一哈。
首先实例化，getinstance方法。实例为djinstance。
这里是直接copy的在网上找的demo的代码，就没做优化直接先用了。djinstance就是一个jsplumb的实例。djinstance.draggable('start');表示id为‘start’可以被拖动了。因为我是直接把开始和结束直接放到了绘制区域，所以才做了这一步。此时，‘开始’‘结束’可以拖动了。再去增加锚点，相当于是给连线做准备。我这边是只用了上下左右四个正点，每个正点都可以当作source也可以当作target。addEndpoint就是给节点增加锚点。第一个参数表示需要增加锚点的节点id，第二个参数是锚点的一些配置，第三个参数，表示锚点的信息和uuid(我先姑且理解为每个锚点的id)。锚点的配置信息，isSource和isTarget相当于是表示是否可以作为连线的起点或者终点，maxConnectiosn为-1表示这个点对连接了几根线没有限制。至此，界面上就有了2个可以移动并且有4个锚点的节点。
这里就是绑定节点的单双击事件。编辑的时候就是要注意双向绑定，编辑label之后，节点的可能会被撑开，此时，节点撑开了，端点位置却没动，可以使用djinstance.setSuspendDrawing(false,true)重绘。removeItem表示删除，删除等下和线的删除一起说哈。
通过bind去绑定事件，主要是用到了connectionDragStop，click，dblclick三个事件。connectionDragStop相当于是线从一个锚点开始拉出，再放开时触发的事件，这里做了一些判断，判断了一些比如从A锚点出发，又链接到A锚点，这些没有意义的线。这里回调里面的connect参数可以理解为线实例，包含了线相关的很多很多信息，比如分配好的id，锚点信息，连线两端的节点信息等等，通过deleteConnection方法，传入connection线实例来删除。注意：这些线可能在界面上看不到，但是依然会在内部生成记录，通过getAllConnections()方法，获取所以连线信息的时候，也会被获取到，可能影响到业务逻辑的判断，所以这里才删除了一些不需要的连线。另外我这里定义了一个eps字段，用来存放锚点的信息(之前定义的位置信息RightMiddle,BottomCenter,LeftMiddle,TopCenter)。用于回显时确定线是从节点的哪个方位点作为端点的。
这里要用个timer，是因为jsplumb的双击事件还会触发单击，没能很快的找到更优解，也没有仔细研究源码，这里就用定时器去解决一下。单击时就是编辑线条信息(label显示字样及业务条件等)，这里把线条信息赋值给在data声明的vmdata，用于在setting面板编辑信息。然后双击是删除线条，和删除节点一起说一下。
删除线，用deleteConenction，传入线实例。删除节点，用remove会自动删除节点以及与节点连接的线。删除了jsplumb实例内部保存的时候，也对应删除业务数据对应id的数据。
节点的id是用字符串+时间戳拼接，这里要注意一下style，里面有节点的左边信息，用于在编辑操作回显时需要用到的。连线的id是取的jsplumb内部生成id，eps是我用来存锚点相关的信息，主要是anchorPos用来确认连线的锚点。由于大量的事件绑定与操作都是与id相关的，id又是唯一的，大家在处理id的时候可以重新考虑设计一下。
三、编辑
由于最初没有说需要编辑流程图，所以流程图的编辑就直接随便先写了一下实现了功能。
echo是传入组件的回显数据，也就是提交了什么数据，返回的就是什么数据。相当于上面提交的参数。
connect方法用来连接两个锚点，这里面的样式配置就和保存和之前一致就行了，这里注意不要用source和target，要用uuid。因为用前者会实例化新的端点，会在节点初始化的4个节点之后，在某个位置新增一个节点，新增的节点与初始化的节点会样式重复，会出现bug，这里用uuid相当是连接已存在的锚点。然后用getOverlay去获取然后设置label，这里如果直接在connect的选项中配置label，后续操作label时有问题，所以暂时这样去做了。存在data里的业务数据id用了newCon.id，相当于是连线的实例化出来的，连线的id会重新分配，回显数据的id就需要改变一下，与新的连线的id同步起来，这样就保持了业务数据的id与djinstance内部线信息的id对应起来。最后又重置一下端点djinstance.setSuspendDrawing(false,true);//重置端点。
至此，破产版V001就这样了。后续应该还要进行一系列的改动和优化整理甚至重构。
OVER~
THX~
