jsPlumb 流程图处理（二）

流程图一链接：https://blog.csdn.net/github_38186390/article/details/86470650

承接流程图处理（一）。本文主要说明流程图的保存和加载部分。

一、流程图保存操作。

1、dom节点的保存。通过jQuery $('#' + id).get(0).outerHTML获得该don节点参数。

2、连接的线保存。jsPlumb.getConnections() 获取所有连接的线，然后如下操作。里面的uuids用于后期的加载操作。

$.each(jsPlumb.getConnections(), function (idx, connection) {
      connections.push({
        connectionId: connection.id,
        pageSourceId: connection.sourceId,
        pageTargetId: connection.targetId,
        otherPros: {
          uuids: $.map(connection.endpoints, function (endpoint) {
            // endpoint._jsPlumb.uuid 用于获取uuid
            let uuid = endpoint._jsPlumb.uuid
            return [uuid]
          })
        }
      })
    })

二、流程图的加载。

1、dom加载由于数据我们都已经保存了。直接用$('#' + this.parentId).append($(dom[i].node)) 就可以将保存的dom节点加入到流程图中，然后设置拖动、添加端点、这样就完成了。

2、端点创建完成后接下来就是连接线了。通过jsPlumb.connect(uuids: [sourceUuid, targetUuid]) 进行连接这样可以保证线的颜色和上面的图案跟以前的一致，特别是存在多个端点是，通过uuid连接是最好的，其他方式都不能保证和以前的一模一样（至少通过我的测试是这样的，欢迎评论。）

 $.each(this.connections, function (index, elem) {
      jsPlumb.connect({
        uuids: elem.otherpros.uuids
      })
    })

三、截图。该代码基本可以直接使用，需要引入html2canvas、canvg

createImg (callback) {
    scrollTo(0, 0)
    if (typeof html2canvas !== 'undefined') {
      // 以下是对svg的处理
      let nodesToRecover = []
      let nodesToRemove = []
      let dom = $('#' + this.parentId).clone()
      $(dom).attr('id', 'right_clone')
      $(dom).css({
        position: 'absolute',
        top: 0,
        left: 0,
        width: $('#' + this.parentId)[0].scrollWidth,
        height: $('#' + this.parentId)[0].scrollHeight
      })
      let svgElem = $(dom).find('svg')
      // let svgElem = $('#right').find('svg')//divReport为需要截取成图片的dom的id
      svgElem.each(function (index, node) {
        let parentNode = node.parentNode
        let svg = node.outerHTML.trim()
        let canvas = document.createElement('canvas')
        canvg(canvas, svg)
        if (node.style.position) {
          canvas.style.position += node.style.position
          canvas.style.left += node.style.left
          canvas.style.top += node.style.top
        }
        nodesToRecover.push({
          parent: parentNode,
          child: node
        })
        parentNode.removeChild(node)
        nodesToRemove.push({
          parent: parentNode,
          child: canvas
        })
        parentNode.appendChild(canvas)
      })
      $('#' + this.parentId).append(dom)
      html2canvas(document.getElementById('right_clone'), {
        scale: 1
      }).then(canvas => {
        // $('#img').attr('src', canvas.toDataURL())
        $('#right_clone').remove()
        callback(canvas.toDataURL())
      }).catch(err => {
        console.log(err)
      })
    }
  }

四、网站参考：

1、中文基础文档：https://wdd.js.org/jsplumb-chinese-tutorial/

2、官网文档：https://jsplumbtoolkit.com/docs.html

3、CSDN博客文档：https://www.jianshu.com/p/d9e9918fd928

                                 https://www.jianshu.com/p/0e7bb5c081c8