refactor: use deleteMany for multiple blocks removal

api/src/chat/controllers/block.controller.ts

@@ -323,4 +323,29 @@ export class BlockController extends BaseController<
     }
     return result;
   }
+
+  /**
+   * Deletes multiple blocks by their IDs.
+   * @param ids - IDs of blocks to be deleted.
+   * @returns A Promise that resolves to the deletion result.
+   */
+  @CsrfCheck(true)
+  @Delete('')
+  @HttpCode(204)
+  async deleteMany(@Body('ids') ids: string[]): Promise<DeleteResult> {
+    if (!ids || ids.length === 0) {
+      throw new BadRequestException('No IDs provided for deletion.');
+    }
+    const deleteResult = await this.blockService.deleteMany({
+      _id: { $in: ids },
+    });
+
+    if (deleteResult.deletedCount === 0) {
+      this.logger.warn(`Unable to delete blocks with provided IDs: ${ids}`);
+      throw new NotFoundException('Blocks with provided IDs not found');
+    }
+
+    this.logger.log(`Successfully deleted blocks with IDs: ${ids}`);
+    return deleteResult;
+  }
 }

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -43,6 +43,7 @@ import { MoveDialog } from "@/app-components/dialogs/MoveDialog";
 import { CategoryDialog } from "@/components/categories/CategoryDialog";
 import { isSameEntity } from "@/hooks/crud/helpers";
 import { useDelete, useDeleteFromCache } from "@/hooks/crud/useDelete";
+import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
 import { useUpdate, useUpdateCache } from "@/hooks/crud/useUpdate";
@@ -120,6 +121,12 @@ const Diagrams = () => {
     },
     invalidate: false,
   });
+  const { mutateAsync: deleteBlocks } = useDeleteMany(EntityType.BLOCK, {
+    onSuccess: () => {
+      deleteDialogCtl.closeDialog();
+      setSelectedBlockId(undefined);
+    },
+  });
   const { mutateAsync: updateBlock } = useUpdate(EntityType.BLOCK, {
     invalidate: false,
   });
@@ -312,19 +319,17 @@ const Diagrams = () => {
 
   const handleDeleteButton = () => {
     const selectedEntities = engine?.getModel().getSelectedEntities();
-    const ids = selectedEntities?.map((model) => model.getID()).join(",");
+    const ids = selectedEntities?.map((model) => model.getID());
 
-    if (ids && selectedEntities) {
+    if (ids && selectedEntities && ids.length > 0) {
       deleteCallbackRef.current = () => {
-        if (selectedEntities.length > 0) {
         selectedEntities.forEach((model) => {
           model.setLocked(false);
           model.remove();
         });
         engine?.repaintCanvas();
-        }
       };
-      deleteDialogCtl.openDialog(ids);
+      deleteDialogCtl.openDialog(ids.join(","));
     }
   };
   const handleMoveButton = () => {
@@ -339,73 +344,16 @@ const Diagrams = () => {
     const id = deleteDialogCtl?.data;
 
     if (id) {
-      // Check if it's a link id
+      const ids = id.split(",");
-      if (id.length === 36) {
-        // Remove link + update nextBlocks + TODO update port state
-        const link = model?.getLink(id) as any;
-        const sourceId = link?.sourcePort.parent.options.id;
-        const targetId = link?.targetPort.parent.options.id;
 
-        if (link?.sourcePort.options.label === BlockPorts.nextBlocksOutPort) {
+      if (ids.length > 1) {
-          // Next/previous Link Delete
+        await deleteBlocks(ids, {
-          const previousData = getBlockFromCache(sourceId);
+          onSuccess: () => {
-          const nextBlocks = [...(previousData?.nextBlocks || [])];
+            ids.forEach((blockId) => {
-
-          await updateBlock(
-            {
-              id: sourceId,
-              params: {
-                nextBlocks: nextBlocks.filter((block) => block !== targetId),
-              },
-            },
-            {
-              onSuccess() {
-                updateCachedBlock({
-                  id: targetId,
-                  preprocess: ({ previousBlocks = [], ...rest }) => ({
-                    ...rest,
-                    previousBlocks: previousBlocks.filter(
-                      (previousBlock) => previousBlock !== sourceId,
-                    ),
-                  }),
-                });
-              },
-            },
-          );
-        } else if (
-          link?.sourcePort.options.label === BlockPorts.attachmentOutPort
-        ) {
-          // Attached / AttachedTo Link Delete
-          await updateBlock(
-            {
-              id: sourceId,
-              params: {
-                attachedBlock: null,
-              },
-            },
-            {
-              onSuccess() {
-                updateCachedBlock({
-                  id: targetId,
-                  preprocess: (oldData) => ({
-                    ...oldData,
-                    attachedToBlock: null,
-                  }),
-                });
-              },
-            },
-          );
-        }
-      } else {
-        // Block Delete Case
-        const ids = id.includes(",") ? id.split(",") : [id];
-
-        for (const blockId of ids) {
               const block = getBlockFromCache(blockId);
 
-          await deleteBlock(blockId, {
+              if (block) {
-            onSuccess() {
+                // Update all linked blocks to remove references to deleted blocks
-              // Update all linked blocks to remove any reference to the deleted block
                 const linkedBlockIds = [
                   ...(block?.nextBlocks || []),
                   ...(block?.previousBlocks || []),
@@ -413,7 +361,54 @@ const Diagrams = () => {
                   ...(block?.attachedToBlock ? [block.attachedToBlock] : []),
                 ];
 
-              for (const linkedBlockId of linkedBlockIds) {
+                linkedBlockIds.forEach((linkedBlockId) => {
+                  const linkedBlock = getBlockFromCache(linkedBlockId);
+
+                  if (linkedBlock) {
+                    updateCachedBlock({
+                      id: linkedBlock.id,
+                      payload: {
+                        ...linkedBlock,
+                        nextBlocks: linkedBlock.nextBlocks?.filter(
+                          (nextBlockId) => !ids.includes(nextBlockId),
+                        ),
+                        previousBlocks: linkedBlock.previousBlocks?.filter(
+                          (previousBlockId) => !ids.includes(previousBlockId),
+                        ),
+                        attachedBlock: ids.includes(
+                          linkedBlock.attachedBlock || "",
+                        )
+                          ? undefined
+                          : linkedBlock.attachedBlock,
+                        attachedToBlock: ids.includes(
+                          linkedBlock.attachedToBlock || "",
+                        )
+                          ? undefined
+                          : linkedBlock.attachedToBlock,
+                      },
+                      strategy: "overwrite",
+                    });
+                  }
+                });
+                deleteCachedBlock(blockId);
+              }
+            });
+          },
+        });
+      } else {
+        const blockId = ids[0];
+        const block = getBlockFromCache(blockId);
+
+        await deleteBlock(blockId, {
+          onSuccess() {
+            const linkedBlockIds = [
+              ...(block?.nextBlocks || []),
+              ...(block?.previousBlocks || []),
+              ...(block?.attachedBlock ? [block.attachedBlock] : []),
+              ...(block?.attachedToBlock ? [block.attachedToBlock] : []),
+            ];
+
+            linkedBlockIds.forEach((linkedBlockId) => {
               const linkedBlock = getBlockFromCache(linkedBlockId);
 
               if (linkedBlock) {
@@ -439,13 +434,11 @@ const Diagrams = () => {
                   strategy: "overwrite",
                 });
               }
-              }
+            });
-
             deleteCachedBlock(blockId);
           },
         });
       }
-      }
 
       deleteCallbackRef.current?.();
       deleteCallbackRef.current = () => {};