methods.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. import panzoom from 'panzoom'
  2. import { GenNonDuplicateID } from '../until'
  3. const methods = {
  4. init () {
  5. this.jsPlumb.ready(() => {
  6. // 导入默认配置
  7. this.jsPlumb.importDefaults(this.jsplumbSetting)
  8. // 完成连线前的校验
  9. this.jsPlumb.bind('beforeDrop', evt => {
  10. let res = () => {} // 此处可以添加是否创建连接的校验, 返回 false 则不添加;
  11. return res
  12. })
  13. // 连线创建成功后,维护本地数据
  14. this.jsPlumb.bind('connection', evt => {
  15. this.addLine(evt)
  16. })
  17. // 连线双击删除事件
  18. this.jsPlumb.bind('dblclick', (conn, originalEvent) => {
  19. this.confirmDelLine(conn)
  20. })
  21. // 断开连线后,维护本地数据
  22. this.jsPlumb.bind('connectionDetached', evt => {
  23. // this.deleLine(evt)
  24. })
  25. this.loadEasyFlow()
  26. // 会使整个jsPlumb立即重绘。
  27. this.jsPlumb.setSuspendDrawing(false, true)
  28. })
  29. this.initPanZoom()
  30. },
  31. // 加载流程图
  32. loadEasyFlow () {
  33. // 初始化节点
  34. for (let i = 0; i < this.data.nodeList.length; i++) {
  35. let node = this.data.nodeList[i]
  36. // 设置源点,可以拖出线连接其他节点
  37. this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions)
  38. // // 设置目标点,其他源点拖出的线可以连接该节点
  39. this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
  40. // this.jsPlumb.draggable(node.id);
  41. this.draggableNode(node.id)
  42. }
  43. // 初始化连线
  44. this.jsPlumb.unbind('connection') // 取消连接事件
  45. for (let i = 0; i < this.data.lineList.length; i++) {
  46. let line = this.data.lineList[i]
  47. debugger
  48. this.jsPlumb.connect(
  49. {
  50. source: line.from,
  51. target: line.to
  52. },
  53. this.jsplumbConnectOptions
  54. )
  55. }
  56. this.jsPlumb.bind('connection', evt => {
  57. let from = evt.source.id
  58. let to = evt.target.id
  59. this.data.lineList.push({
  60. from: from,
  61. to: to,
  62. label: '连线名称',
  63. id: GenNonDuplicateID(8),
  64. remark: ''
  65. })
  66. })
  67. },
  68. draggableNode (nodeId) {
  69. this.jsPlumb.draggable(nodeId, {
  70. grid: this.commonGrid,
  71. drag: params => {
  72. this.alignForLine(nodeId, params.pos)
  73. },
  74. start: () => {},
  75. stop: params => {
  76. this.auxiliaryLine.isShowXLine = false
  77. this.auxiliaryLine.isShowYLine = false
  78. this.changeNodePosition(nodeId, params.pos)
  79. }
  80. })
  81. },
  82. // 移动节点时,动态显示对齐线
  83. alignForLine (nodeId, position) {
  84. // eslint-disable-next-line one-var
  85. let showXLine = false,
  86. showYLine = false
  87. this.data.nodeList.some(el => {
  88. if (el.id !== nodeId && el.left === position[0] + 'px') {
  89. this.auxiliaryLinePos.x = position[0] + 60
  90. showYLine = true
  91. }
  92. if (el.id !== nodeId && el.top === position[1] + 'px') {
  93. this.auxiliaryLinePos.y = position[1] + 20 + 12.5 // 12.5是节点下方操作人显示栏的高度1/2
  94. showXLine = true
  95. }
  96. })
  97. this.auxiliaryLine.isShowYLine = showYLine
  98. this.auxiliaryLine.isShowXLine = showXLine
  99. },
  100. changeNodePosition (nodeId, pos) {
  101. this.data.nodeList.some(v => {
  102. if (nodeId === v.id) {
  103. v.left = pos[0] + 'px'
  104. v.top = pos[1] + 'px'
  105. return true
  106. } else {
  107. return false
  108. }
  109. })
  110. },
  111. drag (ele, item) {
  112. this.currentItem = item
  113. },
  114. drop (event) {
  115. const containerRect = this.jsPlumb.getContainer().getBoundingClientRect()
  116. const scale = this.getScale()
  117. let left = (event.pageX - containerRect.left - 60) / scale
  118. let top = (event.pageY - containerRect.top - 20) / scale
  119. var temp = {
  120. ...this.currentItem,
  121. id: GenNonDuplicateID(8),
  122. top: Math.round(top / 20) * 20 + 'px',
  123. left: Math.round(left / 20) * 20 + 'px'
  124. }
  125. this.addNode(temp)
  126. },
  127. addLine (line) {
  128. let from = line.source.id
  129. let to = line.target.id
  130. this.data.lineList.push({
  131. from: from,
  132. to: to,
  133. label: '连线名称',
  134. id: GenNonDuplicateID(8),
  135. remark: ''
  136. })
  137. },
  138. confirmDelLine (line) {
  139. // this.$Modal.confirm({
  140. // title: '删除连线',
  141. // content: "<p>确认删除该连线?</p>",
  142. // onOk: () => {
  143. // this.jsPlumb.deleteConnection(line)
  144. // }
  145. // })
  146. this.$confirm('确认删除该连线?', '删除连线', {
  147. confirmButtonText: '确定',
  148. cancelButtonText: '取消',
  149. type: 'warning'
  150. })
  151. .then(() => {
  152. this.jsPlumb.deleteConnection(line)
  153. })
  154. .catch(() => {
  155. this.$message({
  156. type: 'info',
  157. message: '已取消删除'
  158. })
  159. })
  160. },
  161. deleLine (line) {
  162. this.data.lineList.forEach((item, index) => {
  163. if (item.from === line.sourceId && item.to === line.targetId) {
  164. this.data.lineList.splice(index, 1)
  165. }
  166. })
  167. },
  168. // dragover默认事件就是不触发drag事件,取消默认事件后,才会触发drag事件
  169. allowDrop (event) {
  170. event.preventDefault()
  171. },
  172. getScale () {
  173. let scale1
  174. if (this.jsPlumb.pan) {
  175. const { scale } = this.jsPlumb.pan.getTransform()
  176. scale1 = scale
  177. } else {
  178. const matrix = window.getComputedStyle(this.jsPlumb.getContainer())
  179. .transform
  180. scale1 = matrix.split(', ')[3] * 1
  181. }
  182. this.jsPlumb.setZoom(scale1)
  183. return scale1
  184. },
  185. // 添加新的节点
  186. addNode (temp) {
  187. this.data.nodeList.push(temp)
  188. this.$nextTick(() => {
  189. this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions)
  190. this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions)
  191. this.draggableNode(temp.id)
  192. })
  193. },
  194. initPanZoom () {
  195. const mainContainer = this.jsPlumb.getContainer()
  196. const mainContainerWrap = mainContainer.parentNode
  197. const pan = panzoom(mainContainer, {
  198. smoothScroll: false,
  199. bounds: true,
  200. // autocenter: true,
  201. zoomDoubleClickSpeed: 1,
  202. minZoom: 0.5,
  203. maxZoom: 2,
  204. // 设置滚动缩放的组合键,默认不需要组合键
  205. beforeWheel: e => {
  206. // console.log(e)
  207. // let shouldIgnore = !e.ctrlKey
  208. // return shouldIgnore
  209. },
  210. beforeMouseDown: function (e) {
  211. // allow mouse-down panning only if altKey is down. Otherwise - ignore
  212. var shouldIgnore = e.ctrlKey
  213. return shouldIgnore
  214. }
  215. })
  216. this.jsPlumb.mainContainerWrap = mainContainerWrap
  217. this.jsPlumb.pan = pan
  218. // 缩放时设置jsPlumb的缩放比率
  219. pan.on('zoom', e => {
  220. const { x, y, scale } = e.getTransform()
  221. this.jsPlumb.setZoom(scale)
  222. // 根据缩放比例,缩放对齐辅助线长度和位置
  223. this.auxiliaryLinePos.width = (1 / scale) * 100 + '%'
  224. this.auxiliaryLinePos.height = (1 / scale) * 100 + '%'
  225. this.auxiliaryLinePos.offsetX = -(x / scale)
  226. this.auxiliaryLinePos.offsetY = -(y / scale)
  227. })
  228. pan.on('panend', e => {
  229. const { x, y, scale } = e.getTransform()
  230. this.auxiliaryLinePos.width = (1 / scale) * 100 + '%'
  231. this.auxiliaryLinePos.height = (1 / scale) * 100 + '%'
  232. this.auxiliaryLinePos.offsetX = -(x / scale)
  233. this.auxiliaryLinePos.offsetY = -(y / scale)
  234. })
  235. // 平移时设置鼠标样式
  236. mainContainerWrap.style.cursor = 'grab'
  237. mainContainerWrap.addEventListener('mousedown', function wrapMousedown () {
  238. this.style.cursor = 'grabbing'
  239. mainContainerWrap.addEventListener('mouseout', function wrapMouseout () {
  240. this.style.cursor = 'grab'
  241. })
  242. })
  243. mainContainerWrap.addEventListener('mouseup', function wrapMouseup () {
  244. this.style.cursor = 'grab'
  245. })
  246. },
  247. setNode (nodeId, node) {
  248. this.data.nodeList.some(v => {
  249. if (v.id === nodeId) {
  250. for (var key in node) {
  251. v[key] = node[key]
  252. }
  253. // v.nodeName = node.nodeName
  254. return true
  255. } else {
  256. return false
  257. }
  258. })
  259. },
  260. // 删除节点
  261. deleteNode (node) {
  262. this.data.nodeList.some((v, index) => {
  263. if (v.id === node.id) {
  264. this.data.nodeList.splice(index, 1)
  265. this.jsPlumb.remove(v.id)
  266. return true
  267. } else {
  268. return false
  269. }
  270. })
  271. },
  272. // 删除所有节点
  273. deleteAllNode () {
  274. this.data.nodeList.map(item => {
  275. this.jsPlumb.remove(item.id)
  276. })
  277. },
  278. // 更改连线状态
  279. changeLineState (nodeId, val) {
  280. console.log(val)
  281. let lines = this.jsPlumb.getAllConnections()
  282. lines.forEach(line => {
  283. if (line.targetId === nodeId || line.sourceId === nodeId) {
  284. if (val) {
  285. line.canvas.classList.add('active')
  286. } else {
  287. line.canvas.classList.remove('active')
  288. }
  289. }
  290. })
  291. },
  292. // 初始化节点位置 (以便对齐,居中)
  293. fixNodesPosition () {
  294. if (this.data.nodeList && this.$refs.flowWrap) {
  295. const nodeWidth = 120
  296. const nodeHeight = 40
  297. let wrapInfo = this.$refs.flowWrap.getBoundingClientRect()
  298. // eslint-disable-next-line one-var
  299. let maxLeft = 0,
  300. minLeft = wrapInfo.width,
  301. maxTop = 0,
  302. minTop = wrapInfo.height
  303. let nodePoint = {
  304. left: 0,
  305. right: 0,
  306. top: 0,
  307. bottom: 0
  308. }
  309. // eslint-disable-next-line one-var
  310. let fixTop = 0,
  311. fixLeft = 0
  312. this.data.nodeList.forEach(el => {
  313. let top = Number(el.top.substring(0, el.top.length - 2))
  314. let left = Number(el.left.substring(0, el.left.length - 2))
  315. maxLeft = left > maxLeft ? left : maxLeft
  316. minLeft = left < minLeft ? left : minLeft
  317. maxTop = top > maxTop ? top : maxTop
  318. minTop = top < minTop ? top : minTop
  319. })
  320. nodePoint.left = minLeft
  321. nodePoint.right = wrapInfo.width - maxLeft - nodeWidth
  322. nodePoint.top = minTop
  323. nodePoint.bottom = wrapInfo.height - maxTop - nodeHeight
  324. fixTop =
  325. nodePoint.top !== nodePoint.bottom
  326. ? (nodePoint.bottom - nodePoint.top) / 2
  327. : 0
  328. fixLeft =
  329. nodePoint.left !== nodePoint.right
  330. ? (nodePoint.right - nodePoint.left) / 2
  331. : 0
  332. this.data.nodeList.map(el => {
  333. let top = Number(el.top.substring(0, el.top.length - 2)) + fixTop
  334. let left = Number(el.left.substring(0, el.left.length - 2)) + fixLeft
  335. el.top = Math.round(top / 20) * 20 + 'px'
  336. el.left = Math.round(left / 20) * 20 + 'px'
  337. })
  338. }
  339. }
  340. }
  341. export default methods