逻辑结构图、思维导图新增直线连接风格、直连风格

README.md

@@ -101,7 +101,7 @@ npm run build
 
 # 安装
 
-> 当然仓库版本：0.2.9，当前npm版本：0.2.9
+> 当然仓库版本：0.2.10，当前npm版本：0.2.9
 
 ```bash
 npm i simple-mind-map

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/Node.js

@@ -872,7 +872,7 @@ class Node {
         this.renderer.layout.renderLine(this, this._lines, (line, node) => {
             // 添加样式
             this.styleLine(line, node)
-        })
+        }, this.style.getStyle('lineStyle', true))
         // 子级的连线也需要更新
         if (deep && this.children && this.children.length > 0) {
             this.children.forEach((item) => {

simple-mind-map/src/layouts/LogicalStructure.js

@@ -146,7 +146,23 @@ class LogicalStructure extends Base {
      * @Date: 2021-04-11 14:42:48 
      * @Desc: 绘制连线，连接该节点到其子节点
      */
-    renderLine(node, lines, style) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:30 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
         if (node.children.length <= 0) {
             return [];
         }
@@ -156,66 +172,55 @@ class LogicalStructure extends Base {
             width,
             height,
             expandBtnSize
-        } = node 
+        } = node
-        let len = node.children.length
         let marginX = this.getMarginX(node.layerIndex + 1)
-        let s1 = marginX * 0.7
+        let s1 = (marginX - expandBtnSize) * 0.6
-        let s2 = marginX * 0.3
-        let nodeLineY = top + height / 2
-        let nodeLineMaxX = left + width + s1
-        let miny = Infinity
-        let minNode = null
-        let maxy = -Infinity
-        let maxNode = null
         node.children.forEach((item, index) => {
-            let y = item.top + item.height / 2
+            let x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
-            let path = ''
+            let y1 = top + height / 2
-            // 节点和垂直线相较
+            let x2 = item.left
-            if (item.left <= nodeLineMaxX && item.left + item.width >= nodeLineMaxX) {
+            let y2 = item.top + item.height / 2
-                path = ''
+            let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${x2},${y2}`
-            } else if (item.left + item.width <= nodeLineMaxX) {
-                // 节点在垂直线左侧
-                path = `M ${nodeLineMaxX},${y} L ${item.left + item.width},${y}`
-            } else {
-                path = `M ${nodeLineMaxX},${y} L ${item.left},${y}`
-            }
-            if (y < miny) {
-                miny = y
-                minNode = item
-            }
-            if (y > maxy) {
-                maxy = y
-                maxNode = item
-            }
             lines[index].plot(path)
             style && style(lines[index], item)
         })
-        if (minNode.left <= nodeLineMaxX && minNode.left + minNode.width >= nodeLineMaxX && minNode.top <= nodeLineY) {
-            miny += minNode.height / 2
-        }
-        if (maxNode.left <= nodeLineMaxX && maxNode.left + maxNode.width >= nodeLineMaxX && maxNode.top >= nodeLineY) {
-            maxy -= maxNode.height / 2
-        }
-        miny = Math.min(miny, nodeLineY)
-        maxy = Math.max(maxy, nodeLineY)
-        // 父节点的横线
-        let line1 = this.draw.path()
-        node.style.line(line1)
-        expandBtnSize = len > 0 && !node.isRoot ? expandBtnSize : 0
-        line1.plot(`M ${left + width + expandBtnSize},${nodeLineY} L ${nodeLineMaxX},${nodeLineY}`)
-        node._lines.push(line1)
-        style && style(line1, node)
-        // 垂直线
-        if (len > 0) {
-            let line2 = this.draw.path()
-            node.style.line(line2)
-            line2.plot(`M ${nodeLineMaxX},${miny} L ${nodeLineMaxX},${maxy}`)
-            node._lines.push(line2)
-            style && style(line2, node)
-        }
     }
 
-    renderLine2(node, lines, style) {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+    renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:43 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
         if (node.children.length <= 0) {
             return [];
         }

simple-mind-map/src/layouts/MindMap.js

@@ -182,7 +182,89 @@ class MindMap extends Base {
      * @Date: 2021-04-11 14:42:48 
      * @Desc: 绘制连线，连接该节点到其子节点
      */
-    renderLine(node, lines, style) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:47 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+            let x1 = 0
+            let _s = 0
+            if (item.dir === 'left') {
+                _s = -s1
+                x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+            } else {
+                _s = s1
+                x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+            }
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${x2},${y2}` 
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:56 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
         if (node.children.length <= 0) {
             return [];
         }

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -147,7 +147,48 @@ class OrganizationStructure extends Base {
      * @Date: 2021-04-11 14:42:48 
      * @Desc: 绘制连线，连接该节点到其子节点
      */
-    renderLine(node, lines, style) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+        } = node
+        let x1 = left + width / 2
+        let y1 = top + height
+        node.children.forEach((item, index) => {
+            let x2 = item.left + item.width / 2
+            let y2 = item.top
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:39:07 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
         if (node.children.length <= 0) {
             return [];
         }

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

@@ -19,6 +19,8 @@ export default {
     lineColor: '#549688',
     // 连线样式
     lineDasharray: 'none',
+    // 连线风格
+    lineStyle: 'straight',// 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
     // 概要连线的粗细
     generalizationLineWidth: 1,
     // 概要连线的颜色

web/src/config/index.js

@@ -130,6 +130,22 @@ export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 // 线宽
 export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
+// 连线风格
+export const lineStyleList = [
+    {
+        name: '直线',
+        value: 'straight'
+    },
+    {
+        name: '曲线',
+        value: 'curve'
+    },
+    {
+        name: '直连',
+        value: 'direct'
+    }
+]
+
 // 图片重复方式
 export const backgroundRepeatList = [
     {

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

@@ -94,6 +94,30 @@
           </el-select>
         </div>
       </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">风格</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.lineStyle"
+            placeholder=""
+            @change="
+              (value) => {
+                update('lineStyle', value);
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineStyleList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <!-- 概要连线 -->
       <div class="title noTop">概要的连线</div>
       <div class="row">
@@ -267,6 +291,7 @@ import Sidebar from "./Sidebar";
 import Color from "./Color";
 import {
   lineWidthList,
+  lineStyleList,
   backgroundRepeatList
 } from "@/config";
 import ImgUpload from "@/components/ImgUpload";
@@ -296,6 +321,7 @@ export default {
   data() {
     return {
       lineWidthList,
+      lineStyleList,
       backgroundRepeatList,
       activeTab: "color",
       marginActiveTab: "second",
@@ -303,6 +329,7 @@ export default {
         backgroundColor: "",
         lineColor: "",
         lineWidth: "",
+        lineStyle: "",
         generalizationLineWidth: "",
         generalizationLineColor: "",
         paddingX: 0,
@@ -336,6 +363,7 @@ export default {
       [
         "backgroundColor",
         "lineWidth",
+        "lineStyle",
         "lineColor",
         "generalizationLineWidth",
         "generalizationLineColor",