pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: The delete button is displayed only when the cursor is hovered over the connection line #3221 (#8422)

Browse Source 
### What problem does this PR solve?

Feat: The delete button is displayed only when the cursor is hovered
over the connection line #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-06-23 15:27:34 +08:00
committed by GitHub
parent f0e0783618
commit 71afebb2c0
6 changed files with 79 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/pages/agent/canvas/node/toolbar.tsx
View File

@ -5,14 +5,19 @@ import {
} from '@/components/xyflow/tooltip-node';
import { Position } from '@xyflow/react';
import { Copy, Play, Trash2 } from 'lucide-react';
import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
import {
HTMLAttributes,
MouseEventHandler,
PropsWithChildren,
useCallback,
} from 'react';
import { Operator } from '../../constant';
import { useDuplicateNode } from '../../hooks';
import useGraphStore from '../../store';
function IconWrapper({ children }: PropsWithChildren) {
function IconWrapper({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
return (
<div className="p-1.5 bg-text-title rounded-sm cursor-pointer">
<div className="p-1.5 bg-text-title rounded-sm cursor-pointer" {...props}>
{children}
</div>
);
@ -30,7 +35,7 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
(store) => store.deleteIterationNodeById,
);
const deleteNode: MouseEventHandler<SVGElement> = useCallback(
const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
(e) => {
e.stopPropagation();
if (label === Operator.Iteration) {
@ -44,7 +49,7 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
const duplicateNode = useDuplicateNode();
const handleDuplicate: MouseEventHandler<SVGElement> = useCallback(
const handleDuplicate: MouseEventHandler<HTMLDivElement> = useCallback(
(e) => {
e.stopPropagation();
duplicateNode(id, label);
@ -61,11 +66,11 @@ export function ToolBar({ selected, children, label, id }: ToolBarProps) {
<IconWrapper>
<Play className="size-3.5" />
</IconWrapper>
<IconWrapper>
<Copy className="size-3.5" onClick={handleDuplicate} />
<IconWrapper onClick={handleDuplicate}>
<Copy className="size-3.5" />
</IconWrapper>
<IconWrapper>
<Trash2 className="size-3.5" onClick={deleteNode} />
<IconWrapper onClick={deleteNode}>
<Trash2 className="size-3.5" />
</IconWrapper>
</section>
</TooltipContent>