無法在 Jsplumb 社群版中新增節點或形狀
我正在使用 @jsplumb/browser-ui 在我的 Nuxtjs/Vuejs 應用程式中建立一些 Nodes，如其文件中所述。但我想在運行時創建節點。我做不到。
每當使用者點擊 Add Event 按鈕時，我想建立 nodes/rectangle 形狀。因此，我不想以靜態方式建立 Nodes ，而是想根據按鈕點擊動態/運行時來建立它。我不明白如何使用 jsPlumb 文件來做到這一點，因為他們沒有特定的程式碼範例來實現相同的目的。
以下是我的程式碼：
<template>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary btn-sm" @click="addConnector()">
Add Connector
</button>
<button class="btn btn-primary btn-sm" @click="addNode()">
Add Event
</button>
<button class="btn btn-success btn-sm" @click="submitEvents()">
Submit
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="diagram" ref="diagram" style="position: relative; width:100%; height:100%;" />
</div>
</div>
</div>
</div>
</template>
<script>
let jsPlumb = null
export default {
data () {
return {
nodeCounter: 0,
nodeArray: [],
connectorCounter: 0,
connectorArray: [],
allEventsInfoArray: []
}
},
async mounted () {
if (process.browser) {
const jsPlumbBrowserUI = await import('@jsplumb/browser-ui')
jsPlumb = jsPlumbBrowserUI.newInstance({
dragOptions: {
cursor: 'pointer',
zIndex: 2000
},
container: this.$refs.diagram
})
console.log(jsPlumb)
}
},
methods: {
// On click of Add Node button create the draggable node into the jsPlumb canvas
addNode () {
// const container = "<button class='btn btn-info' id='container_" + this.nodeCounter + "'></button>"
this.nodeCounter++
},
// On click of Add Connector button create the draggable node into the jsPlumb canvas
addConnector () {
console.log('Add Connector : ')
jsPlumb.connect({
anchor: 'AutoDefault',
endpoints: ['Dot', 'Blank'],
overlays: [
{ type: 'Arrow', options: { location: 1 } },
{
type: 'Label',
options: { label: 'foo', location: 0.25, id: 'myLabel' }
}
]
})
}
}
}
</script>
<style scoped>
</style>