My.oschina.net/huanglianbi…
Dynamically display the node location based on the passed node{left: “,top: “} field
// The node position in the canvas is displayed
//nodeList data
nodeList:[{
id: ‘nodeA’,
title:’title1′,
name: ‘name1’,
type: ‘task’,
left: ’18px’,
top: ’18px’,
ico: ‘el-icon-user-solid’,
state: ‘success’
},
{
id: ‘nodeB’,
type: ‘task’,
title:’title2′,
name: ‘name2’,
left: ’18px’,
top: ’96px’,
ico: ‘el-icon-goods’,
state: ‘error’
}
]}
//script jsplumb
import {jsPlumb, jsPlumbInstance} from ‘jsplumb’
let plumbIns = jsPlumb.getInstance()
// plumbIns.importDefaults()
plumbIns.ready(function () {
plumbIns.connect({
// Correspond to the above basic concepts
source: ‘item-1’,
target: ‘item-2’,
Anchor: [‘ Left ‘, ‘Right’ and ‘Top’ and ‘Bottom’, [0.3, 0, 0, 1], [0.7, 0, 0, 1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]].
// connector: [‘StateMachine’],
endpoint: ‘Blank’,
overlays: [ [‘Arrow’, { width: 8, length: 8, location: 1 }] ], // overlay
// Add styles
paintStyle: { stroke: ‘#909399’, strokeWidth: 2 }, // connector
endpointStyle: { fill: ‘#909399’, outlineStroke: ‘#606266’, outlineWidth: 1 } // endpoint
})
})