I am using the @jsplumb/browser-ui
to create some Nodes
within my Nuxtjs/Vuejs
application like as mentioned in their documentation. 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. So rather than creating the Nodes
static way I would like to create it dynamically/run time based on the button click. 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.
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>
Advertisement
Answer
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
.
Instead of Jsplumb
, I started using the DrawFlow
library which is just awesome and has all the requirements that I needed for my application.