feat: 增加通用节点渲染能力

Author: zhanbo.lh

packages/x-flow/src/components/CandidateNode/index.tsx

@@ -8,8 +8,8 @@ import CustomNode from '../CustomNode';
 import useStore from '../../models/store';
 
 const CandidateNode = () => {
-  const reactflow = useReactFlow();
   const { zoom } = useViewport();
+  const reactflow = useReactFlow();
 
   const {
     nodes,
@@ -31,6 +31,9 @@ const CandidateNode = () => {
     }))
   );
 
+
+  console.log(candidateNode, 'candidateNode+++')
+
   useEventListener('click', (ev) => {
     if (!candidateNode) {
       return;
@@ -76,7 +79,7 @@ const CandidateNode = () => {
         transformOrigin: '0 0',
       }}
     >
-      <CustomNode {...candidateNode as any} />
+      <CustomNode {...candidateNode as any} type={candidateNode?.data?._nodeType } />
     </div>
   );
 }

packages/x-flow/src/components/CustomNode/index.tsx

@@ -14,7 +14,7 @@ import './index.less';
 export default memo((props: any) => {
   const { id, type, data, layout, isConnectable, selected, onClick } = props;
   const { widgets, settingMap } = useContext(ConfigContext);
-  const NodeWidget = widgets[`${capitalize(type)}Node`];
+  const NodeWidget = widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
 
   const [isHovered, setIsHovered] = useState(false);
   const reactflow = useReactFlow();
@@ -67,9 +67,6 @@ export default memo((props: any) => {
     sourcePosition = Position.Bottom;
   }
 
-  console.log(settingMap, 'settingMap=====')
-
-
   return (
     <div
       className={classNames('xflow-node-container', {

packages/x-flow/src/nodes/index.tsx

@@ -1,2 +1,3 @@
 export { default as StartNode } from './node-start';
-export { default as EndNode } from './node-end';
+export { default as EndNode } from './node-end';
+export { default as CommonNode } from './node-common';

packages/x-flow/src/nodes/node-common/index.less

@@ -0,0 +1,16 @@
+.custom-node-start {
+  width: 240px;
+  padding: 0 12px;
+  background: #fff;
+  border-radius: 12px;
+
+  .title {
+    display: flex;
+    height: 50px;
+    align-items: center;
+    span {
+      font-weight: bold;
+      margin-left: 8px;
+    }
+  }
+}

packages/x-flow/src/nodes/node-common/index.tsx

@@ -0,0 +1,26 @@
+import React, { memo, useContext } from 'react';
+import { ConfigContext } from '../../models/context';
+import NodeContainer from '../../components/NodeContainer';
+
+
+export default memo((props: any) => {
+  const { type, onClick } = props;
+  const { settingMap } = useContext(ConfigContext);
+  const nodeSetting = settingMap[type] || {};
+  
+  return (
+    <NodeContainer
+      className='custom-node-code'
+      title={nodeSetting.title}
+      icon={{
+        type: nodeSetting?.icon.type,
+        style: { fontSize: 14, color: '#fff' },
+        bgColor: nodeSetting?.icon.bgColor || '#F79009'
+      }}
+      onClick={onClick}
+      hideDesc={true}
+    />
+  );
+});
+
+

packages/x-flow/src/nodes/node-common/setting/index.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+import { AnyObject } from 'antd/lib/_util/type';
+import FormRender, { useForm } from 'form-render';
+import { ICard, TYPES } from '../../constant';
+import FAutoComplete from '../../../components/FAutoComplete';
+
+export interface GlobalOutputProps {
+  data?: AnyObject;
+  onChange: (data: AnyObject) => void;
+  flowList: ICard[];
+  inputItem: ICard;
+  readonly?: boolean;
+}
+
+const getSchema = (request: any) => ({
+  type: 'object',
+  displayType: 'row',
+  properties: {
+    list: {
+      type: 'array',
+      widget: 'tableList',
+      props: {
+        hideMove: true,
+        hideCopy: true,
+        size: 'small',
+        addBtnProps: {
+          type: 'dashed',
+        },
+        actionColumnProps: {
+          width: 60,
+        },
+      },
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            title: '名称',
+            type: 'string',
+            width: 200,
+            placeholder: '请输入',
+            rules: [
+              {
+                pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+                message: '只能包含字母、数字和下划线且以字母或划线开头',
+              },
+            ],
+          },
+          dataType: {
+            title: '类型',
+            type: 'string',
+            enum: TYPES.map((el) => el.toUpperCase()),
+            enumNames: TYPES,
+            width: 120,
+            widget: 'select',
+            placeholder: '请选择',
+          },
+          value: {
+            title: '值',
+            type: 'string',
+            widget: 'FAutoComplete',
+            props: {
+              placeholder: '${组件名.output}',
+              request,
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default (props: GlobalOutputProps) => {
+  const { data, onChange, inputItem, flowList, readonly } = props;
+
+  const form = useForm();
+  const flowListRef = useRef<any>();
+  const inputRef = useRef<any>();
+
+  useEffect(() => {
+    flowListRef.current = flowList;
+    inputRef.current = inputItem;
+  }, [flowList, inputItem]);
+
+  const watch = {
+    '#': (allValues: any) => {
+      onChange({ ...data, ...allValues });
+    }
+  };
+
+  const request = (val: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const inputValue = inputRef.current?.data;
+        const inputText = 'inputs';
+        const options = (inputValue?.list || [])
+          .filter((el: any) => !!el.name)
+          .map((item: any) => '${#' + `${inputText}.${item.name}` + `}`);
+        const nodes = (flowListRef?.current || [])
+          .filter((el: any) => el.code !== 'Output')
+          .map((item: any) => {
+            return '${#' + `${item.code}.output` + `}`;
+          });
+
+        resolve(
+          [...options, ...nodes]
+            .filter((el: string) => val && el.includes(val))
+            .map((el: string) => {
+              return {
+                value: el,
+              };
+            }),
+        );
+      }, 10);
+    });
+  };
+  const schema = getSchema(request);
+
+  return (
+    <FormRender
+      schema={schema}
+      form={form}
+      watch={watch}
+      readOnly={readonly}
+      widgets={{ FAutoComplete }}
+      onMount={() => {
+        form.setValues({ list: data?.list });
+      }}
+    />
+  );
+}

packages/x-flow/src/nodes/node-start/index.tsx

@@ -4,7 +4,6 @@ import NodeContainer from '../../components/NodeContainer';
 export default memo((props: any) => {
   const { onClick } = props;
 
-
   return (
     <NodeContainer
       className='custom-node-code'