From 1906e404f0e8e26bc0b91c4b7e5a7dfb3ff1b72e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 31 Dec 2025 16:08:55 +0330
Subject: [PATCH] hide object and show

---
 src/pages/editor/components/LayersList.tsx    | 11 ++++--
 .../components/canvas/ObjectRenderer.tsx      |  4 ++
 src/pages/editor/store/editorStore.ts         | 38 +++++++++++++++++++
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/pages/editor/components/LayersList.tsx b/src/pages/editor/components/LayersList.tsx
index 23ecc55..c7897e8 100644
--- a/src/pages/editor/components/LayersList.tsx
+++ b/src/pages/editor/components/LayersList.tsx
@@ -1,4 +1,4 @@
-import { Text, Shapes, Eye, Copy, Trash } from 'iconsax-react'
+import { Text, Shapes, Eye, EyeSlash, Copy, Trash } from 'iconsax-react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
 
@@ -9,6 +9,7 @@ const LayersList = () => {
     setSelectedObjectId,
     deleteObject,
     duplicateObject,
+    toggleObjectVisibility,
   } = useEditorStore()
 
   const getLayerIcon = (type: string) => {
@@ -64,11 +65,15 @@ const LayersList = () => {
                   <button
                     onClick={(e) => {
                       e.stopPropagation()
-                      // TODO: Toggle visibility
+                      toggleObjectVisibility(obj.id)
                     }}
                     className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
                   >
-                    <Eye size={16} color="black" />
+                    {(obj.visible ?? true) ? (
+                      <Eye size={16} color="black" />
+                    ) : (
+                      <EyeSlash size={16} color="black" />
+                    )}
                   </button>
                   <button
                     onClick={(e) => {
diff --git a/src/pages/editor/components/canvas/ObjectRenderer.tsx b/src/pages/editor/components/canvas/ObjectRenderer.tsx
index 092118d..08c8d84 100644
--- a/src/pages/editor/components/canvas/ObjectRenderer.tsx
+++ b/src/pages/editor/components/canvas/ObjectRenderer.tsx
@@ -39,6 +39,10 @@ const ObjectRenderer = ({
     onCellDblClick,
     selectedCellId,
 }: ObjectRendererProps) => {
+    if (obj.visible === false) {
+        return null;
+    }
+
     const commonProps = {
         obj,
         isSelected,
diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts
index b349956..83dcc63 100644
--- a/src/pages/editor/store/editorStore.ts
+++ b/src/pages/editor/store/editorStore.ts
@@ -59,6 +59,7 @@ export type EditorObject = {
   scaleY?: number;
   shapeType?: ShapeType;
   tableData?: TableData;
+  visible?: boolean;
 };
 
 export type Page = {
@@ -132,6 +133,7 @@ type EditorStoreType = {
   deletePage: (pageId: string) => void;
   setCurrentPage: (pageId: string) => void;
   updatePageName: (pageId: string, name: string) => void;
+  toggleObjectVisibility: (id: string) => void;
 };
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
@@ -600,5 +602,41 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         pages: state.pages.map((p) => (p.id === pageId ? { ...p, name } : p)),
       }));
     },
+    toggleObjectVisibility: (id) => {
+      const state = get();
+      const obj = state.objects.find((o) => o.id === id);
+      if (!obj) return;
+
+      const newVisible = !(obj.visible ?? true);
+      const shouldDeselect = !newVisible && (state.selectedObjectId === id || state.selectedTableId === id);
+
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: state.objects.map((obj) =>
+            obj.id === id ? { ...obj, visible: newVisible } : obj
+          ),
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? {
+                  ...p,
+                  objects: p.objects.map((obj) =>
+                    obj.id === id ? { ...obj, visible: newVisible } : obj
+                  ),
+                }
+              : p
+          ),
+          selectedObjectId: shouldDeselect ? null : state.selectedObjectId,
+          selectedTableId: shouldDeselect ? null : state.selectedTableId,
+        }));
+        return;
+      }
+      set((state) => ({
+        objects: state.objects.map((obj) =>
+          obj.id === id ? { ...obj, visible: newVisible } : obj
+        ),
+        selectedObjectId: shouldDeselect ? null : state.selectedObjectId,
+        selectedTableId: shouldDeselect ? null : state.selectedTableId,
+      }));
+    },
   };
 });