如何动态修改自定义元素的大小

自定义节点大小不会随着自定义元素大小改变而自动改变，如果有动态修改自定义节点内容大小的需求，比如展开收起一部分内容，目前可以尝试如下做法：

1.控制节点大小的字段必须是节点数据中的一个字段，否则重新渲染时节点重新创建大小又会恢复最初的大小：

new MindMap({
    isUseCustomNodeContent: true,
    customCreateNodeContent: node => {
        let el = document.createElement('div')
        const _expand = node.nodeData.data._expand
        el.style.background = '#000'
        el.style.width = '100px'
        el.style.height = _expand ? '100px' : '50px'
        return el
    }
})

可以给节点数据添加一个自定义字段，比如_expand，然后通过这个字段来控制自定义元素的大小。

2.点击自定义节点内容切换大小时需要修改节点数据，然后调用渲染方法：

new MindMap({
    isUseCustomNodeContent: true,
    customCreateNodeContent: node => {
        const el = document.createElement('div')
        const _expand = node.nodeData.data._expand
        el.style.background = '#000'
        el.style.width = '100px'
        el.style.height = _expand ? '100px' : '50px'
        el.addEventListener('click', () => {
            node.setData({
                resetRichText: true,
                _expand: !_expand
            })
            this.mindMap.render()
        })
        return el
    }
})

注意其中的resetRichText字段必须设置为true，否则不会触发渲染。

完整示例