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
- border: 1px solid gray;
 
 
 
 
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
- type="target"
 
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