Merge pull request #1600 from alibaba/xflow

Xflow
alibaba · Jan 2, 2025 · e9f8fd9 · e9f8fd9
2 parents 84d9e92 + af7c1ec
commit e9f8fd9
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 34 deletions.
diff --git a/packages/x-flow/package.json b/packages/x-flow/package.json
@@ -56,7 +56,8 @@
     "tinycolor2": "^1.6.0",
     "use-context-selector": "^1.4.1",
     "zundo": "^2.1.0",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.4",
+    "@monaco-editor/react": "^4.4.6"
   },
   "devDependencies": {
     "deep-equal": "^2.0.3",

diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx
@@ -20,6 +20,9 @@ export default memo((props: any) => {
     useContext(ConfigContext);
   const deletable = globalConfig?.edge?.deletable ?? true;
 
+  // const isConnectableStart = globalConfig?.handle?.isConnectableStart ?? true;
+  // const isConnectableEnd = globalConfig?.handle?.isConnectableEnd ?? true;
+
   const NodeWidget =
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
@@ -92,6 +95,24 @@ export default memo((props: any) => {
     deleteNode(id);
   }, [pasteNode]);
 
+  const defaultAction = (e, sourceHandle) => {
+    if (e.key === 'copy') {
+      handleCopyNode();
+    } else if (e.key === 'paste') {
+      handlePasteNode();
+    } else if (e.key === 'delete') {
+      handleDeleteNode();
+    } else if (e.key.startsWith('paste-')) {
+      if (sourceHandle) {
+        handlePasteNode({
+          sourceHandle,
+        });
+      } else {
+        handlePasteNode();
+      }
+    }
+  };
+
   const itemClick = e => {
     if (!e.key) {
       return;
@@ -105,23 +126,11 @@ export default memo((props: any) => {
       if (type === 'Switch' && e.key.startsWith('paste-') && sourceHandle) {
         data['sourceHandle'] = sourceHandle;
       }
-      onMenuItemClick(data);
+      onMenuItemClick(data, () => {
+        defaultAction(e, sourceHandle);
+      });
     } else {
-      if (e.key === 'copy') {
-        handleCopyNode();
-      } else if (e.key === 'paste') {
-        handlePasteNode();
-      } else if (e.key === 'delete') {
-        handleDeleteNode();
-      } else if (e.key.startsWith('paste-')) {
-        if (sourceHandle) {
-          handlePasteNode({
-            sourceHandle,
-          });
-        } else {
-          handlePasteNode();
-        }
-      }
+      defaultAction(e, sourceHandle);
     }
   };
 
@@ -187,6 +196,8 @@ export default memo((props: any) => {
           type="target"
           position={targetPosition}
           isConnectable={isConnectable}
+          // isConnectableStart={isConnectableStart}
+          // isConnectableEnd={isConnectableEnd}
         />
       )}
       {selected && (
@@ -234,6 +245,8 @@ export default memo((props: any) => {
             selected={selected}
             isHovered={isHovered}
             handleAddNode={handleAddNode}
+            // isConnectableStart={isConnectableStart}
+            // isConnectableEnd={isConnectableEnd}
           />
         </>
       )}

diff --git a/packages/x-flow/src/operator/Control/index.tsx b/packages/x-flow/src/operator/Control/index.tsx
@@ -1,17 +1,22 @@
 import { Button, Tooltip } from 'antd';
 import type { MouseEvent } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import IconView from '../../components/IconView';
 import NodeSelectPopover from '../../components/NodesPopover';
 import { useStore, useStoreApi } from '../../hooks/useStore';
+import { ConfigContext } from '../../models/context';
 import { useEventEmitterContextContext } from '../../models/event-emitter';
 
-import './index.less';
 import { useFullscreen } from 'ahooks';
+import './index.less';
 
 const Control = (props: any) => {
   const { addNode, xflowRef } = props;
-  const [isFullscreen, {toggleFullscreen }] = useFullscreen(xflowRef);
+  const [isFullscreen, { toggleFullscreen }] = useFullscreen(xflowRef);
+  const { globalConfig } = useContext(ConfigContext);
+
+  const hideAddNode = globalConfig?.controls?.hideAddNode ?? false;
+  const hideAnnotate = globalConfig?.controls?.hideAnnotate ?? false;
 
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
@@ -27,22 +32,38 @@ const Control = (props: any) => {
 
   return (
     <div className='fai-reactflow-control'>
-      <NodeSelectPopover addNode={addNode}>
-        <Tooltip title='添加节点' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
+      {!hideAddNode && (
+        <NodeSelectPopover addNode={addNode}>
+          <Tooltip
+            title="添加节点"
+            getPopupContainer={() =>
+              document.getElementById('xflow-container') as HTMLElement
+            }
+          >
+            <Button
+              type="text"
+              icon={<IconView type="icon-add-circle" className="icon" />}
+            />
+          </Tooltip>
+        </NodeSelectPopover>
+      )}
+      {!hideAnnotate && (
+        <Tooltip
+          title="添加注释"
+          getPopupContainer={() =>
+            document.getElementById('xflow-container') as HTMLElement
+          }
+        >
           <Button
-            type='text'
-            icon={<IconView type='icon-add-circle' className='icon' />}
+            type="text"
+            icon={
+              <IconView type="icon-sticky-note-add-line" className="icon" />
+            }
+            onClick={addNote}
           />
         </Tooltip>
-      </NodeSelectPopover>
-      <Tooltip title='添加注释' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
-        <Button
-          type='text'
-          icon={<IconView type='icon-sticky-note-add-line' className='icon' />}
-          onClick={addNote}
-        />
-      </Tooltip>
-      <div className='separator'></div>
+      )}
+      {!(hideAddNode && hideAnnotate) && <div className='separator'></div>}
       <Tooltip title='指针模式' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
         <Button
           type='text'

diff --git a/packages/x-flow/src/types.ts b/packages/x-flow/src/types.ts
@@ -77,6 +77,16 @@ export interface TEdge {
   deletable?: boolean; // 是否允许删除线条 初始化的edges不受此项影响
 }
 
+export interface TControl{
+  hideAddNode?:boolean
+  hideAnnotate?:boolean
+}
+
+// export interface THandle{
+//   isConnectableStart?:boolean
+//   isConnectableEnd?:boolean
+// }
+
 export interface FlowProps {
   initialValues?: {
     nodes: any[];
@@ -97,10 +107,13 @@ export interface FlowProps {
     nodePanel?: TNodePanel;
     nodeView?: TNodeView;
     edge?: TEdge;
+    controls?:TControl
+    //handle?:THandle
   };
   logPanel?: TLogPanel; // 日志面板配置
   onNodeClick?: NodeMouseHandler;
-  onMenuItemClick: (itemInfo: ItemInfo) => void;
+  onMenuItemClick: (itemInfo: ItemInfo,defaultAction:()=>void) => void;
+
 }
 interface ItemInfo {
   key: 'copy' | 'paste' | 'delete' | string;