layer block function DONE!

Started legacy function

src/components/canvas.tsx

@@ -109,6 +109,7 @@ const Canvas = () => {
                     }}
                     imageProps={item.params}
                     key={item.id}
+                    isBlocked={item.isBlocked}
                   />
                 );
               }
@@ -116,6 +117,7 @@ const Canvas = () => {
                 return (
                   <TransformableText
                     isEditing={isEditing}
+                    isBlocked={item.isBlocked}
                     onEditChange={toggleEdit}
                     onSelect={() => selectItem(item.id)}
                     isSelected={item.id === selectedItemId}

src/components/layer-item.tsx

@@ -1,10 +1,16 @@
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { type StageItem, StageItemType } from "@/store/app.slice";
+import {
+  setBlockedItem,
+  type StageItem,
+  StageItemType,
+} from "@/store/app.slice";
 import { useAppDispatch } from "@/hooks";
 import { Button } from "@/components/ui/button";
 import { HiOutlineLockClosed, HiOutlineLockOpen } from "react-icons/hi2";
+import { IconButton } from "@radix-ui/themes";
+import { GripVertical } from "lucide-react";
 
 export default function LayerItem({ item }: { item: StageItem }) {
   const dispatch = useAppDispatch();
@@ -17,14 +23,21 @@ export default function LayerItem({ item }: { item: StageItem }) {
     transform: CSS.Transform.toString(transform),
     transition,
   };
+
+  const handleBlockItemClicked = () => {
+    dispatch(setBlockedItem({ id: item.id, blocked: !item.isBlocked }));
+  };
+
   return (
     <div
       style={style}
       ref={setNodeRef}
       {...attributes}
-      {...listeners}
       className="m-2 flex items-center justify-between rounded-md border p-2 text-black"
     >
+      <IconButton {...listeners}>
+        <GripVertical />
+      </IconButton>
       <span className="">{item.type}</span>
 
       {item.type === StageItemType.Text ? (
@@ -40,9 +53,8 @@ export default function LayerItem({ item }: { item: StageItem }) {
           src={item.params.imageUrl}
         />
       )}
-      <Button>
-        <HiOutlineLockClosed />
-        <HiOutlineLockOpen />
+      <Button onClick={handleBlockItemClicked}>
+        {item.isBlocked ? <HiOutlineLockClosed /> : <HiOutlineLockOpen />}
       </Button>
     </div>
   );

src/components/transformable-image.tsx

@@ -13,6 +13,7 @@ export type TransformableImageProps = {
   isSelected: boolean;
   onSelect: () => void;
   onChange: (newAttrs: TransformableImageConfig) => void;
+  isBlocked: boolean;
 };
 
 export const TransformableImage = ({
@@ -21,6 +22,7 @@ export const TransformableImage = ({
   isSelected,
   onSelect,
   onChange,
+  isBlocked,
 }: TransformableImageProps) => {
   const imageRef = useRef<ElementRef<typeof Image>>(null);
   const trRef = useRef<ElementRef<typeof Transformer>>(null);
@@ -46,8 +48,11 @@ export const TransformableImage = ({
         ref={imageRef}
         {...imageProps}
         image={image}
-        draggable
+        draggable={!isBlocked}
         onDragEnd={(e) => {
+          if (isBlocked) {
+            return;
+          }
           onChange({
             ...imageProps,
             image,

src/components/transformable-text.tsx

@@ -38,6 +38,7 @@ export type TransformableTextProps = {
   id: string;
   isEditing?: boolean;
   onEditChange?: (isEditing: boolean) => void;
+  isBlocked: boolean;
 };
 
 const TransformableText = ({
@@ -48,6 +49,7 @@ const TransformableText = ({
   id,
   isEditing,
   onEditChange,
+  isBlocked,
 }: TransformableTextProps) => {
   console.log(textProps);
   const [value, setText] = useState<string | undefined>("");
@@ -70,6 +72,7 @@ const TransformableText = ({
   };
 
   const handleDblClick = () => {
+    if (isBlocked) return;
     setText(text);
     onEditChange?.(true);
   };
@@ -121,8 +124,9 @@ const TransformableText = ({
         align={"center"}
         {...textProps}
         text={text}
-        draggable
+        draggable={!isBlocked}
         onDragEnd={(e) => {
+          if (isBlocked) return;
           onChange({
             ...textProps,
             text,

src/store/app.slice.ts

@@ -13,6 +13,7 @@ export enum StageItemType {
 
 type StageItemCommon = {
   id: string;
+  isBlocked: boolean;
 };
 
 export type StageTextItem = {
@@ -77,9 +78,9 @@ export const appSlice = createSlice({
       state.items.push({
         type: StageItemType.Text,
         id: textId,
+        isBlocked: false,
         params: {
           text: action.payload.initialValue,
-
           ...defaultTextConfig,
         },
       });
@@ -98,6 +99,7 @@ export const appSlice = createSlice({
       state.items.push({
         type: StageItemType.Image,
         id: imageId,
+        isBlocked: false,
         params: {
           imageUrl: action.payload.imageUrl,
           width: action.payload.width,
@@ -106,6 +108,21 @@ export const appSlice = createSlice({
         },
       });
     },
+    setBlockedItem: (
+      state,
+      action: PayloadAction<{ id: string; blocked: boolean }>,
+    ) => {
+      const itemToUpdate = state.items.find(
+        (item) => item.id === action.payload.id,
+      );
+      if (!itemToUpdate) return;
+
+      if (state.selectedItemId === itemToUpdate.id) {
+        state.selectedItemId = null;
+      }
+
+      itemToUpdate.isBlocked = action.payload.blocked;
+    },
 
     selectBackground: (state, action: PayloadAction<string>) => {
       state.background = {
@@ -114,6 +131,14 @@ export const appSlice = createSlice({
     },
 
     selectItem: (state, action: PayloadAction<string>) => {
+      const itemToSelect = state.items.find(
+        (item) => item.id === action.payload,
+      );
+
+      if (!itemToSelect || itemToSelect.isBlocked) {
+        return;
+      }
+
       state.selectedItemId = action.payload;
     },
 
@@ -136,7 +161,12 @@ export const appSlice = createSlice({
       const textToUpdateIndex = state.items.findIndex((t) => t.id === id);
       const textToUpdate = state.items[textToUpdateIndex];
 
-      if (!textToUpdate || textToUpdate.type !== StageItemType.Text) return;
+      if (
+        !textToUpdate ||
+        textToUpdate.type !== StageItemType.Text ||
+        textToUpdate.isBlocked
+      )
+        return;
 
       state.items[textToUpdateIndex] = {
         ...textToUpdate,
@@ -155,7 +185,12 @@ export const appSlice = createSlice({
       const imageToUpdateIndex = state.items.findIndex((img) => img.id === id);
       const imageToUpdate = state.items[imageToUpdateIndex];
 
-      if (!imageToUpdate || imageToUpdate.type !== StageItemType.Image) return;
+      if (
+        !imageToUpdate ||
+        imageToUpdate.type !== StageItemType.Image ||
+        imageToUpdate.isBlocked
+      )
+        return;
 
       (state.items[imageToUpdateIndex] as WritableDraft<StageImageItem>) = {
         ...imageToUpdate,
@@ -186,4 +221,5 @@ export const {
   selectBackground,
   setStageItems,
   selectItem,
+  setBlockedItem,
 } = appSlice.actions;