From 4a2816fc75f29b053f590c6ec8685baabfb00ad1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Fri, 15 Dec 2023 11:46:41 +0800 Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=BD=93?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=95=B0=E9=87=8F=E8=B6=85=E5=87=BA=E4=BA=86?= =?UTF-8?q?=E7=BC=93=E5=AD=98=E6=B1=A0=E7=9A=84=E6=9C=80=E5=A4=A7=E6=95=B0?= =?UTF-8?q?=E9=87=8F=E6=97=B6=EF=BC=8C=E5=89=8D=E8=BF=9B=E5=9B=9E=E9=80=80?= =?UTF-8?q?=E4=BC=9A=E5=AF=BC=E8=87=B4=E8=8A=82=E7=82=B9=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/layouts/Base.js | 35 +++++++++++++++----------- simple-mind-map/src/utils/Lru.js | 20 ++++++++++----- web/src/pages/Edit/components/Edit.vue | 8 +++++- 3 files changed, 42 insertions(+), 21 deletions(-) diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index a7398e55..1eb96fbf 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -41,7 +41,7 @@ class Base { cacheNode(uid, node) { // 记录本次渲染时的节点 this.renderer.nodeCache[uid] = node - // 记录所有渲染时的节点 + // 缓存所有渲染过的节点 this.lru.add(uid, node) } @@ -70,11 +70,12 @@ class Base { // 创建节点实例 createNode(data, parent, isRoot, layerIndex) { // 创建节点 + const uid = data.data.uid let newNode = null // 数据上保存了节点引用，那么直接复用节点 if (data && data._node && !this.renderer.reRender) { newNode = data._node - let isLayerTypeChange = this.checkIsLayerTypeChange( + const isLayerTypeChange = this.checkIsLayerTypeChange( newNode.layerIndex, layerIndex ) @@ -87,43 +88,49 @@ class Base { newNode.getSize() newNode.needLayout = true } - } else if (this.lru.has(data.data.uid) && !this.renderer.reRender) { - // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用 - newNode = this.lru.get(data.data.uid) + } else if ( + (this.lru.has(uid) || this.renderer.lastNodeCache[uid]) && + !this.renderer.reRender + ) { + // 节点数据上没有节点实例 + // 但是通过uid在节点缓存池中找到了缓存的节点 + // 或者在上一次渲染缓存对象中找到了节点 + // 也可以直接复用 + newNode = this.lru.get(uid) || this.renderer.lastNodeCache[uid] // 保存该节点上一次的数据 - let lastData = JSON.stringify(newNode.getData()) - let isLayerTypeChange = this.checkIsLayerTypeChange( + const lastData = JSON.stringify(newNode.getData()) + const isLayerTypeChange = this.checkIsLayerTypeChange( newNode.layerIndex, layerIndex ) newNode.reset() newNode.nodeData = newNode.handleData(data || {}) newNode.layerIndex = layerIndex - this.cacheNode(data.data.uid, newNode) + this.cacheNode(uid, newNode) this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode) data._node = newNode // 主题或主题配置改变了需要重新计算节点大小和布局 - let isResizeSource = this.checkIsNeedResizeSources() + const isResizeSource = this.checkIsNeedResizeSources() // 节点数据改变了需要重新计算节点大小和布局 - let isNodeDataChange = lastData !== JSON.stringify(data.data) + const isNodeDataChange = lastData !== JSON.stringify(data.data) if (isResizeSource || isNodeDataChange || isLayerTypeChange) { newNode.getSize() newNode.needLayout = true } } else { // 创建新节点 - let uid = data.data.uid || createUid() + const newUid = uid || createUid() newNode = new Node({ data, - uid, + uid: newUid, renderer: this.renderer, mindMap: this.mindMap, draw: this.draw, layerIndex }) // uid保存到数据上，为了节点复用 - data.data.uid = uid - this.cacheNode(uid, newNode) + data.data.uid = newUid + this.cacheNode(newUid, newNode) // 数据关联实际节点 data._node = newNode if (data.data.isActive) { diff --git a/simple-mind-map/src/utils/Lru.js b/simple-mind-map/src/utils/Lru.js index b1d89dd5..a8fcd1e1 100644 --- a/simple-mind-map/src/utils/Lru.js +++ b/simple-mind-map/src/utils/Lru.js @@ -7,16 +7,24 @@ export default class Lru { } add(key, value) { + const isExist = this.has(key) + // 如果该key之前不存在，并且现在数量已经超出最大值，则不再继续添加 + if (!isExist && this.size >= this.max) { + return false + } + // 已经存在则可以更新，因为不影响数量 // 如果该key是否已经存在，则先删除 this.delete(key) + // 添加 this.pool.set(key, value) this.size++ - // 如果数量超出最大值，则删除最早的 - if (this.size > this.max) { - let keys = this.pool.keys() - let last = keys.next() - this.delete(last.value) - } + // 删除最早的没啥意义，详见：https://github.com/wanglin2/mind-map/issues/467 + // if (this.size > this.max) { + // let keys = this.pool.keys() + // let last = keys.next() + // this.delete(last.value) + // } + return true } delete(key) { diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index f5018434..96615ba5 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -329,7 +329,7 @@ export default { default: break } - }, + } // isUseCustomNodeContent: true, // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // customCreateNodeContent: (node) => { @@ -428,6 +428,12 @@ export default { // console.log(this.mindMap.renderer.root.getRect()) // console.log(this.mindMap.renderer.root.getRectInSvg()) // }, 5000); + // setTimeout(() => { + // this.mindMap.renderer.renderTree.data.fillColor = 'red' + // this.mindMap.render() + // this.mindMap.reRender() + // this.mindMap.render() + // }, 5000) }, // url中是否存在要打开的文件