mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-07-01 08:59:46 +02:00
Added delete option for edge between two nodes
This commit is contained in:
XI
parent
4ff1f576f0
commit
bb4f85c253
3 changed files with 71 additions and 12 deletions
20
bash.exe.stackdump
Normal file
20
bash.exe.stackdump
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
Stack trace:
|
||||||
|
Frame Function Args
|
||||||
|
000005FF0E0 00210062B0E (00210298702, 00210275E3E, 000000002F8, 000005FAC40)
|
||||||
|
000005FF0E0 0021004846A (00000000000, 00000000000, 00000000000, 00000001000)
|
||||||
|
000005FF0E0 002100484A2 (00000000000, 00000000096, 000000002F8, 00000000000)
|
||||||
|
000005FF0E0 002100DA818 (00000000000, 00200000000, 002102759F2, 000005FBD8C)
|
||||||
|
000005FF0E0 002101334F7 (00000000000, 0021022B1A0, 0021022B190, 000005FDDE0)
|
||||||
|
000005FF0E0 002100488B4 (00000000002, 00210317960, 000005FC0F8, 00000000000)
|
||||||
|
000005FF0E0 0021004A01F (002100DB7A0, 00000000000, 00000000000, 00000000000)
|
||||||
|
000005FF0E0 002100DB858 (00000070000, 00000000002, 00000000000, 00000000000)
|
||||||
|
000005FF5D0 7FFB9279F98A (00000000000, 00000000000, 00000000004, 000005FF200)
|
||||||
|
000005FF5D0 7FFB92652D23 (000000005DE, 00000000000, 00000000000, 7FFB927BB348)
|
||||||
|
000005FF5D0 7FFB926AFC9C (FB5581E80900, 7FFB00000000, 00000678620, 000005FF5D6)
|
||||||
|
000005FF5D0 7FFB92645B0A (00000673060, 00000673090, 7FFB928126D0, 00000000040)
|
||||||
|
000005FF5D0 7FFB92645B36 (7FFB927DB048, 7FFB927B85E0, 00000336000, 7FFB927DB3C0)
|
||||||
|
00000000000 7FFB926A88DD (00000000000, 00000000000, 00000336000, 00000000000)
|
||||||
|
00000000000 7FFB926A6A70 (7FFB92640000, 00000336000, 00000337000, 7FFB92640000)
|
||||||
|
00000000000 7FFB926A685A (00000000000, 00000000000, 00000000000, 00000000000)
|
||||||
|
00000000000 7FFB926D73CE (00000000000, 00000000000, 00000000000, 00000000000)
|
||||||
|
End of stack trace
|
||||||
4
ui/package-lock.json
generated
4
ui/package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "ui",
|
"name": "ui",
|
||||||
"version": "1.28.0",
|
"version": "1.29.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "ui",
|
"name": "ui",
|
||||||
"version": "1.28.0",
|
"version": "1.29.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dagrejs/dagre": "^1.1.4",
|
"@dagrejs/dagre": "^1.1.4",
|
||||||
"@nangohq/frontend": "^0.69.47",
|
"@nangohq/frontend": "^0.69.47",
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import { BaseEdge, type Edge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
|
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 { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
|
import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
|
||||||
import { useWorkflowStore } from "@/app/workflow/[workflowId]/stores/workflowStore";
|
import { useWorkflowStore } from "@/app/workflow/[workflowId]/stores/workflowStore";
|
||||||
import { TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
|
import { TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
|
||||||
import { Button } from "@/components/ui/button";
|
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 { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Label } from "@/components/ui/label";
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
@ -157,8 +157,11 @@ export default function CustomEdge(props: CustomEdgeProps) {
|
||||||
|
|
||||||
const { getEdges, setNodes } = useReactFlow<FlowNode, FlowEdge>();
|
const { getEdges, setNodes } = useReactFlow<FlowNode, FlowEdge>();
|
||||||
const { saveWorkflow } = useWorkflow();
|
const { saveWorkflow } = useWorkflow();
|
||||||
|
const readOnly = useWorkflowOptional()?.readOnly ?? false;
|
||||||
const updateEdge = useWorkflowStore((state) => state.updateEdge);
|
const updateEdge = useWorkflowStore((state) => state.updateEdge);
|
||||||
|
const deleteEdge = useWorkflowStore((state) => state.deleteEdge);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
const parallel = getEdges().filter(
|
const parallel = getEdges().filter(
|
||||||
|
|
@ -259,6 +262,12 @@ export default function CustomEdge(props: CustomEdgeProps) {
|
||||||
await saveWorkflow();
|
await saveWorkflow();
|
||||||
}, [id, updateEdge, saveWorkflow]);
|
}, [id, updateEdge, saveWorkflow]);
|
||||||
|
|
||||||
|
const handleDeleteEdge = useCallback(async () => {
|
||||||
|
deleteEdge(id);
|
||||||
|
setConfirmDeleteOpen(false);
|
||||||
|
await saveWorkflow();
|
||||||
|
}, [id, deleteEdge, saveWorkflow]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<g
|
<g
|
||||||
|
|
@ -321,14 +330,26 @@ export default function CustomEdge(props: CustomEdgeProps) {
|
||||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
Condition
|
Condition
|
||||||
</span>
|
</span>
|
||||||
<Button
|
{!readOnly && (
|
||||||
variant="ghost"
|
<>
|
||||||
size="icon"
|
<Button
|
||||||
className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
|
variant="ghost"
|
||||||
onClick={() => setOpen(true)}
|
size="icon"
|
||||||
>
|
className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground"
|
||||||
<Pencil className="h-3 w-3" />
|
onClick={() => setConfirmDeleteOpen(true)}
|
||||||
</Button>
|
>
|
||||||
|
<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>
|
</div>
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="px-3 pb-3">
|
<div className="px-3 pb-3">
|
||||||
|
|
@ -357,6 +378,24 @@ export default function CustomEdge(props: CustomEdgeProps) {
|
||||||
data={data}
|
data={data}
|
||||||
onSave={handleSaveEdgeData}
|
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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue