在vue2使用百度脑图的kityminder-core进行二次开发思维导图。节点收起时显示子节点的数量

需求描述

   用户收起某节点后要展示出当前节点的子节点数量，当节点展开后不显示子节点数量。

功能效果

 

分析

      1、找到跟节点收起/展开相关的菜单按钮。

 2、找到节点收起/展开的事件，添加一个childrenSize字段用于存储 收起状态下节点的子数量，当节点收起时添加一个图标显示该childrenSize的值。

节点收起时，设置childrenSize的值为当前节点的子节点数量

 

 节点展开时，设置childrenSize的值为null

 

 

3、注册显示子节点数量的图标。当childrenSize有值时则显示该图标。

  var BACK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';
        var MASK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';
        // 节点收缩时的图形 显示子节点数量
        var ChildrenSizeIcon = kity.createClass('ChildrenSizeIcon', {
            base: kity.Group,
            constructor: function () {
                this.callBase();
                this.setSize(20);
                this.create();
                // this.setId(utils.uuid('node_priority'));
            },

            setSize: function (size) {
                this.width = this.height = size;
            },

            create: function () {
                var white, back, mask, number; // 4 layer

                white = new kity.Path().setPathData(MASK_PATH).fill('white');
                back = new kity.Path().setPathData(BACK_PATH).setTranslate(0.5, 0.5);
                mask = new kity.Path().setPathData(MASK_PATH).setOpacity(0.8).setTranslate(0.5, 0.5);

                number = new kity.Text()
                    .setX(this.width / 2 - 0.5).setY(this.height / 2)
                    .setTextAnchor('middle')
                    .setVerticalAlign('middle')
                    .setFontItalic(true)
                    .setFontSize(12)
                    .fill('white');

                this.addShapes([back, mask, number]);
                this.mask = mask;
                this.back = back;
                this.number = number;
            },

            setValue: function (value) {
                var back = this.back,
                    mask = this.mask,
                    number = this.number;

                var color = ['#000000', '#000000'];

                if (color) {
                    back.fill(color[1]);
                    mask.fill(color[0]);
                }

                number.setContent(value);
            }
        });
        var childrenSizeRenderer = kity.createClass('childrenSizeRenderer', {
            base: Renderer,

            create: function (node) {
                return new ChildrenSizeIcon();
            },

            shouldRender: function (node) {
                return node.getData('childrenSize');
            },

            update: function (icon, node, box) {
                var data &#