coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues 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`
#### getCustomThemeConfig()
获取自定义主题配置
#### 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 {
// ...data1,
...data2,
// ...data2,
// ...data3,
// ...data4,
...rootData,
"theme": {
"template": "minions",
"config": {

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

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

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
} 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
}
});
},
/**

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 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();
},
/**

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

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