Feat:实例化及setData方法支持传入空的data,画布空白显示

This commit is contained in:
街角小林 2024-03-26 12:08:20 +08:00
parent 3243e366b0
commit 740c898bb1
6 changed files with 30 additions and 4 deletions

View File

@ -15,7 +15,12 @@ import {
cssContent cssContent
} from './src/constants/constant' } from './src/constants/constant'
import { SVG } from '@svgdotjs/svg.js' import { SVG } from '@svgdotjs/svg.js'
import { simpleDeepClone, getType, getObjectChangedProps } from './src/utils' import {
simpleDeepClone,
getType,
getObjectChangedProps,
isUndef
} from './src/utils'
import defaultTheme, { import defaultTheme, {
checkIsNodeSizeIndependenceConfig checkIsNodeSizeIndependenceConfig
} from './src/themes/default' } from './src/themes/default'
@ -94,7 +99,7 @@ class MindMap {
// 初始渲染 // 初始渲染
this.render(this.opt.fit ? () => this.view.fit() : () => {}) this.render(this.opt.fit ? () => this.view.fit() : () => {})
setTimeout(() => { setTimeout(() => {
this.command.addHistory() if (this.opt.data) this.command.addHistory()
}, 0) }, 0)
} }
@ -111,6 +116,7 @@ class MindMap {
// 预处理节点数据 // 预处理节点数据
handleData(data) { handleData(data) {
if (isUndef(data) || Object.keys(data).length <= 0) return null
data = simpleDeepClone(data || {}) data = simpleDeepClone(data || {})
// 根节点不能收起 // 根节点不能收起
if (data.data && !data.data.expand) { if (data.data && !data.data.expand) {

View File

@ -95,6 +95,7 @@ class Command {
this.history.length > 0 ? this.history[this.history.length - 1] : null this.history.length > 0 ? this.history[this.history.length - 1] : null
const data = this.getCopyData() const data = this.getCopyData()
// 此次数据和上次一样则不重复添加 // 此次数据和上次一样则不重复添加
if (lastData === data) return
if (lastData && JSON.stringify(lastData) === JSON.stringify(data)) { if (lastData && JSON.stringify(lastData) === JSON.stringify(data)) {
return return
} }
@ -158,6 +159,7 @@ class Command {
// 获取渲染树数据副本 // 获取渲染树数据副本
getCopyData() { getCopyData() {
if (!this.mindMap.renderer.renderTree) return null
return copyRenderTree({}, this.mindMap.renderer.renderTree, true) return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
} }

View File

@ -65,7 +65,7 @@ class Render {
this.mindMap = opt.mindMap this.mindMap = opt.mindMap
this.themeConfig = this.mindMap.themeConfig this.themeConfig = this.mindMap.themeConfig
// 渲染树,操作过程中修改的都是这里的数据 // 渲染树,操作过程中修改的都是这里的数据
this.renderTree = merge({}, this.mindMap.opt.data || {}) this.renderTree = this.mindMap.opt.data ? merge({}, this.mindMap.opt.data) : null
// 是否重新渲染 // 是否重新渲染
this.reRender = false this.reRender = false
// 是否正在渲染中 // 是否正在渲染中
@ -117,7 +117,7 @@ class Render {
// 重新设置思维导图数据 // 重新设置思维导图数据
setData(data) { setData(data) {
if (this.mindMap.richText) { if (this.mindMap.richText) {
this.renderTree = this.mindMap.richText.handleSetData(data) this.renderTree = data ? this.mindMap.richText.handleSetData(data) : null
} else { } else {
this.renderTree = data this.renderTree = data
} }
@ -436,6 +436,12 @@ class Render {
if (this.reRender) { if (this.reRender) {
this.clearActiveNodeList() this.clearActiveNodeList()
} }
// 如果没有节点数据
if (!this.renderTree) {
this.isRendering = false
this.mindMap.emit('node_tree_render_end')
return
}
// 计算布局 // 计算布局
this.layout.doLayout(root => { this.layout.doLayout(root => {
// 删除本次渲染时不再需要的节点 // 删除本次渲染时不再需要的节点
@ -480,6 +486,7 @@ class Render {
// 给当前被收起来的节点数据添加文本复位标志 // 给当前被收起来的节点数据添加文本复位标志
resetUnExpandNodeStyle() { resetUnExpandNodeStyle() {
if (!this.renderTree) return
walk(this.renderTree, null, node => { walk(this.renderTree, null, node => {
if (!node.data.expand) { if (!node.data.expand) {
walk(node, null, node2 => { walk(node, null, node2 => {
@ -969,6 +976,7 @@ class Render {
}) })
} else { } else {
// 否则遍历整棵树 // 否则遍历整棵树
if (!this.renderTree) return
walk(this.renderTree, null, node => { walk(this.renderTree, null, node => {
const _hasCustomStyles = this._handleRemoveCustomStyles(node.data) const _hasCustomStyles = this._handleRemoveCustomStyles(node.data)
if (_hasCustomStyles) hasCustomStyles = true if (_hasCustomStyles) hasCustomStyles = true
@ -1462,6 +1470,7 @@ class Render {
// 展开所有 // 展开所有
expandAllNode() { expandAllNode() {
if (!this.renderTree) return
walk( walk(
this.renderTree, this.renderTree,
null, null,
@ -1480,6 +1489,7 @@ class Render {
// 收起所有 // 收起所有
unexpandAllNode() { unexpandAllNode() {
if (!this.renderTree) return
walk( walk(
this.renderTree, this.renderTree,
null, null,
@ -1500,6 +1510,7 @@ class Render {
// 展开到指定层级 // 展开到指定层级
expandToLevel(level) { expandToLevel(level) {
if (!this.renderTree) return
walk( walk(
this.renderTree, this.renderTree,
null, null,
@ -1771,6 +1782,10 @@ class Render {
// 展开到指定uid的节点 // 展开到指定uid的节点
expandToNodeUid(uid, callback = () => {}) { expandToNodeUid(uid, callback = () => {}) {
if (!this.renderTree) {
callback()
return
}
let parentsList = [] let parentsList = []
const cache = {} const cache = {}
bfsWalk(this.renderTree, (node, parent) => { bfsWalk(this.renderTree, (node, parent) => {

View File

@ -33,6 +33,7 @@ class RainbowLines {
// 删除所有节点的连线颜色 // 删除所有节点的连线颜色
removeNodeLineColor() { removeNodeLineColor() {
const tree = this.mindMap.renderer.renderTree const tree = this.mindMap.renderer.renderTree
if (!tree) return
walk( walk(
tree, tree,
null, null,

View File

@ -641,6 +641,7 @@ class RichText {
// 将所有节点转换成非富文本节点 // 将所有节点转换成非富文本节点
transformAllNodesToNormalNode() { transformAllNodesToNormalNode() {
if (!this.mindMap.renderer.renderTree) return
walk( walk(
this.mindMap.renderer.renderTree, this.mindMap.renderer.renderTree,
null, null,

View File

@ -89,6 +89,7 @@ class Search {
const tree = isOnlySearchCurrentRenderNodes const tree = isOnlySearchCurrentRenderNodes
? this.mindMap.renderer.root ? this.mindMap.renderer.root
: this.mindMap.renderer.renderTree : this.mindMap.renderer.renderTree
if (tree) return
bfsWalk(tree, node => { bfsWalk(tree, node => {
let { richText, text } = isOnlySearchCurrentRenderNodes let { richText, text } = isOnlySearchCurrentRenderNodes
? node.getData() ? node.getData()