fix(flowEditor): 修复流程编辑器运行时交互功能

master
钟良源 1 month ago
parent 7b2d995c54
commit 6b0a689422

@ -194,9 +194,6 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
? appRuntimeData[currentAppKey].isRunning
: false;
// 在应用编排模式下useDefault为false禁用删除功能
const isDeleteDisabled = currentAppIsRunning;
// 监听自定义事件以隐藏/显示节点
useEffect(() => {
const handleToggleNodeVisibility = (event: CustomEvent) => {
@ -334,6 +331,10 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
document.dispatchEvent(event);
}, [nodes, edges]);
useEffect(() => {
console.log(useDefault, menu);
}, [useDefault, menu]);
return (
<div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
onContextMenu={(e) => e.preventDefault()}
@ -388,7 +389,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
proOptions={{ hideAttribution: true }} // 隐藏水印
nodesConnectable={!currentAppIsRunning} // 运行时禁用节点连接
nodesDraggable={!currentAppIsRunning} // 运行时禁用节点拖拽
elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择
// elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择
connectOnClick={!currentAppIsRunning} // 运行时禁用点击连接
disableKeyboardA11y={currentAppIsRunning} // 运行时禁用键盘交互
onBeforeDelete={async ({ nodes, edges }) => {
@ -497,10 +498,10 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
connectionLineType={ConnectionLineType.SmoothStep}
connectionLineComponent={CustomConnectionLine}
onNodeDragStop={!currentAppIsRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止
onNodeContextMenu={(!currentAppIsRunning && useDefault) ? onNodeContextMenu : undefined} // 运行时或应用编排模式下禁用节点上下文菜单
onNodeContextMenu={(useDefault || currentAppIsRunning) ? onNodeContextMenu : undefined} // 应用编排模式下禁用节点上下文菜单,运行时仍可使用
onNodeDoubleClick={!currentAppIsRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击
onEdgeContextMenu={(!currentAppIsRunning && useDefault) ? onEdgeContextMenu : undefined} // 运行时或应用编排模式下禁用边上下文菜单
onPaneClick={!currentAppIsRunning ? onPaneClick : undefined} // 运行时禁用面板点击
onPaneClick={(useDefault || currentAppIsRunning) ? onPaneClick : undefined} // 运行时禁用面板点击
onPaneContextMenu={(!currentAppIsRunning && useDefault) ? onPaneContextMenu : undefined} // 运行时或应用编排模式下禁用面板上下文菜单
onEdgeMouseEnter={(_event, edge) => {
setEdges((eds) => eds.map(e => {
@ -544,8 +545,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
<AlignmentGuides />
</ReactFlow>
{/*节点右键上下文 - 仅在默认模式且非运行时显示*/}
{!currentAppIsRunning && useDefault && menu && menu.type === 'node' && (
{/*节点右键上下文 - 在默认模式或运行状态下显示,运行时隐藏编辑复制删除功能*/}
{(useDefault || currentAppIsRunning) && menu && menu.type === 'node' && (
<div
style={{
position: 'absolute',
@ -561,6 +562,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
onCopy={copyNode}
onCloseMenu={setMenu}
onCloseOpenModal={setIsEditModalOpen}
isRunning={currentAppIsRunning}
/>
</div>
)}

@ -12,6 +12,7 @@ interface NodeContextMenuProps {
onEdit?: (node: Node) => void;
onCloseMenu?: (data: React.Dispatch<React.SetStateAction<any>>) => void;
onCloseOpenModal?: (boolean: boolean) => void;
isRunning?: boolean; // 运行时隐藏复制、编辑、删除功能
}
const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
@ -20,7 +21,8 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
onCopy,
onEdit,
onCloseMenu,
onCloseOpenModal
onCloseOpenModal,
isRunning = false
}) => {
const handleDelete = () => {
onDelete && onDelete(node);
@ -90,25 +92,28 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
// 对于非开始和结束节点,添加基本操作
if (!['start', 'end'].includes(node?.type)) {
if (!['AND', 'OR', 'JSON2STR', 'STR2JSON', 'IMAGE', 'RESULT', 'LOOP_START'].includes(node.data.type as string)) {
// 运行时隐藏编辑、复制、删除功能
if (!isRunning) {
if (!['AND', 'OR', 'JSON2STR', 'STR2JSON', 'IMAGE', 'RESULT', 'LOOP_START'].includes(node.data.type as string)) {
menuItems.push(
<Menu.Item key="edit" onClick={handleEdit}>
</Menu.Item>
);
}
menuItems.push(
<Menu.Item key="copy" onClick={handleCopy}>
</Menu.Item>
);
menuItems.push(
<Menu.Item key="edit" onClick={handleEdit}>
<Menu.Item key="delete" onClick={handleDelete}>
</Menu.Item>
);
}
menuItems.push(
<Menu.Item key="copy" onClick={handleCopy}>
</Menu.Item>
);
menuItems.push(
<Menu.Item key="delete" onClick={handleDelete}>
</Menu.Item>
);
// 单步执行 - 仅对事件接收节点显示
if (node.data.type === 'EVENTLISTENE') {
menuItems.push(

Loading…
Cancel
Save