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 = {