Clone multiple objects

Author: MultiMote

src/lib/ImageEditor.svelte

@@ -74,9 +74,7 @@
   };
 
   const cloneSelected = () => {
-    if (selectedObject) {
-      ImageEditorUtils.cloneObject(fabricCanvas, selectedObject).then(() => undo.push(fabricCanvas, labelProps));
-    }
+    ImageEditorUtils.cloneSelection(fabricCanvas).then(() => undo.push(fabricCanvas, labelProps));
   };
 
   const moveSelected = (direction: MoveDirection, ctrl?: boolean) => {
@@ -440,10 +438,15 @@
           </button>
         {/if}
 
-        {#if selectedObject && selectedCount === 1}
+
+
+        {#if selectedCount > 0}
           <button class="btn btn-sm btn-secondary me-1" on:click={cloneSelected} title={$tr("editor.clone")}>
             <MdIcon icon="content_copy" />
           </button>
+        {/if}
+
+        {#if selectedObject && selectedCount === 1}
           <GenericObjectParamsControls {selectedObject} valueUpdated={controlValueUpdated} />
         {/if}
 

src/utils/image_editor_utils.ts

@@ -3,13 +3,36 @@ import { GRID_SIZE, OBJECT_DEFAULTS } from "../defaults";
 import type { MoveDirection } from "../types";
 
 export class ImageEditorUtils {
-  static async cloneObject(canvas: fabric.Canvas, selected: fabric.FabricObject): Promise<void> {
-    const obj = await selected.clone();
-    obj.snapAngle = OBJECT_DEFAULTS.snapAngle;
-    obj.top += GRID_SIZE;
-    obj.left += GRID_SIZE;
-    canvas.add(obj);
-    canvas.setActiveObject(obj);
+  static async cloneSelection(canvas: fabric.Canvas): Promise<void> {
+    const clonedList: fabric.FabricObject[] = [];
+
+    const selection = canvas.getActiveObject();
+
+    if (selection === undefined) {
+      return;
+    }
+
+    let selected: fabric.FabricObject[] = canvas.getActiveObjects();
+
+    for (const obj of selected) {
+      const cloned = await obj.clone();
+
+      if (selection instanceof fabric.ActiveSelection) {
+        cloned.left += selection.left + selection.width / 2;
+        cloned.top += selection.top + selection.height / 2;
+      }
+
+      cloned.top += GRID_SIZE;
+      cloned.left += GRID_SIZE;
+      cloned.snapAngle = OBJECT_DEFAULTS.snapAngle;
+      
+      clonedList.push(cloned);
+    }
+
+    canvas.add(...clonedList);
+
+    const newSelection = new fabric.ActiveSelection(clonedList);
+    canvas.setActiveObject(newSelection);
   }
 
   static moveSelection(canvas: fabric.Canvas, direction: MoveDirection, ctrl?: boolean) {