From 79ae876eebc40abb6bc1002de9ebc9e06f170cb7 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Fri, 30 Sep 2022 14:44:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=BB=E8=BE=91=E7=BB=93=E6=9E=84=E5=9B=BE?=
=?UTF-8?q?=E3=80=81=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE=E6=96=B0=E5=A2=9E?=
=?UTF-8?q?=E7=9B=B4=E7=BA=BF=E8=BF=9E=E6=8E=A5=E9=A3=8E=E6=A0=BC=E3=80=81?=
=?UTF-8?q?=E7=9B=B4=E8=BF=9E=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +-
simple-mind-map/package.json | 2 +-
simple-mind-map/src/Node.js | 2 +-
.../src/layouts/LogicalStructure.js | 113 +++++++++---------
simple-mind-map/src/layouts/MindMap.js | 84 ++++++++++++-
.../src/layouts/OrganizationStructure.js | 43 ++++++-
simple-mind-map/src/themes/default.js | 2 +
web/src/config/index.js | 16 +++
web/src/pages/Edit/components/BaseStyle.vue | 28 +++++
9 files changed, 233 insertions(+), 59 deletions(-)
diff --git a/README.md b/README.md
index c10c720e..50458b3f 100644
--- 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.9
```bash
npm i simple-mind-map
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 960626ea..90e74cf5 100644
--- 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": [
{
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index 08e06f71..fa143b23 100644
--- 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) => {
diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js
index 6ad16874..542fe081 100644
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/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
- let len = node.children.length
+ } = node
let marginX = this.getMarginX(node.layerIndex + 1)
- let s1 = marginX * 0.7
- 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
+ let s1 = (marginX - expandBtnSize) * 0.6
node.children.forEach((item, index) => {
- let y = item.top + item.height / 2
- let path = ''
- // 节点和垂直线相较
- if (item.left <= nodeLineMaxX && item.left + item.width >= nodeLineMaxX) {
- path = ''
- } 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
- }
+ 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)
})
- 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 [];
}
diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js
index 1b4c4fb6..fa57f52a 100644
--- 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 [];
}
diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js
index 481eac4c..a2795d7e 100644
--- 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 [];
}
diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js
index 78354999..e946c537 100644
--- 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,
// 概要连线的颜色
diff --git a/web/src/config/index.js b/web/src/config/index.js
index 7966a0e7..22e602b9 100644
--- 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 = [
{
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 799fca9e..2363e4d3 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -94,6 +94,30 @@
+
概要的连线
@@ -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",