group and ungroup issue solved

src/components/Canvas.jsx

@@ -13,7 +13,7 @@ const Canvas = () => {
 
     const { openSetting, openObjectPanel, openPanel } = useContext(OpenContext);
 
-    const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
+    const { setActiveObject } = useContext(ActiveObjectContext);
 
     useEffect(() => {
         if (!canvas) return; // Ensure canvas is available
@@ -76,8 +76,6 @@ const Canvas = () => {
         };
     }, [removeSelected]);
 
-    console.log(activeObject);
-
     return (
         <div className='flex flex-col items-center relative w-full h-full overflow-hidden'>
 

src/components/EachComponent/Customization/SelectObjectFromGroup.jsx

@@ -25,35 +25,86 @@ const SelectObjectFromGroup = () => {
         }
     }, [activeObject])
 
+    // useEffect(() => {
+    //     if (selectedObject && previewCanvasRef.current) {
+    //         const previewCanvas = new fabric.StaticCanvas(previewCanvasRef.current);
+
+    //         previewCanvas.setDimensions({
+    //             width: 100,
+    //             height: 100
+    //         })
+
+    //         // Clone the active object to create a true deep copy
+    //         selectedObject.clone((clonedObject) => {
+    //             if (selectedObject?.width > 100 || selectedObject?.height > 100) {
+    //                 clonedObject.set({
+    //                     scaleX: 0.2,
+    //                     scaleY: 0.2,
+    //                 })
+    //             }
+    //             // Add the cloned object to the canvas
+    //             clonedObject.set({
+    //                 left: 50,
+    //                 top: 50,
+    //                 originX: 'center',
+    //                 originY: 'center',
+    //                 selectable: false,
+    //                 evented: false,
+    //             })
+    //             previewCanvas.add(clonedObject);
+    //             previewCanvas.renderAll();
+    //         });
+
+    //         return () => {
+    //             previewCanvas.dispose()
+    //         }
+    //     }
+    // }, [selectedObject])
+
+
     useEffect(() => {
         if (selectedObject && previewCanvasRef.current) {
+            // Create a new static canvas
             const previewCanvas = new fabric.StaticCanvas(previewCanvasRef.current);
 
             previewCanvas.setDimensions({
                 width: 100,
                 height: 100
-            })
+            });
 
-            // Clone the active object to create a true deep copy
+            // Clear previous objects (if any)
+            previewCanvas.clear();
+
+            // Clone the active object for preview
             selectedObject.clone((clonedObject) => {
-                // Add the cloned object to the canvas
+                const scaledWidth = selectedObject.width * selectedObject.scaleX;
+                const scaledHeight = selectedObject.height * selectedObject.scaleY;
+
+                if (scaledWidth > 100 || scaledHeight > 100) {
+                    clonedObject.scaleToWidth(100); // Scale to fit width
+                    clonedObject.scaleToHeight(100); // Scale to fit height
+                }
+
                 clonedObject.set({
                     left: 50,
                     top: 50,
                     originX: 'center',
                     originY: 'center',
-                    selectable: false,
+                });
-                    evented: false,
+
-                })
+                // Add the cloned object to preview canvas
                 previewCanvas.add(clonedObject);
                 previewCanvas.renderAll();
             });
 
+            // Cleanup function to dispose of the canvas
             return () => {
-                previewCanvas.dispose()
+                previewCanvas.clear();  // Clear all objects
-            }
+                previewCanvas.dispose(); // Properly dispose the canvas
+            };
         }
-    }, [selectedObject])
+    }, [selectedObject, previewCanvasRef]);
+
 
     const handleSelectObject = (value) => {
         const selected = groupObjects[parseInt(value)]
@@ -77,7 +128,7 @@ const SelectObjectFromGroup = () => {
                         <SelectTrigger className="w-full max-w-xs">
                             <SelectValue placeholder="Select object" />
                         </SelectTrigger>
-                        <SelectContent>
+                        <SelectContent className="max-h-[250px]">
                             {groupObjects.map((object, index) => (
                                 <SelectItem key={index} value={index.toString()}>
                                     {object.name || `Object ${index + 1}`}

src/components/EditPanel.jsx

@@ -23,6 +23,8 @@ export function EditPanel() {
         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,
@@ -34,7 +36,8 @@ export function EditPanel() {
             })
             canvas.remove(...activeObjects);
             canvas.add(group);
-            // canvas.setActiveObject(group);
+            canvas.setActiveObject(group);
+            setActiveObject(group);
             canvas.renderAll();
         } else {
             console.log("Select at least two objects")
@@ -43,13 +46,13 @@ export function EditPanel() {
 
     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) => {