jsplumb使用（二）

三、jsplumb的使用

安装使用

npm install jsplumb

基本概念

• Souce 源节点
• Target 目标节点
• Anchor 锚点
• Endpoint 端点
• Connector 连接

1、节点的拖动

<script>
/* global jsPlumb */
jsPlumb.ready(() => {
  jsPlumb.draggable(nodeId)
})
</script>

默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。

<script>
/* global jsPlumb */
jsPlumb.draggable(nodeId, {
    containment: 'efContainer'
})
</script>

其中efContainer为区域ID。

2、添加连接的端点——连接点addEndpoint

代码如下：

jsPlumb.ready(() => {
  jsPlumb.draggable(nodeId)
  jsPlumb.addEndpoint(nodeId, { isTarget: true, isSource: true, anchor: 'Right' })
  jsPlumb.addEndpoint(nodeId, { isTarget: true, isSource: true, anchor: 'Left' })
  jsPlumb.addEndpoint(nodeId, { isTarget: true, isSource: true, anchor: 'Top' })
  jsPlumb.addEndpoint(nodeId, { isTarget: true, isSource: true, anchor: 'Bottom' })
})

效果如下：

3、连接的样式

连线主要由以下四部分组成的：

• Endpoint 端点，默认为圆点
• Connector 连接线，默认为贝塞尔曲线
• Anchor 锚点，不可见元素，跟Endpoint是绑定的，在动态创建连接线时使用
• Overlay 覆盖物，如连线上的箭头，也可以是文字或dom元素

我们可以对连接点和连接线进行自定义

jsplumb连接线的样式有四种

• Bezier: 贝塞尔曲线
• Flowchart : 具有90度转折点的流程线
• StateMachine : 状态机
• Straight : 直线

overlays也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。

overlays可以分为五种类型：

• Arrow 一个可配置的箭头
• Label 标签，可以在链接上显示文字信息
• PlainArrow 原始类型的箭头
• Diamond 菱形箭头
• Custom 自定义类型

connectorStyle: {
	// 端点的样式
    paintStyle: {
        fill: '#7AB02C',
        radius: 7
    },
    // endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
    // 鼠标移上样式
    hoverPaintStyle: {
        fill: '#216477',
        stroke: '#216477'
    },
    
    // 连线类型
    connector: ['Flowchart', {
        stub: [40, 60],
        gap: 10,
        cornerRadius: 5,
        alwaysRespectStubs: true
    }],
    // 连线样式
    connectorStyle: {
        strokeWidth: 3,
        stroke: '#9C9DA9',
        joinstyle: 'round',
        outlineStroke: 'none',
        // 线外边的宽，值越大，线的点击范围越大
        outlineWidth: 10
    },
    connectorHoverStyle: {
        stroke: 'green'
    },
    
    
    connectorOverlays: [
    	// 箭头
      ['Arrow', { width: 12, length: 12, location: 1 }],
      // 文字
      ['Label', {
      		// 文字
          label: '测试',
          // 位置
          location: 0.5,
          // 自定义样式
          cssClass: 'endpointLabel'
        }
      ]
    ]
}

// 使用

jsPlumb.addEndpoint(nodeId, { isTarget: true, isSource: true, anchor: 'Left' }, connectorStyle)

效果图如下：

4、删除连接线

// 双击删除连接线
jsPlumb.bind('dblclick', (conn) => {
    jsPlumb.deleteConnection(conn)
})

5、删除节点

// 删除数据
const nodeIndex = this.nodeList.findIndex(item => item.id === node.id)
this.nodeList.splice(nodeIndex, 1)
// 删除节点相关的端点和连接线
jsPlumb.removeAllEndpoints(node.id)

6、缩放

缩小

baseZoom = 1
cutSize () {
    this.baseZoom -= 0.1
    const zoom = this.baseZoom
    this.$refs.efContainer.style.transform = `scale(${zoom})`
    this.$refs.efContainer.style.WebkitTransform = `scale(${zoom})`
    this.$refs.efContainer.style.MozTransform = `scale(${zoom})`
    this.$refs.efContainer.style.MsTransform = `scale(${zoom})`
    this.$refs.efContainer.style.OTransform = `scale(${zoom})`
    
    jsPlumb.setZoom(zoom)
}

放大

baseZoom = 1
cutSize () {
    this.baseZoom += 0.1
    const zoom = this.baseZoom
    this.$refs.efContainer.style.transform = `scale(${zoom})`
    this.$refs.efContainer.style.WebkitTransform = `scale(${zoom})`
    this.$refs.efContainer.style.MozTransform = `scale(${zoom})`
    this.$refs.efContainer.style.MsTransform = `scale(${zoom})`
    this.$refs.efContainer.style.OTransform = `scale(${zoom})`
    
    jsPlumb.setZoom(zoom)
}

缩放是整个画布及其内容一起缩放

7、代码连接两个节点

获取连接线的数据

jsPlumb.bind('connection', (evt) => {
    const fromId = evt.source.id
    const toId = evt.target.id
    this.lineList.push({from: fromId, to: toId})
})

代码连线

lineList = [
    {
        'from': {
            id: '81thp9hlwn',
            location: 'Right'
        },
        'to': {
            id: 'opblvklzq',
            location: 'Left'
        },
        // 线的配置
        'paintStyle': {
            stroke: '#7AB02C',
            strokeWidth: 2,
            outlineWidth: 10
        },
        // 连线类型
        'connector': ['Flowchart', {
            stub: [40, 60],
            gap: 10,
            cornerRadius: 5,
            alwaysRespectStubs: true
        }],
        // 箭头
        'overlays': [
          ['Arrow', { width: 12, length: 12, location: 1 }],
          ['Label', {
              label: '测试',
              location: 0.5,
              cssClass: 'endpointLabel'
            }
          ]
        ]
    }
]

for (var i = 0; i < this.lineList.length; i++) {
    const line = this.lineList[i]
    const anchor = []
    anchor.push(line.from.location)
    anchor.push(line.to.location)
    const connParam = {
        source: line.from.id,
        target: line.to.id,
        label: line.label ? line.label : '',
        connector: line.connector ? line.connector : '',
        paintStyle: line.paintStyle ? line.paintStyle : undefined,
        overlays: line.overlays ? line.overlays : undefined
    }
    this.jsPlumb.connect(connParam, {anchor: anchor})
}