diff --git a/simple-mind-map/src/Drag.js b/simple-mind-map/src/Drag.js
index 5c8925d6..dc6a1334 100644
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -274,7 +274,8 @@ class Drag extends Base {
}
}
// 检测兄弟节点位置
- if (!this.prevNode && !this.nextNode && !node.isRoot) {// && this.node.isBrother(node)
+ if (!this.prevNode && !this.nextNode && !node.isRoot) {
+ // && this.node.isBrother(node)
if (left <= checkRight && right >= this.cloneNodeLeft) {
if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
this.prevNode = node
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index 5d8d42d8..c47e13da 100644
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -584,7 +584,10 @@ class Node {
* @Desc: 获取节点形状
*/
getShape() {
- return this.style.getStyle('shape', false, false)
+ // 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
+ return this.themeConfig.nodeUseLineStyle
+ ? 'rectangle'
+ : this.style.getStyle('shape', false, false)
}
/**
@@ -770,12 +773,28 @@ class Node {
}
this.renderGeneralization()
let t = this.group.transform()
+ // 节点使用横线风格，有两种结构需要调整节点的位置
+ let nodeUseLineStyleOffset = 0
+ if (
+ ['logicalStructure', 'mindMap'].includes(this.mindMap.opt.layout) &&
+ !this.isRoot &&
+ !this.isGeneralization &&
+ this.themeConfig.nodeUseLineStyle
+ ) {
+ nodeUseLineStyleOffset = this.height / 2
+ }
if (!layout) {
this.group
.animate(300)
- .translate(this.left - t.translateX, this.top - t.translateY)
+ .translate(
+ this.left - t.translateX,
+ this.top - t.translateY - nodeUseLineStyleOffset
+ )
} else {
- this.group.translate(this.left - t.translateX, this.top - t.translateY)
+ this.group.translate(
+ this.left - t.translateX,
+ this.top - t.translateY - nodeUseLineStyleOffset
+ )
}
}
diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js
index b31b0195..db99336a 100644
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -561,7 +561,6 @@ class Render {
nodeBorthers.splice(nodeIndex, 1)
nodeParent.nodeData.children.splice(nodeIndex, 1)
-
// 目标节点
let existParent = exist.parent
let existBorthers = existParent.children
@@ -598,7 +597,6 @@ class Render {
nodeBorthers.splice(nodeIndex, 1)
nodeParent.nodeData.children.splice(nodeIndex, 1)
-
// 目标节点
let existParent = exist.parent
let existBorthers = existParent.children
diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js
index 9d2dba3b..cf6d283e 100644
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -115,15 +115,23 @@ class Style {
* @Desc: 矩形外的其他形状
*/
shape(node) {
- node
- .fill({
- color: this.merge('fillColor')
- })
- .stroke({
- color: this.merge('borderColor'),
- width: this.merge('borderWidth'),
- dasharray: this.merge('borderDasharray')
- })
+ node.fill({
+ color: this.merge('fillColor')
+ })
+ // 节点使用横线样式，不需要渲染非激活状态的边框样式
+ if (
+ !this.ctx.isRoot &&
+ !this.ctx.isGeneralization &&
+ this.themeConfig.nodeUseLineStyle &&
+ !this.ctx.nodeData.data.isActive
+ ) {
+ return
+ }
+ node.stroke({
+ color: this.merge('borderColor'),
+ width: this.merge('borderWidth'),
+ dasharray: this.merge('borderDasharray')
+ })
}
/**
diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js
index 46ae5e65..dc20cfb0 100644
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -299,9 +299,13 @@ class CatalogOrganization extends Base {
if (x2 > maxx) {
maxx = x2
}
- let path = `M ${x2},${y1 + s1} L ${x2},${
- y1 + s1 > y2 ? y2 + item.height : y2
- }`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+ : ''
+ let path =
+ `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
+ nodeUseLineStylePath
// 竖线
lines[index].plot(path)
style && style(lines[index], item)
@@ -365,6 +369,13 @@ class CatalogOrganization extends Base {
}
path = `M ${x2},${y2} L ${_left},${y2}`
}
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${_left},${y2 - item.height / 2} L ${_left},${
+ y2 + item.height / 2
+ }`
+ : ''
+ path += nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js
index d4e9322e..1940b977 100644
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -209,9 +209,13 @@ class LogicalStructure extends Base {
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}`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+ ? item.width
+ : 0
+ let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
+ x2 + nodeUseLineStyleOffset
+ },${y2}`
lines[index].plot(path)
style && style(lines[index], item)
})
@@ -234,7 +238,11 @@ class LogicalStructure extends Base {
let y1 = top + height / 2
let x2 = item.left
let y2 = item.top + item.height / 2
- let path = `M ${x1},${y1} L ${x2},${y2}`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${item.left + item.width},${y2}`
+ : ''
+ let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@@ -258,10 +266,14 @@ class LogicalStructure extends Base {
let x2 = item.left
let y2 = item.top + item.height / 2
let path = ''
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${item.left + item.width},${y2}`
+ : ''
if (node.isRoot) {
- path = this.quadraticCurvePath(x1, y1, x2, y2)
+ path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else {
- path = this.cubicBezierPath(x1, y1, x2, y2)
+ path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
}
lines[index].plot(path)
style && style(lines[index], item)
@@ -276,7 +288,14 @@ class LogicalStructure extends Base {
renderExpandBtn(node, btn) {
let { width, height } = node
let { translateX, translateY } = btn.transform()
- btn.translate(width - translateX, height / 2 - translateY)
+ // 节点使用横线风格，需要调整展开收起按钮位置
+ let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+ ? height / 2
+ : 0
+ btn.translate(
+ width - translateX,
+ height / 2 - translateY + nodeUseLineStyleOffset
+ )
}
/**
diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js
index a338c644..e188da27 100644
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -245,9 +245,14 @@ class MindMap extends Base {
node.children.forEach((item, index) => {
let x1 = 0
let _s = 0
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+ ? item.width
+ : 0
if (item.dir === 'left') {
_s = -s1
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+ nodeUseLineStyleOffset = -nodeUseLineStyleOffset
} else {
_s = s1
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
@@ -255,9 +260,9 @@ class MindMap extends Base {
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 ${x1 + _s},${y1} L ${
- x1 + _s
- },${y2} L ${x2},${y2}`
+ let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
+ x2 + nodeUseLineStyleOffset
+ },${y2}`
lines[index].plot(path)
style && style(lines[index], item)
})
@@ -284,7 +289,16 @@ class MindMap extends Base {
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}`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = ''
+ if (this.mindMap.themeConfig.nodeUseLineStyle) {
+ if (item.dir === 'left') {
+ nodeUseLineStylePath = ` L ${item.left},${y2}`
+ } else {
+ nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+ }
+ }
+ let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@@ -312,10 +326,19 @@ class MindMap extends Base {
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = ''
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = ''
+ if (this.mindMap.themeConfig.nodeUseLineStyle) {
+ if (item.dir === 'left') {
+ nodeUseLineStylePath = ` L ${item.left},${y2}`
+ } else {
+ nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+ }
+ }
if (node.isRoot) {
- path = this.quadraticCurvePath(x1, y1, x2, y2)
+ path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else {
- path = this.cubicBezierPath(x1, y1, x2, y2)
+ path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
}
lines[index].plot(path)
style && style(lines[index], item)
@@ -330,8 +353,12 @@ class MindMap extends Base {
renderExpandBtn(node, btn) {
let { width, height, expandBtnSize } = node
let { translateX, translateY } = btn.transform()
+ // 节点使用横线风格，需要调整展开收起按钮位置
+ let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+ ? height / 2
+ : 0
let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
- let y = height / 2 - translateY
+ let y = height / 2 - translateY + nodeUseLineStyleOffset
btn.translate(x, y)
}
diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js
index 4e405dd5..51bffe16 100644
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -205,7 +205,11 @@ class OrganizationStructure extends Base {
node.children.forEach((item, index) => {
let x2 = item.left + item.width / 2
let y2 = item.top
- let path = `M ${x1},${y1} L ${x2},${y2}`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+ : ''
+ let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@@ -238,7 +242,11 @@ class OrganizationStructure extends Base {
if (x2 > maxx) {
maxx = x2
}
- let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+ // 节点使用横线风格，需要额外渲染横线
+ let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+ ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+ : ''
+ let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js
index 7170e033..7d6c94d5 100644
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -35,6 +35,8 @@ export default {
backgroundImage: 'none',
// 背景重复
backgroundRepeat: 'no-repeat',
+ // 节点使用横线样式
+ nodeUseLineStyle: false,
// 根节点样式
root: {
shape: 'rectangle',
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 748b4c52..163d06ea 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -18,7 +18,9 @@ export default {
icon: 'Icon',
size: 'Size',
level2Node: 'Level2 node',
- belowLevel2Node: 'Below level2 node'
+ belowLevel2Node: 'Below level2 node',
+ nodeBorderType: 'Node border style',
+ nodeUseLineStyle: 'Use only has bottom border style'
},
color: {
moreColor: 'More color'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 3253f74e..c507f547 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -18,7 +18,9 @@ export default {
icon: '图标',
size: '大小',
level2Node: '二级节点',
- belowLevel2Node: '三级及以下节点'
+ belowLevel2Node: '三级及以下节点',
+ nodeBorderType: '节点边框风格',
+ nodeUseLineStyle: '是否使用只有底边框的风格'
},
color: {
moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 14b0f8ee..ac526b60 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -162,6 +162,17 @@
+
+ {{ $t('baseStyle.nodeBorderType') }}
+
+
+ {{ $t('baseStyle.nodeUseLineStyle') }}
+
+
{{ $t('baseStyle.nodePadding') }}
@@ -341,7 +352,8 @@ export default {
backgroundImage: '',
backgroundRepeat: 'no-repeat',
marginX: 0,
- marginY: 0
+ marginY: 0,
+ nodeUseLineStyle: false
}
}
},
@@ -385,7 +397,8 @@ export default {
'imgMaxHeight',
'iconSize',
'backgroundImage',
- 'backgroundRepeat'
+ 'backgroundRepeat',
+ 'nodeUseLineStyle'
].forEach(key => {
this.style[key] = this.mindMap.getThemeConfig(key)
if (key === 'backgroundImage' && this.style[key] === 'none') {