diff --git a/web/src/config/constant.js b/web/src/config/constant.js
index fa9e22e1..d47d5c48 100644
--- a/web/src/config/constant.js
+++ b/web/src/config/constant.js
@@ -57,7 +57,7 @@ export const themeMap = {
dark4: require('../assets/img/themes/dark4.jpg'),
cactus: require('../assets/img/themes/cactus.jpg'),
classic6: require('../assets/img/themes/classic6.jpg'),
- classic7: require('../assets/img/themes/classic7.jpg'),
+ classic7: require('../assets/img/themes/classic7.jpg')
}
// 公式列表
@@ -111,3 +111,82 @@ export const supportRootLineKeepSameInCurveLayouts = [
'logicalStructure',
'mindMap'
]
+
+// 彩虹线条配置
+export const rainbowLinesOptions = [
+ {
+ value: 'close'
+ },
+ {
+ value: 'colors1',
+ list: [
+ 'rgb(255, 213, 73)',
+ 'rgb(255, 136, 126)',
+ 'rgb(107, 225, 141)',
+ 'rgb(151, 171, 255)',
+ 'rgb(129, 220, 242)',
+ 'rgb(255, 163, 125)',
+ 'rgb(152, 132, 234)'
+ ]
+ },
+ {
+ value: 'colors2',
+ list: [
+ 'rgb(248, 93, 93)',
+ 'rgb(255, 151, 84)',
+ 'rgb(255, 214, 69)',
+ 'rgb(73, 205, 140)',
+ 'rgb(64, 192, 255)',
+ 'rgb(84, 110, 214)',
+ 'rgb(164, 93, 220)'
+ ]
+ },
+ {
+ value: 'colors3',
+ list: [
+ 'rgb(140, 240, 231)',
+ 'rgb(74, 210, 255)',
+ 'rgb(65, 168, 243)',
+ 'rgb(49, 128, 205)',
+ 'rgb(188, 226, 132)',
+ 'rgb(113, 215, 123)',
+ 'rgb(120, 191, 109)'
+ ]
+ },
+ {
+ value: 'colors4',
+ list: [
+ 'rgb(169, 98, 99)',
+ 'rgb(245, 125, 123)',
+ 'rgb(254, 183, 168)',
+ 'rgb(251, 218, 171)',
+ 'rgb(138, 163, 181)',
+ 'rgb(131, 127, 161)',
+ 'rgb(84, 83, 140)'
+ ]
+ },
+ {
+ value: 'colors5',
+ list: [
+ 'rgb(255, 229, 142)',
+ 'rgb(254, 158, 41)',
+ 'rgb(248, 119, 44)',
+ 'rgb(232, 82, 80)',
+ 'rgb(182, 66, 98)',
+ 'rgb(99, 54, 99)',
+ 'rgb(65, 40, 82)'
+ ]
+ },
+ {
+ value: 'colors6',
+ list: [
+ 'rgb(171, 227, 209)',
+ 'rgb(107, 201, 196)',
+ 'rgb(55, 170, 169)',
+ 'rgb(18, 135, 131)',
+ 'rgb(74, 139, 166)',
+ 'rgb(75, 105, 150)',
+ 'rgb(57, 75, 133)'
+ ]
+ }
+]
diff --git a/web/src/config/zh.js b/web/src/config/zh.js
index c9ce9177..9daaef15 100644
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -425,7 +425,7 @@ export const shortcutKeyList = [
icon: 'icondodeparent',
name: '上移一个层级',
value: 'Shift + Tab'
- },
+ }
]
}
]
@@ -582,4 +582,4 @@ export const downTypeList = [
icon: 'iconTXT',
desc: '纯文本文件'
}
-]
+]
\ No newline at end of file
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 28b40d6c..7f48c5dc 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -62,7 +62,9 @@ export default {
isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
rootLineStartPos: 'Root line start pos',
center: 'Center',
- right: 'Right'
+ right: 'Right',
+ rainbowLines: 'Rainbow lines',
+ notUseRainbowLines: 'Not use rainbow lines'
},
color: {
moreColor: 'More color'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index fa7458c6..09ca7cad 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -62,7 +62,9 @@ export default {
isUseHandDrawnLikeStyle: '是否开启手绘风格',
rootLineStartPos: '根节点连线起始位置',
center: '中心',
- right: '右侧'
+ right: '右侧',
+ rainbowLines: '彩虹线条',
+ notUseRainbowLines: '不使用彩虹线条'
},
color: {
moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 3fc5be0c..25265f29 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -273,6 +273,50 @@
>
+
+ {{ $t('baseStyle.rainbowLines') }}
+
+
+
+
+
+
+
+
+
{{
+ $t('baseStyle.notUseRainbowLines')
+ }}
+
+
+
+
+
+
{{ $t('baseStyle.notUseRainbowLines') }}
+
+
+
{{ $t('baseStyle.lineOfOutline') }}
@@ -914,7 +958,8 @@ import {
supportLineStyleLayoutsMap,
supportLineRadiusLayouts,
supportNodeUseLineStyleLayouts,
- supportRootLineKeepSameInCurveLayouts
+ supportRootLineKeepSameInCurveLayouts,
+ rainbowLinesOptions
} from '@/config/constant'
/**
@@ -940,6 +985,7 @@ export default {
},
data() {
return {
+ rainbowLinesOptions,
lineWidthList,
fontSizeList,
activeTab: 'color',
@@ -994,6 +1040,8 @@ export default {
fontSize: 1
}
},
+ rainbowLinesPopoverVisible: false,
+ curRainbowLineColorList: null,
updateWatermarkTimer: null,
enableNodeRichText: true,
localConfigs: {
@@ -1069,6 +1117,7 @@ export default {
this.initStyle()
this.initConfig()
this.initWatermark()
+ this.initRainbowLines()
this.currentLayout = this.mindMap.getLayout()
} else {
this.$refs.sidebar.show = false
@@ -1180,6 +1229,16 @@ export default {
this.watermarkConfig.textStyle = { ...config.textStyle }
},
+ // 初始化彩虹线条配置
+ initRainbowLines() {
+ const config = this.mindMap.getConfig('rainbowLinesConfig') || {}
+ this.curRainbowLineColorList = config.open
+ ? this.mindMap.rainbowLines
+ ? this.mindMap.rainbowLines.getColorsList()
+ : null
+ : null
+ },
+
/**
* @Author: 王林
* @Date: 2021-07-03 22:27:32
@@ -1245,6 +1304,29 @@ export default {
}, 300)
},
+ // 更新彩虹线条配置
+ updateRainbowLinesConfig(item) {
+ this.rainbowLinesPopoverVisible = false
+ this.curRainbowLineColorList = item.list || null
+ this.data.config = this.data.config || {}
+ let newConfig = null
+ if (item.list) {
+ newConfig = {
+ open: true,
+ colorsList: item.list
+ }
+ } else {
+ newConfig = {
+ open: false
+ }
+ }
+ this.data.config.rainbowLinesConfig = newConfig
+ this.mindMap.rainbowLines.updateRainLinesConfig(newConfig)
+ storeConfig({
+ config: this.data.config
+ })
+ },
+
// 设置margin
updateMargin(type, value) {
this.style[type] = value
@@ -1303,7 +1385,8 @@ export default {
.row {
.rowItem {
- .name {
+ .name,
+ .curRainbowLine {
color: hsla(0, 0%, 100%, 0.6);
}
}
@@ -1365,6 +1448,17 @@ export default {
border-radius: 4px;
cursor: pointer;
}
+
+ .curRainbowLine {
+ height: 24px;
+ border: 1px solid #dcdfe6;
+ font-size: 12px;
+ width: 240px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
}
.styleBtn {
@@ -1437,4 +1531,43 @@ export default {
}
}
}
+
+.rainbowLinesOptionsBox {
+ width: 200px;
+
+ &.isDark {
+ .optionItem {
+ color: hsla(0, 0%, 100%, 0.6);
+
+ &:hover {
+ background-color: hsla(0, 0%, 100%, 0.05);
+ }
+ }
+ }
+
+ .optionItem {
+ width: 100%;
+ height: 30px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ background-color: #f5f7fa;
+ }
+ }
+}
+
+.colorsBar {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+
+ .colorItem {
+ flex: 1;
+ height: 15px;
+ }
+}
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 0fae330d..205b8208 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -45,6 +45,7 @@ import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
import Painter from 'simple-mind-map/src/plugins/Painter.js'
import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
+import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js'
// 协同编辑插件
// import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
// 手绘风格插件，该插件为付费插件，详情请查看开发文档
@@ -98,6 +99,7 @@ MindMap.usePlugin(MiniMap)
.usePlugin(SearchPlugin)
.usePlugin(Painter)
.usePlugin(Formula)
+ .usePlugin(RainbowLines)
// .usePlugin(Cooperate) // 协同插件
// 注册自定义主题