1.什么是jsmind？
jsmind 是一款基于 HTML5的思维导图工具，可以通过 js 文件的引入或 npm 的安装使用。它提供了丰富的 API 可以方便地对导图进行自定义的设置。
2.在Vue项目中集成jsmind
在 Vue 项目中集成 jsmind 主要分为以下步骤：
2.1 引入 jsmind 的样式和 js 文件
在 Vue 的入口文件 main.js 中引入 jsmind 的样式和 js 文件。在这里我们使用 npm 安装的方式。
// main.js
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind'
2.2 创建 vue 组件，初始化并渲染 mind map
首先，在 vue 组件的模板中，我们需要引入一个包含 jsmind 的容器元素。
<template>
<div class="mind-map-container">
<div id="jsmind_container" />
</div>
</template>
接下来，在 vue 组件的方法中，我们可以通过调用 jsMind 实例进行初始化和渲染 mind map。
export default {
mounted() {
// 创建 jsmind 实例
const options = {
container: 'jsmind_container',
editable: true,
theme: 'primary',
}
const jm = new jsMind(options)
// 定义初始数据
const mindData = {
"meta": {
"name": "New Mindmap",
"author": "Author",
"version": "0.2",
"expanded": true
},
"format": "node_array",
"data": [
{"id": "root", "isroot": true, "topic": "NewMindMap"}
]
}
// 加载初始数据并渲染 mind map
jm.show(mindData)
}
}
3.自定义导图的模板和预设设置
jsmind 提供了丰富的 API 可以方便地实现导图的自定义设置，例如自定义节点和关系的颜色、线条的样式、字体的大小和样式等等。
3.1 自定义节点图标和颜色
在导图中，有些节点可能是我们需要特别标注的节点，此时可以使用自定义的图标样式来作为这些节点的标志。在 jsmind 中，我们可以通过设置自定义的 iconFont 显示节点的图标，也可以通过设置节点的 foreground 和 background 属性来设置节点的颜色。以下是一个自定义节点图标和颜色的例子：
...
const nodeData = {"id": "1", "topic": "custom node", "icon": "marker", "foreground":"rgb(255,255,255)", "background":"rgb(26,188,156)"}
const childData = {"id": "2", "topic": "child node", "foreground":"rgb(200,200,200)", "background":"rgb(52,152,219)"}
const branchData = {"id": "3", "topic": "branch node", "foreground":"rgb(255,255,255)", "background":"rgb(241,196,15)"}
jm.add_node(nodeData.id, nodeData.topic, nodeData.parent, nodeData);
jm.add_node(childData.id, childData.topic, nodeData.id, childData);
jm.add_node(branchData.id, branchData.topic, nodeData.id, branchData);
...
3.2 自定义连线的样式
在默认情况下，连线的样式是一条实线。但是，我们可以通过设置修饰符来改变连线的样式，比如箭头、虚线、圆角线等等。以下是一个自定义连线样式的例子：
...
const lineData = {"id":"2", "topic":"L1", "direction":"left", "shape": "round", "line_color":"rgb(102,194,164)", "arrow":"triangle", "arrow_from":"circle", "arrow_to":"circle"}
const subLineData = {"id":"3", "topic":"L2", "direction":"left", "line_stroke":"1px dashed rgb(26 188 156)", "line_color":"rgb(26, 188, 156)", "line_alpha":"0.6"}
jm.set_link(lineData.id, lineData, lineData.parent);
jm.set_link(subLineData.id, subLineData, lineData.id);
...
3.3 自定义字体的样式
在默认情况下，导图的字体样式是拥有类似于默认字体的样式，我们可以通过样式重新定义字体样式，例如颜色、大小、粗体等等。以下是一个自定义字体样式的例子：
...
const textNodeData = {"id": "4", "topic": "modify font style", "fontsize": 16, "fontstyle":"italic", "foreground":"rgb(255,255,255)", "background":"rgb(52,152,219)"}
jm.add_node(textNodeData.id, textNodeData.topic, nodeData.id, textNodeData);
...
3.4 总结
在本文中，我们介绍了 jsmind 的基本使用以及对导图的自定义设置。上述代码可以自由组合，以满足我们在实际项目中的不同需求。
参考资料：