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})
}