fix z-index action to account for deleted elems and add tests (#1077)

src/actions/actionZindex.tsx

@@ -5,7 +5,6 @@ import {
   moveAllLeft,
   moveAllRight,
 } from "../zindex";
-import { getSelectedIndices } from "../scene";
 import { KEYS, isDarwin } from "../keys";
 import { t } from "../i18n";
 import { getShortcutKey } from "../utils";
@@ -16,15 +15,69 @@ import {
   sendToBack,
   bringForward,
 } from "../components/icons";
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+
+function getElementIndices(
+  direction: "left" | "right",
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  const selectedIndices: number[] = [];
+  let deletedIndicesCache: number[] = [];
+
+  function cb(element: ExcalidrawElement, index: number) {
+    if (element.isDeleted) {
+      // we want to build an array of deleted elements that are preceeding
+      //  a selected element so that we move them together
+      deletedIndicesCache.push(index);
+    } else {
+      if (appState.selectedElementIds[element.id]) {
+        selectedIndices.push(...deletedIndicesCache, index);
+      }
+      // always empty cache of deleted elements after either pushing a group
+      //  of selected/deleted elements, of after encountering non-deleted elem
+      deletedIndicesCache = [];
+    }
+  }
+
+  // sending back → select contiguous deleted elements that are to the left of
+  //  selected element(s)
+  if (direction === "left") {
+    let i = -1;
+    const len = elements.length;
+    while (++i < len) {
+      cb(elements[i], i);
+    }
+    // moving to front → loop from right to left so that we don't need to
+    //  backtrack when gathering deleted elements
+  } else {
+    let i = elements.length;
+    while (--i > -1) {
+      cb(elements[i], i);
+    }
+  }
+  // sort in case we were gathering indexes from right to left
+  return selectedIndices.sort();
+}
+
+function moveElements(
+  func: typeof moveOneLeft,
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  const _elements = elements.slice();
+  const direction =
+    func === moveOneLeft || func === moveAllLeft ? "left" : "right";
+  const indices = getElementIndices(direction, _elements, appState);
+  return func(_elements, indices);
+}
 
 export const actionSendBackward = register({
   name: "sendBackward",
   perform: (elements, appState) => {
     return {
-      elements: moveOneLeft(
-        [...elements],
-        getSelectedIndices(elements, appState),
-      ),
+      elements: moveElements(moveOneLeft, elements, appState),
       appState,
       commitToHistory: true,
     };
@@ -49,10 +102,7 @@ export const actionBringForward = register({
   name: "bringForward",
   perform: (elements, appState) => {
     return {
-      elements: moveOneRight(
-        [...elements],
-        getSelectedIndices(elements, appState),
-      ),
+      elements: moveElements(moveOneRight, elements, appState),
       appState,
       commitToHistory: true,
     };
@@ -77,10 +127,7 @@ export const actionSendToBack = register({
   name: "sendToBack",
   perform: (elements, appState) => {
     return {
-      elements: moveAllLeft(
-        [...elements],
-        getSelectedIndices(elements, appState),
-      ),
+      elements: moveElements(moveAllLeft, elements, appState),
       appState,
       commitToHistory: true,
     };
@@ -113,10 +160,7 @@ export const actionBringToFront = register({
   name: "bringToFront",
   perform: (elements, appState) => {
     return {
-      elements: moveAllRight(
-        [...elements],
-        getSelectedIndices(elements, appState),
-      ),
+      elements: moveElements(moveAllRight, elements, appState),
       appState,
       commitToHistory: true,
     };