import { useContext, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Button } from './ui/button'; import { PencilRuler, Save, Settings, Shapes, SquareX, Store, Upload, ChevronDown, ChevronUp, Type, ImageDown, X } from 'lucide-react'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'; import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'; import OpenContext from './Context/openContext/OpenContext'; import CanvasContext from './Context/canvasContext/CanvasContext'; import ActiveObjectContext from './Context/activeObject/ObjectContext'; import { fabric } from 'fabric'; import RndComponent from './Layouts/RndComponent'; import { ObjectShortcut } from "./ObjectShortcut"; export function EditPanel() { const [isCollapsed, setIsCollapsed] = useState(false); const { setTabValue, setOpenSetting, setOpenObjectPanel, setCaptureOpen, setOpenPanel } = useContext(OpenContext); const { canvas } = useContext(CanvasContext); const { setActiveObject } = useContext(ActiveObjectContext); const saveCanvasState = () => { // Get the JSON representation of all objects const json = canvas.toJSON(['id', 'selectable']); // Include any custom properties you need console.log(json); // Get background image data if it exists let backgroundImageData = null; if (canvas.backgroundImage) { backgroundImageData = { src: canvas.backgroundImage._element.src, width: canvas.backgroundImage.width, height: canvas.backgroundImage.height, scaleX: canvas.backgroundImage.scaleX, scaleY: canvas.backgroundImage.scaleY, originX: canvas.backgroundImage.originX, originY: canvas.backgroundImage.originY, opacity: canvas.backgroundImage.opacity }; } // Create the complete canvas state const canvasState = { version: '1.0', objects: json.objects, background: backgroundImageData, width: canvas.width, height: canvas.height, backgroundColor: canvas.backgroundColor }; console.log('Canvas state saved:', canvasState); // loadCanvasState(canvasState); }; // for clear canvas const clearCanvas = () => { canvas.clear(); canvas.renderAll(); } const addText = () => { if (canvas) { const text = new fabric.IText('Editable Text', { left: 100, top: 100, fontFamily: 'Poppins', fontSize: 16, }); // Add the text to the canvas and re-render canvas.add(text); // canvas.clipPath = text; canvas.setActiveObject(text); setActiveObject(text); canvas.renderAll(); } }; const rndValue = { valueX: 0, valueY: 20, width: 250, height: 0, minWidth: 250, maxWidth: 300, minHeight: 0, maxHeight: 0, bound: "parent" } return (
Edit Panel
setIsCollapsed(!open)} className="rnd-escape"> Edit Add Canvas
} label="Icons" onClick={() => { setOpenObjectPanel(true); setTabValue("icons"); }} tooltipContent="Add icons to canvas" /> } label="Shapes" onClick={() => { setTabValue("shapes"); setOpenObjectPanel(true); }} tooltipContent="Add shapes to canvas" /> } label="Text" onClick={() => { addText(); setTabValue("customize"); setOpenObjectPanel(true); }} tooltipContent="Add text to canvas" /> } label="Image" onClick={() => { setTabValue("images"); setOpenObjectPanel(true); }} tooltipContent="Upload and add image to canvas" /> } label="Customize" onClick={() => { setTabValue("customize"); setOpenObjectPanel(true); }} tooltipContent="Customize objects on canvas" />
} label="Save" onClick={saveCanvasState} tooltipContent="Save current canvas state" />
} label="Settings" onClick={() => setOpenSetting(true)} tooltipContent="Open canvas settings" />
} label="Clear" onClick={clearCanvas} tooltipContent="Clear entire canvas" /> } label="Capture" onClick={() => setCaptureOpen(true)} tooltipContent="Capture canvas" />
) } function ActionButton({ icon, label, onClick, tooltipContent }) { return (

{tooltipContent}

) }