Vue+Go.js实现拖拽流程图

前言

最近开发遇到一个需求，需要实现一个流程图编辑器，使用vue+go.js实现。是依赖画布canvas相关技术实现的。需要花费大量时间去熟悉go.js相关技术，研究几天发现vue+go.js实现起来非常简单，而且vue的组件化思想也非常适合流程图编辑器的开发。

官方案例

vue+go.js实现流程图编辑器，可以参考官方的案例：https://gojs.net.cn/samples/flowchart.html

实现步骤

画布初始化

<!-- 左边流程图 -->
 <div class="palette-box" id="myPaletteDiv"></div>
 <!-- 流程图制作区域 -->
 <div class="chart-box" id="myDiagramDiv"></div>

初始化流程面板

//初始化流程图面板
that.myDiagram = $(
  go.Diagram,
  "myDiagramDiv", // must name or refer to the DIV HTML element
  {
    "grid.visible": false, //显示网格
    initialContentAlignment: go.Spot.Center, // 令绘制的元素相对画布居中
    LinkDrawn: that.showLinkLabel, // this DiagramEvent     listener is defined below
    LinkRelinked: that.showLinkLabel,
    "undoManager.isEnabled": true, //是否可撤销编辑
    isReadOnly: isReadOnly, //只读
  }
);