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

new design added

Browse source
This commit is contained in:
Saimon8420 2025-02-09 11:36:11 +06:00
parent e2b8d7368f
commit e803426e01
3 changed files with 21 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
public/assets/svgs/Group 25403.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 129 KiB

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

@ -17,15 +17,18 @@ export default function Canvas() {
const handleZoom = useCallback( const handleZoom = useCallback(
(newZoom) => { (newZoom) => {
const zoom = Math.min(Math.max(newZoom, 0), 100); const zoom = Math.min(Math.max(newZoom, 50), 100); // Prevent zoom from going below 10
setZoomLevel(zoom); setZoomLevel(zoom);
if (canvasRef.current && canvas) { if (canvasRef.current && canvas) {
const scale = zoom / 100; const scale = zoom / 100;
// Update canvas dimensions // Ensure minimum dimensions
const newWidth = canvasRef.current.offsetWidth * scale; const minWidth = 50; // Set a reasonable minimum width
const newHeight = canvasRef.current.offsetHeight * scale; const minHeight = 50; // Set a reasonable minimum height
const newWidth = Math.max(canvasRef.current.offsetWidth * scale, minWidth);
const newHeight = Math.max(canvasRef.current.offsetHeight * scale, minHeight);
canvas.setWidth(newWidth); canvas.setWidth(newWidth);
canvas.setHeight(newHeight); canvas.setHeight(newHeight);
@ -238,7 +241,7 @@ export default function Canvas() {
return ( return (
<div> <div>
{/* Canvas Container */} {/* Canvas Container */}
<div className="w-full max-w-2xl mx-auto mt-20"> <div className="w-full max-w-2xl mx-auto mt-16">
<Card <Card
className={`w-full rounded-none flex-1 flex flex-col className={`w-full rounded-none flex-1 flex flex-col
mx-auto border-0 shadow-none bg-transparent mx-auto border-0 shadow-none bg-transparent

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

@ -64,25 +64,31 @@ export const ProjectPanel = () => {
}); });
const Row = ({ index, style }) => { const Row = ({ index, style }) => {
const project = filteredProjects[index]; // Use filtered projects const project = filteredProjects[index];
return ( return (
<div key={project?.id} className='flex flex-col gap-1 bg-red-50 p-1 rounded-md border border-red-100' style={style}> <div key={project?.id} className="flex flex-col gap-1 p-1 rounded-md border">
<div className='rounded-md flex p-1 flex-col gap-1 hover:bg-red-100 cursor-pointer transition-all' onClick={() => navigate(`/${project.id}`)}> <div
<p className='font-bold text-sm truncate'>{project?.name}</p> className="rounded-md flex p-1 flex-col gap-1 bg-red-50 hover:bg-red-100 cursor-pointer transition-all"
<p className='text-xs truncate'>{project?.description} </p> onClick={() => navigate(`/${project.id}`)}
<img className='rounded-md' src={project?.preview_url} alt="each_project" /> >
<p className="font-bold text-sm truncate">{project?.name}</p>
<p className="text-xs truncate">{project?.description} </p>
<img className="rounded-md" src={project?.preview_url} alt="each_project" />
</div> </div>
<Button <Button
disabled={deletePending} disabled={deletePending}
className="w-fit p-1 ml-auto" size="small" onClick={() => { projectDelete(project?.id) }}> className="w-fit p-1 ml-auto" size="small"
onClick={() => { projectDelete(project?.id) }}
>
<Trash className="h-4 w-4" /> <Trash className="h-4 w-4" />
</Button> </Button>
</div> </div>
); );
}; };
// Filter projects where preview_url is not empty or null // Filter projects where preview_url is not empty or null
const filteredProjects = projects?.data?.filter(project => project?.preview_url) || []; const filteredProjects = projects?.data?.filter(project => project?.preview_url) || [];