Feat：新增彩虹线条插件

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

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

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 => {

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