Add a Shortcut for Toggling Shape Lock (#1005)

* Update shortcuts.md for Lock

* Add 'Q' as a shortcut for toggling shape lock

* Add shortcut to LockIcon title

* use event.key instead

Co-authored-by: Faustino Kialungila <Faustino.kialungila@gmail.com>

docs/shortcuts.md

@@ -18,7 +18,7 @@
 | Arrow     | `A` or `5` | `A` or `5` |
 | Line      | `L` or `6` | `L` or `6` |
 | Text      | `T` or `7` | `T` or `7` |
-| Lock      |            |            |
+| Lock      |    `Q`     |    `Q`     |
 
 ### Editor
 

src/components/App.tsx

@@ -640,13 +640,16 @@ export class App extends React.Component<any, AppState> {
       );
       event.preventDefault();
     } else if (
-      shapesShortcutKeys.includes(event.key.toLowerCase()) &&
       !event.ctrlKey &&
       !event.altKey &&
       !event.metaKey &&
       this.state.draggingElement === null
     ) {
+      if (shapesShortcutKeys.includes(event.key.toLowerCase())) {
         this.selectShapeTool(shape);
+      } else if (event.key === "q") {
+        this.toggleLock();
+      }
     } else if (event.key === KEYS.SPACE && gesture.pointers.size === 0) {
       isHoldingSpace = true;
       document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
@@ -791,6 +794,15 @@ export class App extends React.Component<any, AppState> {
     this.destroySocketClient();
   };
 
+  toggleLock = () => {
+    this.setState(prevState => ({
+      elementLocked: !prevState.elementLocked,
+      elementType: prevState.elementLocked
+        ? "selection"
+        : prevState.elementType,
+    }));
+  };
+
   private setElements = (elements: readonly ExcalidrawElement[]) => {
     globalSceneState.replaceAllElements(elements);
   };
@@ -816,6 +828,7 @@ export class App extends React.Component<any, AppState> {
           language={getLanguage()}
           onRoomCreate={this.createRoom}
           onRoomDestroy={this.destroyRoom}
+          onToggleLock={this.toggleLock}
         />
         <main>
           <canvas

src/components/LayerUI.tsx

@@ -33,6 +33,7 @@ interface LayerUIProps {
   setElements: (elements: readonly ExcalidrawElement[]) => void;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
+  onToggleLock: () => void;
 }
 
 export const LayerUI = React.memo(
@@ -46,6 +47,7 @@ export const LayerUI = React.memo(
     setElements,
     onRoomCreate,
     onRoomDestroy,
+    onToggleLock,
   }: LayerUIProps) => {
     const isMobile = useIsMobile();
 
@@ -157,14 +159,7 @@ export const LayerUI = React.memo(
                     </Island>
                     <LockIcon
                       checked={appState.elementLocked}
-                      onChange={() => {
-                        setAppState({
-                          elementLocked: !appState.elementLocked,
-                          elementType: appState.elementLocked
-                            ? "selection"
-                            : appState.elementType,
-                        });
-                      }}
+                      onChange={onToggleLock}
                       title={t("toolBar.lock")}
                       isButton={isMobile}
                     />

src/components/LockIcon.tsx

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
 
 import React from "react";
+import { getShortcutKey } from "../utils";
 
 type LockIconSize = "s" | "m";
 
@@ -48,7 +49,7 @@ export function LockIcon(props: LockIconProps) {
       className={`ToolIcon ToolIcon__lock ${
         props.isButton ? "ToolIcon_type_button" : "ToolIcon_type_floating"
       } ${sizeCn}`}
-      title={props.title}
+      title={`${props.title} ${getShortcutKey("Q")}`}
     >
       <input
         className="ToolIcon_type_checkbox"