JsPlumb在react的使用方法及介绍

林小愚 發表於 2020-6-30 13:18:00

<h1 align="center">JsPlumb在react的使用方法及介绍</h1>
<h2>一．相关资料来源：</h2>
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 拖动
<h2>二．引用库：</h2>
版本：2.13.3
库：https://github.com/jsplumb/jsplumb
链接：https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ 
提取码：z2t4
React  vue :    npm   i   jsplumb
注意：低版本需要引用jq 以及jq-ui，此版本不需要
<h2>三．在React使用方法：</h2>
<ol>
<li>
<h3>在我的react项目中，分菜单栏和画布，菜单栏是可拖动子菜单，将菜单拖到画布上，在画布上进行对子菜单项目的操作，大概是这样：</h3>
<h5><img src="https://img2020.cnblogs.com/blog/1506521/202006/1506521-20200630124325887-1631724974.png" alt="" width="688" height="297" loading="lazy"></h5>
</li>
<li>
<h3>在使用过程中，应为拖动事件，和画图事件都是要先有dom节点,所以，一定要有节点的时候再注册相应的监听事件：</h3>
</li>
</ol>
<h4>        a.    React项目中要在 componentDidMount() 生命周期后开始操作，因为是单页面应用，要保证当前页面渲染完成后注册jsplumb实例，离开后要销毁实例所以</h4>
<div class="cnblogs_code">
<pre>let idePageJsPlumstance=’’;
 //初始化
 componentDidMount() {
 idePageJsPlumstance = jsPlumb.getInstance() //关键函数注册jsplumb实例
 idePageJsPlumstance.setContainer ('flow-main')//设置面板
 },
//离开
 componentWillUnmount() {
 if (idePageJsPlumstance) {
 idePageJsPlumstance.clear() //清空
 }
},</pre>
</div>
<h4>         b.     在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动不熟悉的可以搜下jq ui  这里这样写的：</h4>
<div class="cnblogs_code">
<pre>//给span注册拖动事件
$('#flow-btns').find('span').draggable({
 helper: 'clone',//拖动样式
 zIndex: 11,
 scope: 'flowMainCanvas',//关键参数
 })</pre>
</div>
      Scope  //关键参数，被拖动子菜单和拖动到面板要对应相同
<h4>         c.   在面板中，要获取位置生成新的dom 对新dom注册事件, （此处以简写，具体方式根据实际项目来做）</h4>
 
<div class="cnblogs_code">
<pre>//样式
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 = “’+ui.helper.context.dataset.text+’”
 $ (this).append (dom)
 dom.css ('left', left).css ('top', top)
 idePageJsPlumstance.addEndpoint ( id, {
 anchor:"LeftMiddle"
 }, endAllPointStyle)
 //注册端点拖桶
 idePageJsPlumstance.draggable ( id)
 //注册节点拖动
 $ ('#' + id).draggable ({
 containment:"parent",
 })
}
})</pre>
</div>
 
<h4>         d.     同时要对线做一些事件，这里有</h4>
<div class="cnblogs_code">
<pre>//连接线的右键单击事件
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)</pre>
</div>
 
<h3>3.  储存和回显重新代码生成操作</h3>
  a .  储存的话，先将拖动的新增节点信息保存,比如left 、id、 top 固定信息保存
 再将线保存 线有五个参数 通过遍历idePageJsPlumstance.getAllConnections() //线数据获取，保存线的id、 sourceId、targetId 还有点锚点的起止位置参数
  b .  重新代码生成    还原节点后
 
<div class="cnblogs_code">
<pre>idePageJsPlumstance.ready (function () {
idePageJsPlumstance.connect ({
 source: startKey,
 target:endKe,
 anchors: ,
 endpoint: 'Dot',
 isSource: true,
 isTarget: true,
})
})</pre>
</div>
 
 再注册相应的拖拽事件
<h2>四．总结：</h2>
<ol>
<li>代码回显时候显示连接线 用jsPlumb.connect()，</li>
<li>在项目中每个锚点是层级关系，层级叠加要处理好，</li>
<li>在拖拽事件中，生成点，再连线，注意好相关顺序，顺序不一样，影响不一样，</li>
<li>有些事件参数不起作用，需要代码控制。</li>
<li>自带zoom 要和位置等相结合使用，避免冒泡</li>
</ol>
 

</div>
<div id="MySignature" role="contentinfo">
转载标明来路-博客园，
联系方式1763907618@qq.com 
来源：https://www.cnblogs.com/wangyongping/p/13213179.html

頁: [1]

琼殿技术论坛's Archiver

JsPlumb在react的使用方法及介绍