修复概要定位问题

simple-mind-map/src/Render.js

@@ -592,6 +592,7 @@ class Render {
                 this.setNodeData(node.generalizationBelongNode, {
                     generalization: null
                 })
+                node.generalizationBelongNode.update()
                 this.removeActiveNode(node)
                 i--
             } else if (node.isRoot) {
@@ -888,6 +889,7 @@ class Render {
                     text: '概要'
                 }
             })
+            node.update()
         })
         this.mindMap.render()
     }
@@ -908,6 +910,7 @@ class Render {
             this.setNodeData(node, {
                 generalization: null
             })
+            node.update()
         })
         this.mindMap.render()
     }

simple-mind-map/src/layouts/Base.js

@@ -172,30 +172,55 @@ class Base {
      * @Date: 2022-07-31 09:14:03 
      * @Desc: 获取节点的边界值 
      */
-    getNodeBoundaries(node) {
+    getNodeBoundaries(node, dir, isLeft) {
-        let top = Infinity
+        let { generalizationLineMargin, generalizationNodeMargin } = this.mindMap.themeConfig
-        let bottom = -Infinity
+        let walk = (root) => {
-        let left = Infinity
+            let _left = Infinity
-        let right = -Infinity
+            let _right = -Infinity
-        walk(node, null, (root) => {
+            let _top = Infinity
-            if (root.top < top) {
+            let _bottom = -Infinity
-                top = root.top
+            if (root.children && root.children.length > 0) {
+                root.children.forEach((child) => {
+                    let {left, right, top, bottom} = walk(child)
+                    // 概要内容的宽度
+                    let generalizationWidth = child._generalizationNode ? child._generalizationNode.width + generalizationNodeMargin : 0
+                    // 概要内容的高度
+                    let generalizationHeight = child._generalizationNode ? child._generalizationNode.height + generalizationNodeMargin : 0
+                    if (left < _left) {
+                        _left = left - (isLeft ? generalizationWidth : 0)
+                    }
+                    if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
+                        _right = right + (dir === 'h' ? generalizationWidth : 0)
+                    }
+                    if (top < _top) {
+                        _top = top
+                    }
+                    if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
+                        _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
+                    }
+                })
             }
-            if (root.top + root.height > bottom) {
+            let cur = {
-                bottom = root.top + root.height
+                left: root.left,
+                right: root.left + root.width,
+                top: root.top,
+                bottom: root.top + root.height
             }
-            if (root.left < left) {
+            return {
-                left = root.left
+                left: cur.left < _left ? cur.left : _left,
+                right: cur.right > _right ? cur.right : _right,
+                top: cur.top < _top ? cur.top : _top,
+                bottom: cur.bottom > _bottom ? cur.bottom : _bottom
             }
-            if (root.left + root.width > right) {
+        }
-                right = root.left + root.width
+        let {left, right, top, bottom} = walk(node)
-            }
-        }, null, true)
         return {
             left, 
             right,
             top,
-            bottom
+            bottom,
+            generalizationLineMargin,
+            generalizationNodeMargin
         };
     }
 }

simple-mind-map/src/layouts/CatalogOrganization.js

@@ -145,7 +145,7 @@ class CatalogOrganization extends Base {
                     loop(item, width)
                 })
             } else {
-                width += node.width
+                width += node.width + (node._generalizationNode ? node._generalizationNode.width + this.mindMap.themeConfig.generalizationNodeMargin : 0)
                 widthArr.push(width)
             }
         }
@@ -317,17 +317,16 @@ class CatalogOrganization extends Base {
      * @Desc: 创建概要节点 
      */
     renderGeneralization(node, gLine, gNode) {
-        let { top, bottom, right } = this.getNodeBoundaries(node)
+        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
-        let space = 20
+        let x1 = right + generalizationLineMargin
-        let x1 = right
         let y1 = top
-        let x2 = right
+        let x2 = right + generalizationLineMargin
         let y2 = bottom
-        let cx = x1 + space
+        let cx = x1 + 20
         let cy = y1 + (y2 - y1) / 2
         let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
         gLine.plot(path)
-        gNode.left = right + space
+        gNode.left = right + generalizationNodeMargin
         gNode.top = top + (bottom - top - gNode.height) / 2
     }
 }

simple-mind-map/src/layouts/LogicalStructure.js

@@ -195,17 +195,16 @@ class LogicalStructure extends Base {
      * @Desc: 创建概要节点 
      */
     renderGeneralization(node, gLine, gNode) {
-        let { top, bottom, right } = this.getNodeBoundaries(node)
+        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
-        let space = 20
+        let x1 = right + generalizationLineMargin
-        let x1 = right
         let y1 = top
-        let x2 = right
+        let x2 = right + generalizationLineMargin
         let y2 = bottom
-        let cx = x1 + space
+        let cx = x1 + 20
         let cy = y1 + (y2 - y1) / 2
         let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
         gLine.plot(path)
-        gNode.left = right + space
+        gNode.left = right + generalizationNodeMargin
         gNode.top = top + (bottom - top - gNode.height) / 2
     }
 }

simple-mind-map/src/layouts/MindMap.js

@@ -231,20 +231,18 @@ class MindMap extends Base {
      * @Desc: 创建概要节点 
      */
     renderGeneralization(node, gLine, gNode) {
-        let { top, bottom, left, right } = this.getNodeBoundaries(node)
         let isLeft = node.dir === 'left'
-        let space = 20
+        let { top, bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h', isLeft)
-        let x = isLeft ? left : right
+        let x = isLeft ? left - generalizationLineMargin : right + generalizationLineMargin
-        space = (isLeft ? -space : space)
         let x1 = x
         let y1 = top
         let x2 = x
         let y2 = bottom
-        let cx = x1 + space
+        let cx = x1 + (isLeft ? -20 : 20)
         let cy = y1 + (y2 - y1) / 2
         let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
         gLine.plot(path)
-        gNode.left = x + space - (isLeft ? gNode.width : 0)
+        gNode.left = x + (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) - (isLeft ? gNode.width : 0)
         gNode.top = top + (bottom - top - gNode.height) / 2
     }
 }

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -213,17 +213,16 @@ class OrganizationStructure extends Base {
      * @Desc: 创建概要节点 
      */
     renderGeneralization(node, gLine, gNode) {
-        let { bottom, left, right } = this.getNodeBoundaries(node)
+        let { bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'v')
-        let space = 20
         let x1 = left
-        let y1 = bottom
+        let y1 = bottom + generalizationLineMargin
         let x2 = right
-        let y2 = bottom
+        let y2 = bottom + generalizationLineMargin
-        let cx = left + (right - left) / 2
+        let cx = x1 + (x2 - x1) / 2
-        let cy = bottom + space
+        let cy = y1 + 20
         let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
         gLine.plot(path)
-        gNode.top = bottom + space
+        gNode.top = bottom + generalizationNodeMargin
         gNode.left = left + (right - left - gNode.width) / 2
     }
 }

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

@@ -21,6 +21,10 @@ export default {
     generalizationLineWidth: 1,
     // 概要连线的颜色
     generalizationLineColor: '#549688',
+    // 概要曲线距节点的距离
+    generalizationLineMargin: 0,
+    // 概要节点距节点的距离
+    generalizationNodeMargin: 20,
     // 背景颜色
     backgroundColor: '#fafafa',
     // 背景图片