hide object and show

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

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,

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,
+      }));
+    },
   };
 });