使用Vue和jsmind如何实现思维导图的批注和批量编辑功能？-猿码集

1. 前言

思维导图是一种常用的工具，它可以帮助我们更好地组织、理清思路。在实际应用中，我们常常需要对思维导图进行添加批注、批量编辑等操作。本文将介绍如何使用Vue和jsmind实现思维导图的批注和批量编辑功能。

2. Vue介绍

Vue是一种轻量级的JavaScript框架，它易于学习和使用，并且提供了许多实用的功能。Vue可以很好地处理用户界面，它的双向绑定和组件化机制大大简化了应用程序的开发过程。

3. jsmind介绍

jsmind是一款基于JavaScript的思维导图库，它可以很方便地生成和操作思维导图。jsmind提供了非常丰富的API，可以灵活地自定义导图节点的样式和行为。

4. 实现思维导图的批注功能

思维导图的批注可以帮助我们更好地理解和记忆导图中的内容。下面将介绍如何使用Vue和jsmind实现思维导图的批注功能。

4.1. 创建Vue组件

首先，我们需要创建一个Vue组件来显示思维导图及其批注。在组件中，我们需要使用jsmind库来生成思维导图，并在导图节点中添加批注。


<template>
  <div>
    <div id="jsmind_container" ref="container"></div>
  </div>
</template>
<script>
import jsMind from 'jsmind'
export default {
  mounted() {
    this.initJsMind()
  },
  methods: {
    initJsMind() {
      let mindData = {
        "meta": {
          "name": "example",
          "author": "hizzgdev@163.com",
          "version": "0.2"
        },
        "format": "node_array",
        "data": [
          {"id": "b1", "isroot": true, "topic": "example"},
          {"id": "b2", "parentid": "b1", "topic": "Node"},
          {"id": "b3", "parentid": "b1", "topic": "Node"},
          {"id": "b4", "parentid": "b2", "topic": "Node"},
          {"id": "b5", "parentid": "b2", "topic": "Node"},
          {"id": "b6", "parentid": "b3", "topic": "Node"},
          {"id": "b7", "parentid": "b3", "topic": "Node"},
          {"id": "b8", "parentid": "b4", "topic": "Node"},
          {"id": "b9", "parentid": "b4", "topic": "Node"}
        ]
      }
      let options = {
        container: this.$refs.container,
        editable: true,
        theme: 'primary',
        view: {
          engine: 'canvas'
        },
        layout: {
          hspace: 20,
          vspace: 20
        },
        default_event_handle: {
          enable_mousedown_handle: false,
          enable_click_handle: false
        },
        format_node: (nodeData, nodeEl) => {
          let nodeId = nodeData.id
          let nodeContainer = document.createElement('div')
          let nodeContentEl = document.createElement('div')
          nodeContentEl.innerText = nodeData.topic
          nodeContainer.appendChild(nodeContentEl)
          
          let annotationContainer = document.createElement('div')
          annotationContainer.classList.add('annotation-container')
          annotationContainer.dataset.nodeId = nodeId
          let annotationTitle = document.createElement('div')
          annotationTitle.classList.add('annotation-title')
          annotationTitle.innerText = 'Annotation'
          let annotationTextarea = document.createElement('textarea')
          annotationTextarea.classList.add('annotation-textarea')
          annotationTextarea.dataset.nodeId = nodeId
          let annotationSubmit = document.createElement('button')
          annotationSubmit.classList.add('annotation-submit')
          annotationSubmit.dataset.nodeId = nodeId
          annotationSubmit.innerText = 'Save'
          annotationSubmit.addEventListener('click', () => {
            let annotationText = annotationTextarea.value
            this.$emit('save-annotation', {nodeId, annotationText})
          })
          
          annotationContainer.appendChild(annotationTitle)
          annotationContainer.appendChild(annotationTextarea)
          annotationContainer.appendChild(annotationSubmit)
          nodeContainer.appendChild(annotationContainer)
          
          nodeEl.appendChild(nodeContainer)
        }
      }
      this.jsmind = new jsMind(options)
      this.jsmind.show(mindData)
    }
  }
}
</script>

以上代码中，我们创建了一个名为MindMap的Vue组件，该组件使用了jsmind生成思维导图。在导图节点中，我们添加了批注功能，每个导图节点的批注保存在data-属性节点中。我们还在批注标题下方添加了一个文本框和一个保存按钮，用于添加和保存批注。

4.2. 处理批注保存事件

当用户在导图节点的批注标题下方点击了保存按钮时，我们需要触发一个事件并将批注内容传递给父组件。为此，我们在Vue组件中创建了一个事件save-annotation，并在保存按钮的点击事件中触发该事件。我们通过data-属性节点获取当前节点的ID和批注内容，并将它们打包成一个对象并通过save-annotation事件传递给父组件。


annotationSubmit.addEventListener('click', () => {
  let annotationText = annotationTextarea.value
  this.$emit('save-annotation', {nodeId, annotationText})
})

4.3. 父组件中处理批注保存事件

在父组件中，我们接收MindMap组件的save-annotation事件，并将批注内容保存到一个对象中，以便以后进行读取和编辑。


<template>
  <div>
    <mind-map ref="mindMap" @save-annotation="saveAnnotation"></mind-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      annotations: {}
    }
  },
  methods: {
    saveAnnotation(annotation) {
      this.$set(this.annotations, annotation.nodeId, annotation.annotationText)
    }
  }
}
</script>

5. 实现思维导图的批量编辑功能

思维导图的批量编辑功能可以帮助我们更快地添加和修改导图中的节点。下面将介绍如何使用Vue和jsmind实现思维导图的批量编辑功能。

5.1. 创建批量编辑按钮

首先，我们需要在Vue组件中添加一个批量编辑按钮，用于打开批量编辑模式。在用户点击该按钮后，我们将会显示所有节点的标题和一个文本框，用于批量修改节点。


<template>
  <div>
    <div id="jsmind_container" ref="container"></div>
    <button v-if="!showBatchEdit" @click="toggleBatchEditMode">Batch Edit</button>
    <div v-if="showBatchEdit">
      <textarea v-model="batchEditText"></textarea>
      <button @click="saveBatchEdit">Save</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showBatchEdit: false,
      batchEditText: ''
    }
  },
  methods: {
    toggleBatchEditMode() {
      this.showBatchEdit = true
      this.batchEditText = this.getBatchEditText()
    },
    getBatchEditText() {
      let nodeTexts = []
      let nodes = this.jsmind.get_data('node_array')
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i]
        let nodeText = node.topic
        let annotation = node.el.querySelector('.annotation-textarea')
        if (annotation) {
          let annotationText = annotation.value.trim()
          if (annotationText.length > 0) {
            nodeText += '\n' + annotationText
          }
        }
        nodeTexts.push(nodeText)
      }
      return nodeTexts.join('\n')
    },
    saveBatchEdit() {
      let nodeTexts = this.batchEditText.split('\n')
      let nodes = this.jsmind.get_data('node_array')
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i]
        let nodeText = nodeTexts[i].trim()
        let title = node.el.querySelector('.node-inner')
        if (title) {
          title.innerHTML = nodeText
          node.topic = nodeText
        }
      }
      this.showBatchEdit = false
    }
  }
}
</script>

以上代码中，我们添加了一个名为showBatchEdit的数据属性，用于切换批量编辑模式的显示状态。在用户点击批量编辑按钮时，我们将其设置为true，并显示所有节点的标题和一个文本框，用于批量修改节点。我们还定义了两个方法getBatchEditText和saveBatchEdit，用于获取和保存批量修改的文本内容。

5.2. 将节点标题和批注合并为一个文本框

在批量编辑模式下，我们需要将每个节点的标题和批注合并为一个文本框，以便用户方便地进行批量修改。为此，我们可以按以下方式修改format_node函数：


format_node: (nodeData, nodeEl) => {
  // 省略部分代码
  
  let annotationText = ''
  let annotation = nodeEl.querySelector('.annotation-textarea')
  if (annotation) {
    annotationText = annotation.value.trim()
  }
  
  let nodeText = nodeData.topic
  if (annotationText.length > 0) {
    nodeText += '\n' + annotationText
  }
  
  let title = document.createElement('div')
  title.classList.add('node-inner')
  title.contentEditable = true
  title.innerHTML = nodeText
  title.addEventListener('blur', () => {
    nodeData.topic = title.innerText
  })
  
  nodeEl.appendChild(title)
}

以上代码中，我们定义了一个名为title的节点，用于显示节点标题和批注。我们首先从data-属性节点中获取当前节点的批注内容，如果有批注内容，则将其添加到节点标题下方。我们还重新定义了节点的编辑行为，当用户编辑节点标题时，我们需要同步更新该节点的topic属性。

6. 总结

Vue和jsmind是两款非常实用的工具，它们提供了灵活的功能和丰富的API，可以帮助我们实现各种复杂的任务。在本文中，我们介绍了如何使用Vue和jsmind实现思维导图的批注和批量编辑功能。我们首先创建了一个名为MindMap的Vue组件，用于显示思维导图和批注。接着，我们在组件中添加了一个批注保存事件，并在父组件中处理该事件，以便以后进行读取和编辑。最后，我们添加了一个批量编辑按钮，并合并了所有节点的标题和批注为一个文本框，方便用户进行批量修改。

使用Vue和jsmind如何实现思维导图的批注和批量编辑功能？