(四) kityminder带有图片的子节点带上边框

在给部门同事演示用例平台时，同事反馈，在子节点中存在带有图片时，不带有边框时显示的非常怪异像是页面错乱的样子。如下图：

就如上图所示，还是需要有个边框包起来才是合适的

解决方案

发现关于一些边框的样式以及颜色等等的配置其实都是在theme的目录下配置的，比如说default主题的配置逻辑如下：

theme.register(name, {
'background': '#3A4144 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=") repeat',

'root-color': '#430',
'root-background': '#e9df98',
'root-stroke': '#e9df98',
'root-font-size': 24,
'root-padding': compact ? [10, 25] : [15, 25],
'root-margin': compact ? [15, 25] : [30, 100],
'root-radius': 30,
'root-space': 10,
'root-shadow': 'rgba(0, 0, 0, .25)',

'main-color': '#333',
'main-background': '#a4c5c0',
'main-stroke': '#a4c5c0',
'main-font-size': 16,
'main-padding': compact ? [5, 15] : [6, 20],
'main-margin': compact ? [5, 10] : 20,
'main-radius': 10,
'main-space': 5,
'main-shadow': 'rgba(0, 0, 0, .25)',

'sub-color': 'white',
'sub-background': 'transparent',
'sub-stroke': 'none',
'sub-font-size': 12,
'sub-padding': [5, 10],
'sub-margin': compact ? [5, 10] : [15, 20],
'sub-tree-margin': 30,
'sub-radius': 5,
'sub-space': 5,

如根节点的颜色，背景颜色，边框颜色，字体大小等等。 我们可以发现，sub-stoke其实是none的值，这里其实就是我们三级主题以及子主题没有边框的原因了。所以这里是可以考虑对应的主题去配置子节点的边框的, 但是我们需要考虑一个问题，就是这个配置其实是通用的，一旦配置就会导致这样子的问题。我们看下效果：

就是所有的三级主题以及子主题都会带上边框，其实这个效果是不太好的，我们只是希望带有图片的节点才会带有边框才是合适的。

所以我们还是需要去了解代码具体是在什么地方配置了这个信息的。翻开了下代码我们发现其实具体的边框类的一些内容 其实是在 outline.js 中进行处理的。

update: function(outline, node, box) {

    var shape = node.getStyle('shape');

    var paddingLeft = node.getStyle('padding-left'),
        paddingRight = node.getStyle('padding-right'),
        paddingTop = node.getStyle('padding-top'),
        paddingBottom = node.getStyle('padding-bottom');

    var outlineBox = {
        x: box.x - paddingLeft,
        y: box.y - paddingTop,
        width: box.width + paddingLeft + paddingRight,
        height: box.height + paddingTop + paddingBottom
    };

    var radius = node.getStyle('radius');
    // 天盘图圆形的情况
    if (shape && shape == 'circle') {
        var p = Math.pow;
        var r = Math.round;

        radius = r(Math.sqrt(p(outlineBox.width, 2) + p(outlineBox.height, 2)) / 2);

        outlineBox.x = box.cx - radius;
        outlineBox.y = box.cy - radius;
        outlineBox.width = 2 * radius;
        outlineBox.height = 2 * radius;
    }

    var prefix = node.isSelected() ? (node.getMinder().isFocused() ? 'selected-' : 'blur-selected-') : '';
    // 这块的逻辑就是具体绘制节点边框的，根据不同node节点的数据来区分，所以一旦sub-stroke 为为none 就不会绘制了。
		outline
        .setPosition(outlineBox.x, outlineBox.y)
        .setSize(outlineBox.width, outlineBox.height)
        .setRadius(radius)
        .fill(node.getData('background') || node.getStyle(prefix + 'background') || node.getStyle('background'))
        .stroke(node.getStyle(prefix + 'stroke' || node.getStyle('stroke')),
        node.getStyle(prefix + 'stroke-width'));

	

    return new kity.Box(outlineBox);
}

所以我们需要增加一些修改配置，以及outline中逻辑的判断 如下：

1. 修改主题中的sub-stroke的配置

'sub-color': 'white',
'sub-background': 'transparent',
'sub-stroke': '#a4c5c0', // 设置成有颜色而不会是none, 后续通过代码去设置为none即可。
'sub-font-size': 12,
'sub-padding': [5, 10],
'sub-margin': compact ? [5, 10] : [15, 20],
'sub-tree-margin': 30,
'sub-radius': 5,
'sub-space': 5,

1. 修改outline中的update逻辑。

if (node.getLevel() > 1 ) {
    if (node.isSelected()  || node.getData('image')) {
        outline.setPosition(outlineBox.x, outlineBox.y).setSize(outlineBox.width, outlineBox.height).setRadius(radius).fill(node.getData("background") || node.getStyle(prefix + "background") || node.getStyle("background")).stroke(node.getStyle(prefix + "stroke" || node.getStyle("stroke")), node.getStyle(prefix + "stroke-width"));
    }else {
        // 如果节点为3级以及子节点时候并且未选中 或者不带有图片，则设置边框为none即可
        outline.setPosition(outlineBox.x, outlineBox.y).setSize(outlineBox.width, outlineBox.height).setRadius(radius).fill(node.getData("background") || node.getStyle(prefix + "background") || node.getStyle("background")).stroke("none", node.getStyle(prefix + "stroke-width"));
    }

}else {
    outline.setPosition(outlineBox.x, outlineBox.y).setSize(outlineBox.width, outlineBox.height).setRadius(radius).fill(node.getData("background") || node.getStyle(prefix + "background") || node.getStyle("background")).stroke(node.getStyle(prefix + "stroke" || node.getStyle("stroke")), node.getStyle(prefix + "stroke-width"));
}

如上即解决了kityminder 脑图，带有图片的节点也会有边框的情况了。