feat:update flow functions

Author: Jason-chen-coder

README.md

@@ -11,16 +11,13 @@ Here are some of the key features of `flutter_easy_flow` in action:
 - **Real-time Data Rendering**: Automatically render flow diagrams based on real-time data.
 - **Real-time Data Viewing**: View the underlying data of flow diagrams in real-time.
 
-<!-- ![Screen Recording](screen_recording.gif) -->
+![Screen Recording](screen_recording.gif)
 
 ## 🛠️ Installation
 
 To get started with `flutter_easy_flow`, follow these steps:
 
 1. Clone the repository:
-    ```bash
-    git clone https://github.com/yourusername/flutter_easy_flow.git
-    ```
 2. Navigate to the project directory:
     ```bash
     cd flutter_easy_flow
@@ -43,6 +40,17 @@ Welcome contributions from the community. If you would like to contribute, pleas
 3. Commit your changes and push the branch to your fork.
 4. Create a pull request with a detailed description of your changes.
 
+### 📝 TODO
+
+Here are some upcoming features that are planned for `flutter_easy_flow`:
+
+1. **Collapsible Group Nodes**: Add support for collapsing and expanding group nodes to manage complex diagrams more efficiently.
+2. **Local Data Persistence**: Save canvas data locally and support data restoration to continue work seamlessly.
+3. **Animated JSON Data Panel**: Introduce an animated panel on the left side to expand or collapse JSON data for better data management.
+
+## Stargazers over time
+[![Stargazers over time](https://starchart.cc/Jason-chen-coder/Flutter-EasyFlow.svg?)](https://starchart.cc/Jason-chen-coder/Flutter-EasyFlow)
+
 ### 📄 License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

lib/flow_chart/dashboard.dart

@@ -15,11 +15,26 @@ import './flow_chart_library.dart';
 import './ui/draw_arrow.dart';
 import './ui/segment_handler.dart';
 
+/// 普通节点默认尺寸
+const Size defaultElementSize = Size(250, 60);
+
+/// 组节点默认尺寸
+const Size defaultGroupElementSize = Size(320, 80);
+
+/// 节点的padding
+const double elementPadding = 10;
+
+/// 默认的锚点大小
+const double defaultHandlerSize = 20;
+
 /// 组节点内子节点的间距
-const double groupElementSpacing = 20;
+const double groupElementSpacing = 10;
+
+/// plus节点默认大小
+const double defaultPlusSize = 26;
 
 /// 节点间默认距离
-const int defaultNodeDistance = 50;
+const int defaultNodeDistance = 35;
 
 class GroupLayoutData {
   final String id;
@@ -281,13 +296,10 @@ class Dashboard extends ChangeNotifier {
       elements
           .where((element) => element.taskType == TaskType.group)
           .map((groupElement) {
-        final childElements = elements
-            .where((element) => element.parentId == groupElement.id)
-            .toList();
         final groupLayoutData = GroupLayoutData(
           id: groupElement.id,
           columnsLayoutData: getGroupColumnLayoutData(groupElement.id),
-          rowsLayoutData: getGroupRowLayoutData(childElements, groupElement.id),
+          rowsLayoutData: getGroupRowLayoutData(groupElement.id),
         );
         _allGroupsLayoutData[groupElement.id] = groupLayoutData;
       }).toList();
@@ -749,8 +761,7 @@ class Dashboard extends ChangeNotifier {
   }
 
 // 获取行布局数据
-  List<List<FlowElement>> getGroupRowLayoutData(
-      List<FlowElement> childElements, String groupId) {
+  List<List<FlowElement>> getGroupRowLayoutData(String groupId) {
     FlowElement? groupElement = findElementById(groupId);
     List<List<FlowElement>> groupRowLayoutData = [];
     if (groupElement != null) {
@@ -1191,6 +1202,7 @@ class Dashboard extends ChangeNotifier {
     // 删除组节点需要删除所有其子节点
     if (removedElement.taskType == TaskType.group) {
       elements.removeWhere((element) => element.parentId == removedElement.id);
+      allGroupsLayoutData.remove(removedElement.id);
     }
     // 移除当前节点所有的连接
     for (final e in elements) {
@@ -1222,21 +1234,26 @@ class Dashboard extends ChangeNotifier {
         .where((ele) => ele.parentId == removedElement.parentId)
         .toList();
     final groupElement = findElementById(removedElement.parentId)!;
+    final lastGroupColumnLayoutData =
+        getGroupColumnLayoutData(removedElement.parentId);
     final removedElementColumnIndex = groupElement.colsElementIds
         .indexWhere((elementIds) => elementIds.contains(removedElementId));
     final removedElementRowIndex = groupElement.rowsElementIds
         .indexWhere((elementIds) => elementIds.contains(removedElementId));
     final lastColsLength = groupElement.colsElementIds.length;
     final lastRowsLength = groupElement.rowsElementIds.length;
     if (removedElementColumnIndex != -1 && removedElementRowIndex != -1) {
-      groupElement.colsElementIds[removedElementColumnIndex]
-          [removedElementRowIndex] = "";
+      if (removedEleNextEle != null) {
+        groupElement.colsElementIds[removedElementColumnIndex]
+            .removeAt(removedElementRowIndex);
+        groupElement.colsElementIds[removedElementColumnIndex].add("");
+      } else {
+        groupElement.colsElementIds[removedElementColumnIndex]
+            [removedElementRowIndex] = "";
+      }
       groupElement.colsElementIds =
           cleanLastEmptyItems(groupElement.colsElementIds);
-      groupElement.rowsElementIds[removedElementRowIndex]
-          [removedElementColumnIndex] = "";
-      groupElement.rowsElementIds =
-          cleanLastEmptyItems(groupElement.rowsElementIds);
+      groupElement.rowsElementIds = transpose(groupElement.colsElementIds);
     }
     final colsLength = groupElement.colsElementIds.length;
     final rowsLength = groupElement.rowsElementIds.length;
@@ -1256,12 +1273,32 @@ class Dashboard extends ChangeNotifier {
           decreaseWidth =
               removedElement.size.width + currentGroupElementSpacing;
         }
+        if (rowsLength == 0) {
+          decreaseHeight =
+              (defaultNodeDistance + defaultHandlerSize) * zoomFactor;
+        }
       }
+    } else {
+      final sourceElementBottomHandlerPos =
+          sourceElement.getHandlerPosition(Alignment.bottomCenter);
+      final removedEleBottomHandlerPos =
+          removedElement.getHandlerPosition(Alignment.bottomCenter);
+      decreaseHeight =
+          removedEleBottomHandlerPos.dy - sourceElementBottomHandlerPos.dy;
     }
-    final lastGroupColumnLayoutData =
-        getGroupColumnLayoutData(removedElement.parentId);
 
-    // 移除当前节点
+    List<FlowElement> bottomOfRemovedElements = [];
+    for (List<FlowElement> columnElements in lastGroupColumnLayoutData) {
+      if (columnElements.first.position.dx == removedElement.position.dx) {
+        bottomOfRemovedElements = columnElements.where((ele) {
+          return double.parse(ele.position.dy.toStringAsFixed(4)) >
+              double.parse(removedElement.position.dy.toStringAsFixed(4));
+        }).toList();
+        break;
+      }
+    }
+
+    /// 移除当前节点
     elements.removeWhere((element) {
       if (element.id == removedElementId) {
         return true;
@@ -1270,52 +1307,32 @@ class Dashboard extends ChangeNotifier {
       }
     });
 
-    // 移除当前节点所有的连接
+    /// 移除当前节点所有的连接
     for (final e in elements) {
       e.next.removeWhere((handlerParams) {
         return removedElementId.contains(handlerParams.destElementId);
       });
     }
 
-    List<FlowElement> bottomOfRemovedElements = [];
-    for (List<FlowElement> columnElements in lastGroupColumnLayoutData) {
-      if (columnElements.first.position.dx == removedElement.position.dx) {
-        bottomOfRemovedElements = columnElements.where((ele) {
-          return double.parse(ele.position.dy.toStringAsFixed(4)) >
-              double.parse(removedElement.position.dy.toStringAsFixed(4));
-        }).toList();
-        break;
-      }
-    }
+    /// 移除节点后，更新组内其他节点位置和连线
     updateLayOutAfterDelElementInGroup(
         removedElement, sourceElement, bottomOfRemovedElements, decreaseHeight);
 
+    /// 更新组节点大小和位置
     List<FlowElement> childElements = elements
         .where((ele) => ele.parentId == removedElement.parentId)
         .toList();
-    final diffElementRows = rowsLength - lastRowsLength;
+    int diffElementRows = rowsLength - lastRowsLength;
     final diffElementCols = colsLength - lastColsLength;
-    if (diffElementCols < 0) {
+    if (diffElementCols < 0 && colsLength > 0) {
       decreaseWidth = removedElement.size.width + currentGroupElementSpacing;
     }
-    if (sourceElement != null) {
-      final sourceElementBottomHandlerPos =
-          sourceElement.getHandlerPosition(Alignment.bottomCenter);
-      final removedEleBottomHandlerPos =
-          removedElement.getHandlerPosition(Alignment.bottomCenter);
-      decreaseHeight =
-          removedEleBottomHandlerPos.dy - sourceElementBottomHandlerPos.dy;
-    }
-
-    (defaultNodeDistance * 2 + defaultHandlerSize * 2) * zoomFactor;
 
-    /// 判断是否需要更新组节点的大小
-    /// 关于高度：如果删除的节点导致行数变少了，需要更新组节点的高度
     final newGroupElementSize = Size(groupElement.size.width - decreaseWidth,
         groupElement.size.height + decreaseHeight * diffElementRows);
 
-    ///关于宽度：如果删除的节点导致列数变少了，需要更新组节点的宽度
     groupElement.size = newGroupElementSize;
+
     if (decreaseWidth != 0) {
       //  更新组节点位置
       groupElement.position = Offset(
@@ -1330,7 +1347,8 @@ class Dashboard extends ChangeNotifier {
             element.position.dy));
       }
     }
-    // 如果行数减少了则追加调整组外后续节点的垂直位置
+
+    /// 如果行数减少了则追加调整组外后续节点的垂直位置
     if (diffElementRows < 0) {
       for (var element in elements) {
         if (element.position.dy > removedElement.position.dy - decreaseHeight &&
@@ -1633,15 +1651,18 @@ class Dashboard extends ChangeNotifier {
 
   List<List<String>> cleanLastEmptyItems(List<List<String>> matrix) {
     if (matrix.isEmpty) return matrix;
-
     // 如果所有子数组的最后一项都为空字符串，则移除最后一项
     if (matrix.every((row) => row.isNotEmpty && row.last.isEmpty)) {
-      return matrix.map((row) => row.sublist(0, row.length - 1)).toList();
+      return matrix
+          .map((row) => row.sublist(0, row.length - 1))
+          .where((row) => row.isNotEmpty)
+          .toList();
     }
 
     // 否则，过滤掉空子数组并返回原始数组
     return matrix
         .where((row) => row.where((item) => item != "").isNotEmpty)
+        .where((row) => row.isNotEmpty)
         .toList();
   }
 }

lib/flow_chart/elements/flow_element.dart

@@ -8,11 +8,6 @@ import 'package:uuid/uuid.dart';
 import '../dashboard.dart';
 import 'connection_params.dart';
 
-const Size defaultElementSize = Size(310, 60);
-const Size defaultGoupElementSize = Size(400, 80);
-const Size defaultPlusElementSize = Size(36, 36);
-const double elementPadding = 10;
-const double defaultHandlerSize = 20;
 
 enum TaskType { none, trigger, delay, timeout, grab, end, plus, group }