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 要和位置等相结合使用，避免冒泡

JsPlumb在react的使用方法及介绍的更多相关文章

React Native之FlatList的介绍与使用实例
React Native之FlatList的介绍与使用实例功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...
KEGG数据库的使用方法与介绍
KEGG数据库的使用方法与介绍 KEGG的数据 KEGG中的pathway是根据相关知识手绘的,这里的手绘的意思可能是指人工以特定的语言格式来确定通路各组件的联系:基因组信息主要是从NCBI等数据库中 ...
使用JsPlumb绘制拓扑图的通用方法
转自:http://www.it165.net/pro/html/201311/7616.html 使用JsPlumb绘制拓扑图的通用方法一. 实现目标绘制拓扑图, 实际上是个数据结构和算法的问题 ...
使用Memcache在PHP中调试方法的介绍及应用
使用Memcache在PHP中调试方法的介绍及应用如果我们在网络开发中,特别是大访问量的web项目开发中,为了提高响应速度,减少数据查询运算,那么我们都会选用memcahce.首先我们必须要安装,接 ...
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍，及演示。
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流.是 ...
[react 基础篇]——React.createClass(）方法同时创建多个组件类
react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类一个组 ...
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
04-vi使用方法详细介绍
vi使用方法详细介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版 ...
使用 JsPlumb 绘制拓扑图的通用方法
摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级示例工程见: http://download.csdn.net ...
WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍
这篇文章主要介绍了WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍,WQL是指Windows管理规范查询语言,需要的朋友可以参考下 WQL就是WMI中的查询语言,WQL的全称是W ...

随机推荐

初入水：vector
---恢复内容开始---Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型类的作用,是一种顺序容器,支持随机访问,可动态分配空间(扩充:销毁旧内存,更新 ...
用C++编写一个随机产生多个两位数四则运算式子的简单程序
一设计思想: 1.首先可以想到一个四则运算式子的组成:两个运算数和一个运算符: 2.两个运算数的随机由调用随机函数产生,其中可以设定运算数的范围: 3.一个运算符的随机产生可以分为加减乘除四种情况, ...
webpack减少打包后文件体积的几种方法
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件刚开始用 webpack 的时候,开发环境 ...
基础知识——Cocos2d-x学习历程(三)
1.场景与流程控制我们把一些内容相对不变的游戏元素集合称作场景(scene),把游戏在场景之间切换的过程叫做流程控制(flow control). 在Cocos2d-x中,场景的实现是Scene. ...
sql中检查时间是否重叠
先画一个时间轴,方便理解. 设新的时间块,开始时间为@BeginDate,结束时间为@EndDate.数据库中的数据为BeginDate和EndDate 这样可以直观的看出来,新的时间块插入进来,只需 ...
SAP MM tables
Materials MARA - Material Master: General data MAKT - Material Master: Description MARM - Material M ...
【BZOJ4832】抵制克苏恩（矩阵快速幂，动态规划）
[BZOJ4832]抵制克苏恩(矩阵快速幂,动态规划) 题面 BZOJ 题解一模一样 #include<iostream> #include<cstdio> using na ...
Oracle 如何对中文字段进行排序
Oracle 如何对中文字段进行排序 oracle中drop.delete和truncate的区别 oracle里的执行计划-查看
Math对象小笔记
来,总结下Math对象的常用方法和属性 1.E 自然对数的底数 Math.E; //2.718281828459045 2.PI 圆周率 Math.PI; //3.141592653589793 3 ...
python set集合一些基本方法
set集合是一个无序且不重复的元素集合这个数据类型没有重复的,而且也没有顺序一些基本的方法: 添加元素 s1 = {11, 22, 33} s1.add(123)#添加一个新的元素 print(s ...

JsPlumb在react的使用方法及介绍

JsPlumb在react的使用方法及介绍

一．相关资料来源：

二．引用库：

三．在React使用方法：

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

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

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

b. 在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动 不熟悉的可以搜下jq ui 这里这样写的：

c. 在面板中，要获取位置生成新的dom 对新dom注册事件, （此处以简写，具体方式根据实际项目来做）

d. 同时要对线做一些事件，这里有

3. 储存和 回显 重新代码生成操作

四．总结：

JsPlumb在react的使用方法及介绍的更多相关文章

随机推荐

b. 在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动不熟悉的可以搜下jq ui 这里这样写的：

3. 储存和回显重新代码生成操作