修改文档

打包
逻辑结构图、思维导图新增直线连接风格、直连风格
2026-02-19 06:48:27 +08:00 · 2022-09-30 22:16:27 +08:00 · 2022-09-30 14:48:08 +08:00 · 2022-09-30 14:44:40 +08:00 · 2022-09-25 22:07:21 +08:00
10 changed files with 250 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -101,7 +101,7 @@ npm run build

 # 安装

-> 当然仓库版本：0.2.9，当前npm版本：0.2.9
+> 当然仓库版本：0.2.10，当前npm版本：0.2.10

 ```bash
 npm i simple-mind-map
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.9dca0f90.js" rel="prefetch"><link href="dist/css/app.891a59ac.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.597033a2.css" rel="preload" as="style"><link href="dist/js/app.6ae41667.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.9c26d9dc.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.597033a2.css" rel="stylesheet"><link href="dist/css/app.891a59ac.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.9c26d9dc.js"></script><script src="dist/js/app.6ae41667.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.f9570665.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.db7bd644.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d724da21.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.f9570665.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d724da21.js"></script><script src="dist/js/app.db7bd644.js"></script></body></html>
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.9",
+  "version": "0.2.10",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/Node.js
+++ b/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) => {
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -146,7 +146,81 @@ 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 [];
+        }
+        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 = node.layerIndex === 0 ? left + width : 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 ${x1 + s1},${y1} L ${x1 + s1},${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 : 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 [];
        }
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/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 [];
        }
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/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 [];
        }
--- a/simple-mind-map/src/themes/default.js
+++ b/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,
    // 概要连线的颜色
--- a/web/src/config/index.js
+++ b/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 = [
    {
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/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",
Author	SHA1	Message	Date
wanglin2	5dfa215538	修改文档	2022-09-30 22:16:27 +08:00
wanglin25	d90013da71	打包	2022-09-30 14:48:08 +08:00
wanglin25	b3b74323f7	逻辑结构图、思维导图新增直线连接风格、直连风格	2022-09-30 14:44:40 +08:00
wanglin2	f9000ea478	逻辑结构图和思维导图支持直线连接线开发中	2022-09-25 22:07:21 +08:00