feat: support move selected nodes when disabled multipleSelect.(#894)

Author: towersxu

packages/core/index.html

@@ -466,8 +466,8 @@
           // hoverOutline: false,
           // nodeSelectedOutline: false,
           multipleSelectKey: 'shift',
-          // disabledTools: ['multipleSelect'],
-          // autoExpand: true,
+          disabledTools: ['multipleSelect'],
+          autoExpand: true,
           // metaKeyMultipleSelected: false,
           // adjustEdgeMiddle: true,
           // stopMoveGraph: true,

packages/core/src/model/GraphModel.ts

@@ -240,6 +240,15 @@ class GraphModel {
     });
     return elements;
   }
+  @computed get selectNodes() {
+    const nodes = [];
+    this.nodes.forEach(node => {
+      if (node.isSelected) {
+        nodes.push(node);
+      }
+    });
+    return nodes;
+  }
   /**
    * 获取指定区域内的所有元素
    * @param leftTopPoint 表示区域左上角的点

packages/core/src/view/node/BaseNode.tsx

@@ -147,6 +147,7 @@ export default abstract class BaseNode extends Component<IProps, IState> {
         autoExpand,
       },
       transformModel,
+      selectNodes,
       width,
       height,
       gridSize,
@@ -200,20 +201,21 @@ export default abstract class BaseNode extends Component<IProps, IState> {
     if (this.t) {
       cancelRaf(this.t);
     }
+    let moveNodes = selectNodes.map(node => node.id);
+    // 未被选中的节点也可以拖动
+    if (moveNodes.indexOf(model.id) === -1) {
+      moveNodes = [model.id];
+    }
     if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
       this.t = createRaf(() => {
         const [translateX, translateY] = nearBoundary;
         transformModel.translate(translateX, translateY);
-        graphModel.moveNode(
-          model.id, -translateX / transformModel.SCALE_X, -translateY / transformModel.SCALE_X,
-        );
+        const deltaX = -translateX / transformModel.SCALE_X;
+        const deltaY = -translateY / transformModel.SCALE_X;
+        graphModel.moveNodes(moveNodes, deltaX, deltaY);
       });
     } else {
-      graphModel.moveNode2Coordinate(
-        model.id,
-        x,
-        y,
-      );
+      graphModel.moveNodes(moveNodes, x - model.x, y - model.y);
     }
   };
   onDragEnd = () => {