JsPlumb 在 react 的使用方法及介绍

一．相关资料来源：

1. https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/ ———    一个翻译一半就不能打开的文档

2. https://github.com/wangduanduan/jsplumb-chinese-tutorial ———    一个事件方法很全的网站（推荐）

3 . https://wdd.js.org/jsplumb-chinese-tutorial/#/ ———    一个事件方法很全的网站（同上）

4. https://www.cnblogs.com/Bryran/p/3950122.html ————— jq ui 拖动

二． 引用库：

版本： 2.13.3

库： https://github.com/jsplumb/jsplumb

链接： https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ

提取码： z2t4

React  vue :    npm   i   jsplumb

注意：低版本需要引用 jq 以及 jq-ui ，此版本不需要

三． 在 React 使用方法：

在我的 react 项目中，分菜单栏和画布，菜单栏是可拖动子菜单，将菜单拖到画布上，在画布上进行对子菜单项目的操作，大概是这样：

在使用过程中，应为拖动事件，和画图事件都是要先有 dom 节点 , 所以，一定要有节点的时候再注册相应的监听事件：

a.    React 项目中要在 componentDidMount() 生命周期后开始操作，因为是单页面应用，要保证当前页面渲染完成后注册 jsplumb 实例，离开后要销毁实例所以

let idePageJsPlumstance=’’;
    //初始化
    componentDidMount() {
        idePageJsPlumstance = jsPlumb.getInstance() //关键函数 注册jsplumb实例
        idePageJsPlumstance.setContainer ('flow-main')//设置面板
    //离开
    componentWillUnmount() {
        if (idePageJsPlumstance) {
            idePageJsPlumstance.clear() //清空
         b.     在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动 不熟悉的可以搜下jq ui  这里这样写的：
//给span注册拖动事件
$('#flow-btns').find('span').draggable({
                helper: 'clone',//拖动样式
                zIndex: 11,
                scope: 'flowMainCanvas',//关键参数
      Scope  //关键参数，被拖动子菜单和拖动到面板要对应相同
         c.   在面板中，要获取位置生成新的dom 对新dom注册事件, （此处以简写，具体方式根据实际项目来做）
//样式
let endAllPointStyle={
        endpoint: 'Dot', //端点的形状
        isSource: true, //是否可以拖动（作为连线起点）
        isTarget: true, //是否可以放置（连线终点）
}
//画图
$('#flow-main').droppable ({
      scope: 'flowMainCanvas',
      drop: function ( event, ui ) {
        let left = parseInt ( ui.offset.left)
        let top = parseInt ( ui.offset.top)
        let id = ‘node12’
        let dom = “<span id=’+id+’ >’+ui.helper.context.dataset.text+’</span>”
        $ (this).append (dom)
        dom.css ('left', left).css ('top', top)
        idePageJsPlumstance.addEndpoint ( id, {
          anchor:"LeftMiddle"
        }, endAllPointStyle)
        //注册端点拖桶
        idePageJsPlumstance.draggable ( id)
        //注册节点拖动
        $ ('#' + id).draggable ({
             containment:"parent",
         d.     同时要对线做一些事件，这里有
//连接线的右键单击事件
 idePageJsPlumstance.bind ('contextmenu', function ( conn, e ) {
      e.preventDefault ()
      e.stopPropagation ()
     ///// ....
//连接线的单击事件
idePageJsPlumstance.bind ('mousedown', function ( conn, e ) {
///// ....
//开始拖动新连接时
idePageJsPlumstance.bind ('beforeDrag', function ( info )  {
///// ....
// 结束拖动新连接时
idePageJsPlumstance.bind ('beforeDrop', function ( info )  {
///// ....
// 连接事件 注册线的参数
idePageJsPlumstance.bind ('connection', function ( info ) {
///// ...
// 开始拖动现有连接
idePageJsPlumstance.bind('beforeStartDetach',function (conn)  {
///// ....
//页面线的dom
const connectors =idePageJsPlumstance.getAllConnections ()
//删除点，线 节点
idePageJsPlumstance.detach(con)
idePageJsPlumstance.remove(id)
idePageJsPlumstance.removeAllEndpoints(id)
3.  储存和 回显 重新代码生成操作
  a .  储存的话，先将拖动的新增节点信息保存,比如left 、id、 top 固定信息保存
 再将线保存 线有五个参数 通过遍历idePageJsPlumstance.getAllConnections() //线数据获取，保存线的id、 sourceId、targetId 还有点锚点的起止位置参数
  b .  重新代码生成    还原节点后
idePageJsPlumstance.ready (function () {
     idePageJsPlumstance.connect ({
            source: startKey,
            target:endKe,
            anchors: [sourcepoint, item.targetpoint ],
            endpoint: 'Dot',
            isSource: true,
            isTarget: true,
 再注册相应的拖拽事件
四．总结：
代码回显时候显示连接线 用jsPlumb.connect()，
在项目中每个锚点是层级关系，层级叠加要处理好，
在拖拽事件中，生成点，再连线，注意好相关顺序，顺序不一样，影响不一样，
有些事件参数不起作用，需要代码控制。
自带zoom 要和位置等相结合使用，避免冒泡