diff --git a/src/components/controls/select/image.tsx b/src/components/controls/select/image.tsx
new file mode 100644
index 0000000..a34561e
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+};
+
+export default ImageSelectControls;
diff --git a/src/components/controls/select/index.tsx b/src/components/controls/select/index.tsx
index da74568..6ed3b91 100644
--- a/src/components/controls/select/index.tsx
+++ b/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]);
diff --git a/src/components/workspace/elements/utils.ts b/src/components/workspace/elements/utils.ts
index c0cadd2..21a54ef 100644
--- a/src/components/workspace/elements/utils.ts
+++ b/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) {
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 5b33bdb..3d7df8c 100644
--- a/src/constants/index.ts
+++ b/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 = {