节点支持自定义线条样式

simple-mind-map/src/Drag.js

@@ -189,7 +189,7 @@ class Drag extends Base {
             // 连接线
             this.line = this.draw.path()
             this.line.opacity(0.5)
-            this.node.style.line(this.line)
+            this.node.styleLine(this.line)
             // 同级位置占位符
             this.placeholder = this.draw.rect().fill({
                 color: this.node.style.merge('lineColor', true)

simple-mind-map/src/Node.js

@@ -723,6 +723,8 @@ class Node {
      * @Desc: 更新节点
      */
     update(layout = false) {
+        // 连线
+        this.renderLine()
         if (!this.group) {
             return
         }
@@ -750,8 +752,6 @@ class Node {
      * @Desc: 递归渲染 
      */
     render() {
-        // 连线
-        this.renderLine()
         // 节点
         if (this.initRender) {
             this.initRender = false
@@ -864,7 +864,24 @@ class Node {
         this.renderer.layout.renderLine(this, this._lines)
         // 添加样式
         this._lines.forEach((line) => {
-            this.style.line(line)
+            this.styleLine(line)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:41:29 
+     * @Desc: 设置连线样式 
+     */
+    styleLine(line) {
+        let width = this.getSelfInhertStyle('lineWidth') || this.getStyle('lineWidth', true)
+        let color = this.getSelfInhertStyle('lineColor') || this.getStyle('lineColor', true)
+        let dasharray = this.getSelfInhertStyle('lineDasharray') || this.getStyle('lineDasharray', true)
+        this.style.line(line, {
+            width,
+            color,
+            dasharray,
         })
     }
 
@@ -1151,6 +1168,40 @@ class Node {
         return v === undefined ? '' : v
     }
 
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:15 
+     * @Desc: 获取自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.style.getSelfStyle(prop)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:26 
+     * @Desc:  获取父级的自定义样式
+     */
+    getParentSelfStyle(prop) {
+        if (this.parent) {
+            return this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop)
+        }
+        return null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:15:30 
+     * @Desc: 获取自身可继承样式 
+     */
+    getSelfInhertStyle(prop) {
+        return this.getSelfStyle(prop) // 自身
+        || this.getParentSelfStyle(prop) // 父级
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-05-04 22:18:07 

simple-mind-map/src/Style.js

@@ -66,7 +66,7 @@ class Style {
             }
         }
         // 优先使用节点本身的样式
-        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
+        return this.getSelfStyle(prop) !== undefined ? this.getSelfStyle(prop) : defaultConfig[prop]
     }
 
     /** 
@@ -79,6 +79,16 @@ class Style {
         return this.merge(prop, root, isActive)
     }
 
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:09:39 
+     * @Desc: 获取自身自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.ctx.nodeData.data[prop]
+    }
+
     /** 
      * @Author: 王林 
      * @Date: 2021-04-11 10:12:56 
@@ -173,8 +183,8 @@ class Style {
      * @Date: 2021-04-11 14:50:49 
      * @Desc: 连线 
      */
-    line(node) {
+    line(node, { width, color, dasharray } = {}) {
-        node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' })
+        node.stroke({ width, color, dasharray }).fill({ color: 'none' })
     }
 
     /** 

simple-mind-map/src/themes/default.js

@@ -17,6 +17,8 @@ export default {
     lineWidth: 1,
     // 连线的颜色
     lineColor: '#549688',
+    // 连线样式
+    lineDasharray: 'none',
     // 概要连线的粗细
     generalizationLineWidth: 1,
     // 概要连线的颜色

web/src/pages/Edit/components/Style.vue

@@ -143,7 +143,7 @@
             </el-popover>
           </div>
           <div class="rowItem">
-            <span class="name" v-popover:popover5>样式</span>
+            <span class="name">样式</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -233,7 +233,7 @@
             >
               <el-option
                 v-for="item in shapeList"
-                :key="item"
+                :key="item.value"
                 :label="item.name"
                 :value="item.value"
               >
@@ -241,6 +241,65 @@
             </el-select>
           </div>
         </div>
+        <!-- 线条 -->
+        <div class="title">线条</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">颜色</span>
+            <span
+              class="block"
+              v-popover:popover5
+              :style="{ width: '80px', backgroundColor: style.lineColor }"
+              :class="{ disabled: checkDisabled('lineColor') }"
+            ></span>
+            <el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')">
+              <Color
+                :color="style.lineColor"
+                @change="changeLineColor"
+              ></Color>
+            </el-popover>
+          </div>
+          <div class="rowItem">
+            <span class="name">样式</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineDasharray"
+              placeholder=""
+              :disabled="checkDisabled('lineDasharray')"
+              @change="update('lineDasharray')"
+            >
+              <el-option
+                v-for="item in borderDasharrayList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">宽度</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineWidth"
+              placeholder=""
+              :disabled="checkDisabled('lineWidth')"
+              @change="update('lineWidth')"
+            >
+              <el-option
+                v-for="item in borderWidthList"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
         <!-- 节点内边距 -->
         <div class="title noTop">节点内边距</div>
         <div class="row">
@@ -323,6 +382,9 @@ export default {
         fillColor: "",
         borderDasharray: "",
         borderRadius: "",
+        lineColor: "",
+        lineDasharray: "",
+        lineWidth: "",
       },
     };
   },
@@ -382,6 +444,9 @@ export default {
         "fillColor",
         "borderDasharray",
         "borderRadius",
+        "lineColor",
+        "lineDasharray",
+        "lineWidth",
       ].forEach((item) => {
         this.style[item] = this.activeNodes[0].getStyle(
           item,
@@ -450,6 +515,16 @@ export default {
       this.update("borderColor");
     },
 
+    /** 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 10:18:15 
+     * @Desc: 修改线条颜色 
+     */
+    changeLineColor(color) {
+      this.style.lineColor = color;
+      this.update("lineColor");
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-05-05 10:18:59