jsplumbreact下实现⾃定义流程图操作（适合各类流程、数据库操作）
jsplumb react下实现⾃定义流程图操作(适合各类流程、数据库操作)
因为前段设计需要实现两个表的字段之间实现连线，本来打算⾃⼰通过css + react实现，但是发现连线过程很难⾃定义开发,⽽且⼯作量很⼤，最后选择了⽤jsplumb实现。⽤jsplumb实现流程图demo可以说是⾮常简单的，估计⼤家参考官⽹随便弄⼏下就可以出效果，但是需要按照UI给的样式来实现，我只想说jsplumb API是不是太简单了，所以这⾥给⼤家提供下jsplumb 的操作， 希望对⼤家有点帮助，上代码：
官⽹给出的API地址 ：
⼀、js代码
import React,{Component}from'react';
import'./TablePage.css';
import{Table,Row, Col,Button}from'antd';
import'antd/dist/antd.css';
import jsplumb from'jsplumb';
const jsPlumbIn = jsplumb.jsPlumb;
const jsPlumbIn_common ={
isSource:true,
isTarget:true,
connector:['Straight',{lineWidth:5,fill:'#1890FF',strokeStyle:'#1890FF'}],
maxConnections:-1,//⼀个端点拖拽多条连线
endpoint:['Dot',{radius:5, fill:'#1890FF'}],
endpointStyle:{ fill:'#1890FF'},
connectorStyle:{stroke:'#1890FF', strokeWidth:2},//设置连线的颜⾊以及粗度
connectorOverlays :[['Arrow',{ width:12, length:12, location:-4}]],
connectorHoverStyle :{lineWidth:2,stroke:'#1A32FF', strokeStyle:'#1A32FF', outlineWidth:10, outlineColor:''},//⿏标悬浮到连线的样式
paintStyle:{strokeStyle:'#1890FF', stroke:'#1890FF', fill:'pink', fillStyle:'#1890FF', radius:6, lineWidth:2},
}
const dataSource =[
{id :123423, name :"row_1"},
{id :332, name :"row_2"},
{id :3, name :"row_3"},
{id :4, name :"row_4"},
{id :5, name :"row_5"},
];
const dataTarget =[
{id :1, name :"row_1",type :"VARCHAR"},
{id :2, name :"row_2",type :"VARCHAR"},
{id :3, name :"row_3",type :"VARCHAR"},
{id :4, name :"row_4",type :"VARCHAR"},
{id :5, name :"row_5",type :"VARCHAR"},
]
const columns =[
{title :"源头表",dataIndex :"name", key :"name"}
]
const columns1 =[
{title :"⽬标字段",dataIndex :"name", key :"name"},
{title :"类型",dataIndex :"type", key :"type"}
]
class TablePage extends Component{
constructor(props){
super(props);
this.state ={
conn_data :[]
};
}
intLineContainer=()=>{
var that =this;
jsPlumbIn.setContainer("lineContainer");//容器, 所有的连接的元素必须在容器内.
const leftTable = ElementById("leftTable");
const rightTable = ElementById("rightTable");
this.initPointId(leftTable,"source");
this.initPointId(rightTable,"target");
jsPlumbIn.bind('click',function(conn, originalEvent){
firm('确定删除所点击的链接吗？')){
that.deleteConnectionData(conn);
jsPlumbIn.deleteConnection(conn);
}
});
jsPlumbIn.bind('connection',function(conn){//两个表进⾏关联时
});
jsPlumbIn.bind('connectionDetached',function(conn){//断开连接时的触发事件
// tionDetached(conn);
});
}
/**
* 删除连线钱数据处理操作，可⽤ connectionDetached() 代替该函数
* @param e
*/
deleteConnectionData=(conn)=>{
console.log("触发删除连线钱数据处理操作");
this.unBuildConnectionData(conn);
}
/**
* 连线完成数据处理操作
* @param conn
*/
connection=(conn)=>{
//TODO: 连线完成需要执⾏的操作
this.buildConnectionData(conn);
}
/**
* 构建连线 source 和 target 的service数据操作接⼝
* @param conn
*/
buildConnectionData=(conn)=>{
//TODO：连线完成需要执⾏的操作,elementID 是jsPlumbIn的操作信息,⽤于删除连线时候的数据处理
let sourceValue = ElementById(conn.sourceId).attributes["data-row-key"].nodeValue]; sourceValue.elementID = conn.sourceId;
let targetValue = ElementById(conn.targetId).attributes["data-row-key"].nodeValue]; targetValue.elementID = conn.targetId;
_data.push({source:sourceValue,target:targetValue});
console.log(_data);
}
/**
* 删除连线 source 和 target 的service数据操作接⼝
* @param conn
*/
unBuildConnectionData=(conn)=>{
let result =[];
for(let i =0; i <_data.length; i ++){
if(conn.sourceId ==_data[i].source.elementID &&
conn.targetId ==_data[i].target.elementID)continue;
result.push(_data[i]);
}
}
// _data = result;
this.setState({conn_data : result});
console.log(_data);
}
/**
* 连线断开数据处理操作，如果是删除操作触发，删除操作接⼝调⽤完成后，调⽤该接⼝
* 如果是拖拽导致连线断开，将直接调⽤该接⼝，该接⼝类似删除接⼝.
* @param conn
*/
connectionDetached=(conn)=>{
console.log("触发线断开数据处理操作");
this.unBuildConnectionData(conn);
}
/**
* 初始化 jsPlumbIn 端点操作，需要等待 <div id={"lineContainer"}> 内组件加载完成后执⾏
* @param table
* @param type
*/
initPointId(table,type){
const trs = ElementsByTagName("tbody")[0].getElementsByTagName("tr");
for(let i =0; i < trs.length; i ++){
let value = trs[i].attributes["data-row-key"].nodeValue;
trs[i].setAttribute("id",type + value);
trs[i].setAttribute("record",type ==="source"? dataSource[i]: dataTarget[i]);
jsPlumbIn.addEndpoint(type + value,{
anchors:[type ==='source'?'Right':'Left']
}, jsPlumbIn_common);
}
}
render(){
return(
<div id={"lineContainer"}>
<div className={"button-style"}>
<Button type="primary" onClick={e =>this.intLineContainer(e)}>连线初始化</Button>
</div>
<Row>
<Col span={4}>
<Table id={"leftTable"} className={"table-class"} dataSource={dataSource}react native
columns={columns} pagination={false} bordered={true}/>
</Col>
<Col span={6}>
</Col>
<Col span={4}>
<Table id={"rightTable"} className={"table-class"} dataSource={dataTarget}
columns={columns1} pagination={false} bordered={true}/>
</Col>
</Row>
</div>
);
}
}
export default TablePage;
⼆、CSS内容
.table-class{
margin: 20px;
}
.button-style{
margin: 10px;
}
三、效果图
其实CSS并不重要，重点是 jsPlumbIn_common这个变量的内容控制了所有的样式。⼤家⽐较头痛的其实主要就是样式，折腾了半天发现公司要的是黄⾊的连线，出来的是个灰⾊的，欲哭⽆泪的样⼦。这⾥的表格也可以换成其他的元素。重点是端点的描点，可能会出现位置错误。所以必须加⼊以下代码：
jsPlumbIn.setContainer("lineContainer");//容器, 所有的连接的元素必须在容器内.
// lineContainer 是容器的div的ID
四、配置详解
const jsPlumbIn_common ={
isSource:true,//教程2.8 拖动创建节点，源节点
isTarget:true,//教程2.8 拖动创建节点,⽬标节点
//教程 2.3 jsplumb连线的样式有四种我这⾥选择的是直线
// Bezier: 贝塞尔曲线
// Flowchart: 具有90度转折点的流程线
// StateMachine: 状态机
// Straight: 直线
// 连线类型线条的粗细度线条的颜⾊，这个貌似没啥⽤线条颜⾊，这个可以控制颜⾊
connector:['Straight',{lineWidth:5,fill:'#1890FF',strokeStyle:'#1890FF'}],
maxConnections:-1,//⼀个端点拖拽多条连线值为 1 , ⼀个端点只能有⼀条线，端点拖拽可以实现取消连线; -1 ⼀个端点可以有多条连线
endpoint:['Dot',{radius:5, fill:'#1890FF'}],//修改端点的颜⾊，将原⽣的灰⿊⾊修改为蓝⾊
endpointStyle:{ fill:'#1890FF'},//控制端点的颜⾊，这个貌似靠谱些
connectorStyle:{stroke:'#1890FF', strokeWidth:2},//设置连线的颜⾊以及粗度
connectorOverlays :[['Arrow',{ width:12, length:12, location:-4}]],// 设置箭头的位置, ⼤⼩, 颜⾊
connectorHoverStyle :{lineWidth:2,stroke:'#1A32FF', strokeStyle:'#1A32FF', outlineWidth:10, outlineColor:''},//⿏标悬浮到连线的样式
paintStyle:{strokeStyle:'#1890FF', stroke:'#1890FF', fill:'pink', fillStyle:'#1890FF', radius:6, lineWidth:2},
}
以上就是react下使⽤jsplumb实现⾃⼰想要的画图效果。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论