Fix: persisted object lock

CHANGELOG.md

@@ -1,11 +1,21 @@
 Changelog
 
+# v3.1.1 [2024-12-07]
+
+## Patch Release
+
+### Fixes 
+- Fixed an issue where the image object lock attribute was not included in the data exported from the toolkit
+
+---
+
 # v3.1.0 [2024-12-05]
 
 ## Minor Release
 
 ### Features 
 - Adds a new event handler named `onImageHover` which is applicable in User mode
+
 ---
 
 # v3.0.1 [2024-12-05]

src/components/workspace/elements/image.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
+import { dataAttributes } from "@/constants";
 import { IImage, ISTKProps } from "@/types";
 
 export interface IImageProps extends IImage {
@@ -10,8 +11,7 @@ export interface IImageProps extends IImage {
 }
 
 const Image: React.FC<IImageProps> = forwardRef(
-
-  ({ x, y, id, href, width, height, rotation, consumer, isSelected, element, ...props }, ref: any) => {
+  ({ x, y, id, href, width, height, rotation, locked, consumer, isSelected, element, ...props }, ref: any) => {
     const onMouseOver = (e: React.MouseEvent<SVGElement>) => {
       if (consumer.mode === "user") {
         consumer.events?.onImageHover?.(element, {
@@ -30,6 +30,7 @@ const Image: React.FC<IImageProps> = forwardRef(
         width={width}
         height={height}
         {...props}
+        {...{ [dataAttributes.objectLock]: locked }}
         className={twMerge(
           "resizable fill-transparent object-cover",
           isSelected && "outline outline-2 outline-blue-500 -outline-offset-2",

src/types/elements/image.ts

@@ -6,4 +6,5 @@ export interface IImage {
   width?: number;
   height?: number;
   rotation?: number;
+  locked?: boolean;
 }

src/utils/transformer.ts

@@ -86,7 +86,8 @@ export const domImagesToJSON = () => {
       width: +image.attr("width"),
       height: +image.attr("height"),
       href: image.attr("href"),
-      rotation: image.rotation()
+      rotation: image.rotation(),
+      locked: image.attr(dataAttributes.objectLock) === "true"
     };
   });
 };