操作节点内容

目前支持在节点中插入图片、图标、超链接、备注、标签、概要、关联线，本节教程会介绍如何通过UI界面来完成这些内容的插入。

监听节点激活事件

首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过node_active事件来监听节点激活事件：

const activeNodes = shallowRef([])
mindMap.on('node_active', (node, activeNodeList) => {
    activeNodes.value = activeNodeList
})

你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。

const hasRoot = computed(() => {
    return activeNodes.value.findIndex(node => {
        return node.isRoot
    }) !== -1
})


const hasGeneralization = computed(() => {
    return activeNodes.value.findIndex(node => {
        return node.isGeneralization
    }) !== -1
})

有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。

插入图片

选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的setImage方法设置图片：

activeNodes.value.forEach((node) => {
    node.setImage({
        url: '图片url',
        title: '图片的标题或描述',
        width: 100,// 图片的宽高也不能少
        height: 100
    })
})

图片回显也很简单，可以使用节点的getData方法获取节点的图片：

const img = activeNode.getData('image')
const imgTitle = activeNode.getData('imageTitle')

插入图标

整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，库里自带了一些图标，另外也支持扩展图标，然后将选择的图标插入到节点中：

const iconList = ['priority_1', '...']// 选择的图标
activeNodes.value.forEach(node => {
    node.setIcon(iconList)
})

获取节点的图标数据：

const iconList = activeNode.getData('icon') || []

插入超链接

对于超链接，你需要实现两个输入框，分别输入url和名称，然后插入到节点：

activeNodes.value.forEach(node => {
    node.setHyperlink('url', '名称')
})

获取节点超链接数据：

const url = activeNode.getData('hyperlink')
const name = activeNode.getData('hyperlinkTitle')

插入备注

备注会稍微复杂一点，因为支持两种方式。

使用内置逻辑

使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：

activeNodes.value.forEach(node => {
    node.setNote('备注内容')
})

这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。

自定义显示备注

如果你想显示更丰富的备注内容，比如支持markdown，那么你可以在实例化simple-mind-map时插入customNoteContentShow选项。

设置备注内容还是使用setNote方法，只不过现在插入的是markdown字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染markdown：

const mindMap = new MindMap({
    // ...
    customNoteContentShow: {
        show: (content, left, top) => {
            // 在这里显示你的自定义弹窗
            // content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
        },
        hide: () => {
            // 在这里隐藏你的自定义弹窗
            // 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
        }
    },
})

获取节点的备注内容可以通过getData方法：

const note = activeNode.getData('note')

插入标签

标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：

activeNodes.value.forEach(node => {
    node.setTag(['标签1', '...'])
})

获取节点标签数据：

const tagArr = activeNode.getData('tag') || []

v0.10.3+版本支持设置单个标签的样式，所以标签数据的类型也由字符串数组（即['标签']），改为对象数组（即[{text: '标签', style: {}}]）。所以要插入指定样式的标签可以这样操作：

activeNodes.value.forEach(node => {
    node.setTag([
        {
            text: '标签1',
            style: {
                fill: 'red'
            }
        }
    ])
})

style具体支持的属性可以参考【构造函数】文档。

插入概要

插入概要可以不需要实现UI，直接调用插入概要的命令即可：

mindMap.execCommand('ADD_GENERALIZATION', data)

会给当前激活的节点插入一个概要节点，第二个参数data可以不传，默认为：

{
    text: '概要'
}

概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。

插入关联线

要支持关联线需要使用关联线插件

关联线也不需要UI，调用一个方法即可：

mindMap.associativeLine.createLineFromActiveNode()

然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。

完整示例