perf: extract modules

This commit is contained in:
archer
2023-08-02 18:08:27 +08:00
parent 8862e353aa
commit b7934ecc27
8 changed files with 67 additions and 16 deletions

View File

@@ -16,7 +16,7 @@ import { ContextExtractEnum } from '@/constants/flow/flowField';
import { FlowOutputItemTypeEnum, FlowValueTypeEnum } from '@/constants/flow';
const NodeExtract = ({
data: { inputs, outputs, moduleId, onChangeNode, ...props }
data: { inputs, outputs, moduleId, onChangeNode, onDelEdge, ...props }
}: NodeProps<FlowModuleItemType>) => {
const { t } = useTranslation();
const [editExtractFiled, setEditExtractField] = useState<ContextExtractAgentItemType>();
@@ -105,6 +105,7 @@ const NodeExtract = ({
key: '',
value: newOutputVal
});
onDelEdge({ moduleId, sourceHandle: item.key });
}}
/>
</Td>
@@ -168,6 +169,10 @@ const NodeExtract = ({
value: newOutputs
});
if (editExtractFiled.key && editExtractFiled.key !== data.key) {
onDelEdge({ moduleId, sourceHandle: editExtractFiled.key });
}
setEditExtractField(undefined);
}}
/>

View File

@@ -162,7 +162,6 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
});
return modules;
}, [edges, nodes]);
const onChangeNode = useCallback(
({ moduleId, key, type = 'inputs', value, valueKey = 'value' }: FlowModuleItemChangeProps) => {
setNodes((nodes) =>
@@ -205,6 +204,29 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
},
[setEdges, setNodes]
);
const onDelEdge = useCallback(
({
moduleId,
sourceHandle,
targetHandle
}: {
moduleId: string;
sourceHandle?: string;
targetHandle?: string;
}) => {
if (!sourceHandle && !targetHandle) return;
setEdges((state) =>
state.filter((edge) => {
if (edge.source === moduleId && edge.sourceHandle === sourceHandle) return false;
if (edge.target === moduleId && edge.targetHandle === targetHandle) return false;
return true;
})
);
},
[setEdges]
);
const onAddNode = useCallback(
({ template, position }: { template: FlowModuleTemplateType; position: XYPosition }) => {
if (!reactFlowWrapper.current) return;
@@ -221,12 +243,13 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
position: { x: mouseX, y: mouseY }
},
onChangeNode,
onDelNode
onDelNode,
onDelEdge
})
)
);
},
[onChangeNode, onDelNode, setNodes, x, y, zoom]
[onDelEdge, onChangeNode, onDelNode, setNodes, x, y, zoom]
);
const onDelConnect = useCallback(
(id: string) => {
@@ -309,14 +332,15 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
appModule2FlowNode({
item,
onChangeNode,
onDelNode
onDelNode,
onDelEdge
})
)
);
onFixView();
},
[onDelConnect, setEdges, setNodes, onFixView, onChangeNode, onDelNode]
[onDelConnect, setEdges, setNodes, onFixView, onChangeNode, onDelNode, onDelEdge]
);
useEffect(() => {