Feat：复制、剪切、移动多个节点时，按其在节点上的顺序进行操作

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

@@ -31,7 +31,8 @@ import {
   checkSmmFormatData,
   checkIsNodeStyleDataKey,
   removeRichTextStyes,
-  formatGetNodeGeneralization
+  formatGetNodeGeneralization,
+  sortNodeList
 } from '../../utils'
 import { shapeList } from './node/Shape'
 import { lineStyleProps } from '../../themes/default'
@@ -1373,7 +1374,8 @@ class Render {
     if (this.activeNodeList.length <= 0) {
       return null
     }
-    const nodeList = getTopAncestorsFomNodeList(this.activeNodeList)
+    let nodeList = getTopAncestorsFomNodeList(this.activeNodeList)
+    nodeList = sortNodeList(nodeList)
     return nodeList.map(node => {
       return copyNodeTree({}, node, true)
     })
@@ -1385,11 +1387,12 @@ class Render {
       return
     }
     // 找出激活节点中的顶层节点列表，并过滤掉根节点
-    const nodeList = getTopAncestorsFomNodeList(this.activeNodeList).filter(
+    let nodeList = getTopAncestorsFomNodeList(this.activeNodeList).filter(
       node => {
         return !node.isRoot
       }
     )
+    nodeList = sortNodeList(nodeList)
     // 复制数据
     const copyData = nodeList.map(node => {
       return copyNodeTree({}, node, true)

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

@@ -31,11 +31,14 @@ class LogicalStructure extends Base {
 
   //  遍历数据计算节点的left、width、height
   computedBaseValue() {
+    let sortIndex = 0
     walk(
       this.renderer.renderTree,
       null,
       (cur, parent, isRoot, layerIndex) => {
         let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        newNode.sortIndex = sortIndex
+        sortIndex++
         // 根节点定位在画布中心位置
         if (isRoot) {
           this.setNodeCenter(newNode)

simple-mind-map/src/plugins/Drag.js

@@ -2,7 +2,8 @@ import {
   bfsWalk,
   throttle,
   getTopAncestorsFomNodeList,
-  getNodeIndexInNodeList
+  getNodeIndexInNodeList,
+  sortNodeList
 } from '../utils'
 import Base from '../layouts/Base'
 import { CONSTANTS } from '../constants/constant'
@@ -258,11 +259,14 @@ class Drag extends Base {
       // 如果鼠标按下的节点是激活节点，那么保存当前所有激活的节点
       if (node.getData('isActive')) {
         // 找出这些激活节点中的最顶层节点
-        this.beingDragNodeList = getTopAncestorsFomNodeList(
+        // 并按索引从小到大排序
-          // 过滤掉根节点和概要节点
+        this.beingDragNodeList = sortNodeList(
-          this.mindMap.renderer.activeNodeList.filter(item => {
+          getTopAncestorsFomNodeList(
-            return !item.isRoot && !item.isGeneralization
+            // 过滤掉根节点和概要节点
-          })
+            this.mindMap.renderer.activeNodeList.filter(item => {
+              return !item.isRoot && !item.isGeneralization
+            })
+          )
         )
       } else {
         // 否则只拖拽按下的节点

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

@@ -1580,3 +1580,12 @@ export const defenseXSS = text => {
 export const addXmlns = el => {
   el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
 }
+
+// 给一组节点实例升序排序，依据其sortIndex值
+export const sortNodeList = nodeList => {
+  nodeList = [...nodeList]
+  nodeList.sort((a, b) => {
+    return a.sortIndex - b.sortIndex
+  })
+  return nodeList
+}