重构

Author: codebdy

src/workflow-editor/WorkflowDiagram/defaultMaterials.ts

@@ -1,18 +1,24 @@
-import { conditionIcon, dealIcon, notifierIcon, sealIcon } from "../icons";
+import { routeIcon, dealIcon, notifierIcon, sealIcon } from "../icons";
 import { NodeType } from "../interfaces";
 import { INodeMaterial } from "../interfaces/material";
 import { createUuid } from "../utils/create-uuid";
 
 export const defaultMaterials: INodeMaterial[] = [
+  //发起人节点
   {
+    //标题，引擎会通过国际化t函数翻译
     label: "promoter",
+    //颜色
     color: "rgb(87, 106, 149)",
+    //引擎会直接去defaultConfig来生成一个节点，会克隆一份defaultConfig数据保证immutable
     defaultConfig: {
+      //默认配置，可以把类型上移一层，但是如果增加其它默认属性的话，不利于扩展
       nodeType: NodeType.start,
     },
     //不在物料板显示
     hidden: true,
   },
+  //审批人节点
   {
     color: "#ff943e",
     label: "approver",
@@ -21,6 +27,7 @@ export const defaultMaterials: INodeMaterial[] = [
       nodeType: NodeType.approver,
     },
   },
+  //通知人节点
   {
     color: "#4ca3fb",
     label: "notifier",
@@ -37,11 +44,12 @@ export const defaultMaterials: INodeMaterial[] = [
       nodeType: NodeType.audit,
     },
   },
+  //条件节点
   {
     color: "#15bc83",
     label: "routeNode",
-    icon: conditionIcon,
-    createDefault: ({t}) => {
+    icon: routeIcon,
+    createDefault: ({ t }) => {
       return {
         id: createUuid(),
         nodeType: NodeType.route,
@@ -61,6 +69,7 @@ export const defaultMaterials: INodeMaterial[] = [
     },
 
   },
+  //分支节点
   {
     label: "condition",
     color: "",

src/workflow-editor/icons.tsx

@@ -32,7 +32,7 @@ export const dealIcon = <span role="img" className="anticon">
   </svg>
 </span>
 
-export const conditionIcon = <span role="img" className="anticon">
+export const routeIcon = <span role="img" className="anticon">
   <svg width='1em' height="1em" fill="currentColor" viewBox="0 0 1024 1024">
     <path d="M525.96 69.895l256.652 124.437c15.903 7.71 22.544 26.852 14.834 42.755a32 32 0 0 1-14.834 14.833L544 367.61V472c0 1.006-0.023 2.006-0.07 3H720c34.993 0 63.426 28.084 63.991 62.942L784 539v123h96c17.673 0 32 14.327 32 32v186c0 17.673-14.327 32-32 32H624c-17.673 0-32-14.327-32-32V694c0-17.673 14.327-32 32-32h96V539H304v123h96c17.673 0 32 14.327 32 32v186c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V694c0-17.673 14.327-32 32-32h96V539c0-34.993 28.084-63.426 62.942-63.991L304 475h176V367.61L241.388 251.92c-15.903-7.71-22.544-26.852-14.834-42.755a32 32 0 0 1 14.834-14.833L498.039 69.895a32 32 0 0 1 27.922 0z" p-id="41560"></path>
   </svg>

src/workflow-editor/nodes/AddButton/MaterialItem.tsx

@@ -49,7 +49,8 @@ export const MaterialItem = memo((
     const newId = createUuid()
     const newName = t(material.label)
     if (material.defaultConfig) {
-      editorStore?.addNode(nodeId, { ...material.defaultConfig, id: newId, name: newName })
+      //复制一份配置数据，保证immutable
+      editorStore?.addNode(nodeId, { ...JSON.parse(JSON.stringify(material.defaultConfig)), id: newId, name: newName })
     } else if (material.createDefault) {
       editorStore?.addNode(nodeId, { ...material.createDefault({ t }), name: newName })
     } else {