vue + gojs 实现拖拽流程图（实战项目）

一、流程图效果

最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件，也是一个难点，要说为什么是难点，首先，它是依赖画布canvas知识开发。其次，要依赖于内部API开发需求，开发项目实战需求的时候就要花费大量的时间去熟悉go.js的API，然后才能进行开发。话不多说，我就先把我最近做的项目案例效果图展示一下：

看到效果图大家可能会想这个挺简单的，会想没什么难点，其实真正开发的时候才会知道的、才会领悟到。

二、为什么选go.js流程图插件去开发项目？

在项目开发一期的时候我用的不是go.js,而用的是一款轻便的流程插件jsplumb.js,它也集成了各种功能性API，但是在开发二期的时候它的内部功能已经满足不了需求了，所以我就开始在网上查找流程插件来学习，看了很多插件，比如：G6，D3 等这些可视化流程插件都是不能满足需求。要说为什么不能满足需求,原因如下：

一、首先，看到效果图里的内置多点和其他模块单点连线问题，其他插件是无法这个满足需求的，可能我没有深入去了解其他的流程插件吧，但是go.js里内置点连线可以让开发者很快的理解代码逻辑，不用耗费大量的时间去想点与点的连线。

二、代码上的数据结构问题，其他插件里的API数据字段繁琐量多，不够清晰明了，而go.js里的数据结构就两个重要字段，一是所有模块的字段集合二是连线字段集合，根据需求可以随意加字段。

三、项目开发

（一）、首先直接使用go.js，画布中是有水印的

其实这个问题不大，替换一行代码就可以去除水印

引入go.js后，直接在编辑器中全局搜索7eba17a4ca3b1a8346，找到类似这样结构的代码

a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);

注：不同的版本代码不是完全相同的，可能是a.jv（属性名是会变的） =‘xxxxx’，将这行代码替换成

a.ir=function(){return true;}; //a.属性名 要保持一致

去除水印的效果

（二）、HTML

<--第一种-->

1. <template>
2. <div id="wrap">
3. <div id="chart-wrap">
4. <div id="chart-palette">div><-- 画布一 -->
5. <div id="chart-diagram">div><-- 画布二 -->
6. div>
7. div>
8. template>

如图：

第二种

结合vue的拖拽组件vuedraggable 实现业务需求。

1. <template>
2. <div id="chart-wrap">
3. <div v-for="tab in tabLIst" :key="tab.id" class="tab">
4. //拖动
5. <vuedraggable @end.stop="end" @start.stop="move">
7. <i :class="tab.icon" /> {{ tab.text }}
8. <el-tooltip effect="dark" :content="tab.tooltip" placement="top">
9. <i class="el-icon-question" />
10. el-tooltip>
11. vuedraggable>
12. div>
13. <div id="chart-diagram"/> <--画布-->
14. div>
15. template>

如图：

　　

（三）、画布的基本设置 。

1. this.diagram = $(go.Diagram, "chart-diagram",
2. {
3. // 画布初始位置
4. initialContentAlignment: go.Spot.LeftSide, // 居中显示
5. "undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
6. // 初始坐标
7. // initialPosition: new go.Point(0, 0),
8. //allowSelect:false, ///禁止选中
9. // "toolManager.hoverDelay": 100, //tooltip提示显示延时
10. // "toolManager.toolTipDuration": 10000, //tooltip持续显示时间
11. // isReadOnly:true,//只读
13. //禁止水平拖动画布
14. //禁止水平滚动条
15. allowHorizontalScroll: false,
16. // 禁止垂直拖动画布
17. //禁止垂直滚动条
18. allowVerticalScroll: false,
19. allowZoom: true,//画布是否可以缩放
20. "grid.visible": false, //显示网格
21. // allowMove: true, //允许拖动
22. // allowDragOut:true,
23. allowDelete: true,//禁止删除节点
24. allowCopy: true,//禁止复制
25. // 禁止撤销和重做
26. // "undoManager.isEnabled": false,
27. // 画布比例
28. // scale:1.5，
29. // minScale:1.2,//画布最小比例
30. // maxScale:2.0,//画布最大比例
31. // 画布初始化动画时间
32. // "animationManager.duration": 600,
33. // 禁止画布初始化动画
34. "animationManager.isEnabled": false,
35. // autoScale:go.Diagram.Uniform,//自适应
37. // autoScale:go.Diagram.UniformToFill,//自适应
38. // "draggingTool.dragsLink": false,//拖动线
39. // autoScale:go.Diagram.None,//默认值不自适应
40. // 画布边距padding
41. // padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
42. // validCycle: go.Diagram.CycleDestinationTree，//只允许有一个父节点
43. //节点模块动画 S
44. // "animationManager.initialAnimationStyle":go.Animation.EaseOutExpo,
45. // "animationManager.initialAnimationStyle": go.Animation.EaseInOutQuad,
46. "animationManager.initialAnimationStyle": go.AnimationManager.None,
47. // "animationManager.initialAnimationStyle":go.AnimationManager.AnimateLocations,
48. //节点模块动画 D
49. // validCycle: go.Diagram.CycleNotUndirected，
51. // validCycle: go.Diagram.CycleNotDirected，
52. // validCycle: go.Diagram.CycleSourceTree，
53. //ismodelfied:true //禁止拖拽
54. // 禁止鼠标拖动区域选中
55. // "dragSelectingTool.isEnabled" : false,
56. //允许使用delete键删除模块
57. "commandHandler.deletesTree": true,
58. // "hasHorizontalScrollbar":false,//去除水平滚动条
59. // "hasVerticalScrollbar":false,//去除竖直滚动条
60. // "canStart":false,
61. // allowClipboard: true,
62. // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
63. // layout: $(go.TreeLayout,
64. // { angle: 90, layerSpacing: 80 }),
65. }
66. );

（三）、整体画布事件及节点的监听

1. // 监听连线
2. this.diagram.addDiagramListener("LinkDrawn", (e) => {
3. console.log(e.subject.part);
4. });
5. // 监听删除
6. this.diagram.addDiagramListener("SelectionDeleted", (e) => {
7. e.subject.each(function (n) {
8. console.log(n.data.key);
9. });
10. })
11. // 修改节点
12. this.diagram.addDiagramListener("TextEdited", (evt) => {
13. console.log(e.subject.part);
14. });
15. // 监听点击
16. this.diagram.addDiagramListener("ObjectSingleClicked", (e) => {
17. 　　　　　　　　　　　　
18. //这是清除高亮的
19. // e.diagram.commit((d) => {
20. // d.clearHighlighteds();
21. // }, "no highlighteds");
22. });
24. // // 移动事件
25. this.diagram.addDiagramListener("SelectionMoved", (e) => {
26. console.log(e.diagram.lastInput.documentPoint);
27. });

(四)、连线点封装函数

// 节点连接线

1. makePort (name, align, spot, output, input) {
2. var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)
3. return $(go.Shape, {
4. fill: 'transparent', // 默认透明不现实
5. strokeWidth: 0, // 无边框
6. fromMaxLinks: 1, //
7. width: horizontal ? NaN : 10, // 垂直"port"则8像素宽
8. height: !horizontal ? NaN : 5, // 水平"port"则8像素
9. alignment: align, // 同其模块对齐
10. stretch: horizontal
11. ? go.GraphObject.Horizontal
12. : go.GraphObject.Vertical, // 自动同其模块一同伸缩
13. portId: name, // 声明ID
14. fromSpot: spot, // 声明连线头连出此"port"的位置
15. fromLinkable: output, // 布尔型，是否允许连线从此"port"连出
16. toLinkable: input, // 布尔型，是否允许连线从此"port"连出
17. toSpot: spot, // 声明连线尾连入此"port"的位置
18. cursor: 'pointer', // 鼠标由指针改为手指，表示此处可点击生成连线
19. mouseEnter: function (e, port) {
20. // 鼠标移到"port"位置后，高亮
21. if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.3)'
22. },
23. mouseLeave: function (e, port) {
24. // 鼠标移出"port"位置后，透明
25. port.fill = 'transparent'
26. }
27. })
28. }

（五）、节点连线的高亮函数。

1. isHighlightedFun(link) {
2. return $$(go.Shape,
3. "RoundedRectangle", {
4. fill: "rgba(217,236,255,.2)",
5. stroke: "rgba(39,154,242,.1)",
6. strokeWidth: 1,
7. },
8. new go.Binding("stroke", "isHighlighted", (h) => {
9. return h ? "rgba(39,154,242,1)" : "rgba(39,154,242,.8)";
10. }).ofObject(),
11. new go.Binding("strokeWidth", "isHighlighted", (h) => {
12. return h ? 2.5 : 1.3;
13. }).ofObject(),
14. )
15. }

如图：

(六)、 节点连接线。（方法封装）

1. makePort(name, align, spot, output, input) {
2. var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
3. return $$(go.Shape,
4. {
5. fill: "transparent", // 默认透明
6. strokeWidth: 0, // 无边框
7. fromMaxLinks: 1, //最大连接数
8. width: horizontal ? NaN : 10, // 垂直"port"则8像素宽
9. height: !horizontal ? NaN : 2, // 水平"port"则8像素
10. alignment: align, // 同其模块对齐
11. stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),//自动同其模块一同伸缩
12. portId: name, // 声明ID
13. fromSpot: spot, // 声明连线头连出此"port"的位置
14. fromLinkable: output, // 布尔型，是否允许连线从此"port"连出
15. toLinkable: input, // 布尔型，是否允许连线从此"port"连出
16. toSpot: spot, // 声明连线尾连入此"port"的位置
17. cursor: "pointer", // 鼠标由指针改为手指，表示此处可点击生成连线
18. mouseEnter: (e, port) => { //鼠标移到"port"位置后，高亮
19. if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.3)";
20. },
21. mouseLeave: (e, port) => {// 鼠标移出"port"位置后，透明
22. port.fill = "transparent";
23. }
24. });
25. }

注意：要在this.diagram.nodeTemplateMap.add 增加模块里调用。

示例：

1. this.diagram.nodeTemplateMap.add(type,
2. $$(go.Node, "Auto",
3. this.makePort("T", go.Spot.Top, go.Spot.TopCenter, false, true)
4. ))

四、当前画布的监听事件名称包括

• "AnimationStarting" ：动画渲染前事件,加载图表的动画即将开始;

• "AnimationFinished" ：动画渲染完事件,加载图表刚刚完成的动画;

• "BackgroundSingleClicked"： 背景单击事件, 单击图表背景;

• "BackgroundDoubleClicked" ：背景双击事件, 双击图表背景;

• "BackgroundContextClicked" ：背景右键事件, 右键单击图表背景;

• "ChangingSelection"： 改变选择前事件, 一个操作即将改变Diagram.selection图表选择集合,

• "ChangedSelection" ：改变选择后事件, 一个操作已经改变?Diagram.selection图表选择集合,

• "ClipboardChanged" ：剪切板改变事件, 零部件已被CommandHandler.copySelection复制到剪贴板上;

• "ClipboardPasted" ：剪切板粘贴事件,零部件已由CommandHandler.pasteSelection从剪贴板复制到图表中;

• "DocumentBoundsChanged"： 文档范围改变事件, 图表中各零部件的面积,?Diagram.documentBounds,已经改变了;

• "ExternalObjectsDropped" ：(节点或线等)零部件拖放生成事件, 零部件已经通过拖拽从图的外部复制到图中;

• "GainedFocus" ：获得键盘焦点事件, 该图获得了键盘焦点，例如在调用Diagram.focus之后.

• "LayoutCompleted" ：布局完成事件, 整个图表布局刚刚更新;

• "LinkDrawn"： 线创建事件,用户刚刚使用LinkingTool创建了一个新链接;?

• "LinkRelinked"： 线重新连接事件, 用户刚刚通过RelinkingTool?或?DraggingTool重新连接了现有线;

• "LinkReshaped"： 线路径改变事件, 用户刚刚通过LinkReshapingTool调整了线的路径;

• "LostFocus" ：图表失去焦点事件,这个图表失去了键盘焦点,

• "Modified" ：图表改变事件,?Diagram.isModified?属性已被设置为一个新值——用于将窗口标记为自上次保存以来已被修改;

• "ObjectSingleClicked"： 对象单击事件, 单击了图形对象（节点和线等）;

• "ObjectDoubleClicked"：双击了图形对象（节点和线等）;

• "ObjectContextClicked"：右键单击了图形对象（节点和线等）;

• "PartCreated" ：Part创建事件,用户通过?ClickCreatingTool插入新的零部件;

• "PartResized" ：Part大小改变事件, 用户通过ResizingTool 调整工具改变了一个图形对象的大小;

• "PartRotated" ：Part旋转事件, 用户通过RotatingTool 旋转工具改变了一个图形对象的角度 ;

• "SelectionMoved" ：拖动事件, 用户通过DraggingTool 拖动工具移动了选定的部分;

• "SelectionCopied" ：复制事件,户通过DraggingTool 拖动工具复制了选定的部分;

• "SelectionDeleted" ：删除后事件,用户通过?CommandHandler.deleteSelection?已经删除了选定的部分;

• "SelectionDeleting" ：删除前事件,用户通过?CommandHandler.deleteSelection即将删除选定的部分;

• "SelectionGrouped" ：选择创建分组事件, 通过CommandHandler.groupSelection已经从选择的零部件中创建了一个新的组 ;

• "SelectionUngrouped"：用户已删除选定的组，但通过CommandHandler.ungroupSelection保留其成员;

• "SubGraphCollapsed" ：子图折叠事件, 用户通过CommandHandler.collapseSubGraph将选定的组折叠;

• "SubGraphExpanded" ：子图展开事件, 用户通过CommandHandler.expandSubGraph将选定的组展开;

• "TextEdited" ：文本块修改事件,用户通过文本编辑工具改变了文本块的字符串值;

• "TreeCollapsed"： 树折叠事件, 用户通过CommandHandler.collapseTree折叠所选节点的子树;

• "TreeExpanded" ：树展开事件, 用户通过CommandHandler.expandTree展开了所选节点的子树;

• "ViewportBoundsChanged"：视窗范围改变事件,图表中可见的区域,?Diagram.viewportBounds,发生了改变;

五、迭代篇

（一）、项目的迭代。

从数据结构到ui风格的整体重构，有了新的变化。

整体流程 如图一：

模块流程侧边设置图二：

伸缩当前灰色意图如图三：

为什么收起意图会有多条连线，是因为当前模块下的意图和部分模块有关系线，所以在收起时要知道当前模块下有几个意图和其他模块有关系。

（二）、整体用的js方法

1、画布里的功能js：

2、工具条js 方法：

（三）、功能分析

1、工具条中的功能方法

（1）、查看

注： 是通过gojs 实例中的makeSVG方法打开一个新窗口生成的一个svg

1. printDiagram() {
2. var svgWindow = window.open();
3. if (!svgWindow) return;
4. var printSize = new go.Size(3000, 2000);
5. var bnds = this.diagram.documentBounds;
6. var x = bnds.x;
7. var y = bnds.y;
8. while (y < bnds.bottom) {
9. while (x < bnds.right) {
10. var svg = this.diagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize});
11. svgWindow.document.body.appendChild(svg);
12. x += printSize.width;
13. }
14. x = bnds.x;
15. y += printSize.height;
16. }
17. }

（2）、居中

这里将调用CommandHandler.scrollToPart，先还原画布初始状态后执行动画以将视口滚动到节点所在的位置。

注：如果节点靠近边缘，除非您增加Diagram.scrollMargin，否则无法滚动视口，以使该节点更靠近视口的中心。

1. centerDiagram() {
2. this.resetCanvas();
3. this.diagram.commandHandler.scrollToPart(this.diagram.findNodeForKey(this.initModuleId));
4. },
5. // 还原
6. resetCanvas() {
7. this.diagram.scale = 1;
8. this.$refs.set.zoom = 100;
9. },

尽请等待周六周日继续完善。如有不足可共享技术经验。。。。。。。。。。。。。