(三)kityMinder如何实现节点间的跳转

本文章系列将会记录在做kityminder二次开发过程中，遇到的问题以及解决方法

有同事反馈需要脑图能够支持类似于xmind中的节点中的跳转的功能，但是实际上节点目前支持的链接方式只是支持跳转到外部的链接上去而已，并不能够支持节点间跳转的功能。

思考

其实想要实现这个功能，并不是很复杂，因为我们想要一个逻辑，只要在待跳转的节点中，定义好需要跳转到节点的id的数据，然后我们需要有个图标响应点击操作，其实整个流程就非常的顺理成章了。

定义一个图标

关于图标的定义可能需要参考下关于测试结果中图标的定义，我们可以看下这块是如何去声明一个图表出来的。

pass = new kity.Path().setTranslate( - 10, -10).setPathData("M15.812,7.896l-6.75,6.75l-4.5-4.5L6.25,8.459l2.812,2.803l5.062-5.053L15.812,7.896z").fill("#EEE")

如上就是一个通过图标的定义, 其实就是一个svg的定义即可，所以我们就可以照猫画虎的处理，定义好NodeLinkIcon

var NodeLInkIcon = kity.createClass('NodeLinkIcon', {
    base: kity.Group,
    constructor: function (value) {
        this.callBase()
        this.setSize(20)
        this.create()
        this.setValue(value)
        this.setId(utils.uuid('node_link'))
        this.translate(0.5, 0.5)
    },
    setSize: function (size) {
        this.width = this.height = size
    },
    create: function () {
        var default_circle = new kity.Circle(9).fill("#FFED83").setOpacity(.1)
        nodeLink = new kity.Path().setTranslate(- 10, -10).setScale(.02).setPathData("M307.2 307.2a204.8 204.8 0 0 0 0 409.6h102.4a34.133333 34.133333 0 1 1 0 68.266667H307.2A273.066667 273.066667 0 1 1 307.2 238.933333h102.4a34.133333 34.133333 0 1 1 0 68.266667H307.2z m273.066667-34.133333a34.133333 34.133333 0 0 1 34.133333-34.133334h102.4a273.066667 273.066667 0 1 1 0 546.133334h-102.4a34.133333 34.133333 0 1 1 0-68.266667h102.4a204.8 204.8 0 0 0 0-409.6h-102.4a34.133333 34.133333 0 0 1-34.133333-34.133333z m-307.2 238.933333a34.133333 34.133333 0 0 1 34.133333-34.133333h409.6a34.133333 34.133333 0 1 1 0 68.266666H307.2a34.133333 34.133333 0 0 1-34.133333-34.133333z").fill("#666")
        this.addShapes([default_circle, nodeLink])
        this.nodeLink = nodeLink
    },
    setValue: function (value) {
        this.nodeLink.setVisible(null !== value && value !== '');
    }
})

处理点击响应事件并做跳转

这里我们只要在节点的render逻辑中实例化出icon。并且实现click的方法。如下做的内容即获取到nodeLink中的值，即要跳转的节点的id值，进行选中以及居中的操作。

var nodeIcon = new NodeLInkIcon();
nodeIcon.setStyle('cursor', 'pointer');
nodeIcon.on("click", function () {
    minder.selectById(node.getData().nodeLink, true);
    var nodes = window.minder.getNodesById(node.getData().nodeLink);
    if (nodes !== null && nodes.length !== 0) {
        window.minder.execCommand('Camera', nodes[0], 0);
        if (!nodes[0].isExpanded()) window.minder.execCommand('Expand', true);
    }
});
return nodeIcon;

PS：至于节点的nodeLink值如何被赋值，这个就比较简单些了，这里就不在说明了。