perf: flow value type

This commit is contained in:
archer
2023-07-27 12:10:30 +08:00
parent 97c7984dd1
commit 118e333600
15 changed files with 292 additions and 79 deletions

View File

@@ -3,7 +3,6 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { authUser } from '@/service/utils/auth';
import { connectToDatabase, App } from '@/service/mongo';
import { EditFormType } from '@/utils/app';
import { AppModuleInputItemType } from '@/types/app';
import { FlowModuleTypeEnum, SpecialInputKeyEnum } from '@/constants/flow';
import { TaskResponseKeyEnum } from '@/constants/chat';

View File

@@ -11,7 +11,8 @@ import { Handle, Position } from 'reactflow';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 4);
import MyIcon from '@/components/Icon';
import { FlowOutputItemTypeEnum } from '@/constants/flow';
import { FlowOutputItemTypeEnum, FlowValueTypeEnum } from '@/constants/flow';
import SourceHandle from '../render/SourceHandle';
const NodeCQNode = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
@@ -82,19 +83,7 @@ const NodeCQNode = ({
});
}}
/>
<Handle
style={{
top: '50%',
right: '-14px',
transform: 'translate(50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
type="source"
id={item.key}
position={Position.Right}
/>
<SourceHandle handleKey={item.key} valueType={FlowValueTypeEnum.boolean} />
</Box>
</Box>
</Flex>

View File

@@ -1,31 +1,26 @@
import React from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { NodeProps } from 'reactflow';
import { Box } from '@chakra-ui/react';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Container from '../modules/Container';
import { SystemInputEnum } from '@/constants/app';
import { FlowValueTypeEnum } from '@/constants/flow';
import SourceHandle from '../render/SourceHandle';
const QuestionInputNode = ({
data: { inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard minW={'220px'} {...props}>
<NodeCard minW={'240px'} {...props}>
<Container borderTop={'2px solid'} borderTopColor={'myGray.200'} textAlign={'end'}>
<Box></Box>
<Handle
style={{
bottom: '0',
right: '0',
transform: 'translate(50%,-5px)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={SystemInputEnum.userChatInput}
type="source"
position={Position.Right}
/>
<Box position={'relative'}>
<SourceHandle
handleKey={SystemInputEnum.userChatInput}
valueType={FlowValueTypeEnum.string}
/>
</Box>
</Container>
</NodeCard>
);

View File

@@ -37,7 +37,11 @@ const NodeCard = ({
</Box>
{description && (
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
<QuestionOutlineIcon
display={['none', 'inline']}
transform={'translateY(-1px)'}
ml={1}
/>
</MyTooltip>
)}
<Box flex={1} />

View File

@@ -12,10 +12,10 @@ import {
} from '@chakra-ui/react';
import { FlowInputItemTypeEnum } from '@/constants/flow';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { Handle, Position } from 'reactflow';
import MySelect from '@/components/Select';
import MySlider from '@/components/Slider';
import MyTooltip from '@/components/MyTooltip';
import TargetHandle from './TargetHandle';
export const Label = ({
required = false,
@@ -35,7 +35,7 @@ export const Label = ({
)}
{description && (
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
<QuestionOutlineIcon display={['none', 'inline']} transform={'translateY(-1px)'} ml={1} />
</MyTooltip>
)}
</Box>
@@ -61,6 +61,10 @@ const RenderBody = ({
{!!item.label && (
<Label required={item.required} description={item.description}>
{item.label}
{(item.type === FlowInputItemTypeEnum.target || item.valueType) && (
<TargetHandle handleKey={item.key} valueType={item.valueType} />
)}
</Label>
)}
<Box mt={2} className={'nodrag'}>
@@ -148,22 +152,6 @@ const RenderBody = ({
{item.type === FlowInputItemTypeEnum.custom && CustomComponent[item.key] && (
<>{CustomComponent[item.key]({ ...item })}</>
)}
{item.type === FlowInputItemTypeEnum.target && (
<Handle
style={{
top: '50%',
left: '-14px',
transform: 'translate(-50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={item.key}
type="target"
position={Position.Left}
onConnect={(params) => console.log('handle onConnect', params)}
/>
)}
</Box>
</Box>
)

View File

@@ -5,6 +5,7 @@ import { FlowOutputItemTypeEnum } from '@/constants/flow';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { Handle, Position } from 'reactflow';
import MyTooltip from '@/components/MyTooltip';
import SourceHandle from './SourceHandle';
const Label = ({
children,
@@ -16,7 +17,7 @@ const Label = ({
<Flex as={'label'} justifyContent={'right'} alignItems={'center'} position={'relative'}>
{description && (
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} mr={1} />
<QuestionOutlineIcon display={['none', 'inline']} transform={'translateY(-1px)'} mr={1} />
</MyTooltip>
)}
{children}
@@ -33,19 +34,7 @@ const RenderBody = ({ flowOutputList }: { flowOutputList: FlowOutputItemType[] }
<Label description={item.description}>{item.label}</Label>
<Box mt={FlowOutputItemTypeEnum.answer ? 0 : 2} className={'nodrag'}>
{item.type === FlowOutputItemTypeEnum.source && (
<Handle
style={{
top: '50%',
right: '-14px',
transform: 'translate(50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
type="source"
id={item.key}
position={Position.Right}
/>
<SourceHandle handleKey={item.key} valueType={item.valueType} />
)}
</Box>
</Box>

View File

@@ -0,0 +1,42 @@
import React, { useMemo } from 'react';
import { Box, BoxProps } from '@chakra-ui/react';
import { Handle, Position } from 'reactflow';
import { FlowValueTypeEnum, FlowValueTypeStyle } from '@/constants/flow';
interface Props extends BoxProps {
handleKey: string;
valueType?: `${FlowValueTypeEnum}`;
}
const SourceHandle = ({ handleKey, valueType, ...props }: Props) => {
const valueStyle = useMemo(
() =>
valueType
? FlowValueTypeStyle[valueType]
: (FlowValueTypeStyle[FlowValueTypeEnum.other] as any),
[]
);
return (
<Box
position={'absolute'}
top={'50%'}
right={'-16px'}
transform={'translate(50%,-50%)'}
{...props}
>
<Handle
style={{
width: '12px',
height: '12px',
...valueStyle
}}
type="source"
id={handleKey}
position={Position.Right}
/>
</Box>
);
};
export default SourceHandle;

View File

@@ -0,0 +1,44 @@
import React, { useMemo } from 'react';
import { Box, BoxProps } from '@chakra-ui/react';
import { Handle, OnConnect, Position } from 'reactflow';
import { FlowValueTypeEnum, FlowValueTypeStyle } from '@/constants/flow';
interface Props extends BoxProps {
handleKey: string;
valueType?: `${FlowValueTypeEnum}`;
onConnect?: OnConnect;
}
const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
const valueStyle = useMemo(
() =>
valueType
? FlowValueTypeStyle[valueType]
: (FlowValueTypeStyle[FlowValueTypeEnum.other] as any),
[]
);
return (
<Box
position={'absolute'}
top={'50%'}
left={'-16px'}
transform={'translate(50%,-50%)'}
{...props}
>
<Handle
style={{
width: '12px',
height: '12px',
...valueStyle
}}
type="target"
id={handleKey}
datatype={valueStyle}
position={Position.Left}
/>
</Box>
);
};
export default TargetHandle;