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) {//断开连接时的触发事件
            // that.connectionDetached(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 = 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.state.conn_data = result;
        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"); //容器, 所有的连接的元素必须在容器内.
// 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实现自己想要的画图效果。
# 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开发...