balibabu
commited on
Commit
·
438f028
1
Parent(s):
1944669
feat: set the anchor points of all nodes to be enterable and exitable #918 (#1119)
Browse files### What problem does this PR solve?
feat: set the anchor points of all nodes to be enterable and exitable
#918
### Type of change
- [x] New Feature (non-breaking change which adds functionality)
web/src/pages/flow/canvas/index.tsx
CHANGED
@@ -1,6 +1,7 @@
|
|
1 |
import { useCallback } from 'react';
|
2 |
import ReactFlow, {
|
3 |
Background,
|
|
|
4 |
Controls,
|
5 |
MarkerType,
|
6 |
NodeMouseHandler,
|
@@ -64,6 +65,7 @@ function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
|
|
64 |
<div className={styles.canvasWrapper}>
|
65 |
<ReactFlow
|
66 |
ref={ref}
|
|
|
67 |
nodes={nodes}
|
68 |
onNodesChange={onNodesChange}
|
69 |
onNodeContextMenu={onNodeContextMenu}
|
|
|
1 |
import { useCallback } from 'react';
|
2 |
import ReactFlow, {
|
3 |
Background,
|
4 |
+
ConnectionMode,
|
5 |
Controls,
|
6 |
MarkerType,
|
7 |
NodeMouseHandler,
|
|
|
65 |
<div className={styles.canvasWrapper}>
|
66 |
<ReactFlow
|
67 |
ref={ref}
|
68 |
+
connectionMode={ConnectionMode.Loose}
|
69 |
nodes={nodes}
|
70 |
onNodesChange={onNodesChange}
|
71 |
onNodeContextMenu={onNodeContextMenu}
|
web/src/pages/flow/canvas/node/index.less
CHANGED
@@ -1,6 +1,10 @@
|
|
1 |
.textUpdaterNode {
|
2 |
// height: 50px;
|
3 |
-
|
|
|
|
|
|
|
|
|
4 |
padding: 5px;
|
5 |
border-radius: 5px;
|
6 |
background: white;
|
|
|
1 |
.textUpdaterNode {
|
2 |
// height: 50px;
|
3 |
+
box-shadow:
|
4 |
+
-6px 0 12px 0 rgba(179, 177, 177, 0.08),
|
5 |
+
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
|
6 |
+
-6px 0 16px 6px rgba(0, 0, 0, 0.05);
|
7 |
+
|
8 |
padding: 5px;
|
9 |
border-radius: 5px;
|
10 |
background: white;
|
web/src/pages/flow/canvas/node/index.tsx
CHANGED
@@ -18,21 +18,25 @@ export function TextUpdaterNode({
|
|
18 |
})}
|
19 |
>
|
20 |
<Handle
|
21 |
-
|
|
|
22 |
position={Position.Left}
|
23 |
isConnectable={isConnectable}
|
24 |
className={styles.handle}
|
25 |
>
|
26 |
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
|
27 |
</Handle>
|
|
|
28 |
<Handle
|
29 |
type="source"
|
30 |
position={Position.Right}
|
31 |
isConnectable={isConnectable}
|
32 |
className={styles.handle}
|
|
|
33 |
>
|
34 |
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
|
35 |
</Handle>
|
|
|
36 |
<div>
|
37 |
<Space>
|
38 |
<OperatorIcon
|
|
|
18 |
})}
|
19 |
>
|
20 |
<Handle
|
21 |
+
id="c"
|
22 |
+
type="source"
|
23 |
position={Position.Left}
|
24 |
isConnectable={isConnectable}
|
25 |
className={styles.handle}
|
26 |
>
|
27 |
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
|
28 |
</Handle>
|
29 |
+
<Handle type="source" position={Position.Top} id="d" isConnectable />
|
30 |
<Handle
|
31 |
type="source"
|
32 |
position={Position.Right}
|
33 |
isConnectable={isConnectable}
|
34 |
className={styles.handle}
|
35 |
+
id="b"
|
36 |
>
|
37 |
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
|
38 |
</Handle>
|
39 |
+
<Handle type="source" position={Position.Bottom} id="a" isConnectable />
|
40 |
<div>
|
41 |
<Space>
|
42 |
<OperatorIcon
|