如何使用 jsPlumb 社區版創建節點

Question

我正在使用@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>&nbsp; <button class="btn btn-primary btn-sm" @click="addNode()"> Add Event </button>&nbsp; <button class="btn btn-success btn-sm" @click="submitEvents()"> Submit </button>&nbsp; </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>

Answer 1

提供答案，因為它可能對將來的某人有所幫助：

根據貢獻者GitHub的回復，我們將無法在Jsplumb community edition創建Nodes/Shapes 。

我開始使用DrawFlow庫而不是Jsplumb ，它非常棒並且具有我的應用程序所需的所有要求。