[英]Unable to add Nodes or shapes in Jsplumb community edition
I am using the @jsplumb/browser-ui
to create some Nodes
within my Nuxtjs/Vuejs
application like as mentioned in their documentation .我正在使用
@jsplumb/browser-ui
在我的Nuxtjs/Vuejs
应用程序中创建一些Nodes
,如他们的文档中所述。 But I would like to create the Nodes at run-time.但我想在运行时创建节点。 I am unable to do it.
我做不到。
I would like to create the nodes/rectangle
shapes whenever the user clicks on the Add Event
button.每当用户单击“
Add Event
按钮时,我都想创建nodes/rectangle
形状。 So rather than creating the Nodes
static way I would like to create it dynamically/run time based on the button click.因此,我不想以静态方式创建
Nodes
而是根据按钮单击动态/运行时创建它。 I am not understanding how to do it using jsPlumb
documentation how to do it as they don't have a specific code sample to achieve the same.我不明白如何使用
jsPlumb
文档来做到这一点,因为他们没有特定的代码示例来实现相同的目标。
Following is the code I have:以下是我的代码:
<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>
Hoping this answer would be helpful to someone in the future:希望这个答案对未来的人有所帮助:
As per the response from contributors GitHub , we cannot create the Nodes/Shapes
within the Jsplumb community edition
.根据贡献者GitHub的回复,我们无法在
Jsplumb community edition
创建Nodes/Shapes
。
Instead of Jsplumb
, I started using the DrawFlow
library which is just awesome and has all the requirements that I needed for my application.我开始使用
DrawFlow
库而不是Jsplumb
,它非常棒并且具有我的应用程序所需的所有要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.