Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?-View.js-php.cn

Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?

Gunakan Vue dan Jsmind untuk merealisasikan node sauh dan kawalan sambungan peta minda

introduction

mind adalah alat yang biasa digunakan untuk berfikir dan menganjurkan maklumat. . Melaksanakan fungsi peta minda dalam aplikasi web boleh membantu pengguna mengatur dan mengurus idea mereka dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan perpustakaan Vue dan jsmind untuk merealisasikan titik penambat nod dan kawalan sambungan peta minda.

Gunakan Vue untuk mencipta komponen asas peta minda

Untuk menggunakan fungsi peta minda dengan mudah, kita boleh mencipta komponen asas peta minda. Pertama, kita perlu memasang perpustakaan jsmind dalam projek Vue. Ia boleh dipasang melalui arahan berikut:

npm install jsmind --save

Salin selepas log masuk

Kemudian, perkenalkan perpustakaan dan gaya jsmind ke dalam komponen Vue, dan cipta elemen <div> untuk memaparkan peta minda. Kod tersebut adalah seperti berikut: <div>元素，用于渲染思维导图。代码如下所示：

<template>
  <div ref="mindContainer"></div>
</template>

<script>
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind'

export default {
  name: 'MindMap',
  mounted() {
    this.initMindMap()
  },
  methods: {
    initMindMap() {
      var mind = {
        /* 在这里定义思维导图的数据 */
      }
      var options = {
        container: this.$refs.mindContainer,
        editable: true, // 是否可以编辑节点
        theme: 'default'
      }
      new jsMind(options).show(mind)
    }
  }
}
</script>

<style scoped>
.mind-container {
  width: 100%;
  height: 100%;
}
</style>

Salin selepas log masuk

通过以上代码，我们创建了一个MindMap组件，并在其中引入了jsmind库，并初始化了一个思维导图实例。现在我们可以在Vue项目中使用该组件，并查看基本的思维导图显示效果。

实现节点锚点和连线控制

为了实现节点锚点和连线控制的功能，我们需要在每个节点中添加一个按钮，用于控制锚点的显示和隐藏，并在节点中添加事件监听器，用于完成连线的操作。

首先，我们可以在initMindMap方法中获取所有的节点，并为每个节点添加按钮元素。代码如下：

initMindMap() {
  // ...
  this.$refs.mindContainer.addEventListener('mousedown', (event) => {
    var target = event.target
    if (target.classList.contains('expanded')) {
      // 当前节点已经展开，不进行操作
      return
    }
    if (target.tagName === 'jmnode') {
      var node = target.jmnode
      var button = document.createElement('button')
      button.classList.add('anchor-button')
      button.innerText = '连线'
      button.addEventListener('click', () => {
        this.startConnect(node)
      })
      target.append(button)
    }
  })
}

Salin selepas log masuk

在以上代码中，我们通过event.target获取当前点击的元素，如果该元素为jmnode（即思维导图的节点元素），则为该节点创建一个按钮，并向按钮添加click事件监听器。

接下来，我们可以为每个节点添加连线的操作。

首先，我们需要添加两个响应连线的节点的临时变量，用于记录这两个节点是否已选择。代码如下：

data() {
  return {
    // ...
    selectedNode1: null,
    selectedNode2: null
  }
}

Salin selepas log masuk

然后，我们可以添加一个startConnect方法，并在该方法中根据点击的节点选择是否进行连线。代码如下：

methods: {
  startConnect(node) {
    if (!this.selectedNode1) {
      this.selectedNode1 = node
    } else if (!this.selectedNode2) {
      this.selectedNode2 = node
      this.connectNodes(this.selectedNode1, this.selectedNode2)
      this.selectedNode1 = null
      this.selectedNode2 = null
    }
  },
  connectNodes(node1, node2) {
    // 在这里实现连线的逻辑
  }
}

Salin selepas log masuk

在以上代码中，当点击一个节点时，如果selectedNode1为空，则将该节点赋值给selectedNode1；如果selectedNode1不为空且selectedNode2为空，则将该节点赋值给selectedNode2，并调用connectNodes方法进行节点连线的逻辑；最后，在连线完成后，将selectedNode1和selectedNode2重新赋值为空。

在connectNodes方法中，我们可以使用jsmind提供的API方法将两个节点进行连线。代码如下：

connectNodes(node1, node2) {
  var mindData = this.mind.data
  var nodeData1 = mindData.getNodeData(node1.id)
  var nodeData2 = mindData.getNodeData(node2.id)
  if (!nodeData1 || !nodeData2) {
    return
  }
  var edgeId = '__connect_edge_' + node1.id + '_' + node2.id
  if (mindData.getLinkData(edgeId)) {
    return
  }
  var linkData = {
    id: edgeId,
    src: node1.id,
    target: node2.id
  }
  mindData.addLinkData(linkData)
  this.mind.show(mindData)
}

Salin selepas log masuk

在以上代码中，我们首先获取思维导图的数据对象mindData，通过它的getNodeData方法获取待连线的两个节点的数据；然后，通过一个唯一的ID创建一个连线的数据对象linkData，并通过addLinkData方法将连线数据添加到mindData中；最后，通过showrrreee

Melalui kod di atas, kami mencipta komponen MindMap, memperkenalkan perpustakaan jsmind ke dalamnya dan memulakan contoh peta minda. Kini kita boleh menggunakan komponen ini dalam projek Vue dan melihat kesan paparan peta minda asas.

Laksanakan titik anchor nod dan kawalan sambungan

Untuk merealisasikan fungsi titik anchor nod dan kawalan sambungan, kita perlu menambah butang pada setiap nod untuk mengawal paparan dan penyembunyian titik anchor, dan menambah Event listener, digunakan untuk menyelesaikan operasi sambungan.

Pertama, kita boleh mendapatkan semua nod dalam kaedah initMindMap dan menambah elemen butang pada setiap nod. Kodnya adalah seperti berikut:

rrreee

Dalam kod di atas, kami mendapat elemen yang sedang diklik melalui event.target, jika elemen itu ialah jmnode (iaitu, nod elemen peta minda), buat butang untuk nod dan tambahkan pendengar acara klik pada butang. 🎜🎜Seterusnya, kami boleh menambah operasi sambungan pada setiap nod. 🎜🎜Pertama, kita perlu menambah dua pembolehubah sementara yang bertindak balas kepada nod yang disambungkan untuk merekodkan sama ada kedua-dua nod ini telah dipilih. Kodnya adalah seperti berikut: 🎜rrreee🎜 Kemudian, kita boleh menambah kaedah startConnect, dan dalam kaedah ini pilih sama ada untuk menyambung berdasarkan nod yang diklik. Kodnya adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, apabila nod diklik, jika selectedNode1 kosong, nod akan diberikan kepada selectedNode1 jika selectedNode1 tidak kosong dan <code>selectedNode2 kosong, kemudian tetapkan nod kepada selectedNode2 dan panggil kaedah connectNodes untuk melaksanakan sambungan nod logik ; Akhir sekali, selepas sambungan selesai, tetapkan semula selectedNode1 dan selectedNode2 untuk mengosongkan. 🎜🎜Dalam kaedah connectNodes, kita boleh menggunakan kaedah API yang disediakan oleh jsmind untuk menyambungkan dua nod. Kodnya adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami mula-mula mendapatkan objek data mindData peta minda dan mendapatkan dua nod untuk disambungkan melalui getNodeData kaedah data; kemudian, buat objek data yang disambungkan <code>linkData dengan ID unik dan tambahkan data sambungan ke mindData melalui kaedah addLinkData dalam; akhirnya, kemas kini paparan contoh peta minda melalui kaedah show. 🎜🎜Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi titik penambat nod dan kawalan sambungan peta minda. Apabila menggunakan komponen peta minda ini, pengguna boleh mengklik butang pada nod untuk memilih titik permulaan dan titik akhir sambungan, dan mewujudkan perkaitan antara nod melalui operasi sambungan. 🎜🎜Ringkasan🎜🎜Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan perpustakaan Vue dan jsmind untuk melaksanakan titik penambat nod dan kawalan sambungan peta minda. Kami mula-mula mencipta komponen peta minda asas dan melaksanakan fungsi paparan peta minda melalui perpustakaan jsmind kemudian, kami menambah elemen butang pada setiap nod dan menambah pendengar acara klik untuk butang untuk kawalan Paparan dan sembunyikan titik utama; operasi sambungan nod, dan pengguna boleh memilih titik permulaan dan titik akhir sambungan dengan mengklik butang nod. 🎜🎜Saya harap artikel ini akan membantu anda dalam melaksanakan titik penambat nod dan kawalan sambungan peta minda dalam Vue dan jsmind Jika anda mempunyai kaedah pelaksanaan yang lebih baik atau lebih banyak keperluan berfungsi, sila tinggalkan mesej untuk berkomunikasi. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!