openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加本地存储功能

Browse Source
This commit is contained in:
wanglin 2021-08-01 10:49:57 +08:00
parent 0ebac39716
commit 786e183091
9 changed files with 116 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -166,7 +166,9 @@ const mindMap = new MindMap({
设置主题配置，`config`同上面选项表格里的选项`themeConfig` 设置主题配置，`config`同上面选项表格里的选项`themeConfig`
#### getCustomThemeConfig()
获取自定义主题配置
#### getThemeConfig(prop) #### getThemeConfig(prop)

2
index.html
View File

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/css/app.670fca9b.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.caacd1e0.css" rel="preload" as="style"><link href="dist/js/app.9f2d7ae2.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.523e8595.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.caacd1e0.css" rel="stylesheet"><link href="dist/css/app.670fca9b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.523e8595.js"></script><script src="dist/js/app.9f2d7ae2.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/css/app.3c1796da.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="preload" as="style"><link href="dist/js/app.d09d6b0a.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.52f014f8.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="stylesheet"><link href="dist/css/app.3c1796da.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.52f014f8.js"></script><script src="dist/js/app.d09d6b0a.js"></script></body></html>

12
simple-mind-map/example/exampleData.js
View File

@ -864,11 +864,21 @@ const data4 = {
} }
} }
const rootData = {
"root": {
"data": {
"text": "根节点"
},
"children": []
}
}
export default { export default {
// ...data1, // ...data1,
...data2, // ...data2,
// ...data3, // ...data3,
// ...data4, // ...data4,
...rootData,
"theme": { "theme": {
"template": "minions", "template": "minions",
"config": { "config": {

11
simple-mind-map/index.js
View File

@ -246,6 +246,15 @@ class MindMap {
this.reRender() this.reRender()
} }
/**
* @Author: 王林
* @Date: 2021-08-01 10:38:34
* @Desc: 获取自定义主题配置
*/
getCustomThemeConfig() {
return this.opt.themeConfig
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-05-05 14:01:29 * @Date: 2021-05-05 14:01:29
@ -295,7 +304,7 @@ class MindMap {
* @Date: 2021-07-01 22:06:38 * @Date: 2021-07-01 22:06:38
* @Desc: 导出 * @Desc: 导出
*/ */
async export (...args) { async export(...args) {
let result = await this.doExport.export(...args) let result = await this.doExport.export(...args)
return result return result
} }

57
web/src/api/index.js Normal file
View File

@ -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)
}
}

7
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -226,6 +226,7 @@ import {
backgroundRepeatList backgroundRepeatList
} from "@/config"; } from "@/config";
import ImgUpload from "@/components/ImgUpload"; import ImgUpload from "@/components/ImgUpload";
import { storeConfig } from "@/api";
/** /**
* @Author: 王林 * @Author: 王林
@ -331,6 +332,12 @@ export default {
} }
this.data.theme.config[key] = value; this.data.theme.config[key] = value;
this.mindMap.setThemeConfig(this.data.theme.config); this.mindMap.setThemeConfig(this.data.theme.config);
storeConfig({
theme: {
"template": this.mindMap.getTheme(),
"config": this.data.theme.config
}
});
}, },
/** /**

19
web/src/pages/Edit/components/Edit.vue
View File

@ -18,13 +18,13 @@ import MindMap from "simple-mind-map";
import Outline from "./Outline"; import Outline from "./Outline";
import Style from "./Style"; import Style from "./Style";
import BaseStyle from "./BaseStyle"; import BaseStyle from "./BaseStyle";
import exampleData from "simple-mind-map/example/exampleData";
import Theme from "./Theme"; import Theme from "./Theme";
import Structure from "./Structure"; import Structure from "./Structure";
import Count from "./Count"; import Count from "./Count";
import NavigatorToolbar from "./NavigatorToolbar"; import NavigatorToolbar from "./NavigatorToolbar";
import ShortcutKey from "./ShortcutKey"; import ShortcutKey from "./ShortcutKey";
import Contextmenu from "./Contextmenu"; import Contextmenu from "./Contextmenu";
import { getData, storeData } from "@/api";
/** /**
* @Author: 王林 * @Author: 王林
@ -64,7 +64,19 @@ export default {
* @Desc: 获取思维导图数据，实际应该调接口获取 * @Desc: 获取思维导图数据，实际应该调接口获取
*/ */
getData() { 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", "draw_click",
"expand_btn_click", "expand_btn_click",
"svg_mousedown", "svg_mousedown",
"mouseup" "mouseup",
].forEach((event) => { ].forEach((event) => {
this.mindMap.on(event, (...args) => { this.mindMap.on(event, (...args) => {
this.$bus.$emit(event, ...args); this.$bus.$emit(event, ...args);
}); });
}); });
this.bindSaveEvent();
}, },
/** /**

6
web/src/pages/Edit/components/Structure.vue
View File

@ -20,6 +20,7 @@
<script> <script>
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
import { layoutList } from "simple-mind-map/src/utils/constant"; import { layoutList } from "simple-mind-map/src/utils/constant";
import { storeConfig } from "@/api";
/** /**
* @Author: 王林 * @Author: 王林
@ -39,7 +40,7 @@ export default {
data() { data() {
return { return {
layoutList, layoutList,
layout: '' layout: "",
}; };
}, },
created() { created() {
@ -60,6 +61,9 @@ export default {
useLayout(layout) { useLayout(layout) {
this.layout = layout.value; this.layout = layout.value;
this.mindMap.setLayout(layout.value); this.mindMap.setLayout(layout.value);
storeConfig({
layout: layout.value,
});
}, },
}, },
}; };

7
web/src/pages/Edit/components/Theme.vue
View File

@ -20,6 +20,7 @@
<script> <script>
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
import { themeList } from "simple-mind-map/src/utils/constant"; import { themeList } from "simple-mind-map/src/utils/constant";
import { storeConfig } from "@/api";
/** /**
* @Author: 王林 * @Author: 王林
@ -60,6 +61,12 @@ export default {
useTheme(theme) { useTheme(theme) {
this.theme = theme.value; this.theme = theme.value;
this.mindMap.setTheme(theme.value); this.mindMap.setTheme(theme.value);
storeConfig({
theme: {
"template": theme.value,
"config": this.mindMap.getCustomThemeConfig()
}
});
}, },
}, },
}; };