Impossible d'ajouter un nœud ou une forme dans Jsplumb Community Edition

Question

J'utilise @jsplumb/browser-ui 在我的 Nuxtjs/Vuejs 应用程序中创建一些 Nodes comme décrit dans sa documentation. Mais je veux créer des nœuds au moment de l'exécution. Je ne peux pas le faire.

Chaque fois que l'utilisateur clique sur la Add Event 按钮时，我想创建 nodes/rectangle 形状。因此，我不想以静态方式创建 Nodes ，而是想根据按钮单击动态/运行时创建它。我不明白如何使用 jsPlumb documentation pour le faire, car il ne dispose pas d'un exemple de code spécifique pour obtenir la même chose.

Voici mon code :

<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">
        <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>

Answer 1

J'espère que cette réponse aidera quelqu'un à l'avenir :

Selon la réponse du contributeur GitHub, nous ne sommes pas en mesure de créer dans Nodes/Shapes在 Jsplumb 社区版 .

J'ai commencé à utiliser la bibliothèque DrawFlow 库，而不是 Jsplumb et elle est géniale et répond à toutes les exigences dont j'ai besoin pour ma candidature.