@mhamz.01/easyflow-whiteboard 2.56.0 → 2.58.0

package/dist/hooks/useCopyPaste.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCopyPaste.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopyPaste.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAE9C,UAAU,iBAAiB;IACzB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,GAAI,kBAAkB,iBAAiB,SAmE/D,CAAC"}
+{"version":3,"file":"useCopyPaste.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopyPaste.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAiC,MAAM,QAAQ,CAAC;AAE/D,UAAU,iBAAiB;IACzB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,GAAI,kBAAkB,iBAAiB,SAmG/D,CAAC"}

package/dist/hooks/useCopyPaste.js

@@ -1,61 +1,85 @@
 import { useEffect, useRef } from "react";
+import { ActiveSelection } from "fabric";
 export const useCopyPaste = ({ fabricCanvas }) => {
-    // Clipboard lives in a ref — no React state needed, never causes re-renders
-    const clipboardRef = useRef(null);
+    // Store cloned individual objects — never a canvas-attached ActiveSelection
+    const clipboardRef = useRef([]);
     useEffect(() => {
         const handleKeyDown = async (e) => {
-            // Don't intercept when typing in inputs
             if (e.target instanceof HTMLInputElement ||
                 e.target instanceof HTMLTextAreaElement)
                 return;
             const canvas = fabricCanvas.current;
             if (!canvas)
                 return;
-            // ── Copy ──────────────────────────────────────────────────────────────
+            // ── Copy ────────────────────────────────────────────────────────────
             if ((e.ctrlKey || e.metaKey) && e.key === "c") {
                 const active = canvas.getActiveObject();
                 if (!active)
                     return;
-                // clone() returns a deep copy with no canvas reference —
-                // safe to store and paste multiple times
-                const cloned = await active.clone();
-                clipboardRef.current = cloned;
+                if (active.type === "activeSelection" && "getObjects" in active) {
+                    // Clone each child independently — detached from canvas
+                    // Store as flat array of individual objects, never as a group
+                    const clones = await Promise.all(active.getObjects().map((obj) => obj.clone()));
+                    // Snapshot each child's ABSOLUTE canvas position at copy time
+                    // getObjects() inside activeSelection returns group-relative coords,
+                    // so we must add the group's position to get true canvas coords
+                    const groupLeft = active.left ?? 0;
+                    const groupTop = active.top ?? 0;
+                    const groupAngle = active.angle ?? 0;
+                    clones.forEach((clone, i) => {
+                        const src = active.getObjects()[i];
+                        clone.set({
+                            left: (src.left ?? 0) + groupLeft,
+                            top: (src.top ?? 0) + groupTop,
+                            angle: (src.angle ?? 0) + groupAngle,
+                        });
+                        clone.setCoords();
+                    });
+                    clipboardRef.current = clones;
+                }
+                else {
+                    // Single object — clone detached
+                    const clone = await active.clone();
+                    clipboardRef.current = [clone];
+                }
                 return;
             }
-            // ── Paste ─────────────────────────────────────────────────────────────
+            // ── Paste ────────────────────────────────────────────────────────────
             if ((e.ctrlKey || e.metaKey) && e.key === "v") {
-                const copied = clipboardRef.current;
-                if (!copied)
+                if (clipboardRef.current.length === 0)
                     return;
-                // Clone again from clipboard so paste can be repeated (Ctrl+V × N)
-                const cloned = await copied.clone();
-                // Offset so paste doesn't land exactly on top of the original
-                cloned.set({
-                    left: (cloned.left ?? 0) + 20,
-                    top: (cloned.top ?? 0) + 20,
-                    // Clear any active selection state from the cloned object
-                    evented: true,
-                });
-                // If it's a group/active selection, ungroup into individual objects
-                if (cloned.type === "activeSelection" && "getObjects" in cloned) {
-                    cloned.canvas = canvas;
-                    cloned.getObjects().forEach((obj) => {
-                        canvas.add(obj);
+                canvas.discardActiveObject();
+                const offset = 20;
+                const addedObjects = [];
+                // Clone fresh from our stored detached objects each paste
+                // This guarantees no canvas reference contamination
+                const freshClones = await Promise.all(clipboardRef.current.map((obj) => obj.clone()));
+                for (const clone of freshClones) {
+                    clone.set({
+                        left: (clone.left ?? 0) + offset,
+                        top: (clone.top ?? 0) + offset,
+                        evented: true,
+                        selectable: true,
                     });
-                    cloned.setCoords();
+                    clone.setCoords();
+                    canvas.add(clone);
+                    addedObjects.push(clone);
+                }
+                if (addedObjects.length === 1) {
+                    canvas.setActiveObject(addedObjects[0]);
                 }
                 else {
-                    canvas.add(cloned);
+                    const newSelection = new ActiveSelection(addedObjects, { canvas });
+                    canvas.setActiveObject(newSelection);
                 }
-                // Select the newly pasted object(s)
-                canvas.setActiveObject(cloned);
                 canvas.requestRenderAll();
-                // Update clipboard to the new clone so next paste offsets again
-                clipboardRef.current = cloned;
-                return;
+                // Update clipboard with the newly pasted clones (detached copies)
+                // so next Ctrl+V offsets from current paste position
+                // CRITICAL: clone them immediately so they're detached from canvas
+                clipboardRef.current = await Promise.all(addedObjects.map((obj) => obj.clone()));
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [fabricCanvas]); // registered once — canvas read via ref
+    }, [fabricCanvas]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.56.0",
+    "version": "2.58.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",