feat: set the anchor points of all nodes to be enterable and exitable #918 (#1119)

### 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)
This commit is contained in:
balibabu 2024-06-11 19:31:52 +08:00 committed by GitHub
parent da64cfd173
commit 0e3a877e5c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import ReactFlow, { import ReactFlow, {
Background, Background,
ConnectionMode,
Controls, Controls,
MarkerType, MarkerType,
NodeMouseHandler, NodeMouseHandler,
@ -64,6 +65,7 @@ function FlowCanvas({ sideWidth, chatDrawerVisible, hideChatDrawer }: IProps) {
<div className={styles.canvasWrapper}> <div className={styles.canvasWrapper}>
<ReactFlow <ReactFlow
ref={ref} ref={ref}
connectionMode={ConnectionMode.Loose}
nodes={nodes} nodes={nodes}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onNodeContextMenu={onNodeContextMenu} onNodeContextMenu={onNodeContextMenu}

View File

@ -1,6 +1,10 @@
.textUpdaterNode { .textUpdaterNode {
// height: 50px; // height: 50px;
border: 1px solid gray; box-shadow:
-6px 0 12px 0 rgba(179, 177, 177, 0.08),
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
-6px 0 16px 6px rgba(0, 0, 0, 0.05);
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background: white; background: white;

View File

@ -18,21 +18,25 @@ export function TextUpdaterNode({
})} })}
> >
<Handle <Handle
type="target" id="c"
type="source"
position={Position.Left} position={Position.Left}
isConnectable={isConnectable} isConnectable={isConnectable}
className={styles.handle} className={styles.handle}
> >
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */} {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
</Handle> </Handle>
<Handle type="source" position={Position.Top} id="d" isConnectable />
<Handle <Handle
type="source" type="source"
position={Position.Right} position={Position.Right}
isConnectable={isConnectable} isConnectable={isConnectable}
className={styles.handle} className={styles.handle}
id="b"
> >
{/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */} {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
</Handle> </Handle>
<Handle type="source" position={Position.Bottom} id="a" isConnectable />
<div> <div>
<Space> <Space>
<OperatorIcon <OperatorIcon