(un)lock a frame should not affect elements unrelated to the frame

dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx

@@ -23,7 +23,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
 | ready | `boolean` | This is set to true once Excalidraw is rendered |
 | [readyPromise](#readypromise) | `function` | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readypromise) |
 | [updateScene](#updatescene) | `function` | updates the scene with the sceneData |
-| [updateLibrary](#updatelibrary) | `function` | updates the the library |
+| [updateLibrary](#updatelibrary) | `function` | updates the scene with the sceneData |
 | [addFiles](#addfiles) | `function` | add files data to the appState |
 | [resetScene](#resetscene) | `function` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
 | [getSceneElementsIncludingDeleted](#getsceneelementsincludingdeleted) | `function` | Returns all the elements including the deleted in the scene |

src/actions/actionElementLock.ts

@@ -10,17 +10,12 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
   trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    return !selectedElements.some(
-      (element) => element.locked && element.frameId,
-    );
-  },
   perform: (elements, appState, _, app) => {
+    // Frames and their children should not be selected at the same time.
+    // Therefore, there's no need to include elements in frame in the selection.
     const selectedElements = app.scene.getSelectedElements({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true,
-      includeElementsInFrames: true,
     });
 
     if (!selectedElements.length) {
@@ -31,7 +26,12 @@ export const actionToggleElementLock = register({
     const selectedElementsMap = arrayToMap(selectedElements);
     return {
       elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
+        if (
+          !selectedElementsMap.has(element.id) &&
+          (!element.frameId ||
+            // lock frame children if frame is selected
+            (element.frameId && !selectedElementsMap.has(element.frameId)))
+        ) {
           return element;
         }
 

src/components/App.tsx

@@ -1137,7 +1137,10 @@ class App extends React.Component<AppProps, AppState> {
             overflow: f.id === this.state.editingFrame ? "visible" : "hidden",
             whiteSpace: "nowrap",
             textOverflow: "ellipsis",
-            cursor: CURSOR_TYPE.MOVE,
+            cursor:
+              !f.locked && this.state.activeTool.type === "selection"
+                ? CURSOR_TYPE.MOVE
+                : this.interactiveCanvas?.style.cursor,
             pointerEvents: this.state.viewModeEnabled
               ? POINTER_EVENTS.disabled
               : POINTER_EVENTS.enabled,

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

@@ -263,7 +263,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": {
           "category": "element",
         },
@@ -4847,7 +4846,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": {
           "category": "element",
         },
@@ -5427,7 +5425,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": {
           "category": "element",
         },
@@ -6345,7 +6342,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": {
           "category": "element",
         },
@@ -6719,7 +6715,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
         "keyTest": [Function],
         "name": "toggleElementLock",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": {
           "category": "element",
         },