Feat: added object lock

src/components/controls/select/image.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { Checkbox } from "@/components/core";
+import { dataAttributes } from "@/constants";
+
+const ImageSelectControls = () => {
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
+
+  const firstElement = document.getElementById(selectedElementIds[0]);
+
+  const [locked, setLocked] = useState(firstElement.getAttribute(dataAttributes.objectLock) === "true");
+
+  const onCheckedChange = (checked: boolean) => {
+    selectedElementIds.forEach((id: string) => {
+      document.getElementById(id).setAttribute(dataAttributes.objectLock, checked.toString());
+    });
+    setLocked(checked);
+  };
+
+  return (
+    <div className="flex justify-end gap-4 py-1">
+      <Checkbox id="stk-lock-position" checked={locked} onCheckedChange={onCheckedChange} />
+      <label
+        htmlFor="stk-lock-position"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Object Lock
+      </label>
+    </div>
+  );
+};
+
+export default ImageSelectControls;

src/components/controls/select/index.tsx

@@ -1,9 +1,10 @@
-import { Fragment, useMemo } from "react";
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { ElementType } from "@/components/workspace/elements";
 import { dataAttributes } from "@/constants";
 import { ISTKProps } from "@/types";
 import { default as GeneralSelectControls } from "./general";
+import { default as ImageSelectControls } from "./image";
 import { default as PolylineSelectControls } from "./polyline";
 import { default as SeatSelectControls } from "./seats";
 import { default as ShapeSelectControls } from "./shape";
@@ -19,7 +20,7 @@ const SelectControls = ({ options, styles }: IControlProps) => {
     if (firstElementType === ElementType.Text) return TextSelectControls;
     if (firstElementType === ElementType.Shape) return ShapeSelectControls;
     if (firstElementType === ElementType.Polyline) return PolylineSelectControls;
-    if (firstElementType === ElementType.Image) return Fragment;
+    if (firstElementType === ElementType.Image) return ImageSelectControls;
     return SeatSelectControls;
   }, [selectedElementIds]);
 

src/components/workspace/elements/utils.ts

@@ -97,7 +97,9 @@ export const handleTextDrag = drag().on("drag", function (event) {
 });
 
 export const handleShapeDrag = drag().on("drag", function (event) {
-  repositionElements(select(this), repositionShape, ElementType.Shape, event.dx, event.dy);
+  const me = select(this);
+  if (me.attr(dataAttributes.objectLock) === "true") return;
+  repositionElements(me, repositionShape, ElementType.Shape, event.dx, event.dy);
 });
 
 export const handlePolylineDrag = drag().on("drag", function (event) {

src/constants/index.ts

@@ -34,7 +34,8 @@ export const dataAttributes = {
   sectionFreeSeating: "data-section-free-seating",
   visibilityOffset: "data-seat-visibility-offset",
   initialViewBoxScaleForWidth: "data-initial-view-box-scale-for-width",
-  embraceOffset: "data-embrace-offset"
+  embraceOffset: "data-embrace-offset",
+  objectLock: "data-object-lock"
 };
 
 export const seatStatusColors = {