新增支持节点横线风格

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

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
+      )
     }
   }
 

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

simple-mind-map/src/Style.js

@@ -115,15 +115,23 @@ class Style {
    * @Desc:  矩形外的其他形状
    */
   shape(node) {
-    node
+    node.fill({
-      .fill({
+      color: this.merge('fillColor')
-        color: this.merge('fillColor')
+    })
-      })
+    // 节点使用横线样式，不需要渲染非激活状态的边框样式
-      .stroke({
+    if (
-        color: this.merge('borderColor'),
+      !this.ctx.isRoot &&
-        width: this.merge('borderWidth'),
+      !this.ctx.isGeneralization &&
-        dasharray: this.merge('borderDasharray')
+      this.themeConfig.nodeUseLineStyle &&
-      })
+      !this.ctx.nodeData.data.isActive
+    ) {
+      return
+    }
+    node.stroke({
+      color: this.merge('borderColor'),
+      width: this.merge('borderWidth'),
+      dasharray: this.merge('borderDasharray')
+    })
   }
 
   /**

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)
       })

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
+      let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
-      },${y2} L ${x2},${y2}`
+        ? 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
+    )
   }
 
   /**

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 ${
+      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
-        x1 + _s
+        x2 + nodeUseLineStyleOffset
-      },${y2} L ${x2},${y2}`
+      },${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)
   }
 

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)
     })

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

@@ -35,6 +35,8 @@ export default {
   backgroundImage: 'none',
   // 背景重复
   backgroundRepeat: 'no-repeat',
+  // 节点使用横线样式
+  nodeUseLineStyle: false,
   // 根节点样式
   root: {
     shape: 'rectangle',

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'

web/src/lang/zh_cn.js

@@ -18,7 +18,9 @@ export default {
     icon: '图标',
     size: '大小',
     level2Node: '二级节点',
-    belowLevel2Node: '三级及以下节点'
+    belowLevel2Node: '三级及以下节点',
+    nodeBorderType: '节点边框风格',
+    nodeUseLineStyle: '是否使用只有底边框的风格'
   },
   color: {
     moreColor: '更多颜色'

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

@@ -162,6 +162,17 @@
           </el-select>
         </div>
       </div>
+      <!-- 节点边框风格 -->
+      <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox v-model="style.nodeUseLineStyle" @change="
+              value => {
+                update('nodeUseLineStyle', value)
+              }
+            ">{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox>
+        </div>
+      </div>
       <!-- 内边距 -->
       <div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
       <div class="row">
@@ -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') {