'Fix：修复导入出错的问题'

simple-mind-map/index.js

@@ -118,7 +118,9 @@ const defaultOpt = {
     //     }
     //   ]
     // }
-  ]
+  ],
+  // 节点最大缓存数量
+  maxNodeCacheCount: 1000
 }
 
 //  思维导图

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.5.9",
+  "version": "0.5.10-fix.1",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/Render.js

@@ -266,7 +266,6 @@ class Render {
     // 重新渲染需要清除激活状态
     if (this.reRender) {
       this.clearActive()
-      this.layout.clearNodePool()
     }
     // 计算布局
     this.layout.doLayout(root => {

simple-mind-map/src/layouts/Base.js

@@ -1,5 +1,6 @@
 import Node from '../Node'
 import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'
+import Lru from '../utils/Lru'
 
 //  布局基类
 class Base {
@@ -13,8 +14,7 @@ class Base {
     this.draw = this.mindMap.draw
     // 根节点
     this.root = null
-    // 保存所有uid和节点，用于复用
-    this.nodePool = {}
+    this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
   }
 
   //  计算节点位置
@@ -40,16 +40,7 @@ class Base {
     // 记录本次渲染时的节点
     this.renderer.nodeCache[uid] = node
     // 记录所有渲染时的节点
-    this.nodePool[uid] = node
-    // 如果总缓存数量达到1000，直接清空
-    if (Object.keys(this.nodePool).length > 1000) {
-      this.clearNodePool()
-    }
-  }
-
-  // 清空节点存储池
-  clearNodePool() {
-    this.nodePool = {}
+    this.lru.add(uid, node)
   }
 
   // 检查当前来源是否需要重新计算节点大小
@@ -72,9 +63,9 @@ class Base {
         newNode.getSize()
         newNode.needLayout = true
       }
-    } else if (this.nodePool[data.data.uid] && !this.renderer.reRender) {
+    } else if (this.lru.has(data.data.uid) && !this.renderer.reRender) {
       // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
-      newNode = this.nodePool[data.data.uid]
+      newNode = this.lru.get(data.data.uid)
       // 保存该节点上一次的数据
       let lastData = JSON.stringify(newNode.nodeData.data)
       newNode.reset()

simple-mind-map/src/utils/Lru.js

@@ -0,0 +1,39 @@
+// LRU缓存类
+export default class CRU {
+    constructor(max) {
+        this.max = max || 1000
+        this.size = 0
+        this.pool = new Map()
+    }
+
+    add(key, value) {
+        // 如果该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)
+        }
+        
+    }
+
+    delete(key) {
+        if (this.pool.has(key)) {
+            this.pool.delete(key)
+            this.size--
+        }
+    }
+
+    has(key) {
+        return this.pool.has(key)
+    }
+
+    get(key) {
+        if (this.pool.has(key)) {
+            return this.pool.get(key)
+        }
+    }
+}

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.10
+
+New: Optimize node reuse logic using LRU caching algorithm.
+
 ## 0.5.9
 
 Change: Unified export method format, using `FileReader` instead of `URL.createObjectURL` to convert `blob` data.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.5.10</h2>
+<p>New: Optimize node reuse logic using LRU caching algorithm.</p>
 <h2>0.5.9</h2>
 <p>Change: Unified export method format, using <code>FileReader</code> instead of <code>URL.createObjectURL</code> to convert <code>blob</code> data.</p>
 <h2>0.5.8</h2>

web/src/pages/Doc/en/constructor/index.md

@@ -61,6 +61,7 @@ const mindMap = new MindMap({
 | maxHistoryCount（v0.5.6+）     | Number  | 1000 |   | Maximum number of history records         |
 | alwaysShowExpandBtn（v0.5.8+）     | Boolean  | false | Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default  |          |
 | iconList（v0.5.8+）     | Array  | [] | The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object  |          |
+| maxNodeCacheCount（v0.5.10+）     |  Number | 1000 | The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool  |          |
 
 ### Watermark config
 

web/src/pages/Doc/en/constructor/index.vue

@@ -287,6 +287,13 @@
 <td>The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
 <td></td>
 </tr>
+<tr>
+<td>maxNodeCacheCount（v0.5.10+）</td>
+<td>Number</td>
+<td>1000</td>
+<td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>

web/src/pages/Doc/en/translate/index.md

@@ -1,6 +1,10 @@
 # Participate in translation
 
-Thanks for the first version English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
+> Thanks for the first version English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
+>
+> Due to limited energy, most translations currently use machine translation, so accuracy is inevitably problematic.
+>
+> At present, the 【Course】 section is not translated. If you are interested, please join us.
 
 If you want to participate in the translation of this document, you can clone this repository first.
 

web/src/pages/Doc/en/translate/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <h1>Participate in translation</h1>
+<blockquote>
 <p>Thanks for the first version English translation provided by <a href="https://github.com/emircanerkul">Emircan ERKUL</a>.</p>
+<p>Due to limited energy, most translations currently use machine translation, so accuracy is inevitably problematic.</p>
+<p>At present, the 【Course】 section is not translated. If you are interested, please join us.</p>
+</blockquote>
 <p>If you want to participate in the translation of this document, you can clone this repository first.</p>
 <p>The translated documents are in the <code>/web/src/pages/Doc/</code> directory, and currently support English(<code>en</code>) and Simplified Chinese(<code>zh</code>).</p>
 <p>If you are adding a new language type, you can create a new directory under the <code>/web/src/pages/Doc/</code> directory, Then create a folder for each chapter, You can also directly copy all chapter directories under the existing language directory for translation, Note that you only need to write the <code>index.md</code> file, The <code>index.vue</code> file under the chapter directory is automatically generated by the script according to <code>index.md</code>.</p>

web/src/pages/Doc/en/utils/index.md

@@ -167,4 +167,50 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
     // success
   }
 })
-```
+```
+
+## LRU cache class
+
+> v0.5.10+
+
+Import:
+
+```js
+import Lru from 'simple-mind-map/src/utils/Lru.js'
+```
+
+### Constructor
+
+```js
+let lru = new Lru(max)
+```
+
+`max`: Specify the maximum number of caches.
+
+### Instance properties
+
+#### size
+
+The current number of caches.
+
+#### pool
+
+Get cache pool.
+
+### Instance methods
+
+#### add(key, value)
+
+Add cache.
+
+#### delete(key)
+
+Delete cache.
+
+#### has(key)
+
+Check if a cache exists.
+
+#### get(key)
+
+Gets the value of a cache.

web/src/pages/Doc/en/utils/index.vue

@@ -112,6 +112,31 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
   }
 })
 </code></pre>
+<h2>LRU cache class</h2>
+<blockquote>
+<p>v0.5.10+</p>
+</blockquote>
+<p>Import:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> Lru <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/Lru.js&#x27;</span>
+</code></pre>
+<h3>Constructor</h3>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> lru = <span class="hljs-keyword">new</span> Lru(max)
+</code></pre>
+<p><code>max</code>: Specify the maximum number of caches.</p>
+<h3>Instance properties</h3>
+<h4>size</h4>
+<p>The current number of caches.</p>
+<h4>pool</h4>
+<p>Get cache pool.</p>
+<h3>Instance methods</h3>
+<h4>add(key, value)</h4>
+<p>Add cache.</p>
+<h4>delete(key)</h4>
+<p>Delete cache.</p>
+<h4>has(key)</h4>
+<p>Check if a cache exists.</p>
+<h4>get(key)</h4>
+<p>Gets the value of a cache.</p>
 
   </div>
 </template>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.10
+
+新增：使用LRU缓存算法优化节点复用逻辑。
+
 ## 0.5.9
 
 修改：统一导出方法的格式，使用`FileReader`代替`URL.createObjectURL`转换`blob`数据。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.5.10</h2>
+<p>新增：使用LRU缓存算法优化节点复用逻辑。</p>
 <h2>0.5.9</h2>
 <p>修改：统一导出方法的格式，使用<code>FileReader</code>代替<code>URL.createObjectURL</code>转换<code>blob</code>数据。</p>
 <h2>0.5.8</h2>

web/src/pages/Doc/zh/constructor/index.md

@@ -61,6 +61,7 @@ const mindMap = new MindMap({
 | maxHistoryCount（v0.5.6+）     | Number  | 1000 | 最大历史记录数  |          |
 | alwaysShowExpandBtn（v0.5.8+）     | Boolean  | false | 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示  |          |
 | iconList（v0.5.8+）     | Array  | [] | 扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格  |          |
+| maxNodeCacheCount（v0.5.10+）     |  Number | 1000 | 节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量  |          |
 
 ### 水印配置
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -287,6 +287,13 @@
 <td>扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格</td>
 <td></td>
 </tr>
+<tr>
+<td>maxNodeCacheCount（v0.5.10+）</td>
+<td>Number</td>
+<td>1000</td>
+<td>节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>

web/src/pages/Doc/zh/translate/index.md

@@ -1,6 +1,10 @@
 # 参与翻译
 
-感谢[Emircan ERKUL](https://github.com/emircanerkul)提供的第一版英文翻译。
+> 感谢[Emircan ERKUL](https://github.com/emircanerkul)提供的第一版英文翻译。
+>
+>因为精力有限，目前大部分翻译都是使用机翻的，所以准确度难免有问题。
+>
+>目前【教程】部分是没有进行翻译的，如果你有兴趣，欢迎加入我们。
 
 如果你也想参与翻译本文档的话，可以先克隆本仓库。
 

web/src/pages/Doc/zh/translate/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <h1>参与翻译</h1>
+<blockquote>
 <p>感谢<a href="https://github.com/emircanerkul">Emircan ERKUL</a>提供的第一版英文翻译。</p>
+<p>因为精力有限，目前大部分翻译都是使用机翻的，所以准确度难免有问题。</p>
+<p>目前【教程】部分是没有进行翻译的，如果你有兴趣，欢迎加入我们。</p>
+</blockquote>
 <p>如果你也想参与翻译本文档的话，可以先克隆本仓库。</p>
 <p>翻译的文档在<code>/web/src/pages/Doc/</code>目录下，目前支持英文(<code>en</code>)、简体中文(<code>zh</code>)两种语言。</p>
 <p>如果是新增一种语言类型，那么可以在<code>/web/src/pages/Doc/</code>目录下创建一个新目录，然后给每个章节创建一个文件夹，你也可以直接复制已存在的语言目录下的所有章节目录进行翻译，注意，你只需要编写<code>index.md</code>文件，章节目录下的<code>index.vue</code>文件是脚本根据<code>index.md</code>自动生成的。</p>

web/src/pages/Doc/zh/utils/index.md

@@ -163,3 +163,49 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
   }
 })
 ```
+
+## LRU缓存类
+
+> v0.5.10+
+
+引入：
+
+```js
+import Lru from 'simple-mind-map/src/utils/Lru.js'
+```
+
+### 构造函数
+
+```js
+let lru = new Lru(max)
+```
+
+`max`：指定最大缓存数量。
+
+### 实例属性
+
+#### size
+
+当前缓存的数量。
+
+#### pool
+
+获取缓存池。
+
+### 实例方法
+
+#### add(key, value)
+
+添加缓存。
+
+#### delete(key)
+
+删除指定缓存。
+
+#### has(key)
+
+检查某个缓存是否存在。
+
+#### get(key)
+
+获取某个缓存的值。

web/src/pages/Doc/zh/utils/index.vue

@@ -107,6 +107,31 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
   }
 })
 </code></pre>
+<h2>LRU缓存类</h2>
+<blockquote>
+<p>v0.5.10+</p>
+</blockquote>
+<p>引入：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> Lru <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/Lru.js&#x27;</span>
+</code></pre>
+<h3>构造函数</h3>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> lru = <span class="hljs-keyword">new</span> Lru(max)
+</code></pre>
+<p><code>max</code>：指定最大缓存数量。</p>
+<h3>实例属性</h3>
+<h4>size</h4>
+<p>当前缓存的数量。</p>
+<h4>pool</h4>
+<p>获取缓存池。</p>
+<h3>实例方法</h3>
+<h4>add(key, value)</h4>
+<p>添加缓存。</p>
+<h4>delete(key)</h4>
+<p>删除指定缓存。</p>
+<h4>has(key)</h4>
+<p>检查某个缓存是否存在。</p>
+<h4>get(key)</h4>
+<p>获取某个缓存的值。</p>
 
   </div>
 </template>

web/src/router.js

@@ -4,6 +4,25 @@ import EditPage from '@/pages/Edit/Index'
 import DocPage from '@/pages/Doc/Index'
 import routerList from '@/pages/Doc/routerList'
 
+// 处理没有翻译的章节路由
+const handleRouterList = () => {
+  let zhList = routerList[0].children
+  for(let i = 1; i < routerList.length; i++) {
+    let list = routerList[i].children
+    zhList.forEach(item => {
+      if (!list.find((item2) => {
+        return item2.path === item.path
+      })) {
+        list.push({
+          ...item,
+          lang: 'zh'
+        })
+      }
+    })
+  }
+}
+handleRouterList()
+
 Vue.use(VueRouter)
 
 const routes = [
@@ -25,7 +44,7 @@ const routes = [
       children: item.children.map((child) => {
         return {
           path: `${child.path}/:h?`,
-          component: () => import(`./pages/Doc/${item.lang}/${child.path}/index.vue`)
+          component: () => import(`./pages/Doc/${child.lang || item.lang}/${child.path}/index.vue`)
         }
       })
     }