时间戳

首页 > 解决方案 > 无法在 Jsplumb 社区版中添加节点或形状

javascript - 无法在 Jsplumb 社区版中添加节点或形状

问题描述

我正在使用他们的文档中提到的在我的应用程序@jsplumb/browser-ui中创建一些。但我想在运行时创建节点。我做不到。NodesNuxtjs/Vuejs

nodes/rectangle每当用户单击Add Event按钮时，我想创建形状。因此，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">
        <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>

标签： javascriptvue.jsnuxt.jsjsplumb

解决方案

希望这个答案对将来的某人有所帮助：

根据贡献者GitHub的回复，我们无法Nodes/Shapes在Jsplumb community edition.

取而代之的是Jsplumb，我开始使用DrawFlow非常棒的库，它具有我的应用程序所需的所有要求。

推荐阅读