File size: 2,646 Bytes
68ed806 f43283a 457b4e6 38eebf9 16f8eca 4f06073 16f8eca 457b4e6 16f8eca 457b4e6 e3b65ea 457b4e6 f43283a 38eebf9 16f8eca 4f06073 970e973 457b4e6 e3b65ea 95ccaf9 e3b65ea 4f06073 16f8eca e3b65ea 16f8eca 4f06073 16f8eca e3b65ea 457b4e6 e3b65ea 457b4e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import { useTranslate } from '@/hooks/common-hooks';
import { Flex } from 'antd';
import classNames from 'classnames';
import lowerFirst from 'lodash/lowerFirst';
import { Handle, NodeProps, Position } from 'reactflow';
import { Operator, SwitchElseTo, operatorMap } from '../../constant';
import { NodeData } from '../../interface';
import OperatorIcon from '../../operator-icon';
import CategorizeHandle from './categorize-handle';
import NodeDropdown from './dropdown';
import { useBuildCategorizeHandlePositions } from './hooks';
import styles from './index.less';
import NodePopover from './popover';
export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
const style = operatorMap[data.label as Operator];
const { t } = useTranslate('flow');
const { positions } = useBuildCategorizeHandlePositions({ data, id });
const operatorName = data.label;
return (
<NodePopover nodeId={id}>
<section
className={classNames(styles.logicNode, {
[styles.selectedNode]: selected,
})}
style={{
backgroundColor: style.backgroundColor,
color: style.color,
}}
>
<Handle
type="target"
position={Position.Left}
isConnectable
className={styles.handle}
id={'a'}
></Handle>
<Handle
type="target"
position={Position.Top}
isConnectable
className={styles.handle}
id={'b'}
></Handle>
<Handle
type="target"
position={Position.Bottom}
isConnectable
className={styles.handle}
id={'c'}
></Handle>
{operatorName === Operator.Switch && (
<CategorizeHandle top={50} right={-4} id={SwitchElseTo}>
To
</CategorizeHandle>
)}
{positions.map((position, idx) => {
return (
<CategorizeHandle
top={position.top}
right={position.right}
key={idx}
id={position.text}
idx={idx}
></CategorizeHandle>
);
})}
<Flex vertical align="center" justify="center" gap={6}>
<OperatorIcon
name={data.label as Operator}
fontSize={24}
></OperatorIcon>
<span className={styles.type}>{t(lowerFirst(data.label))}</span>
<NodeDropdown id={id}></NodeDropdown>
</Flex>
<section className={styles.bottomBox}>
<div className={styles.nodeName}>{data.name}</div>
</section>
</section>
</NodePopover>
);
}
|