ptyin commented on issue #6136:
URL: https://github.com/apache/incubator-seata/issues/6136#issuecomment-1920534719
> Hi @ptyin ,
>
> Do you have any existing similar PR so that I can review it?
Some designer related PRs include:
- #6169
- #6118
However, I don not have any ongoing PRs with similar functionality. You can check [README](https://github.com/apache/incubator-seata/tree/2.x/saga/seata-saga-statemachine-designer#in-depth-analysis-of-saga-designer) to get acquainted with the designer project structure and some diagram-js basics first.
Remember the key for auto-layout is to add missing `style` properties for each element.
## Example
Suppose we have a Saga state machine definition as followed,
```json
{
"Name": "StateMachineAutoLayout",
"Comment": "This state machine is modeled by designer tools.",
"Version": "0.0.1",
"States": {
"ServiceTask-a9h2o51": {
"Name": "ServiceTask-a9h2o51",
"IsForCompensation": false,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"CompensateState": "CompensateFirstState",
"Type": "ServiceTask",
"Next": "ServiceTask-vdij28l"
},
"CompensateFirstState": {
"Name": "CompensateFirstState",
"IsForCompensation": true,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"Type": "ServiceTask"
},
"ServiceTask-vdij28l": {
"Name": "ServiceTask-vdij28l",
"IsForCompensation": false,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"Catch": [
{
"Exceptions": [],
"Next": "CompensationTrigger-uldp2ou"
}
],
"Type": "ServiceTask",
"Next": "Succeed-d4d41uw"
},
"CompensationTrigger-uldp2ou": {
"Name": "CompensationTrigger-uldp2ou",
"Type": "CompensationTrigger",
"Next": "Fail-9roxcv5"
},
"Fail-9roxcv5": {
"Name": "Fail-9roxcv5",
"ErrorCode": "",
"Message": "",
"Type": "Fail"
},
"Succeed-d4d41uw": {
"Name": "Succeed-d4d41uw",
"Type": "Succeed"
}
},
"StartState": "ServiceTask-a9h2o51"
}
```
It can be directly parsed by Java `StateMachineEngine`, however it cannot be imported to the designer due to lack of style information (like shape boundaries, edge waypoints, attached position, etc.). What we expect is to add these information, make the definition something like
```json
{
"Name": "StateMachineAutoLayout",
"Comment": "This state machine is modeled by designer tools.",
"Version": "0.0.1",
"style": {
"bounds": {
"x": 200,
"y": 200,
"width": 36,
"height": 36
}
},
"States": {
"ServiceTask-a9h2o51": {
"style": {
"bounds": {
"x": 300,
"y": 178,
"width": 100,
"height": 80
}
},
"Name": "ServiceTask-a9h2o51",
"IsForCompensation": false,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"CompensateState": "CompensateFirstState",
"Type": "ServiceTask",
"edge": {
"CompensateFirstState": {
"style": {
"waypoints": [
{
"original": {
"x": 350,
"y": 258
},
"x": 350,
"y": 258
},
{
"x": 350,
"y": 290
},
{
"original": {
"x": 350,
"y": 310
},
"x": 350,
"y": 310
}
],
"source": "ServiceTask-a9h2o51",
"target": "CompensateFirstState"
},
"Type": "Compensation"
},
"ServiceTask-vdij28l": {
"style": {
"waypoints": [
{
"original": {
"x": 400,
"y": 218
},
"x": 400,
"y": 218
},
{
"x": 530,
"y": 218
},
{
"original": {
"x": 550,
"y": 218
},
"x": 550,
"y": 218
}
],
"source": "ServiceTask-a9h2o51",
"target": "ServiceTask-vdij28l"
},
"Type": "Transition"
}
},
"Next": "ServiceTask-vdij28l"
},
"CompensateFirstState": {
"style": {
"bounds": {
"x": 300,
"y": 310,
"width": 100,
"height": 80
}
},
"Name": "CompensateFirstState",
"IsForCompensation": true,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"Type": "ServiceTask"
},
"ServiceTask-vdij28l": {
"style": {
"bounds": {
"x": 550,
"y": 178,
"width": 100,
"height": 80
}
},
"Name": "ServiceTask-vdij28l",
"IsForCompensation": false,
"Input": [
{}
],
"Output": {},
"Status": {},
"Retry": [],
"ServiceName": "",
"ServiceMethod": "",
"Catch": [
{
"Exceptions": [],
"Next": "CompensationTrigger-uldp2ou"
}
],
"Type": "ServiceTask",
"catch": {
"style": {
"bounds": {
"x": 632,
"y": 240,
"width": 36,
"height": 36
}
},
"edge": {
"CompensationTrigger-uldp2ou": {
"style": {
"waypoints": [
{
"original": {
"x": 650,
"y": 276
},
"x": 650,
"y": 276
},
{
"x": 650,
"y": 282
},
{
"original": {
"x": 650,
"y": 302
},
"x": 650,
"y": 302
}
],
"source": "ServiceTask-vdij28l",
"target": "CompensationTrigger-uldp2ou"
},
"Type": "ExceptionMatch"
}
}
},
"Next": "Succeed-d4d41uw",
"edge": {
"Succeed-d4d41uw": {
"style": {
"waypoints": [
{
"original": {
"x": 650,
"y": 218
},
"x": 650,
"y": 218
},
{
"x": 792,
"y": 218
},
{
"original": {
"x": 812,
"y": 218
},
"x": 812,
"y": 218
}
],
"source": "ServiceTask-vdij28l",
"target": "Succeed-d4d41uw"
},
"Type": "Transition"
}
}
},
"CompensationTrigger-uldp2ou": {
"style": {
"bounds": {
"x": 632,
"y": 302,
"width": 36,
"height": 36
}
},
"Name": "CompensationTrigger-uldp2ou",
"Type": "CompensationTrigger",
"Next": "Fail-9roxcv5",
"edge": {
"Fail-9roxcv5": {
"style": {
"waypoints": [
{
"original": {
"x": 668,
"y": 320
},
"x": 668,
"y": 320
},
{
"x": 792,
"y": 320
},
{
"original": {
"x": 812,
"y": 320
},
"x": 812,
"y": 320
}
],
"source": "CompensationTrigger-uldp2ou",
"target": "Fail-9roxcv5"
},
"Type": "Transition"
}
}
},
"Fail-9roxcv5": {
"style": {
"bounds": {
"x": 812,
"y": 302,
"width": 36,
"height": 36
}
},
"Name": "Fail-9roxcv5",
"ErrorCode": "",
"Message": "",
"Type": "Fail"
},
"Succeed-d4d41uw": {
"style": {
"bounds": {
"x": 812,
"y": 200,
"width": 36,
"height": 36
}
},
"Name": "Succeed-d4d41uw",
"Type": "Succeed"
}
},
"StartState": "ServiceTask-a9h2o51",
"edge": {
"style": {
"waypoints": [
{
"original": {
"x": 236,
"y": 218
},
"x": 236,
"y": 218
},
{
"x": 280,
"y": 218
},
{
"original": {
"x": 300,
"y": 218
},
"x": 300,
"y": 218
}
],
"target": "ServiceTask-a9h2o51"
},
"Type": "Transition"
}
}
```
And then it can be imported to the designer.
The layout algorithm is up to you, just make sure the final layout is human-readable.
If you have any questions or problems, please let me know. You can just leave comments here.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@seata.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@seata.apache.org
For additional commands, e-mail: notifications-help@seata.apache.org