Feat: added element move capability with arrow keys

Author: Akalanka47000

src/hooks/events/index.ts

@@ -2,6 +2,7 @@ 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 useMove } from "./move";
 import { default as usePolyline } from "./polyline";
 import { default as useSeatSelectionChange } from "./seat-selection";
 import { default as useWorkspaceClick } from "./workspace-click";
@@ -11,6 +12,7 @@ export const useDesignerEvents = (props: ISTKProps) => {
   useDelete();
   useDeselection();
   useDuplicate();
+  useMove();
   usePolyline();
   useWorkspaceClick();
   useWorkspaceLoad(props);

src/hooks/events/move.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { ElementType } from "@/components/workspace/elements";
+import { dataAttributes } from "@/constants";
+import { d3Extended } from "@/utils";
+
+const useMove = () => {
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+
+  useEffect(() => {
+    const handler = (e) => {
+      selectedElementIds.forEach((id) => {
+        const element = d3Extended.selectById(id);
+        const isSeat = element.attr(dataAttributes.elementType) === ElementType.Seat;
+        const label = isSeat ? d3Extended.selectById(`${id}-label`) : null;
+        const x = isSeat ? "cx" : "x";
+        const y = isSeat ? "cy" : "y";
+        switch (e.key) {
+          case "ArrowLeft":
+            label?.attr("x", +label.attr("x") - 1);
+            return element.attr(x, +element.attr(x) - 1);
+          case "ArrowRight":
+            label?.attr("x", +label.attr("x") + 1);
+            return element.attr(x, +element.attr(x) + 1);
+          case "ArrowUp":
+            label?.attr("y", +label.attr("y") - 1);
+            return element.attr(y, +element.attr(y) - 1);
+          case "ArrowDown":
+            label?.attr("y", +label.attr("y") + 1);
+            return element.attr(y, +element.attr(y) + 1);
+        }
+      });
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [selectedElementIds]);
+};
+
+export default useMove;