Added duplicate block function

This commit is contained in:
Emir Karabeg
2025-01-29 21:29:40 -08:00
parent c37be5c8d7
commit 38e3731111
3 changed files with 58 additions and 1 deletions

View File

@@ -1,5 +1,5 @@
import { Button } from '@/components/ui/button'
import { Trash2, Play, Circle, CircleOff } from 'lucide-react'
import { Trash2, Play, Circle, CircleOff, Copy } from 'lucide-react'
import { useWorkflowStore } from '@/stores/workflow/workflow-store'
import {
Tooltip,
@@ -16,6 +16,7 @@ export function ActionBar({ blockId }: ActionBarProps) {
const toggleBlockEnabled = useWorkflowStore(
(state) => state.toggleBlockEnabled
)
const duplicateBlock = useWorkflowStore((state) => state.duplicateBlock)
const isEnabled = useWorkflowStore(
(state) => state.blocks[blockId]?.enabled ?? true
)
@@ -36,6 +37,20 @@ export function ActionBar({ blockId }: ActionBarProps) {
<TooltipContent>Delete Block</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => duplicateBlock(blockId)}
className="text-gray-500"
>
<Copy className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Duplicate Block</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button

View File

@@ -44,6 +44,7 @@ export interface WorkflowActions {
clear: () => void
updateLastSaved: () => void
toggleBlockEnabled: (id: string) => void
duplicateBlock: (id: string) => void
}
export type WorkflowStore = WorkflowState & WorkflowActions

View File

@@ -200,6 +200,47 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
set(newState)
get().updateLastSaved()
},
duplicateBlock: (id: string) => {
const block = get().blocks[id]
if (!block) return
const newId = crypto.randomUUID()
const offsetPosition = {
x: block.position.x + 250, // Offset to the right
y: block.position.y + 20, // Slight offset down
}
// Deep clone the block's subBlocks
const newSubBlocks = Object.entries(block.subBlocks).reduce(
(acc, [subId, subBlock]) => ({
...acc,
[subId]: {
...subBlock,
value: JSON.parse(JSON.stringify(subBlock.value)), // Deep clone values
},
}),
{}
)
const newState = {
blocks: {
...get().blocks,
[newId]: {
...block,
id: newId,
name: `${block.name}`,
position: offsetPosition,
subBlocks: newSubBlocks,
},
},
edges: [...get().edges],
}
set(newState)
pushHistory(set, get, newState, `Duplicate ${block.type} block`)
get().updateLastSaved()
},
})),
{ name: 'workflow-store' }
)