Feat: Add canvas node toolbar #3221 (#8249)

### What problem does this PR solve?

Feat: Add canvas node toolbar #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-06-13 16:52:52 +08:00
committed by GitHub
parent 64af09ce7b
commit 6b58b67d12
9 changed files with 331 additions and 206 deletions

View File

@ -7,7 +7,7 @@ import { Operator } from '../../constant';
import useGraphStore from '../../store';
import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
import styles from './index.less';
import NodeHeader from './node-header';
import NodeHeader, { ToolBar } from './node-header';
function InnerAgentNode({
id,
@ -26,50 +26,52 @@ function InnerAgentNode({
}, [edges, getNode, id]);
return (
<section
className={classNames(
styles.ragNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
{isNotParentAgent && (
<>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
id="b"
style={RightHandleStyle}
></Handle>
</>
)}
<Handle
type="target"
position={Position.Top}
isConnectable={false}
id="f"
></Handle>
<Handle
type="source"
position={Position.Bottom}
isConnectable={false}
id="e"
style={{ left: 180 }}
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</section>
<ToolBar selected={selected}>
<section
className={classNames(
styles.ragNode,
theme === 'dark' ? styles.dark : '',
{
[styles.selectedNode]: selected,
},
)}
>
{isNotParentAgent && (
<>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
style={LeftHandleStyle}
></Handle>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
id="b"
style={RightHandleStyle}
></Handle>
</>
)}
<Handle
type="target"
position={Position.Top}
isConnectable={false}
id="f"
></Handle>
<Handle
type="source"
position={Position.Bottom}
isConnectable={false}
id="e"
style={{ left: 180 }}
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
</section>
</ToolBar>
);
}