bump versions on z-index change

dwelle · Mar 20, 2021 · a9c73eb · a9c73eb
1 parent ff78940
commit a9c73eb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts
@@ -114,3 +114,14 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     versionNonce: randomInteger(),
   };
 };
+
+/**
+ * Mutates element and updates `version` & `versionNonce`.
+ *
+ * NOTE: does not trigger re-render.
+ */
+export const bumpVersion = (element: Mutable<ExcalidrawElement>) => {
+  element.version = element.version + 1;
+  element.versionNonce = randomInteger();
+  return element;
+};
diff --git a/src/zindex.ts b/src/zindex.ts
@@ -1,3 +1,4 @@
+import { bumpVersion } from "./element/mutateElement";
 import { ExcalidrawElement } from "./element/types";
 import { getElementsInGroup } from "./groups";
 import { AppState } from "./types";
@@ -51,7 +52,7 @@ const toContiguousGroups = (array: number[]) => {
  */
 const getTargetIndex = (
   appState: AppState,
-  elements: ExcalidrawElement[],
+  elements: readonly ExcalidrawElement[],
   boundaryIndex: number,
   direction: "left" | "right",
 ) => {
@@ -117,12 +118,24 @@ const getTargetIndex = (
   return candidateIndex;
 };
 
+const getTargetElementsMap = (
+  elements: readonly ExcalidrawElement[],
+  indices: number[],
+) => {
+  return indices.reduce((acc, index) => {
+    const element = elements[index];
+    acc[element.id] = element;
+    return acc;
+  }, {} as Record<string, ExcalidrawElement>);
+};
+
 const shiftElements = (
   appState: AppState,
-  elements: ExcalidrawElement[],
+  elements: readonly ExcalidrawElement[],
   direction: "left" | "right",
 ) => {
   const indicesToMove = getIndicesToMove(elements, appState);
+  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
 
   if (direction === "right") {
@@ -175,7 +188,12 @@ const shiftElements = (
           ];
   });
 
-  return elements;
+  return elements.map((element) => {
+    if (targetElementsMap[element.id]) {
+      return bumpVersion(element);
+    }
+    return element;
+  });
 };
 
 const shiftElementsToEnd = (
@@ -184,7 +202,7 @@ const shiftElementsToEnd = (
   direction: "left" | "right",
 ) => {
   const indicesToMove = getIndicesToMove(elements, appState);
-  const targetElements: ExcalidrawElement[] = [];
+  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   const displacedElements: ExcalidrawElement[] = [];
 
   let leadingIndex: number;
@@ -222,13 +240,15 @@ const shiftElementsToEnd = (
   }
 
   for (let index = leadingIndex; index < trailingIndex + 1; index++) {
-    if (indicesToMove.includes(index)) {
-      targetElements.push(elements[index]);
-    } else {
+    if (!indicesToMove.includes(index)) {
       displacedElements.push(elements[index]);
     }
   }
 
+  const targetElements = Object.values(targetElementsMap).map((element) => {
+    return bumpVersion(element);
+  });
+
   const leadingElements = elements.slice(0, leadingIndex);
   const trailingElements = elements.slice(trailingIndex + 1);
 
@@ -254,14 +274,14 @@ export const moveOneLeft = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
-  return shiftElements(appState, elements.slice(), "left");
+  return shiftElements(appState, elements, "left");
 };
 
 export const moveOneRight = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
-  return shiftElements(appState, elements.slice(), "right");
+  return shiftElements(appState, elements, "right");
 };
 
 export const moveAllLeft = (