add node order

Author: xlorne

flow-engine-framework/src/main/java/com/codingapi/flow/manager/FlowNodeState.java

@@ -5,6 +5,7 @@
 import lombok.Getter;
 
 import java.util.ArrayList;
+import java.util.Comparator;
 import java.util.List;
 import java.util.stream.Stream;
 
@@ -31,7 +32,7 @@ public FlowNodeState(IFlowNode node) {
         this.branchNodeTypes.add(NodeType.PARALLEL_BRANCH.name());
     }
 
-    public boolean isEndNode(){
+    public boolean isEndNode() {
         return this.node.getType().equals(NodeType.END.name());
     }
 
@@ -65,8 +66,8 @@ public String getName() {
     }
 
     public List<IFlowNode> getFirstBlocks() {
-        List<IFlowNode> blocks = this.node.blocks();
-        if (blocks != null && !blocks.isEmpty()) {
+        List<IFlowNode> blocks = this.node.blocks().stream().sorted(Comparator.comparingInt(IFlowNode::getOrder)).toList();
+        if (!blocks.isEmpty()) {
             return Stream.of(blocks.get(0)).toList();
         }
         return new ArrayList<>();

flow-engine-framework/src/main/java/com/codingapi/flow/node/nodes/ConditionNode.java

@@ -37,6 +37,7 @@ public void addDefaultBranch(int count){
         List<IFlowNode> branches = new ArrayList<>();
         for (int i=0;i<count;i++){
             ConditionBranchNode branchNode = new ConditionBranchNode();
+            branchNode.setOrder(i+1);
             branches.add(branchNode);
         }
         this.setBlocks(branches);

flow-engine-framework/src/main/java/com/codingapi/flow/node/nodes/InclusiveNode.java

@@ -40,6 +40,7 @@ public void addDefaultBranch(int count){
         List<IFlowNode> branches = new ArrayList<>();
         for (int i=0;i<count;i++){
             InclusiveBranchNode branchNode = new InclusiveBranchNode();
+            branchNode.setOrder(i+1);
             branches.add(branchNode);
         }
         this.setBlocks(branches);

flow-engine-framework/src/main/java/com/codingapi/flow/node/nodes/ParallelNode.java

@@ -38,6 +38,7 @@ public void addDefaultBranch(int count){
         List<IFlowNode> branches = new ArrayList<>();
         for (int i=0;i<count;i++){
             ParallelBranchNode branchNode = new ParallelBranchNode();
+            branchNode.setOrder(i+1);
             branches.add(branchNode);
         }
         this.setBlocks(branches);

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/components/branch-adder/index.tsx

@@ -36,9 +36,6 @@ export const BranchAdderRender: React.FC<BranchAdderProps> = (props) => {
             operation.addBlock(
                 node,
                 block,
-                {
-                    index: 0,
-                }
             );
             setTimeout(() => {
                 handleClose();

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/hooks/use-editor-props.ts

@@ -13,11 +13,16 @@ import {FlowDocumentJSON, FlowNodeRegistry} from "@/components/design-editor/typ
 import {Adder} from "@/components/design-editor/components/node-adder";
 import {BranchAdder} from "@/components/design-editor/components/branch-adder";
 import {Collapse} from "../components/collapse";
+import {useDesignContext} from "@/components/design-panel/hooks/use-design-context";
 
 export function useEditorProps(initialData: FlowDocumentJSON, nodeRegistries: FlowNodeRegistry[]): FixedLayoutProps {
 
     const {token} = theme.useToken();
 
+    const {context} = useDesignContext();
+
+    const presenter = context.getPresenter();
+
     return useMemo<FixedLayoutProps>(
         () => ({
             /**
@@ -150,6 +155,8 @@ export function useEditorProps(initialData: FlowDocumentJSON, nodeRegistries: Fl
                     // Listen change to trigger auto save
                     const data = ctx.document.toJSON();
                     console.log('flow-engine auto save: ', data);
+                    presenter.syncNodes(data.nodes);
+
                 }, 100),
             },
             /**

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/header/index.tsx

@@ -112,6 +112,20 @@ export const NodeHeader: React.FC<NodeHeaderProps> = (props) => {
                         />
                     )}
                 </Field>
+                {!isSidebar && (
+                    <Field name="order">
+                        {({field: {value, onChange}}: FieldRenderProps<string>) => {
+                            if (nodeType === 'INCLUSIVE_BRANCH' || nodeType === 'CONDITION_BRANCH' || nodeType === 'PARALLEL_BRANCH') {
+                                return (
+                                    <>优先级:{value}</>
+                                )
+                            }
+                            return (
+                                <></>
+                            );
+                        }}
+                    </Field>
+                )}
             </Space>
 
             {isSidebar && (

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/node-hint/index.tsx

@@ -1,22 +1,24 @@
 import React from "react";
 import {GroovyScriptConvertorUtil} from "@flow-engine/flow-core";
 import {Field, FieldRenderProps} from "@flowgram.ai/fixed-layout-editor";
+import {Text} from "@flow-engine/flow-pc-ui";
 
-interface NodeHintProps{
-    fieldName:string;
+interface NodeHintProps {
+    fieldName: string;
 }
 
-export const NodeHint:React.FC<NodeHintProps> = (props) => {
+export const NodeHint: React.FC<NodeHintProps> = (props) => {
     return (
-        <span>
-            <Field
-                name={props.fieldName}
-                render={({ field: { value, onChange } }: FieldRenderProps<any>) => (
-                    <>
-                        {GroovyScriptConvertorUtil.getScriptTitle(value)}
-                    </>
-                )}
-            />
-        </span>
+        <Field
+            name={props.fieldName}
+            render={({field: {value, onChange}}: FieldRenderProps<any>) => (
+                <Text
+                    suffixCount={100}
+                    key={value}
+                >
+                    {GroovyScriptConvertorUtil.getScriptTitle(value)}
+                </Text>
+            )}
+        />
     )
 }

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/node-order/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {Field, FieldRenderProps} from "@flowgram.ai/fixed-layout-editor";
+import {Form, Input} from "antd";
+
+
+export const NodeOrder = () => {
+    const [form] = Form.useForm();
+
+    return (
+        <Form
+            form={form}
+            style={{
+                width: '100%',
+            }}
+            layout="vertical"
+        >
+            <Form.Item
+                label={"优先级"}
+                name={"order"}
+                tooltip={"数字越小优先级越高"}
+            >
+                <Field
+                    name={"order"}
+                    render={({field: {value, onChange}}: FieldRenderProps<any>) => (
+                        <Input
+                            type="number"
+                            value={value}
+                            placeholder={"请输入优先级"}
+                            onChange={(event) => {
+                                onChange(event.target.value);
+                            }}
+                        />
+                    )}
+                />
+            </Form.Item>
+        </Form>
+    )
+}

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/nodes/condition-branch/form-meta.tsx

@@ -8,13 +8,15 @@ import {NodePanel} from "@/components/design-editor/node-components/panel";
 import {ConditionScript} from "@/components/design-editor/node-components/condition";
 import React from "react";
 import {NodeHint} from "@/components/design-editor/node-components/node-hint";
+import {NodeOrder} from "@/components/design-editor/node-components/node-order";
 
 export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
     const isSidebar = useIsSidebar();
     if (isSidebar) {
         return (
             <NodePanel data={data}>
                 <NodeHeader/>
+                <NodeOrder/>
                 <ConditionScript/>
             </NodePanel>
         );