diff --git a/simple-mind-map/full.js b/simple-mind-map/full.js index 51e1761d..e2f7a165 100644 --- a/simple-mind-map/full.js +++ b/simple-mind-map/full.js @@ -15,6 +15,7 @@ import Search from './src/plugins/Search.js' import Painter from './src/plugins/Painter.js' import Scrollbar from './src/plugins/Scrollbar.js' import Formula from './src/plugins/Formula.js' +import RainbowLines from './src/plugins/RainbowLines.js' import xmind from './src/parse/xmind.js' import markdown from './src/parse/markdown.js' import icons from './src/svg/icons.js' @@ -46,5 +47,6 @@ MindMap.usePlugin(MiniMap) .usePlugin(Painter) .usePlugin(Scrollbar) .usePlugin(Formula) + .usePlugin(RainbowLines) export default MindMap diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index da96e73f..fa1f8549 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -291,5 +291,21 @@ export const defaultOpt = { beforeCooperateUpdate: null, // 快捷键操作即将执行前的生命周期函数,返回true可以阻止操作执行 // 函数接收两个参数:key(快捷键)、activeNodeList(当前激活的节点列表) - beforeShortcutRun: null + beforeShortcutRun: null, + // 彩虹线条配置,需要先注册RainbowLines插件 + rainbowLinesConfig: { + open: false,// 是否开启彩虹线条 + colorsList: []// 自定义彩虹线条的颜色列表,如果不设置,会使用默认颜色列表 + /* + [ + '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)' + ] + */ + } } diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index 5333aad9..09166261 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -916,6 +916,7 @@ class Node { childNode.getStyle('lineWidth', true) const color = childNode.getSelfInhertStyle('lineColor') || + this.getRainbowLineColor(childNode) || childNode.getStyle('lineColor', true) const dasharray = childNode.getSelfInhertStyle('lineDasharray') || @@ -932,6 +933,13 @@ class Node { ) } + // 获取彩虹线条颜色 + getRainbowLineColor(node) { + return this.mindMap.rainbowLines + ? this.mindMap.rainbowLines.getNodeColor(node) + : '' + } + // 移除连线 removeLine() { this._lines.forEach(line => { diff --git a/simple-mind-map/src/plugins/RainbowLines.js b/simple-mind-map/src/plugins/RainbowLines.js new file mode 100644 index 00000000..7e426612 --- /dev/null +++ b/simple-mind-map/src/plugins/RainbowLines.js @@ -0,0 +1,88 @@ +import { walk, getNodeDataIndex } from '../utils/index' + +const defaultColorsList = [ + '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)' +] + +// 彩虹线条插件 +class RainbowLines { + constructor({ mindMap }) { + this.mindMap = mindMap + } + + // 更新彩虹线条配置 + updateRainLinesConfig(config = {}) { + const newConfig = this.mindMap.opt.rainbowLinesConfig || {} + newConfig.open = !!config.open + newConfig.colorsList = Array.isArray(config.colorsList) + ? config.colorsList + : [] + // 如果开启彩虹线条,那么先移除所有节点的自定义连线颜色配置 + if (this.mindMap.opt.rainbowLinesConfig.open) { + this.removeNodeLineColor() + } + this.mindMap.render() + } + + // 删除所有节点的连线颜色 + removeNodeLineColor() { + const tree = this.mindMap.renderer.renderTree + walk( + tree, + null, + cur => { + delete cur.data.lineColor + }, + null, + true + ) + this.mindMap.command.addHistory() + } + + // 获取一个节点的第二层级的祖先节点 + getSecondLayerAncestor(node) { + if (node.layerIndex === 1) { + return node + } else { + let res = null + let parent = node.parent + while (parent) { + if (parent.layerIndex === 1) { + return parent + } + parent = parent.parent + } + return res + } + } + + // 获取颜色列表 + getColorsList() { + const { rainbowLinesConfig } = this.mindMap.opt + return rainbowLinesConfig && + Array.isArray(rainbowLinesConfig.colorsList) && + rainbowLinesConfig.colorsList.length > 0 + ? rainbowLinesConfig.colorsList + : [...defaultColorsList] + } + + // 获取一个节点的彩虹线条颜色 + getNodeColor(node) { + const { rainbowLinesConfig } = this.mindMap.opt + if (!rainbowLinesConfig || !rainbowLinesConfig.open) return '' + const ancestor = this.getSecondLayerAncestor(node) + const index = getNodeDataIndex(ancestor) + const colorsList = this.getColorsList() + return colorsList[index % colorsList.length] + } +} + +RainbowLines.instanceName = 'rainbowLines' + +export default RainbowLines