Add controlX Feature on Flow (#1438)

This pull request introduces the "Control X" command to our
application's flow, aiming to enhance user control and improve the
overall user experience. The "Control X" command allows users to execute
a crop shortcut.

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -107,6 +107,13 @@ export default function Page({
         ) {
           event.preventDefault();
           setLastCopiedSelection(_.cloneDeep(lastSelection));
+        } else if (
+          (event.ctrlKey || event.metaKey) &&
+          event.key === "x" &&
+          lastSelection
+        ) {
+          event.preventDefault();
+          setLastCopiedSelection(_.cloneDeep(lastSelection), true);
         } else if (
           (event.ctrlKey || event.metaKey) &&
           event.key === "v" &&

src/frontend/src/stores/flowStore.ts

@@ -247,7 +247,29 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
     get().setEdges(newEdges);
   },
-  setLastCopiedSelection: (newSelection) => {
+  setLastCopiedSelection: (newSelection, isCrop = false) => {
+    if (isCrop) {
+      const nodesIdsSelected = newSelection!.nodes.map((node) => node.id);
+      const edgesIdsSelected = newSelection!.edges.map((edge) => edge.id);
+
+      nodesIdsSelected.forEach((id) => {
+        get().deleteNode(id);
+      });
+
+      edgesIdsSelected.forEach((id) => {
+        get().deleteEdge(id);
+      });
+
+      const newNodes = get().nodes.filter(
+        (node) => !nodesIdsSelected.includes(node.id)
+      );
+      const newEdges = get().edges.filter(
+        (edge) => !edgesIdsSelected.includes(edge.id)
+      );
+
+      set({ nodes: newNodes, edges: newEdges });
+    }
+
     set({ lastCopiedSelection: newSelection });
   },
   cleanFlow: () => {

src/frontend/src/types/zustand/flow/index.ts

@@ -46,7 +46,8 @@ export type FlowStoreType = {
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any } | null;
   setLastCopiedSelection: (
-    newSelection: { nodes: any; edges: any } | null
+    newSelection: { nodes: any; edges: any } | null,
+    isCrop?: boolean
   ) => void;
   isBuilt: boolean;
   setIsBuilt: (isBuilt: boolean) => void;