From 47f42b409a4448d9e7f59ecacf9fcf6d12bf0ba4 Mon Sep 17 00:00:00 2001
From: Akalanka Perera <akalankaperera128@gmail.com>
Date: Sat, 7 Dec 2024 17:52:23 +0530
Subject: [PATCH] Fix: persisted object lock

---
 CHANGELOG.md                                | 10 ++++++++++
 src/components/workspace/elements/image.tsx |  5 +++--
 src/types/elements/image.ts                 |  1 +
 src/utils/transformer.ts                    |  3 ++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc5c7fa..795d177 100644
--- a/CHANGELOG.md
+++ b/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]
diff --git a/src/components/workspace/elements/image.tsx b/src/components/workspace/elements/image.tsx
index 01a561e..515e8f2 100644
--- a/src/components/workspace/elements/image.tsx
+++ b/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",
diff --git a/src/types/elements/image.ts b/src/types/elements/image.ts
index 15435be..508942c 100644
--- a/src/types/elements/image.ts
+++ b/src/types/elements/image.ts
@@ -6,4 +6,5 @@ export interface IImage {
   width?: number;
   height?: number;
   rotation?: number;
+  locked?: boolean;
 }
diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts
index 56a2d1c..1cd06d2 100644
--- a/src/utils/transformer.ts
+++ b/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"
     };
   });
 };