coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 18:37:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wanglin2 2022-09-30 14:44:40 +08:00
parent ca35b84308
commit 79ae876eeb
9 changed files with 233 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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

2
simple-mind-map/package.json
View File

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

2
simple-mind-map/src/Node.js
View File

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

113
simple-mind-map/src/layouts/LogicalStructure.js
View File

@ -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 [];
}

84
simple-mind-map/src/layouts/MindMap.js
View File

@ -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 [];
}

43
simple-mind-map/src/layouts/OrganizationStructure.js
View File

@ -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 [];
}

2
simple-mind-map/src/themes/default.js
View File

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

16
web/src/config/index.js
View File

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

28
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -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",