apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-06-10 08:05:22 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added delete option for edge between two nodes

Browse source
This commit is contained in:
XI 2026-05-23 13:01:06 +01:00
parent 4ff1f576f0
commit bb4f85c253
3 changed files with 71 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

59
ui/src/components/flow/edges/CustomEdge.tsx
View file

@ -1,12 +1,12 @@
import { BaseEdge, type Edge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
import { AlertCircle, Pencil } from 'lucide-react';
import { AlertCircle, Pencil, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
import { useWorkflowStore } from "@/app/workflow/[workflowId]/stores/workflowStore";
import { TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from '@/components/ui/textarea';
@ -157,8 +157,11 @@ export default function CustomEdge(props: CustomEdgeProps) {
const { getEdges, setNodes } = useReactFlow<FlowNode, FlowEdge>();
const { saveWorkflow } = useWorkflow();
const readOnly = useWorkflowOptional()?.readOnly ?? false;
const updateEdge = useWorkflowStore((state) => state.updateEdge);
const deleteEdge = useWorkflowStore((state) => state.deleteEdge);
const [open, setOpen] = useState(false);
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const parallel = getEdges().filter(
@ -259,6 +262,12 @@ export default function CustomEdge(props: CustomEdgeProps) {
await saveWorkflow();
}, [id, updateEdge, saveWorkflow]);
const handleDeleteEdge = useCallback(async () => {
deleteEdge(id);
setConfirmDeleteOpen(false);
await saveWorkflow();
}, [id, deleteEdge, saveWorkflow]);
return (
<>
<g
@ -321,14 +330,26 @@ export default function CustomEdge(props: CustomEdgeProps) {
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
Condition
</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
onClick={() => setOpen(true)}
>
<Pencil className="h-3 w-3" />
</Button>
{!readOnly && (
<>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground"
onClick={() => setConfirmDeleteOpen(true)}
>
<Trash2 className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
onClick={() => setOpen(true)}
>
<Pencil className="h-3 w-3" />
</Button>
</>
)}
</div>
{/* Content */}
<div className="px-3 pb-3">
@ -357,6 +378,24 @@ export default function CustomEdge(props: CustomEdgeProps) {
data={data}
onSave={handleSaveEdgeData}
/>
<Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete Connection</DialogTitle>
<DialogDescription>
Are you sure you want to delete this connection?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setConfirmDeleteOpen(false)}>
Cancel
</Button>
<Button variant="destructive" onClick={handleDeleteEdge}>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}