How to use Vue and jsmind to implement node links and internal jumps in mind maps?

How to use Vue and jsmind to implement node links and internal jumps in mind maps?

Mind mapping is a tool that helps us organize our thoughts and display our thinking. In modern applications, we can use Vue.js and jsmind libraries to create interactive mind maps. This article will introduce how to use Vue and jsmind to implement node links and internal jumps in mind maps.

First, we need to install the Vue and jsmind libraries. These libraries are available through npm or CDN. In the Vue project, we can add the following dependencies in the package.json file:

{
  "dependencies": {
    "vue": "^2.6.11",
    "jsmind": "^1.0.3"
  }
}

Then, we can create a Vue component to host the mind map. In the template, we can use the <div> element to wrap jsmind's DOM element. In Vue's <code>mounted() life cycle hook, we can initialize the mind map and render the nodes. The following is a simple Vue component example: In the

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

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {}
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    const jmInstance = jm.init(options)
    jmInstance.show(mind)
  }
}
</script>

code, we first import the jm object from the jsmind library and mount it in the component's mounted( )Use this object in the method to initialize the mind map. We also specified the name of the mind map container as jsMindContainer in the options object. In the Vue template, we specify a ref attribute within the <div> element to reference this container. <p>Now we can render an empty mind map. Next, we will show how to implement node links and internal jumps in mind maps. </p> <p>First, we need to add the link attribute to the data structure of the mind map. In each node object, we can add a <code>url attribute to represent the link address of the node. For example:

const mind = {
  "meta": {
    "name": "思维导图",
    "author": "你的名字"
  },
  "format": "node_array",
  "data": [
    { "id": "root", "isroot": true, "topic": "根节点" },
    { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
    { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
    { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
  ]
}

In the above code, we added a url attribute to each node object of the data array. This attribute can store the link address of the node. The link address of node 1 is http://example.com, while nodes 2 and 3 have no link addresses.

Next, we need to add links to the node template rendered by the mind map. We can use the second parameter of jsmind's show method to customize the node. We can use Vue's v-html directive to render the node's content and conditionally add the <a></a> tag based on the link attribute. The following is the modified Vue component sample code:

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

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {
      "meta": {
        "name": "思维导图",
        "author": "你的名字"
      },
      "format": "node_array",
      "data": [
        { "id": "root", "isroot": true, "topic": "根节点" },
        { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
        { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
        { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
      ]
    }
    
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    
    const jmInstance = jm.init(options)
    
    jmInstance.show(mind, node => {
      const topic = node.topic || ''
      const url = node.data.url || ''
     
      if (url) {
        return `<a href="${url}">${topic}</a>`
      } else {
        return topic
      }
    })
  }
}
</script>

In the above code, we use the link attribute of the node in the callback function in the second parameter of the jmInstance.show() method The <a></a> tag is conditionally added. If the link attribute exists, the node text is wrapped with the <a></a> tag, otherwise only the node text is rendered.

Now, when we click on a node with a link, a new tab will open and jump to the link address. For nodes without links, no operations will be triggered after clicking.

To summarize, using Vue and jsmind to implement node links and internal jumps in mind maps only requires adding the link attribute of the node, and conditionally adding <a in the node template based on link attribute.>Label. The above sample code can help us accomplish this task. Hope this article can be helpful to you! </a>