支持导入.xmind文件

2026-02-21 10:27:44 +08:00 · 2022-09-21 20:07:46 +08:00 · 2022-09-21 20:07:46 +08:00 · 365e51e2e9
commit 365e51e2e9
parent fd096c4444
10 changed files with 279 additions and 32 deletions
--- a/README.md
+++ b/README.md
@ -20,11 +20,13 @@

 - [x] 支持多种节点形状

+- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
+
 ## 目录介绍

 1.`simple-mind-map`

-思维导图工具库。
+思维导图工具库，框架无关，`Vue`、`React`等框架或无框架都可以使用。

 2.`web`

@ -32,7 +34,7 @@

 3.`dist`

-打包后的资源文件夹。
+打包`web`后的资源文件夹。

 4.`docs`

@ -88,7 +90,7 @@ npm run build

 # 安装

-> 当然仓库版本：0.2.6，当前npm版本：0.2.5
+> 当然仓库版本：0.2.7，当前npm版本：0.2.6

 ```bash
 npm i simple-mind-map
@ -100,7 +102,7 @@ npm i simple-mind-map
 >
 >```js
 >module.exports = {
->  transpileDependencies: ['simple-mind-map']
+>  	transpileDependencies: ['simple-mind-map']
 >}
 >```
 >
@ -123,7 +125,31 @@ const mindMap = new MindMap({
 });
 ```

+### Xmind解析方法

+v0.2.7+
+
+可以通过如下方法获取解析`Xmind`文件的方法：
+
+```js
+import MindMap from "simple-mind-map";
+
+console.log(MindMap.xmind)
+```
+
+`MindMap.xmind`对象上挂载了两个方法：
+
+#### parseXmindFile(file)
+
+解析`.xmind`文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
+
+`file`：`File`对象
+
+#### transformXmind(content)
+
+转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
+
+`content`：`.xmind`压缩包内的`content.json`文件内容

 ### 实例化选项：

@ -291,10 +317,18 @@ v0.1.7+。切换模式为只读或编辑。

 #### setData(data)

-动态设置思维导图数据
+动态设置思维导图数据，纯节点数据

 `data`：思维导图结构数据

+#### setFullData(*data*)
+
+v0.2.7+
+
+动态设置思维导图数据，包括节点数据、布局、主题、视图
+
+`data`：完整数据，结构可参考[exportFullData](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json)
+

 #### export(type, isDownload, fileName)

--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@ -0,0 +1,66 @@
+{
+    "layout": "logicalStructure",
+    "root": {
+        "data": {
+            "text": "根节点",
+            "expand": true,
+            "isActive": false
+        },
+        "children": [{
+            "data": {
+                "text": "二级节点",
+                "generalization": {
+                    "text": "概要",
+                    "expand": true,
+                    "isActive": false
+                },
+                "expand": true,
+                "isActive": false
+            },
+            "children": [{
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }, {
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }]
+        }]
+    },
+    "theme": {
+        "template": "classic4",
+        "config": {}
+    },
+    "view": {
+        "transform": {
+            "scaleX": 1,
+            "scaleY": 1,
+            "shear": 0,
+            "rotate": 0,
+            "translateX": 0,
+            "translateY": 0,
+            "originX": 0,
+            "originY": 0,
+            "a": 1,
+            "b": 0,
+            "c": 0,
+            "d": 1,
+            "e": 0,
+            "f": 0
+        },
+        "state": {
+            "scale": 1,
+            "x": 0,
+            "y": 0,
+            "sx": 0,
+            "sy": 0
+        }
+    }
+}
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@ -16,6 +16,7 @@ import {
 import {
    SVG
 } from '@svgdotjs/svg.js'
+import xmind from './src/parse/xmind'

 // 默认选项配置
 const defaultOpt = {
@ -319,7 +320,7 @@ class MindMap {
    /** 
     * @Author: 王林 
     * @Date: 2021-08-03 22:58:12 
-     * @Desc: 动态设置思维导图数据 
+     * @Desc: 动态设置思维导图数据，纯节点数据
     */
    setData(data) {
        this.execCommand('CLEAR_ACTIVE_NODE')
@ -328,6 +329,32 @@ class MindMap {
        this.reRender()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-21 16:39:13 
+     * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
+     */
+    setFullData(data) {
+        if (data.root) {
+            this.setData(data.root)
+        }
+        if (data.layout) {
+            this.setLayout(data.layout)
+        }
+        if (data.theme) {
+            if (data.theme.template) {
+                this.setTheme(data.theme.template)
+            }
+            if (data.theme.config) {
+                this.setThemeConfig(data.theme.config)
+            }
+        }
+        if (data.view) {
+            this.view.setTransformData(data.view)
+        }
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-01 22:06:38 
@ -369,4 +396,6 @@ class MindMap {
    }
 }

+MindMap.xmind = xmind
+
 export default MindMap
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.6",
+  "version": "0.2.7",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@ -25,7 +25,8 @@
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "eventemitter3": "^4.0.7",
-    "jspdf": "^2.5.1"
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1"
  },
  "keywords": [
    "javascript",
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@ -26,9 +26,9 @@ class Export {
     * @Date: 2021-07-02 07:44:06 
     * @Desc: 导出 
     */
-    async export(type, isDownload = true, name = '思维导图') {
+    async export(type, isDownload = true, name = '思维导图', ...args) {
        if (this[type]) {
-            let result = await this[type](name)
+            let result = await this[type](name, ...args)
            if (isDownload && type !== 'pdf') {
                downloadFile(result, name + '.' + type)
            }
@ -248,8 +248,22 @@ class Export {
     * @Date: 2021-08-03 22:19:17 
     * @Desc: 导出为json 
     */
-    json () {
-        let data = this.mindMap.command.getCopyData()
+    json (name, withConfig = true) {
+        let nodeData = this.mindMap.command.getCopyData()
+        let data = {}
+        if (withConfig) {
+            data = {
+                layout: this.mindMap.getLayout(),
+                root: nodeData,
+                theme: {
+                    template: this.mindMap.getTheme(),
+                    config: this.mindMap.getCustomThemeConfig()
+                },
+                view: this.mindMap.view.getTransformData()
+            }
+        } else {
+            data = nodeData
+        }
        let str = JSON.stringify(data)
        let blob = new Blob([str])
        return URL.createObjectURL(blob)
@ -260,8 +274,8 @@ class Export {
     * @Date: 2021-08-03 22:24:24 
     * @Desc: 专有文件，其实就是json文件 
     */
-    smm () {
-        return this.json();
+    smm (name, withConfig) {
+        return this.json(name, withConfig);
    }
 }

--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@ -0,0 +1,76 @@
+import JSZip from "jszip";
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 14:07:47
+ * @Desc: 解析.xmind文件
+ */
+const parseXmindFile = (file) => {
+  return new Promise((resolve, reject) => {
+    JSZip.loadAsync(file).then(
+      async (zip) => {
+        try {
+          let content = await zip.files["content.json"].async("string");
+          let res = transformXmind(content);
+          resolve(res);
+        } catch (error) {
+          reject(error);
+        }
+      },
+      (e) => {
+        reject(e);
+      }
+    );
+  });
+};
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 18:57:25
+ * @Desc: 转换xmind数据
+ */
+const transformXmind = (content) => {
+  let data = JSON.parse(content)[0];
+  let nodeTree = data.rootTopic;
+  let newTree = {};
+  let walk = (node, newNode) => {
+    newNode.data = {
+      // 节点内容
+      text: node.title,
+    };
+    // 节点备注
+    if (node.notes) {
+      newNode.data.note = (node.notes.realHTML || node.notes.plain).content;
+    }
+    // 超链接
+    if (node.href && /^https?:\/\//.test(node.href)) {
+      newNode.data.hyperlink = node.href;
+    }
+    // 标签
+    if (node.labels && node.labels.length > 0) {
+      newNode.data.tag = node.labels;
+    }
+    // 子节点
+    newNode.children = [];
+    if (
+      node.children &&
+      node.children.attached &&
+      node.children.attached.length > 0
+    ) {
+      node.children.attached.forEach((item) => {
+        let newChild = {};
+        newNode.children.push(newChild);
+        walk(item, newChild);
+      });
+    }
+  };
+  walk(nodeTree, newTree);
+  return newTree;
+};
+
+export default {
+  parseXmindFile,
+  transformXmind,
+};
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@ -101,10 +101,10 @@
          <span class="name">颜色</span>
          <span
            class="block"
-            v-popover:popover
+            v-popover:popover2
            :style="{ backgroundColor: style.generalizationLineColor }"
          ></span>
-          <el-popover ref="popover" placement="bottom" trigger="click">
+          <el-popover ref="popover2" placement="bottom" trigger="click">
            <Color
              :color="style.generalizationLineColor"
              @change="
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@ -215,7 +215,11 @@ export default {
     * @Desc: 动态设置思维导图数据
     */
    setData(data) {
-      this.mindMap.setData(data)
+      if (data.root) {
+        this.mindMap.setFullData(data)
+      } else {
+        this.mindMap.setData(data)
+      }
      this.manualSave()
    },

--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@ -3,21 +3,22 @@
    class="nodeDialog"
    title="导出"
    :visible.sync="dialogVisible"
-    width="500"
+    width="700px"
  >
    <div>
      <div class="nameInputBox">
        <span class="name">导出文件名称</span>
        <el-input style="width: 300px" v-model="fileName" size="mini"></el-input>
+        <el-checkbox v-show="['smm', 'json'].includes(exportType)" v-model="widthConfig" style="margin-left: 12px">是否包含主题、结构等配置数据</el-checkbox>
      </div>
-      <el-radio-group v-model="exportType">
-        <el-radio label="smm">专有文件（.smm）</el-radio>
-        <el-radio label="json">json文件（.json）</el-radio>
-        <el-radio label="png">图片文件（.png）</el-radio>
-        <el-radio label="svg">svg文件（.svg）</el-radio>
-        <el-radio label="pdf">pdf文件（.pdf）</el-radio>
+      <el-radio-group v-model="exportType" size="mini">
+        <el-radio-button label="smm">专有文件（.smm）</el-radio-button>
+        <el-radio-button label="json">json文件（.json）</el-radio-button>
+        <el-radio-button label="png">图片文件（.png）</el-radio-button>
+        <el-radio-button label="svg">svg文件（.svg）</el-radio-button>
+        <el-radio-button label="pdf">pdf文件（.pdf）</el-radio-button>
      </el-radio-group>
-      <div class="tip">tips：.smm文件可用于导入</div>
+      <div class="tip">tips：.smm和.json文件可用于导入</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
@ -38,7 +39,8 @@ export default {
    return {
      dialogVisible: false,
      exportType: "smm",
-      fileName: '思维导图'
+      fileName: '思维导图',
+      widthConfig: true
    };
  },
  created() {
@ -62,7 +64,7 @@ export default {
     * @Desc:  确定
     */
    confirm() {
-      this.$bus.$emit("export", this.exportType, true, this.fileName);
+      this.$bus.$emit("export", this.exportType, true, this.fileName, this.widthConfig);
      this.$notify.info({
          title: '消息',
          message: '如果没有触发下载，请检查是否被浏览器拦截了'
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@ -1,8 +1,8 @@
 <template>
-<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="500">
+<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="300px">
    <el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传.smm文件</div>
+        <div slot="tip" class="el-upload__tip">支持.smm、.json、.xmind文件</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
@ -12,6 +12,8 @@
 </template>

 <script>
+import MindMap from 'simple-mind-map'
+
 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:54
@ -44,9 +46,9 @@ export default {
         * @Desc: 文件选择
         */
        onChange(file) {
-            let reg = /\.smm$/;
+            let reg = /\.(smm|xmind|json)$/;
            if (!reg.test(file.name)) {
-                this.$message.error("请选择.smm文件");
+                this.$message.error("请选择.smm、.json、.xmind文件");
                this.fileList = [];
            } else {
                this.fileList.push(file)
@ -81,6 +83,15 @@ export default {
                return this.$message.error("请选择要导入的文件");
            }
            let file = this.fileList[0];
+            if (/\.(smm|json)$/.test(file.name)) {
+                this.handleSmm(file)
+            } else if (/\.xmind$/.test(file.name)) {
+                this.handleXmind(file)
+            }
+            this.cancel();
+        },
+
+        handleSmm(file) {
            let fileReader = new FileReader()
            fileReader.readAsText(file.raw)
            fileReader.onload = (evt) => {
@ -96,8 +107,18 @@ export default {
                    this.$message.error("文件解析失败");
                }
            }
-            this.cancel();
        },
+
+        async handleXmind(file) {
+            try {
+                let data = await MindMap.xmind.parseXmindFile(file.raw)
+                this.$bus.$emit('setData', data)
+                this.$message.success("导入成功");
+            } catch (error) {
+                console.log(error)
+                this.$message.error("文件解析失败");
+            }
+        }
    },
 };
 </script>