Merge branch 'master' into fix-frame

# Conflicts:
#	packages/excalidraw/scene/selection.ts

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

@@ -23,7 +23,7 @@ All `props` are _optional_.
 | [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` | `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
-| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) |
+| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |

excalidraw-app/collab/Collab.tsx

@@ -442,7 +442,6 @@ class Collab extends PureComponent<Props, CollabState> {
     );
 
     const fallbackInitializationHandler = () => {
-      console.log("fallbackInitializationHandler");
       this.initializeRoom({
         roomLinkData: existingRoomLinkData,
         fetchScene: true,
@@ -517,9 +516,7 @@ class Collab extends PureComponent<Props, CollabState> {
           case WS_SUBTYPES.INVALID_RESPONSE:
             return;
           case WS_SUBTYPES.INIT: {
-            console.log("INIT (1)");
             if (!this.portal.socketInitialized) {
-              console.log("INIT (2)");
               this.initializeRoom({ fetchScene: false });
               const remoteElements = decryptedData.payload.elements;
               const reconciledElements = this.reconcileElements(remoteElements);
@@ -609,7 +606,6 @@ class Collab extends PureComponent<Props, CollabState> {
     );
 
     this.portal.socket.on("first-in-room", async () => {
-      console.log("first-in-room");
       if (this.portal.socket) {
         this.portal.socket.off("first-in-room");
       }

excalidraw-app/collab/Portal.tsx

@@ -38,17 +38,9 @@ class Portal {
     this.roomId = id;
     this.roomKey = key;
 
-    this.socket.on("connect", () => {
-      console.log("connect");
-    });
-
-    console.log("subbing to init-room");
-
     // Initialize socket listeners
     this.socket.on("init-room", () => {
-      console.log("init-room (1)");
       if (this.socket) {
-        console.log("init-room (2)");
         this.socket.emit("join-room", this.roomId);
         trackEvent("share", "room joined");
       }
@@ -61,7 +53,6 @@ class Portal {
       );
     });
     this.socket.on("room-user-change", (clients: SocketId[]) => {
-      console.log("room-user-change", clients);
       this.collab.setCollaborators(clients);
     });
 

packages/excalidraw/actions/actionAlign.tsx

@@ -11,7 +11,6 @@ import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
@@ -45,10 +44,8 @@ const alignSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
-    app,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 

packages/excalidraw/actions/actionDistribute.tsx

@@ -7,7 +7,6 @@ import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
@@ -36,10 +35,8 @@ const distributeSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
-    app,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -104,8 +104,8 @@ const duplicateElements = (
 
   const idsOfElementsToDuplicate = arrayToMap(
     getSelectedElements(sortedElements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
+      includeBoundTextElement: false,
+      includeElementsInFrames: false,
     }),
   );
 

packages/excalidraw/actions/actionFlip.ts

@@ -19,11 +19,7 @@ export const actionFlipHorizontal = register({
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
-      elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "horizontal"),
-        appState,
-        app,
-      ),
+      elements: flipSelectedElements(elements, appState, "horizontal"),
       appState,
       commitToHistory: true,
     };

packages/excalidraw/components/App.tsx

@@ -267,6 +267,7 @@ import {
   isTransparent,
   easeToValuesRAF,
   muteFSAbortError,
+  arrayToMap,
   isTestEnv,
   easeOut,
   updateStable,
@@ -2177,6 +2178,13 @@ class App extends React.Component<AppProps, AppState> {
           },
         );
       }
+
+      // update frame membership if needed
+      updateFrameMembershipOfSelectedElements(
+        this.scene.getElementsIncludingDeleted(),
+        this.state,
+        this,
+      );
     },
   );
 
@@ -4340,11 +4348,13 @@ class App extends React.Component<AppProps, AppState> {
                   !(isTextElement(element) && element.containerId)),
             );
 
+    const elementsMap = arrayToMap(elements);
+
     return getElementsAtPosition(elements, (element) =>
       hitTest(element, this.state, this.frameNameBoundsCache, x, y),
     ).filter((element) => {
       // hitting a frame's element from outside the frame is not considered a hit
-      const containingFrame = getContainingFrame(element);
+      const containingFrame = getContainingFrame(element, elementsMap);
       return containingFrame &&
         this.state.frameRendering.enabled &&
         this.state.frameRendering.clip
@@ -7679,7 +7689,10 @@ class App extends React.Component<AppProps, AppState> {
             );
 
             if (linearElement?.frameId) {
-              const frame = getContainingFrame(linearElement);
+              const frame = getContainingFrame(
+                linearElement,
+                arrayToMap(this.scene.getElementsIncludingDeleted()),
+              );
 
               if (frame && linearElement) {
                 if (!elementOverlapsWithFrame(linearElement, frame)) {

packages/excalidraw/scene/selection.ts

@@ -11,6 +11,7 @@ import {
   getFrameChildren,
 } from "../frame";
 import { isShallowEqual } from "../utils";
+import { arrayToMap } from "../utils";
 import { isElementInViewport } from "../element/sizeHelpers";
 
 /**
@@ -48,11 +49,13 @@ export const getElementsWithinSelection = (
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(selection);
 
+  const elementsMap = arrayToMap(elements);
+
   let elementsInSelection = elements.filter((element) => {
     let [elementX1, elementY1, elementX2, elementY2] =
       getElementBounds(element);
 
-    const containingFrame = getContainingFrame(element);
+    const containingFrame = getContainingFrame(element, elementsMap);
     if (containingFrame) {
       const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
 
@@ -78,7 +81,7 @@ export const getElementsWithinSelection = (
     : elementsInSelection;
 
   elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element);
+    const containingFrame = getContainingFrame(element, elementsMap);
 
     if (containingFrame) {
       return elementOverlapsWithFrame(element, containingFrame);