feat: add "unlock all elements" to canvas contextMenu (#5894)

src/actions/actionElementLock.test.tsx

@@ -0,0 +1,68 @@
+import { Excalidraw } from "../packages/excalidraw/index";
+import { queryByTestId, fireEvent } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
+
+const { h } = window;
+const mouse = new Pointer("mouse");
+
+describe("element locking", () => {
+  it("should not show unlockAllElements action in contextMenu if no elements locked", async () => {
+    await render(<Excalidraw />);
+
+    mouse.rightClickAt(0, 0);
+
+    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
+    expect(item).toBe(null);
+  });
+
+  it("should unlock all elements and select them when using unlockAllElements action in contextMenu", async () => {
+    await render(
+      <Excalidraw
+        initialData={{
+          elements: [
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: true,
+            }),
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: true,
+            }),
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: false,
+            }),
+          ],
+        }}
+      />,
+    );
+
+    mouse.rightClickAt(0, 0);
+
+    expect(Object.keys(h.state.selectedElementIds).length).toBe(0);
+    expect(h.elements.map((el) => el.locked)).toEqual([true, true, false]);
+
+    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
+    expect(item).not.toBe(null);
+
+    fireEvent.click(item!.querySelector("button")!);
+
+    expect(h.elements.map((el) => el.locked)).toEqual([false, false, false]);
+    // should select the unlocked elements
+    expect(h.state.selectedElementIds).toEqual({
+      [h.elements[0].id]: true,
+      [h.elements[1].id]: true,
+    });
+  });
+});

src/actions/actionElementLock.ts

@@ -5,8 +5,11 @@ import { getSelectedElements } from "../scene";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
 
-export const actionToggleLock = register({
+const shouldLock = (elements: readonly ExcalidrawElement[]) =>
-  name: "toggleLock",
+  elements.every((el) => !el.locked);
+
+export const actionToggleElementLock = register({
+  name: "toggleElementLock",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState, true);
@@ -15,20 +18,21 @@ export const actionToggleLock = register({
       return false;
     }
 
-    const operation = getOperation(selectedElements);
+    const nextLockState = shouldLock(selectedElements);
     const selectedElementsMap = arrayToMap(selectedElements);
-    const lock = operation === "lock";
     return {
       elements: elements.map((element) => {
         if (!selectedElementsMap.has(element.id)) {
           return element;
         }
 
-        return newElementWith(element, { locked: lock });
+        return newElementWith(element, { locked: nextLockState });
       }),
       appState: {
         ...appState,
-        selectedLinearElement: lock ? null : appState.selectedLinearElement,
+        selectedLinearElement: nextLockState
+          ? null
+          : appState.selectedLinearElement,
       },
       commitToHistory: true,
     };
@@ -41,7 +45,7 @@ export const actionToggleLock = register({
         : "labels.elementLock.lock";
     }
 
-    return getOperation(selected) === "lock"
+    return shouldLock(selected)
       ? "labels.elementLock.lockAll"
       : "labels.elementLock.unlockAll";
   },
@@ -55,6 +59,31 @@ export const actionToggleLock = register({
   },
 });
 
-const getOperation = (
+export const actionUnlockAllElements = register({
-  elements: readonly ExcalidrawElement[],
+  name: "unlockAllElements",
-): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");
+  trackEvent: { category: "canvas" },
+  viewMode: false,
+  predicate: (elements) => {
+    return elements.some((element) => element.locked);
+  },
+  perform: (elements, appState) => {
+    const lockedElements = elements.filter((el) => el.locked);
+
+    return {
+      elements: elements.map((element) => {
+        if (element.locked) {
+          return newElementWith(element, { locked: false });
+        }
+        return element;
+      }),
+      appState: {
+        ...appState,
+        selectedElementIds: Object.fromEntries(
+          lockedElements.map((el) => [el.id, true]),
+        ),
+      },
+      commitToHistory: true,
+    };
+  },
+  contextItemLabel: "labels.elementLock.unlockAll",
+});

src/actions/index.ts

@@ -84,5 +84,5 @@ export { actionToggleZenMode } from "./actionToggleZenMode";
 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";
-export { actionToggleLock } from "./actionToggleLock";
+export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";

src/actions/shortcuts.ts

@@ -34,7 +34,7 @@ export type ShortcutName =
       | "flipHorizontal"
       | "flipVertical"
       | "hyperlink"
-      | "toggleLock"
+      | "toggleElementLock"
     >
   | "saveScene"
   | "imageExport";
@@ -80,7 +80,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
-  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
+  toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {

src/actions/types.ts

@@ -111,7 +111,8 @@ export type ActionName =
   | "unbindText"
   | "hyperlink"
   | "bindText"
-  | "toggleLock"
+  | "unlockAllElements"
+  | "toggleElementLock"
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"

src/components/App.tsx

@@ -33,7 +33,7 @@ import {
   actionBindText,
   actionUngroup,
   actionLink,
-  actionToggleLock,
+  actionToggleElementLock,
   actionToggleLinearEditor,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
@@ -290,6 +290,7 @@ import {
   isLocalLink,
 } from "../element/Hyperlink";
 import { shouldShowBoundingBox } from "../element/transformHandles";
+import { actionUnlockAllElements } from "../actions/actionElementLock";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
 import {
@@ -6347,6 +6348,7 @@ class App extends React.Component<AppProps, AppState> {
         copyText,
         CONTEXT_MENU_SEPARATOR,
         actionSelectAll,
+        actionUnlockAllElements,
         CONTEXT_MENU_SEPARATOR,
         actionToggleGridMode,
         actionToggleZenMode,
@@ -6393,7 +6395,7 @@ class App extends React.Component<AppProps, AppState> {
       actionToggleLinearEditor,
       actionLink,
       actionDuplicateSelection,
-      actionToggleLock,
+      actionToggleElementLock,
       CONTEXT_MENU_SEPARATOR,
       actionDeleteSelected,
     ];

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -247,7 +247,7 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
         "trackEvent": Object {
           "category": "element",
@@ -4644,7 +4644,7 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
         "trackEvent": Object {
           "category": "element",
@@ -5194,7 +5194,7 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
         "trackEvent": Object {
           "category": "element",
@@ -5642,6 +5642,16 @@ Object {
           "category": "canvas",
         },
       },
+      Object {
+        "contextItemLabel": "labels.elementLock.unlockAll",
+        "name": "unlockAllElements",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+        "viewMode": false,
+      },
       "separator",
       Object {
         "checked": [Function],
@@ -6043,7 +6053,7 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
         "trackEvent": Object {
           "category": "element",
@@ -6389,7 +6399,7 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
         "trackEvent": Object {
           "category": "element",

src/tests/contextmenu.test.tsx

@@ -125,7 +125,7 @@ describe("contextMenu element", () => {
       "bringToFront",
       "duplicateSelection",
       "hyperlink",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -212,7 +212,7 @@ describe("contextMenu element", () => {
       "sendToBack",
       "bringToFront",
       "duplicateSelection",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -263,7 +263,7 @@ describe("contextMenu element", () => {
       "sendToBack",
       "bringToFront",
       "duplicateSelection",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -287,7 +287,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     expect(copiedStyles).toBe("{}");
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Copy styles")!);
     expect(copiedStyles).not.toBe("{}");
     const element = JSON.parse(copiedStyles)[0];
     expect(element).toEqual(API.getSelectedElement());
@@ -328,7 +328,7 @@ describe("contextMenu element", () => {
       clientY: 40,
     });
     let contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Copy styles")!);
     const secondRect = JSON.parse(copiedStyles)[0];
     expect(secondRect.id).toBe(h.elements[1].id);
 
@@ -340,7 +340,7 @@ describe("contextMenu element", () => {
       clientY: 10,
     });
     contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Paste styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Paste styles")!);
 
     const firstRect = API.getSelectedElement();
     expect(firstRect.id).toBe(h.elements[0].id);
@@ -364,7 +364,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryAllByText(contextMenu as HTMLElement, "Delete")[0]);
+    fireEvent.click(queryAllByText(contextMenu!, "Delete")[0]);
     expect(API.getSelectedElements()).toHaveLength(0);
     expect(h.elements[0].isDeleted).toBe(true);
   });
@@ -380,7 +380,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Add to library")!);
+    fireEvent.click(queryByText(contextMenu!, "Add to library")!);
 
     await waitFor(() => {
       const library = localStorage.getItem("excalidraw-library");
@@ -401,7 +401,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Duplicate")!);
+    fireEvent.click(queryByText(contextMenu!, "Duplicate")!);
     expect(h.elements).toHaveLength(2);
     const { id: _id0, seed: _seed0, x: _x0, y: _y0, ...rect1 } = h.elements[0];
     const { id: _id1, seed: _seed1, x: _x1, y: _y1, ...rect2 } = h.elements[1];
@@ -425,7 +425,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Send backward")!);
+    fireEvent.click(queryByText(contextMenu!, "Send backward")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
@@ -447,7 +447,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Bring forward")!);
+    fireEvent.click(queryByText(contextMenu!, "Bring forward")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
@@ -469,7 +469,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Send to back")!);
+    fireEvent.click(queryByText(contextMenu!, "Send to back")!);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
 
@@ -490,7 +490,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Bring to front")!);
+    fireEvent.click(queryByText(contextMenu!, "Bring to front")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
   });
 
@@ -514,9 +514,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(
+    fireEvent.click(queryByText(contextMenu!, "Group selection")!);
-      queryByText(contextMenu as HTMLElement, "Group selection")!,
-    );
     const selectedGroupIds = Object.keys(h.state.selectedGroupIds);
     expect(h.elements[0].groupIds).toEqual(selectedGroupIds);
     expect(h.elements[1].groupIds).toEqual(selectedGroupIds);
@@ -548,9 +546,7 @@ describe("contextMenu element", () => {
 
     const contextMenu = UI.queryContextMenu();
     expect(contextMenu).not.toBeNull();
-    fireEvent.click(
+    fireEvent.click(queryByText(contextMenu!, "Ungroup selection")!);
-      queryByText(contextMenu as HTMLElement, "Ungroup selection")!,
-    );
 
     const selectedGroupIds = Object.keys(h.state.selectedGroupIds);
     expect(selectedGroupIds).toHaveLength(0);

src/tests/elementLocking.test.tsx

@@ -152,7 +152,7 @@ describe("element locking", () => {
     expect(contextMenu).not.toBeNull();
     expect(
       contextMenu?.querySelector(
-        `li[data-testid="toggleLock"] .context-menu-item__label`,
+        `li[data-testid="toggleElementLock"] .context-menu-item__label`,
       ),
     ).toHaveTextContent(t("labels.elementLock.unlock"));
   });

src/tests/helpers/ui.ts

@@ -321,6 +321,6 @@ export class UI {
   static queryContextMenu = () => {
     return GlobalTestState.renderResult.container.querySelector(
       ".context-menu",
-    );
+    ) as HTMLElement | null;
   };
 }