diff --git a/README.md b/README.md index 5d47718a..1190bc55 100644 --- a/README.md +++ b/README.md @@ -224,7 +224,7 @@ version does not have a `content.json`, it corresponds to `content.xml`. `content`: the contents of the `content.xml` file within the `.xmind` zip package -### Instantiation options: +### Instantiation options | Field Name | Type | Default Value | Description | Required | | -------------------------------- | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | @@ -243,7 +243,39 @@ package | customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | | | readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | | -### Instance methods: +### Static methods + +#### defineTheme(name, config) + +v0.2.23+ + +Define new theme. + +`name`：New theme name + +`config`：New theme config + +`Simple-mind-map ` Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example: + +```js +import MindMap from 'simple-mind-map' +// 注册新主题 +MindMap.defineTheme('主题名称', {}) + +// 1.实例化时使用新注册的主题 +const mindMap = new MindMap({ + theme: '主题名称' +}) + +// 2.动态切换新主题 +mindMap.setTheme('主题名称') +``` + +For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js). + + + +### Instance methods #### render() @@ -1160,12 +1192,18 @@ The built-in themes and icons in the project come from: [Zhixi Mind Map](https://www.zhixi.com/) +Respect the copyright, and do not use the theme and icons directly for commercial projects. + # License [MIT](https://opensource.org/licenses/MIT) # Changelog +## 0.2.23 + +New: Support register new theme. + ## 0.2.22 optimization：The theme and structure pictures of the built-in `simple-mind-map` package are removed and replaced by user self-maintenance. The original pictures can be found in the `web/assets/img/` directory. diff --git a/README.zh-Hans.md b/README.zh-Hans.md index e5eb9909..fd25dac1 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -187,7 +187,7 @@ v0.2.8+ `content`：`.xmind`压缩包内的`content.xml`文件内容 -### 实例化选项： +### 实例化选项 | 字段名称 | 类型 | 默认值 | 描述 | 是否必填 | | ------------------------------ | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | @@ -206,7 +206,39 @@ v0.2.8+ | customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | | | readonly（v0.1.7+） | Boolean | false | 是否是只读模式 | | -### 实例方法： +### 静态方法 + +#### defineTheme(name, config) + +v0.2.23+ + +定义新主题。 + +`name`：新主题名称 + +`config`：主题数据 + +`simple-mind-map`内置了众多主题，另外你也可以注册新主题，建议在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题，使用示例： + +```js +import MindMap from 'simple-mind-map' +// 注册新主题 +MindMap.defineTheme('主题名称', {}) + +// 1.实例化时使用新注册的主题 +const mindMap = new MindMap({ + theme: '主题名称' +}) + +// 2.动态切换新主题 +mindMap.setTheme('主题名称') +``` + +主题的所有配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。 + + + +### 实例方法 #### render() @@ -1058,12 +1090,18 @@ copyNodeTree({}, node) [知犀思维导图](https://www.zhixi.com/) +尊重版权，主题和图片请勿直接用于商业项目。 + # License [MIT](https://opensource.org/licenses/MIT) # Changelog +## 0.2.23 + +新增：支持注册新主题。 + ## 0.2.22 优化：取消内置`simple-mind-map`包的主题和结构图片，改为由使用者自行维护，原有图片可在`web/assets/img/`目录找到。 diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 49bfd880..bd1a81b1 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -16,6 +16,7 @@ import { SVG } from '@svgdotjs/svg.js' import xmind from './src/parse/xmind' import { simpleDeepClone } from './src/utils' import KeyboardNavigation from './src/KeyboardNavigation' +import defaultTheme from './src/themes/default' // 默认选项配置 const defaultOpt = { @@ -328,4 +329,12 @@ class MindMap { MindMap.xmind = xmind +// 定义新主题 +MindMap.defineTheme = (name, config = {}) => { + if (theme[name]) { + return new Error('该主题名称已存在') + } + theme[name] = merge(defaultTheme, config) +} + export default MindMap diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index f54c5f20..e7e95e62 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.2.22", + "version": "0.2.23", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/web/src/assets/img/blackGold.jpg b/web/src/assets/img/blackGold.jpg new file mode 100644 index 00000000..f63de983 Binary files /dev/null and b/web/src/assets/img/blackGold.jpg differ diff --git a/web/src/assets/img/blackHumour.jpg b/web/src/assets/img/blackHumour.jpg new file mode 100644 index 00000000..b0c33be7 Binary files /dev/null and b/web/src/assets/img/blackHumour.jpg differ diff --git a/web/src/assets/img/coffee.jpg b/web/src/assets/img/coffee.jpg new file mode 100644 index 00000000..30db8d00 Binary files /dev/null and b/web/src/assets/img/coffee.jpg differ diff --git a/web/src/assets/img/courseGreen.jpg b/web/src/assets/img/courseGreen.jpg new file mode 100644 index 00000000..8cf7ae6a Binary files /dev/null and b/web/src/assets/img/courseGreen.jpg differ diff --git a/web/src/assets/img/lateNightOffice.jpg b/web/src/assets/img/lateNightOffice.jpg new file mode 100644 index 00000000..d6745ee3 Binary files /dev/null and b/web/src/assets/img/lateNightOffice.jpg differ diff --git a/web/src/assets/img/redSpirit.jpg b/web/src/assets/img/redSpirit.jpg new file mode 100644 index 00000000..42e3f0b1 Binary files /dev/null and b/web/src/assets/img/redSpirit.jpg differ diff --git a/web/src/assets/img/simpleBlack.jpg b/web/src/assets/img/simpleBlack.jpg new file mode 100644 index 00000000..1010c65c Binary files /dev/null and b/web/src/assets/img/simpleBlack.jpg differ diff --git a/web/src/config/constant.js b/web/src/config/constant.js index bb1b4c0d..9532e57f 100644 --- a/web/src/config/constant.js +++ b/web/src/config/constant.js @@ -29,6 +29,13 @@ export const themeMap = { earthYellow: require('../assets/img/earthYellow.jpg'), freshGreen: require('../assets/img/freshGreen.jpg'), freshRed: require('../assets/img/freshRed.jpg'), - romanticPurple: require('../assets/img/romanticPurple.jpg') + romanticPurple: require('../assets/img/romanticPurple.jpg'), + simpleBlack: require('../assets/img/simpleBlack.jpg'), + courseGreen: require('../assets/img/courseGreen.jpg'), + coffee: require('../assets/img/coffee.jpg'), + redSpirit: require('../assets/img/redSpirit.jpg'), + blackHumour: require('../assets/img/blackHumour.jpg'), + lateNightOffice: require('../assets/img/lateNightOffice.jpg'), + blackGold: require('../assets/img/blackGold.jpg'), } \ No newline at end of file diff --git a/web/src/customThemes/blackGold.js b/web/src/customThemes/blackGold.js new file mode 100644 index 00000000..fb468c9d --- /dev/null +++ b/web/src/customThemes/blackGold.js @@ -0,0 +1,55 @@ +// 黑金 +export default { + // 背景颜色 + backgroundColor: 'rgb(18, 20, 20)', + // 连线的颜色 + lineColor: 'rgb(205, 186, 156)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(245, 224, 191)', + // 根节点样式 + root: { + fillColor: 'rgb(255, 208, 124)', + color: 'rgb(111, 61, 6)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: '#fff', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(66, 57, 46)', + color: 'rgb(225, 201, 158)', + borderColor: 'rgb(245, 224, 191)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(255, 208, 124)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(231, 203, 155)', + active: { + borderColor: 'rgb(255, 208, 124)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(56, 45, 34)', + borderColor: 'rgb(104, 84, 61)', + borderWidth: 2, + color: 'rgb(242, 216, 176)', + active: { + borderColor: 'rgb(255, 208, 124)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/blackHumour.js b/web/src/customThemes/blackHumour.js new file mode 100644 index 00000000..c91468a6 --- /dev/null +++ b/web/src/customThemes/blackHumour.js @@ -0,0 +1,56 @@ +// 黑色幽默 +export default { + // 背景颜色 + backgroundColor: 'rgb(27, 31, 34)', + // 连线的颜色 + lineColor: 'rgb(75, 81, 78)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 119, 34)', + // 根节点样式 + root: { + fillColor: 'rgb(36, 179, 96)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(254, 199, 13)', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(254, 199, 13)', + color: 'rgb(0, 0, 0)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(36, 179, 96)', + borderWidth: 3, + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(254, 199, 13)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(27, 31, 34)', + borderColor: 'rgb(255, 119, 34)', + borderWidth: 2, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(36, 179, 96)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/coffee.js b/web/src/customThemes/coffee.js new file mode 100644 index 00000000..1011c4b1 --- /dev/null +++ b/web/src/customThemes/coffee.js @@ -0,0 +1,53 @@ +// 咖啡 +export default { + // 连线的颜色 + lineColor: 'rgb(173, 123, 91)', + lineWidth: 4, + // 概要连线的粗细 + generalizationLineWidth: 4, + // 概要连线的颜色 + generalizationLineColor: 'rgb(173, 123, 91)', + // 根节点样式 + root: { + fillColor: 'rgb(202, 117, 79)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(173, 123, 91)', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(245, 231, 216)', + color: 'rgb(125, 86, 42)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(173, 123, 91)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(96, 71, 47)', + active: { + borderColor: 'rgb(173, 123, 91)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 249, 239)', + borderColor: 'rgb(173, 123, 91)', + borderWidth: 2, + color: 'rgb(122, 83, 44)', + active: { + borderColor: 'rgb(202, 117, 79)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/courseGreen.js b/web/src/customThemes/courseGreen.js new file mode 100644 index 00000000..9e780d92 --- /dev/null +++ b/web/src/customThemes/courseGreen.js @@ -0,0 +1,53 @@ +// 课程绿 +export default { + // 连线的颜色 + lineColor: 'rgb(113, 195, 169)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(113, 195, 169)', + // 根节点样式 + root: { + fillColor: 'rgb(16, 160, 121)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(173, 91, 12)', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(240, 252, 249)', + color: 'rgb(50, 113, 96)', + borderColor: 'rgb(113, 195, 169)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(173, 91, 12)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(10, 59, 43)', + active: { + borderColor: 'rgb(173, 91, 12)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(246, 238, 211)', + borderColor: '', + borderWidth: 0, + color: 'rgb(173, 91, 12)', + active: { + borderColor: 'rgb(113, 195, 169)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/index.js b/web/src/customThemes/index.js new file mode 100644 index 00000000..7279ed8e --- /dev/null +++ b/web/src/customThemes/index.js @@ -0,0 +1,45 @@ +import simpleBlack from './simpleBlack' +import courseGreen from './courseGreen' +import coffee from './coffee' +import redSpirit from './redSpirit' +import blackHumour from './blackHumour' +import lateNightOffice from './lateNightOffice' +import blackGold from './blackGold' + +export default [ + { + name: '简约黑', + value: 'simpleBlack', + theme: simpleBlack + }, + { + name: '课程绿', + value: 'courseGreen', + theme: courseGreen + }, + { + name: '咖啡', + value: 'coffee', + theme: coffee + }, + { + name: '红色精神', + value: 'redSpirit', + theme: redSpirit + }, + { + name: '黑色幽默', + value: 'blackHumour', + theme: blackHumour + }, + { + name: '深夜办公室', + value: 'lateNightOffice', + theme: lateNightOffice + }, + { + name: '黑金', + value: 'blackGold', + theme: blackGold + } +] \ No newline at end of file diff --git a/web/src/customThemes/lateNightOffice.js b/web/src/customThemes/lateNightOffice.js new file mode 100644 index 00000000..c2b65af3 --- /dev/null +++ b/web/src/customThemes/lateNightOffice.js @@ -0,0 +1,56 @@ +// 深夜办公室 +export default { + // 背景颜色 + backgroundColor: 'rgb(32, 37, 49)', + // 连线的颜色 + lineColor: 'rgb(137, 167, 196)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 119, 34)', + // 根节点样式 + root: { + fillColor: 'rgb(23, 153, 243)', + color: 'rgb(255, 255, 255)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(255, 119, 34)', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(70, 78, 94)', + color: 'rgb(209, 210, 210)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(255, 119, 34)', + borderWidth: 3, + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(255, 119, 34)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 119, 34)', + borderColor: '', + borderWidth: 2, + color: '#fff', + active: { + borderColor: 'rgb(23, 153, 243)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/redSpirit.js b/web/src/customThemes/redSpirit.js new file mode 100644 index 00000000..3240b4fb --- /dev/null +++ b/web/src/customThemes/redSpirit.js @@ -0,0 +1,55 @@ +// 红色精神 +export default { + // 背景颜色 + backgroundColor: 'rgb(255, 238, 228)', + // 连线的颜色 + lineColor: 'rgb(230, 138, 131)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(222, 101, 85)', + // 根节点样式 + root: { + fillColor: 'rgb(207, 44, 44)', + color: 'rgb(255, 233, 157)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(255, 233, 157)', + borderWidth: 3, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(255, 255, 255)', + color: 'rgb(211, 58, 21)', + borderColor: 'rgb(222, 101, 85)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(255, 233, 157)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(144, 71, 43)', + active: { + borderColor: 'rgb(255, 233, 157)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 247, 211)', + borderColor: 'rgb(255, 202, 162)', + borderWidth: 2, + color: 'rgb(187, 101, 69)', + active: { + borderColor: 'rgb(222, 101, 85)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/simpleBlack.js b/web/src/customThemes/simpleBlack.js new file mode 100644 index 00000000..36457826 --- /dev/null +++ b/web/src/customThemes/simpleBlack.js @@ -0,0 +1,51 @@ +// 简约黑 +export default { + // 连线的颜色 + lineColor: 'rgb(34, 34, 34)', + lineWidth: 4, + // 概要连线的粗细 + generalizationLineWidth: 4, + // 概要连线的颜色 + generalizationLineColor: 'rgb(34, 34, 34)', + // 根节点样式 + root: { + fillColor: '#fff', + color: 'rgb(34, 34, 34)', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 3, + fontSize: 24, + active: { + borderColor: '#a13600', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(241, 246, 248)', + color: 'rgb(34, 34, 34)', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 3, + fontSize: 18, + active: { + borderColor: '#a13600', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(34, 34, 34)', + active: { + borderColor: '#a13600' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'transparent', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 2, + color: 'rgb(34, 34, 34)', + active: { + borderColor: '#a13600' + } + } +} diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index b3b1a8ba..52e9a92e 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -37,6 +37,12 @@ import Navigator from './Navigator.vue' import NodeImgPreview from './NodeImgPreview.vue' import SidebarTrigger from './SidebarTrigger.vue' import { mapState } from 'vuex' +import customThemeList from '@/customThemes' + +// 注册自定义主题 +customThemeList.forEach((item) => { + MindMap.defineTheme(item.value, item.theme) +}) /** * @Author: 王林 diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue index 6494d8f2..d377f5af 100644 --- a/web/src/pages/Edit/components/Theme.vue +++ b/web/src/pages/Edit/components/Theme.vue @@ -23,6 +23,7 @@ import { themeList } from 'simple-mind-map/src/utils/constant' import { storeConfig } from '@/api' import { mapState } from 'vuex' import { themeMap } from '@/config/constant.js' +import customThemeList from '@/customThemes' /** * @Author: 王林 @@ -41,7 +42,7 @@ export default { }, data() { return { - themeList, + themeList: [...themeList, ...customThemeList], themeMap, theme: '' }