fix uppercase typo

animated trail for lasso selection
feat: box select frame & children to allow resizing at the same time (#9031 )
2025-10-06 15:50:00 +02:00 · 2025-02-05 21:05:27 +11:00 · 2025-02-05 20:59:51 +11:00 · 2025-01-28 22:10:16 +01:00 · 2025-01-28 19:23:35 +01:00 · 2025-01-25 17:05:50 +01:00
33 changed files with 1254 additions and 452 deletions
--- a/packages/excalidraw/actions/actionAlign.tsx
+++ b/packages/excalidraw/actions/actionAlign.tsx
@@ -21,10 +21,8 @@ import type { AppClassProperties, AppState, UIAppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";

-const alignActionsPredicate = (
-  elements: readonly ExcalidrawElement[],
+export const alignActionsPredicate = (
  appState: UIAppState,
-  _: unknown,
  app: AppClassProperties,
 ) => {
  const selectedElements = app.scene.getSelectedElements(appState);
@@ -48,6 +46,7 @@ const alignSelectedElements = (
    selectedElements,
    elementsMap,
    alignment,
+    app.scene,
  );

  const updatedElementsMap = arrayToMap(updatedElements);
@@ -64,7 +63,8 @@ export const actionAlignTop = register({
  label: "labels.alignTop",
  icon: AlignTopIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -79,7 +79,7 @@ export const actionAlignTop = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={AlignTopIcon}
      onClick={() => updateData(null)}
@@ -97,7 +97,8 @@ export const actionAlignBottom = register({
  label: "labels.alignBottom",
  icon: AlignBottomIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -112,7 +113,7 @@ export const actionAlignBottom = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={AlignBottomIcon}
      onClick={() => updateData(null)}
@@ -130,7 +131,8 @@ export const actionAlignLeft = register({
  label: "labels.alignLeft",
  icon: AlignLeftIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -145,7 +147,7 @@ export const actionAlignLeft = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={AlignLeftIcon}
      onClick={() => updateData(null)}
@@ -163,7 +165,8 @@ export const actionAlignRight = register({
  label: "labels.alignRight",
  icon: AlignRightIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -178,7 +181,7 @@ export const actionAlignRight = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={AlignRightIcon}
      onClick={() => updateData(null)}
@@ -196,7 +199,8 @@ export const actionAlignVerticallyCentered = register({
  label: "labels.centerVertically",
  icon: CenterVerticallyIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -209,7 +213,7 @@ export const actionAlignVerticallyCentered = register({
  },
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={CenterVerticallyIcon}
      onClick={() => updateData(null)}
@@ -225,7 +229,8 @@ export const actionAlignHorizontallyCentered = register({
  label: "labels.centerHorizontally",
  icon: CenterHorizontallyIcon,
  trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+  predicate: (elements, appState, appProps, app) =>
+    alignActionsPredicate(appState, app),
  perform: (elements, appState, _, app) => {
    return {
      appState,
@@ -238,7 +243,7 @@ export const actionAlignHorizontallyCentered = register({
  },
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(elements, appState, null, app)}
+      hidden={!alignActionsPredicate(appState, app)}
      type="button"
      icon={CenterHorizontallyIcon}
      onClick={() => updateData(null)}
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@@ -12,6 +12,8 @@ import { frameToolIcon } from "../components/icons";
 import { StoreAction } from "../store";
 import { getSelectedElements } from "../scene";
 import { newFrameElement } from "../element/newElement";
+import { getElementsInGroup } from "../groups";
+import { mutateElement } from "../element/mutateElement";

 const isSingleFrameSelected = (
  appState: UIAppState,
@@ -174,10 +176,31 @@ export const actionWrapSelectionInFrame = register({
      height: y2 - y1 + PADDING * 2,
    });

+    // for a selected partial group, we want to remove it from the remainder of the group
+    if (appState.editingGroupId) {
+      const elementsInGroup = getElementsInGroup(
+        selectedElements,
+        appState.editingGroupId,
+      );
+
+      for (const elementInGroup of elementsInGroup) {
+        const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
+
+        mutateElement(
+          elementInGroup,
+          {
+            groupIds: elementInGroup.groupIds.slice(0, index),
+          },
+          false,
+        );
+      }
+    }
+
    const nextElements = addElementsToFrame(
      [...app.scene.getElementsIncludingDeleted(), frame],
      selectedElements,
      frame,
+      appState,
    );

    return {
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@@ -25,8 +25,10 @@ import type {
 import type { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
+  frameAndChildrenSelectedTogether,
  getElementsInResizingFrame,
  getFrameLikeElements,
+  getRootElements,
  groupByFrameLikes,
  removeElementsFromFrame,
  replaceAllElementsInFrame,
@@ -60,8 +62,11 @@ const enableActionGroup = (
    selectedElementIds: appState.selectedElementIds,
    includeBoundTextElement: true,
  });
+
  return (
-    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
+    selectedElements.length >= 2 &&
+    !allElementsInSameGroup(selectedElements) &&
+    !frameAndChildrenSelectedTogether(selectedElements)
  );
 };

@@ -71,10 +76,12 @@ export const actionGroup = register({
  icon: (appState) => <GroupIcon theme={appState.theme} />,
  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    });
+    const selectedElements = getRootElements(
+      app.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
+        includeBoundTextElement: true,
+      }),
+    );
    if (selectedElements.length < 2) {
      // nothing to group
      return { appState, elements, storeAction: StoreAction.NONE };
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -89,6 +89,7 @@ import type {
  FontFamilyValues,
  TextAlign,
  VerticalAlign,
+  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@@ -115,6 +116,7 @@ import {
  bindPointToSnapToElementOutline,
  calculateFixedPointForElbowArrowBinding,
  getHoveredElementForBinding,
+  updateBoundElements,
 } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
@@ -218,33 +220,47 @@ const changeFontSize = (
 ) => {
  const newFontSizes = new Set<number>();

+  const updatedElements = changeProperty(
+    elements,
+    appState,
+    (oldElement) => {
+      if (isTextElement(oldElement)) {
+        const newFontSize = getNewFontSize(oldElement);
+        newFontSizes.add(newFontSize);
+
+        let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
+          fontSize: newFontSize,
+        });
+        redrawTextBoundingBox(
+          newElement,
+          app.scene.getContainerElement(oldElement),
+          app.scene.getNonDeletedElementsMap(),
+        );
+
+        newElement = offsetElementAfterFontResize(oldElement, newElement);
+
+        return newElement;
+      }
+      return oldElement;
+    },
+    true,
+  );
+
+  // Update arrow elements after text elements have been updated
+  const updatedElementsMap = arrayToMap(updatedElements);
+  getSelectedElements(elements, appState, {
+    includeBoundTextElement: true,
+  }).forEach((element) => {
+    if (isTextElement(element)) {
+      updateBoundElements(
+        element,
+        updatedElementsMap as NonDeletedSceneElementsMap,
+      );
+    }
+  });
+
  return {
-    elements: changeProperty(
-      elements,
-      appState,
-      (oldElement) => {
-        if (isTextElement(oldElement)) {
-          const newFontSize = getNewFontSize(oldElement);
-          newFontSizes.add(newFontSize);
-
-          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-            fontSize: newFontSize,
-          });
-          redrawTextBoundingBox(
-            newElement,
-            app.scene.getContainerElement(oldElement),
-            app.scene.getNonDeletedElementsMap(),
-          );
-
-          newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-          return newElement;
-        }
-
-        return oldElement;
-      },
-      true,
-    ),
+    elements: updatedElements,
    appState: {
      ...appState,
      // update state only if we've set all select text elements to
--- a/packages/excalidraw/actions/actionSelectAll.ts
+++ b/packages/excalidraw/actions/actionSelectAll.ts
@@ -5,7 +5,6 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import type { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
 import { StoreAction } from "../store";

@@ -20,17 +19,17 @@ export const actionSelectAll = register({
      return false;
    }

-    const selectedElementIds = excludeElementsInFramesFromSelection(
-      elements.filter(
+    const selectedElementIds = elements
+      .filter(
        (element) =>
          !element.isDeleted &&
          !(isTextElement(element) && element.containerId) &&
          !element.locked,
-      ),
-    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
-      map[element.id] = true;
-      return map;
-    }, {});
+      )
+      .reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+        map[element.id] = true;
+        return map;
+      }, {});

    return {
      appState: {
--- a/packages/excalidraw/align.ts
+++ b/packages/excalidraw/align.ts
@@ -1,8 +1,10 @@
 import type { ElementsMap, ExcalidrawElement } from "./element/types";
-import { newElementWith } from "./element/mutateElement";
+import { mutateElement } from "./element/mutateElement";
 import type { BoundingBox } from "./element/bounds";
 import { getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
+import { updateBoundElements } from "./element/binding";
+import type Scene from "./scene/Scene";

 export interface Alignment {
  position: "start" | "center" | "end";
@@ -13,6 +15,7 @@ export const alignElements = (
  selectedElements: ExcalidrawElement[],
  elementsMap: ElementsMap,
  alignment: Alignment,
+  scene: Scene,
 ): ExcalidrawElement[] => {
  const groups: ExcalidrawElement[][] = getMaximumGroups(
    selectedElements,
@@ -26,12 +29,18 @@ export const alignElements = (
      selectionBoundingBox,
      alignment,
    );
-    return group.map((element) =>
-      newElementWith(element, {
+    return group.map((element) => {
+      // update element
+      const updatedEle = mutateElement(element, {
        x: element.x + translation.x,
        y: element.y + translation.y,
-      }),
-    );
+      });
+      // update bound elements
+      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
+        simultaneouslyUpdated: group,
+      });
+      return updatedEle;
+    });
  });
 };

--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@@ -20,7 +20,7 @@ export interface AnimatedTrailOptions {
 }

 export class AnimatedTrail implements Trail {
-  private currentTrail?: LaserPointer;
+  currentTrail?: LaserPointer;
  private pastTrails: LaserPointer[] = [];

  private container?: SVGSVGElement;
@@ -28,7 +28,7 @@ export class AnimatedTrail implements Trail {

  constructor(
    private animationFrameHandler: AnimationFrameHandler,
-    private app: App,
+    protected app: App,
    private options: Partial<LaserPointerOptions> &
      Partial<AnimatedTrailOptions>,
  ) {
@@ -98,6 +98,16 @@ export class AnimatedTrail implements Trail {
    }
  }

+  getCurrentTrail() {
+    return this.currentTrail;
+  }
+
+  clearTrails() {
+    this.pastTrails = [];
+    this.currentTrail = undefined;
+    this.update();
+  }
+
  private update() {
    this.start();
  }
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -120,6 +120,7 @@ export const getDefaultAppState = (): Omit<
    isCropping: false,
    croppingElementId: null,
    searchMatches: [],
+    lassoSelectionEnabled: false,
  };
 };

@@ -244,6 +245,7 @@ const APP_STATE_STORAGE_CONF = (<
  isCropping: { browser: false, export: false, server: false },
  croppingElementId: { browser: false, export: false, server: false },
  searchMatches: { browser: false, export: false, server: false },
+  lassoSelectionEnabled: { browser: true, export: false, server: false },
 });

 const _clearAppStateForStorage = <
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -51,6 +51,7 @@ import {
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
 import { CLASSES } from "../constants";
+import { alignActionsPredicate } from "../actions/actionAlign";

 export const canChangeStrokeColor = (
  appState: UIAppState,
@@ -90,10 +91,12 @@ export const SelectedShapeActions = ({
  appState,
  elementsMap,
  renderAction,
+  app,
 }: {
  appState: UIAppState;
  elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
  renderAction: ActionManager["renderAction"];
+  app: AppClassProperties;
 }) => {
  const targetElements = getTargetElements(elementsMap, appState);

@@ -133,6 +136,9 @@ export const SelectedShapeActions = ({
    targetElements.length === 1 &&
    isImageElement(targetElements[0]);

+  const showAlignActions =
+    !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
+
  return (
    <div className="panelColumn">
      <div>
@@ -200,7 +206,7 @@ export const SelectedShapeActions = ({
        </div>
      </fieldset>

-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {showAlignActions && !isSingleElementBoundContainer && (
        <fieldset>
          <legend>{t("labels.align")}</legend>
          <div className="buttonList">
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -465,6 +465,7 @@ import { cropElement } from "../element/cropElement";
 import { wrapText } from "../element/textWrapping";
 import { actionCopyElementLink } from "../actions/actionElementLink";
 import { isElementLink, parseElementLinkFromURL } from "../element/elementLink";
+import { LassoTrail } from "../lasso";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -635,6 +636,8 @@ class App extends React.Component<AppProps, AppState> {
        : "rgba(255, 255, 255, 0.2)",
  });

+  lassoTrail = new LassoTrail(this.animationFrameHandler, this);
+
  onChangeEmitter = new Emitter<
    [
      elements: readonly ExcalidrawElement[],
@@ -1607,7 +1610,11 @@ class App extends React.Component<AppProps, AppState> {
                        <div className="excalidraw-contextMenuContainer" />
                        <div className="excalidraw-eye-dropper-container" />
                        <SVGLayer
-                          trails={[this.laserTrails, this.eraserTrail]}
+                          trails={[
+                            this.laserTrails,
+                            this.eraserTrail,
+                            this.lassoTrail,
+                          ]}
                        />
                        {selectedElements.length === 1 &&
                          this.state.openDialog?.name !==
@@ -3235,7 +3242,12 @@ class App extends React.Component<AppProps, AppState> {
        newElements,
        topLayerFrame,
      );
-      addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
+      addElementsToFrame(
+        nextElements,
+        eligibleElements,
+        topLayerFrame,
+        this.state,
+      );
    }

    this.scene.replaceAllElements(nextElements);
@@ -4326,10 +4338,14 @@ class App extends React.Component<AppProps, AppState> {
        }

        selectedElements.forEach((element) => {
-          mutateElement(element, {
-            x: element.x + offsetX,
-            y: element.y + offsetY,
-          });
+          mutateElement(
+            element,
+            {
+              x: element.x + offsetX,
+              y: element.y + offsetY,
+            },
+            false,
+          );

          updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
            simultaneouslyUpdated: selectedElements,
@@ -4346,6 +4362,8 @@ class App extends React.Component<AppProps, AppState> {
          ),
        });

+        this.scene.triggerUpdate();
+
        event.preventDefault();
      } else if (event.key === KEYS.ENTER) {
        const selectedElements = this.scene.getSelectedElements(this.state);
@@ -4504,6 +4522,14 @@ class App extends React.Component<AppProps, AppState> {
        return;
      }

+      if (event.key === KEYS[1] && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
+        if (this.state.activeTool.type === "selection") {
+          this.setActiveTool({ type: "lassoSelection" });
+        } else {
+          this.setActiveTool({ type: "selection" });
+        }
+      }
+
      if (
        event[KEYS.CTRL_OR_CMD] &&
        (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
@@ -6534,6 +6560,15 @@ class App extends React.Component<AppProps, AppState> {
        this.state.activeTool.type,
        pointerDownState,
      );
+    } else if (this.state.activeTool.type === "lassoSelection") {
+      // Begin a mark capture. This does not have to update state yet.
+      const [gridX, gridY] = getGridPoint(
+        pointerDownState.origin.x,
+        pointerDownState.origin.y,
+        null,
+      );
+
+      this.lassoTrail.startPath(gridX, gridY);
    } else if (this.state.activeTool.type === "custom") {
      setCursorForShape(this.interactiveCanvas, this.state);
    } else if (
@@ -8320,9 +8355,7 @@ class App extends React.Component<AppProps, AppState> {
            this.scene.getNonDeletedElementsMap(),
          );

-          flushSync(() => {
-            this.setState({ snapLines });
-          });
+          this.setState({ snapLines });

          // when we're editing the name of a frame, we want the user to be
          // able to select and interact with the text input
@@ -8452,6 +8485,63 @@ class App extends React.Component<AppProps, AppState> {
        pointerDownState.lastCoords.x = pointerCoords.x;
        pointerDownState.lastCoords.y = pointerCoords.y;
        this.maybeDragNewGenericElement(pointerDownState, event);
+      } else if (this.state.activeTool.type === "lassoSelection") {
+        const { intersectedElementIds, enclosedElementIds } =
+          this.lassoTrail.addPointToPath(pointerCoords.x, pointerCoords.y);
+
+        this.setState((prevState) => {
+          const elements = [...intersectedElementIds, ...enclosedElementIds];
+
+          const nextSelectedElementIds = elements.reduce((acc, id) => {
+            acc[id] = true;
+            return acc;
+          }, {} as Record<ExcalidrawElement["id"], true>);
+
+          const nextSelectedGroupIds = selectGroupsForSelectedElements(
+            {
+              selectedElementIds: nextSelectedElementIds,
+              editingGroupId: prevState.editingGroupId,
+            },
+            this.scene.getNonDeletedElements(),
+            prevState,
+            this,
+          );
+
+          // TODO: not entirely correct (need to select all elements in group instead)
+          for (const [id, selected] of Object.entries(nextSelectedElementIds)) {
+            if (selected) {
+              const element = this.scene.getNonDeletedElement(id);
+              if (element && element.groupIds.length > 0) {
+                delete nextSelectedElementIds[id];
+              }
+            }
+          }
+
+          // TODO: make elegant and decide if all children are selected, do we keep?
+          for (const [id, selected] of Object.entries(nextSelectedElementIds)) {
+            if (selected) {
+              const element = this.scene.getNonDeletedElement(id);
+
+              if (element && isFrameLikeElement(element)) {
+                const elementsInFrame = getFrameChildren(
+                  elementsMap,
+                  element.id,
+                );
+                for (const child of elementsInFrame) {
+                  delete nextSelectedElementIds[child.id];
+                }
+              }
+            }
+          }
+
+          return {
+            selectedElementIds: makeNextSelectedElementIds(
+              nextSelectedElementIds,
+              prevState,
+            ),
+            selectedGroupIds: nextSelectedGroupIds.selectedGroupIds,
+          };
+        });
      } else {
        // It is very important to read this.state within each move event,
        // otherwise we would read a stale one!
@@ -8588,6 +8678,7 @@ class App extends React.Component<AppProps, AppState> {
                elements,
                this.state.selectionElement,
                this.scene.getNonDeletedElementsMap(),
+                false,
              )
            : [];

@@ -8705,6 +8796,8 @@ class App extends React.Component<AppProps, AppState> {
        originSnapOffset: null,
      }));

+      this.lassoTrail.endPath();
+
      this.lastPointerMoveCoords = null;

      SnapCache.setReferenceSnapPoints(null);
@@ -8871,6 +8964,7 @@ class App extends React.Component<AppProps, AppState> {

        return;
      }
+
      if (isImageElement(newElement)) {
        const imageElement = newElement;
        try {
@@ -9016,6 +9110,7 @@ class App extends React.Component<AppProps, AppState> {
            this.scene.getElementsMapIncludingDeleted(),
            elementsInsideFrame,
            newElement,
+            this.state,
          ),
        );
      }
@@ -9133,6 +9228,7 @@ class App extends React.Component<AppProps, AppState> {
              nextElements,
              elementsToAdd,
              topLayerFrame,
+              this.state,
            );
          } else if (!topLayerFrame) {
            if (this.state.editingGroupId) {
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -219,6 +219,7 @@ const LayerUI = ({
          appState={appState}
          elementsMap={app.scene.getNonDeletedElementsMap()}
          renderAction={actionManager.renderAction}
+          app={app}
        />
      </Island>
    </Section>
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -179,6 +179,7 @@ export const MobileMenu = ({
                appState={appState}
                elementsMap={app.scene.getNonDeletedElementsMap()}
                renderAction={actionManager.renderAction}
+                app={app}
              />
            </Section>
          ) : null}
--- a/packages/excalidraw/components/Stats/index.tsx
+++ b/packages/excalidraw/components/Stats/index.tsx
@@ -31,6 +31,7 @@ import "./Stats.scss";
 import { isGridModeEnabled } from "../../snapping";
 import { getUncroppedWidthAndHeight } from "../../element/cropElement";
 import { round } from "../../../math";
+import { frameAndChildrenSelectedTogether } from "../../frame";

 interface StatsProps {
  app: AppClassProperties;
@@ -170,6 +171,10 @@ export const StatsInner = memo(
      return getAtomicUnits(selectedElements, appState);
    }, [selectedElements, appState]);

+    const _frameAndChildrenSelectedTogether = useMemo(() => {
+      return frameAndChildrenSelectedTogether(selectedElements);
+    }, [selectedElements]);
+
    return (
      <div className="exc-stats">
        <Island padding={3}>
@@ -226,7 +231,7 @@ export const StatsInner = memo(
            {renderCustomStats?.(elements, appState)}
          </Collapsible>

-          {selectedElements.length > 0 && (
+          {!_frameAndChildrenSelectedTogether && selectedElements.length > 0 && (
            <div
              id="elementStats"
              style={{
--- a/packages/excalidraw/components/ToolButton.tsx
+++ b/packages/excalidraw/components/ToolButton.tsx
@@ -55,146 +55,152 @@ type ToolButtonProps =
      onPointerDown?(data: { pointerType: PointerType }): void;
    });

-export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
-  const { id: excalId } = useExcalidrawContainer();
-  const innerRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => innerRef.current);
-  const sizeCn = `ToolIcon_size_${props.size}`;
+export const ToolButton = React.forwardRef(
+  (
+    {
+      size = "medium",
+      visible = true,
+      className = "",
+      ...props
+    }: ToolButtonProps,
+    ref,
+  ) => {
+    const { id: excalId } = useExcalidrawContainer();
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const sizeCn = `ToolIcon_size_${size}`;

-  const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);

-  const isMountedRef = useRef(true);
+    const isMountedRef = useRef(true);

-  const onClick = async (event: React.MouseEvent) => {
-    const ret = "onClick" in props && props.onClick?.(event);
+    const onClick = async (event: React.MouseEvent) => {
+      const ret = "onClick" in props && props.onClick?.(event);

-    if (isPromiseLike(ret)) {
-      try {
-        setIsLoading(true);
-        await ret;
-      } catch (error: any) {
-        if (!(error instanceof AbortError)) {
-          throw error;
-        } else {
-          console.warn(error);
-        }
-      } finally {
-        if (isMountedRef.current) {
-          setIsLoading(false);
+      if (isPromiseLike(ret)) {
+        try {
+          setIsLoading(true);
+          await ret;
+        } catch (error: any) {
+          if (!(error instanceof AbortError)) {
+            throw error;
+          } else {
+            console.warn(error);
+          }
+        } finally {
+          if (isMountedRef.current) {
+            setIsLoading(false);
+          }
        }
      }
-    }
-  };
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
    };
-  }, []);

-  const lastPointerTypeRef = useRef<PointerType | null>(null);
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+      };
+    }, []);
+
+    const lastPointerTypeRef = useRef<PointerType | null>(null);
+
+    if (
+      props.type === "button" ||
+      props.type === "icon" ||
+      props.type === "submit"
+    ) {
+      const type = (props.type === "icon" ? "button" : props.type) as
+        | "button"
+        | "submit";
+      return (
+        <button
+          className={clsx(
+            "ToolIcon_type_button",
+            sizeCn,
+            className,
+            visible && !props.hidden
+              ? "ToolIcon_type_button--show"
+              : "ToolIcon_type_button--hide",
+            {
+              ToolIcon: !props.hidden,
+              "ToolIcon--selected": props.selected,
+              "ToolIcon--plain": props.type === "icon",
+            },
+          )}
+          style={props.style}
+          data-testid={props["data-testid"]}
+          hidden={props.hidden}
+          title={props.title}
+          aria-label={props["aria-label"]}
+          type={type}
+          onClick={onClick}
+          ref={innerRef}
+          disabled={isLoading || props.isLoading || !!props.disabled}
+        >
+          {(props.icon || props.label) && (
+            <div
+              className="ToolIcon__icon"
+              aria-hidden="true"
+              aria-disabled={!!props.disabled}
+            >
+              {props.icon || props.label}
+              {props.keyBindingLabel && (
+                <span className="ToolIcon__keybinding">
+                  {props.keyBindingLabel}
+                </span>
+              )}
+              {props.isLoading && <Spinner />}
+            </div>
+          )}
+          {props.showAriaLabel && (
+            <div className="ToolIcon__label">
+              {props["aria-label"]} {isLoading && <Spinner />}
+            </div>
+          )}
+          {props.children}
+        </button>
+      );
+    }

-  if (
-    props.type === "button" ||
-    props.type === "icon" ||
-    props.type === "submit"
-  ) {
-    const type = (props.type === "icon" ? "button" : props.type) as
-      | "button"
-      | "submit";
    return (
-      <button
-        className={clsx(
-          "ToolIcon_type_button",
-          sizeCn,
-          props.className,
-          props.visible && !props.hidden
-            ? "ToolIcon_type_button--show"
-            : "ToolIcon_type_button--hide",
-          {
-            ToolIcon: !props.hidden,
-            "ToolIcon--selected": props.selected,
-            "ToolIcon--plain": props.type === "icon",
-          },
-        )}
-        style={props.style}
-        data-testid={props["data-testid"]}
-        hidden={props.hidden}
+      <label
+        className={clsx("ToolIcon", className)}
        title={props.title}
-        aria-label={props["aria-label"]}
-        type={type}
-        onClick={onClick}
-        ref={innerRef}
-        disabled={isLoading || props.isLoading || !!props.disabled}
-      >
-        {(props.icon || props.label) && (
-          <div
-            className="ToolIcon__icon"
-            aria-hidden="true"
-            aria-disabled={!!props.disabled}
-          >
-            {props.icon || props.label}
-            {props.keyBindingLabel && (
-              <span className="ToolIcon__keybinding">
-                {props.keyBindingLabel}
-              </span>
-            )}
-            {props.isLoading && <Spinner />}
-          </div>
-        )}
-        {props.showAriaLabel && (
-          <div className="ToolIcon__label">
-            {props["aria-label"]} {isLoading && <Spinner />}
-          </div>
-        )}
-        {props.children}
-      </button>
-    );
-  }
-
-  return (
-    <label
-      className={clsx("ToolIcon", props.className)}
-      title={props.title}
-      onPointerDown={(event) => {
-        lastPointerTypeRef.current = event.pointerType || null;
-        props.onPointerDown?.({ pointerType: event.pointerType || null });
-      }}
-      onPointerUp={() => {
-        requestAnimationFrame(() => {
-          lastPointerTypeRef.current = null;
-        });
-      }}
-    >
-      <input
-        className={`ToolIcon_type_radio ${sizeCn}`}
-        type="radio"
-        name={props.name}
-        aria-label={props["aria-label"]}
-        aria-keyshortcuts={props["aria-keyshortcuts"]}
-        data-testid={props["data-testid"]}
-        id={`${excalId}-${props.id}`}
-        onChange={() => {
-          props.onChange?.({ pointerType: lastPointerTypeRef.current });
+        onPointerDown={(event) => {
+          lastPointerTypeRef.current = event.pointerType || null;
+          props.onPointerDown?.({ pointerType: event.pointerType || null });
        }}
-        checked={props.checked}
-        ref={innerRef}
-      />
-      <div className="ToolIcon__icon">
-        {props.icon}
-        {props.keyBindingLabel && (
-          <span className="ToolIcon__keybinding">{props.keyBindingLabel}</span>
-        )}
-      </div>
-    </label>
-  );
-});
-
-ToolButton.defaultProps = {
-  visible: true,
-  className: "",
-  size: "medium",
-};
+        onPointerUp={() => {
+          requestAnimationFrame(() => {
+            lastPointerTypeRef.current = null;
+          });
+        }}
+      >
+        <input
+          className={`ToolIcon_type_radio ${sizeCn}`}
+          type="radio"
+          name={props.name}
+          aria-label={props["aria-label"]}
+          aria-keyshortcuts={props["aria-keyshortcuts"]}
+          data-testid={props["data-testid"]}
+          id={`${excalId}-${props.id}`}
+          onChange={() => {
+            props.onChange?.({ pointerType: lastPointerTypeRef.current });
+          }}
+          checked={props.checked}
+          ref={innerRef}
+        />
+        <div className="ToolIcon__icon">
+          {props.icon}
+          {props.keyBindingLabel && (
+            <span className="ToolIcon__keybinding">
+              {props.keyBindingLabel}
+            </span>
+          )}
+        </div>
+      </label>
+    );
+  },
+);

 ToolButton.displayName = "ToolButton";
--- a/packages/excalidraw/components/hyperlink/Hyperlink.tsx
+++ b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
@@ -171,15 +171,17 @@ export const Hyperlink = ({
  }, [handleSubmit]);

  useEffect(() => {
-    let timeoutId: number | null = null;
-
    if (
-      inputRef &&
-      inputRef.current &&
+      isEditing &&
+      inputRef?.current &&
      !(device.viewport.isMobile || device.isTouchScreen)
    ) {
      inputRef.current.select();
    }
+  }, [isEditing, device.viewport.isMobile, device.isTouchScreen]);
+
+  useEffect(() => {
+    let timeoutId: number | null = null;

    const handlePointerMove = (event: PointerEvent) => {
      if (isEditing) {
@@ -207,15 +209,7 @@ export const Hyperlink = ({
        clearTimeout(timeoutId);
      }
    };
-  }, [
-    appState,
-    element,
-    isEditing,
-    setAppState,
-    elementsMap,
-    device.viewport.isMobile,
-    device.isTouchScreen,
-  ]);
+  }, [appState, element, isEditing, setAppState, elementsMap]);

  const handleRemove = useCallback(() => {
    trackEvent("hyperlink", "delete");
--- a/packages/excalidraw/constants.ts
+++ b/packages/excalidraw/constants.ts
@@ -417,6 +417,7 @@ export const LIBRARY_DISABLED_TYPES = new Set([
 // use these constants to easily identify reference sites
 export const TOOL_TYPE = {
  selection: "selection",
+  lassoSelection: "lassoSelection",
  rectangle: "rectangle",
  diamond: "diamond",
  ellipse: "ellipse",
--- a/packages/excalidraw/data/filesystem.ts
+++ b/packages/excalidraw/data/filesystem.ts
@@ -22,6 +22,7 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {

  const mimeTypes = opts.extensions?.reduce((mimeTypes, type) => {
    mimeTypes.push(MIME_TYPES[type]);
+
    return mimeTypes;
  }, [] as string[]);

@@ -38,62 +39,34 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
    mimeTypes,
    multiple: opts.multiple ?? false,
    legacySetup: (resolve, reject, input) => {
-      let isResolved = false;
-      let checkInterval: number | null = null;
-
-      // Increased delay for iOS to ensure file selection is complete
-      const CHECK_INTERVAL = 100; // 100ms
-      const MAX_CHECKS = 50; // 5 seconds total
-      let checkCount = 0;
-
      const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
-
-      const checkForFile = () => {
-        if (isResolved) {
-          return;
-        }
-
-        if (input.files?.length) {
-          isResolved = true;
-          const ret = opts.multiple ? [...input.files] : input.files[0];
-          resolve(ret as RetType);
-          return true;
-        }
-
-        checkCount++;
-        if (checkCount >= MAX_CHECKS) {
-          scheduleRejection();
-          return true;
-        }
-        return false;
-      };
-
      const focusHandler = () => {
-        // Start checking for files only after focus event
-        checkInterval = window.setInterval(() => {
-          if (checkForFile()) {
-            clearInterval(checkInterval!);
-          }
-        }, CHECK_INTERVAL);
-
+        checkForFile();
        document.addEventListener(EVENT.KEYUP, scheduleRejection);
        document.addEventListener(EVENT.POINTER_UP, scheduleRejection);
+        scheduleRejection();
+      };
+      const checkForFile = () => {
+        // this hack might not work when expecting multiple files
+        if (input.files?.length) {
+          const ret = opts.multiple ? [...input.files] : input.files[0];
+          resolve(ret as RetType);
+        }
      };
-
      requestAnimationFrame(() => {
        window.addEventListener(EVENT.FOCUS, focusHandler);
      });
-
+      const interval = window.setInterval(() => {
+        checkForFile();
+      }, INPUT_CHANGE_INTERVAL_MS);
      return (rejectPromise) => {
-        if (checkInterval) {
-          clearInterval(checkInterval);
-        }
+        clearInterval(interval);
        scheduleRejection.cancel();
        window.removeEventListener(EVENT.FOCUS, focusHandler);
        document.removeEventListener(EVENT.KEYUP, scheduleRejection);
        document.removeEventListener(EVENT.POINTER_UP, scheduleRejection);
-
-        if (rejectPromise && !isResolved) {
+        if (rejectPromise) {
+          // so that something is shown in console if we need to debug this
          console.warn("Opening the file was canceled (legacy-fs).");
          rejectPromise(new AbortError());
        }
--- a/packages/excalidraw/data/library.test.ts
+++ b/packages/excalidraw/data/library.test.ts
@@ -0,0 +1,105 @@
+import { validateLibraryUrl } from "./library";
+
+describe("validateLibraryUrl", () => {
+  it("should validate hostname & pathname", () => {
+    // valid hostnames
+    // -------------------------------------------------------------------------
+    expect(
+      validateLibraryUrl("https://www.excalidraw.com", ["excalidraw.com"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com", ["excalidraw.com"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://library.excalidraw.com", ["excalidraw.com"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://library.excalidraw.com", [
+        "library.excalidraw.com",
+      ]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/", ["excalidraw.com/"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com", ["excalidraw.com/"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/", ["excalidraw.com"]),
+    ).toBe(true);
+
+    // valid pathnames
+    // -------------------------------------------------------------------------
+    expect(
+      validateLibraryUrl("https://excalidraw.com/path", ["excalidraw.com"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/path/", ["excalidraw.com"]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/specific/path", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/specific/path/", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/specific/path", [
+        "excalidraw.com/specific/path/",
+      ]),
+    ).toBe(true);
+    expect(
+      validateLibraryUrl("https://excalidraw.com/specific/path/other", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toBe(true);
+
+    // invalid hostnames
+    // -------------------------------------------------------------------------
+    expect(() =>
+      validateLibraryUrl("https://xexcalidraw.com", ["excalidraw.com"]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://x-excalidraw.com", ["excalidraw.com"]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.comx", ["excalidraw.com"]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.comx", ["excalidraw.com"]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.com.mx", ["excalidraw.com"]),
+    ).toThrow();
+    // protocol must be https
+    expect(() =>
+      validateLibraryUrl("http://excalidraw.com.mx", ["excalidraw.com"]),
+    ).toThrow();
+
+    // invalid pathnames
+    // -------------------------------------------------------------------------
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.com/specific/other/path", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.com/specific/paths", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.com/specific/path-s", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toThrow();
+    expect(() =>
+      validateLibraryUrl("https://excalidraw.com/some/specific/path", [
+        "excalidraw.com/specific/path",
+      ]),
+    ).toThrow();
+  });
+});
--- a/packages/excalidraw/data/library.ts
+++ b/packages/excalidraw/data/library.ts
@@ -36,7 +36,18 @@ import { Queue } from "../queue";
 import { hashElementsVersion, hashString } from "../element";
 import { toValidURL } from "./url";

-const ALLOWED_LIBRARY_HOSTNAMES = ["excalidraw.com"];
+/**
+ * format: hostname or hostname/pathname
+ *
+ * Both hostname and pathname are matched partially,
+ * hostname from the end, pathname from the start, with subdomain/path
+ * boundaries
+ **/
+const ALLOWED_LIBRARY_URLS = [
+  "excalidraw.com",
+  // when installing from github PRs
+  "raw.githubusercontent.com/excalidraw/excalidraw-libraries",
+];

 type LibraryUpdate = {
  /** deleted library items since last onLibraryChange event */
@@ -469,26 +480,37 @@ export const distributeLibraryItemsOnSquareGrid = (
  return resElements;
 };

-const validateLibraryUrl = (
+export const validateLibraryUrl = (
  libraryUrl: string,
  /**
-   * If supplied, takes precedence over the default whitelist.
-   * Return `true` if the URL is valid.
+   * @returns `true` if the URL is valid, throws otherwise.
   */
-  validator?: (libraryUrl: string) => boolean,
-): boolean => {
+  validator:
+    | ((libraryUrl: string) => boolean)
+    | string[] = ALLOWED_LIBRARY_URLS,
+): true => {
  if (
-    validator
+    typeof validator === "function"
      ? validator(libraryUrl)
-      : ALLOWED_LIBRARY_HOSTNAMES.includes(
-          new URL(libraryUrl).hostname.split(".").slice(-2).join("."),
-        )
+      : validator.some((allowedUrlDef) => {
+          const allowedUrl = new URL(
+            `https://${allowedUrlDef.replace(/^https?:\/\//, "")}`,
+          );
+
+          const { hostname, pathname } = new URL(libraryUrl);
+
+          return (
+            new RegExp(`(^|\\.)${allowedUrl.hostname}$`).test(hostname) &&
+            new RegExp(
+              `^${allowedUrl.pathname.replace(/\/+$/, "")}(/+|$)`,
+            ).test(pathname)
+          );
+        })
  ) {
    return true;
  }

-  console.error(`Invalid or disallowed library URL: "${libraryUrl}"`);
-  throw new Error("Invalid or disallowed library URL");
+  throw new Error(`Invalid or disallowed library URL: "${libraryUrl}"`);
 };

 export const parseLibraryTokensFromUrl = () => {
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -70,6 +70,7 @@ export const AllowedExcalidrawActiveTools: Record<
  boolean
 > = {
  selection: true,
+  lassoSelection: true,
  text: true,
  rectangle: true,
  diamond: true,
--- a/packages/excalidraw/element/bounds.ts
+++ b/packages/excalidraw/element/bounds.ts
@@ -15,6 +15,7 @@ import { generateRoughOptions } from "../scene/Shape";
 import {
  isArrowElement,
  isBoundToContainer,
+  isFrameLikeElement,
  isFreeDrawElement,
  isLinearElement,
  isTextElement,
@@ -324,6 +325,15 @@ export const getElementLineSegments = (
    ];
  }

+  if (isFrameLikeElement(element)) {
+    return [
+      lineSegment(nw, ne),
+      lineSegment(ne, se),
+      lineSegment(se, sw),
+      lineSegment(sw, nw),
+    ];
+  }
+
  return [
    lineSegment(nw, ne),
    lineSegment(sw, se),
--- a/packages/excalidraw/element/elbowArrow.ts
+++ b/packages/excalidraw/element/elbowArrow.ts
@@ -909,6 +909,20 @@ export const updateElbowArrowPoints = (
    );
  }

+  // 0. During all element replacement in the scene, we just need to renormalize
+  // the arrow
+  // TODO (dwelle,mtolmacs): Remove this once Scene.getScene() is removed
+  if (elementsMap.size === 0 && updates.points) {
+    return normalizeArrowElementUpdate(
+      updates.points.map((p) =>
+        pointFrom<GlobalPoint>(arrow.x + p[0], arrow.y + p[1]),
+      ),
+      arrow.fixedSegments,
+      arrow.startIsSpecial,
+      arrow.endIsSpecial,
+    );
+  }
+
  const updatedPoints: readonly LocalPoint[] = updates.points
    ? updates.points && updates.points.length === 2
      ? arrow.points.map((p, idx) =>
--- a/packages/excalidraw/element/flowchart.ts
+++ b/packages/excalidraw/element/flowchart.ts
@@ -254,6 +254,9 @@ const addNewNode = (
    backgroundColor: element.backgroundColor,
    strokeColor: element.strokeColor,
    strokeWidth: element.strokeWidth,
+    opacity: element.opacity,
+    fillStyle: element.fillStyle,
+    strokeStyle: element.strokeStyle,
  });

  invariant(
@@ -329,6 +332,9 @@ export const addNewNodes = (
      backgroundColor: startNode.backgroundColor,
      strokeColor: startNode.strokeColor,
      strokeWidth: startNode.strokeWidth,
+      opacity: startNode.opacity,
+      fillStyle: startNode.fillStyle,
+      strokeStyle: startNode.strokeStyle,
    });

    invariant(
@@ -416,11 +422,13 @@ const createBindingArrow = (
    type: "arrow",
    x: startX,
    y: startY,
-    startArrowhead: appState.currentItemStartArrowhead,
+    startArrowhead: null,
    endArrowhead: appState.currentItemEndArrowhead,
-    strokeColor: appState.currentItemStrokeColor,
-    strokeStyle: appState.currentItemStrokeStyle,
-    strokeWidth: appState.currentItemStrokeWidth,
+    strokeColor: startBindingElement.strokeColor,
+    strokeStyle: startBindingElement.strokeStyle,
+    strokeWidth: startBindingElement.strokeWidth,
+    opacity: startBindingElement.opacity,
+    roughness: startBindingElement.roughness,
    points: [pointFrom(0, 0), pointFrom(endX, endY)],
    elbowed: true,
  });
--- a/packages/excalidraw/frame.ts
+++ b/packages/excalidraw/frame.ts
@@ -95,12 +95,11 @@ export const getElementsCompletelyInFrame = (
  );

 export const isElementContainingFrame = (
-  elements: readonly ExcalidrawElement[],
  element: ExcalidrawElement,
  frame: ExcalidrawFrameLikeElement,
  elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection(elements, element, elementsMap).some(
+  return getElementsWithinSelection([frame], element, elementsMap).some(
    (e) => e.id === frame.id,
  );
 };
@@ -144,7 +143,7 @@ export const elementOverlapsWithFrame = (
  return (
    elementsAreInFrameBounds([element], frame, elementsMap) ||
    isElementIntersectingFrame(element, frame, elementsMap) ||
-    isElementContainingFrame([frame], element, frame, elementsMap)
+    isElementContainingFrame(element, frame, elementsMap)
  );
 };

@@ -283,7 +282,7 @@ export const getElementsInResizingFrame = (
  const elementsCompletelyInFrame = new Set([
    ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
    ...prevElementsInFrame.filter((element) =>
-      isElementContainingFrame(allElements, element, frame, elementsMap),
+      isElementContainingFrame(element, frame, elementsMap),
    ),
  ]);

@@ -370,12 +369,57 @@ export const getElementsInNewFrame = (
  frame: ExcalidrawFrameLikeElement,
  elementsMap: ElementsMap,
 ) => {
-  return omitGroupsContainingFrameLikes(
-    elements,
-    getElementsCompletelyInFrame(elements, frame, elementsMap),
+  return omitPartialGroups(
+    omitGroupsContainingFrameLikes(
+      elements,
+      getElementsCompletelyInFrame(elements, frame, elementsMap),
+    ),
+    frame,
+    elementsMap,
  );
 };

+export const omitPartialGroups = (
+  elements: ExcalidrawElement[],
+  frame: ExcalidrawFrameLikeElement,
+  allElementsMap: ElementsMap,
+) => {
+  const elementsToReturn = [];
+  const checkedGroups = new Map<string, boolean>();
+
+  for (const element of elements) {
+    let shouldOmit = false;
+    if (element.groupIds.length > 0) {
+      // if some partial group should be omitted, then all elements in that group should be omitted
+      if (element.groupIds.some((gid) => checkedGroups.get(gid))) {
+        shouldOmit = true;
+      } else {
+        const allElementsInGroup = new Set(
+          element.groupIds.flatMap((gid) =>
+            getElementsInGroup(allElementsMap, gid),
+          ),
+        );
+
+        shouldOmit = !elementsAreInFrameBounds(
+          Array.from(allElementsInGroup),
+          frame,
+          allElementsMap,
+        );
+      }
+
+      element.groupIds.forEach((gid) => {
+        checkedGroups.set(gid, shouldOmit);
+      });
+    }
+
+    if (!shouldOmit) {
+      elementsToReturn.push(element);
+    }
+  }
+
+  return elementsToReturn;
+};
+
 export const getContainingFrame = (
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
@@ -454,6 +498,7 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
  allElements: T,
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
+  appState: AppState,
 ): T => {
  const elementsMap = arrayToMap(allElements);
  const currTargetFrameChildrenMap = new Map<ExcalidrawElement["id"], true>();
@@ -489,6 +534,17 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
      continue;
    }

+    // if the element is already in another frame (which is also in elementsToAdd),
+    // it means that frame and children are selected at the same time
+    // => keep original frame membership, do not add to the target frame
+    if (
+      element.frameId &&
+      appState.selectedElementIds[element.id] &&
+      appState.selectedElementIds[element.frameId]
+    ) {
+      continue;
+    }
+
    if (!currTargetFrameChildrenMap.has(element.id)) {
      finalElementsToAdd.push(element);
    }
@@ -577,6 +633,7 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
    removeAllElementsFromFrame(allElements, frame),
    nextElementsInFrame,
    frame,
+    app.state,
  ).slice();
 };

@@ -683,6 +740,16 @@ export const getTargetFrame = (
    ? getContainerElement(element, elementsMap) || element
    : element;

+  // if the element and its containing frame are both selected, then
+  // the containing frame is the target frame
+  if (
+    _element.frameId &&
+    appState.selectedElementIds[_element.id] &&
+    appState.selectedElementIds[_element.frameId]
+  ) {
+    return getContainingFrame(_element, elementsMap);
+  }
+
  return appState.selectedElementIds[_element.id] &&
    appState.selectedElementsAreBeingDragged
    ? appState.frameToHighlight
@@ -695,61 +762,151 @@ export const isElementInFrame = (
  element: ExcalidrawElement,
  allElementsMap: ElementsMap,
  appState: StaticCanvasAppState,
+  opts?: {
+    targetFrame?: ExcalidrawFrameLikeElement;
+    checkedGroups?: Map<string, boolean>;
+  },
 ) => {
-  const frame = getTargetFrame(element, allElementsMap, appState);
+  const frame =
+    opts?.targetFrame ?? getTargetFrame(element, allElementsMap, appState);
+
+  if (!frame) {
+    return false;
+  }
+
  const _element = isTextElement(element)
    ? getContainerElement(element, allElementsMap) || element
    : element;

-  if (frame) {
-    // Perf improvement:
-    // For an element that's already in a frame, if it's not being dragged
-    // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
-    // It has to be in its containing frame.
-    if (
-      !appState.selectedElementIds[element.id] ||
-      !appState.selectedElementsAreBeingDragged
-    ) {
+  const setGroupsInFrame = (isInFrame: boolean) => {
+    if (opts?.checkedGroups) {
+      _element.groupIds.forEach((groupId) => {
+        opts.checkedGroups?.set(groupId, isInFrame);
+      });
+    }
+  };
+
+  if (
+    // if the element is not selected, or it is selected but not being dragged,
+    // frame membership won't update, so return true
+    !appState.selectedElementIds[_element.id] ||
+    !appState.selectedElementsAreBeingDragged ||
+    // if both frame and element are selected, won't update membership, so return true
+    (appState.selectedElementIds[_element.id] &&
+      appState.selectedElementIds[frame.id])
+  ) {
+    return true;
+  }
+
+  if (_element.groupIds.length === 0) {
+    return elementOverlapsWithFrame(_element, frame, allElementsMap);
+  }
+
+  for (const gid of _element.groupIds) {
+    if (opts?.checkedGroups?.has(gid)) {
+      return opts.checkedGroups.get(gid)!!;
+    }
+  }
+
+  const allElementsInGroup = new Set(
+    _element.groupIds
+      .filter((gid) => {
+        if (opts?.checkedGroups) {
+          return !opts.checkedGroups.has(gid);
+        }
+        return true;
+      })
+      .flatMap((gid) => getElementsInGroup(allElementsMap, gid)),
+  );
+
+  if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+    const selectedElements = new Set(
+      getSelectedElements(allElementsMap, appState),
+    );
+
+    const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+
+    if (editingGroupOverlapsFrame) {
      return true;
    }

-    if (_element.groupIds.length === 0) {
-      return elementOverlapsWithFrame(_element, frame, allElementsMap);
+    selectedElements.forEach((selectedElement) => {
+      allElementsInGroup.delete(selectedElement);
+    });
+  }
+
+  for (const elementInGroup of allElementsInGroup) {
+    if (isFrameLikeElement(elementInGroup)) {
+      setGroupsInFrame(false);
+      return false;
+    }
+  }
+
+  for (const elementInGroup of allElementsInGroup) {
+    if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
+      setGroupsInFrame(true);
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const shouldApplyFrameClip = (
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameLikeElement,
+  appState: StaticCanvasAppState,
+  elementsMap: ElementsMap,
+  checkedGroups?: Map<string, boolean>,
+) => {
+  if (!appState.frameRendering || !appState.frameRendering.clip) {
+    return false;
+  }
+
+  // for individual elements, only clip when the element is
+  // a. overlapping with the frame, or
+  // b. containing the frame, for example when an element is used as a background
+  //    and is therefore bigger than the frame and completely contains the frame
+  const shouldClipElementItself =
+    isElementIntersectingFrame(element, frame, elementsMap) ||
+    isElementContainingFrame(element, frame, elementsMap);
+
+  if (shouldClipElementItself) {
+    for (const groupId of element.groupIds) {
+      checkedGroups?.set(groupId, true);
    }

-    const allElementsInGroup = new Set(
-      _element.groupIds.flatMap((gid) =>
-        getElementsInGroup(allElementsMap, gid),
-      ),
-    );
+    return true;
+  }

-    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-      const selectedElements = new Set(
-        getSelectedElements(allElementsMap, appState),
-      );
+  // if an element is outside the frame, but is part of a group that has some elements
+  // "in" the frame, we should clip the element
+  if (
+    !shouldClipElementItself &&
+    element.groupIds.length > 0 &&
+    !elementsAreInFrameBounds([element], frame, elementsMap)
+  ) {
+    let shouldClip = false;

-      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
-
-      if (editingGroupOverlapsFrame) {
-        return true;
+    // if no elements are being dragged, we can skip the geometry check
+    // because we know if the element is in the given frame or not
+    if (!appState.selectedElementsAreBeingDragged) {
+      shouldClip = element.frameId === frame.id;
+      for (const groupId of element.groupIds) {
+        checkedGroups?.set(groupId, shouldClip);
      }
-
-      selectedElements.forEach((selectedElement) => {
-        allElementsInGroup.delete(selectedElement);
+    } else {
+      shouldClip = isElementInFrame(element, elementsMap, appState, {
+        targetFrame: frame,
+        checkedGroups,
      });
    }

-    for (const elementInGroup of allElementsInGroup) {
-      if (isFrameLikeElement(elementInGroup)) {
-        return false;
-      }
+    for (const groupId of element.groupIds) {
+      checkedGroups?.set(groupId, shouldClip);
    }

-    for (const elementInGroup of allElementsInGroup) {
-      if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
-        return true;
-      }
-    }
+    return shouldClip;
  }

  return false;
@@ -779,3 +936,16 @@ export const getElementsOverlappingFrame = (
      .filter((el) => !el.frameId || el.frameId === frame.id)
  );
 };
+
+export const frameAndChildrenSelectedTogether = (
+  selectedElements: readonly ExcalidrawElement[],
+) => {
+  const selectedElementsMap = arrayToMap(selectedElements);
+
+  return (
+    selectedElements.length > 1 &&
+    selectedElements.some(
+      (element) => element.frameId && selectedElementsMap.has(element.frameId),
+    )
+  );
+};
--- a/packages/excalidraw/lasso.ts
+++ b/packages/excalidraw/lasso.ts
@@ -0,0 +1,308 @@
+/**
+ * all things related to lasso selection
+ * - lasso selection
+ * - intersection and enclosure checks
+ */
+
+import {
+  type GlobalPoint,
+  type LineSegment,
+  type LocalPoint,
+  type Polygon,
+  pointFrom,
+  pointsEqual,
+  polygonFromPoints,
+  segmentsIntersectAt,
+} from "../math";
+import { isPointInShape } from "../utils/collision";
+import {
+  type GeometricShape,
+  polylineFromPoints,
+} from "../utils/geometry/shape";
+import { AnimatedTrail } from "./animated-trail";
+import { type AnimationFrameHandler } from "./animation-frame-handler";
+import type App from "./components/App";
+import { getElementLineSegments } from "./element/bounds";
+import type { ElementsMap, ExcalidrawElement } from "./element/types";
+import type { InteractiveCanvasRenderConfig } from "./scene/types";
+import type { InteractiveCanvasAppState } from "./types";
+import { easeOut } from "./utils";
+
+export type LassoPath = {
+  x: number;
+  y: number;
+  points: LocalPoint[];
+  intersectedElements: Set<ExcalidrawElement["id"]>;
+  enclosedElements: Set<ExcalidrawElement["id"]>;
+};
+
+export const renderLassoSelection = (
+  lassoPath: LassoPath,
+  context: CanvasRenderingContext2D,
+  appState: InteractiveCanvasAppState,
+  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
+) => {
+  context.save();
+  context.translate(
+    lassoPath.x + appState.scrollX,
+    lassoPath.y + appState.scrollY,
+  );
+
+  const firstPoint = lassoPath.points[0];
+
+  if (firstPoint) {
+    context.beginPath();
+    context.moveTo(firstPoint[0], firstPoint[1]);
+
+    for (let i = 1; i < lassoPath.points.length; i++) {
+      context.lineTo(lassoPath.points[i][0], lassoPath.points[i][1]);
+    }
+
+    context.strokeStyle = selectionColor;
+    context.lineWidth = 3 / appState.zoom.value;
+
+    if (
+      lassoPath.points.length >= 3 &&
+      pointsEqual(
+        lassoPath.points[0],
+        lassoPath.points[lassoPath.points.length - 1],
+      )
+    ) {
+      context.closePath();
+    }
+    context.stroke();
+  }
+
+  context.restore();
+};
+
+// export class LassoSelection {
+//   static createLassoPath = (x: number, y: number): LassoPath => {
+//     return {
+//       x,
+//       y,
+//       points: [],
+//       intersectedElements: new Set(),
+//       enclosedElements: new Set(),
+//     };
+//   };
+
+//   static updateLassoPath = (
+//     lassoPath: LassoPath,
+//     pointerCoords: { x: number; y: number },
+//     elementsMap: ElementsMap,
+//   ): LassoPath => {
+//     const points = lassoPath.points;
+//     const dx = pointerCoords.x - lassoPath.x;
+//     const dy = pointerCoords.y - lassoPath.y;
+
+//     const lastPoint = points.length > 0 && points[points.length - 1];
+//     const discardPoint =
+//       lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
+
+//     if (!discardPoint) {
+//       const nextLassoPath = {
+//         ...lassoPath,
+//         points: [...points, pointFrom<LocalPoint>(dx, dy)],
+//       };
+
+//       // nextLassoPath.enclosedElements.clear();
+
+//       // const enclosedLassoPath = LassoSelection.closeLassoPath(
+//       //   nextLassoPath,
+//       //   elementsMap,
+//       // );
+
+//       // for (const [id, element] of elementsMap) {
+//       //   if (!lassoPath.intersectedElements.has(element.id)) {
+//       //     const intersects = intersect(nextLassoPath, element, elementsMap);
+//       //     if (intersects) {
+//       //       lassoPath.intersectedElements.add(element.id);
+//       //     } else {
+//       //       // check if the lasso path encloses the element
+//       //       const enclosed = enclose(enclosedLassoPath, element, elementsMap);
+//       //       if (enclosed) {
+//       //         lassoPath.enclosedElements.add(element.id);
+//       //       }
+//       //     }
+//       //   }
+//       // }
+
+//       return nextLassoPath;
+//     }
+
+//     return lassoPath;
+//   };
+
+//   private static closeLassoPath = (
+//     lassoPath: LassoPath,
+//     elementsMap: ElementsMap,
+//   ) => {
+//     const finalPoints = [...lassoPath.points, lassoPath.points[0]];
+//     // TODO: check if the lasso path encloses or intersects with any element
+
+//     const finalLassoPath = {
+//       ...lassoPath,
+//       points: finalPoints,
+//     };
+
+//     return finalLassoPath;
+//   };
+
+//   static finalizeLassoPath = (
+//     lassoPath: LassoPath,
+//     elementsMap: ElementsMap,
+//   ) => {
+//     const enclosedLassoPath = LassoSelection.closeLassoPath(
+//       lassoPath,
+//       elementsMap,
+//     );
+
+//     enclosedLassoPath.enclosedElements.clear();
+//     enclosedLassoPath.intersectedElements.clear();
+
+//     // for (const [id, element] of elementsMap) {
+//     //   const intersects = intersect(enclosedLassoPath, element, elementsMap);
+//     //   if (intersects) {
+//     //     enclosedLassoPath.intersectedElements.add(element.id);
+//     //   } else {
+//     //     const enclosed = enclose(enclosedLassoPath, element, elementsMap);
+//     //     if (enclosed) {
+//     //       enclosedLassoPath.enclosedElements.add(element.id);
+//     //     }
+//     //   }
+//     // }
+
+//     return enclosedLassoPath;
+//   };
+// }
+
+const intersectionTest = (
+  lassoPath: GlobalPoint[],
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+): boolean => {
+  const elementLineSegments = getElementLineSegments(element, elementsMap);
+  const lassoSegments = lassoPath.reduce((acc, point, index) => {
+    if (index === 0) {
+      return acc;
+    }
+    const prevPoint = pointFrom<GlobalPoint>(
+      lassoPath[index - 1][0],
+      lassoPath[index - 1][1],
+    );
+    const currentPoint = pointFrom<GlobalPoint>(point[0], point[1]);
+    acc.push([prevPoint, currentPoint] as LineSegment<GlobalPoint>);
+    return acc;
+  }, [] as LineSegment<GlobalPoint>[]);
+
+  for (const lassoSegment of lassoSegments) {
+    for (const elementSegment of elementLineSegments) {
+      if (segmentsIntersectAt(lassoSegment, elementSegment)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+const enclosureTest = (
+  lassoPath: GlobalPoint[],
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+): boolean => {
+  const polyline = polylineFromPoints(lassoPath);
+
+  const closedPathShape: GeometricShape<GlobalPoint> = {
+    type: "polygon",
+    data: polygonFromPoints(polyline.flat()),
+  } as {
+    type: "polygon";
+    data: Polygon<GlobalPoint>;
+  };
+
+  const elementSegments = getElementLineSegments(element, elementsMap);
+
+  for (const segment of elementSegments) {
+    if (segment.some((point) => isPointInShape(point, closedPathShape))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export class LassoTrail extends AnimatedTrail {
+  private intersectedElements: Set<ExcalidrawElement["id"]> = new Set();
+  private enclosedElements: Set<ExcalidrawElement["id"]> = new Set();
+
+  constructor(animationFrameHandler: AnimationFrameHandler, app: App) {
+    super(animationFrameHandler, app, {
+      simplify: 0,
+      streamline: 0.4,
+      sizeMapping: (c) => {
+        const DECAY_TIME = Infinity;
+        const DECAY_LENGTH = 5000;
+        const t = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME,
+        );
+        const l =
+          (DECAY_LENGTH -
+            Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
+          DECAY_LENGTH;
+
+        return Math.min(easeOut(l), easeOut(t));
+      },
+      fill: () => "rgb(0,118,255)",
+    });
+  }
+
+  startPath(x: number, y: number) {
+    super.startPath(x, y);
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+  }
+
+  addPointToPath(x: number, y: number) {
+    super.addPointToPath(x, y);
+    const lassoPath = super
+      .getCurrentTrail()
+      ?.originalPoints?.map((p) => pointFrom<GlobalPoint>(p[0], p[1]));
+    if (lassoPath) {
+      // TODO: further OPT: do not check elements that are "far away"
+      const elementsMap = this.app.scene.getNonDeletedElementsMap();
+      const closedPath = polygonFromPoints(lassoPath);
+      // need to clear the enclosed elements as path might change
+      this.enclosedElements.clear();
+      for (const [, element] of elementsMap) {
+        if (!this.intersectedElements.has(element.id)) {
+          const intersects = intersectionTest(lassoPath, element, elementsMap);
+          if (intersects) {
+            this.intersectedElements.add(element.id);
+          } else {
+            // TODO: check bounding box is at least in the lasso path area first
+            // BUT: need to compare bounding box check with enclosure check performance
+            const enclosed = enclosureTest(closedPath, element, elementsMap);
+            if (enclosed) {
+              this.enclosedElements.add(element.id);
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      intersectedElementIds: this.intersectedElements,
+      enclosedElementIds: this.enclosedElements,
+    };
+  }
+
+  endPath(): void {
+    super.endPath();
+    super.clearTrails();
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+  }
+}
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -85,6 +85,7 @@ import {
  type Radians,
 } from "../../math";
 import { getCornerRadius } from "../shapes";
+import { renderLassoSelection } from "../lasso";

 const renderElbowArrowMidPointHighlight = (
  context: CanvasRenderingContext2D,
--- a/packages/excalidraw/renderer/staticScene.ts
+++ b/packages/excalidraw/renderer/staticScene.ts
@@ -4,7 +4,7 @@ import { getElementAbsoluteCoords } from "../element";
 import {
  elementOverlapsWithFrame,
  getTargetFrame,
-  isElementInFrame,
+  shouldApplyFrameClip,
 } from "../frame";
 import {
  isEmbeddableElement,
@@ -273,6 +273,8 @@ const _renderStaticScene = ({
    }
  });

+  const inFrameGroupsMap = new Map<string, boolean>();
+
  // Paint visible elements
  visibleElements
    .filter((el) => !isIframeLikeElement(el))
@@ -297,9 +299,16 @@ const _renderStaticScene = ({
          appState.frameRendering.clip
        ) {
          const frame = getTargetFrame(element, elementsMap, appState);
-
-          // TODO do we need to check isElementInFrame here?
-          if (frame && isElementInFrame(element, elementsMap, appState)) {
+          if (
+            frame &&
+            shouldApplyFrameClip(
+              element,
+              frame,
+              appState,
+              elementsMap,
+              inFrameGroupsMap,
+            )
+          ) {
            frameClip(frame, context, renderConfig, appState);
          }
          renderElement(
@@ -400,7 +409,16 @@ const _renderStaticScene = ({

          const frame = getTargetFrame(element, elementsMap, appState);

-          if (frame && isElementInFrame(element, elementsMap, appState)) {
+          if (
+            frame &&
+            shouldApplyFrameClip(
+              element,
+              frame,
+              appState,
+              elementsMap,
+              inFrameGroupsMap,
+            )
+          ) {
            frameClip(frame, context, renderConfig, appState);
          }
          render();
--- a/packages/excalidraw/scene/selection.ts
+++ b/packages/excalidraw/scene/selection.ts
@@ -183,10 +183,12 @@ export const getSelectedElements = (
    includeElementsInFrames?: boolean;
  },
 ) => {
+  const addedElements = new Set<ExcalidrawElement["id"]>();
  const selectedElements: ExcalidrawElement[] = [];
  for (const element of elements.values()) {
    if (appState.selectedElementIds[element.id]) {
      selectedElements.push(element);
+      addedElements.add(element.id);
      continue;
    }
    if (
@@ -195,6 +197,7 @@ export const getSelectedElements = (
      appState.selectedElementIds[element?.containerId]
    ) {
      selectedElements.push(element);
+      addedElements.add(element.id);
      continue;
    }
  }
@@ -203,8 +206,8 @@ export const getSelectedElements = (
    const elementsToInclude: ExcalidrawElement[] = [];
    selectedElements.forEach((element) => {
      if (isFrameLikeElement(element)) {
-        getFrameChildren(elements, element.id).forEach((e) =>
-          elementsToInclude.push(e),
+        getFrameChildren(elements, element.id).forEach(
+          (e) => !addedElements.has(e.id) && elementsToInclude.push(e),
        );
      }
      elementsToInclude.push(element);
--- a/packages/excalidraw/tests/snapshots/history.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/history.test.tsx.snap
@@ -10896,12 +10896,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "6Rm4g567UQM4WjLwej2Vc",
-      "type": "arrow",
-    },
-  ],
+  "boundElements": [],
  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
@@ -10909,7 +10904,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "height": 126,
  "id": "KPrBI4g_v9qUB1XxYLgSz",
  "index": "a0",
-  "isDeleted": false,
+  "isDeleted": true,
  "link": null,
  "locked": false,
  "opacity": 100,
@@ -10922,7 +10917,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "strokeWidth": 2,
  "type": "rectangle",
  "updated": 1,
-  "version": 6,
+  "version": 4,
  "width": 157,
  "x": 600,
  "y": 0,
@@ -10933,12 +10928,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "6Rm4g567UQM4WjLwej2Vc",
-      "type": "arrow",
-    },
-  ],
+  "boundElements": [],
  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
@@ -10946,7 +10936,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "height": 129,
  "id": "u2JGnnmoJ0VATV4vCNJE5",
  "index": "a1",
-  "isDeleted": false,
+  "isDeleted": true,
  "link": null,
  "locked": false,
  "opacity": 100,
@@ -10959,7 +10949,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "strokeWidth": 2,
  "type": "diamond",
  "updated": 1,
-  "version": 6,
+  "version": 4,
  "width": 124,
  "x": 1152,
  "y": 516,
@@ -10983,15 +10973,15 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
    "focus": "-0.00161",
    "gap": "3.53708",
  },
-  "endIsSpecial": null,
+  "endIsSpecial": false,
  "fillStyle": "solid",
-  "fixedSegments": null,
+  "fixedSegments": [],
  "frameId": null,
  "groupIds": [],
-  "height": "448.10100",
+  "height": "236.10000",
  "id": "6Rm4g567UQM4WjLwej2Vc",
  "index": "a2",
-  "isDeleted": false,
+  "isDeleted": true,
  "lastCommittedPoint": null,
  "link": null,
  "locked": false,
@@ -11002,16 +10992,12 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
      0,
    ],
    [
-      "225.95000",
+      "178.90000",
      0,
    ],
    [
-      "225.95000",
-      "448.10100",
-    ],
-    [
-      "451.90000",
-      "448.10100",
+      "178.90000",
+      "236.10000",
    ],
  ],
  "roughness": 1,
@@ -11028,16 +11014,16 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
    "focus": "-0.00159",
    "gap": 5,
  },
-  "startIsSpecial": null,
+  "startIsSpecial": false,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 6,
-  "width": "451.90000",
-  "x": 762,
-  "y": "62.90000",
+  "version": 3,
+  "width": "178.90000",
+  "x": 1035,
+  "y": "274.90000",
 }
 `;

@@ -11049,8 +11035,7 @@ History {
      [Function],
    ],
  },
-  "redoStack": [],
-  "undoStack": [
+  "redoStack": [
    HistoryEntry {
      "appStateChange": AppStateChange {
        "delta": Delta {
@@ -11059,86 +11044,12 @@ History {
        },
      },
      "elementsChange": ElementsChange {
-        "added": Map {},
-        "removed": Map {
-          "KPrBI4g_v9qUB1XxYLgSz" => Delta {
-            "deleted": {
-              "angle": 0,
-              "backgroundColor": "transparent",
-              "boundElements": null,
-              "customData": undefined,
-              "fillStyle": "solid",
-              "frameId": null,
-              "groupIds": [],
-              "height": 126,
-              "index": "a0",
-              "isDeleted": false,
-              "link": null,
-              "locked": false,
-              "opacity": 100,
-              "roughness": 1,
-              "roundness": {
-                "type": 3,
-              },
-              "strokeColor": "#1e1e1e",
-              "strokeStyle": "solid",
-              "strokeWidth": 2,
-              "type": "rectangle",
-              "width": 157,
-              "x": 873,
-              "y": 212,
-            },
-            "inserted": {
-              "isDeleted": true,
-            },
-          },
-          "u2JGnnmoJ0VATV4vCNJE5" => Delta {
-            "deleted": {
-              "angle": 0,
-              "backgroundColor": "transparent",
-              "boundElements": null,
-              "customData": undefined,
-              "fillStyle": "solid",
-              "frameId": null,
-              "groupIds": [],
-              "height": 129,
-              "index": "a1",
-              "isDeleted": false,
-              "link": null,
-              "locked": false,
-              "opacity": 100,
-              "roughness": 1,
-              "roundness": {
-                "type": 3,
-              },
-              "strokeColor": "#1e1e1e",
-              "strokeStyle": "solid",
-              "strokeWidth": 2,
-              "type": "diamond",
-              "width": 124,
-              "x": 1152,
-              "y": 516,
-            },
-            "inserted": {
-              "isDeleted": true,
-            },
-          },
-        },
-        "updated": Map {},
-      },
-    },
-    HistoryEntry {
-      "appStateChange": AppStateChange {
-        "delta": Delta {
-          "deleted": {},
-          "inserted": {},
-        },
-      },
-      "elementsChange": ElementsChange {
-        "added": Map {},
-        "removed": Map {
+        "added": Map {
          "6Rm4g567UQM4WjLwej2Vc" => Delta {
            "deleted": {
+              "isDeleted": true,
+            },
+            "inserted": {
              "angle": 0,
              "backgroundColor": "transparent",
              "boundElements": null,
@@ -11203,14 +11114,15 @@ History {
              "x": 1035,
              "y": "274.90000",
            },
-            "inserted": {
-              "isDeleted": true,
-            },
          },
        },
+        "removed": Map {},
        "updated": Map {
          "KPrBI4g_v9qUB1XxYLgSz" => Delta {
            "deleted": {
+              "boundElements": [],
+            },
+            "inserted": {
              "boundElements": [
                {
                  "id": "6Rm4g567UQM4WjLwej2Vc",
@@ -11218,12 +11130,12 @@ History {
                },
              ],
            },
-            "inserted": {
-              "boundElements": [],
-            },
          },
          "u2JGnnmoJ0VATV4vCNJE5" => Delta {
            "deleted": {
+              "boundElements": [],
+            },
+            "inserted": {
              "boundElements": [
                {
                  "id": "6Rm4g567UQM4WjLwej2Vc",
@@ -11231,14 +11143,88 @@ History {
                },
              ],
            },
-            "inserted": {
-              "boundElements": [],
-            },
          },
        },
      },
    },
+    HistoryEntry {
+      "appStateChange": AppStateChange {
+        "delta": Delta {
+          "deleted": {},
+          "inserted": {},
+        },
+      },
+      "elementsChange": ElementsChange {
+        "added": Map {
+          "KPrBI4g_v9qUB1XxYLgSz" => Delta {
+            "deleted": {
+              "isDeleted": true,
+            },
+            "inserted": {
+              "angle": 0,
+              "backgroundColor": "transparent",
+              "boundElements": null,
+              "customData": undefined,
+              "fillStyle": "solid",
+              "frameId": null,
+              "groupIds": [],
+              "height": 126,
+              "index": "a0",
+              "isDeleted": false,
+              "link": null,
+              "locked": false,
+              "opacity": 100,
+              "roughness": 1,
+              "roundness": {
+                "type": 3,
+              },
+              "strokeColor": "#1e1e1e",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "type": "rectangle",
+              "width": 157,
+              "x": 600,
+              "y": 0,
+            },
+          },
+          "u2JGnnmoJ0VATV4vCNJE5" => Delta {
+            "deleted": {
+              "isDeleted": true,
+            },
+            "inserted": {
+              "angle": 0,
+              "backgroundColor": "transparent",
+              "boundElements": null,
+              "customData": undefined,
+              "fillStyle": "solid",
+              "frameId": null,
+              "groupIds": [],
+              "height": 129,
+              "index": "a1",
+              "isDeleted": false,
+              "link": null,
+              "locked": false,
+              "opacity": 100,
+              "roughness": 1,
+              "roundness": {
+                "type": 3,
+              },
+              "strokeColor": "#1e1e1e",
+              "strokeStyle": "solid",
+              "strokeWidth": 2,
+              "type": "diamond",
+              "width": 124,
+              "x": 1152,
+              "y": 516,
+            },
+          },
+        },
+        "removed": Map {},
+        "updated": Map {},
+      },
+    },
  ],
+  "undoStack": [],
 }
 `;

--- a/packages/excalidraw/tests/snapshots/move.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/move.test.tsx.snap
@@ -233,7 +233,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
  "type": "arrow",
  "updated": 1,
  "version": 11,
-  "versionNonce": 1996028265,
+  "versionNonce": 1051383431,
  "width": 81,
  "x": 110,
  "y": 50,
--- a/packages/excalidraw/tests/history.test.tsx
+++ b/packages/excalidraw/tests/history.test.tsx
@@ -2077,16 +2077,15 @@ describe("history", () => {
        storeAction: StoreAction.UPDATE,
      });

-      Keyboard.redo();
+      Keyboard.undo();

      const modifiedArrow = h.elements.filter(
        (el) => el.type === "arrow",
      )[0] as ExcalidrawElbowArrowElement;
-      expect(modifiedArrow.points).toEqual([
+      expect(modifiedArrow.points).toCloselyEqualPoints([
        [0, 0],
-        [225.95000000000005, 0],
-        [225.95000000000005, 448.10100010002003],
-        [451.9000000000001, 448.10100010002003],
+        [178.9, 0],
+        [178.9, 236.1],
      ]);
    });

--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -119,6 +119,7 @@ export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;

 export type ToolType =
  | "selection"
+  | "lassoSelection"
  | "rectangle"
  | "diamond"
  | "ellipse"
@@ -408,6 +409,8 @@ export interface AppState {
  croppingElementId: ExcalidrawElement["id"] | null;

  searchMatches: readonly SearchMatch[];
+
+  lassoSelectionEnabled: boolean;
 }

 type SearchMatch = {
--- a/packages/utils/geometry/shape.ts
+++ b/packages/utils/geometry/shape.ts
@@ -239,7 +239,7 @@ export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
  };
 };

-const polylineFromPoints = <Point extends GlobalPoint | LocalPoint>(
+export const polylineFromPoints = <Point extends GlobalPoint | LocalPoint>(
  points: Point[],
 ): Polyline<Point> => {
  let previousPoint: Point = points[0];
Author	SHA1	Message	Date
Ryan Di	3b5d62c8d6	fix uppercase typo	2025-02-05 21:05:27 +11:00
Ryan Di	4f74274d04	animated trail for lasso selection	2025-02-05 20:59:51 +11:00
Ryan Di	52eaf64591	feat: box select frame & children to allow resizing at the same time (#9031 ) * box select frame & children * avoid selecting children twice to avoid double their moving * do not show ele stats if frame and children selected together * do not update frame membership if selected together * do not group frame and its children * comment and refactor code * hide align altogether * include frame children when selecting all * simplify --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2025-01-28 22:10:16 +01:00
David Luzar	7028daa44a	fix: remove flushSync to fix flickering (#9057 )	2025-01-28 19:23:35 +01:00
Ashwin Temkar	65f218b100	fix: excalidraw issue #9045 flowcharts: align attributes of new node (#9047 ) * fix: excalidraw#9045 by modifying the stroke style, opacity, and fill style for the new node and next nodes. * fix: added roughness and opacity to the arrowbindings	2025-01-25 17:05:50 +01:00
Alplune	807b3c59f2	fix: align arrows bound to elements excalidraw#8833 (#8998 )	2025-01-25 17:00:39 +01:00
Alplune	b8da5065fd	fix: update elbow arrow on font size change #8798 (#9002 )	2025-01-25 17:00:26 +01:00
Márk Tolmács	49f1276ef2	fix: Undo for elbow arrows create incorrect routing (#9046 )	2025-01-24 20:18:08 +01:00
Ashwin Temkar	8f20b29b73	fix: #8575 , Flowchart clones the current arrowhead (#8581 ) * fix: #8575, Flowchart clones the current arrowhead * fix: #8575, changed stroke color, style and width to startBindingElement	2025-01-24 16:50:07 +01:00
David Luzar	f87c2cde09	feat: allow installing libs from excal github (#9041 )	2025-01-23 16:50:47 +01:00
Ryan Di	0bf234fcc9	fix: adding partial group to frame (#9014 ) * prevent new frame from including partial groups * separate wrapped partial group	2025-01-23 07:26:12 +08:00
Ryan Di	dd1b45a25a	perf: reduce unnecessary frame clippings (#8980 ) * reduce unnecessary frame clippings * further optim	2025-01-23 07:25:46 +08:00
David Luzar	ec06fbc1fc	fix: do not refocus element link input on unrelated updates (#9037 )	2025-01-22 21:30:15 +01:00
David Luzar	fa05ae1230	refactor: remove `defaultProps` (#9035 )	2025-01-22 12:43:02 +01:00