From 786e183091bce5709dafc7bc86dd4e8ae1981c7a Mon Sep 17 00:00:00 2001 From: wanglin <1013335014@qq.com> Date: Sun, 1 Aug 2021 10:49:57 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9C=AC=E5=9C=B0=E5=AD=98?= =?UTF-8?q?=E5=82=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + index.html | 2 +- simple-mind-map/example/exampleData.js | 12 ++++- simple-mind-map/index.js | 11 +++- web/src/api/index.js | 57 +++++++++++++++++++++ web/src/pages/Edit/components/BaseStyle.vue | 7 +++ web/src/pages/Edit/components/Edit.vue | 19 +++++-- web/src/pages/Edit/components/Structure.vue | 6 ++- web/src/pages/Edit/components/Theme.vue | 7 +++ 9 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 web/src/api/index.js diff --git a/README.md b/README.md index 654fcf8c..e05d5529 100644 --- a/README.md +++ b/README.md @@ -166,7 +166,9 @@ const mindMap = new MindMap({ 设置主题配置，`config`同上面选项表格里的选项`themeConfig` +#### getCustomThemeConfig() +获取自定义主题配置 #### getThemeConfig(prop) diff --git a/index.html b/index.html index c9dd1989..2dd58c31 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index aba74fb2..6299ca96 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -864,11 +864,21 @@ const data4 = { } } +const rootData = { + "root": { + "data": { + "text": "根节点" + }, + "children": [] + } +} + export default { // ...data1, - ...data2, + // ...data2, // ...data3, // ...data4, + ...rootData, "theme": { "template": "minions", "config": { diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 1f9b9825..86dd327d 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -246,6 +246,15 @@ class MindMap { this.reRender() } + /** + * @Author: 王林 + * @Date: 2021-08-01 10:38:34 + * @Desc: 获取自定义主题配置 + */ + getCustomThemeConfig() { + return this.opt.themeConfig + } + /** * @Author: 王林 * @Date: 2021-05-05 14:01:29 @@ -295,7 +304,7 @@ class MindMap { * @Date: 2021-07-01 22:06:38 * @Desc: 导出 */ - async export (...args) { + async export(...args) { let result = await this.doExport.export(...args) return result } diff --git a/web/src/api/index.js b/web/src/api/index.js new file mode 100644 index 00000000..e743be8e --- /dev/null +++ b/web/src/api/index.js @@ -0,0 +1,57 @@ +import exampleData from "simple-mind-map/example/exampleData" +import { simpleDeepClone } from 'simple-mind-map/src/utils/index' + +const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA' + +/** + * @Author: 王林 + * @Date: 2021-08-01 10:10:49 + * @Desc: 获取缓存的思维导图数据 + */ +export const getData = () => { + let store = localStorage.getItem(SIMPLE_MIND_MAP_DATA) + if (store === null) { + return simpleDeepClone(exampleData) + } else { + try { + return JSON.parse(store) + } catch (error) { + return simpleDeepClone(exampleData) + } + } +} + +/** + * @Author: 王林 + * @Date: 2021-08-01 10:14:28 + * @Desc: 存储思维导图数据 + */ +export const storeData = (data) => { + try { + let originData = getData() + originData.root = data + let dataStr = JSON.stringify(originData) + localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr) + } catch (error) { + console.log(error) + } +} + +/** + * @Author: 王林 + * @Date: 2021-08-01 10:24:56 + * @Desc: 存储思维导图配置数据 + */ +export const storeConfig = (config) => { + try { + let originData = getData() + originData = { + ...originData, + ...config + } + let dataStr = JSON.stringify(originData) + localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr) + } catch (error) { + console.log(error) + } +} \ No newline at end of file diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 77ab3b82..36b00c64 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -226,6 +226,7 @@ import { backgroundRepeatList } from "@/config"; import ImgUpload from "@/components/ImgUpload"; +import { storeConfig } from "@/api"; /** * @Author: 王林 @@ -331,6 +332,12 @@ export default { } this.data.theme.config[key] = value; this.mindMap.setThemeConfig(this.data.theme.config); + storeConfig({ + theme: { + "template": this.mindMap.getTheme(), + "config": this.data.theme.config + } + }); }, /** diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 37f630ec..b988f450 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -18,13 +18,13 @@ import MindMap from "simple-mind-map"; import Outline from "./Outline"; import Style from "./Style"; import BaseStyle from "./BaseStyle"; -import exampleData from "simple-mind-map/example/exampleData"; 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"; /** * @Author: 王林 @@ -64,7 +64,19 @@ export default { * @Desc: 获取思维导图数据，实际应该调接口获取 */ getData() { - this.mindMapData = exampleData; + let storeData = getData(); + this.mindMapData = storeData; + }, + + /** + * @Author: 王林 + * @Date: 2021-08-01 10:19:07 + * @Desc: 存储数据当数据有变时 + */ + bindSaveEvent() { + this.$bus.$on("data_change", (data) => { + storeData(data); + }); }, /** @@ -91,12 +103,13 @@ export default { "draw_click", "expand_btn_click", "svg_mousedown", - "mouseup" + "mouseup", ].forEach((event) => { this.mindMap.on(event, (...args) => { this.$bus.$emit(event, ...args); }); }); + this.bindSaveEvent(); }, /** diff --git a/web/src/pages/Edit/components/Structure.vue b/web/src/pages/Edit/components/Structure.vue index 3e2b180e..4ca2f020 100644 --- a/web/src/pages/Edit/components/Structure.vue +++ b/web/src/pages/Edit/components/Structure.vue @@ -20,6 +20,7 @@