import { useCallback, useContext, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Button } from './ui/button'; import { BringToFront, CopyPlus, GroupIcon, PencilRuler, Save, Settings, Shapes, SquareX, Store, Trash2, UngroupIcon, Upload, ChevronDown, ChevronUp, MoveIcon, 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'; export function EditPanel() { const [isCollapsed, setIsCollapsed] = useState(false); const { setTabValue, setOpenSetting, setOpenObjectPanel, setCaptureOpen, setOpenPanel } = useContext(OpenContext); const { canvas } = useContext(CanvasContext); const { setActiveObject, activeObject } = useContext(ActiveObjectContext); const groupSelectedObjects = () => { const activeObjects = canvas.getActiveObjects(); // Get selected objects if (activeObjects.length > 1) { canvas.discardActiveObject(); const group = new fabric.Group(activeObjects, { left: canvas?.width / 2, top: canvas?.height / 2, originX: "center", originY: "center", selectable: true, // Allow group selection subTargetCheck: true, // Allow individual object selection hasControls: true, // Enable resizing/movement of the group }) canvas.remove(...activeObjects); canvas.add(group); canvas.setActiveObject(group); setActiveObject(group); canvas.renderAll(); } else { console.log("Select at least two objects") } }; const ungroupSelectedObjects = () => { const activeObject = canvas.getActiveObject(); if (activeObject && activeObject.type === "group") { // Get the group const group = activeObject; canvas.discardActiveObject(); // Remove the group from the canvas canvas.remove(group); setActiveObject(null); // Iterate through each object in the group group._objects.forEach((object) => { // Calculate the absolute position based on the group's transformation const objLeft = object.left * group.scaleX + group.left; const objTop = object.top * group.scaleY + group.top; // Reset transformations and positions object.set({ left: objLeft, top: objTop, scaleX: object.scaleX * group.scaleX, // Adjust scale based on group scaleY: object.scaleY * group.scaleY, // Adjust scale based on group angle: object.angle + group.angle, // Adjust rotation hasControls: true, // Allow resizing selectable: true, // Make selectable group: null, // Remove group reference originX: "center", originY: "center", }); // Update coordinates object.setCoords(); // Add the object back to the canvas canvas.add(object); }); // Clear the selection canvas.discardActiveObject(); // Render the canvas to reflect changes canvas.renderAll(); } }; // Bring Selected Object to Front const bringToFront = () => { if (activeObject) { activeObject.bringToFront(); canvas.renderAll(); } }; // Remove Selected Element 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]); 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); }; // duplicating current objects const duplicating = () => { // Clone the active object to create a true deep copy activeObject.clone((clonedObject) => { // Add the cloned object to the canvas clonedObject.set("left", clonedObject?.left + 30) canvas.add(clonedObject); canvas.renderAll(); }); } // 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)}> Edit Add Canvas
} label="Group" onClick={groupSelectedObjects} tooltipContent={

Group selected objects

To select multiple objects:

  1. Hold down the Shift key
  2. Click and drag with the left mouse button to select objects
  3. Release the Shift key and mouse button

Then click this button to group the selected objects.

} /> } label="Ungroup" onClick={ungroupSelectedObjects} tooltipContent="Ungroup selected objects" /> } label="Duplicate" onClick={duplicating} tooltipContent="Duplicate selected objects" /> } label="To Front" onClick={bringToFront} tooltipContent="Bring selected objects to front" /> } label="Move" onClick={() => { }} tooltipContent="Move selected objects" /> } label="Remove" onClick={removeSelected} tooltipContent="Remove selected objects" />
} 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}

 ) }