Fix：修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题

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) {

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) {

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中是否存在要打开的文件