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(
(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);
if (canvasRef.current && canvas) {
const scale = zoom / 100;
// Update canvas dimensions
const newWidth = canvasRef.current.offsetWidth * scale;
const newHeight = canvasRef.current.offsetHeight * scale;
// Ensure minimum dimensions
const minWidth = 50; // Set a reasonable minimum width
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.setHeight(newHeight);
@ -238,7 +241,7 @@ export default function Canvas() {
return (
<div>
{/* 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
className={`w-full rounded-none flex-1 flex flex-col
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 project = filteredProjects[index]; // Use filtered projects
const project = filteredProjects[index];
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 className='rounded-md flex p-1 flex-col gap-1 hover:bg-red-100 cursor-pointer transition-all' onClick={() => navigate(`/${project.id}`)}>
<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 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 bg-red-50 hover:bg-red-100 cursor-pointer transition-all"
onClick={() => navigate(`/${project.id}`)}
>
<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>
<Button
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" />
</Button>
</div>
);
};
// Filter projects where preview_url is not empty or null
const filteredProjects = projects?.data?.filter(project => project?.preview_url) || [];