如何使用 jsPlumb 社区版创建节点

Question

我正在使用 @jsplumb/browser-ui 在我的 Nuxtjs/Vuejs 应用程序中创建一些 Nodes，就像他们 documentation 中提到的那样。但我想在运行时间创建节点。我做不到。

我想在用户单击 Add Event 按钮时创建 nodes/rectangle 形状。因此，我不想创建 Nodes 静态方式，而是希望根据按钮点击创建 dynamically/run 时间。我不明白如何使用 jsPlumb documentation 如何做到这一点，因为他们没有特定的代码示例来实现相同的目的。

以下是我想要实现的目标：

我目前的代码：

<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，它非常棒并且具有我的应用程序所需的所有要求。

如何使用 jsPlumb 社区版创建节点

How to create Nodes using jsPlumb community edition

javascript

jsplumb

vue.js

nuxt.js