- //
- //
- //
diff --git a/src/components/AspectCanvas.jsx b/src/components/AspectCanvas.jsx
deleted file mode 100644
index 74c4b15..0000000
--- a/src/components/AspectCanvas.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { useState, useEffect, useContext } from 'react'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-import CanvasContext from './Context/canvasContext/CanvasContext'
-import OpenContext from './Context/openContext/OpenContext';
-import { Settings, Download, Share2, Settings2 } from "lucide-react";
-import { Card, CardContent } from './ui/card';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
-import { Button } from './ui/button';
-import { Separator } from './ui/separator';
-import { ObjectShortcut } from './ObjectShortcut';
-
-const aspectRatios = [
- { value: "1:1", label: "Square (1:1)" },
- { value: "4:3", label: "Standard (4:3)" },
- { value: "3:2", label: "Classic (3:2)" },
- { value: "16:9", label: "Widescreen (16:9)" },
- { value: "9:16", label: "Portrait (9:16)" },
- { value: "21:9", label: "Ultrawide (21:9)" },
- { value: "32:9", label: "Super Ultrawide (32:9)" },
- { value: "1.85:1", label: "Cinema Standard (1.85:1)" },
- { value: "2.39:1", label: "Anamorphic Widescreen (2.39:1)" },
- { value: "2.76:1", label: "Ultra Panavision 70 (2.76:1)" },
- { value: "5:4", label: "Large Format (5:4)" },
- { value: "7:5", label: "Artistic Format (7:5)" },
- { value: "11:8.5", label: "Letter Size (11:8.5)" },
- { value: "3:4", label: "Portrait (3:4)" },
- { value: "1.91:1", label: "Facebook Ads (1.91:1)" }
-];
-
-export function AspectCanvas() {
- const { setLeftPanelOpen, setRightPanelOpen, setOpenPanel, setCaptureOpen, setOpenSetting, setOpenObjectPanel, rightPanelOpen } = useContext(OpenContext);
- const [selectedRatio, setSelectedRatio] = useState("4:3");
-
- const { canvasRef, canvas, setCanvas, fabricCanvasRef, setCanvasHeight, setCanvasWidth, setScreenWidth } = useContext(CanvasContext);
-
- useEffect(() => {
- import('fabric').then((fabricModule) => {
- window.fabric = fabricModule.fabric;
- });
- }, []);
-
- const getRatioValue = (ratio) => {
- const [width, height] = ratio.split(':').map(Number)
- return width / height
- }
-
- useEffect(() => {
- const updateCanvasSize = () => {
- if (canvasRef.current && canvas) {
- // Update canvas dimensions
- const newWidth = canvasRef?.current?.offsetWidth;
- const newHeight = canvasRef?.current?.offsetHeight;
-
- canvas.setWidth(newWidth);
- canvas.setHeight(newHeight);
- setCanvasWidth(newWidth);
- setCanvasHeight(newHeight);
-
- // Adjust the background image to fit the updated canvas size
- const bgImage = canvas.backgroundImage;
- if (bgImage) {
- // Calculate scaling factors for width and height
- const scaleX = newWidth / bgImage.width;
- const scaleY = newHeight / bgImage.height;
-
- // Use the larger scale to cover the entire canvas
- const scale = Math.max(scaleX, scaleY);
-
- // Apply scale and position the image
- bgImage.scaleX = scale;
- bgImage.scaleY = scale;
- bgImage.left = 0; // Align left
- bgImage.top = 0; // Align top
-
- // Update the background image
- canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
- } else {
- // Render the canvas if no background image
- canvas.renderAll();
- }
- }
-
- setScreenWidth(document.getElementById("root").offsetWidth);
-
- // Handle responsive behavior for panels
- if (document.getElementById("root").offsetWidth <= 640) {
- setLeftPanelOpen(false);
- setRightPanelOpen(false);
- }
- if (document.getElementById("root").offsetWidth > 640) {
- setOpenObjectPanel(false);
- setOpenSetting(false);
- }
- };
- // Initial setup
- updateCanvasSize();
-
- // Listen for window resize
- window.addEventListener('resize', updateCanvasSize);
-
- // Cleanup listener on unmount
- return () => window.removeEventListener('resize', updateCanvasSize);
- }, [setCanvasWidth, setCanvasHeight, selectedRatio, canvasRef, canvas, setLeftPanelOpen, setOpenObjectPanel, setRightPanelOpen, rightPanelOpen, setScreenWidth, setOpenSetting]);
-
- useEffect(() => {
- if (window.fabric) {
- if (fabricCanvasRef?.current) {
- fabricCanvasRef?.current.dispose()
- }
- // Set styles directly on the canvas element
- const canvasElement = document.getElementById('fabric-canvas')
- if (canvasElement) {
- canvasElement.classList.add('fabric-canvas-container') // Add the CSS class
- }
-
- fabricCanvasRef.current = new window.fabric.Canvas('fabric-canvas', {
- width: canvasRef?.current?.offsetWidth,
- height: canvasRef?.current?.offsetWidth,
- backgroundColor: "#ffffff",
- })
-
- setCanvas(fabricCanvasRef?.current);
- }
- }, [])
-
- const handleRatioChange = (newRatio) => {
- setSelectedRatio(newRatio)
- }
-
- return (
-
-
-
-
-
-
-
- )
-}
-
-
-
diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
deleted file mode 100644
index d4bf066..0000000
--- a/src/components/Canvas.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useEffect, useCallback, useContext } from 'react';
-import CanvasContext from './Context/canvasContext/CanvasContext';
-import ActiveObjectContext from './Context/activeObject/ObjectContext';
-import OpenContext from './Context/openContext/OpenContext';
-import CanvasSetting from './CanvasSetting';
-import { EditPanel } from './EditPanel';
-import ObjectPanel from './ObjectPanel';
-import { AspectCanvas } from './AspectCanvas';
-
-const Canvas = () => {
- const { canvas } = useContext(CanvasContext);
-
- const { openSetting, openObjectPanel, openPanel } = useContext(OpenContext);
-
- const { setActiveObject } = useContext(ActiveObjectContext);
-
- useEffect(() => {
- if (!canvas) return; // Ensure canvas is available
-
- // Event handler for mouse down
- const handleMouseDown = (event) => {
- const target = event.target; // Get the clicked target
- const activeObject = canvas.getActiveObject(); // Get the active object
-
- if (target) {
- if (target.type === 'group') {
- setActiveObject(activeObject);
- } else {
- setActiveObject(activeObject);
- }
- } else {
- setActiveObject(activeObject);
- }
- };
-
- // Attach the event listener
- canvas.on('mouse:down', handleMouseDown);
-
- // Cleanup function to remove the event listener
- return () => {
- canvas.off('mouse:down', handleMouseDown); // Remove the listener on unmount
- };
- }, [canvas]); // Re-run only when canvas changes
-
-
- const removeSelected = useCallback(() => {
- const activeObject = canvas?.getActiveObject();
- const allObjects = canvas?.getObjects();
-
- const textObjects = allObjects.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text');
-
- if (activeObject) {
- canvas.remove(activeObject);
- setActiveObject(null);
- }
- if (activeObject && textObjects?.length === 1) {
- canvas.remove(activeObject);
- setActiveObject(null);
- }
- if (activeObject.length > 1) {
- canvas.remove(...activeObject);
- setActiveObject(null);
- }
- }, [canvas, setActiveObject]);
-
- useEffect(() => {
- const handleDeleteKey = (event) => {
- if (event.key === 'Delete') {
- removeSelected();
- }
- };
- window.addEventListener('keydown', handleDeleteKey);
- return () => {
- window.removeEventListener('keydown', handleDeleteKey);
- };
- }, [removeSelected]);
-
- return (
-
{/* Canvas Container */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Open Panel
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Open Settings
-Download
-Share (Coming soon)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Changing the canvas size.
-
-
-
-
-
-
-
-
- {openSetting &&
-
- );
-};
-
-export default Canvas;
diff --git a/src/components/Canvas/Canvas.jsx b/src/components/Canvas/Canvas.jsx
index a10d625..07bea1f 100644
--- a/src/components/Canvas/Canvas.jsx
+++ b/src/components/Canvas/Canvas.jsx
@@ -7,25 +7,9 @@ import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import { Slider } from "@/components/ui/slider";
export default function Canvas() {
- const {
- setLeftPanelOpen,
- setRightPanelOpen,
- setOpenSetting,
- setOpenObjectPanel,
- rightPanelOpen,
- } = useContext(OpenContext);
+ 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 } = useContext(CanvasContext);
const { setActiveObject } = useContext(ActiveObjectContext);
const [zoomLevel, setZoomLevel] = useState(100);
@@ -57,21 +41,6 @@ export default function Canvas() {
useEffect(() => {
if (!canvas) return;
- const handleMouseDown = (event) => {
- const target = event.target;
- const activeObject = canvas.getActiveObject();
-
- if (target) {
- if (target.type === "group") {
- setActiveObject(activeObject);
- } else {
- setActiveObject(activeObject);
- }
- } else {
- setActiveObject(activeObject);
- }
- };
-
const handleWheel = (event) => {
if (event.ctrlKey || event.metaKey) {
event.preventDefault();
@@ -130,8 +99,6 @@ export default function Canvas() {
const handleResize = () => {
handleZoom(zoomLevel);
};
-
- canvas.on("mouse:down", handleMouseDown);
const canvasContainer = document.getElementById("canvas-ref");
if (canvasContainer) {
@@ -148,7 +115,6 @@ export default function Canvas() {
}
return () => {
- canvas.off("mouse:down", handleMouseDown);
if (canvasContainer) {
canvasContainer.removeEventListener("wheel", handleWheel);
canvasContainer.removeEventListener("touchstart", handleTouchStart);
@@ -158,7 +124,7 @@ export default function Canvas() {
window.removeEventListener("resize", handleResize);
}
};
- }, [canvas, setActiveObject, zoomLevel, handleZoom]);
+ }, [canvas, zoomLevel, handleZoom]);
useEffect(() => {
import("fabric").then((fabricModule) => {
@@ -214,20 +180,7 @@ export default function Canvas() {
updateCanvasSize();
window.addEventListener("resize", updateCanvasSize);
return () => window.removeEventListener("resize", updateCanvasSize);
- }, [
- setCanvasWidth,
- setCanvasHeight,
- canvasRatio,
- canvasRef,
- canvas,
- setLeftPanelOpen,
- setOpenObjectPanel,
- setRightPanelOpen,
- rightPanelOpen,
- setScreenWidth,
- setOpenSetting,
- selectedPanel,
- ]);
+ }, [setCanvasWidth, setCanvasHeight, canvasRatio, canvasRef, canvas, setLeftPanelOpen, setOpenObjectPanel, setRightPanelOpen, rightPanelOpen, setScreenWidth, setOpenSetting, selectedPanel]);
useEffect(() => {
if (window.fabric) {
@@ -253,6 +206,35 @@ export default function Canvas() {
}
}, [canvasRef, fabricCanvasRef, setCanvas]);
+ // to set active object
+ useEffect(() => {
+ if (!canvas) return; // Ensure canvas is available
+
+ // Event handler for mouse down
+ const handleMouseDown = (event) => {
+ const target = event.target; // Get the clicked target
+ const activeObject = canvas.getActiveObject(); // Get the active object
+
+ if (target) {
+ if (target.type === 'group') {
+ setActiveObject(activeObject);
+ } else {
+ setActiveObject(activeObject);
+ }
+ } else {
+ setActiveObject(activeObject);
+ }
+ };
+
+ // Attach the event listener
+ canvas.on('mouse:down', handleMouseDown);
+
+ // Cleanup function to remove the event listener
+ return () => {
+ canvas.off('mouse:down', handleMouseDown); // Remove the listener on unmount
+ };
+ }, [canvas, setActiveObject]);
+
return (
<>
{/* Zoom Controls */}
@@ -269,10 +251,10 @@ export default function Canvas() {
+
{
- const { canvas, canvasHeight, canvasWidth, screenWidth } =
- useContext(CanvasContext);
- const { setOpenSetting } = useContext(OpenContext);
- const bgImgRef = useRef(null);
+ const { canvas } = useContext(CanvasContext);
+ const params = useParams();
+ const { id } = params;
+ const { toast } = useToast();
+ const navigate = useNavigate();
+ const [bgImage, setBgImage] = useState(null);
+ const [bgOverLayImage, setBgOverLayImage] = useState(null);
- const [canvasSettings, setCanvasSettings] = useState({
- width: canvas?.width,
- height: canvas?.height,
- perPixelTargetFind: true, // Enable per-pixel detection globally
- targetFindTolerance: 4, // Adjust for leniency in pixel-perfect detection
+ // create empty project if no id is provided
+ useEffect(() => {
+ const createEmptyProject = async () => {
+ try {
+ const response = await createProject();
+ console.log(response);
+ if (response?.data?.id) {
+ navigate(`/${response.data.id}`);
+ }
+ } catch (error) {
+ console.error("Project creation failed:", error);
+ }
+ };
+ if (!id) {
+ createEmptyProject();
+ }
+ }, [id, navigate]);
+
+ // upload bg-image handler
+ const { mutate: uploadBackgroundImage } = useMutation({
+ mutationFn: async ({ file, id }) => {
+ return await uploadImage({ file, id });
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ });
+ setBgImage(data?.data[0]?.url);
+
+ // Create an image element
+ const imgElement = new Image();
+
+ // Set the crossOrigin attribute BEFORE setting the src
+ imgElement.crossOrigin = "anonymous"; // This ensures CORS headers are sent
+ imgElement.src = data?.data[0]?.url;
+
+ imgElement.onload = () => {
+ // Create a fabric.Image instance
+ const img = new fabric.Image(imgElement, {
+ scaleX: canvas.width / imgElement.width,
+ scaleY: canvas.height / imgElement.height,
+ });
+
+ // Set the background image on the canvas
+ canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+ };
+
+ imgElement.onerror = (error) => {
+ console.error('Failed to load image:', error);
+ toast({
+ variant: "destructive",
+ title: "Image Load Error",
+ description: "Failed to load the image. Please try again."
+ })
+ };
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ });
+ }
+ }
+ })
+
+ // handle bg-image remove
+ const { mutate: removeBackgroundMutate } = useMutation({
+ mutationFn: async (url) => {
+ return await deleteImage(url);
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ })
+ canvas.backgroundImage = null;
+ canvas.renderAll();
+ setBgImage(null);
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ }
});
- const handleChange = (key, value) => {
- setCanvasSettings((prevSettings) => ({
- ...prevSettings,
- [key]: value,
- }));
+ // upload bg-overLayImage handler
+ const { mutate: uploadOverlayImage } = useMutation({
+ mutationFn: async ({ file, id }) => {
+ return await uploadImage({ file, id });
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ });
+ setBgOverLayImage(data?.data[0]?.url);
+ // Create an image element
+ const imgElement = new Image();
- // Update canvas dimensions
- if (key === "width") {
- canvas.setWidth(value); // Update canvas width
- } else if (key === "height") {
- canvas.setHeight(value); // Update canvas height
+ // Set the crossOrigin attribute BEFORE setting the src
+ imgElement.crossOrigin = "anonymous"; // This ensures CORS headers are sent
+ imgElement.src = data?.data[0]?.url;
+
+ imgElement.onload = () => {
+ // Create a fabric.Image instance
+ const img = new fabric.Image(imgElement, {
+ scaleX: canvas.width / imgElement.width,
+ scaleY: canvas.height / imgElement.height,
+ });
+
+ // Set the background image on the canvas
+ canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
+ };
+
+ imgElement.onerror = (error) => {
+ console.error('Failed to load image:', error);
+ toast({
+ variant: "destructive",
+ title: "Image Load Error",
+ description: "Failed to load the image. Please try again."
+ })
+ };
+
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ });
+ }
}
+ })
- // Adjust the background image to fit the updated canvas
- const bgImage = canvas.backgroundImage;
- if (bgImage) {
- const canvasWidth = canvas.width;
- const canvasHeight = canvas.height;
-
- // Calculate scaling factors for width and height
- const scaleX = canvasWidth / bgImage.width;
- const scaleY = canvasHeight / bgImage.height;
-
- // Choose the larger scale to cover the entire canvas
- const scale = Math.max(scaleX, scaleY);
-
- // Apply the scale and center the image
- bgImage.scaleX = scale;
- bgImage.scaleY = scale;
- bgImage.left = 0; // Align left
- bgImage.top = 0; // Align top
-
- // Mark the background image as needing an update
- canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
- } else {
- canvas.renderAll(); // Render if no background image
+ // handle bg-overLayImage remove
+ const { mutate: removeOverLayMutate } = useMutation({
+ mutationFn: async (url) => {
+ return await deleteImage(url);
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ })
+ canvas.overlayImage = null;
+ canvas.renderAll();
+ setBgOverLayImage(null);
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ })
+ }
}
- };
+ });
const setBackgroundImage = (e) => {
const file = e.target.files[0];
if (file) {
- const blobUrl = URL.createObjectURL(file);
-
- // Create an image element
- const imgElement = new Image();
- imgElement.src = blobUrl;
-
- imgElement.onload = () => {
- // Create a fabric.Image instance
- const img = new fabric.Image(imgElement, {
- scaleX: canvas.width / imgElement.width,
- scaleY: canvas.height / imgElement.height,
- });
-
- // Set the background image on the canvas
- canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-
- // Revoke the object URL to free memory
- URL.revokeObjectURL(blobUrl);
- };
-
- imgElement.onerror = () => {
- console.error("Failed to load the image.");
- URL.revokeObjectURL(blobUrl);
- };
+ uploadBackgroundImage({ file, id })
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Please select a file",
+ })
}
};
const setBackgroundOverlayImage = (e) => {
const file = e.target.files[0];
if (file) {
- const blobUrl = URL.createObjectURL(file);
-
- // Create an image element
- const imgElement = new Image();
- imgElement.src = blobUrl;
-
- imgElement.onload = () => {
- const img = new fabric.Image(imgElement, {
- scaleX: canvas.width / imgElement.width,
- scaleY: canvas.height / imgElement.height,
- });
-
- // Use setOverlayImage method to add the image as an overlay
- canvas.setOverlayImage(img, () => {
- canvas.renderAll();
- });
-
- // Revoke the object URL after image is loaded and set
- URL.revokeObjectURL(blobUrl);
- };
+ uploadOverlayImage({ file, id })
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Please select a file",
+ })
}
};
@@ -143,44 +244,52 @@ const CanvasSetting = () => {
const removeBackgroundImage = () => {
if (canvas) {
- canvas.backgroundImage = null;
- canvas.renderAll();
- }
- if (bgImgRef.current) {
- bgImgRef.current.value = "";
+ const bgUrl = canvas.backgroundImage?.getSrc();
+ console.log("background image from remove", bgUrl)
+ if (bgUrl) {
+ removeBackgroundMutate(bgUrl)
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "No background image found",
+ })
+ }
}
};
const removeBackgroundOverlayImage = () => {
if (canvas) {
- canvas.overlayImage = null;
- canvas.renderAll();
+ const overLayUrl = canvas.overlayImage?.getSrc();
+ console.log("overlay image from remove", overLayUrl);
+ if (overLayUrl) {
+ removeOverLayMutate(overLayUrl);
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "No overlay image found",
+ })
+ }
}
};
- const rndValue = {
- valueX: 0,
- valueY: 20,
- width: 250,
- height: 0,
- minWidth: 250,
- maxWidth: 300,
- minHeight: 0,
- maxHeight: 400,
- bound: "parent",
- };
- const content = () => {
- return (
+ useEffect(() => {
+ if (canvas) {
+ const bgUrl = canvas.backgroundImage?.getSrc();
+ setBgImage(bgUrl);
+ const overLayUrl = canvas.overlayImage?.getSrc();
+ setBgOverLayImage(overLayUrl);
+ }
+ }, [canvas, setBgImage, setBgOverLayImage])
+
+ return (
+
- Canvas Setting{" "}
- {" "}
+ Canvas Setting
@@ -192,50 +301,74 @@ const CanvasSetting = () => {
{content()}
- ) : (
-
);
};
diff --git a/src/components/Context/authContext/AuthContext.js b/src/components/Context/authContext/AuthContext.js
new file mode 100644
index 0000000..a33a777
--- /dev/null
+++ b/src/components/Context/authContext/AuthContext.js
@@ -0,0 +1,5 @@
+import react from "react";
+
+const AuthContext = react.createContext();
+
+export default AuthContext;
\ No newline at end of file
diff --git a/src/components/Context/authContext/AuthProvider.jsx b/src/components/Context/authContext/AuthProvider.jsx
new file mode 100644
index 0000000..d1d8fe6
--- /dev/null
+++ b/src/components/Context/authContext/AuthProvider.jsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import AuthContext from "./authContext";
+
+const AuthContextProvider = ({ children }) => {
+ const [user, setUser] = useState({
+ token: null,
+ userId: null,
+ currentProjectId: null,
+ });
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default AuthContextProvider;
\ No newline at end of file
diff --git a/src/components/EachComponent/UploadImage.jsx b/src/components/EachComponent/UploadImage.jsx
index 310bb38..753ab95 100644
--- a/src/components/EachComponent/UploadImage.jsx
+++ b/src/components/EachComponent/UploadImage.jsx
@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { Button } from "@/components/ui/button";
import { fabric } from "fabric";
@@ -25,6 +25,11 @@ import { useDropzone } from "react-dropzone";
import ImageCustomization from "./Customization/ImageCustomization";
import { Separator } from "../ui/separator";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMutation } from "@tanstack/react-query";
+import { deleteImage, uploadImage } from "../../api/uploadApi";
+import { createProject } from "../../api/projectApi";
+import { useToast } from "../../hooks/use-toast";
const UploadImage = () => {
const { canvas } = useContext(CanvasContext);
@@ -37,9 +42,92 @@ const UploadImage = () => {
const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
+ const params = useParams();
+ const { id } = params;
+
const [file, setFile] = useState(null);
const [preview, setPreview] = useState(null);
+ const { toast } = useToast();
+ const navigate = useNavigate();
+
+ // create empty project if no id is provided
+ useEffect(() => {
+ const createEmptyProject = async () => {
+ try {
+ const response = await createProject();
+ if (response?.data?.id) {
+ navigate(`/${response.data.id}`);
+ }
+ } catch (error) {
+ console.error("Project creation failed:", error);
+ }
+ };
+ if (!id) {
+ createEmptyProject();
+ }
+ }, [id, navigate]);
+
+ // upload image handler
+ const { mutate } = useMutation({
+ mutationFn: async ({ file, id }) => {
+ return await uploadImage({ file, id });
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ });
+ fabric.Image.fromURL(
+ data?.data[0]?.url,
+ (img) => {
+ img.applyFilters();
+ img.scale(0.5);
+ img.set("top", canvas.width / 4);
+ img.set("left", canvas.height / 4);
+ canvas.add(img);
+ canvas.setActiveObject(img);
+ // Update the active object state
+ setActiveObject(img);
+ canvas.renderAll();
+ },
+ { crossOrigin: "anonymous" }
+ );
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ });
+ removeFile();
+ }
+ }
+ })
+
+ // handle image remove
+ const { mutate: deleteMutate } = useMutation({
+ mutationFn: async (url) => {
+ return await deleteImage(url);
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ }
+ });
+
const { getRootProps, getInputProps, isDragActive } = useDropzone({
accept: {
"image/*": [".jpeg", ".png", ".gif", ".jpg", ".webp", ".svg"],
@@ -55,7 +143,6 @@ const UploadImage = () => {
// Create a preview URL
const blobUrl = URL.createObjectURL(selectedFile);
setFile(selectedFile);
- setPreview(blobUrl);
if (selectedFile.type === "image/svg+xml") {
addImageToCanvas(selectedFile);
@@ -94,45 +181,66 @@ const UploadImage = () => {
fileInputRef.current.value = "";
}
if (activeObject?.type === "image") {
+ const imgUrl = activeObject?._originalElement?.currentSrc;
canvas.remove(activeObject);
setActiveObject(null);
canvas.renderAll();
+ deleteMutate(imgUrl);
}
};
- const handleResize = (file, callback) => {
- Resizer.imageFileResizer(
- file,
- width,
- height,
- format,
- quality,
- parseInt(rotation),
- (resizedFile) => {
- callback(resizedFile);
- },
- "file"
- );
+ const handleResize = (selectedFile, callback) => {
+ const img = new Image();
+ img.src = URL.createObjectURL(selectedFile);
+
+ img.onload = () => {
+ let newWidth = width; // User-defined width
+ let newHeight = height; // User-defined height
+
+ const aspectRatio = img.width / img.height;
+
+ // If the user provided only one dimension, maintain aspect ratio
+ if (!width) {
+ newWidth = Math.round(newHeight * aspectRatio);
+ } else if (!height) {
+ newHeight = Math.round(newWidth / aspectRatio);
+ }
+
+ Resizer.imageFileResizer(
+ selectedFile,
+ newWidth, // Use user-defined width or calculated width
+ newHeight, // Use user-defined height or calculated height
+ format,
+ quality,
+ parseInt(rotation),
+ (resizedFile) => {
+ callback(resizedFile);
+ },
+ 'file'
+ );
+ URL.revokeObjectURL(img.src); // Cleanup
+ };
+
+ img.onerror = () => {
+ console.error("Failed to load image for resizing.");
+ URL.revokeObjectURL(img.src); // Cleanup
+ };
};
- const addImageToCanvas = (file) => {
- const blobUrl = URL.createObjectURL(file);
- fabric.Image.fromURL(blobUrl, (img) => {
- img.set({
- left: canvas.width / 4,
- top: canvas.height / 4,
- scaleX: 0.5,
- scaleY: 0.5,
- });
- canvas.add(img);
- canvas.setActiveObject(img);
- // Update the active object state
- setActiveObject(img);
- canvas.renderAll();
- URL.revokeObjectURL(blobUrl);
- });
+ const addImageToCanvas = (selectedFile) => {
+ mutate({ file: selectedFile, id })
};
+ // useEffect for preview update
+ useEffect(() => {
+ if (activeObject?.type === "image") {
+ setPreview(activeObject._originalElement?.currentSrc);
+ }
+ else {
+ setPreview(null);
+ }
+ }, [activeObject]);
+
return (
@@ -223,19 +331,17 @@ const UploadImage = () => {
+ {
+ bgImage && 
+ }
+ {
+ bgImage ?
-
+ {
+ !bgImage &&
+
+ }
-
+ {
+ bgImage &&
+
+ }
+
+ {
+ bgOverLayImage && 
+ }
+ {
+ bgOverLayImage ?
-
+ {
+ !bgOverLayImage &&
+
+ }
-
+ {
+ bgOverLayImage &&
+
+ }
+
@@ -255,46 +388,16 @@ const CanvasSetting = () => {
- );
- };
-
- return screenWidth <= 768 ? (
-
-
-
- {
- if (canvasWidth > parseInt(e.target.value)) {
- handleChange("width", parseInt(e.target.value, 10));
- }
- }}
- />
-
+ {/* Save canvas Component */}
+ {
+ id &&
+
-
- {
- if (canvasHeight > parseInt(e.target.value)) {
- handleChange("height", parseInt(e.target.value, 10));
- }
- }}
- />
-
- {content()}
+ {isDragActive diff --git a/src/components/FabricCanvas.jsx b/src/components/FabricCanvas.jsx deleted file mode 100644 index 385cfbe..0000000 --- a/src/components/FabricCanvas.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { fabric } from 'fabric'; - -const FabricCanvas = () => { - const canvasRef = useRef(null); - const [canvas, setCanvas] = useState(null); - - // Canvas settings - const canvasSettings = { - width: 800, - height: 600, - }; - - useEffect(() => { - // Initialize the canvas - const newCanvas = new fabric.Canvas(canvasRef.current, { - backgroundColor: 'black', - selection: true, - height: canvasSettings.height, - width: canvasSettings.width, - controlsAboveOverlay: true, - preserveObjectStacking: true, - }); - - // Create the clipping path (rectangle) - const clipPath = new fabric.Rect({ - width: 300, - height: 300, - left: (canvasSettings.width - 300) / 2, // Center horizontally - top: (canvasSettings.height - 300) / 2, // Center vertically - fill: 'transparent', // Transparent fill - stroke: 'red', // White outline - strokeWidth: 2, - absolutePositioned: true, // Important for clipping path - }); - - // Apply the clipPath to the canvas - newCanvas.clipPath = clipPath; - - // Add the clipping path to visualize it - newCanvas.add(clipPath); - - // Add a sample object to the canvas - const rect = new fabric.Rect({ - width: 100, - height: 100, - fill: 'orange', - left: 200, - top: 150, - }); - newCanvas.add(rect); - - // Save the canvas instance - setCanvas(newCanvas); - - // Clean up on unmount - return () => { - newCanvas.dispose(); - }; - }, []); - - return ( -
-
-
- );
-};
-
-export default FabricCanvas;
diff --git a/src/components/Layouts/LeftSidebar.jsx b/src/components/Layouts/LeftSidebar.jsx
index ed4de47..73f69d5 100644
--- a/src/components/Layouts/LeftSidebar.jsx
+++ b/src/components/Layouts/LeftSidebar.jsx
@@ -24,7 +24,7 @@ const sidebarItems = [
export function Sidebar() {
const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
return (
-
+
{sidebarItems.map((item) => {
const Icon = item.icon;
return (
diff --git a/src/components/Layouts/SheetLeftPanel.jsx b/src/components/Layouts/SheetLeftPanel.jsx
deleted file mode 100644
index 63d09ce..0000000
--- a/src/components/Layouts/SheetLeftPanel.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Sheet, SheetContent, SheetDescription } from '../ui/sheet';
-import AddShapes from './AddShapes';
-import { Separator } from '../ui/separator';
-import { Button } from '../ui/button';
-import { X, Store, Shapes, Upload } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import AllIconsPage from '../EachComponent/Icons/AllIcons';
-import UploadImage from '../EachComponent/UploadImage';
-import { useContext } from 'react';
-import OpenContext from '../Context/openContext/OpenContext';
-
-const left = "left";
-
-const SheetLeftPanel = () => {
- const { leftPanelOpen, setLeftPanelOpen } = useContext(OpenContext);
-
- // Prevent closing on outside clicks
- const handleOpenChange = (isOpen) => {
- if (!isOpen) {
- // Do nothing when clicking outside
- return; // Sheet won't close
- }
- setLeftPanelOpen(isOpen); // Update only on valid trigger
- };
-
- // Function to handle closing the sheet
- const handleClose = () => {
- setLeftPanelOpen(false); // Close when button is clicked
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default SheetLeftPanel
\ No newline at end of file
diff --git a/src/components/Layouts/SheetRightPanel.jsx b/src/components/Layouts/SheetRightPanel.jsx
deleted file mode 100644
index b95b6b5..0000000
--- a/src/components/Layouts/SheetRightPanel.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
-} from "@/components/ui/sheet"
-import CustomizeShape from "../EachComponent/CustomizeShape";
-import { Separator } from "../ui/separator";
-import { Button } from "../ui/button";
-import { X } from "lucide-react";
-import { useContext, useEffect, useState } from "react";
-import ActiveObjectContext from "../Context/activeObject/ObjectContext";
-import OpenContext from "../Context/openContext/OpenContext";
-import CanvasSetting from "../CanvasSetting";
-import CollapsibleComponent from "../EachComponent/Customization/CollapsibleComponent";
-import { Card } from "../ui/card";
-
-const SheetRightPanel = () => {
- const { rightPanelOpen, setRightPanelOpen } = useContext(OpenContext)
-
- const { activeObject } = useContext(ActiveObjectContext);
-
- const [open, setOpen] = useState(false);
-
- useEffect(() => {
- if (activeObject) {
- setOpen(true);
- }
- }, [activeObject])
-
- // Prevent closing on outside clicks
- const handleOpenChange = (isOpen) => {
- if (!isOpen) {
-
- // Do nothing when clicking outside
- return; // Sheet won't close
- }
- setRightPanelOpen(isOpen); // Update only
- };
-
- // Function to handle closing the sheet
- const handleClose = () => {
- setRightPanelOpen(false); // Close when button is clicked
- };
-
- return (
-
-
-
-
- Edit Customization
-
-
-
-
- Customize each shapes, and text as per your choice.
-
-
-
-
-
-
- )
-}
-
-export default SheetRightPanel;
diff --git a/src/components/ObjectPanel.jsx b/src/components/ObjectPanel.jsx
deleted file mode 100644
index 8968c9d..0000000
--- a/src/components/ObjectPanel.jsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Button } from './ui/button'
-import { Card, CardHeader, CardTitle } from './ui/card'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
-import { useContext, useState } from 'react'
-import { PencilRuler, Shapes, Store, Upload, ChevronDown, ChevronUp, X } from 'lucide-react';
-import OpenContext from './Context/openContext/OpenContext';
-import AllIconsPage from './EachComponent/Icons/AllIcons'
-import { Separator } from './ui/separator'
-import { ScrollArea } from './ui/scroll-area'
-import AddShapes from './Layouts/AddShapes'
-import UploadImage from './EachComponent/UploadImage'
-import CustomizeShape from './EachComponent/CustomizeShape'
-import RndComponent from './Layouts/RndComponent'
-
-const ObjectPanel = () => {
- const [isCollapsed, setIsCollapsed] = useState(false);
- const { tabValue, setTabValue, setOpenObjectPanel } = useContext(OpenContext);
-
- const rndValue = {
- valueX: 0,
- valueY: 20,
- width: 250,
- height: 0,
- minWidth: 280,
- maxWidth: 300,
- minHeight: 0,
- maxHeight: 500,
- bound: "parent"
- }
-
- return (
-
-
-
-
-
- setIsCollapsed(!open)}>
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default ObjectPanel
\ No newline at end of file
diff --git a/src/components/ObjectShortcut.jsx b/src/components/ObjectShortcut.jsx
index c99018e..40e376b 100644
--- a/src/components/ObjectShortcut.jsx
+++ b/src/components/ObjectShortcut.jsx
@@ -20,6 +20,9 @@ import {
Layers,
} from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { useMutation } from "@tanstack/react-query";
+import { deleteImage } from "../api/uploadApi";
+import { toast } from "../hooks/use-toast";
export const ObjectShortcut = ({ value }) => {
const { canvas } = useContext(CanvasContext);
@@ -51,7 +54,11 @@ export const ObjectShortcut = ({ value }) => {
setActiveObject(group);
canvas.renderAll();
} else {
- console.log("Select at least two objects");
+ toast({
+ title: "Select at least two objects",
+ description: "Please select at least two objects to group.",
+ variant: "destructive",
+ })
}
};
@@ -136,6 +143,27 @@ export const ObjectShortcut = ({ value }) => {
}
};
+ const { mutate: deleteMutate } = useMutation({
+ mutationFn: async (url) => {
+ return await deleteImage(url);
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ }
+ });
+
// Remove Selected Element
const removeSelected = useCallback(() => {
const activeObject = canvas?.getActiveObject();
@@ -159,7 +187,15 @@ export const ObjectShortcut = ({ value }) => {
canvas.remove(...activeObject);
setActiveObject(null);
}
- }, [canvas, setActiveObject]);
+
+ if (activeObject?.type === "image") {
+ const imgUrl = activeObject?._originalElement?.currentSrc;
+ canvas.remove(activeObject);
+ setActiveObject(null);
+ canvas.renderAll();
+ deleteMutate(imgUrl);
+ }
+ }, [canvas, setActiveObject, deleteMutate]);
// duplicating current objects
const duplicating = () => {
@@ -184,11 +220,10 @@ export const ObjectShortcut = ({ value }) => {
Your customizable, canvas playground.
- -Shapes & Text
-Icons
-Image
-
-
-
-
-
-
-
-
-
-
-
-
- No active object found
- } -
-
- Object Panel
-
-
- setTabValue(value)} // Sync tab state with context
- >
-
-
- setTabValue("icons")}
- >
-
-
- setTabValue("shapes")}
- >
-
-
- setTabValue("images")}
- >
-
-
- setTabValue("customize")}
- >
-
-
-
- {/* All icons */}
-
-
-
- {/* All shapes */}
-
-
-
- {/* Upload images */}
-
-
-
- {/* Customization */}
-
-
-
-
-
-
-
-
-
-
- Shapes
-
-
-
-
- Upload
-
-
-
-
-
-
- Object customization
-
-
-
-
{multipleObjects && (
{
+ return (
+
+
+ )
+}
+
+export default NotFound
+
diff --git a/src/components/Pages/UnAuthenticated.jsx b/src/components/Pages/UnAuthenticated.jsx
new file mode 100644
index 0000000..4df26b2
--- /dev/null
+++ b/src/components/Pages/UnAuthenticated.jsx
@@ -0,0 +1,32 @@
+import { Lock } from "lucide-react"
+
+const Unauthenticated = () => {
+ return (
+
+
+
+
+ 404
+
+
+
+ ?
+
+ Page Not Found
+Oops! The page you are looking for does not exist or has been moved.
+ + Go Back to Dashboard + +
+
+ )
+}
+
+export default Unauthenticated
+
diff --git a/src/components/Panel/EditorPanel.jsx b/src/components/Panel/EditorPanel.jsx
index 092c183..ef328b0 100644
--- a/src/components/Panel/EditorPanel.jsx
+++ b/src/components/Panel/EditorPanel.jsx
@@ -50,7 +50,7 @@ const EditorPanel = () => {
return (
<>
{selectedPanel !== "" && (
-
+
+
+
+
+
+
+ !
+
+ Access Denied
+Authentication Required
++ Sorry, you need to be authenticated to access this page. Please log in to continue. +
+ + Go Back to Dashboard + +
+
{renderPanel()}
)}
diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx
index 901de91..8e6da74 100644
--- a/src/components/Panel/TopBar.jsx
+++ b/src/components/Panel/TopBar.jsx
@@ -37,11 +37,10 @@ export function TopBar() {
return (
setShowScrollButtons(true)}
onMouseLeave={() => setShowScrollButtons(false)}
>
@@ -84,6 +83,7 @@ export function TopBar() {
Add image
+ {/* canvas settings */}
+
{
+ const { canvas } = useContext(CanvasContext);
+ const { setSelectedPanel } = useContext(CanvasContext);
+ const { setActiveObject } = useContext(ActiveObjectContext);
+
+ const [saveCanvas, setSaveCanvas] = useState({
+ name: "",
+ description: "",
+ preview_url: "",
+ });
+
+ const params = useParams();
+ const { id } = params;
+ const { toast } = useToast();
+ const navigate = useNavigate();
+
+ const queryClient = useQueryClient();
+
+ // to get each canvas_project data
+ const { data: projectData, isLoading: projectLoading } = useQuery({
+ queryKey: ['project', id],
+ queryFn: async () => await getProjectById(id),
+ enabled: !!id,
+ });
+
+ // to update the project
+ const { mutate: projectUpdate, isPending } = useMutation({
+ mutationFn: async ({ id, projectData }) => {
+ return await updateProject({ id, ...projectData })
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message,
+ })
+ console.log(data);
+ // Invalidate a single query key
+ queryClient.invalidateQueries({ queryKey: ["project", id] });
+
+ // to load the object into canvas
+ // canvas.loadFromJSON(data?.data?.object, () => {
+ // canvas.renderAll();
+ // }, (err) => {
+ // console.error('Error loading object:', err);
+ // });
+ }
+ else {
+ toast({
+ title: data?.status,
+ description: data?.message,
+ variant: "destructive"
+ })
+ }
+ }
+ })
+
+ // to delete the project
+ const { mutate: projectDelete, isPending: deletePending } = useMutation({
+ mutationFn: async (id) => {
+ return await deleteProject(id)
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message,
+ })
+ // Invalidate a single query key
+ queryClient.invalidateQueries({ queryKey: ["project", id] });
+ setSelectedPanel("");
+ navigate("/");
+ // for clear canvas
+ canvas.clear();
+ canvas.renderAll();
+ canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas));
+ setActiveObject(null);
+ }
+ else {
+ toast({
+ title: data?.status,
+ description: data?.message,
+ variant: "destructive"
+ })
+ }
+ }
+ })
+
+ // to set projectData into state
+ useEffect(() => {
+ if (projectData?.data && !projectLoading && projectData?.data?.preview_url !== null) {
+ setSaveCanvas((prev) => ({
+ ...prev,
+ name: projectData?.data?.name,
+ description: projectData?.data?.description,
+ preview_url: projectData?.data?.preview_url
+ }));
+ }
+ }, [projectData, projectLoading]);
+
+ // upload preview-image handler
+ const { mutate: uploadCanvasImage, isPending: uploadCanvasPending } = useMutation({
+ mutationFn: async ({ file, id }) => {
+ return await uploadImage({ file, id });
+ },
+ onSuccess: (data) => {
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ });
+ console.log(data?.data[0]?.url);
+ handleSaveWithPreViewImage({ preview_url: data?.data[0]?.url, name: saveCanvas?.name, description: saveCanvas?.description });
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ });
+ }
+ }
+ })
+
+ // preview-image remove handler
+ const { mutate: removeCanvasImage, isPending: removeCanvasPending } = useMutation({
+ mutationFn: async (url) => {
+ return await deleteImage(url);
+ },
+ onSuccess: async (data) => {
+ console.log(data);
+ if (data?.status === 200) {
+ toast({
+ title: data?.status,
+ description: data?.message
+ })
+ const file = await captureImage();
+ if (file) {
+ uploadCanvasImage({ file, id });
+ }
+ }
+ else {
+ toast({
+ variant: "destructive",
+ title: data?.status,
+ description: data?.message
+ })
+ }
+ }
+ });
+
+ const handleSaveProject = async () => {
+ if (!saveCanvas?.name || saveCanvas?.name.trim() === "") {
+ toast({
+ title: "Name error",
+ description: "Please enter a name for your project",
+ variant: "destructive"
+ });
+ return; // Exit the function early
+ }
+
+ // Check if preview_url is valid
+
+ if (saveCanvas?.preview_url) {
+ try {
+ removeCanvasImage(saveCanvas?.preview_url);
+ console.log("Image removed", saveCanvas?.preview_url);
+ } catch (error) {
+ console.error("Error removing image:", error);
+ }
+ } else {
+ try {
+ console.log("Capturing image...");
+ const file = await captureImage();
+ console.log("Captured file:", file);
+
+ if (file) {
+ uploadCanvasImage({ file, id });
+ console.log("Image uploaded successfully");
+ }
+ } catch (error) {
+ console.error("Error capturing image:", error);
+ }
+ }
+ };
+
+ // this will save the canvas as a json object
+ const handleSaveWithPreViewImage = (body) => {
+ const object = canvas.toJSON(['id', 'selectable']); // Include any custom properties you need
+ if (object?.objects?.length === 0) {
+ toast({
+ title: "Canvas is empty",
+ description: "Please add some elements to your canvas",
+ variant: "destructive"
+ });
+ } else {
+ const projectData = { ...body, object };
+ // Wait for the project update before continuing
+ projectUpdate({ id, projectData });
+ }
+ }
+
+ // this will capture canvas so that it will be saved as a preview_image for each project
+ const captureImage = async () => {
+ if (!canvas) return;
+
+ const width = canvas.width;
+ const height = canvas.height;
+
+ // Create a temporary canvas
+ const tempCanvas = document.createElement('canvas');
+ const tempCtx = tempCanvas.getContext('2d');
+
+ tempCanvas.width = width;
+ tempCanvas.height = height;
+
+ // Convert canvas content to data URL
+ const dataUrl = canvas.toDataURL('image/jpeg', 1);
+
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+
+ // Set cross-origin attribute to avoid CORS issues
+ img.crossOrigin = "anonymous";
+ img.src = dataUrl;
+
+ img.onload = () => {
+ tempCtx.drawImage(img, 0, 0, width, height);
+
+ // Generate final image as JPEG
+ const resizedDataUrl = tempCanvas.toDataURL('image/jpeg', 1);
+
+ // Convert the data URL to Blob
+ fetch(resizedDataUrl)
+ .then(res => res.blob())
+ .then(blob => {
+ const file = new File([blob], `PlanPostAi-capture.jpg`, {
+ type: 'image/jpeg',
+ });
+ resolve(file);
+ })
+ .catch(reject);
+ };
+
+ img.onerror = (error) => {
+ console.error("Image loading error:", error);
+ reject(error);
+ };
+ });
+ };
+
+ const handleDeleteProject = () => {
+ projectDelete(id);
+ }
+
+ return (
+
+
+
+
+ {
+ saveCanvas?.preview_url &&
+ 
+ }
+
+
+
+ setSaveCanvas({ ...saveCanvas, name: e.target.value })}
+ placeholder="Project name"
+ />
+
+