@mhamz.01/easyflow-whiteboard 2.56.0 → 2.57.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,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,SA2F/D,CAAC"}

package/dist/hooks/useCopyPaste.js

@@ -22,37 +22,54 @@ export const useCopyPaste = ({ fabricCanvas }) => {
                 clipboardRef.current = cloned;
                 return;
             }
-            // ── Paste ─────────────────────────────────────────────────────────────
+            // ── Paste ─────────────────────────────────────────────────────────────────
             if ((e.ctrlKey || e.metaKey) && e.key === "v") {
                 const copied = clipboardRef.current;
                 if (!copied)
                     return;
-                // Clone again from clipboard so paste can be repeated (Ctrl+V × N)
+                canvas.discardActiveObject();
                 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
+                const offset = 20;
                 if (cloned.type === "activeSelection" && "getObjects" in cloned) {
-                    cloned.canvas = canvas;
-                    cloned.getObjects().forEach((obj) => {
-                        canvas.add(obj);
-                    });
-                    cloned.setCoords();
+                    const objects = cloned.getObjects();
+                    // Apply the group's transform to each child to get absolute positions
+                    const groupLeft = cloned.left ?? 0;
+                    const groupTop = cloned.top ?? 0;
+                    const groupAngle = cloned.angle ?? 0;
+                    const addedObjects = [];
+                    for (const obj of objects) {
+                        const childClone = await obj.clone();
+                        // Convert from group-local to canvas-absolute coords
+                        // Fabric stores child positions relative to group center
+                        childClone.set({
+                            left: (obj.left ?? 0) + groupLeft + offset,
+                            top: (obj.top ?? 0) + groupTop + offset,
+                            angle: (obj.angle ?? 0) + groupAngle,
+                        });
+                        childClone.setCoords();
+                        canvas.add(childClone);
+                        addedObjects.push(childClone);
+                    }
+                    // Select all pasted objects together
+                    if (addedObjects.length > 0) {
+                        const { ActiveSelection } = await import("fabric");
+                        const newSelection = new ActiveSelection(addedObjects, { canvas });
+                        canvas.setActiveObject(newSelection);
+                        // Update clipboard to new clones for cascading offset on next paste
+                        clipboardRef.current = newSelection;
+                    }
                 }
                 else {
+                    cloned.set({
+                        left: (cloned.left ?? 0) + offset,
+                        top: (cloned.top ?? 0) + offset,
+                    });
+                    cloned.setCoords();
                     canvas.add(cloned);
+                    canvas.setActiveObject(cloned);
+                    clipboardRef.current = cloned;
                 }
-                // 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;
             }
         };
         window.addEventListener("keydown", handleKeyDown);

package/package.json

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