使用Vue和jsmind如何实现思维导图的节点标注和注释功能？
一、Vue介绍
Vue是一套渐进式JavaScript框架，它专注于通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue 是一款易于上手的前端框架，在实现思维导图的节点标注和注释功能时，可以很好的借助 Vue 的模板语法和组件化开发模式快速进行实现。
二、jsmind介绍
jsmind 是一个纯Javascript实现的思维导图插件，支持多种展现形式， 如HTML5 Canvas、SVG等。jsmind 具有可适应性、开源性、可扩展性等特点。
在开发中，可以直接在项目中引入 jsmin 包，然后参照文档进行实现。
三、思维导图节点标注
1.节点拓展
在 jsmind 中实现节点标注，需要先拓展节点的数据结构, 通过添加参数，实现节点和标注内容关联。假如需要为每个节点进行备注信息的标注，则需要为节点添加一个备注信息属性，可以通过在节点上添加新属性数据 obj.progress 来实现。代码如下：
var mind = {
"meta": {
"name": "example",
"author": "hizzgdev@163.com",
"version": "0.2"
},
"format": "node_tree",
"data": {
"id": "root",
"topic": "jsMind",
"obj": { "progress": 0, "note": "" }, //新增内容
"children":[
{
"id": "easy",
"topic": "Easy",
"obj": { "progress": 0, "note": "" }, //新增内容
"children": [
{"id":"easy1","topic":"Easy to use"},
{"id":"easy2","topic":"Easy to understand"},
{"id":"easy3","topic":"Easy to extend"}
]
},
{
"id": "powerful",
"topic": "Powerful",
"obj": { "progress": 0, "note": "" }, //新增内容
"children": [
{
"id": "pb",
"topic": "Parameter Binding",
"obj": { "progress": 0, "note": "" }, //新增内容
"children": [
{"id":"pb1","topic":"Data Binding"},
{"id":"pb2","topic":"Model Binding"},
{"id":"pb3","topic":"Event Binding"},
{"id":"pb4","topic":"Class and Style Binding"}
]
},
{"id":"comps","topic":"Comps"},
{"id":"plugin","topic":"Plugin"}
]
},
{"id":"ul","topic":"UltraLight"},
{"id":"screenshot","topic":"Screenshot"},
{"id":"cascade","topic":"Cascade Layout"},
{"id":"hierarchy","topic":"Hierarchy Layout"},
{"id":"fishbone","topic":"Fishbone Layout"}
]
}
};
2.使用Vue实现节点标注
在 jsmind 中节点的标注信息是通过修改节点的数据属性来实现的，在Vue中需要借助jsx语法等Vue组件相关语法来方便的进行修改。
以下代码演示如何获取当前节点 inputValue 值（输入框中的值）， 并且刷新数据同时更新节点属性 obj.note。 代码如下：
// element节点的input输入框绑定的值
const handleInputChange = (node, element) => {
let inputValue = element.currentTarget.value;
node.obj.note = inputValue
// 渲染组件重新渲染
renderMind();
};
四、节点注释功能
1.注释组件的实现
在思维导图中的节点注释信息一般会出现在 listener 上，在 jsmind 每个节点存在对应的大量 listener，其中包括 item 双击事件，我们可以在 item 双击事件中获取到当前的节点信息，然后开发一个注释组件，把当前节点注释信息渲染出来展示。
这里可以使用Vue.js 的全局组件来实现节点注释的添加，我们可以在需要注释的节点右边添加一个注释信息的组件，单击组件可弹出注释信息框，用于展示当前节点的注释信息，同时可以进行编辑。代码如下：
import { createApp, h } from 'vue'
const app = createApp({})
const EditorNodeNote = {
name: 'EditorNodeNote',
props: ['show', 'node'],
data() {
return {
inputValue: this.node.note,
};
},
watch: {
inputValue(val) {
this.node.note = val;
setMindMapDataOrigin();
},
},
methods: {
closeModal() {
this.$props.show = false;
},
prevent() {},
},
render() {
const editorNodeNote = (
<div class="editor-node-note">
<div class="editor-node-note__header">
<div class="title">节点备注</div>
<i class="fa fa-close" onClick={this.closeModal} />
</div>
<di>
class="editor-node-note__content"
on-click={this.prevent}
>
<textarea
class="editor-node-note__area width-100"
rows="10"
placeholder="添加注释"
v-model={this.inputValue}
></textarea>
</div>
</div>
);
if (this.$props.show === true)
return editorNodeNote;
else
return null;
},
};
app.component('editor-node-note', EditorNodeNote)
2.使用注释组件
在节点右边添加一个注释信息的组件，并通过 item 双击事件触发确认当前节点，并把当前节点的信息传递给注释组件，将注释信息展示在当前节点右边，代码如下：
jsMind.showNodeEditor = function (node) {
var jssd = document.createElement('div');
jssd.className = 'jsmind-node-editor';
var nodeid = node.id;
var nodeData = mind.get_node(nodeid);
var editorNodeNote = () => {
return createApp({
data() {
return {
show: false,
node: nodeData,
};
},
methods: {
showEditorNodeNote() {
this.show = true;
},
hideEditorNodeNote() {
this.show = false;
},
},
render() {
return h(
'div',
{
class: 'box__editor-note',
},
[
h(
'div',
{
class: 'editor-node-note__tip',
onClick: this.showEditorNodeNote,
},
[
h('i', { class: 'fa fa-edit' }),
h(
'span',
node.note,
),
],
),
h('editor-node-note', {
node: this.node,
show: this.show,
}),
],
);
},
});
};
ReactDOM.render(
React.createElement(editorNodeNote),
jssd
);
var de = jsMind.get_editable();
de.appendChild(jssd);
};
五、总结
Vue 和 jsmind 在实现思维导图和节点标注、注释功能上各有所长，Vue提供了更便捷的节点修改方式，而 jsmind 本身带有注释展示等功能，相互结合进行开发将能够大大的提高开发效率和开发体验。