[英]How to create Nodes using 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 something I would like to achieve:以下是我想要实现的目标:
Code I have so far:我到目前为止的代码:
<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 root"> <div class="col-md-12 body"> <div id="diagram" ref="diagram" class="diagram" style="position: relative; width:100%; height:100%;" /> </div> </div> </div> </div> </template> <script> export default { data () { return { nodeCounter: 0, nodeArray: [], connectorCounter: 0, connectorArray: [], allEventsInfoArray: [] } }, async mounted () { const vm = this if (process.browser) { const JSPlumb = await require('@jsplumb/browser-ui') JSPlumb.ready(function () { const instance = JSPlumb.newInstance({ container: vm.$refs.diagram }) console.log(instance) }) } }, 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 : ') } } } </script> <style scoped> .root { --bg-color: #fff; --line-color-1: #D5D8DC; --line-color-2: #a9a9a9; } .body { height: 100vh; margin: 0; } .diagram { height: 100%; background-color: var(--bg-color); background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0), conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0); background-size: 100px 100px, 20px 20px; } </style>
Providing the answer as it can be helpful to someone in the future:提供答案,因为它可能对将来的某人有所帮助:
As per the response from contributors GitHub , we won't be able to 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.