fix #702: children element move unexpected while use SelectionSelect

Author: towersxu

docs/api/edgeModelApi.md

@@ -54,7 +54,7 @@ LogicFlow在`model`上还维护一些属性，开发者可以通过这些属性
 | sourceAnchorId| string | - | 连线起点锚点id |
 | targetAnchorId| string | - | 连线终点锚点id |
 | customTextPosition| boolean | - | 自定义连线文本位置 |
-
+| virtual | boolean| - | 是否为虚拟节点，默认false。当为true时导出数据不会包含此元素。 `v1.1.24`|
 
 ## 样式属性
 

docs/api/graphModelApi.md

@@ -196,6 +196,10 @@ lf.on('user:detail', (res) => {})
 |-|-|-|-|
 |leftTopPoint|PointTuple|无| 区域左上方的点 |
 |rightBottomPoint|PointTuple|无| 区域右下角的点 |
+|rightBottomPoint|PointTuple|无| 区域右下角的点 |
+|wholeEdge|boolean|无| 是否要整个边都在区域内部 |
+|wholeNode|boolean|无| 是否要整个节点都在区域内部 |
+|ignoreHideElement|boolean|无| 是否忽略隐藏的节点 |
 
 ```js
 graphModel.getAreaElement([100, 100], [800, 800])

docs/api/logicFlowApi.md

@@ -893,6 +893,16 @@ lf.addElements({
 
 例如鼠标绘制选区后，获取选区内的所有元素。
 
+入参:
+|名称|类型|默认值|说明|
+|-|-|-|-|
+|leftTopPoint|PointTuple|无| 区域左上方的点 |
+|rightBottomPoint|PointTuple|无| 区域右下角的点 |
+|rightBottomPoint|PointTuple|无| 区域右下角的点 |
+|wholeEdge|boolean|无| 是否要整个边都在区域内部 |
+|wholeNode|boolean|无| 是否要整个节点都在区域内部 |
+|ignoreHideElement|boolean|无| 是否忽略隐藏的节点 |
+
 ```js
 lf.getAreaElement([100, 100], [500, 500])
 ```

docs/api/nodeModelApi.md

@@ -41,7 +41,7 @@ nodeModel上节点属性有很多，由于用途不一样，我们对其进行
 | isHovered  | boolean |  ✅ | 节点是否在hover状态   |
 | isHitable  | boolean |  ✅ | 节点是否可点击       |
 | draggable  | boolean |  ✅ | 节点是否可拖动       |
-| visible  | boolean |  ✅ | 边是否显示, `1.1.0`新增 |
+| visible  | boolean |  ✅ | 是否显示, `1.1.0`新增 |
 
 ## 形状属性
 
@@ -75,6 +75,7 @@ LogicFlow在`model`上还维护一些属性，开发者可以通过这些属性
 | autoToFront | boolean | ✅ | 控制节点选中时是否自动置顶，默认为true. |
 | incoming | object | ✅ | 进入当前节点的所有边和节点，`v1.1.4` |
 | outgoing | object | ✅ | 离开当前节点的所有边和节点, `v1.1.4` |
+| virtual | boolean| - | 是否为虚拟节点，默认false。当为true时导出数据不会包含此元素。 `v1.1.24`|
 
 ::: tip modelType与type的区别是什么？
 

docs/release/1.1.md

@@ -5,6 +5,16 @@
 - 1.1版本对插件进行规范，现在要求所有的插件必须使用class的方式实现。然后插件的方法可以通过`lf.extension.插件名称.插件方法`来调用。原来的`lf.插件方法`仍然可用，后续版本将废弃。
 - `MiniMap` api不兼容更新。`MiniMap.show()` -> `lf.extension.miniMap.show()`; `MiniMap.hide()` -> `lf.extension.miniMap.hide()`
 
+### 1.1.24
+
+> 发版时间：2022/08/11
+
+- features
+  - `getAreaElement`增加参数`ignoreHideElement`，支持忽略获取隐藏的节点。
+  - `baseNodeModel`与`baseEdgeModel`增加参数`virtual`，导出的图数据会忽略`virtual`为`true`的元素
+- bugfix
+  - fix [#702](https://github.com/didi/LogicFlow/issues/702): 修复框选分组节点移动时，子节点连线会混乱bug
+
 ### 1.1.23
 
 > 发版时间：2022/08/04

packages/core/src/LogicFlow.tsx

@@ -719,9 +719,15 @@ export default class LogicFlow {
     rightBottomPoint: PointTuple,
     wholeEdge = true,
     wholeNode = true,
+    ignoreHideElement = false,
   ) {
-    return this.graphModel.getAreaElement(leftTopPoint, rightBottomPoint, wholeEdge, wholeNode)
-      .map(element => element.getData());
+    return this.graphModel.getAreaElement(
+      leftTopPoint,
+      rightBottomPoint,
+      wholeEdge,
+      wholeNode,
+      ignoreHideElement,
+    ).map(element => element.getData());
   }
   /**
    * 获取选中的元素数据

packages/core/src/model/BaseModel.ts

@@ -59,7 +59,14 @@ interface IBaseModel {
    * 元素是否被选中
    */
   isSelected: boolean;
+  /**
+   * 节点是否显示
+   */
   visible: boolean;
+  /**
+   * 节点是否可以通过getGraphData获取
+   */
+  virtual: boolean;
   /**
    * 元素堆叠是层级，默认情况下节点zIndex值为1，边zIndex为0。
    * todo：写完善

packages/core/src/model/GraphModel.ts

@@ -248,20 +248,25 @@ class GraphModel {
    * @param rightBottomPoint 表示区域右下角的点
    * @param wholeEdge 是否要整个边都在区域内部
    * @param wholeNode 是否要整个节点都在区域内部
+   * @param ignoreHideElement 是否忽略隐藏的节点
    */
   getAreaElement(
     leftTopPoint: PointTuple,
     rightBottomPoint: PointTuple,
     wholeEdge = true,
     wholeNode = true,
+    ignoreHideElement = false,
   ) {
     const areaElements = [];
     const elements = [];
     this.nodes.forEach(node => elements.push(node));
     this.edges.forEach(edge => elements.push(edge));
     for (let i = 0; i < elements.length; i++) {
       const currentItem = elements[i];
-      if (this.isElementInArea(currentItem, leftTopPoint, rightBottomPoint, wholeEdge, wholeNode)) {
+      if (
+        (!ignoreHideElement || currentItem.visible)
+        && this.isElementInArea(currentItem, leftTopPoint, rightBottomPoint, wholeEdge, wholeNode)
+      ) {
         areaElements.push(currentItem);
       }
     }
@@ -388,12 +393,12 @@ class GraphModel {
     const edges = [];
     this.edges.forEach(edge => {
       const data = edge.getData();
-      if (data) edges.push(data);
+      if (data && !edge.virtual) edges.push(data);
     });
     const nodes = [];
     this.nodes.forEach(node => {
       const data = node.getData();
-      if (data) nodes.push(data);
+      if (data && !node.virtual) nodes.push(data);
     });
     return {
       nodes,

packages/core/src/model/edge/BaseEdgeModel.ts

@@ -47,6 +47,7 @@ class BaseEdgeModel implements IBaseModel {
   @observable isHitable = true; // 细粒度控制边是否对用户操作进行反应
   @observable draggable = true;
   @observable visible = true;
+  virtual = false;
   @observable isAnimation = false;
   // 引用属性
   graphModel: GraphModel;

packages/core/src/model/node/BaseNodeModel.ts

@@ -86,6 +86,7 @@ export default class BaseNodeModel implements IBaseNodeModel {
   @observable isHitable = true; // 细粒度控制节点是否对用户操作进行反应
   @observable draggable = true;
   @observable visible = true;
+  virtual = false;
   // 其它属性
   graphModel: GraphModel;
   @observable zIndex = 1;
@@ -457,10 +458,10 @@ export default class BaseNodeModel implements IBaseNodeModel {
     }
   }
   @action
-  move(deltaX, deltaY, isignoreRule = false): boolean {
+  move(deltaX, deltaY, isIgnoreRule = false): boolean {
     let isAllowMoveX = false;
     let isAllowMoveY = false;
-    if (isignoreRule) {
+    if (isIgnoreRule) {
       isAllowMoveX = true;
       isAllowMoveY = true;
     } else {
@@ -487,10 +488,10 @@ export default class BaseNodeModel implements IBaseNodeModel {
   }
 
   @action
-  moveTo(x, y, isignoreRule = false): boolean {
+  moveTo(x, y, isIgnoreRule = false): boolean {
     const deltaX = x - this.x;
     const deltaY = y - this.y;
-    if (!isignoreRule && !this.isAllowMoveNode(deltaX, deltaY)) return false;
+    if (!isIgnoreRule && !this.isAllowMoveNode(deltaX, deltaY)) return false;
     if (this.text) {
       this.text && this.moveText(deltaX, deltaY);
     }

packages/extension/examples/group/index.html

@@ -32,6 +32,7 @@
   <script src="http://localhost:9093/logic-flow.js"></script>
   <script src="/DndPanel.js"></script>
   <script src="/Group.js"></script>
+  <script src="/SelectionSelect.js"></script>
   <script src="/Control.js"></script>
   <script type="module" src="./index.mjs"></script>
 

packages/extension/examples/group/index.mjs

@@ -5,10 +5,18 @@ const lf = new LogicFlow({
   keyboard: {
     enabled: true
   },
-  plugins: [Group, Control, DndPanel],
+  plugins: [Group, Control, DndPanel, SelectionSelect],
   height: 800
 })
 
+lf.extension.control.addItem({
+  iconClass: "custom-minimap",
+  title: "",
+  text: "框选",
+  onClick: (lf, ev) => {
+    lf.extension.selectionSelect.openSelectionSelect()
+  }
+})
 
 class MyGroup extends GroupNode.view {}
 

packages/extension/src/components/selection-select/index.ts

@@ -13,15 +13,15 @@ class SelectionSelect {
     y: number,
   };
   __disabled = false;
-  isDefalutStopMoveGraph = false;
+  isDefaultStopMoveGraph = false;
   isWholeNode = true;
   isWholeEdge = true;
   static pluginName = 'selectionSelect';
   constructor({ lf }) {
     this.lf = lf;
-    // 初始化isDefalutStopMoveGraph取值
+    // 初始化isDefaultStopMoveGraph取值
     const { stopMoveGraph } = lf.getEditConfig();
-    this.isDefalutStopMoveGraph = stopMoveGraph;
+    this.isDefaultStopMoveGraph = stopMoveGraph;
     lf.openSelectionSelect = () => {
       this.openSelectionSelect();
     };
@@ -70,7 +70,7 @@ class SelectionSelect {
   openSelectionSelect() {
     const { stopMoveGraph } = this.lf.getEditConfig();
     if (!stopMoveGraph) {
-      this.isDefalutStopMoveGraph = false;
+      this.isDefaultStopMoveGraph = false;
       this.lf.updateEditConfig({
         stopMoveGraph: true,
       });
@@ -81,7 +81,7 @@ class SelectionSelect {
    * 关闭选区
    */
   closeSelectionSelect() {
-    if (!this.isDefalutStopMoveGraph) {
+    if (!this.isDefaultStopMoveGraph) {
       this.lf.updateEditConfig({
         stopMoveGraph: false,
       });
@@ -125,9 +125,15 @@ class SelectionSelect {
     }
     const lt: PointTuple = [Math.min(x, x1), Math.min(y, y1)];
     const rt: PointTuple = [Math.max(x, x1), Math.max(y, y1)];
-    const elements = this.lf.getAreaElement(lt, rt, this.isWholeEdge, this.isWholeNode);
+    const elements = this.lf.graphModel.getAreaElement(
+      lt, rt, this.isWholeEdge, this.isWholeNode, true,
+    );
+    const { group } = this.lf.graphModel;
     elements.forEach((element) => {
-      this.lf.selectElementById(element.id, true);
+      // 如果节点属于分组，则不不选中节点
+      if (!group || !group.getNodeGroup(element.id)) {
+        this.lf.selectElementById(element.id, true);
+      }
     });
     this.lf.emit('selection:selected', elements);
   };

packages/extension/src/materials/group/GroupNode.ts

@@ -203,7 +203,7 @@ class GroupNodeModel extends RectResize.model {
     const model = this.graphModel.addEdge(edgeData);
     model.virtual = true;
     // 强制不保存group连线数据
-    model.getData = () => null;
+    // model.getData = () => null;
     model.text.editable = false;
     model.isFoldedEdge = true;
   }

packages/extension/src/materials/group/index.ts

@@ -39,9 +39,9 @@ class Group {
       return true;
     });
     lf.graphModel.group = this;
-    lf.on('node:add', this.appendNodeToGrop);
+    lf.on('node:add', this.appendNodeToGroup);
     lf.on('node:delete', this.deleteGroupChild);
-    lf.on('node:drop', this.appendNodeToGrop);
+    lf.on('node:drop', this.appendNodeToGroup);
     lf.on('node:dnd-drag', this.setActiveGroup);
     lf.on('node:drag', this.setActiveGroup);
     lf.on('graph:rendered', this.graphRendered);
@@ -58,7 +58,7 @@ class Group {
       });
     }
   };
-  appendNodeToGrop = ({ data }) => {
+  appendNodeToGroup = ({ data }) => {
     // 如果这个节点之前已经在group中了，则将其从之前的group中移除
     const preGroupId = this.nodeGroupMap.get(data.id);
     if (preGroupId) {