|
|
|
@ -1,4 +1,4 @@
|
|
|
|
import React, { useEffect } from 'react';
|
|
|
|
import React, { useEffect, useMemo } from 'react';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
ReactFlow,
|
|
|
|
ReactFlow,
|
|
|
|
Background,
|
|
|
|
Background,
|
|
|
|
@ -76,7 +76,7 @@ interface FlowEditorMainProps {
|
|
|
|
editEdge: (edge: Edge) => void;
|
|
|
|
editEdge: (edge: Edge) => void;
|
|
|
|
copyNode: (node: Node) => void;
|
|
|
|
copyNode: (node: Node) => void;
|
|
|
|
addNodeOnEdge: (nodeType: string, node: any) => void;
|
|
|
|
addNodeOnEdge: (nodeType: string, node: any) => void;
|
|
|
|
addNodeOnPane: (nodeType: string, position: { x: number; y: number }, node?: any) => void;
|
|
|
|
addNodeOnPane: (nodeType: string, position: { x: number, y: number }, node?: any) => void;
|
|
|
|
handleAddNode: (nodeType: string, node: any) => void;
|
|
|
|
handleAddNode: (nodeType: string, node: any) => void;
|
|
|
|
saveFlowDataToServer: () => void;
|
|
|
|
saveFlowDataToServer: () => void;
|
|
|
|
handleRun: (running: boolean) => void;
|
|
|
|
handleRun: (running: boolean) => void;
|
|
|
|
@ -135,6 +135,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
|
|
|
|
|
|
|
|
|
|
|
|
const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
|
|
|
|
const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
|
|
|
|
const { undo, redo, canUndo, canRedo } = useHistory();
|
|
|
|
const { undo, redo, canUndo, canRedo } = useHistory();
|
|
|
|
|
|
|
|
const reactFlowId = useMemo(() => new Date().getTime().toString(), []);
|
|
|
|
|
|
|
|
|
|
|
|
// 监听键盘事件实现快捷键
|
|
|
|
// 监听键盘事件实现快捷键
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
@ -175,7 +176,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
|
|
|
|
<div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
|
|
|
|
<div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
|
|
|
|
onContextMenu={(e) => e.preventDefault()}>
|
|
|
|
onContextMenu={(e) => e.preventDefault()}>
|
|
|
|
<ReactFlow
|
|
|
|
<ReactFlow
|
|
|
|
id={new Date().getTime().toString()}
|
|
|
|
id={reactFlowId}
|
|
|
|
nodes={nodes}
|
|
|
|
nodes={nodes}
|
|
|
|
edges={edges}
|
|
|
|
edges={edges}
|
|
|
|
nodeTypes={nodeTypes}
|
|
|
|
nodeTypes={nodeTypes}
|
|
|
|
|