refactor: move elementLocked to activeTool.locked (#4983)

* refactor: move elementLocked to activeTool.locked

* fix

* fix snap

* update docs

* Update src/packages/excalidraw/CHANGELOG.md

* revert

* make lastActiveToolBeforeEraser required and nullable

* fix snap

src/components/Actions.tsx

@@ -220,7 +220,7 @@ export const ShapesSwitcher = ({
         });
       }
       setAppState({
-        activeTool: { type: activeToolType },
+        activeTool: { ...activeTool, type: activeToolType },
         multiElement: null,
         selectedElementIds: {},
       });

src/components/App.tsx

@@ -807,12 +807,11 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     const scene = restore(initialData, null, null);
-
     scene.appState = {
       ...scene.appState,
       activeTool:
         scene.appState.activeTool.type === "image"
-          ? { type: "selection" }
+          ? { ...scene.appState.activeTool, type: "selection" }
           : scene.appState.activeTool,
       isLoading: false,
     };
@@ -1067,7 +1066,9 @@ class App extends React.Component<AppProps, AppState> {
       Object.keys(this.state.selectedElementIds).length &&
       isEraserActive(this.state)
     ) {
-      this.setState({ activeTool: { type: "selection" } });
+      this.setState({
+        activeTool: { ...this.state.activeTool, type: "selection" },
+      });
     }
     if (prevState.theme !== this.state.theme) {
       setEraserCursor(this.canvas, this.state.theme);
@@ -1431,7 +1432,7 @@ class App extends React.Component<AppProps, AppState> {
       } else if (data.text) {
         this.addTextFromPaste(data.text);
       }
-      this.setActiveTool({ type: "selection" });
+      this.setActiveTool({ ...this.state.activeTool, type: "selection" });
       event?.preventDefault();
     },
   );
@@ -1519,7 +1520,7 @@ class App extends React.Component<AppProps, AppState> {
         }
       },
     );
-    this.setActiveTool({ type: "selection" });
+    this.setActiveTool({ ...this.state.activeTool, type: "selection" });
   };
 
   private addTextFromPaste(text: any) {
@@ -1569,7 +1570,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   toggleLock = (source: "keyboard" | "ui" = "ui") => {
-    if (!this.state.elementLocked) {
+    if (!this.state.activeTool.locked) {
       trackEvent(
         "toolbar",
         "toggleLock",
@@ -1578,10 +1579,13 @@ class App extends React.Component<AppProps, AppState> {
     }
     this.setState((prevState) => {
       return {
-        elementLocked: !prevState.elementLocked,
-        activeTool: prevState.elementLocked
-          ? { type: "selection" }
-          : prevState.activeTool,
+        activeTool: {
+          ...prevState.activeTool,
+          locked: !prevState.activeTool.locked,
+          type: prevState.activeTool.locked
+            ? "selection"
+            : prevState.activeTool.type,
+        },
       };
     });
   };
@@ -1860,7 +1864,7 @@ class App extends React.Component<AppProps, AppState> {
               `keyboard (${this.deviceType.isMobile ? "mobile" : "desktop"})`,
             );
           }
-          this.setActiveTool({ type: shape });
+          this.setActiveTool({ ...this.state.activeTool, type: shape });
         } else if (event.key === KEYS.Q) {
           this.toggleLock("keyboard");
         }
@@ -2073,7 +2077,7 @@ class App extends React.Component<AppProps, AppState> {
           draggingElement: null,
           editingElement: null,
         });
-        if (this.state.elementLocked) {
+        if (this.state.activeTool.locked) {
           setCursorForShape(this.canvas, this.state);
         }
 
@@ -3556,7 +3560,7 @@ class App extends React.Component<AppProps, AppState> {
   ): void => {
     // if we're currently still editing text, clicking outside
     // should only finalize it, not create another (irrespective
-    // of state.elementLocked)
+    // of state.activeTool.locked)
     if (isTextElement(this.state.editingElement)) {
       return;
     }
@@ -3580,9 +3584,9 @@ class App extends React.Component<AppProps, AppState> {
     });
 
     resetCursor(this.canvas);
-    if (!this.state.elementLocked) {
+    if (!this.state.activeTool.locked) {
       this.setState({
-        activeTool: { type: "selection" },
+        activeTool: { ...this.state.activeTool, type: "selection" },
       });
     }
   };
@@ -4227,7 +4231,6 @@ class App extends React.Component<AppProps, AppState> {
         resizingElement,
         multiElement,
         activeTool,
-        elementLocked,
         isResizing,
         isRotating,
       } = this.state;
@@ -4391,11 +4394,11 @@ class App extends React.Component<AppProps, AppState> {
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
-          if (!elementLocked) {
+          if (!activeTool.locked) {
             resetCursor(this.canvas);
             this.setState((prevState) => ({
               draggingElement: null,
-              activeTool: { type: "selection" },
+              activeTool: { ...prevState.activeTool, type: "selection" },
               selectedElementIds: {
                 ...prevState.selectedElementIds,
                 [this.state.draggingElement!.id]: true,
@@ -4584,7 +4587,11 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (!elementLocked && activeTool.type !== "freedraw" && draggingElement) {
+      if (
+        !activeTool.locked &&
+        activeTool.type !== "freedraw" &&
+        draggingElement
+      ) {
         this.setState((prevState) => ({
           selectedElementIds: {
             ...prevState.selectedElementIds,
@@ -4608,12 +4615,12 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
 
-      if (!elementLocked && activeTool.type !== "freedraw") {
+      if (!activeTool.locked && activeTool.type !== "freedraw") {
         resetCursor(this.canvas);
         this.setState({
           draggingElement: null,
           suggestedBindings: [],
-          activeTool: { type: "selection" },
+          activeTool: { ...activeTool, type: "selection" },
         });
       } else {
         this.setState({
@@ -4919,7 +4926,7 @@ class App extends React.Component<AppProps, AppState> {
         {
           pendingImageElement: null,
           editingElement: null,
-          activeTool: { type: "selection" },
+          activeTool: { ...this.state.activeTool, type: "selection" },
         },
         () => {
           this.actionManager.executeAction(actionFinalize);

src/components/LayerUI.tsx

@@ -327,7 +327,7 @@ const LayerUI = ({
                     />
                     <LockButton
                       zenModeEnabled={zenModeEnabled}
-                      checked={appState.elementLocked}
+                      checked={appState.activeTool.locked}
                       onChange={() => onLockToggle()}
                       title={t("toolBar.lock")}
                     />

src/components/MobileMenu.tsx

@@ -86,7 +86,7 @@ export const MobileMenu = ({
                 </Island>
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <LockButton
-                  checked={appState.elementLocked}
+                  checked={appState.activeTool.locked}
                   onChange={onLockToggle}
                   title={t("toolBar.lock")}
                   isMobile