'状态数据支持保存激活状态、视图状态（拖动位置、缩放值）'

README.md

@@ -112,29 +112,30 @@ const mindMap = new MindMap({
 
 监听事件，事件列表：
 
-| 事件名称              | 描述                                       | 回调参数                                                     |
-| --------------------- | ------------------------------------------ | ------------------------------------------------------------ |
-| data_change           | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据）                                       |
-| back_forward          | 前进或回退                                 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
-| draw_click            | *画布的单击事件*                           | e（事件对象）                                                |
-| svg_mousedown         | svg画布的鼠标按下事件                      | e（事件对象）                                                |
-| mousedown             | el元素的鼠标按下事件                       | e（事件对象）、this（Event事件类实例）                       |
-| mousemove             | el元素的鼠标移动事件                       | e（事件对象）、this（Event事件类实例）                       |
-| drag                  | 如果是按住左键拖动的话会触发拖动事件       | e（事件对象）、this（Event事件类实例）                       |
-| mouseup               | el元素的鼠标松开事件                       | e（事件对象）、this（Event事件类实例）                       |
-| mousewheel            | 鼠标滚动事件                               | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
-| contextmenu           | svg画布的鼠标右键菜单事件                  | e（事件对象）                                                |
-| node_click            | 节点的单击事件                             | this（节点实例）、e（事件对象）                              |
-| node_mousedown        | 节点的鼠标按下事件                         | this（节点实例）、e（事件对象）                              |
-| node_mouseup          | 节点的鼠标松开事件                         | this（节点实例）、e（事件对象）                              |
-| node_dblclick         | 节点的双击事件                             | this（节点实例）、e（事件对象）                              |
-| node_contextmenu      | 节点的右键菜单事件                         | e（事件对象）、this（节点实例）                              |
-| before_node_active    | 节点激活前事件                             | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
-| node_active           | 节点激活事件                               | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
-| expand_btn_click      | 节点展开或收缩事件                         | this（节点实例）                                             |
-| before_show_text_edit | 节点文本编辑框即将打开事件                 |                                                              |
-| hide_text_edit        | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
-| scale                 | 放大缩小事件                               | scale（缩放比例）                                            |
+| 事件名称                    | 描述                                       | 回调参数                                                     |
+| --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
+| data_change                 | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据）                                       |
+| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发       | data（当前视图状态数据）                                     |
+| back_forward                | 前进或回退                                 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
+| draw_click                  | *画布的单击事件*                           | e（事件对象）                                                |
+| svg_mousedown               | svg画布的鼠标按下事件                      | e（事件对象）                                                |
+| mousedown                   | el元素的鼠标按下事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousemove                   | el元素的鼠标移动事件                       | e（事件对象）、this（Event事件类实例）                       |
+| drag                        | 如果是按住左键拖动的话会触发拖动事件       | e（事件对象）、this（Event事件类实例）                       |
+| mouseup                     | el元素的鼠标松开事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousewheel                  | 鼠标滚动事件                               | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
+| contextmenu                 | svg画布的鼠标右键菜单事件                  | e（事件对象）                                                |
+| node_click                  | 节点的单击事件                             | this（节点实例）、e（事件对象）                              |
+| node_mousedown              | 节点的鼠标按下事件                         | this（节点实例）、e（事件对象）                              |
+| node_mouseup                | 节点的鼠标松开事件                         | this（节点实例）、e（事件对象）                              |
+| node_dblclick               | 节点的双击事件                             | this（节点实例）、e（事件对象）                              |
+| node_contextmenu            | 节点的右键菜单事件                         | e（事件对象）、this（节点实例）                              |
+| before_node_active          | 节点激活前事件                             | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| node_active                 | 节点激活事件                               | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| expand_btn_click            | 节点展开或收缩事件                         | this（节点实例）                                             |
+| before_show_text_edit       | 节点文本编辑框即将打开事件                 |                                                              |
+| hide_text_edit              | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
+| scale                       | 放大缩小事件                               | scale（缩放比例）                                            |
 
 
 
@@ -402,6 +403,22 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {})
 
 
 
+#### getTransformData()
+
+v0.1.1+
+
+获取当前变换数据，可用于回显
+
+
+
+#### setTransformData(data)
+
+v0.1.1+
+
+动态设置变换数据，可以通过getTransformData方法获取变换数据
+
+
+
 ## doExport实例
 
 `doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例

simple-mind-map/src/View.js

@@ -19,6 +19,7 @@ class View {
         this.sy = 0
         this.x = 0
         this.y = 0
+        this.setTransformData(this.mindMap.opt.viewData)
         this.bind()
     }
 
@@ -63,6 +64,42 @@ class View {
         })
     }
 
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 18:30:24 
+     * @Desc: 获取当前变换状态数据 
+     */
+    getTransformData() {
+        return {
+            transform: this.mindMap.draw.transform(),
+            state: {
+                scale: this.scale,
+                x: this.x,
+                y: this.y,
+                sx: this.sx,
+                sy: this.sy
+            }
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 19:54:17 
+     * @Desc: 动态设置变换状态数据 
+     */
+    setTransformData(viewData) {
+        if (viewData) {
+            Object.keys(viewData.state).forEach((prop) => {
+                this[prop] = viewData.state[prop]
+            })
+            this.mindMap.draw.transform({
+                ...viewData.transform
+            })
+        }
+    }
+
     /** 
      * javascript comment 
      * @Author: 王林25 
@@ -96,6 +133,7 @@ class View {
             origin: 'left center',
             translate: [this.x, this.y],
         })
+        this.mindMap.emit('view_data_change', this.getTransformData())
     }
 
     /** 
@@ -104,22 +142,18 @@ class View {
      * @Desc: 恢复
      */
     reset() {
-        let t = this.mindMap.draw.transform()
+        // let t = this.mindMap.draw.transform()
         this.scale = 1
         this.x = 0
         this.y = 0
-        this.mindMap.draw.transform({
-            scale: this.scale,
-            origin: 'left center',
-            translate: [this.x, this.y],
-        })
+        this.transform()
     }
 
     /** 
-         * @Author: 王林 
-         * @Date: 2021-07-04 17:10:34 
-         * @Desc: 缩小 
-         */
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:10:34 
+     * @Desc: 缩小 
+     */
     narrow() {
         if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
             this.scale -= this.mindMap.opt.scaleRatio

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

@@ -143,7 +143,7 @@ export const copyRenderTree = (tree, root) => {
  */
 export const copyNodeTree = (tree, root) => {
     tree.data = simpleDeepClone(root.nodeData.data)
-    tree.data.isActive = false
+    // tree.data.isActive = false
     tree.children = []
     if (root.children && root.children.length > 0) {
         root.children.forEach((item, index) => {

web/src/api/index.js

@@ -10,7 +10,7 @@ const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
  */
 const copyMindMapTreeData = (tree, root) => {
     tree.data = simpleDeepClone(root.data)
-    tree.data.isActive = false
+    // tree.data.isActive = false
     tree.children = []
     if (root.children && root.children.length > 0) {
         root.children.forEach((item, index) => {

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

@@ -14,17 +14,17 @@
 </template>
 
 <script>
-import MindMap from "simple-mind-map";
-import Outline from "./Outline";
-import Style from "./Style";
-import BaseStyle from "./BaseStyle";
-import Theme from "./Theme";
-import Structure from "./Structure";
-import Count from "./Count";
-import NavigatorToolbar from "./NavigatorToolbar";
-import ShortcutKey from "./ShortcutKey";
-import Contextmenu from "./Contextmenu";
-import { getData, storeData } from "@/api";
+import MindMap from 'simple-mind-map'
+import Outline from './Outline'
+import Style from './Style'
+import BaseStyle from './BaseStyle'
+import Theme from './Theme'
+import Structure from './Structure'
+import Count from './Count'
+import NavigatorToolbar from './NavigatorToolbar'
+import ShortcutKey from './ShortcutKey'
+import Contextmenu from './Contextmenu'
+import { getData, storeData, storeConfig } from '@/api'
 
 /**
  * @Author: 王林
@@ -32,7 +32,7 @@ import { getData, storeData } from "@/api";
  * @Desc: 编辑区域
  */
 export default {
-  name: "Edit",
+  name: 'Edit',
   components: {
     Outline,
     Style,
@@ -48,25 +48,73 @@ export default {
     return {
       mindMap: null,
       mindMapData: null,
-      prevImg: "",
-    };
+      prevImg: '',
+      openTest: false
+    }
   },
   mounted() {
-    this.getData();
-    this.init();
-    this.$bus.$on("execCommand", this.execCommand);
-    this.$bus.$on("export", this.export);
-    this.$bus.$on("setData", this.setData);
+    this.getData()
+    this.init()
+    this.$bus.$on('execCommand', this.execCommand)
+    this.$bus.$on('export', this.export)
+    this.$bus.$on('setData', this.setData)
+    if (this.openTest) {
+      setTimeout(() => {
+        this.test()
+      }, 5000)
+    }
   },
   methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2021-11-22 19:39:28
+     * @Desc: 数据更改测试
+     */
+    test() {
+      let nodeData = {
+        data: { text: '根节点', expand: true, isActive: false },
+        children: [],
+      }
+      setTimeout(() => {
+        nodeData.data.text = '理想青年实验室'
+        this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
+
+        setTimeout(() => {
+          nodeData.children.push({
+            data: { text: '网站', expand: true, isActive: false },
+            children: [],
+          })
+          this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
+
+          setTimeout(() => {
+            nodeData.children.push({
+              data: { text: '博客', expand: true, isActive: false },
+              children: [],
+            })
+            this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
+
+            setTimeout(() => {
+              let viewData = {"transform":{"scaleX":1,"scaleY":1,"shear":0,"rotate":0,"translateX":179,"translateY":0,"originX":0,"originY":0,"a":1,"b":0,"c":0,"d":1,"e":179,"f":0},"state":{"scale":1,"x":179,"y":0,"sx":0,"sy":0}}
+              this.mindMap.view.setTransformData(viewData)
+              
+              setTimeout(() => {
+                let viewData = {"transform":{"scaleX":1.6000000000000005,"scaleY":1.6000000000000005,"shear":0,"rotate":0,"translateX":-373.3000000000004,"translateY":-281.10000000000025,"originX":0,"originY":0,"a":1.6000000000000005,"b":0,"c":0,"d":1.6000000000000005,"e":-373.3000000000004,"f":-281.10000000000025},"state":{"scale":1.6000000000000005,"x":179,"y":0,"sx":0,"sy":0}}
+                this.mindMap.view.setTransformData(viewData)
+              }, 1000);
+            }, 1000)
+          }, 1000)
+        }, 1000)
+      }, 1000)
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:11:37
      * @Desc: 获取思维导图数据，实际应该调接口获取
      */
     getData() {
-      let storeData = getData();
-      this.mindMapData = storeData;
+      let storeData = getData()
+      this.mindMapData = storeData
     },
 
     /**
@@ -75,9 +123,18 @@ export default {
      * @Desc: 存储数据当数据有变时
      */
     bindSaveEvent() {
-      this.$bus.$on("data_change", (data) => {
-        storeData(data);
-      });
+      if (this.openTest) {
+        return
+      }
+      this.$bus.$on('data_change', (data) => {
+        storeData(data)
+      })
+      this.$bus.$on('view_data_change', (data) => {
+        console.log(JSON.stringify(data))
+        storeConfig({
+          view: data,
+        })
+      })
     },
 
     /**
@@ -86,8 +143,15 @@ export default {
      * @Desc: 手动保存
      */
     manualSave() {
-      let data = this.mindMap.command.getCopyData();
-      storeData(data);
+      if (this.openTest) {
+        return
+      }
+      let data = this.mindMap.command.getCopyData()
+      storeData(data)
+      let viewData = this.mindMap.view.getTransformData()
+      storeConfig({
+        view: viewData,
+      })
     },
 
     /**
@@ -96,40 +160,42 @@ export default {
      * @Desc: 初始化
      */
     init() {
-      let { root, layout, theme } = this.mindMapData;
+      let { root, layout, theme, view } = this.mindMapData
       this.mindMap = new MindMap({
         el: this.$refs.mindMapContainer,
         data: root,
         layout: layout,
         theme: theme.template,
         themeConfig: theme.config,
-      });
-      this.mindMap.keyCommand.addShortcut("Control+s", () => {
-        this.manualSave();
-      });
+        viewData: view,
+      })
+      this.mindMap.keyCommand.addShortcut('Control+s', () => {
+        this.manualSave()
+      })
       // 转发事件
-      [
-        "node_active",
-        "data_change",
-        "back_forward",
-        "node_contextmenu",
-        "node_click",
-        "draw_click",
-        "expand_btn_click",
-        "svg_mousedown",
-        "mouseup",
+      ;[
+        'node_active',
+        'data_change',
+        'view_data_change',
+        'back_forward',
+        'node_contextmenu',
+        'node_click',
+        'draw_click',
+        'expand_btn_click',
+        'svg_mousedown',
+        'mouseup',
       ].forEach((event) => {
         this.mindMap.on(event, (...args) => {
-          this.$bus.$emit(event, ...args);
-        });
-      });
-      this.bindSaveEvent();
+          this.$bus.$emit(event, ...args)
+        })
+      })
+      this.bindSaveEvent()
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 23:01:13 
-     * @Desc: 动态设置思维导图数据 
+    /**
+     * @Author: 王林
+     * @Date: 2021-08-03 23:01:13
+     * @Desc: 动态设置思维导图数据
      */
     setData(data) {
       this.mindMap.setData(data)
@@ -142,7 +208,7 @@ export default {
      * @Desc: 重新渲染
      */
     reRender() {
-      this.mindMap.reRender();
+      this.mindMap.reRender()
     },
 
     /**
@@ -151,7 +217,7 @@ export default {
      * @Desc: 执行命令
      */
     execCommand(...args) {
-      this.mindMap.execCommand(...args);
+      this.mindMap.execCommand(...args)
     },
 
     /**
@@ -161,13 +227,13 @@ export default {
      */
     async export(...args) {
       try {
-        this.mindMap.export(...args);
+        this.mindMap.export(...args)
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>