+
+ {Object.keys(menu).length > 0 && (
+
+ )}
+
);
}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
new file mode 100644
index 000000000..7e395b257
--- /dev/null
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -0,0 +1,20 @@
+import { IModalProps } from '@/interfaces/common';
+import { Drawer } from 'antd';
+
+const FlowDrawer = ({ visible, hideModal }: IModalProps
) => {
+ return (
+
+ Some contents...
+
+ );
+};
+
+export default FlowDrawer;
diff --git a/web/src/pages/flow/flow-sider/index.tsx b/web/src/pages/flow/flow-sider/index.tsx
index 439c1265a..e82043e9d 100644
--- a/web/src/pages/flow/flow-sider/index.tsx
+++ b/web/src/pages/flow/flow-sider/index.tsx
@@ -1,6 +1,5 @@
import { Avatar, Card, Flex, Layout, Space } from 'antd';
import classNames from 'classnames';
-import { useState } from 'react';
import { componentList } from '../mock';
import { useHandleDrag } from '../hooks';
@@ -8,9 +7,13 @@ import styles from './index.less';
const { Sider } = Layout;
-const FlowSider = () => {
- const [collapsed, setCollapsed] = useState(true);
- const { handleDrag } = useHandleDrag();
+interface IProps {
+ setCollapsed: (width: boolean) => void;
+ collapsed: boolean;
+}
+
+const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
+ const { handleDragStart } = useHandleDrag();
return (
{
hoverable
draggable
className={classNames(styles.operatorCard)}
- onDragStart={handleDrag(x.name)}
+ onDragStart={handleDragStart(x.name)}
>
@@ -45,4 +48,4 @@ const FlowSider = () => {
);
};
-export default FlowSider;
+export default FlowSide;
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 3fde00654..23754145f 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -1,47 +1,75 @@
-import React, { Dispatch, SetStateAction, useCallback } from 'react';
-import { Node } from 'reactflow';
+import { useSetModalState } from '@/hooks/commonHooks';
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { Node, ReactFlowInstance } from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
export const useHandleDrag = () => {
- const handleDrag = useCallback(
+ const handleDragStart = useCallback(
(operatorId: string) => (ev: React.DragEvent) => {
- console.info(ev.clientX, ev.pageY);
- ev.dataTransfer.setData('operatorId', operatorId);
- ev.dataTransfer.setData('startClientX', ev.clientX.toString());
- ev.dataTransfer.setData('startClientY', ev.clientY.toString());
+ ev.dataTransfer.setData('application/reactflow', operatorId);
+ ev.dataTransfer.effectAllowed = 'move';
},
[],
);
- return { handleDrag };
+ return { handleDragStart };
};
export const useHandleDrop = (setNodes: Dispatch>) => {
- const allowDrop = (ev: React.DragEvent) => {
- ev.preventDefault();
- };
+ const [reactFlowInstance, setReactFlowInstance] =
+ useState>();
- const handleDrop = useCallback(
- (ev: React.DragEvent) => {
- ev.preventDefault();
- const operatorId = ev.dataTransfer.getData('operatorId');
- const startClientX = ev.dataTransfer.getData('startClientX');
- const startClientY = ev.dataTransfer.getData('startClientY');
- console.info(operatorId);
- console.info(ev.pageX, ev.pageY);
- console.info(ev.clientX, ev.clientY);
- console.info(ev.movementX, ev.movementY);
- const x = ev.clientX - 200;
- const y = ev.clientY - 72;
- setNodes((pre) => {
- return pre.concat({
- id: operatorId,
- position: { x, y },
- data: { label: operatorId },
- });
+ const onDragOver = useCallback((event: React.DragEvent) => {
+ event.preventDefault();
+ event.dataTransfer.dropEffect = 'move';
+ }, []);
+
+ const onDrop = useCallback(
+ (event: React.DragEvent) => {
+ event.preventDefault();
+
+ const type = event.dataTransfer.getData('application/reactflow');
+
+ // check if the dropped element is valid
+ if (typeof type === 'undefined' || !type) {
+ return;
+ }
+
+ // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
+ // and you don't need to subtract the reactFlowBounds.left/top anymore
+ // details: https://reactflow.dev/whats-new/2023-11-10
+ const position = reactFlowInstance?.screenToFlowPosition({
+ x: event.clientX,
+ y: event.clientY,
});
+ const newNode = {
+ id: uuidv4(),
+ type,
+ position: position || {
+ x: 0,
+ y: 0,
+ },
+ data: { label: `${type} node` },
+ };
+
+ setNodes((nds) => nds.concat(newNode));
},
- [setNodes],
+ [reactFlowInstance, setNodes],
);
- return { handleDrop, allowDrop };
+ return { onDrop, onDragOver, setReactFlowInstance };
+};
+
+export const useShowDrawer = () => {
+ const {
+ visible: drawerVisible,
+ hideModal: hideDrawer,
+ showModal: showDrawer,
+ } = useSetModalState();
+
+ return {
+ drawerVisible,
+ hideDrawer,
+ showDrawer,
+ };
};
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
index d4c7b653f..5aa32abd7 100644
--- a/web/src/pages/flow/index.tsx
+++ b/web/src/pages/flow/index.tsx
@@ -1,18 +1,24 @@
import { Layout } from 'antd';
+import { useState } from 'react';
+import { ReactFlowProvider } from 'reactflow';
import FlowCanvas from './canvas';
import Sider from './flow-sider';
const { Content } = Layout;
function RagFlow() {
+ const [collapsed, setCollapsed] = useState(false);
+
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
}