feat:menu增加只读

Author: jile1997

packages/x-flow/src/XFlow.tsx

@@ -86,7 +86,7 @@ const XFlow: FC<FlowProps> = memo(props => {
   const { settingMap, globalConfig,readOnly } = useContext(ConfigContext);
   const [openPanel, setOpenPanel] = useState<boolean>(true);
   const [openLogPanel, setOpenLogPanel] = useState<boolean>(true);
-  const { onNodeClick,panel } = props;
+  const { onNodeClick,panel = {} } = props;
 
   useEffect(() => {
     zoomTo(0.8);

packages/x-flow/src/components/CustomNode/index.tsx

@@ -16,7 +16,7 @@ import SourceHandle from './sourceHandle';
 export default memo((props: any) => {
   const { id, type, data, layout, isConnectable, selected, onClick, status } =
     props;
-  const { widgets, settingMap, globalConfig, onMenuItemClick, antdVersion } =
+  const { widgets, settingMap, globalConfig, onMenuItemClick, antdVersion,readOnly } =
     useContext(ConfigContext);
   const deletable = globalConfig?.edge?.deletable ?? true;
 
@@ -126,7 +126,7 @@ export default memo((props: any) => {
       if (type === 'Switch' && e.key.startsWith('paste-') && sourceHandle) {
         data['sourceHandle'] = sourceHandle;
       }
-      onMenuItemClick(data, () => {
+      onMenuItemClick(data as any, () => {
         defaultAction(e, sourceHandle);
       });
     } else {
@@ -187,7 +187,7 @@ export default memo((props: any) => {
       {menuItem.map((r: any) => {
         return <Menu.Item {...r}>{r.label}</Menu.Item>;
       })}
-      <Menu.Item key={'delete'}>删除</Menu.Item>
+      <Menu.Item key={'delete'} danger={true}>删除</Menu.Item>
     </Menu>
   );
 
@@ -237,7 +237,7 @@ export default memo((props: any) => {
         />
       )}
       {selected && (
-        <Dropdown {...dropdownVersionProps} trigger={['click', 'contextMenu']}>
+        <Dropdown disabled={readOnly} {...dropdownVersionProps} trigger={['click', 'contextMenu']}>
           <div className="xflow-node-actions-container">
             <MoreOutlined
               style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}

packages/x-flow/src/components/CustomNode/sourceHandle.tsx

@@ -19,8 +19,8 @@ export default memo((props: any) => {
   const [isShowTooltip, setIsShowTooltip] = useState(false);
   const [openNodeSelectPopover, setOpenNodeSelectPopover] = useState(false);
   const popoverRef = useRef(null);
-   const { antdVersion }: any = useContext(ConfigContext);
-
+  const { antdVersion,globalConfig } = useContext(ConfigContext);
+  const handleProps = globalConfig?.handle || {}
 
   const toolTipVersionProps = useMemo(() => {
     if (antdVersion === 'V5') {
@@ -47,6 +47,7 @@ export default memo((props: any) => {
         setIsShowTooltip(false);
         setOpenNodeSelectPopover(true);
       }}
+      {...handleProps}
       {...rest}
     >
       {(selected || isHovered || openNodeSelectPopover ) && (

packages/x-flow/src/models/context.ts

@@ -1,6 +1,8 @@
 import { createContext } from 'react';
+import { FlowProps } from '../types';
 import { FlowStore } from './store';
 
+type Config = FlowProps & Record<string,any>
 export const ConfigContext = createContext(null);
 
 const StoreContext = createContext<FlowStore | null>(null);

packages/x-flow/src/types.ts

@@ -1,6 +1,9 @@
-import { NodeMouseHandler } from '@xyflow/react';
+import { NodeMouseHandler,Handle } from '@xyflow/react';
 import { Schema } from 'form-render';
-import React, { ReactNode } from 'react';
+import React, { ReactNode ,ComponentProps} from 'react';
+
+type HandleProps = ComponentProps<typeof Handle>
+
 export interface TNodeItem {
   title: string; // 节点 title
   type: string; // 节点类型 _group 比较te
@@ -82,10 +85,11 @@ export interface TControl{
   hideAnnotate?:boolean
 }
 
-// export interface THandle{
-//   isConnectableStart?:boolean
-//   isConnectableEnd?:boolean
-// }
+export interface THandle{
+  // isConnectableStart?:boolean
+  // isConnectableEnd?:boolean
+  isValidConnection?:HandleProps['isValidConnection']
+}
 
 export interface TPanel{
   onClose:(activeNodeId:string)=>void
@@ -112,7 +116,7 @@ export interface FlowProps {
     nodeView?: TNodeView;
     edge?: TEdge;
     controls?:TControl
-    //handle?:THandle
+    handle?:THandle
   };
   logPanel?: TLogPanel; // 日志面板配置
   readOnly?:boolean//只读模式