From 27e743c83c1dd3b8fc30dfbb492a1dd090729020 Mon Sep 17 00:00:00 2001
From: "Bane.Shi" <fengxiaotx@163.com>
Date: Thu, 21 Dec 2023 10:20:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8F=8C=E5=90=91=E5=90=8C=E6=AD=A5=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/App.tsx                               | 13 ++++----
 .../src/container/ApprovalProcessDesigner.tsx | 31 +++++++++++++------
 .../src/model/ApprovalProcessEngine.ts        | 13 +++++---
 .../src/widget/ActivityWidget.tsx             |  2 +-
 .../src/widget/AddActivityItemWidget.tsx      |  1 -
 5 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/examples/approval-process-designer-react/src/App.tsx b/examples/approval-process-designer-react/src/App.tsx
index c7ada51..64dc05a 100644
--- a/examples/approval-process-designer-react/src/App.tsx
+++ b/examples/approval-process-designer-react/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import {
     ApprovalProcessDesigner, GlobalStore,
@@ -10,10 +10,7 @@ import {Watermark} from "antd";
 import * as Icons from "./activities/Icons"
 
 function App() {
-    const handleOnChange = (value: any) => {
-        console.log("[processNode]", value)
-    }
-    const processNode: IProcessNode = {
+    const [data,setData] = useState<IProcessNode>({
         type: 'START',
         componentName: 'StartActivity',
         title: '发起人',
@@ -51,13 +48,17 @@ function App() {
                 ]
             }
         }
+    })
+    const handleOnChange = (value: any) => {
+        console.log("[processNode]", value)
+        setData(value)
     }
 
     GlobalStore.registerIcons(Icons);
     return (
         <div>
             <Watermark style={{height: '100%'}} content={['书阙', '北斗开源']}>
-                <ApprovalProcessDesigner value={processNode} onChange={handleOnChange}>
+                <ApprovalProcessDesigner value={data} onChange={handleOnChange}>
                     <StudioPanel>
                         <ProcessWidget activities={{
                             StartActivity,
diff --git a/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx b/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx
index be32819..b02dd78 100644
--- a/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx
+++ b/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx
@@ -1,7 +1,8 @@
-import React, {FC, useEffect} from "react"
+import React, {FC, useEffect, useMemo, useState} from "react"
 import {ApprovalProcessContext} from "../context";
 import {ApprovalProcessEngine} from "../model/ApprovalProcessEngine";
-import {IProcessNode, ProcessNode} from "../model";
+import {IProcessNode} from "../model";
+import _ from "lodash";
 
 type ApprovalProcessDesignerProps = {
     children?: React.ReactNode;
@@ -16,20 +17,30 @@ export const ApprovalProcessDesigner: FC<ApprovalProcessDesignerProps> = ({
                                                                               value,
                                                                               onChange
                                                                           }) => {
-    let scopeEngine = engine;
-    if (!scopeEngine) {
-        scopeEngine = new ApprovalProcessEngine();
-    }
+    const [scopeValue, setScopeValue] = useState(value)
+
+
+    let designerEngine = useMemo(() => {
+        let scopeEngine = engine;
+        if (!engine) {
+            scopeEngine = new ApprovalProcessEngine({value: value});
+        }
+        return scopeEngine
+    }, [engine])
+
+    designerEngine?.setOnchange((value: any) => {
+        setScopeValue(value)
+        onChange?.(value)
+    })
 
-    scopeEngine?.setOnchange(onChange)
 
     useEffect(() => {
-        if (value) {
-            scopeEngine.process.from(value)
+        if (value && !_.isEqual(value, scopeValue)) {
+            designerEngine.process.from(value)
         }
     }, [value])
 
-    return <ApprovalProcessContext.Provider value={scopeEngine}>
+    return <ApprovalProcessContext.Provider value={designerEngine}>
         {children}
     </ApprovalProcessContext.Provider>
 }
\ No newline at end of file
diff --git a/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts b/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts
index a3b5d57..30d7aca 100644
--- a/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts
+++ b/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts
@@ -1,11 +1,11 @@
-import {ProcessNode} from "./ProcessNode";
+import {IProcessNode, ProcessNode} from "./ProcessNode";
 import {define, observable} from "@formily/reactive";
 import {GlobalStore} from "../store";
 import {DesignerCore} from "../util";
 import _ from "lodash";
 
 interface IApprovalProcessEngine {
-
+    value?: IProcessNode
 }
 
 export class ApprovalProcessEngine {
@@ -18,7 +18,10 @@ export class ApprovalProcessEngine {
             type: 'START',
             componentName: 'StartActivity',
             title: '开始'
-        });
+        })
+        if (engine?.value) {
+            this.process.from(engine.value)
+        }
         this.makeObservable()
     }
 
@@ -29,9 +32,9 @@ export class ApprovalProcessEngine {
         })
     }
 
-    handleChange = _.debounce((msg: any)=>{
+    handleChange = _.debounce((msg: any) => {
         this.onChange?.(DesignerCore.transformToSchema(this.process))
-    },100)
+    }, 100)
 
     setOnchange(fn: (value: any) => void) {
         this.onChange = fn
diff --git a/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx b/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx
index 9e6d32b..3efbd31 100644
--- a/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx
+++ b/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx
@@ -15,7 +15,7 @@ export const ActivityWidget: FC<ActivityWidgetProps> = observer(({
                                                                      processNode,
                                                                      ...props
                                                                  }) => {
-    console.log("ss", processNode.id)
+    console.log("ss", processNode.id,processNode)
     const activities = useActivities()
     const handleRender = () => {
         const Activity: ActivityFC<any> = _.get(activities, [processNode.componentName]);
diff --git a/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx b/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx
index 9a0dd99..3b70f43 100644
--- a/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx
+++ b/packages/approval-process-designer-react/src/widget/AddActivityItemWidget.tsx
@@ -41,7 +41,6 @@ export const AddActivityItemWidget: FC<ActivityCardWidgetProps> = ({
     const handleClick = () => {
         onClick?.(processNode)
         const activity = GlobalStore.getActivityResource(resource?.componentName)
-        debugger
         processNode.setNextNode(activity?.node.clone(processNode))
     }
     return <ActivityCardWidgetStyled onClick={handleClick}>