refactor sockets and undo/redo for batch additions and removals

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -61,7 +61,7 @@ export interface SubflowNodeData {
  */
 export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeData>) => {
   const { getNodes } = useReactFlow()
-  const { collaborativeRemoveBlock } = useCollaborativeWorkflow()
+  const { collaborativeBatchRemoveBlocks } = useCollaborativeWorkflow()
   const blockRef = useRef<HTMLDivElement>(null)
 
   const currentWorkflow = useCurrentWorkflow()
@@ -184,7 +184,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
                 variant='ghost'
                 onClick={(e) => {
                   e.stopPropagation()
-                  collaborativeRemoveBlock(id)
+                  collaborativeBatchRemoveBlocks([id])
                 }}
                 className='h-[14px] w-[14px] p-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100'
               >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx

@@ -4,8 +4,13 @@ import { Button, Copy, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { getUniqueBlockName, prepareDuplicateBlockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
+const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
+
 /**
  * Props for the ActionBar component
  */
@@ -27,11 +32,39 @@ interface ActionBarProps {
 export const ActionBar = memo(
   function ActionBar({ blockId, blockType, disabled = false }: ActionBarProps) {
     const {
-      collaborativeRemoveBlock,
+      collaborativeBatchAddBlocks,
+      collaborativeBatchRemoveBlocks,
       collaborativeToggleBlockEnabled,
-      collaborativeDuplicateBlock,
       collaborativeToggleBlockHandles,
     } = useCollaborativeWorkflow()
+    const { activeWorkflowId } = useWorkflowRegistry()
+    const blocks = useWorkflowStore((state) => state.blocks)
+    const subBlockStore = useSubBlockStore()
+
+    const handleDuplicateBlock = useCallback(() => {
+      const sourceBlock = blocks[blockId]
+      if (!sourceBlock) return
+
+      const newId = crypto.randomUUID()
+      const newName = getUniqueBlockName(sourceBlock.name, blocks)
+      const subBlockValues = subBlockStore.workflowValues[activeWorkflowId || '']?.[blockId] || {}
+
+      const { block, subBlockValues: filteredValues } = prepareDuplicateBlockState({
+        sourceBlock,
+        newId,
+        newName,
+        positionOffset: DEFAULT_DUPLICATE_OFFSET,
+        subBlockValues,
+      })
+
+      collaborativeBatchAddBlocks([block], [], {}, {}, { [newId]: filteredValues })
+    }, [
+      blockId,
+      blocks,
+      activeWorkflowId,
+      subBlockStore.workflowValues,
+      collaborativeBatchAddBlocks,
+    ])
 
     /**
      * Optimized single store subscription for all block data
@@ -115,7 +148,7 @@ export const ActionBar = memo(
                 onClick={(e) => {
                   e.stopPropagation()
                   if (!disabled) {
-                    collaborativeDuplicateBlock(blockId)
+                    handleDuplicateBlock()
                   }
                 }}
                 className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
@@ -185,7 +218,7 @@ export const ActionBar = memo(
               onClick={(e) => {
                 e.stopPropagation()
                 if (!disabled) {
-                  collaborativeRemoveBlock(blockId)
+                  collaborativeBatchRemoveBlocks([blockId])
                 }
               }}
               className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -60,7 +60,7 @@ import { usePanelEditorStore } from '@/stores/panel/editor/store'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { getUniqueBlockName } from '@/stores/workflows/utils'
+import { getUniqueBlockName, prepareBlockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 /** Lazy-loaded components for non-critical UI that can load after initial render */
@@ -343,13 +343,12 @@ const WorkflowContent = React.memo(() => {
   }, [userPermissions, currentWorkflow.isSnapshotView])
 
   const {
-    collaborativeAddBlock: addBlock,
     collaborativeAddEdge: addEdge,
-    collaborativeRemoveBlock: removeBlock,
     collaborativeRemoveEdge: removeEdge,
     collaborativeBatchUpdatePositions,
     collaborativeUpdateParentId: updateParentId,
-    collaborativePasteBlocks,
+    collaborativeBatchAddBlocks,
+    collaborativeBatchRemoveBlocks,
     undo,
     redo,
   } = useCollaborativeWorkflow()
@@ -361,6 +360,39 @@ const WorkflowContent = React.memo(() => {
     [collaborativeBatchUpdatePositions]
   )
 
+  const addBlock = useCallback(
+    (
+      id: string,
+      type: string,
+      name: string,
+      position: { x: number; y: number },
+      data?: Record<string, unknown>,
+      parentId?: string,
+      extent?: 'parent',
+      autoConnectEdge?: Edge,
+      triggerMode?: boolean
+    ) => {
+      const blockData: Record<string, unknown> = { ...(data || {}) }
+      if (parentId) blockData.parentId = parentId
+      if (extent) blockData.extent = extent
+
+      const block = prepareBlockState({
+        id,
+        type,
+        name,
+        position,
+        data: blockData,
+        parentId,
+        extent,
+        triggerMode,
+      })
+
+      collaborativeBatchAddBlocks([block], autoConnectEdge ? [autoConnectEdge] : [], {}, {}, {})
+      usePanelEditorStore.getState().setCurrentBlockId(id)
+    },
+    [collaborativeBatchAddBlocks]
+  )
+
   const { activeBlockIds, pendingBlocks, isDebugging } = useExecutionStore(
     useShallow((state) => ({
       activeBlockIds: state.activeBlockIds,
@@ -515,13 +547,43 @@ const WorkflowContent = React.memo(() => {
         if (selectedNodes.length > 0) {
           event.preventDefault()
           copyBlocks(selectedNodes.map((node) => node.id))
+        } else {
+          const currentBlockId = usePanelEditorStore.getState().currentBlockId
+          if (currentBlockId && blocks[currentBlockId]) {
+            event.preventDefault()
+            copyBlocks([currentBlockId])
+          }
         }
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         if (effectivePermissions.canEdit && hasClipboard()) {
           event.preventDefault()
           const pasteData = preparePasteData()
           if (pasteData) {
-            collaborativePasteBlocks(pasteData)
+            const pastedBlocks = Object.values(pasteData.blocks)
+            const hasTriggerInPaste = pastedBlocks.some((block) =>
+              TriggerUtils.isAnyTriggerType(block.type)
+            )
+            if (hasTriggerInPaste) {
+              const existingTrigger = Object.values(blocks).find((block) =>
+                TriggerUtils.isAnyTriggerType(block.type)
+              )
+              if (existingTrigger) {
+                addNotification({
+                  level: 'error',
+                  message:
+                    'A workflow can only have one trigger block. Please remove the existing one before pasting.',
+                  workflowId: activeWorkflowId || undefined,
+                })
+                return
+              }
+            }
+            collaborativeBatchAddBlocks(
+              pastedBlocks,
+              pasteData.edges,
+              pasteData.loops,
+              pasteData.parallels,
+              pasteData.subBlockValues
+            )
           }
         }
       }
@@ -540,9 +602,12 @@ const WorkflowContent = React.memo(() => {
     getNodes,
     copyBlocks,
     preparePasteData,
-    collaborativePasteBlocks,
+    collaborativeBatchAddBlocks,
     hasClipboard,
     effectivePermissions.canEdit,
+    blocks,
+    addNotification,
+    activeWorkflowId,
   ])
 
   /**
@@ -2399,13 +2464,19 @@ const WorkflowContent = React.memo(() => {
       }
 
       event.preventDefault()
-      const primaryNode = selectedNodes[0]
-      removeBlock(primaryNode.id)
+      const selectedIds = selectedNodes.map((node) => node.id)
+      collaborativeBatchRemoveBlocks(selectedIds)
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedEdgeInfo, removeEdge, getNodes, removeBlock, effectivePermissions.canEdit])
+  }, [
+    selectedEdgeInfo,
+    removeEdge,
+    getNodes,
+    collaborativeBatchRemoveBlocks,
+    effectivePermissions.canEdit,
+  ])
 
   return (
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--bg)]'>