How to use Vue and jsmind to implement node anchor and connection control of mind maps?

Use Vue and jsmind to realize the node anchor point and connection control of the mind map

Introduction

Mind map is a commonly used thinking and tools for organizing information that help us clearly present and analyze problems and plan solutions. Implementing mind mapping functions in web applications can help users better organize and manage their ideas. In this article, we will introduce how to use Vue and jsmind library to realize node anchor point and connection control of mind map.

Use Vue to create a basic mind map component

In order to easily use the mind map function, we can create a basic mind map component. First, we need to install the jsmind library in the Vue project. It can be installed through the following command:

npm install jsmind --save

Then, introduce the jsmind library and style into the Vue component, and create a <div> element for rendering the mind map. The code is as follows: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div ref=&quot;mindContainer&quot;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; 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) } } } &lt;/script&gt; &lt;style scoped&gt; .mind-container { width: 100%; height: 100%; } &lt;/style&gt;</pre><p>Through the above code, we created a <code>MindMap component, introduced the jsmind library into it, and initialized a mind map instance. Now we can use this component in the Vue project and see the basic mind map display effect.

Implement node anchor point and connection control

In order to realize the function of node anchor point and connection control, we need to add a button to each node to control the display of the anchor point and hide, and add an event listener to the node to complete the connection operation.

First, we can get all the nodes in the initMindMap method and add button elements to each node. The code is as follows:

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)
    }
  })
}

In the above code, we get the currently clicked element through event.target, if the element is jmnode (that is, the node of the mind map element), create a button for the node and add a click event listener to the button.

Next, we can add connection operations for each node.

First, we need to add two temporary variables that respond to the connected nodes to record whether these two nodes have been selected. The code is as follows:

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

Then, we can add a startConnect method, and in this method choose whether to connect based on the clicked node. The code is as follows:

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) {
    // 在这里实现连线的逻辑
  }
}

In the above code, when a node is clicked, if selectedNode1 is empty, the node will be assigned to selectedNode1; if selectedNode1 is not empty and selectedNode2 is empty, then assign the node to selectedNode2, and call the connectNodes method to perform node connection logic; finally , after the connection is completed, reassign selectedNode1 and selectedNode2 to empty.

In the connectNodes method, we can use the API method provided by jsmind to connect two nodes. The code is as follows:

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)
}

In the above code, we first obtain the data object of the mind map mindData, and obtain the two to be connected through its getNodeData method The data of the node; then, create a connection data object linkData with a unique ID, and add the connection data to mindData through the addLinkData method ;Finally, update the display of the mind map instance through the show method.

So far, we have completed the function implementation of the node anchor point and connection control of the mind map. When using this mind map component, users can click the buttons on the nodes to select the starting point and end point of the connection, and establish the association between nodes through connection operations.

Summary

Through the introduction of this article, we have learned how to use Vue and jsmind library to realize node anchor point and connection control of mind map. We first created a basic mind map component and implemented the mind map display function through the jsmind library; then, we added button elements to each node and added click event listeners for the buttons for control Display and hide anchor points; finally, we implemented the operation of node connections, and users can select the starting point and end point of the connection by clicking the node button.

I hope this article will be helpful to you in implementing node anchor points and connection control of mind maps in Vue and jsmind. If you have a better implementation method or more functional requirements, please leave a message to communicate.