fix: z-index change by one causes app to freeze (#8314)

packages/excalidraw/tests/zindex.test.tsx

@@ -246,6 +246,20 @@ describe("z-index manipulation", () => {
       ],
     });
 
+    // elements should not duplicate
+    assertZindex({
+      elements: [
+        { id: "A", containerId: "C" },
+        { id: "B" },
+        { id: "C", isSelected: true },
+      ],
+      operations: [
+        [actionSendBackward, ["A", "C", "B"]],
+        // noop
+        [actionSendBackward, ["A", "C", "B"]],
+      ],
+    });
+
     // grouped elements should be atomic
     // -------------------------------------------------------------------------
 

packages/excalidraw/zindex.ts

@@ -80,29 +80,37 @@ const getTargetIndexAccountingForBinding = (
   direction: "left" | "right",
 ) => {
   if ("containerId" in nextElement && nextElement.containerId) {
-    if (direction === "left") {
-      const containerElement = Scene.getScene(nextElement)!.getElement(
-        nextElement.containerId,
-      );
-      if (containerElement) {
-        return elements.indexOf(containerElement);
-      }
-    } else {
-      return elements.indexOf(nextElement);
+    const containerElement = Scene.getScene(nextElement)!.getElement(
+      nextElement.containerId,
+    );
+    if (containerElement) {
+      return direction === "left"
+        ? Math.min(
+            elements.indexOf(containerElement),
+            elements.indexOf(nextElement),
+          )
+        : Math.max(
+            elements.indexOf(containerElement),
+            elements.indexOf(nextElement),
+          );
     }
   } else {
     const boundElementId = nextElement.boundElements?.find(
       (binding) => binding.type !== "arrow",
     )?.id;
     if (boundElementId) {
-      if (direction === "left") {
-        return elements.indexOf(nextElement);
-      }
-
       const boundTextElement =
         Scene.getScene(nextElement)!.getElement(boundElementId);
       if (boundTextElement) {
-        return elements.indexOf(boundTextElement);
+        return direction === "left"
+          ? Math.min(
+              elements.indexOf(boundTextElement),
+              elements.indexOf(nextElement),
+            )
+          : Math.max(
+              elements.indexOf(boundTextElement),
+              elements.indexOf(nextElement),
+            );
       }
     }
   }