fix shift to end z-index error

excalidraw-app/collab/reconciliation.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "../../src/element/types";
 import { AppState } from "../../src/types";
-import { arrayToMap, arrayToMapWithIndex } from "../../src/utils";
+import { arrayToMap } from "../../src/utils";
 import { orderByFractionalIndex } from "../../src/fractionalIndex";
 
 export type ReconciledElements = readonly ExcalidrawElement[] & {

src/data/__snapshots__/transform.test.ts.snap

@@ -15,6 +15,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -50,6 +51,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -86,6 +88,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 35,
@@ -139,6 +142,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     "gap": 3.834326468444573,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -191,6 +195,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -230,6 +235,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -274,6 +280,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -320,6 +327,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
     "gap": 205,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -371,6 +379,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -417,6 +426,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -468,6 +478,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -508,6 +519,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -543,6 +555,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -584,6 +597,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -635,6 +649,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -679,6 +694,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -723,6 +739,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -758,6 +775,7 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 200,
@@ -790,6 +808,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -835,6 +854,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "endArrowhead": "triangle",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -880,6 +900,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -925,6 +946,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -968,6 +990,7 @@ exports[`Test Transform > should transform regular shapes 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -998,6 +1021,7 @@ exports[`Test Transform > should transform regular shapes 2`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1028,6 +1052,7 @@ exports[`Test Transform > should transform regular shapes 3`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1058,6 +1083,7 @@ exports[`Test Transform > should transform regular shapes 4`] = `
   "backgroundColor": "#c0eb75",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1088,6 +1114,7 @@ exports[`Test Transform > should transform regular shapes 5`] = `
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1118,6 +1145,7 @@ exports[`Test Transform > should transform regular shapes 6`] = `
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1152,6 +1180,7 @@ exports[`Test Transform > should transform text element 1`] = `
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1191,6 +1220,7 @@ exports[`Test Transform > should transform text element 2`] = `
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1233,6 +1263,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1283,6 +1314,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1333,6 +1365,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1383,6 +1416,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1430,6 +1464,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1469,6 +1504,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1508,6 +1544,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1548,6 +1585,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1589,6 +1627,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 35,
@@ -1624,6 +1663,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 85,
@@ -1659,6 +1699,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 170,
@@ -1694,6 +1735,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 120,
@@ -1729,6 +1771,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 85,
@@ -1764,6 +1807,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 120,
@@ -1798,6 +1842,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1837,6 +1882,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1877,6 +1923,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,
@@ -1919,6 +1966,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1959,6 +2007,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,
@@ -2000,6 +2049,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,

src/fractionalIndex.ts

@@ -76,19 +76,18 @@ export const fixFractionalIndices = (
   elements: readonly ExcalidrawElement[],
   movedElementsMap: Map<string, ExcalidrawElement>,
 ) => {
-  const fixedElements = elements.slice();
   const contiguousMovedIndices = getContiguousMovedIndices(
-    fixedElements,
+    elements,
     movedElementsMap,
   );
 
   for (const movedIndices of contiguousMovedIndices) {
     try {
       const predecessor =
-        fixedElements[movedIndices[0] - 1]?.fractionalIndex || null;
+        elements[movedIndices[0] - 1]?.fractionalIndex || null;
       const successor =
-        fixedElements[movedIndices[movedIndices.length - 1] + 1]
-          ?.fractionalIndex || null;
+        elements[movedIndices[movedIndices.length - 1] + 1]?.fractionalIndex ||
+        null;
 
       const newKeys = generateNKeysBetween(
         predecessor,
@@ -97,7 +96,7 @@ export const fixFractionalIndices = (
       );
 
       for (let i = 0; i < movedIndices.length; i++) {
-        const element = fixedElements[movedIndices[i]];
+        const element = elements[movedIndices[i]];
 
         mutateElement(
           element,
@@ -112,7 +111,7 @@ export const fixFractionalIndices = (
     }
   }
 
-  return fixedElements;
+  return elements as ExcalidrawElement[];
 };
 
 const generateFractionalIndex = (

src/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -41,8 +42,8 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
+  "version": 4,
+  "versionNonce": 2019559783,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -57,6 +58,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -75,8 +77,8 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "strokeWidth": 2,
   "type": "diamond",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -91,6 +93,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -109,8 +112,8 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "strokeWidth": 2,
   "type": "ellipse",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -125,6 +128,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -156,8 +160,8 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "strokeWidth": 2,
   "type": "line",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
+  "version": 4,
+  "versionNonce": 2019559783,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -172,6 +176,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -190,8 +195,8 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 30,
   "y": 20,

src/tests/__snapshots__/move.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "Zz",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -18,14 +19,14 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 1014066025,
+  "seed": 238820263,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 4,
-  "versionNonce": 238820263,
+  "version": 6,
+  "versionNonce": 1604849351,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -38,6 +39,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -56,8 +58,8 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 4,
-  "versionNonce": 1604849351,
+  "version": 5,
+  "versionNonce": 23633383,
   "width": 30,
   "x": -10,
   "y": 60,
@@ -70,6 +72,7 @@ exports[`move element > rectangle 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -88,8 +91,8 @@ exports[`move element > rectangle 1`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
+  "version": 4,
+  "versionNonce": 1116226695,
   "width": 30,
   "x": 0,
   "y": 40,
@@ -107,6 +110,7 @@ exports[`move element > rectangles with binding arrow 1`] = `
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -125,8 +129,8 @@ exports[`move element > rectangles with binding arrow 1`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 81784553,
+  "version": 4,
+  "versionNonce": 760410951,
   "width": 100,
   "x": 0,
   "y": 0,
@@ -144,6 +148,7 @@ exports[`move element > rectangles with binding arrow 2`] = `
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": "a1",
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -156,14 +161,14 @@ exports[`move element > rectangles with binding arrow 2`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 2019559783,
+  "seed": 1150084233,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
-  "versionNonce": 927333447,
+  "version": 7,
+  "versionNonce": 745419401,
   "width": 300,
   "x": 201,
   "y": 2,
@@ -182,6 +187,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
     "gap": 10,
   },
   "fillStyle": "solid",
+  "fractionalIndex": "a2",
   "frameId": null,
   "groupIds": [],
   "height": 81.48231043525051,
@@ -205,7 +211,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 238820263,
+  "seed": 1604849351,
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id0",
@@ -217,8 +223,8 @@ exports[`move element > rectangles with binding arrow 3`] = `
   "strokeWidth": 2,
   "type": "line",
   "updated": 1,
-  "version": 11,
-  "versionNonce": 1051383431,
+  "version": 12,
+  "versionNonce": 1984422985,
   "width": 81,
   "x": 110,
   "y": 49.981789081137734,

src/tests/__snapshots__/multiPointCreate.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 110,
@@ -46,8 +47,8 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 7,
-  "versionNonce": 1505387817,
+  "version": 8,
+  "versionNonce": 23633383,
   "width": 70,
   "x": 30,
   "y": 30,
@@ -62,6 +63,7 @@ exports[`multi point mode in linear elements > line 1`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 110,
@@ -100,8 +102,8 @@ exports[`multi point mode in linear elements > line 1`] = `
   "strokeWidth": 2,
   "type": "line",
   "updated": 1,
-  "version": 7,
-  "versionNonce": 1505387817,
+  "version": 8,
+  "versionNonce": 23633383,
   "width": 70,
   "x": 30,
   "y": 30,

src/tests/__snapshots__/selection.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`select single element on the scene > arrow 1`] = `
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -39,8 +40,8 @@ exports[`select single element on the scene > arrow 1`] = `
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
+  "version": 4,
+  "versionNonce": 2019559783,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -55,6 +56,7 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -86,8 +88,8 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "strokeWidth": 2,
   "type": "line",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
+  "version": 4,
+  "versionNonce": 2019559783,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -100,6 +102,7 @@ exports[`select single element on the scene > diamond 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -118,8 +121,8 @@ exports[`select single element on the scene > diamond 1`] = `
   "strokeWidth": 2,
   "type": "diamond",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -132,6 +135,7 @@ exports[`select single element on the scene > ellipse 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -150,8 +154,8 @@ exports[`select single element on the scene > ellipse 1`] = `
   "strokeWidth": 2,
   "type": "ellipse",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -164,6 +168,7 @@ exports[`select single element on the scene > rectangle 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": "a0",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -182,8 +187,8 @@ exports[`select single element on the scene > rectangle 1`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
+  "version": 3,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 10,
   "y": 10,

src/tests/contextmenu.test.tsx

@@ -423,8 +423,26 @@ describe("contextMenu element", () => {
     const contextMenu = UI.queryContextMenu();
     fireEvent.click(queryByText(contextMenu!, "Duplicate")!);
     expect(h.elements).toHaveLength(2);
-    const { id: _id0, seed: _seed0, x: _x0, y: _y0, ...rect1 } = h.elements[0];
-    const { id: _id1, seed: _seed1, x: _x1, y: _y1, ...rect2 } = h.elements[1];
+    const {
+      id: _id0,
+      seed: _seed0,
+      x: _x0,
+      y: _y0,
+      fractionalIndex: _fractionalIndex0,
+      version: _version0,
+      versionNonce: _versionNonce0,
+      ...rect1
+    } = h.elements[0];
+    const {
+      id: _id1,
+      seed: _seed1,
+      x: _x1,
+      y: _y1,
+      fractionalIndex: _fractionalIndex1,
+      version: _version1,
+      versionNonce: _versionNonce1,
+      ...rect2
+    } = h.elements[1];
     expect(rect1).toEqual(rect2);
   });
 

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -8,6 +8,7 @@ exports[`restoreElements > should restore arrow element correctly 1`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -53,6 +54,7 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "backgroundColor": "blue",
   "boundElements": [],
   "fillStyle": "cross-hatch",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [
     "1",
@@ -89,6 +91,7 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "backgroundColor": "blue",
   "boundElements": [],
   "fillStyle": "cross-hatch",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [
     "1",
@@ -125,6 +128,7 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "backgroundColor": "blue",
   "boundElements": [],
   "fillStyle": "cross-hatch",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [
     "1",
@@ -161,6 +165,7 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "backgroundColor": "transparent",
   "boundElements": [],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -199,6 +204,7 @@ exports[`restoreElements > should restore line and draw elements correctly 1`] =
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -246,6 +252,7 @@ exports[`restoreElements > should restore line and draw elements correctly 2`] =
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -295,6 +302,7 @@ exports[`restoreElements > should restore text element correctly passing value f
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 14,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -336,6 +344,7 @@ exports[`restoreElements > should restore text element correctly with unknown fo
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 10,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,

src/tests/fixtures/elementFixture.ts

@@ -17,7 +17,7 @@ const elementBase: Omit<ExcalidrawElement, "type"> = {
   groupIds: [],
   frameId: null,
   roundness: null,
-  fractionalIndex: "",
+  fractionalIndex: null,
   seed: 1041657908,
   version: 120,
   versionNonce: 1188004276,

src/tests/helpers/api.ts

@@ -100,7 +100,7 @@ export class API {
     id?: string;
     isDeleted?: boolean;
     frameId?: ExcalidrawElement["id"] | null;
-    fractionalIndex: ExcalidrawElement["fractionalIndex"];
+    fractionalIndex?: ExcalidrawElement["fractionalIndex"];
     groupIds?: string[];
     // generic element props
     strokeColor?: ExcalidrawGenericElement["strokeColor"];
@@ -168,7 +168,7 @@ export class API {
       x,
       y,
       frameId: rest.frameId ?? null,
-      fractionalIndex: rest.fractionalIndex ?? null,
+      fractionalIndex: rest.fractionalIndex || null,
       angle: rest.angle ?? 0,
       strokeColor: rest.strokeColor ?? appState.currentItemStrokeColor,
       backgroundColor:

src/tests/scene/__snapshots__/export.test.ts.snap

@@ -107,7 +107,7 @@ exports[`exportToSvg > with elements that have a link 1`] = `
 exports[`exportToSvg > with exportEmbedScene 1`] = `
 "
   <!-- svg-source:excalidraw -->
-  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SPW/CMFx1MDAxMN35XHUwMDE1UbpcIuFAIJSNlqpCqtqBXHUwMDAxqVVcdTAwMDdcdTAwMTNfiFx1MDAxNcdcdTAwMGW2w4dcdTAwMTD/vbaBuETMnerBkt+9d3e+e8dOXHUwMDEwhPpQQThcdELYp5hRXCLxLuxafFx1MDAwYlJRwU2o795K1DJ1zFxc62rS6zFhXHUwMDA0uVB6MkBcYp1FwKBcdTAwMDSulaF9mXdcdTAwMTBcdTAwMWPdbVwilFjpdik3XHUwMDFm06ygnPQ3aZm8zaavn07qSHvDiaO4eVx1MDAxZmz1QdK8d5To3GBcdTAwMTFCXHKWXHUwMDAzXee6XHUwMDA1Yr5mtlePKC1FXHUwMDAxz4JcdGlcdTAwMWJ5QO740iucXHUwMDE2aylqTjwnXHUwMDFhYrzKPCejjC30gZ2ngNO8llx1MDAxMLYqLK8ttvBGp4SZsleZkuucg1I3XHUwMDFhUeGU6kPrV7a/ak7cdL99V1x1MDAxMpcwt+PlNWO/XHUwMDEzc3JJfFx1MDAxM1BcdTAwMDDEJY6j0TB5ROMm4ldcdTAwMWX1UVx1MDAxYn1cdTAwMTfcrT+KxmOE4n4yalx1MDAxOFTNzOK1S5thpsBP1Tbx4k1x00hdXHUwMDExfFx1MDAxNvmPM8qLNs9cdTAwMTituJP7alxcQnEpOFx0XHUwMDFkfur+2+7fdn9hO2CMVlxuLrYzt1x1MDAxYk2Iq2qhTX5DOZsw3FLYPd1Zc+aO1TvT2jWDbfZ46px+XHUwMDAwcU5t0CJ9<!-- payload-end -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1Sy27CMFx1MDAxMLzzXHUwMDE1UXpFwoFAKDdaqlxuqWpcdTAwMGZcdTAwMWOQWvVg4lxyseLYwXZ4XGLx77VccsQl4lx1MDAwM3qoXHUwMDBmljw7szvZzLFcdTAwMTNcdTAwMDShPlRcdTAwMTBOglx1MDAxMPYpZpRIvFx1MDAwYrtcdTAwMTbfglRUcFPqu7dcdTAwMTK1TFx1MDAxZDPXupr0ekxcdTAwMThBLpSeXGZcdTAwMTBCZ1x1MDAxMTAogWtlaF/mXHUwMDFkXHUwMDA0R3ebXG4lVrpdys3HNCsoJ/1NWiZvs+nrp5M60t5w4ihu3lx1MDAwNzt9kDTvXHUwMDFkJTo3WIRQg+VA17lugZivmfXqXHUwMDExpaUo4FkwIa2RXHUwMDA35I5cdTAwMWa9wmmxlqLmxHOiIcarzHMyythCXHUwMDFm2HlcdTAwMGI4zWtcdGFrwvJqsYU3OiXMlr3KjFxc51x1MDAxY5S60YhcbqdUXHUwMDFmWl9l/VVz4rb77V1JXFzC3K6X14z9bszJpfFNwfBTbf4sZnNOYN8uK1x1MDAwMOLmxtFomDyicVPxiYj6qI2+XHUwMDBi7tJcdTAwMTFF4zFCcT9cdTAwMTk1XGaqZiZcdTAwMTfatc0wU+CXbj2++MzcXHUwMDE4qSuCz1wiv1x1MDAxN0Z50eaZXHUwMDFjXHUwMDE2d3pfc00oLlx1MDAwNSehw0/d/1T+p/JcdTAwMGakXHUwMDEyXHUwMDE4o5WCSyrN7TZcdTAwMTfiqlpo099Qzlx1MDAxOVxyt1x1MDAxNHZPd1KQuWP1LtM2XHUwMDA1YM1cdTAwMWVPndNcdTAwMGaLVICkIn0=<!-- payload-end -->
   <defs>
     <style class=\\"style-fonts\\">
       @font-face {

src/tests/zindex.test.tsx

@@ -46,6 +46,7 @@ const populateElements = (
     height?: number;
     containerId?: string;
     frameId?: ExcalidrawFrameElement["id"];
+    fractionalIndex?: ExcalidrawElement["fractionalIndex"];
   }[],
   appState?: Partial<AppState>,
 ) => {

src/zindex.ts

@@ -379,9 +379,7 @@ const shiftElementsToEnd = (
     }
   }
 
-  const targetElements = Object.values(targetElementsMap).map((element) => {
-    return bumpVersion(element);
-  });
+  const targetElements = Array.from(targetElementsMap.values());
 
   const leadingElements = elements.slice(0, leadingIndex);
   const trailingElements = elements.slice(trailingIndex + 1);