feat: 解决数据双向同步的问题

examples/approval-process-designer-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trionesdev/approval-process-designer-react-example",
-  "version": "0.1.0",
+  "version": "0.0.1-beta.1",
   "private": true,
   "homepage": ".",
   "dependencies": {
@@ -12,9 +12,9 @@
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
+    "antd": "^5.11.5",
     "craco-babel-loader": "^1.0.4",
     "craco-less": "^2.0.0",
-    "antd": "^5.11.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "PUBLIC_URL=. &&  craco build",
+    "build": "cross-env PUBLIC_URL=. &&  craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
   },

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: '发起人',
@@ -30,7 +27,7 @@ function App() {
                     componentName: 'CcActivity',
                     title: '抄送人',
                 },
-                children: [
+                conditionNodes: [
                     {
                         type: 'CONDITION',
                         componentName: 'ConditionActivity',
@@ -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,

examples/approval-process-designer-react/src/activities/CcActivity.tsx

@@ -1,7 +1,12 @@
-import {ActivityFC, CcActivity as TdCcActivity, DesignerCore} from "@trionesdev/approval-process-designer-react";
+import {
+    ActivityFC,
+    CcActivity as TdCcActivity,
+    DesignerCore,
+    IActivity
+} from "@trionesdev/approval-process-designer-react";
 import createResource = DesignerCore.createResource;
 
-export const CcActivity: ActivityFC<any> = TdCcActivity
+export const CcActivity: ActivityFC<IActivity> = TdCcActivity
 
 CcActivity.Resource = createResource({
     type: 'CC',

examples/approval-process-designer-react/src/activities/ConditionActivity.tsx

@@ -1,12 +1,12 @@
 import {
     ActivityFC,
     ConditionActivity as TdConditionActivity,
-    DesignerCore
+    DesignerCore, IActivity
 } from "@trionesdev/approval-process-designer-react";
 import createResource = DesignerCore.createResource;
 
 
-export const ConditionActivity: ActivityFC<any> = TdConditionActivity
+export const ConditionActivity: ActivityFC<IActivity> = TdConditionActivity
 ConditionActivity.Resource = createResource({
     type: 'CONDITION',
     componentName: 'ConditionActivity'

examples/approval-process-designer-react/src/activities/RouteActivity.tsx

@@ -1,7 +1,12 @@
-import {ActivityFC, DesignerCore, RouteActivity as TdRouteActivity} from "@trionesdev/approval-process-designer-react";
+import {
+    ActivityFC,
+    DesignerCore,
+    IActivity,
+    RouteActivity as TdRouteActivity
+} from "@trionesdev/approval-process-designer-react";
 import createResource = DesignerCore.createResource;
 
-export const RouteActivity: ActivityFC<any> = TdRouteActivity
+export const RouteActivity: ActivityFC<IActivity> = TdRouteActivity
 
 RouteActivity.Resource = createResource({
     icon: 'RouteActivityIcon',

examples/approval-process-designer-react/src/activities/StartActivity.tsx

@@ -1,7 +1,12 @@
-import {ActivityFC, DesignerCore, StartActivity as TdStartActivity} from "@trionesdev/approval-process-designer-react";
+import {
+    ActivityFC,
+    DesignerCore,
+    IActivity,
+    StartActivity as TdStartActivity
+} from "@trionesdev/approval-process-designer-react";
 import createResource = DesignerCore.createResource;
 
-export const StartActivity: ActivityFC<any> = TdStartActivity
+export const StartActivity: ActivityFC<IActivity> = TdStartActivity
 StartActivity.Resource = createResource({
     type: 'START',
     componentName: 'StartActivity',

lerna.json

@@ -1,4 +1,4 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "0.0.0"
+  "version": "0.0.1-beta.1"
 }

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "lerna": "^8.0.0"
+    "lerna": "^8.0.0",
+    "cross-env": "^7.0.3"
   }
 }

packages/approval-process-designer-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trionesdev/approval-process-designer-react",
-  "version": "0.0.1",
+  "version": "0.0.1-beta.1",
   "description": "",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

packages/approval-process-designer-react/src/activity/Activity.tsx

@@ -144,7 +144,9 @@ export const Activity: FC<ActivityProps> = observer(({
         }
     }
 
-    const handleRemove = () => {
+    const handleRemove = (e: any) => {
+        e.stopPropagation();
+        e.preventDefault();
         processNode?.remove()
     }
 

packages/approval-process-designer-react/src/activity/CcActivity.tsx

@@ -1,12 +1,8 @@
 import React, {FC} from "react"
-import {ProcessNode} from "../model";
 import {Activity} from "./Activity";
+import {IActivity} from "../types";
 
-type CcActivityProps = {
-    processNode: ProcessNode
-    nextActivity: React.ReactNode
-    onClick?: (processNode: ProcessNode) => void
-}
+type CcActivityProps = IActivity
 
 export const CcActivity: FC<CcActivityProps> = ({
                                                     processNode,

packages/approval-process-designer-react/src/activity/CondiitionActivity.tsx

@@ -1,13 +1,12 @@
 import styled from "@emotion/styled";
 import React, {createRef, FC, useEffect, useState} from "react";
-import {ProcessNode} from "../model";
 import classNames from "classnames";
 import {AddActivityBox} from "./AddActivityBox";
 import {BranchBox} from "./BranchBox";
 import {CloseIcon, QuestionIcon} from "../Icons";
 import {Tooltip} from "../components";
 import {IconWidget} from "../widget/IconWidget";
-import {GlobalStore} from "../store";
+import {IActivity} from "../types";
 
 const ConditionActivityStyled = styled('div')({
     boxSizing: 'border-box',
@@ -134,11 +133,7 @@ const ConditionActivityStyled = styled('div')({
     }
 })
 
-type ConditionActivityProps = {
-    processNode?: ProcessNode
-    nextActivity?: React.ReactNode
-    onClick?: (processNode: ProcessNode) => void
-}
+type ConditionActivityProps = IActivity
 
 export const ConditionActivity: FC<ConditionActivityProps> = ({
                                                                   processNode,

packages/approval-process-designer-react/src/activity/RouteActivity.tsx

@@ -1,7 +1,7 @@
 import React, {FC} from "react"
 import {RouteBranches} from "./RouteBranches";
 import styled from "@emotion/styled";
-import {ProcessNode} from "../model";
+import {IActivity} from "../types";
 
 const RouteActivityStyled = styled('div')({
     display: 'flex',
@@ -40,10 +40,8 @@ const RouteActivityStyled = styled('div')({
     }
 })
 
-type RouteActivityProps = {
+type RouteActivityProps = IActivity & {
     children?: React.ReactNode,
-    processNode?: ProcessNode,
-    nextActivity?: React.ReactNode,
 }
 
 export const RouteActivity: FC<RouteActivityProps> = ({children, processNode, nextActivity}) => {

packages/approval-process-designer-react/src/activity/RouteBranches.tsx

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 import React, {FC} from "react";
 import {AddActivityBox} from "./AddActivityBox";
-import * as process from "process";
 import {ProcessNode} from "../model";
 
 const RouteBranchesStyled = styled('div')({

packages/approval-process-designer-react/src/activity/StartActivity.tsx

@@ -1,12 +1,8 @@
 import React, {FC} from "react"
 import {Activity} from "./Activity";
-import {ProcessNode} from "../model";
+import {IActivity} from "../types";
 
-type StartActivityProps = {
-    processNode: ProcessNode
-    nextActivity: React.ReactNode
-    onClick?: (processNode: ProcessNode) => void
-}
+type StartActivityProps = IActivity
 
 export const StartActivity: FC<StartActivityProps> = ({
                                                           processNode,

packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx

@@ -1,12 +1,13 @@
-import React, {FC, useEffect} from "react"
+import React, {FC, useEffect, useMemo, useState} from "react"
 import {ApprovalProcessContext} from "../context";
 import {ApprovalProcessEngine} from "../model/ApprovalProcessEngine";
-import {ProcessNode} from "../model";
+import {IProcessNode} from "../model";
+import _ from "lodash";
 
 type ApprovalProcessDesignerProps = {
     children?: React.ReactNode;
     engine?: ApprovalProcessEngine
-    value?: any
+    value?: IProcessNode
     onChange?: (value: any) => void
 }
 
@@ -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>
 }

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