planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

all code added

Browse source
This commit is contained in:
Saimon8420 2025-02-12 18:57:58 +06:00
parent 0f1d2c2ea9
commit 2e74a0d0a0
4 changed files with 50 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/Home.jsx
View file

@ -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'>

14
src/components/Canvas/Canvas.jsx
View file

@ -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}

20
src/components/Panel/ProjectPanel.jsx
View file

@ -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,9 +29,18 @@ export const ProjectPanel = () => {
const { projectDelete, deletePending } = useProject();
const handleNavigate = (id) => {
// Invalidate a single query key
queryClient.invalidateQueries({ queryKey: ["project", id] });
navigate(`/${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

20
src/hooks/useProject.jsx
View file

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