在vue2使用百度脑图的kityminder-core进行二次开发思维导图，给节点绑定数据后添加新的图标

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/129059492

需求说明：在给某个节点绑定文件数据后，用户并不能一眼看出哪个节点上绑定了数据，因此需要在绑定文件数据后给节点上加一个图标用于标识。

添加图标

1、在kityminder-core/src/module/file.js文件中添加代码

（file.js文件如何添加的看下面这个如何新增命令的文章）

在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令_～Serendipity～的博客-CSDN博客_vue中使用百度脑图

添加以下红框中的代码，关于FILE_PATH是文件图标的svg路径，可以到网站上自己设计然后复制路径替换就行。

一个画SVG图标的网站 SvgPathEditor

部分需要添加的代码

var FILE_PATH = 'M -3 3 L -3 1 L 3 1 L 5 4 L 10 4 L 10 13 L -3 13 L -3 3 M 8 9 L 4 9'


var FileIcon = kity.createClass('FileIcon', {
    base: kity.Group,
    constructor: function () {
        this.callBase();
        this.width = 16;
        this.height = 17;
        this.rect = new kity.Rect(16, 17, 0.5, -8.5, 2).fill('transparent');
        this.path = new kity.Path().setPathData(FILE_PATH).setTranslate(2.5, -6.5);
        this.addShapes([this.rect, this.path]);
    }
});
var FileIconRenderer = kity.createClass('FileIconRenderer', {
    base: Renderer,
    create: function (node) {
        var icon = new FileIcon();
        return icon;
    },
    shouldRender: function (node) {
        return node.getData('jsonFile');
    },
    update: function (icon, node, box) {
        var x = box.right + node.getStyle('space-left');
        var y = box.cy;
        icon.path.fill('none');
        icon.path.stroke('#111111');
        icon.setTranslate(x, y);
        return new kity.Box(x, Math.round(y - icon.height / 2), icon.width, icon.height);
    }
});

2、在dist/kityminder.core.js中找到查找FileCommand ，添加与file.js中一样的代码。