jsplumb react下实现自定义流程图操作(适合各类流程、数据库操作)
因为前段设计需要实现两个表的字段之间实现连线,本来打算自己通过css + react实现,但是发现连线过程很难自定义开发,而且工作量很大,最后选择了用jsplumb实现。用jsplumb实现流程图demo可以说是非常简单的，估计大家参考官网随便弄几下就可以出效果，但是需要按照UI给的样式来实现，我只想说jsplumb API是不是太简单了，所以这里给大家提供下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 = document.getElementById("leftTable");
const rightTable = document.getElementById("rightTable");
this.initPointId(leftTable,"source");
this.initPointId(rightTable,"target");
jsPlumbIn.bind('click', function (conn, originalEvent) {
if (window.confirm('确定删除所点击的链接吗？')) {
that.deleteConnectionData(conn);
jsPlumbIn.deleteConnection(conn);
});
jsPlumbIn.bind('connection', function (conn) {
that.connection(conn);
});
jsPlumbIn.bind('connectionDetached', function (conn) {
});
* 删除连线钱数据处理操作,可用 connectionDetached() 代替该函数
* @param e
deleteConnectionData = (conn) => {
console.log("触发 删除连线钱数据处理操作");
this.unBuildConnectionData(conn);
* 连线完成数据处理操作
* @param conn
connection = (conn) => {
this.buildConnectionData(conn);
* 构建连线 source 和 target 的service数据操作接口
* @param conn
buildConnectionData = (conn) => {
let sourceValue = dataSource[document.getElementById(conn.sourceId).attributes["data-row-key"].nodeValue];
sourceValue.elementID = conn.sourceId;
let targetValue = dataTarget[document.getElementById(conn.targetId).attributes["data-row-key"].nodeValue];
targetValue.elementID = conn.targetId;
this.state.conn_data.push({source:sourceValue,target:targetValue});
console.log(this.state.conn_data);
* 删除连线 source 和 target 的service数据操作接口
* @param conn
unBuildConnectionData = (conn) => {
let result = [];
for(let i = 0; i < this.state.conn_data.length; i ++){
if(conn.sourceId == this.state.conn_data[i].source.elementID &&
conn.targetId == this.state.conn_data[i].target.elementID) continue;
result.push(this.state.conn_data[i]);
this.setState({conn_data : result});
console.log(this.state.conn_data);
* 连线断开数据处理操作,如果是删除操作触发,删除操作接口调用完成后,调用该接口
* 如果是拖拽导致连线断开,将直接调用该接口,该接口类似删除接口.
* @param conn
connectionDetached = (conn) => {
console.log("触发 线断开数据处理操作");
this.unBuildConnectionData(conn);
* 初始化 jsPlumbIn 端点操作,需要等待 <div id={"lineContainer"}> 内组件加载完成后执行
* @param table
* @param type
initPointId(table,type){
const trs = table.getElementsByTagName("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>
<Col span={4}>
<Table id={"leftTable"} className={"table-class"} dataSource={dataSource}
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");
四、配置详解
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},
以上就是react下使用jsplumb实现自己想要的画图效果。
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
流程图-角度6
一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例（当前已更新到Angular 7版本）
更新：解决ng-zorro版本更新带来的图标加载问题（由于集成了两种图标加载方式，放置框的图标会出现两个，之后有时间再修改）
网上找了很久都没有找到用角度实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。
实现的功能：
拖拽式添加例程
拖拽式连线
双击连接线删除连接线
流程图转json数据
json数据转流程图
连接线中新增按钮功能，可点击选择文件
npm安装
在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。
上 篇
前言：之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb，其实真不算难，不过项目里面用HTML做的一些类似flash的效果，感觉还不错，在此分享下。
Jsplumb官网：https://jsplumbtoolkit.com
GitHub：https://github.com/sporritt/jsplumb/
一、效果图展示
1、从左边拖动元素到中间区域，然...
1.react-flow
react-flow是一个用于构建基于节点的应用程序的库。这些可以是简单的静态图或复杂的基于节点的编辑器。同时react-flow支持自定义节点类型和边线类型，并且它附带一些组件，可以查看缩略图的Mini Map和悬浮控制器Controls.
2.react-flow安装
npm install react-flow-renderer # npm
yarn add react-flow-renderer # Yarn
官方文档地址: https://react
hello，大家好，我是前端小老弟儿，最近老弟儿接到这样一个需求，实现一个流程图，可以连线，右键操作，以及删除连线等，如下所示得流程图。使用得插件是: jsPlumb；所以就简单的介绍一下jsPlumb基本使用
什么是jsplumb
jsPlumb是一个强大得JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。同时也支持vue2.0 ，react和Angular 。
jsplumb 能干什么？
该框架适用于必须回值图表得web
jsplumb流程图,jsPlumb创建具有视觉连接性程序
jsPlumb Toolkit 允许您快速创建具有视觉连接性的复杂应用程序，而无需构建任何无聊的东西：该工具包提供平移/缩放、小地图小部件、自动布局、数据绑定、路径查找等等。
jsplumb流程图????2315702359为 javascript 开发人员快速构建需要视觉连接的应用程序提供了基础。工具包功能包括：
平移/缩放
一个超级流畅的平移/缩放组件，可以完美地使用鼠标或通过触摸设备上的捏合操作。
jsplumb
最近想跟着教程，尝试用React做一个SPA项目。记录一下大致的流程。
1. 搭建react开发环境
使用 react-create-app 脚手架，搭建react开发环境。默认已装好 npm 和 nodejs，终端输入：
> npm install -g react-create-app
> react-create-app folder-name
这时就已经搭建好了react开发...
