@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/UpdateNodeDrawer/index.tsx

@@ -0,0 +1,195 @@
+import { BaseNodeDataType, NodeDataSetting } from '@/components/Flow/CustomNode/types';
+import { DragEnum } from '@/constants';
+import { DrawerForm, DrawerFormProps } from '@ant-design/pro-components';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { Position, useReactFlow, useUpdateNodeInternals, type Node } from '@xyflow/react';
+import { Form, Input, InputNumber, Radio } from 'antd';
+import { CheckboxGroupProps } from 'antd/es/checkbox';
+import React, { useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import './index.less';
+
+interface IProps extends DrawerFormProps {
+  node: Node<BaseNodeDataType> | null;
+  onSubmitAfter?: (values: any) => void;
+}
+
+const options: CheckboxGroupProps<string>['options'] = [
+  { label: '左', value: Position.Left },
+  { label: '上', value: Position.Top },
+  { label: '右', value: Position.Right },
+  { label: '下', value: Position.Bottom },
+];
+
+const FORM_SETTING_BASE = 'setting';
+
+const UpdateNodeDrawer: React.FC<IProps> = (props) => {
+  const { node, onSubmitAfter, ...reset } = props;
+  
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const { updateNodeData, setEdges } = useReactFlow();
+  // 以编程方式添加或删除节点的手柄或更新节点的 handle 位置，需要使用这个钩子让 React Flow 知道它。这将更新节点的内部尺寸并正确重新定位手柄。
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  useEffect(() => {
+    if (node) {
+      const { data = {} as Node<BaseNodeDataType>['data'] } = node;
+      const setting = data.setting || {};
+
+      const formData = {
+        ...data,
+        [FORM_SETTING_BASE]: {
+          ...setting,
+          sourceCount: setting.sourceHandles?.length || 1,
+          targetCount: setting.targetHandles?.length || 1,
+          style: {
+            width: setting.style?.width || node.measured?.width,
+            height: setting.style?.height || node.measured?.height,
+          },
+        },
+      };
+
+      form.setFieldsValue(formData);
+    } else {
+      form.resetFields();
+    }
+  }, [node]);
+
+  // 提交表单
+  const handleSubmit = (values: any) => {
+    if (!node) return Promise.resolve(true);
+    const { data = {} as Node<BaseNodeDataType>['data'] } = node;
+
+    const { setting = {} as NodeDataSetting } = data;
+    const { setting: valueSetting = {} as NodeDataSetting } = values;
+
+    // 增加锚点
+    if (valueSetting.sourceCount > setting.sourceHandles?.length) {
+      const newSourceHandles = new Array(valueSetting.sourceCount - setting.sourceHandles.length)
+        .fill('')
+        .map((_, i) => ({ id: uuidv4() }));
+      data.setting.sourceHandles = [...setting.sourceHandles, ...newSourceHandles];
+    }
+    if (valueSetting.targetCount > setting.targetHandles?.length) {
+      const newTargetHandles = new Array(valueSetting.targetCount - setting.targetHandles.length)
+        .fill('')
+        .map((_, i) => ({ id: uuidv4() }));
+
+      data.setting.targetHandles = [...setting.targetHandles, ...newTargetHandles];
+    }
+
+    // 删除锚点以及线
+    if (valueSetting.sourceCount < setting.sourceHandles?.length) {
+      const deleteSourceHandles = setting.sourceHandles.splice(valueSetting.sourceCount);
+      setEdges((edges) => {
+        return edges.filter((edge) => {
+          return deleteSourceHandles.every((handle) => handle.id !== edge.sourceHandle);
+        });
+      });
+    }
+    if (valueSetting.targetCount < setting.targetHandles?.length) {
+      const deleteTargetHandles = setting.targetHandles.splice(valueSetting.targetCount);
+      setEdges((edges) => {
+        return edges.filter((edge) => {
+          return deleteTargetHandles.every((handle) => handle.id !== edge.targetHandle);
+        });
+      });
+    }
+
+    // 更新节点
+    updateNodeData(node.id, {
+      ...data,
+      ...values,
+      setting: {
+        ...data.setting,
+        ...values.setting,
+      },
+    });
+    updateNodeInternals(node.id);
+    reset.onOpenChange?.(false);
+    onSubmitAfter?.(values);
+
+    return Promise.resolve(true);
+  };
+
+  if (!node) return <></>;
+
+  return (
+    <DrawerForm
+      form={form}
+      title={formatMessage({ id: 'lib.Flow.modal.node.update.title', defaultMessage: '修改节点外观配置' })}
+      open={!!node}
+      width={500}
+      {...reset}
+      onFinish={handleSubmit}
+      drawerProps={{ maskClosable: false, closable: false }}
+    >
+      {node.type !== DragEnum.TEXT_NODE && node.type !== DragEnum.GROUP_NODE ? (
+        <Form.Item label={formatMessage({ id: 'lib.Flow.modal.text.title', defaultMessage: '文案' })} name="name">
+          <Input disabled />
+        </Form.Item>
+      ) : (
+        <Form.Item label={formatMessage({ id: 'lib.Flow.modal.text.title', defaultMessage: '文案' })} name="label">
+          <Input />
+        </Form.Item>
+      )}
+      {node.type !== DragEnum.TEXT_NODE && node.type !== DragEnum.GROUP_NODE && (
+        <Form.Item
+          label={formatMessage({ id: 'lib.Flow.modal.label.style.themeColor', defaultMessage: '节点主题颜色' })}
+          name={[FORM_SETTING_BASE, 'themeColor']}
+        >
+          <MyColorPicker
+            onChange={(value) => form.setFieldValue([FORM_SETTING_BASE, 'themeColor'], value?.toHexString())}
+          />
+        </Form.Item>
+      )}
+      <Form.Item
+        label={formatMessage({ id: 'lib.Flow.modal.node.width', defaultMessage: '宽度' })}
+        name={[FORM_SETTING_BASE, 'style', 'width']}
+      >
+        <InputNumber />
+      </Form.Item>
+      <Form.Item
+        label={formatMessage({ id: 'lib.Flow.modal.node.height', defaultMessage: '高度' })}
+        name={[FORM_SETTING_BASE, 'style', 'height']}
+      >
+        <InputNumber />
+      </Form.Item>
+      {node.type !== DragEnum.TEXT_NODE && (
+        <>
+          <Form.Item
+            label={formatMessage({ id: 'lib.Flow.modal.anchor.targetPosition', defaultMessage: '连入锚点位置' })}
+            name={[FORM_SETTING_BASE, 'targetPosition']}
+          >
+            <Radio.Group options={options} optionType="button" buttonStyle="solid" />
+          </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'lib.Flow.modal.anchor.count', defaultMessage: '锚点数' })}
+            name={[FORM_SETTING_BASE, 'targetCount']}
+          >
+            <InputNumber min={0} step={1} precision={0} />
+          </Form.Item>
+        </>
+      )}
+      {node.type !== DragEnum.TEXT_NODE && (
+        <>
+          <Form.Item
+            label={formatMessage({ id: 'lib.Flow.modal.anchor.sourcePosition', defaultMessage: '连出锚点位置' })}
+            name={[FORM_SETTING_BASE, 'sourcePosition']}
+          >
+            <Radio.Group options={options} optionType="button" buttonStyle="solid" />
+          </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'lib.Flow.modal.anchor.count', defaultMessage: '锚点数' })}
+            name={[FORM_SETTING_BASE, 'sourceCount']}
+          >
+            <InputNumber min={0} step={1} precision={0} />
+          </Form.Item>
+        </>
+      )}
+    </DrawerForm>
+  );
+};
+
+export default React.memo(UpdateNodeDrawer);