如何通过jsplumb库绘制div连线

工作中有涉及到绘制卡片流程连线的需求，现将应用的技术进行记录

本文仅展示最简单的connect方法，若需要查看详细方法需查看中文文档

绘制连线的div外层包裹的容器需要设置position:relative;否则可能会导致连线位置异常

简单链接用法

import {jsPlumb} from "jsplumb"; 
import _ from 'lodash'

const plumb = useRef<any>(null)

useEffect(() => {
    if (!plumb.current) {
        console.log('创建图例实例----------')
        plumb.current = jsPlumb.getInstance()
        plumb.current.ready(() => {
            setReady(true)
        })
    }
    return () => {
        if (plumb.current) {
            console.log('销毁图例----------')
            plumb.current.clear()
            plumb.current = null
        }
    }
}, [])

//!_.isEqual(组建内值, 新值) //lodash 判断数组是否一致

plumb.current.reset() //清除历史绘制

const obj = {
    anchors: ['Left', 'Right'],
    source: 起始点id,
    target: 结束点id,
    paintStyle: {stroke: '#CFE2F9', strokeWidth: 3},
    endpointStyle: {radius: 0.01},
    overlays: [['Arrow', {width: 10, length: 10, location: 1}], //箭头
        ['Label', { //中间的描述文字
            location: '50',
            label: item.pay || '?',
            cssClass: 'pay-Label',
            visible: true, id: 'LabelPay'
        }]
    ]
}

console.log('图例绘制----------', obj)
plumb.current.connect(obj, {
    container: 'TreeChart',
    isSource: true,
    isTarget: true,
    connector: ['Flowchart', {gap: 1}]
})