all code added

src/Home.jsx

@@ -66,24 +66,28 @@ export const Home = () => {
             navigate("/");
             toast({ variant: "destructive", title: projectData?.status, description: "No project found" });
         }
-        if (projectData && projectData?.status === 200 && !projectLoading && projectData?.data?.object && canvas && (selectedPanel === "project" || selectedPanel === "") && id) {
-            const isEmpty = (obj) => Object.values(obj).length === 0;
-            if (!isEmpty(projectData?.data?.object)) {
-                canvas.loadFromJSON(projectData?.data?.object);
-                canvas.renderAll();
-            }
-        }
-    }, [navigate, isLoading, data, projectData, projectLoading, canvas, selectedPanel, id, toast]);
-
-    useEffect(() => {
         if (!projectData && canvas) {
             canvas.clear();
             canvas.renderAll();
             canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas));
-
             setActiveObject(null);
         }
-    }, [projectData, canvas, setActiveObject])
+        if (projectData && projectData?.status === 200 && !projectLoading && canvas && (selectedPanel === "project" || selectedPanel === "") && id) {
+            if (canvas?._objects?.length === 0) {
+                const isEmpty = (obj) => Object.values(obj).length === 0;
+                if (!isEmpty(projectData?.data?.object)) {
+                    canvas.loadFromJSON(projectData?.data?.object, () => {
+                        // Ensure background image fills the canvas
+                        if (canvas.backgroundImage) {
+                            canvas.backgroundImage.scaleToWidth(canvas.width);
+                            canvas.backgroundImage.scaleToHeight(canvas.height);
+                        }
+                        canvas.renderAll();
+                    });
+                }
+            }
+        }
+    }, [navigate, isLoading, data, projectData, id, toast, canvas, selectedPanel, projectLoading, setActiveObject]);
 
     return (
         <div className='relative flex flex-col'>

src/components/Canvas/Canvas.jsx

@@ -9,7 +9,7 @@ import { Slider } from "@/components/ui/slider";
 export default function Canvas() {
   const { setLeftPanelOpen, setRightPanelOpen, setOpenSetting, setOpenObjectPanel, rightPanelOpen } = useContext(OpenContext);
 
-  const { canvasRef, canvas, setCanvas, fabricCanvasRef, canvasRatio, setCanvasHeight, setCanvasWidth, setScreenWidth, selectedPanel } = useContext(CanvasContext);
+  const { canvasRef, canvas, setCanvas, fabricCanvasRef, canvasRatio, setCanvasHeight, setCanvasWidth, setScreenWidth, selectedPanel, setSelectedPanel } = useContext(CanvasContext);
 
   const { setActiveObject } = useContext(ActiveObjectContext);
   const [zoomLevel, setZoomLevel] = useState(100);
@@ -248,12 +248,20 @@ export default function Canvas() {
           ${zoomLevel < 100 ? "overflow-hidden" : ""}`}
         >
           <CardContent
-            className="p-0 h-full bg-transparent shadow-none"
+            className={`p-0 h-full bg-transparent shadow-none ${selectedPanel === "canvas" ? "border" : ""}`}
             ref={containerRef}
+            onDoubleClick={() => {
+              setSelectedPanel("canvas");
+            }}
+            onClick={() => {
+              if (selectedPanel === "canvas") {
+                setSelectedPanel("");
+              }
+            }}
           >
             <AspectRatio
               ratio={getRatioValue(canvasRatio)}
-              className="rounded-lg border-0 border-primary/10 transition-all duration-300 ease-in-out cursor-pointer"
+              className="rounded-lg border-0 border-primary/10 transition-all duration-300 ease-in-out"
             >
               <div
                 ref={canvasRef}

src/components/Panel/ProjectPanel.jsx

@@ -7,13 +7,16 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getProjects } from '@/api/projectApi';
 import { useNavigate, useParams } from 'react-router-dom';
 import useProject from '@/hooks/useProject';
+import { useToast } from '@/hooks/use-toast';
 
 export const ProjectPanel = () => {
-    const { setSelectedPanel } = useContext(CanvasContext);
+    const { canvas, setSelectedPanel } = useContext(CanvasContext);
 
     const params = useParams();
     const { id } = params;
 
+    const { toast } = useToast();
+
     const navigate = useNavigate();
     const queryClient = useQueryClient(); // Initialize query client
 
@@ -26,10 +29,19 @@ export const ProjectPanel = () => {
     const { projectDelete, deletePending } = useProject();
 
     const handleNavigate = (id) => {
+        if (canvas?._objects?.length > 0) {
+            toast({
+                variant: "destructive",
+                title: "Unsaved Changes",
+                description: "Please save your changes before navigating to another project.",
+            })
+        }
+        else {
             // Invalidate a single query key
             queryClient.invalidateQueries({ queryKey: ["project", id] });
             navigate(`/${id}`);
         }
+    }
 
     // Filter projects where preview_url is not empty or null
     const filteredProjects = projects?.data?.filter(project => project?.preview_url) || [];

src/hooks/useProject.jsx

@@ -47,25 +47,19 @@ const useProject = () => {
         },
         onSuccess: (data) => {
             if (data?.status === 200) {
-
+                if (selectedPanel === "canvas" && canvas) {
-                if (selectedPanel === "canvas") {
                     toast({
                         title: data?.status,
                         description: data?.message,
                     })
-                    queryClient.invalidateQueries({ queryKey: ["project", id] });
-                    queryClient.invalidateQueries({ queryKey: ["projects"] });
-                    if (canvas) {
                     canvas.clear();
                     canvas.renderAll();
                     canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas));
                     setActiveObject(null);
+                    setTimeout(() => {
                         navigate("/");
                         setSelectedPanel("");
-                    }
+                    }, 500);  // Ensure clearing happens before navigation
-                    setActiveObject(null);
-                    navigate("/");
-                    setSelectedPanel("");
                 }
                 queryClient.invalidateQueries({ queryKey: ["project", id] });
                 queryClient.invalidateQueries({ queryKey: ["projects"] });