From 4f218856c302869add13346f65e5f0297de4148a Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Wed, 6 Dec 2023 10:39:13 +0800
Subject: [PATCH] fix fractional indices on duplication

---
 src/actions/actionDuplicateSelection.tsx |  8 +++++++-
 src/components/App.tsx                   | 11 ++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx
index ba079168e9..916c146cf1 100644
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@@ -31,6 +31,7 @@ import {
   excludeElementsInFramesFromSelection,
   getSelectedElements,
 } from "../scene/selection";
+import { fixFractionalIndices } from "../fractionalIndex";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -85,6 +86,7 @@ const duplicateElements = (
   const newElements: ExcalidrawElement[] = [];
   const oldElements: ExcalidrawElement[] = [];
   const oldIdToDuplicatedId = new Map();
+  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
 
   const duplicateAndOffsetElement = (element: ExcalidrawElement) => {
     const newElement = duplicateElement(
@@ -96,6 +98,7 @@ const duplicateElements = (
         y: element.y + GRID_SIZE / 2,
       },
     );
+    duplicatedElementsMap.set(newElement.id, newElement);
     oldIdToDuplicatedId.set(element.id, newElement.id);
     oldElements.push(element);
     newElements.push(newElement);
@@ -234,7 +237,10 @@ const duplicateElements = (
 
   // step (3)
 
-  const finalElements = finalElementsReversed.reverse();
+  const finalElements = fixFractionalIndices(
+    finalElementsReversed.reverse(),
+    duplicatedElementsMap,
+  );
 
   // ---------------------------------------------------------------------------
 
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b71c8a8c9d..abdd484f1c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -399,6 +399,7 @@ import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
+import { fixFractionalIndices } from "../fractionalIndex";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -6845,6 +6846,7 @@ class App extends React.Component<AppProps, AppState> {
                 })
                 .map((element) => element.id),
             );
+            const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
 
             const elements = this.scene.getElementsIncludingDeleted();
 
@@ -6861,6 +6863,10 @@ class App extends React.Component<AppProps, AppState> {
                   groupIdMap,
                   element,
                 );
+                duplicatedElementsMap.set(
+                  duplicatedElement.id,
+                  duplicatedElement,
+                );
                 const origElement = pointerDownState.originalElements.get(
                   element.id,
                 )!;
@@ -6883,7 +6889,10 @@ class App extends React.Component<AppProps, AppState> {
                 nextElements.push(element);
               }
             }
-            const nextSceneElements = [...nextElements, ...elementsToAppend];
+            const nextSceneElements = fixFractionalIndices(
+              [...nextElements, ...elementsToAppend],
+              duplicatedElementsMap,
+            );
             bindTextToShapeAfterDuplication(
               nextElements,
               elementsToAppend,