Merge branch 'feature3' into feature

simple-mind-map/src/core/render/Render.js

@@ -25,7 +25,7 @@ import {
   setDataToClipboard,
   getDataFromClipboard,
   htmlEscape,
-  checkHasSupSubRelation
+  parseAddGeneralizationNodeList
 } from '../../utils'
 import { shapeList } from './node/Shape'
 import { lineStyleProps } from '../../themes/default'
@@ -1032,14 +1032,7 @@ class Render {
         let node = list[i]
         if (isAppointNodes) list.splice(i, 1)
         if (node.isGeneralization) {
-          // 删除概要节点
+          this.deleteNodeGeneralization(node)
-          this.mindMap.execCommand(
-            'SET_NODE_DATA',
-            node.generalizationBelongNode,
-            {
-              generalization: null
-            }
-          )
           this.removeNodeFromActiveList(node)
           i--
         } else {
@@ -1058,6 +1051,22 @@ class Render {
     this.mindMap.render()
   }
 
+  // 删除概要节点，即从所属节点里删除该概要
+  deleteNodeGeneralization(node) {
+    const targetNode = node.generalizationBelongNode
+    const index = targetNode.getGeneralizationNodeIndex(node)
+    let generalization = targetNode.getData('generalization')
+    if (Array.isArray(generalization)) {
+      generalization.splice(index, 1)
+    } else {
+      generalization = null
+    }
+    // 删除概要节点
+    this.mindMap.execCommand('SET_NODE_DATA', targetNode, {
+      generalization
+    })
+  }
+
   // 仅删除当前节点
   removeCurrentNode(appointNodes = []) {
     appointNodes = formatDataToArray(appointNodes)
@@ -1075,13 +1084,7 @@ class Render {
       let node = list[i]
       if (node.isGeneralization) {
         // 删除概要节点
-        this.mindMap.execCommand(
+        this.deleteNodeGeneralization(node)
-          'SET_NODE_DATA',
-          node.generalizationBelongNode,
-          {
-            generalization: null
-          }
-        )
       } else {
         const parent = node.parent
         const index = getNodeDataIndex(node)
@@ -1403,29 +1406,41 @@ class Render {
     if (this.activeNodeList.length <= 0) {
       return
     }
-    let hasAncestorsExistGeneralization = false
+    const nodeList = this.activeNodeList.filter(node => {
-    this.activeNodeList.forEach(node => {
+      return (
-      if (node.getData('generalization') || node.isRoot) {
+        !node.isRoot && !node.isGeneralization && !node.checkHasSelfGeneralization()
-        return
+      )
-      }
+    })
-      hasAncestorsExistGeneralization = node.ancestorHasGeneralization()
+    const list = parseAddGeneralizationNodeList(nodeList)
-      this.mindMap.execCommand('SET_NODE_DATA', node, {
+    list.forEach(item => {
-        generalization: data || {
+      const newData = {
+        ...(data || {
           text: this.mindMap.opt.defaultGeneralizationText
+        }),
+        range: item.range || null
+      }
+      let generalization = item.node.getData('generalization')
+      if (generalization) {
+        if (Array.isArray(generalization)) {
+          generalization.push(newData)
+        } else {
+          generalization = [generalization, newData]
         }
+      } else {
+        generalization = [newData]
+      }
+      this.mindMap.execCommand('SET_NODE_DATA', item.node, {
+        generalization
       })
       // 插入子节点时自动展开子节点
-      node.setData({
+      item.node.setData({
         expand: true
       })
     })
-    const hasSupSubRelation = checkHasSupSubRelation(this.activeNodeList)
     this.mindMap.render(() => {
       // 修复祖先节点存在概要时位置未更新的问题
       // 修复同时给存在上下级关系的节点添加概要时重叠的问题
-      if (hasSupSubRelation || hasAncestorsExistGeneralization) {
+      this.mindMap.render()
-        this.mindMap.render()
-      }
     })
   }
 
@@ -1435,7 +1450,7 @@ class Render {
       return
     }
     this.activeNodeList.forEach(node => {
-      if (!node.getData('generalization')) {
+      if (!node.checkHasGeneralization()) {
         return
       }
       this.mindMap.execCommand('SET_NODE_DATA', node, {

simple-mind-map/src/core/render/node/Node.js

@@ -83,8 +83,7 @@ class Node {
     this._fillExpandNode = null
     this._userListGroup = null
     this._lines = []
-    this._generalizationLine = null
+    this._generalizationList = []
-    this._generalizationNode = null
     this._unVisibleRectRegionNode = null
     this._isMouseenter = false
     // 尺寸信息
@@ -751,10 +750,7 @@ class Node {
       item.setOpacity(val)
     })
     // 概要节点
-    if (this._generalizationNode) {
+    this.setGeneralizationOpacity(val)
-      this._generalizationLine.opacity(val)
-      this._generalizationNode.group.opacity(val)
-    }
   }
 
   // 隐藏子节点
@@ -861,11 +857,11 @@ class Node {
     return false
   }
 
-  //  检查是否存在概要的祖先节点
+  //  检查是否存在有概要的祖先节点
   ancestorHasGeneralization() {
     let node = this.parent
     while (node) {
-      if (node.getData('generalization')) {
+      if (node.checkHasGeneralization()) {
         return true
       }
       node = node.parent
@@ -939,6 +935,15 @@ class Node {
     })
   }
 
+  // 获取该节点在兄弟节点列表中的索引
+  getIndexInBrothers() {
+    return this.parent && this.parent.children
+      ? this.parent.children.findIndex(item => {
+          return item.uid === this.uid
+        })
+      : -1
+  }
+
   //  获取padding值
   getPaddingVale() {
     let { isActive } = this.getData()

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -1,9 +1,30 @@
 import Node from './Node'
 import { createUid } from '../../../utils/index'
 
+// 获取节点概要数据
+function formatGetGeneralization() {
+  const data = this.getData('generalization')
+  return Array.isArray(data) ? data : data ? [data] : []
+}
+
 //  检查是否存在概要
 function checkHasGeneralization() {
-  return !!this.getData('generalization')
+  return this.formatGetGeneralization().length > 0
+}
+
+//  检查是否存在自身的概要，非子节点区间
+function checkHasSelfGeneralization() {
+  const list = this.formatGetGeneralization()
+  return !!list.find(item => {
+    return !item.range || item.range.length <= 0
+  })
+}
+
+// 获取概要节点所在的概要列表里的索引
+function getGeneralizationNodeIndex(node) {
+  return this._generalizationList.findIndex(item => {
+    return item.generalizationNode.uid === node.uid
+  })
 }
 
 //  创建概要节点
@@ -11,26 +32,47 @@ function createGeneralizationNode() {
   if (this.isGeneralization || !this.checkHasGeneralization()) {
     return
   }
-  if (!this._generalizationLine) {
+  let maxWidth = 0
-    this._generalizationLine = this.lineDraw.path()
+  let maxHeight = 0
-  }
+  const list = this.formatGetGeneralization()
-  if (!this._generalizationNode) {
+  list.forEach((item, index) => {
-    this._generalizationNode = new Node({
+    let cur = this._generalizationList[index]
-      data: {
+    if (!cur) {
-        data: this.getData('generalization')
+      cur = this._generalizationList[index] = {}
-      },
-      uid: createUid(),
-      renderer: this.renderer,
-      mindMap: this.mindMap,
-      isGeneralization: true
-    })
-    this._generalizationNodeWidth = this._generalizationNode.width
-    this._generalizationNodeHeight = this._generalizationNode.height
-    this._generalizationNode.generalizationBelongNode = this
-    if (this.getData('generalization').isActive) {
-      this.renderer.addNodeToActiveList(this._generalizationNode)
     }
-  }
+    // 所属节点
+    cur.node = this
+    // 区间范围
+    cur.range = item.range
+    // 线和节点
+    if (!cur.generalizationLine) {
+      cur.generalizationLine = this.lineDraw.path()
+    }
+    if (!cur.generalizationNode) {
+      cur.generalizationNode = new Node({
+        data: {
+          data: item
+        },
+        uid: createUid(),
+        renderer: this.renderer,
+        mindMap: this.mindMap,
+        isGeneralization: true
+      })
+    }
+    // 关联所属节点
+    cur.generalizationNode.generalizationBelongNode = this
+    // 大小
+    if (cur.generalizationNode.width > maxWidth)
+      maxWidth = cur.generalizationNode.width
+    if (cur.generalizationNode.height > maxHeight)
+      maxHeight = cur.generalizationNode.height
+    // 如果该概要为激活状态，那么加入激活节点列表
+    if (item.isActive) {
+      this.renderer.addNodeToActiveList(cur.generalizationNode)
+    }
+  })
+  this._generalizationNodeWidth = maxWidth
+  this._generalizationNodeHeight = maxHeight
 }
 
 //  更新概要节点
@@ -43,39 +85,64 @@ function updateGeneralization() {
 //  渲染概要节点
 function renderGeneralization() {
   if (this.isGeneralization) return
-  if (!this.checkHasGeneralization()) {
+  this.updateGeneralizationData()
+  const list = this.formatGetGeneralization()
+  if (list.length <= 0 || this.getData('expand') === false) {
     this.removeGeneralization()
-    this._generalizationNodeWidth = 0
-    this._generalizationNodeHeight = 0
     return
   }
-  if (this.getData('expand') === false) {
+  if (list.length !== this._generalizationList.length) {
     this.removeGeneralization()
-    return
   }
   this.createGeneralizationNode()
-  this.renderer.layout.renderGeneralization(
+  this.renderer.layout.renderGeneralization(this._generalizationList)
-    this,
+  this._generalizationList.forEach(item => {
-    this._generalizationLine,
+    this.style.generalizationLine(item.generalizationLine)
-    this._generalizationNode
+    item.generalizationNode.render()
-  )
+  })
-  this.style.generalizationLine(this._generalizationLine)
+}
-  this._generalizationNode.render()
+
+// 更新节点概要数据
+function updateGeneralizationData() {
+  const childrenLength = this.children.length
+  const list = this.formatGetGeneralization()
+  const newList = []
+  list.forEach(item => {
+    if (!item.range) {
+      newList.push(item)
+      return
+    }
+    if (
+      item.range.length > 0 &&
+      item.range[0] <= childrenLength - 1 &&
+      item.range[1] <= childrenLength - 1
+    ) {
+      newList.push(item)
+    }
+  })
+  if (newList.length !== list.length) {
+    this.setData({
+      generalization: newList
+    })
+  }
 }
 
 //  删除概要节点
 function removeGeneralization() {
   if (this.isGeneralization) return
-  if (this._generalizationLine) {
+  this._generalizationList.forEach(item => {
-    this._generalizationLine.remove()
+    if (item.generalizationLine) {
-    this._generalizationLine = null
+      item.generalizationLine.remove()
-  }
+      item.generalizationLine = null
-  if (this._generalizationNode) {
+    }
-    // 删除概要节点时要同步从激活节点里删除
+    if (item.generalizationNode) {
-    this.renderer.removeNodeFromActiveList(this._generalizationNode)
+      // 删除概要节点时要同步从激活节点里删除
-    this._generalizationNode.remove()
+      this.renderer.removeNodeFromActiveList(item.generalizationNode)
-    this._generalizationNode = null
+      item.generalizationNode.remove()
-  }
+      item.generalizationNode = null
+    }
+  })
+  this._generalizationList = []
   // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题
   if (this.generalizationBelongNode) {
     this.nodeDraw
@@ -87,31 +154,40 @@ function removeGeneralization() {
 //  隐藏概要节点
 function hideGeneralization() {
   if (this.isGeneralization) return
-  if (this._generalizationLine) {
+  this._generalizationList.forEach(item => {
-    this._generalizationLine.hide()
+    if (item.generalizationLine) item.generalizationLine.hide()
-  }
+    if (item.generalizationNode) item.generalizationNode.hide()
-  if (this._generalizationNode) {
+  })
-    this._generalizationNode.hide()
-  }
 }
 
 //  显示概要节点
 function showGeneralization() {
   if (this.isGeneralization) return
-  if (this._generalizationLine) {
+  this._generalizationList.forEach(item => {
-    this._generalizationLine.show()
+    if (item.generalizationLine) item.generalizationLine.show()
-  }
+    if (item.generalizationNode) item.generalizationNode.show()
-  if (this._generalizationNode) {
+  })
-    this._generalizationNode.show()
+}
-  }
+
+// 设置概要节点的透明度
+function setGeneralizationOpacity(val) {
+  this._generalizationList.forEach(item => {
+    item.generalizationLine.opacity(val)
+    item.generalizationNode.group.opacity(val)
+  })
 }
 
 export default {
+  formatGetGeneralization,
   checkHasGeneralization,
+  checkHasSelfGeneralization,
+  getGeneralizationNodeIndex,
   createGeneralizationNode,
   updateGeneralization,
+  updateGeneralizationData,
   renderGeneralization,
   removeGeneralization,
   hideGeneralization,
-  showGeneralization
+  showGeneralization,
+  setGeneralizationOpacity
 }

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

@@ -346,6 +346,50 @@ class Base {
     }
   }
 
+  // 获取指定索引区间的子节点的边界范围
+  getChildrenBoundaries(node, dir, startIndex = 0, endIndex) {
+    let { generalizationLineMargin, generalizationNodeMargin } =
+      this.mindMap.themeConfig
+    const children = node.children.slice(startIndex, endIndex + 1)
+    let left = Infinity
+    let right = -Infinity
+    let top = Infinity
+    let bottom = -Infinity
+    children.forEach(item => {
+      const cur = this.getNodeBoundaries(item, dir)
+      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
+    })
+    return {
+      left,
+      right,
+      top,
+      bottom,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    }
+  }
+
+  // 获取节点概要的渲染边界
+  getNodeGeneralizationRenderBoundaries(item, dir) {
+    let res = null
+    // 区间
+    if (item.range) {
+      res = this.getChildrenBoundaries(
+        item.node,
+        dir,
+        item.range[0],
+        item.range[1]
+      )
+    } else {
+      // 整体概要
+      res = this.getNodeBoundaries(item.node, dir)
+    }
+    return res
+  }
+
   // 获取节点实际存在几个子节点
   getNodeActChildrenLength(node) {
     return node.nodeData.children && node.nodeData.children.length

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

@@ -72,11 +72,7 @@ class CatalogOrganization extends Base {
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
-        if (
+        if (node.getData('expand') && node.children && node.children.length) {
-          node.getData('expand') &&
-          node.children &&
-          node.children.length
-        ) {
           let marginX = this.getMarginX(layerIndex + 1)
           let marginY = this.getMarginY(layerIndex + 1)
           if (isRoot) {
@@ -339,24 +335,27 @@ class CatalogOrganization extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let {
+    list.forEach(item => {
-      top,
+      let {
-      bottom,
+        top,
-      right,
+        bottom,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h')
+        generalizationNodeMargin
-    let x1 = right + generalizationLineMargin
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-    let y1 = top
+      let x1 = right + generalizationLineMargin
-    let x2 = right + generalizationLineMargin
+      let y1 = top
-    let y2 = bottom
+      let x2 = right + generalizationLineMargin
-    let cx = x1 + 20
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + 20
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left = right + generalizationNodeMargin
+      item.generalizationLine.plot(path)
-    gNode.top = top + (bottom - top - gNode.height) / 2
+      item.generalizationNode.left = right + generalizationNodeMargin
+      item.generalizationNode.top =
+        top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -357,24 +357,27 @@ class Fishbone extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let {
+    list.forEach(item => {
-      top,
+      let {
-      bottom,
+        top,
-      right,
+        bottom,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h')
+        generalizationNodeMargin
-    let x1 = right + generalizationLineMargin
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-    let y1 = top
+      let x1 = right + generalizationLineMargin
-    let x2 = right + generalizationLineMargin
+      let y1 = top
-    let y2 = bottom
+      let x2 = right + generalizationLineMargin
-    let cx = x1 + 20
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + 20
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left = right + generalizationNodeMargin
+      item.generalizationLine.plot(path)
-    gNode.top = top + (bottom - top - gNode.height) / 2
+      item.generalizationNode.left = right + generalizationNodeMargin
+      item.generalizationNode.top =
+        top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -77,11 +77,7 @@ class LogicalStructure extends Base {
       this.root,
       null,
       (node, parent, isRoot, layerIndex) => {
-        if (
+        if (node.getData('expand') && node.children && node.children.length) {
-          node.getData('expand') &&
-          node.children &&
-          node.children.length
-        ) {
           let marginY = this.getMarginY(layerIndex + 1)
           // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
           let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
@@ -269,24 +265,27 @@ class LogicalStructure extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let {
+    list.forEach(item => {
-      top,
+      let {
-      bottom,
+        top,
-      right,
+        bottom,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h')
+        generalizationNodeMargin
-    let x1 = right + generalizationLineMargin
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-    let y1 = top
+      let x1 = right + generalizationLineMargin
-    let x2 = right + generalizationLineMargin
+      let y1 = top
-    let y2 = bottom
+      let x2 = right + generalizationLineMargin
-    let cx = x1 + 20
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + 20
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left = right + generalizationNodeMargin
+      item.generalizationLine.plot(path)
-    gNode.top = top + (bottom - top - gNode.height) / 2
+      item.generalizationNode.left = right + generalizationNodeMargin
+      item.generalizationNode.top =
+        top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -358,32 +358,34 @@ class MindMap extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+    list.forEach(item => {
-    let {
+      let isLeft = item.node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
-      top,
+      let {
-      bottom,
+        top,
-      left,
+        bottom,
-      right,
+        left,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h', isLeft)
+        generalizationNodeMargin
-    let x = isLeft
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-      ? left - generalizationLineMargin
+      let x = isLeft
-      : right + generalizationLineMargin
+        ? left - generalizationLineMargin
-    let x1 = x
+        : right + generalizationLineMargin
-    let y1 = top
+      let x1 = x
-    let x2 = x
+      let y1 = top
-    let y2 = bottom
+      let x2 = x
-    let cx = x1 + (isLeft ? -20 : 20)
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + (isLeft ? -20 : 20)
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left =
+      item.generalizationLine.plot(path)
-      x +
+      item.generalizationNode.left =
-      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+        x +
-      (isLeft ? gNode.width : 0)
+        (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
-    gNode.top = top + (bottom - top - gNode.height) / 2
+        (isLeft ? item.generalizationNode.width : 0)
+        item.generalizationNode.top = top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -243,24 +243,27 @@ class OrganizationStructure extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let {
+    list.forEach(item => {
-      bottom,
+      let {
-      left,
+        bottom,
-      right,
+        left,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'v')
+        generalizationNodeMargin
-    let x1 = left
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'v')
-    let y1 = bottom + generalizationLineMargin
+      let x1 = left
-    let x2 = right
+      let y1 = bottom + generalizationLineMargin
-    let y2 = bottom + generalizationLineMargin
+      let x2 = right
-    let cx = x1 + (x2 - x1) / 2
+      let y2 = bottom + generalizationLineMargin
-    let cy = y1 + 20
+      let cx = x1 + (x2 - x1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + 20
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.top = bottom + generalizationNodeMargin
+      item.generalizationLine.plot(path)
-    gNode.left = left + (right - left - gNode.width) / 2
+      item.generalizationNode.top = bottom + generalizationNodeMargin
+      item.generalizationNode.left = left + (right - left - item.generalizationNode.width) / 2
+    })
+    
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -80,11 +80,7 @@ class Timeline extends Base {
       this.root,
       null,
       (node, parent, isRoot, layerIndex, index) => {
-        if (
+        if (node.getData('expand') && node.children && node.children.length) {
-          node.getData('expand') &&
-          node.children &&
-          node.children.length
-        ) {
           let marginX = this.getMarginX(layerIndex + 1)
           let marginY = this.getMarginY(layerIndex + 1)
           if (isRoot) {
@@ -315,24 +311,26 @@ class Timeline extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let {
+    list.forEach(item => {
-      top,
+      let {
-      bottom,
+        top,
-      right,
+        bottom,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h')
+        generalizationNodeMargin
-    let x1 = right + generalizationLineMargin
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-    let y1 = top
+      let x1 = right + generalizationLineMargin
-    let x2 = right + generalizationLineMargin
+      let y1 = top
-    let y2 = bottom
+      let x2 = right + generalizationLineMargin
-    let cx = x1 + 20
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + 20
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left = right + generalizationNodeMargin
+      item.generalizationLine.plot(path)
-    gNode.top = top + (bottom - top - gNode.height) / 2
+      item.generalizationNode.left = right + generalizationNodeMargin
+      item.generalizationNode.top = top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

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

@@ -97,11 +97,7 @@ class VerticalTimeline extends Base {
       this.root,
       null,
       (node, parent, isRoot, layerIndex, index) => {
-        if (
+        if (node.getData('expand') && node.children && node.children.length) {
-          node.getData('expand') &&
-          node.children &&
-          node.children.length
-        ) {
           let marginY = this.getMarginY(layerIndex + 1)
           // 定位二级节点的top
           if (isRoot) {
@@ -386,32 +382,35 @@ class VerticalTimeline extends Base {
   }
 
   //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
+  renderGeneralization(list) {
-    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+    list.forEach(item => {
-    let {
+      let isLeft = item.node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
-      top,
+      let {
-      bottom,
+        top,
-      left,
+        bottom,
-      right,
+        left,
-      generalizationLineMargin,
+        right,
-      generalizationNodeMargin
+        generalizationLineMargin,
-    } = this.getNodeBoundaries(node, 'h', isLeft)
+        generalizationNodeMargin
-    let x = isLeft
+      } = this.getNodeGeneralizationRenderBoundaries(item, 'h')
-      ? left - generalizationLineMargin
+      let x = isLeft
-      : right + generalizationLineMargin
+        ? left - generalizationLineMargin
-    let x1 = x
+        : right + generalizationLineMargin
-    let y1 = top
+      let x1 = x
-    let x2 = x
+      let y1 = top
-    let y2 = bottom
+      let x2 = x
-    let cx = x1 + (isLeft ? -20 : 20)
+      let y2 = bottom
-    let cy = y1 + (y2 - y1) / 2
+      let cx = x1 + (isLeft ? -20 : 20)
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+      let cy = y1 + (y2 - y1) / 2
-    gLine.plot(path)
+      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gNode.left =
+      item.generalizationLine.plot(path)
-      x +
+      item.generalizationNode.left =
-      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+        x +
-      (isLeft ? gNode.width : 0)
+        (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
-    gNode.top = top + (bottom - top - gNode.height) / 2
+        (isLeft ? item.generalizationNode.width : 0)
+      item.generalizationNode.top =
+        top + (bottom - top - item.generalizationNode.height) / 2
+    })
   }
 
   // 渲染展开收起按钮的隐藏占位元素

simple-mind-map/src/utils/index.js

@@ -737,6 +737,56 @@ export const checkHasSupSubRelation = list => {
   return false
 }
 
+// 解析要添加概要的节点实例列表
+export const parseAddGeneralizationNodeList = list => {
+  const cache = {}
+  const uidToParent = {}
+  list.forEach(node => {
+    const parent = node.parent
+    if (parent) {
+      const pUid = parent.uid
+      uidToParent[pUid] = parent
+      const index = node.getIndexInBrothers()
+      const data = {
+        node,
+        index
+      }
+      if (cache[pUid]) {
+        if (
+          !cache[pUid].find(item => {
+            return item.index === data.index
+          })
+        ) {
+          cache[pUid].push(data)
+        }
+      } else {
+        cache[pUid] = [data]
+      }
+    }
+  })
+  const res = []
+  Object.keys(cache).forEach(uid => {
+    if (cache[uid].length > 1) {
+      const rangeList = cache[uid]
+        .map(item => {
+          return item.index
+        })
+        .sort((a, b) => {
+          return a - b
+        })
+      res.push({
+        node: uidToParent[uid],
+        range: [rangeList[0], rangeList[rangeList.length - 1]]
+      })
+    } else {
+      res.push({
+        node: cache[uid][0].node
+      })
+    }
+  })
+  return res
+}
+
 // 判断两个矩形是否重叠
 export const checkTwoRectIsOverlap = (
   minx1,

web/src/pages/Doc/catalogList.js

@@ -11,7 +11,7 @@ let langList = [
   }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(24).fill(0).map((_, index) => {
+let CourseList = new Array(25).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [

web/src/pages/Doc/routerList.js

@@ -31,6 +31,7 @@ export default [
       { path: 'course22', title: '如何实现搜索、替换' },
       { path: 'course23', title: '如何渲染滚动条' },
       { path: 'course24', title: '如何开发一个插件' },
+      { path: 'course25', title: '关于概要' },
       { path: 'doExport', title: 'Export 插件' },
       { path: 'drag', title: 'Drag插件' },
       { path: 'introduction', title: '简介' },

web/src/pages/Doc/zh/course25/index.md

@@ -0,0 +1,17 @@
+# 关于概要
+
+概要的功能非常的不完善，具体如下：
+
+1.选中单个节点添加单个概要。
+
+2.同时选中多个节点添加概要时，具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。
+
+3.给子节点添加了区间概要时自身无法再添加单个概要。
+
+4.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。
+
+5.概要节点后面无法再继续添加概要。
+
+6.概要节点间、概要节点和普通节点可能会冲突重叠。
+
+概要功能不会再完善，所以对概要功能要求高的项目请谨慎选择`simple-mind-map`。

web/src/pages/Doc/zh/course25/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>关于概要</h1>
+<p>概要的功能非常的不完善，具体如下：</p>
+<p>1.选中单个节点添加单个概要。</p>
+<p>2.同时选中多个节点添加概要时，具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。</p>
+<p>3.给子节点添加了区间概要时自身无法再添加单个概要。</p>
+<p>4.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。</p>
+<p>5.概要节点后面无法再继续添加概要。</p>
+<p>6.概要节点间、概要节点和普通节点可能会冲突重叠。</p>
+<p>概要功能不会再完善，所以对概要功能要求高的项目请谨慎选择<code>simple-mind-map</code>。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>