feature: support autolayout in seata-statemachine-designer

changes/en-us/2.x.md

@@ -8,6 +8,7 @@ Add changes here for all PR submitted to the 2.x branch.
 - [[#6169](https://github.com/apache/incubator-seata/pull/6169)] full support for states in the refactored state machine designer
 - [[#6230](https://github.com/apache/incubator-seata/pull/6230)] RocketMQ transaction are supported
 - [[#6326](https://github.com/apache/incubator-seata/pull/6326)] support raft node metadata sync
+- [[#6415](https://github.com/apache/incubator-seata/pull/6415)] support autolayout in seata-statemachine-designer
 
 ### bugfix:
 - [[#6090](https://github.com/apache/incubator-seata/pull/6090)] fix the TCC aspect exception handling process, do not wrapping the internal call exceptions
@@ -163,5 +164,6 @@ Thanks to these contributors for their code commits. Please report an unintended
 - [saberyjs](https://github.com/SABERYJS)
 - [gggyd123](https://github.com/gggyd123)
 - [jonasHanhan](https://github.com/jonasHanhan)
+- [Code-breaker1998](https://github.com/Code-breaker1998)
 
 Also, we receive many valuable issues, questions and advices from our community. Thanks for you all.

changes/zh-cn/2.x.md

@@ -8,6 +8,7 @@
 - [[#6169](https://github.com/apache/incubator-seata/pull/6169)] 支持新版本状态机设计器
 - [[#6230](https://github.com/apache/incubator-seata/pull/6230)] 支持RocketMQ消息事务
 - [[#6326](https://github.com/apache/incubator-seata/pull/6326)] 支持raft节点间的元数据同步
+- [[#6415](https://github.com/apache/incubator-seata/pull/6415)] 支持 Saga 设计器的自动布局
 
 ### bugfix:
 - [[#6090](https://github.com/apache/incubator-seata/pull/6090)] 修复tcc切面异常处理过程，不对内部调用异常做包装处理，直接向外抛出
@@ -165,5 +166,6 @@
 - [saberyjs](https://github.com/SABERYJS)
 - [gggyd123](https://github.com/gggyd123)
 - [jonasHanhan](https://github.com/jonasHanhan)
+- [Code-breaker1998](https://github.com/Code-breaker1998)
 
 同时，我们收到了社区反馈的很多有价值的issue和建议，非常感谢大家。

saga/seata-saga-statemachine-designer/.eslintrc.json

@@ -25,6 +25,7 @@
     "react/no-deprecated": 0,
     "react/react-in-jsx-scope": 0,
     "react/jsx-no-bind": 0,
-    "no-underscore-dangle": 0
+    "no-underscore-dangle": 0,
+    "no-restricted-syntax": 0
   }
 }

saga/seata-saga-statemachine-designer/src/modeling/SagaImporter.js

@@ -41,6 +41,49 @@ function collectWaypoints(edge) {
   return null;
 }
 
+function addArrayList(definitions) {
+  const adjList = new Map();
+  forEach(definitions.States, (semantic) => {
+    // Initialize an array to store values for the key
+    adjList.set(semantic, []);
+
+    if (semantic.Next || semantic.CompensateState || semantic.Choices) {
+      const options = [];
+
+      if (semantic.Next) {
+        options.push(semantic.Next);
+      }
+
+      if (semantic.CompensateState) {
+        options.push(semantic.CompensateState);
+      }
+
+      if (semantic.Choices) {
+        semantic.Choices.forEach((option) => options.push(option.Next));
+      }
+
+      const existingValues = adjList.get(semantic);
+      options.forEach((next) => {
+        existingValues.push(definitions.States[next]);
+      });
+      adjList.set(semantic, existingValues);
+    }
+  });
+  return adjList;
+}
+
+function addCatchList(definitions, nodes) {
+  const adjList = new Map();
+  adjList.set(nodes, []);
+  nodes.Catch.forEach((option) => {
+    const { Next } = option;
+    const existingValues = adjList.get(nodes);
+    existingValues.push(definitions.States[Next]);
+    adjList.set(nodes, existingValues);
+  });
+  return adjList;
+}
+
 export default function SagaImporter(
   sagaFactory,
   eventBus,
@@ -76,38 +119,77 @@ SagaImporter.prototype.import = function (definitions) {
     const root = this.sagaFactory.create('StateMachine');
     root.importJson(definitions);
     this.root(root);
-
     // Add start state
     let start = this.sagaFactory.create('StartState');
+    let stateArrayList = new Map();
     start.importJson(definitions);
+    let begin = start;
     start = this.add(start);
-
     const edges = [];
     const catches = [];
     forEach(definitions.States, (semantic) => {
       const state = this.sagaFactory.create(semantic.Type);
-      state.importJson(semantic);
+
+      if (semantic.style === undefined) {
+        stateArrayList = addArrayList(definitions);
+        state.importStates(definitions, semantic, begin, stateArrayList);
+      } else {
+        state.importJson(semantic);
+        begin = state;
+      }
       const host = this.add(state);
-      if (semantic.edge) {
+
+      if (semantic.edge === undefined) {
+        state.importEdges(definitions, semantic);
+        if (semantic.edge) {
+          edges.push(...Object.values(semantic.edge));
+        }
+      } else {
         edges.push(...Object.values(semantic.edge));
       }
-      if (semantic.catch) {
-        const node = this.sagaFactory.create('Catch');
-        node.importJson(semantic.catch);
-        const source = this.add(node);
+
+      if (semantic.Catch) {
+        let source;
+        if (semantic.catch === undefined) {
+          const node = this.sagaFactory.create('Catch');
+          const catchList = addCatchList(definitions, semantic);
+          node.addCatch(definitions, semantic, catchList, stateArrayList);
+          source = this.add(node);
+        } else {
+          const node = this.sagaFactory.create('Catch');
+          node.importJson(semantic.catch);
+          source = this.add(node);
+        }
+
+        if (semantic.catch.edge === undefined) {
+          state.importCatchesEdges(definitions, semantic);
+        }
         if (semantic.catch.edge) {
           semantic.Catch.forEach((exceptionMatch) => {
             if (semantic.catch.edge[exceptionMatch.Next]) {
               semantic.catch.edge[exceptionMatch.Next].Exceptions = exceptionMatch.Exceptions;
             }
           });
+
+          this.modeling.updateAttachment(source, host);
+          catches.push({
+            source,
+            edges: Object.values(semantic.catch.edge),
+          });
         }
-        this.modeling.updateAttachment(source, host);
-        catches.push({ source, edges: Object.values(semantic.catch.edge) });
       }
     });
 
-    // Add start edge
+    if ((definitions.edge === undefined) && (definitions.States)) {
+      start = this.sagaFactory.create('StartState');
+      definitions.edge = {};
+      start.importJsonEdges(definitions);
+      if (definitions.edge) {
+        const startEdge = this.sagaFactory.create('Transition');
+        startEdge.importJson(definitions.edge);
+        this.add(startEdge, { source: start });
+      }
+    }
     if (definitions.edge) {
       const startEdge = this.sagaFactory.create('Transition');
       startEdge.importJson(definitions.edge);
@@ -121,7 +203,10 @@ SagaImporter.prototype.import = function (definitions) {
     });
 
     forEach(catches, (oneCatch) => {
-      const { source, edges: exceptionMatches } = oneCatch;
+      const {
+        source,
+        edges: exceptionMatches,
+      } = oneCatch;
       forEach(exceptionMatches, (semantic) => {
         const exceptionMatch = this.sagaFactory.create(semantic.Type);
         exceptionMatch.importJson(semantic);
@@ -133,7 +218,10 @@ SagaImporter.prototype.import = function (definitions) {
     console.error(error);
   }
 
-  this.eventBus.fire('import.done', { error, warnings });
+  this.eventBus.fire('import.done', {
+    error,
+    warnings,
+  });
 };
 
 SagaImporter.prototype.root = function (semantic) {
@@ -181,7 +269,6 @@ SagaImporter.prototype.add = function (semantic, attrs = {}) {
         target,
         waypoints,
       });
-      // console.log(elementDefinition);
 
       element = elementFactory.createConnection(elementDefinition);