fix: restore original opacities when alt pressed while erasing (#4954)

src/components/App.tsx

@@ -50,6 +50,7 @@ import {
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD,
+  ELEMENT_READY_TO_ERASE_OPACITY,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
   ENV,
@@ -2783,11 +2784,17 @@ class App extends React.Component<AppProps, AppState> {
       elements.forEach((element) => {
         idsToUpdate.push(element.id);
         if (event.altKey) {
-          if (pointerDownState.elementIdsToErase[element.id]) {
-            pointerDownState.elementIdsToErase[element.id] = false;
+          if (
+            pointerDownState.elementIdsToErase[element.id] &&
+            pointerDownState.elementIdsToErase[element.id].erase
+          ) {
+            pointerDownState.elementIdsToErase[element.id].erase = false;
           }
-        } else {
-          pointerDownState.elementIdsToErase[element.id] = true;
+        } else if (!pointerDownState.elementIdsToErase[element.id]) {
+          pointerDownState.elementIdsToErase[element.id] = {
+            erase: true,
+            opacity: element.opacity,
+          };
         }
       });
     };
@@ -2831,13 +2838,18 @@ class App extends React.Component<AppProps, AppState> {
           : ele.id;
       if (idsToUpdate.includes(id)) {
         if (event.altKey) {
-          if (pointerDownState.elementIdsToErase[id] === false) {
+          if (
+            pointerDownState.elementIdsToErase[id] &&
+            pointerDownState.elementIdsToErase[id].erase === false
+          ) {
             return newElementWith(ele, {
-              opacity: this.state.currentItemOpacity,
+              opacity: pointerDownState.elementIdsToErase[id].opacity,
             });
           }
         } else {
-          return newElementWith(ele, { opacity: 20 });
+          return newElementWith(ele, {
+            opacity: ELEMENT_READY_TO_ERASE_OPACITY,
+          });
         }
       }
       return ele;
@@ -4450,10 +4462,12 @@ class App extends React.Component<AppProps, AppState> {
             scenePointer.x,
             scenePointer.y,
           );
-
           hitElements.forEach(
             (hitElement) =>
-              (pointerDownState.elementIdsToErase[hitElement.id] = true),
+              (pointerDownState.elementIdsToErase[hitElement.id] = {
+                erase: true,
+                opacity: hitElement.opacity,
+              }),
           );
         }
         this.eraseElements(pointerDownState);
@@ -4601,11 +4615,15 @@ class App extends React.Component<AppProps, AppState> {
 
   private eraseElements = (pointerDownState: PointerDownState) => {
     const elements = this.scene.getElements().map((ele) => {
-      if (pointerDownState.elementIdsToErase[ele.id]) {
+      if (
+        pointerDownState.elementIdsToErase[ele.id] &&
+        pointerDownState.elementIdsToErase[ele.id].erase
+      ) {
         return newElementWith(ele, { isDeleted: true });
       } else if (
         isBoundToContainer(ele) &&
-        pointerDownState.elementIdsToErase[ele.containerId]
+        pointerDownState.elementIdsToErase[ele.containerId] &&
+        pointerDownState.elementIdsToErase[ele.containerId].erase
       ) {
         return newElementWith(ele, { isDeleted: true });
       }

src/constants.ts

@@ -188,3 +188,5 @@ export const VERTICAL_ALIGN = {
   MIDDLE: "middle",
   BOTTOM: "bottom",
 };
+
+export const ELEMENT_READY_TO_ERASE_OPACITY = 20;

src/types.ts

@@ -384,7 +384,12 @@ export type PointerDownState = Readonly<{
   boxSelection: {
     hasOccurred: boolean;
   };
-  elementIdsToErase: { [key: ExcalidrawElement["id"]]: boolean };
+  elementIdsToErase: {
+    [key: ExcalidrawElement["id"]]: {
+      opacity: ExcalidrawElement["opacity"];
+      erase: boolean;
+    };
+  };
 }>;
 
 export type ExcalidrawImperativeAPI = {