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,