import { IAppLoad, NsGraphCmd } from '@antv/xflow'; import React, { useRef, useEffect, useImperativeHandle } from 'react'; /** 交互组件 */ import { /** XFlow核心组件 */ XFlow, /** 流程图画布组件 */ FlowchartCanvas, /** 流程图配置扩展 */ FlowchartExtension, /** 流程图节点组件 */ FlowchartNodePanel, /** 流程图表单组件 */ FlowchartFormPanel, /** 通用组件:快捷键 */ KeyBindings, /** 通用组件:画布缩放 */ CanvasScaleToolbar, /** 通用组件:右键菜单 */ CanvasContextMenu, /** 通用组件:工具栏 */ CanvasToolbar, /** 通用组件:对齐线 */ CanvasSnapline, /** 通用组件:节点连接桩 */ CanvasNodePortTooltip, IApplication, XFlowNodeCommands, } from '@antv/xflow'; import { Graph } from '@antv/x6'; /** 配置Command*/ import { useCmdConfig, initGraphCmds } from './config-cmd'; /** 配置Menu */ import { useMenuConfig } from './config-menu'; /** 配置Toolbar */ import { TOOLBAR_ITEMS, useToolbarConfig } from './config-toolbar'; /** 配置快捷键 */ import { useKeybindingConfig } from './config-keybinding'; import { registerNode } from './node/registerNode'; import CustomFlowchartFormPanel from './node/FlowFormPanel'; /** 配置Dnd组件面板 */ // import CustomCircle from './react-node/CustomCircle'; // import CustomRect from './react-node/CustomRect'; import '@antv/xflow/dist/index.css'; import './index.less'; import { TYPE } from './node/auditNode/mapServe'; export interface IProps { meta: { flowId: string; type: 'edit' }; flowDetail: any; onSelectNode?: Function; parentRef?: any; } export const Demo: React.FC = props => { const { meta, flowDetail, parentRef } = props; const isEdit = meta.type == 'edit'; const toolbarConfig = useToolbarConfig(); const menuConfig = useMenuConfig(); const keybindingConfig = useKeybindingConfig(); const graphRef = useRef(); const appRef = useRef(); const commandConfig: any = useCmdConfig(props); // 封装供外部主动调用的接口 useImperativeHandle(parentRef, () => ({ getGraphData: async cb => { appRef.current.commandService.executeCommand( TOOLBAR_ITEMS.SAVE_GRAPH_DATA, { saveGraphDataService: (meta, graphData) => { let data = JSON.parse(JSON.stringify(graphData)); let simpleNodes = data?.nodes?.map(curNode => { let childrenNodes = data.edges .map(edge => { if (edge.source?.cell == curNode.id) { return data.nodes.find(item => item.id == edge.target?.cell); } }) .filter(item => item); //按优先级排序子节点 const children = childrenNodes .sort((a, b) => a.priority - b.priority) .map(item => item.id); const node = { id: curNode.id, type: curNode.type, //条件节点 formItems: curNode.type == TYPE.JUDGE && !curNode.formItems ? '[]' : curNode.formItems, priority: curNode.priority, //审批节点 initiator: curNode.type == TYPE.INITIATOR ? curNode.initiator : null, audits: curNode.type == TYPE.AUDIT ? curNode.audits : null, children: children, }; return node; }); data.nodes = data.nodes.map(item => { let newItem = JSON.parse(JSON.stringify(item)); delete newItem.incomingEdges; delete newItem.originData; delete newItem.outgoingEdges; delete newItem.ports.groups; // let ports = { ...item.ports }; // delete ports.groups; // return { // id: item.id, // renderKey: item.renderKey, // name: item.name, // label: item.label, // width: item.width, // height: item.height, // ports: ports, // isCustom: item.isCustom, // parentKey: item.parentKey, // x: item.x, // y: item.y, // zIndex: item.zIndex, // count: item.count, // }; return newItem; }); // graphData.edges = [] data.edges = data.edges.map(item => { // delete item.data; // delete item.attrs; // delete item.sourcePort; // delete item.sourcePortId; // delete item.targetPort; // delete item.targetPortId; // delete item.zIndex; return { id: item.id, source: item.source, target: item.target, // attr: JSON.stringify(item.attrs), }; }); console.log(simpleNodes); console.log(JSON.stringify(data)); cb?.(JSON.stringify(data), JSON.stringify(simpleNodes)); return data; }, } ); }, })); /** * @param app 当前XFlow工作空间 * @param extensionRegistry 当前XFlow配置项 */ const onLoad: IAppLoad = async app => { appRef.current = app; graphRef.current = await app.getGraphInstance(); // graphRef.current.disableSnapline() renderGraph(); }; const renderGraph = () => { if (flowDetail.nodes.length == 0 || !appRef.current) return; initGraphCmds(appRef.current, flowDetail); // 设置选中状态 const node = flowDetail.nodes.find(item => item.isCheck); if (node) { const args = { nodeIds: [node.id], resetSelection: true, }; setTimeout(() => { appRef.current.commandService.executeCommand(XFlowNodeCommands.SELECT_NODE.id, args); }, 100); } }; const getConfig = () => { const defaultOption = { grid: 1, mousewheel: { enabled: true, /** 将鼠标位置作为中心缩放 */ zoomAtMousePosition: true, }, resizing: { enabled: true, minWidth: 0, minHeight: 0, preserveAspectRatio: false, }, snapline: false, }; return isEdit ? defaultOption : { ...defaultOption, grid: false, resizing: false, panning: false, selecting: { enabled: true, showNodeSelectionBox: true, }, interacting: false, mousewheel: false, connecting: { highlight: false, allowBlank: false, allowPort: false, dangling: false, }, }; }; useEffect(() => { if (graphRef.current) { graphRef.current.on('node:click', (...arg) => { console.log(arg); }); } }, [graphRef]); useEffect(() => { renderGraph(); }, [flowDetail, appRef.current]); return ( {isEdit && ( )} {isEdit && ( <> )} {isEdit && ( <> {/* */} )} ); }; // 高阶组件 const DemoHoc = Demo => { const forwardRef = (props, ref) => { return ; }; return React.forwardRef(forwardRef); }; export default DemoHoc(Demo);