回退功能开发中

simple-mind-map/example/exampleData.js

@@ -24,14 +24,14 @@ export default {
         "data": {
             "text": "根节点"
         },
-        "children": [
+        "childrens": [
             {
                 "data": {
                     "text": "二级节点1"
                 }
             }
         ],
-        "childrens": [
+        "children": [
             {
                 "data": {
                     "text": "二级节点1",

simple-mind-map/src/Command.js

@@ -29,6 +29,9 @@ class Command {
             this.commands[name].forEach((fn) => {
                 fn(...args)
             })
+            if (name === 'BACK' || name === 'FORWARD') {
+                return ;
+            }
             this.addHistory()
         }
     }
@@ -58,6 +61,18 @@ class Command {
         this.mindMap.emit('data_change', data)
     }
 
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 22:34:53 
+     * @Desc: 回退 
+     */
+    back(step = 1) {
+        if (this.activeHistoryIndex - step >= 0) {
+            this.activeHistoryIndex -= step
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 15:02:58 

simple-mind-map/src/Node.js

@@ -89,6 +89,18 @@ class Node {
         this.getSize()
     }
 
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-12 07:40:47 
+     * @Desc: 更新主题配置 
+     */
+    updateThemeConfig() {
+        // 主题配置
+        this.themeConfig = this.mindMap.themeConfig
+        // 样式实例
+        this.style.updateThemeConfig(this.themeConfig)
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-07-05 23:11:39 
@@ -471,6 +483,7 @@ class Node {
         let { paddingY } = this.getPaddingVale()
         // 创建组
         this.group = new G()
+        this.draw.add(this.group)
         this.update(false)
         // 节点矩形
         this.style.rect(this.group.rect(width, height))
@@ -574,7 +587,6 @@ class Node {
         this.removeAllNode()
         this.createNodeData()
         this.layout()
-        this.draw.add(this.group)
     }
 
     /** 
@@ -584,13 +596,13 @@ class Node {
      */
     update(animate = true) {
         if (!this.group) {
-            return;
+            return
         }
         // 需要移除展开收缩按钮
         if (this._expandBtn && this.nodeData.children.length <= 0) {
             this.removeExpandBtn()
         } else if (!this._expandBtn && this.nodeData.children.length > 0) {// 需要添加展开收缩按钮
-            
+
             this.renderExpandBtn()
         }
         let t = this.group.transform()
@@ -619,9 +631,21 @@ class Node {
         }
         // 子节点
         if (this.children && this.children.length && this.nodeData.data.expand !== false) {
-            this.children.forEach((child) => {
-                child.render()
-            })
+            let index = 0
+            let loop = () => {
+                if (index >= this.children.length) {
+                    return
+                }
+                this.children[index].render()
+                setTimeout(() => {
+                    index++
+                    loop()
+                }, 0)
+            }
+            loop()
+            // this.children.forEach((child) => {
+            //     child.render()
+            // })
         }
     }
 
@@ -637,9 +661,21 @@ class Node {
         this.removeLine()
         // 子节点
         if (this.children && this.children.length) {
-            this.children.forEach((child) => {
-                child.remove()
-            })
+            let index = 0
+            let loop = () => {
+                if (index >= this.children.length) {
+                    return
+                }
+                this.children[index].remove()
+                setTimeout(() => {
+                    index++
+                    loop()
+                }, 0)
+            }
+            loop()
+            // this.children.forEach((child) => {
+            //     child.remove()
+            // })
         }
     }
 

simple-mind-map/src/Render.js

@@ -74,6 +74,9 @@ class Render {
      * @Desc: 注册命令 
      */
     registerCommands() {
+        // 回退
+        this.back = this.back.bind(this)
+        this.mindMap.command.add('BACK', this.back)
         // 插入同级节点
         this.insertNode = this.insertNode.bind(this)
         this.mindMap.command.add('INSERT_NODE', this.insertNode)
@@ -154,8 +157,11 @@ class Render {
      * @Desc:  渲染
      */
     render() {
+        let s = Date.now()
         this.root = this.layout.doLayout()
+        console.log(Date.now() - s)
         this.root.render()
+        console.log(Date.now() - s)
     }
 
     /** 
@@ -214,6 +220,19 @@ class Render {
         }) : 0
     }
 
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 22:34:12 
+     * @Desc: 回退 
+     */
+    back(step) {
+        let data = this.mindMap.command.back(step)
+        if (data) {
+            this.renderTree = data
+            this.mindMap.reRender()
+        }
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 13:19:54 
@@ -295,6 +314,7 @@ class Render {
                 i--
             }
         }
+        this.mindMap.emit('node_active', null, [])
         this.mindMap.render()
     }
 
@@ -329,7 +349,9 @@ class Render {
         this.setNodeData(node, {
             isActive: active
         })
+        let s = Date.now()
         node.renderNode()
+        console.log(Date.now() - s)
     }
 
     /** 

simple-mind-map/src/Style.js

@@ -31,6 +31,15 @@ class Style {
         this.themeConfig = themeConfig
     }
 
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-12 07:40:14 
+     * @Desc: 更新主题配置 
+     */
+    updateThemeConfig(themeConfig) {
+        this.themeConfig = themeConfig
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-04-11 12:02:55 

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

@@ -16,8 +16,6 @@ class Base {
         this.renderer = renderer
         // 控制实例
         this.mindMap = renderer.mindMap
-        // 渲染树
-        this.renderTree = renderer.renderTree
         // 绘图对象
         this.draw = this.mindMap.draw
         // 根节点

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

@@ -42,7 +42,7 @@ class LogicalStructure extends Base {
      * @Desc: 遍历数据计算节点的left、width、height
      */
     computedBaseValue() {
-        walk(this.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
             let newNode = this.createNode(cur, parent, isRoot, layerIndex)
             // 根节点定位在画布中心位置
             if (isRoot) {

web/src/assets/icon-font/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">撤回</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">前进</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe60e;</span>
                 <div class="name">恢复默认</div>
@@ -222,9 +234,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1626000433132') format('woff2'),
-       url('iconfont.woff?t=1626000433132') format('woff'),
-       url('iconfont.ttf?t=1626000433132') format('truetype');
+  src: url('iconfont.woff2?t=1626013782202') format('woff2'),
+       url('iconfont.woff?t=1626013782202') format('woff'),
+       url('iconfont.ttf?t=1626013782202') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -250,6 +262,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont iconwithdraw"></span>
+            <div class="name">
+              撤回
+            </div>
+            <div class="code-name">.iconwithdraw
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconqianjin"></span>
+            <div class="name">
+              前进
+            </div>
+            <div class="code-name">.iconqianjin
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont iconhuifumoren"></span>
             <div class="name">
@@ -502,6 +532,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconwithdraw"></use>
+                </svg>
+                <div class="name">撤回</div>
+                <div class="code-name">#iconwithdraw</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconqianjin"></use>
+                </svg>
+                <div class="name">前进</div>
+                <div class="code-name">#iconqianjin</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#iconhuifumoren"></use>

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1626000433132') format('woff2'),
-       url('iconfont.woff?t=1626000433132') format('woff'),
-       url('iconfont.ttf?t=1626000433132') format('truetype');
+  src: url('iconfont.woff2?t=1626013782202') format('woff2'),
+       url('iconfont.woff?t=1626013782202') format('woff'),
+       url('iconfont.ttf?t=1626013782202') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconwithdraw:before {
+  content: "\e603";
+}
+
+.iconqianjin:before {
+  content: "\e600";
+}
+
 .iconhuifumoren:before {
   content: "\e60e";
 }

web/src/assets/icon-font/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon",
   "description": "思维导图",
   "glyphs": [
+    {
+      "icon_id": "1368553",
+      "name": "撤回",
+      "font_class": "withdraw",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "15006636",
+      "name": "前进",
+      "font_class": "qianjin",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
     {
       "icon_id": "19980541",
       "name": "恢复默认",

web/src/pages/Edit/components/Toolbar.vue

@@ -3,6 +3,26 @@
     <div class="toolbar">
       <!-- 节点操作 -->
       <div class="toolbarBlock">
+        <div
+          class="toolbarBtn"
+          :class="{
+            disabled: false,
+          }"
+          @click="$bus.$emit('execCommand', 'BACK')"
+        >
+          <span class="icon iconfont iconwithdraw"></span>
+          <span class="text">回退</span>
+        </div>
+        <div
+          class="toolbarBtn"
+          :class="{
+            disabled: false,
+          }"
+          @click="$bus.$emit('execCommand', 'FORWARD')"
+        >
+          <span class="icon iconfont iconqianjin"></span>
+          <span class="text">前进</span>
+        </div>
         <div
           class="toolbarBtn"
           :class="{