Feat: added element deletion on key press

Author: Akalanka47000

src/hooks/events/deletion.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { store } from "@/store";
+import { deleteElements } from "@/store/reducers/editor";
+
+const useDelete = () => {
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Backspace" || e.key === "Delete") {
+        e.preventDefault();
+        store.dispatch(deleteElements(selectedElementIds));
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [selectedElementIds]);
+};
+
+export default useDelete;

src/hooks/events/index.ts

@@ -1,4 +1,5 @@
 import { ISTKProps } from "@/types";
+import { default as useDelete } from "./deletion";
 import { default as useDeselection } from "./deselection";
 import { default as useDuplicate } from "./duplication";
 import { default as usePolyline } from "./polyline";
@@ -7,6 +8,7 @@ import { default as useWorkspaceClick } from "./workspace-click";
 import { default as useWorkspaceLoad } from "./workspace-load";
 
 export const useDesignerEvents = (props: ISTKProps) => {
+  useDelete();
   useDeselection();
   useDuplicate();
   usePolyline();

src/store/reducers/editor/index.ts

@@ -254,6 +254,18 @@ export const slice = createSlice({
     },
     setVisibilityOffset: (state, action) => {
       state.visibilityOffset = action.payload;
+    },
+    deleteElements: (state, action) => {
+      const ids = action.payload;
+      state.seats = state.seats.filter((seat) => !ids.includes(seat.id));
+      state.booths = state.booths.filter((booth) => !ids.includes(booth.id));
+      state.text = state.text.filter((text) => !ids.includes(text.id));
+      state.shapes = state.shapes.filter((shape) => !ids.includes(shape.id));
+      state.polylines = state.polylines.filter((polyline) => !ids.includes(polyline.id));
+      state.images = state.images.filter((image) => !ids.includes(image.id));
+      state.selectedElementIds = state.selectedElementIds.filter((id) => !ids.includes(id));
+      state.selectedPolylineId =
+        state.selectedPolylineId && !ids.includes(state.selectedPolylineId) ? null : state.selectedPolylineId;
     }
   }
 });
@@ -300,7 +312,8 @@ export const {
   setSelectedPolylineId,
   sync,
   setInitialViewBoxScale,
-  setVisibilityOffset
+  setVisibilityOffset,
+  deleteElements
 } = slice.actions;
 
 export const selectPolylineById = (id: string) =>