diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index ad92f279..37782bd8 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -189,6 +189,8 @@ class Render { this.mindMap.execCommand('INSERT_NODE') } this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap) + // 插入概要 + this.mindMap.keyCommand.addShortcut('Shift+s', this.addGeneralization) // 展开/收起节点 this.mindMap.keyCommand.addShortcut('/', () => { this.activeNodeList.forEach((node) => { diff --git a/simple-mind-map/src/assets/classic4.jpg b/simple-mind-map/src/assets/classic4.jpg new file mode 100644 index 00000000..b95e5d06 Binary files /dev/null and b/simple-mind-map/src/assets/classic4.jpg differ diff --git a/simple-mind-map/src/themes/blueSky.js b/simple-mind-map/src/themes/blueSky.js index 6b2add3e..87875d5d 100644 --- a/simple-mind-map/src/themes/blueSky.js +++ b/simple-mind-map/src/themes/blueSky.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(115, 161, 191)', // 背景颜色 backgroundColor: 'rgb(251, 251, 251)', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: 'rgb(115, 161, 191)', @@ -37,4 +41,13 @@ export default merge(defaultTheme, { borderColor: 'rgb(57, 80, 96)' } }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(57, 80, 96)' + } + } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/brainImpairedPink.js b/simple-mind-map/src/themes/brainImpairedPink.js index 9b43e42f..ecf8653f 100644 --- a/simple-mind-map/src/themes/brainImpairedPink.js +++ b/simple-mind-map/src/themes/brainImpairedPink.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(191, 115, 148)', // 背景颜色 backgroundColor: 'rgb(251, 251, 251)', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: 'rgb(191, 115, 148)', @@ -36,5 +40,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(96, 57, 74)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(96, 57, 74)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classic.js b/simple-mind-map/src/themes/classic.js index 48bed19e..d3d4f918 100644 --- a/simple-mind-map/src/themes/classic.js +++ b/simple-mind-map/src/themes/classic.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: '#fff', // 连线的粗细 lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#fff', // 背景颜色 backgroundColor: 'rgb(58, 65, 68)', // 背景图片 @@ -49,5 +53,15 @@ export default merge(defaultTheme, { fillColor: 'rgb(254, 219, 0)', borderColor: 'transparent' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'transparent', + color: '#333', + active: { + fillColor: 'rgb(254, 219, 0)', + borderColor: 'transparent' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classic2.js b/simple-mind-map/src/themes/classic2.js index 269c863e..6c472f16 100644 --- a/simple-mind-map/src/themes/classic2.js +++ b/simple-mind-map/src/themes/classic2.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(51, 51, 51)', // 连线的粗细 lineWidth: 2, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(51, 51, 51)', // 背景颜色 backgroundColor: '#fff', // 根节点样式 @@ -41,5 +45,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(51, 51, 51)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'rgb(51, 51, 51)', + borderWidth: 2, + color: '#1a1a1a', + active: { + borderColor: 'rgb(18, 187, 55)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classic3.js b/simple-mind-map/src/themes/classic3.js index f37e7917..8a15fc68 100644 --- a/simple-mind-map/src/themes/classic3.js +++ b/simple-mind-map/src/themes/classic3.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(94, 202, 110)', // 连线的粗细 lineWidth: 2, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#1a1a1a', // 背景颜色 backgroundColor: 'rgb(241, 241, 241)', // 根节点样式 @@ -44,5 +48,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(94, 202, 110)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#1a1a1a', + color: '#1a1a1a', + borderWidth: 2, + active: { + borderColor: 'rgb(94, 202, 110)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classic4.js b/simple-mind-map/src/themes/classic4.js new file mode 100644 index 00000000..03158edb --- /dev/null +++ b/simple-mind-map/src/themes/classic4.js @@ -0,0 +1,65 @@ +import defaultTheme from './default'; +import merge from 'deepmerge'; + +/** + * @Author: 王林 + * @Date: 2021-04-11 15:22:18 + * @Desc: 经典4 + */ +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(30, 53, 86)', + // 连线的粗细 + lineWidth: 2, + // 概要连线的粗细 + generalizationLineWidth: 2, + // 概要连线的颜色 + generalizationLineColor: 'rgb(56, 123, 233)', + // 背景颜色 + backgroundColor: 'rgb(241, 241, 241)', + // 根节点样式 + root: { + fillColor: 'rgb(30, 53, 86)', + color: '#fff', + fontSize: 24, + borderRadius: 10, + borderColor: 'rgb(189, 197, 201)', + borderWidth: 2, + active: { + borderColor: 'rgb(169, 218, 218)' + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(169, 218, 218)', + borderColor: 'rgb(30, 53, 86)', + borderWidth: 2, + color: '#fff', + fontSize: 18, + borderRadius: 10, + active: { + borderColor: 'rgb(56, 123, 233)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(30, 53, 86)', + borderColor: 'rgb(30, 53, 86)', + borderWidth: 1, + marginY: 20, + active: { + borderColor: 'rgb(169, 218, 218)' + } + }, + // 概要节点样式 + generalization: { + fillColor: 'rgb(56, 123, 233)', + borderColor: 'rgb(56, 123, 233)', + color: '#fff', + borderWidth: 0, + active: { + borderColor: 'rgb(169, 218, 218)' + } + } +}) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classicBlue.js b/simple-mind-map/src/themes/classicBlue.js index c84a669f..b4295082 100644 --- a/simple-mind-map/src/themes/classicBlue.js +++ b/simple-mind-map/src/themes/classicBlue.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(51, 51, 51)', // 连线的粗细 lineWidth: 2, + // 概要连线的粗细 + generalizationLineWidth: 2, + // 概要连线的颜色 + generalizationLineColor: 'rgb(51, 51, 51)', // 背景颜色 backgroundColor: 'rgb(239, 248, 250)', // 根节点样式 @@ -39,5 +43,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(94, 199, 248)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'rgb(51, 51, 51)', + color: '#333', + active: { + borderColor: 'rgb(94, 199, 248)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/classicGreen.js b/simple-mind-map/src/themes/classicGreen.js index 6c412b5c..1c1f9ebc 100644 --- a/simple-mind-map/src/themes/classicGreen.js +++ b/simple-mind-map/src/themes/classicGreen.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(123, 199, 120)', // 背景颜色 backgroundColor: 'rgb(236, 245, 231)', + // 概要连线的粗细 + generalizationLineWidth: 2, + // 概要连线的颜色 + generalizationLineColor: 'rgb(123, 199, 120)', // 根节点样式 root: { fillColor: 'rgb(253, 244, 217)', @@ -37,5 +41,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(94, 199, 248)' } + }, + // 概要节点样式 + generalization: { + fillColor: 'rgb(123, 199, 120)', + borderColor: 'transparent', + borderWidth: 2, + color: '#fff', + active: { + borderColor: 'rgb(94, 199, 248)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/dark.js b/simple-mind-map/src/themes/dark.js index 1bc2adb1..0032655e 100644 --- a/simple-mind-map/src/themes/dark.js +++ b/simple-mind-map/src/themes/dark.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(17, 68, 23)', // 连线的粗细 lineWidth: 2, + // 概要连线的粗细 + generalizationLineWidth: 2, + // 概要连线的颜色 + generalizationLineColor: '#fff', // 背景颜色 backgroundColor: 'rgb(15, 16, 17)', // 根节点样式 @@ -41,5 +45,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(17, 68, 23)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'transparent', + color: '#333', + active: { + borderColor: 'rgb(17, 68, 23)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/dark2.js b/simple-mind-map/src/themes/dark2.js index bb5d3264..99173524 100644 --- a/simple-mind-map/src/themes/dark2.js +++ b/simple-mind-map/src/themes/dark2.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(75, 81, 78)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 119, 34)', // 背景颜色 backgroundColor: 'rgb(27, 31, 34)', // 根节点样式 @@ -42,5 +46,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(254, 199, 13)' } + }, + // 概要节点样式 + generalization: { + fillColor: 'transparent', + borderColor: 'rgb(255, 119, 34)', + borderWidth: 2, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(254, 199, 13)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/earthYellow.js b/simple-mind-map/src/themes/earthYellow.js index ec9323d7..618914a6 100644 --- a/simple-mind-map/src/themes/earthYellow.js +++ b/simple-mind-map/src/themes/earthYellow.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(191, 147, 115)', // 背景颜色 backgroundColor: 'rgb(251, 251, 251)', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: 'rgb(191, 147, 115)', @@ -36,5 +40,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(96, 73, 57)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(96, 73, 57)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/freshGreen.js b/simple-mind-map/src/themes/freshGreen.js index e903c788..bcd278d0 100644 --- a/simple-mind-map/src/themes/freshGreen.js +++ b/simple-mind-map/src/themes/freshGreen.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: '#333', // 背景颜色 backgroundColor: '#d1f6ec', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: '#1fb27d' @@ -22,4 +26,15 @@ export default merge(defaultTheme, { borderColor: 'transparent', borderWidth: 0 }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(57, 80, 96)', + borderWidth: 3, + borderDasharray: 'none', + } + } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/freshRed.js b/simple-mind-map/src/themes/freshRed.js index 3028d920..750749b4 100644 --- a/simple-mind-map/src/themes/freshRed.js +++ b/simple-mind-map/src/themes/freshRed.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(191, 115, 115)', // 背景颜色 backgroundColor: 'rgb(251, 251, 251)', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: 'rgb(191, 115, 115)', @@ -36,5 +40,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(96, 57, 57)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(96, 57, 57)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/gold.js b/simple-mind-map/src/themes/gold.js index 06125e21..5bc12013 100644 --- a/simple-mind-map/src/themes/gold.js +++ b/simple-mind-map/src/themes/gold.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(51, 56, 62)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(127, 93, 64)', // 背景颜色 backgroundColor: '#fff', // 根节点样式 @@ -42,5 +46,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(0, 192, 184)' } + }, + // 概要节点样式 + generalization: { + fillColor: 'rgb(127, 93, 64)', + borderColor: 'transparent', + color: 'rgb(255, 214, 175)', + active: { + borderColor: 'rgb(51, 56, 62)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/greenLeaf.js b/simple-mind-map/src/themes/greenLeaf.js index 4dd9fcb2..947e9bc5 100644 --- a/simple-mind-map/src/themes/greenLeaf.js +++ b/simple-mind-map/src/themes/greenLeaf.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(40, 193, 84)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(251, 158, 0)', // 背景颜色 backgroundColor: 'rgb(238, 255, 243)', // 根节点样式 @@ -42,5 +46,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(25, 193, 73)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'rgb(251, 158, 0)', + borderWidth: 2, + color: 'rgb(51, 51, 51)', + active: { + borderColor: 'rgb(25, 193, 73)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/index.js b/simple-mind-map/src/themes/index.js index 5210b91b..ba794ec5 100644 --- a/simple-mind-map/src/themes/index.js +++ b/simple-mind-map/src/themes/index.js @@ -8,6 +8,7 @@ import earthYellow from './earthYellow' import classic from './classic' import classic2 from './classic2' import classic3 from './classic3' +import classic4 from './classic4'; import dark from './dark'; import classicGreen from './classicGreen' import classicBlue from './classicBlue' @@ -31,6 +32,7 @@ export default { classic, classic2, classic3, + classic4, dark, classicGreen, classicBlue, diff --git a/simple-mind-map/src/themes/mint.js b/simple-mind-map/src/themes/mint.js index 9578c155..505e4ba1 100644 --- a/simple-mind-map/src/themes/mint.js +++ b/simple-mind-map/src/themes/mint.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(104, 204, 202)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(90, 206, 241)', // 背景颜色 backgroundColor: 'rgb(239, 255, 255)', // 根节点样式 @@ -40,5 +44,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(0, 192, 184)' } + }, + // 概要节点样式 + generalization: { + fillColor: 'rgb(90, 206, 241)', + borderColor: 'transparent', + color: '#fff', + active: { + borderColor: 'rgb(0, 192, 184)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/pinkGrape.js b/simple-mind-map/src/themes/pinkGrape.js index ae2d8a4b..efe2e181 100644 --- a/simple-mind-map/src/themes/pinkGrape.js +++ b/simple-mind-map/src/themes/pinkGrape.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(166, 101, 106)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#fff', // 背景颜色 backgroundColor: 'rgb(255, 208, 211)', // 根节点样式 @@ -41,5 +45,15 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(139, 109, 225)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'transparent', + color: '#222', + active: { + borderColor: 'rgb(139, 109, 225)', + borderWidth: 2, + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/romanticPurple.js b/simple-mind-map/src/themes/romanticPurple.js index 4cde9383..80ea550e 100644 --- a/simple-mind-map/src/themes/romanticPurple.js +++ b/simple-mind-map/src/themes/romanticPurple.js @@ -11,6 +11,10 @@ export default merge(defaultTheme, { lineColor: 'rgb(123, 115, 191)', // 背景颜色 backgroundColor: 'rgb(251, 251, 251)', + // 概要连线的粗细 + generalizationLineWidth: 1, + // 概要连线的颜色 + generalizationLineColor: '#333', // 根节点样式 root: { fillColor: 'rgb(123, 115, 191)', @@ -36,5 +40,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(61, 57, 96)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: '#333', + color: '#333', + active: { + borderColor: 'rgb(61, 57, 96)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/skyGreen.js b/simple-mind-map/src/themes/skyGreen.js index 74e17c87..bbc4ff88 100644 --- a/simple-mind-map/src/themes/skyGreen.js +++ b/simple-mind-map/src/themes/skyGreen.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: '#fff', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#fff', // 背景颜色 backgroundColor: 'rgb(80, 156, 170)', // 根节点样式 @@ -42,5 +46,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(251, 227, 188)' } + }, + // 概要节点样式 + generalization: { + fillColor: '#fff', + borderColor: 'transparent', + color: 'rgb(65, 89, 158)', + active: { + borderColor: 'rgb(251, 227, 188)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/themes/vitalityOrange.js b/simple-mind-map/src/themes/vitalityOrange.js index 6e4c8817..89651ebc 100644 --- a/simple-mind-map/src/themes/vitalityOrange.js +++ b/simple-mind-map/src/themes/vitalityOrange.js @@ -10,6 +10,10 @@ export default merge(defaultTheme, { // 连线的颜色 lineColor: 'rgb(254, 146, 0)', lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 222, 69)', // 背景颜色 backgroundColor: 'rgb(255, 246, 243)', // 根节点样式 @@ -42,5 +46,14 @@ export default merge(defaultTheme, { active: { borderColor: 'rgb(255, 112, 52)' } + }, + // 概要节点样式 + generalization: { + fillColor: 'rgb(255, 222, 69)', + borderColor: 'transparent', + color: 'rgb(51, 51, 51)', + active: { + borderColor: 'rgb(255, 112, 52)' + } } }) \ No newline at end of file diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index 45fa535b..7549a5d9 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -122,6 +122,11 @@ export const themeList = [ value: 'classic3', img: require('../assets/classic3.jpg') }, + { + name: '脑图经典4', + value: 'classic4', + img: require('../assets/classic4.jpg') + }, { name: '经典绿', value: 'classicGreen', diff --git a/web/src/config/index.js b/web/src/config/index.js index 46bbca2e..68399c03 100644 --- a/web/src/config/index.js +++ b/web/src/config/index.js @@ -214,6 +214,11 @@ export const shortcutKeyList = [ name: '插入同级节点', value: 'Enter' }, + { + icon: 'icongaikuozonglan', + name: '插入概要', + value: 'Shift + s' + }, { icon: 'iconzhankai', name: '展开/收起节点',