新增支持注册新主题

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.

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/`目录找到。

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

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

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'),
 }
   

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)'
+      }
+    }
+  }
+  

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)'
+      }
+    }
+  }
+  

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)'
+      }
+    }
+  }
+  

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)'
+      }
+    }
+  }
+  

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
+    }
+]

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)'
+      }
+    }
+  }
+  

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)'
+      }
+    }
+  }
+  

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'
+    }
+  }
+}

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: 王林

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: ''
     }