Enhanced animations API.

* docker: use slim alpine image to remove bundling deps in Docker image

* pin remaining yml actions

* use lockfile

* remove pulling

.codesandbox/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:24-bullseye
 
 # Vite wants to open the browser using `open`, so we
 # need to install those utils.

.github/workflows/autorelease-excalidraw.yml

@@ -9,11 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           fetch-depth: 2
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
       - name: Set up publish access

.github/workflows/build-docker.yml

@@ -9,5 +9,5 @@ jobs:
   build-docker:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - run: docker build -t excalidraw .

.github/workflows/cancel.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 3
     steps:
-      - uses: styfle/cancel-workflow-action@0.6.0
+      - uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
         with:
           workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
           access_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint.yml

@@ -7,10 +7,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
 

.github/workflows/locales-coverage.yml

@@ -10,12 +10,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
 
@@ -40,7 +40,7 @@ jobs:
           echo ::set-output name=body::$body
 
       - name: Update description with coverage
-        uses: kt3k/update-pr-description@v1.0.1
+        uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
         with:
           pr_body: ${{ steps.getCommentBody.outputs.body }}
           pr_title: "chore: Update translations from Crowdin"

.github/workflows/publish-docker.yml

@@ -11,18 +11,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
         with:
           context: .
           push: true

.github/workflows/semantic-pr-title.yml

@@ -6,11 +6,97 @@ on:
       - opened
       - edited
       - synchronize
+      - labeled
+      - unlabeled
 
 jobs:
   semantic:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
+        with:
+          requireScope: true
+          scopes: |
+            app
+            editor
+            packages/excalidraw
+            packages/utils
+            docker
+            repo
+          ignoreLabels: |
+            skip-semantic-title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  label-scope:
+    needs: semantic
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Label scoped PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          REPOSITORY: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+
+          scope_labels=(s-app s-editor s-package)
+
+          readarray -t desired_labels < <(
+            node <<'NODE'
+          const title = process.env.PR_TITLE;
+          const match = title.match(/^[a-z]+(?:\(([^)]+)\))?!?:/i);
+          const scopes = match?.[1]?.split(",").map((scope) => scope.trim()) ?? [];
+          const labels = new Set();
+
+          for (const scope of scopes) {
+            if (scope === "app") {
+              labels.add("s-app");
+            } else if (scope === "editor") {
+              labels.add("s-editor");
+            } else if (scope.startsWith("packages/")) {
+              labels.add("s-package");
+            }
+          }
+
+          process.stdout.write([...labels].join("\n"));
+          NODE
+          )
+
+          should_apply_label() {
+            local label="$1"
+
+            for desired_label in "${desired_labels[@]}"; do
+              if [[ "$desired_label" == "$label" ]]; then
+                return 0
+              fi
+            done
+
+            return 1
+          }
+
+          for label in "${scope_labels[@]}"; do
+            if ! should_apply_label "$label"; then
+              gh api \
+                --method DELETE \
+                "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels/${label}" \
+                --silent 2>/dev/null || true
+            fi
+          done
+
+          for label in "${desired_labels[@]}"; do
+            if ! gh api \
+              --method POST \
+              "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels" \
+              --field "labels[]=${label}" \
+              --silent; then
+              echo "::warning::Could not apply ${label}. The workflow token likely does not have issues:write permission for this PR."
+            fi
+          done

.github/workflows/sentry-production.yml

@@ -9,9 +9,9 @@ jobs:
   sentry:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
       - name: Install and build

.github/workflows/size-limit.yml

@@ -10,9 +10,9 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
       - name: Install in packages/excalidraw
@@ -20,7 +20,7 @@ jobs:
         working-directory: packages/excalidraw
         env:
           CI: true
-      - uses: andresz1/size-limit-action@v1
+      - uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           build_script: build:esm

.github/workflows/test-coverage-pr.yml

@@ -10,9 +10,9 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: "Install Node"
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: "20.x"
       - name: "Install Deps"
@@ -21,6 +21,6 @@ jobs:
         run: yarn test:coverage
       - name: "Report Coverage"
         if: always() # Also generate the report if tests are failing
-        uses: davelosert/vitest-coverage-report-action@v2
+        uses: davelosert/vitest-coverage-report-action@2500dafcee7dd64f85ab689c0b83798a8359770e # v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -8,9 +8,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 20.x
       - name: Install and test

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM --platform=${BUILDPLATFORM} node:24@sha256:8530f76a96d88820d288761f022e318970dda93d01536919fbc16076b7983e63 AS build
 
 WORKDIR /opt/node_app
 
@@ -7,13 +7,13 @@ COPY . .
 # do not ignore optional dependencies:
 # Error: Cannot find module @rollup/rollup-linux-x64-gnu
 RUN --mount=type=cache,target=/root/.cache/yarn \
-    npm_config_target_arch=${TARGETARCH} yarn --network-timeout 600000
+    npm_config_target_arch=${TARGETARCH} yarn --frozen-lockfile --network-timeout 600000
 
 ARG NODE_ENV=production
 
 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
 
-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:stable-alpine-slim@sha256:2c605dbeab79a6b2a63340474fe58119d0ef95bdc4b1f41df0aa689659b3d13b
 
 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 

README.md

@@ -29,7 +29,7 @@
   <a href="https://docs.excalidraw.com/docs/introduction/contributing">
     <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
   <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
   <a href="https://deepwiki.com/excalidraw/excalidraw">
     <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
   <a href="https://twitter.com/excalidraw">

dev-docs/docusaurus.config.js

@@ -97,8 +97,8 @@ const config = {
                 href: "https://discord.gg/UexuTaE",
               },
               {
-                label: "Twitter",
+                label: "𝕏",
-                href: "https://twitter.com/excalidraw",
+                href: "https://x.com/excalidraw",
               },
               {
                 label: "Linkedin",

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
 
@@ -13,6 +14,7 @@ const ExcalidrawWrapper: React.FC = () => {
         appTitle={"Excalidraw with Nextjs Example"}
         useCustom={(api: any, args?: any[]) => {}}
         excalidrawLib={excalidrawLib}
+        showFadeDemo={true}
       >
         <Excalidraw />
       </App>

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -70,6 +70,7 @@ export interface AppProps {
   customArgs?: any[];
   children: React.ReactNode;
   excalidrawLib: typeof TExcalidraw;
+  showFadeDemo?: boolean;
 }
 
 export default function ExampleApp({
@@ -78,6 +79,7 @@ export default function ExampleApp({
   customArgs,
   children,
   excalidrawLib,
+  showFadeDemo = false,
 }: AppProps) {
   const {
     exportToCanvas,
@@ -116,6 +118,19 @@ export default function ExampleApp({
     {},
   );
   const [comment, setComment] = useState<Comment | null>(null);
+  const [hideAllForFadeDemo, setHideAllForFadeDemo] = useState(false);
+  const [fadeDemoNextIndex, setFadeDemoNextIndex] = useState(0);
+  const [fadeDemoElementIds, setFadeDemoElementIds] = useState<string[]>([]);
+  const [demoAnimationType, setDemoAnimationType] = useState<"fade" | "fly">(
+    "fade",
+  );
+  const [demoAnimationDuration, setDemoAnimationDuration] = useState(500);
+  const [demoFlyFrom, setDemoFlyFrom] = useState<
+    "left" | "right" | "top" | "bottom"
+  >("left");
+  const [demoAnimationEasing, setDemoAnimationEasing] = useState<
+    "linear" | "easeOut" | "easeInOut"
+  >("easeOut");
 
   const initialStatePromiseRef = useRef<{
     promise: ResolvablePromise<ExcalidrawInitialDataState | null>;
@@ -178,7 +193,8 @@ export default function ExampleApp({
     const newElement = cloneElement(
       Excalidraw,
       {
-        excalidrawAPI: (api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api),
+        onExcalidrawAPI: (api: ExcalidrawImperativeAPI | null) =>
+          setExcalidrawAPI(api),
         initialData: initialStatePromiseRef.current.promise,
         onChange: (
           elements: NonDeletedExcalidrawElement[],
@@ -208,6 +224,10 @@ export default function ExampleApp({
         onPointerDown,
         onScrollChange: rerenderCommentIcons,
         validateEmbeddable: true,
+        resolveRenderOpacity: hideAllForFadeDemo
+          ? (element: NonDeletedExcalidrawElement) =>
+              fadeDemoElementIds.includes(element.id) ? 0 : undefined
+          : undefined,
       },
       <>
         {excalidrawAPI && (
@@ -664,6 +684,229 @@ export default function ExampleApp({
           >
             Reset Scene
           </button>
+          {showFadeDemo && (
+            <>
+              <label>
+                Animation type
+                <select
+                  value={demoAnimationType}
+                  onChange={(event) =>
+                    setDemoAnimationType(
+                      event.target.value as "fade" | "fly",
+                    )
+                  }
+                >
+                  <option value="fade">fade</option>
+                  <option value="fly">fly</option>
+                </select>
+              </label>
+              <label>
+                Duration
+                <input
+                  type="number"
+                  value={demoAnimationDuration}
+                  onChange={(event) =>
+                    setDemoAnimationDuration(Number(event.target.value) || 0)
+                  }
+                />
+              </label>
+              <label>
+                Easing
+                <select
+                  value={demoAnimationEasing}
+                  onChange={(event) =>
+                    setDemoAnimationEasing(
+                      event.target.value as "linear" | "easeOut" | "easeInOut",
+                    )
+                  }
+                >
+                  <option value="linear">linear</option>
+                  <option value="easeOut">easeOut</option>
+                  <option value="easeInOut">easeInOut</option>
+                </select>
+              </label>
+              {demoAnimationType === "fly" && (
+                <label>
+                  Fly from
+                  <select
+                    value={demoFlyFrom}
+                    onChange={(event) =>
+                      setDemoFlyFrom(
+                        event.target.value as
+                          | "left"
+                          | "right"
+                          | "top"
+                          | "bottom",
+                      )
+                    }
+                  >
+                    <option value="left">left</option>
+                    <option value="right">right</option>
+                    <option value="top">top</option>
+                    <option value="bottom">bottom</option>
+                  </select>
+                </label>
+              )}
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI) {
+                    return;
+                  }
+
+                  setFadeDemoElementIds(
+                    excalidrawAPI
+                      .getSceneElements()
+                      .map((element) => element.id),
+                  );
+                  excalidrawAPI.clearElementAnimationOverrides();
+                  setHideAllForFadeDemo(true);
+                  setFadeDemoNextIndex(0);
+                }}
+              >
+                Hide every element
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  const nextIndex =
+                    fadeDemoNextIndex >= elements.length
+                      ? 0
+                      : fadeDemoNextIndex;
+
+                  if (nextIndex === 0) {
+                    excalidrawAPI.clearElementAnimationOverrides();
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[nextIndex].id],
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[nextIndex].id],
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(nextIndex + 1);
+                }}
+              >
+                Animate in next element
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements,
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      stagger: 120,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements,
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      stagger: 120,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(elements.length);
+                }}
+              >
+                Animate in all
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  const prevIndex = Math.min(
+                    fadeDemoNextIndex - 1,
+                    elements.length - 1,
+                  );
+
+                  if (prevIndex < 0) {
+                    return;
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[prevIndex].id],
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      phase: "out",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[prevIndex].id],
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      phase: "out",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(prevIndex);
+                }}
+              >
+                Animate out prev element
+              </button>
+            </>
+          )}
           <button
             onClick={() => {
               const libraryItems: LibraryItems = [

examples/with-script-in-browser/initialData.tsx

@@ -2,6 +2,28 @@ import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/t
 import type { FileId } from "@excalidraw/excalidraw/element/types";
 
 const elements: ExcalidrawElementSkeleton[] = [
+  // {
+  //   type: "arrow",
+  //   x: 100,
+  //   y: 500,
+  // },
+  // {
+  //   type: "arrow",
+  //   x: 250,
+  //   y: 250,
+  //   label: {
+  //     text: "HELLO WORLD!!",
+  //   },
+  //   start: {
+  //     type: "rectangle",
+  //     // x: -100,
+  //   },
+  //   end: {
+  //     type: "ellipse",
+  //     // x: 300,
+  //   },
+  // },
+
   {
     type: "rectangle",
     x: 10,
@@ -22,14 +44,14 @@ const elements: ExcalidrawElementSkeleton[] = [
     },
     id: "2",
   },
-  {
+  // {
-    type: "arrow",
+  //   type: "arrow",
-    x: 100,
+  //   x: 100,
-    y: 200,
+  //   y: 200,
-    label: { text: "HELLO WORLD!!" },
+  //   label: { text: "HELLO WORLD!!" },
-    start: { type: "rectangle" },
+  //   start: { type: "rectangle" },
-    end: { type: "ellipse" },
+  //   end: { type: "ellipse" },
-  },
+  // },
   {
     type: "image",
     x: 606.1042326312408,
@@ -38,11 +60,11 @@ const elements: ExcalidrawElementSkeleton[] = [
     height: 230,
     fileId: "rocket" as FileId,
   },
-  {
+  // {
-    type: "frame",
+  //   type: "frame",
-    children: ["1", "2"],
+  //   children: ["1", "2"],
-    name: "My frame",
+  //   name: "My frame",
-  },
+  // },
 ];
 export default {
   elements,

excalidraw-app/components/AI.tsx

@@ -25,19 +25,15 @@ export const AIComponents = ({
           const appState = excalidrawAPI.getAppState();
 
           const blob = await exportToBlob({
-            data: {
+            elements: children,
-              elements: children,
+            appState: {
-              appState: {
+              ...appState,
-                ...appState,
+              exportBackground: true,
-                exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
-                viewBackgroundColor: appState.viewBackgroundColor,
-              },
-              files: excalidrawAPI.getFiles(),
-            },
-            config: {
-              exportingFrame: frame,
-              mimeType: MIME_TYPES.jpg,
             },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
           });
 
           const dataURL = await getDataURL(blob);

excalidraw-app/data/LocalData.ts

@@ -26,7 +26,6 @@ import {
   get,
 } from "idb-keyval";
 
-import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
 import { getNonDeletedElements } from "@excalidraw/element";
 
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
@@ -39,6 +38,7 @@ import type {
 } from "@excalidraw/excalidraw/types";
 import type { MaybePromise } from "@excalidraw/common/utility-types";
 
+import { appJotaiStore, atom } from "../app-jotai";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 
 import { FileManager } from "./FileManager";

excalidraw-app/vite.config.mts

@@ -75,6 +75,13 @@ export default defineConfig(({ mode }) => {
           find: /^@excalidraw\/utils\/(.*?)/,
           replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
         },
+        {
+          find: /^@excalidraw\/fractional-indexing$/,
+          replacement: path.resolve(
+            __dirname,
+            "../packages/fractional-indexing/src/index.ts",
+          ),
+        },
       ],
     },
     build: {

package.json

@@ -56,7 +56,8 @@
     "build:element": "yarn --cwd ./packages/element build:esm",
     "build:excalidraw": "yarn --cwd ./packages/excalidraw build:esm",
     "build:math": "yarn --cwd ./packages/math build:esm",
-    "build:packages": "yarn build:common && yarn build:math && yarn build:element && yarn build:excalidraw",
+    "build:fractional-indexing": "yarn --cwd ./packages/fractional-indexing build:esm",
+    "build:packages": "yarn build:common && yarn build:fractional-indexing && yarn build:math && yarn build:element && yarn build:excalidraw",
     "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
     "build:preview": "yarn --cwd ./excalidraw-app build:preview",

packages/common/src/constants.ts

@@ -337,9 +337,10 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 
-export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
+export const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"] = {
-
+  maxWidthOrHeight: 1440,
-export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+  maxFileSizeBytes: 4 * 1024 * 1024,
+};
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>

packages/element/package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@excalidraw/common": "0.18.0",
-    "@excalidraw/math": "0.18.0"
+    "@excalidraw/math": "0.18.0",
+    "@excalidraw/fractional-indexing": "3.3.0"
   }
 }

packages/element/src/Scene.ts

@@ -338,29 +338,20 @@ export class Scene {
     this.callbacks.clear();
   }
 
-  insertElementAtIndex(element: ExcalidrawElement, index: number) {
+  /** low-level - generally use app.insertNewElements() */
-    if (!Number.isFinite(index) || index < 0) {
+  insertElementsAtIndex(
-      throw new Error(
+    elements: ExcalidrawElement[],
-        "insertElementAtIndex can only be called with index >= 0",
+    /** null indicates end of the array */
-      );
+    index: number | null,
-    }
+  ) {
-
-    const nextElements = [
-      ...this.elements.slice(0, index),
-      element,
-      ...this.elements.slice(index),
-    ];
-
-    syncMovedIndices(nextElements, arrayToMap([element]));
-
-    this.replaceAllElements(nextElements);
-  }
-
-  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
     if (!elements.length) {
       return;
     }
 
+    if (index === null) {
+      index = this.elements.length;
+    }
+
     if (!Number.isFinite(index) || index < 0) {
       throw new Error(
         "insertElementAtIndex can only be called with index >= 0",
@@ -378,24 +369,9 @@ export class Scene {
     this.replaceAllElements(nextElements);
   }
 
+  /** low-level - generally use app.insertNewElement() */
   insertElement = (element: ExcalidrawElement) => {
-    const index = element.frameId
+    this.insertElementsAtIndex([element], null);
-      ? this.getElementIndex(element.frameId)
-      : this.elements.length;
-
-    this.insertElementAtIndex(element, index);
-  };
-
-  insertElements = (elements: ExcalidrawElement[]) => {
-    if (!elements.length) {
-      return;
-    }
-
-    const index = elements[0]?.frameId
-      ? this.getElementIndex(elements[0].frameId)
-      : this.elements.length;
-
-    this.insertElementsAtIndex(elements, index);
   };
 
   getElementIndex(elementId: string) {

packages/element/src/binding.ts

@@ -734,12 +734,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     });
 
   // Handle outside-outside binding to the same element
-  if (otherBinding && otherBinding.elementId === hit?.id) {
+  if (
-    invariant(
+    otherBinding &&
-      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
+    otherBinding.elementId === hit?.id &&
-      "appState.selectedLinearElement.initialState.origin must be defined for new arrows",
+    (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)
-    );
+  ) {
-
     return {
       start: {
         mode: "inside",
@@ -1943,9 +1942,9 @@ export const calculateFixedPointForElbowArrowBinding = (
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        hoveredElement.width,
+        Math.max(hoveredElement.width, PRECISION),
       (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        hoveredElement.height,
+        Math.max(hoveredElement.height, PRECISION),
     ]),
   };
 };
@@ -1976,9 +1975,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
 
   // Calculate the ratio relative to the element's bounds
   const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
+    (nonRotatedPoint[0] - hoveredElement.x) /
+    Math.max(hoveredElement.width, PRECISION);
   const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+    (nonRotatedPoint[1] - hoveredElement.y) /
+    Math.max(hoveredElement.height, PRECISION);
 
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),

packages/element/src/bounds.ts

@@ -680,8 +680,9 @@ export const getMinMaxXYFromCurvePathOps = (
   return [minX, minY, maxX, maxY];
 };
 
-export const getBoundsFromPoints = (
+export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
-  points: ExcalidrawFreeDrawElement["points"],
+  points: readonly P[],
+  padding: number = 0,
 ): Bounds => {
   let minX = Infinity;
   let minY = Infinity;
@@ -695,7 +696,7 @@ export const getBoundsFromPoints = (
     maxY = Math.max(maxY, y);
   }
 
-  return [minX, minY, maxX, maxY];
+  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
 };
 
 const getFreeDrawElementAbsoluteCoords = (
@@ -1261,6 +1262,17 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
 ): boolean =>
   p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
 
+// TODO make pointInsideBounds inclusive and remove this function once we
+// test nothing is breaking
+export const pointInsideBoundsInclusive = <P extends GlobalPoint | LocalPoint>(
+  p: P,
+  bounds: Bounds,
+): boolean =>
+  p[0] >= bounds[0] &&
+  p[0] <= bounds[2] &&
+  p[1] >= bounds[1] &&
+  p[1] <= bounds[3];
+
 export const doBoundsIntersect = (
   bounds1: Bounds | null,
   bounds2: Bounds | null,
@@ -1275,13 +1287,21 @@ export const doBoundsIntersect = (
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
 
+export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
+  [
+    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[1]),
+    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[3]),
+    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[1]),
+    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[3]),
+  ].every((point) => pointInsideBoundsInclusive(point, outerBounds));
+
 export const elementCenterPoint = (
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
   xOffset: number = 0,
   yOffset: number = 0,
 ) => {
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
 

packages/element/src/collision.ts

@@ -61,6 +61,8 @@ import { distanceToElement } from "./distance";
 
 import { getBindingGap } from "./binding";
 
+import { hasBackground } from "./comparisons";
+
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -83,7 +85,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
   }
 
   const isDraggableFromInside =
-    !isTransparent(element.backgroundColor) ||
+    (hasBackground(element.type) && !isTransparent(element.backgroundColor)) ||
     hasBoundTextElement(element) ||
     isIframeLikeElement(element) ||
     isTextElement(element);
@@ -154,14 +156,11 @@ export const hitElementItself = ({
 
   // Hit test against the extended, rotated bounding box of the element first
   const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointWithinBounds(
+  const hitBounds = isPointInRotatedBounds(
-    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
+    point,
-    pointRotateRads(
+    bounds,
-      point,
+    element.angle,
-      getCenterForBounds(bounds),
+    threshold,
-      -element.angle as Radians,
-    ),
-    pointFrom(bounds[2] + threshold, bounds[3] + threshold),
   );
 
   // PERF: Bail out early if the point is not even in the
@@ -192,18 +191,32 @@ export const hitElementItself = ({
   return result;
 };
 
+const isPointInRotatedBounds = (
+  point: GlobalPoint,
+  bounds: Bounds,
+  angle: Radians,
+  tolerance = 0,
+) => {
+  const adjustedPoint =
+    angle === 0
+      ? point
+      : pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians);
+
+  return isPointWithinBounds(
+    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
+    adjustedPoint,
+    pointFrom(bounds[2] + tolerance, bounds[3] + tolerance),
+  );
+};
+
 export const hitElementBoundingBox = (
   point: GlobalPoint,
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
   tolerance = 0,
 ) => {
-  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+  const bounds = getElementBounds(element, elementsMap, true);
-  x1 -= tolerance;
+  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
-  y1 -= tolerance;
-  x2 += tolerance;
-  y2 += tolerance;
-  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
 };
 
 export const hitElementBoundingBoxOnly = (
@@ -313,7 +326,10 @@ export const getAllHoveredElementAtPoint = (
     ) {
       candidateElements.push(element);
 
-      if (!isTransparent(element.backgroundColor)) {
+      if (
+        hasBackground(element.type) &&
+        !isTransparent(element.backgroundColor)
+      ) {
         break;
       }
     }
@@ -465,7 +481,12 @@ export const intersectElementWithLineSegment = (
     case "line":
     case "freedraw":
     case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line,
+        elementsMap,
+        onlyFirst,
+      );
   }
 };
 
@@ -532,11 +553,15 @@ const lineIntersections = (
 const intersectLinearOrFreeDrawWithLineSegment = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
   segment: LineSegment<GlobalPoint>,
+  elementsMap: ElementsMap,
   onlyFirst = false,
 ): GlobalPoint[] => {
   // NOTE: This is the only one which return the decomposed elements
   // rotated! This is due to taking advantage of roughjs definitions.
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
   const intersections: GlobalPoint[] = [];
 
   for (const l of lines) {
@@ -564,7 +589,9 @@ const intersectLinearOrFreeDrawWithLineSegment = (
       continue;
     }
 
-    const hits = curveIntersectLineSegment(c, segment);
+    const hits = curveIntersectLineSegment(c, segment, {
+      iterLimit: 10,
+    });
 
     if (hits.length > 0) {
       intersections.push(...hits);

packages/element/src/distance.ts

@@ -48,7 +48,7 @@ export const distanceToElement = (
     case "line":
     case "arrow":
     case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
   }
 };
 
@@ -133,9 +133,13 @@ const distanceToEllipseElement = (
 
 const distanceToLinearOrFreeDraElement = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
   p: GlobalPoint,
 ) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap,
+  );
   return Math.min(
     ...lines.map((s) => distanceToLineSegment(p, s)),
     ...curves.map((a) => curvePointDistance(a, p)),

packages/element/src/duplicate.ts

@@ -111,6 +111,9 @@ export const duplicateElements = (
          * user interaction.
          */
         type: "everything";
+        // TODO remove/review this once we add frame children order migration
+        // and invariant checks
+        preserveFrameChildrenOrder?: boolean;
       }
     | {
         /**
@@ -170,6 +173,8 @@ export const duplicateElements = (
     opts.type === "in-place"
       ? opts.idsOfElementsToDuplicate
       : new Map(elements.map((el) => [el.id, el]));
+  const preserveFrameChildrenOrder =
+    opts.type === "everything" && opts.preserveFrameChildrenOrder;
 
   // For sanity
   if (opts.type === "in-place") {
@@ -250,6 +255,9 @@ export const duplicateElements = (
     elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
   };
 
+  // main
+  // ---------------------------------------------------------------------------
+
   const frameIdsToDuplicate = new Set(
     elements
       .filter(
@@ -274,7 +282,7 @@ export const duplicateElements = (
     if (groupId) {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
         (element) =>
-          isFrameLikeElement(element)
+          isFrameLikeElement(element) && !preserveFrameChildrenOrder
             ? [...getFrameChildren(elements, element.id), element]
             : [element],
       );
@@ -290,13 +298,25 @@ export const duplicateElements = (
     // frame duplication
     // -------------------------------------------------------------------------
 
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+    if (
+      !preserveFrameChildrenOrder &&
+      element.frameId &&
+      frameIdsToDuplicate.has(element.frameId)
+    ) {
       continue;
     }
 
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
 
+      if (preserveFrameChildrenOrder) {
+        insertBeforeOrAfterIndex(
+          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element),
+        );
+        continue;
+      }
+
       const frameChildren = getFrameChildren(elements, frameId);
 
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {

packages/element/src/elbowArrow.ts

@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
     offsetY < -MAX_POS ||
     offsetY > MAX_POS ||
     offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetY + points[points.length - 1][0] > MAX_POS ||
+    offsetX + points[points.length - 1][0] > MAX_POS ||
-    offsetX + points[points.length - 1][1] < -MAX_POS ||
+    offsetY + points[points.length - 1][1] < -MAX_POS ||
     offsetY + points[points.length - 1][1] > MAX_POS
   ) {
     console.error(

packages/element/src/fractionalIndex.ts

@@ -1,7 +1,10 @@
-import { generateNKeysBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
+import {
+  validateOrderKey,
+  generateNKeysBetween,
+} from "@excalidraw/fractional-indexing";
+
 import { mutateElement, newElementWith } from "./mutateElement";
 import { getBoundTextElement } from "./textElement";
 import { hasBoundTextElement } from "./typeChecks";
@@ -382,6 +385,13 @@ const isValidFractionalIndex = (
     return false;
   }
 
+  try {
+    // Format validation
+    validateOrderKey(index);
+  } catch {
+    return false;
+  }
+
   if (predecessor && successor) {
     return predecessor < index && index < successor;
   }

packages/element/src/frame.ts

@@ -1,7 +1,6 @@
 import { arrayToMap } from "@excalidraw/common";
 import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
 import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
-import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
 
 import type {
   AppClassProperties,
@@ -18,9 +17,13 @@ import {
   getElementLineSegments,
   getCommonBounds,
   getElementAbsoluteCoords,
+  doBoundsIntersect,
+  getElementBounds,
+  boundsContainBounds,
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
+import { syncMovedIndices } from "./fractionalIndex";
 import {
   isFrameElement,
   isFrameLikeElement,
@@ -100,8 +103,9 @@ export const isElementContainingFrame = (
   frame: ExcalidrawFrameLikeElement,
   elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
+  return boundsContainBounds(
-    (e) => e.id === frame.id,
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap),
   );
 };
 
@@ -488,10 +492,44 @@ export const filterElementsEligibleAsFrameChildren = (
   return eligibleElements;
 };
 
+export const getCommonFrameId = (elements: readonly ExcalidrawElement[]) => {
+  let commonFrameId: ExcalidrawElement["frameId"] | undefined;
+
+  for (const element of elements) {
+    if (isFrameLikeElement(element) || !element.frameId) {
+      return null;
+    }
+
+    if (commonFrameId === undefined) {
+      commonFrameId = element.frameId;
+    } else if (commonFrameId !== element.frameId) {
+      return null;
+    }
+  }
+
+  return commonFrameId ?? null;
+};
+
+export const getFrameChildrenInsertionIndex = (
+  elements: readonly ExcalidrawElement[],
+  frameId: ExcalidrawFrameLikeElement["id"],
+): number | null => {
+  for (let index = elements.length - 1; index >= 0; index--) {
+    const element = elements[index];
+
+    if (element.id === frameId) {
+      return index;
+    } else if (element.frameId === frameId) {
+      return index + 1;
+    }
+  }
+
+  return null;
+};
+
 /**
- * Retains (or repairs for target frame) the ordering invriant where children
+ * Adds elements and their bound elements to frame. Reorders added elements to
- * elements come right before the parent frame:
+ * be just below frame, or just above its highest child (whichever is higher).
- * [el, el, child, child, frame, el]
  *
  * @returns mutated allElements (same data structure)
  */
@@ -499,19 +537,11 @@ 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>();
+  const commonFrameId = getCommonFrameId(elementsToAdd);
-  for (const element of allElements.values()) {
-    if (element.frameId === frame.id) {
-      currTargetFrameChildrenMap.set(element.id, true);
-    }
-  }
 
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
+  const finalElementsToAdd = new Set<ExcalidrawElement>();
-
-  const finalElementsToAdd: ExcalidrawElement[] = [];
 
   const otherFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
 
@@ -522,7 +552,8 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   }
 
   // - add bound text elements if not already in the array
-  // - filter out elements that are already in the frame
+  // - keep elements already in the frame so mixed selections can be reordered
+  //   together
   for (const element of omitGroupsContainingFrameLikes(
     allElements,
     elementsToAdd,
@@ -535,38 +566,68 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
       continue;
     }
 
-    // if the element is already in another frame (which is also in elementsToAdd),
+    if (element.frameId && element.frameId !== frame.id) {
-    // 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.add(element);
-      finalElementsToAdd.push(element);
-    }
 
     const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (
+    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
-      boundTextElement &&
+      finalElementsToAdd.add(boundTextElement);
-      !suppliedElementsToAddSet.has(boundTextElement.id) &&
-      !currTargetFrameChildrenMap.has(boundTextElement.id)
-    ) {
-      finalElementsToAdd.push(boundTextElement);
     }
   }
 
   for (const element of finalElementsToAdd) {
-    mutateElement(element, elementsMap, {
+    // we don't always need to update the element if it's already in the frame,
-      frameId: frame.id,
+    // but we still need to accumulate in finalElementsToAdd so we potentially
-    });
+    // reorder them if added together
+    if (element.frameId !== frame.id) {
+      mutateElement(element, elementsMap, {
+        frameId: frame.id,
+      });
+    }
   }
 
-  return allElements;
+  // (re)order elements to be just below the frame,
+  // or just above the highest child if that is higher
+  // (latter case is denormalized order until we migrate)
+  // ---------------------------------------------------------------------------
+
+  if (
+    !finalElementsToAdd.size ||
+    // if all elements to add already belong to the frame, then we don't want to
+    // reorder (case: we're dragging element children within the frame)
+    commonFrameId === frame.id
+  ) {
+    return allElements;
+  }
+
+  const otherElements = Array.from(allElements.values()).filter(
+    (element) => !finalElementsToAdd.has(element),
+  );
+  const insertionIndex = getFrameChildrenInsertionIndex(
+    otherElements,
+    frame.id,
+  );
+
+  if (insertionIndex === null) {
+    return allElements;
+  }
+
+  const reorderedElements = [
+    ...otherElements.slice(0, insertionIndex),
+    ...finalElementsToAdd,
+    ...otherElements.slice(insertionIndex),
+  ];
+
+  syncMovedIndices(reorderedElements, arrayToMap([...finalElementsToAdd]));
+
+  return (
+    Array.isArray(allElements)
+      ? reorderedElements
+      : new Map(reorderedElements.map((element) => [element.id, element]))
+  ) as T;
 };
 
 export const removeElementsFromFrame = (
@@ -620,13 +681,11 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
   allElements: readonly T[],
   nextElementsInFrame: ExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  app: AppClassProperties,
 ): T[] => {
   return addElementsToFrame(
     removeAllElementsFromFrame(allElements, frame),
     nextElementsInFrame,
     frame,
-    app.state,
   ).slice();
 };
 
@@ -920,16 +979,17 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
 export const getElementsOverlappingFrame = (
   elements: readonly ExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
-  return (
+  return elements.filter(
-    elementsOverlappingBBox({
+    (el) =>
-      elements,
+      // exclude elements which are overlapping, but are in a different frame,
-      bounds: frame,
-      type: "overlap",
-    })
-      // removes elements who are overlapping, but are in a different frame,
       // and thus invisible in target frame
-      .filter((el) => !el.frameId || el.frameId === frame.id)
+      (!el.frameId || el.frameId === frame.id) &&
+      doBoundsIntersect(
+        getElementBounds(el, elementsMap),
+        getElementBounds(frame, elementsMap),
+      ),
   );
 };
 

packages/element/src/linearElementEditor.ts

@@ -476,16 +476,22 @@ export class LinearElementEditor {
       });
     }
 
-    invariant(
+    if (
-      lastClickedPoint > -1 &&
+      lastClickedPoint < 0 ||
-        selectedPointsIndices.includes(lastClickedPoint) &&
+      !selectedPointsIndices.includes(lastClickedPoint) ||
-        element.points[lastClickedPoint],
+      !element.points[lastClickedPoint]
-      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+    ) {
-        selectedPointsIndices,
+      console.error(
-      )}) points(0..${
+        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-        element.points.length - 1
+          selectedPointsIndices,
-      }) lastClickedPoint(${lastClickedPoint})`,
+        )}) points(0..${
-    );
+          element.points.length - 1
+        }) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`,
+      );
+
+      // Fall back to the actual last point as a last resort.
+      lastClickedPoint = element.points.length - 1;
+    }
 
     // point that's being dragged (out of all selected points)
     const draggingPoint = element.points[lastClickedPoint];
@@ -794,6 +800,7 @@ export class LinearElementEditor {
           element.points[index + 1],
           index,
           appState.zoom,
+          elementsMap,
         )
       ) {
         midpoints.push(null);
@@ -803,6 +810,7 @@ export class LinearElementEditor {
       const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
         element,
         index + 1,
+        elementsMap,
       );
       midpoints.push(segmentMidPoint);
       index++;
@@ -890,6 +898,7 @@ export class LinearElementEditor {
     endPoint: P,
     index: number,
     zoom: Zoom,
+    elementsMap: ElementsMap,
   ) {
     if (isElbowArrow(element)) {
       if (index >= 0 && index < element.points.length) {
@@ -904,7 +913,10 @@ export class LinearElementEditor {
 
     let distance = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap,
+      );
 
       invariant(
         lines.length === 0 && curves.length > 0,
@@ -924,6 +936,7 @@ export class LinearElementEditor {
   static getSegmentMidPoint(
     element: NonDeleted<ExcalidrawLinearElement>,
     index: number,
+    elementsMap: ElementsMap,
   ): GlobalPoint {
     if (isElbowArrow(element)) {
       invariant(
@@ -936,7 +949,10 @@ export class LinearElementEditor {
       return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
     }
 
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap,
+    );
 
     invariant(
       (lines.length === 0 && curves.length > 0) ||
@@ -1851,6 +1867,7 @@ export class LinearElementEditor {
       const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
         element,
         index + 1,
+        elementsMap,
       );
 
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -2122,13 +2139,13 @@ const pointDraggingUpdates = (
 } => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
+      // NOTE: Avoid stale point index issue potentially caused by elbow
+      // arrows unpredictably changing the number of points during dragging
+      const point = element.points[pointIndex] ?? element.points.at(-1);
       return [
         pointIndex,
         {
-          point: pointFrom<LocalPoint>(
+          point: pointFrom<LocalPoint>(point[0] + deltaX, point[1] + deltaY),
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY,
-          ),
           isDragging: true,
         },
       ];
@@ -2400,7 +2417,7 @@ const pointDraggingUpdates = (
     ? nextArrow.points[0]
     : endBindable
     ? updateBoundPoint(
-        element,
+        nextArrow,
         "endBinding",
         nextArrow.endBinding,
         endBindable,
@@ -2431,7 +2448,7 @@ const pointDraggingUpdates = (
       ? endLocalPoint
       : startBindable
       ? updateBoundPoint(
-          element,
+          nextArrow,
           "startBinding",
           nextArrow.startBinding,
           startBindable,

packages/element/src/renderElement.ts

@@ -1,6 +1,7 @@
 import rough from "roughjs/bin/rough";
 
 import {
+  clamp,
   type GlobalPoint,
   isRightAngleRads,
   lineSegment,
@@ -105,8 +106,62 @@ const getCanvasPadding = (element: ExcalidrawElement) => {
   }
 };
 
+export const resolveRenderOpacity = (
+  element: ExcalidrawElement,
+  renderConfig: Pick<
+    StaticCanvasRenderConfig,
+    "elementOpacityOverrides" | "resolveRenderOpacity"
+  >,
+) => {
+  const override = renderConfig.elementOpacityOverrides?.get(element.id);
+
+  if (override !== undefined) {
+    return clamp(override, 0, 100);
+  }
+
+  const resolvedOpacity = renderConfig.resolveRenderOpacity?.(
+    element as NonDeletedExcalidrawElement,
+  );
+
+  if (resolvedOpacity !== undefined) {
+    return clamp(resolvedOpacity, 0, 100);
+  }
+
+  return element.opacity;
+};
+
+export const resolveRenderPositionOffset = (
+  element: ExcalidrawElement,
+  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
+) => {
+  return renderConfig.elementPositionOverrides?.get(element.id) ?? { x: 0, y: 0 };
+};
+
+export const getRenderElementWithPositionOverride = <
+  TElement extends NonDeletedExcalidrawElement,
+>(
+  element: TElement,
+  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
+): TElement => {
+  const positionOffset = resolveRenderPositionOffset(element, renderConfig);
+
+  if (positionOffset.x === 0 && positionOffset.y === 0) {
+    return element;
+  }
+
+  return {
+    ...element,
+    x: element.x + positionOffset.x,
+    y: element.y + positionOffset.y,
+  } as TElement;
+};
+
 export const getRenderOpacity = (
   element: ExcalidrawElement,
+  renderConfig: Pick<
+    StaticCanvasRenderConfig,
+    "elementOpacityOverrides" | "resolveRenderOpacity"
+  >,
   containingFrame: ExcalidrawFrameLikeElement | null,
   elementsPendingErasure: ElementsPendingErasure,
   pendingNodes: Readonly<PendingExcalidrawElements> | null,
@@ -115,7 +170,8 @@ export const getRenderOpacity = (
   // multiplying frame opacity with element opacity to combine them
   // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
   let opacity =
-    (((containingFrame?.opacity ?? 100) * element.opacity) / 10000) *
+    (((containingFrame?.opacity ?? 100) * resolveRenderOpacity(element, renderConfig)) /
+      10000) *
     globalAlpha;
 
   // if pending erasure, multiply again to combine further
@@ -791,8 +847,11 @@ export const renderElement = (
     !appState.selectedElementIds[element.id] &&
     !appState.hoveredElementIds[element.id];
 
+  element = getRenderElementWithPositionOverride(element, renderConfig);
+
   context.globalAlpha = getRenderOpacity(
     element,
+    renderConfig,
     getContainingFrame(element, elementsMap),
     renderConfig.elementsPendingErasure,
     renderConfig.pendingFlowchartNodes,

packages/element/src/selection.ts

@@ -1,16 +1,34 @@
-import { arrayToMap, isShallowEqual } from "@excalidraw/common";
+import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
+import {
+  lineSegment,
+  pointFrom,
+  pointRotateRads,
+  type GlobalPoint,
+} from "@excalidraw/math";
 
 import type {
   AppState,
+  BoxSelectionMode,
   InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";
 
-import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
+import {
+  boundsContainBounds,
+  doBoundsIntersect,
+  elementCenterPoint,
+  getElementAbsoluteCoords,
+  getElementBounds,
+  pointInsideBounds,
+} from "./bounds";
+import { intersectElementWithLineSegment } from "./collision";
 import { isElementInViewport } from "./sizeHelpers";
 import {
+  isArrowElement,
   isBoundToContainer,
   isFrameLikeElement,
+  isFreeDrawElement,
   isLinearElement,
+  isTextElement,
 } from "./typeChecks";
 import {
   elementOverlapsWithFrame,
@@ -20,14 +38,33 @@ import {
 
 import { LinearElementEditor } from "./linearElementEditor";
 import { selectGroupsForSelectedElements } from "./groups";
+import { getBoundTextElement } from "./textElement";
 
 import type {
   ElementsMap,
   ElementsMapOrArray,
   ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
   NonDeletedExcalidrawElement,
 } from "./types";
 
+const shouldIgnoreElementFromSelection = (
+  element: NonDeletedExcalidrawElement,
+) => element.locked || isBoundToContainer(element);
+
+const excludeElementsFromFrames = <T extends ExcalidrawElement>(
+  selectedElements: readonly T[],
+  framesInSelection: Set<ExcalidrawFrameLikeElement["id"]>,
+) => {
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
+
 /**
  * Frames and their containing elements are not to be selected at the same time.
  * Given an array of selected elements, if there are frames and their containing elements
@@ -47,68 +84,286 @@ export const excludeElementsInFramesFromSelection = <
     }
   });
 
-  return selectedElements.filter((element) => {
+  return excludeElementsFromFrames(selectedElements, framesInSelection);
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
-    }
-    return true;
-  });
 };
 
 export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
   elementsMap: ElementsMap,
+  // TODO remove (this flag is effectively unused AFAIK)
   excludeElementsInFrames: boolean = true,
-) => {
+  boxSelectionMode: BoxSelectionMode = "contain",
-  const [selectionX1, selectionY1, selectionX2, selectionY2] =
+): NonDeletedExcalidrawElement[] => {
+  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
     getElementAbsoluteCoords(selection, elementsMap);
+  const selectionX1 = Math.min(selectionStartX, selectionEndX);
+  const selectionY1 = Math.min(selectionStartY, selectionEndY);
+  const selectionX2 = Math.max(selectionStartX, selectionEndX);
+  const selectionY2 = Math.max(selectionStartY, selectionEndY);
+  const selectionBounds = [
+    selectionX1,
+    selectionY1,
+    selectionX2,
+    selectionY2,
+  ] as Bounds;
+  const selectionEdges = [
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX1, selectionY1),
+      pointFrom(selectionX2, selectionY1),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX2, selectionY1),
+      pointFrom(selectionX2, selectionY2),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX2, selectionY2),
+      pointFrom(selectionX1, selectionY2),
+    ),
+    lineSegment<GlobalPoint>(
+      pointFrom(selectionX1, selectionY2),
+      pointFrom(selectionX1, selectionY1),
+    ),
+  ];
 
-  let elementsInSelection = elements.filter((element) => {
+  const framesInSelection = excludeElementsInFrames
-    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
+    ? new Set<NonDeletedExcalidrawElement["id"]>()
-      element,
+    : null;
-      elementsMap,
+  const groups: Record<string, NonDeletedExcalidrawElement[]> = {};
-    );
+  const elementsInSelection: Set<NonDeletedExcalidrawElement> = new Set();
 
-    const containingFrame = getContainingFrame(element, elementsMap);
+  for (const element of elements) {
-    if (containingFrame) {
+    if (shouldIgnoreElementFromSelection(element)) {
-      const [fx1, fy1, fx2, fy2] = getElementBounds(
+      continue;
-        containingFrame,
+    }
+
+    // Track only selectable top-level group members, so ignored elements such
+    // as bound text and locked elements don't affect group selection.
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+
+    const strokeWidth = element.strokeWidth;
+    let labelAABB: Bounds | null = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2,
+    ] as Bounds;
+
+    // Whether the element bounds should include the bound text element bounds
+    const boundTextElement =
+      isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
         elementsMap,
       );
-
+      labelAABB = [
-      elementX1 = Math.max(fx1, elementX1);
+        x,
-      elementY1 = Math.max(fy1, elementY1);
+        y,
-      elementX2 = Math.min(fx2, elementX2);
+        x + boundTextElement.width,
-      elementY2 = Math.min(fy2, elementY2);
+        y + boundTextElement.height,
+      ] as Bounds;
     }
 
-    return (
+    // Clip element bounds by its containing frame (if any), since only the
-      element.locked === false &&
+    // visible (frame-clipped) portion of the element is relevant for selection.
-      element.type !== "selection" &&
+    const associatedFrame = getContainingFrame(element, elementsMap);
-      !isBoundToContainer(element) &&
+    if (
-      selectionX1 <= elementX1 &&
+      associatedFrame &&
-      selectionY1 <= elementY1 &&
+      elementOverlapsWithFrame(element, associatedFrame, elementsMap)
-      selectionX2 >= elementX2 &&
+    ) {
-      selectionY2 >= elementY2
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
-    );
+      elementAABB = [
-  });
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3]),
+      ] as Bounds;
 
-  elementsInSelection = excludeElementsInFrames
+      labelAABB = labelAABB
-    ? excludeElementsInFramesFromSelection(elementsInSelection)
+        ? ([
-    : elementsInSelection;
+            Math.max(labelAABB[0], frameAABB[0]),
-
+            Math.max(labelAABB[1], frameAABB[1]),
-  elementsInSelection = elementsInSelection.filter((element) => {
+            Math.min(labelAABB[2], frameAABB[2]),
-    const containingFrame = getContainingFrame(element, elementsMap);
+            Math.min(labelAABB[3], frameAABB[3]),
-
+          ] as Bounds)
-    if (containingFrame) {
+        : null;
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
     }
 
-    return true;
+    const commonAABB = labelAABB
-  });
+      ? ([
+          Math.min(labelAABB[0], elementAABB[0]),
+          Math.min(labelAABB[1], elementAABB[1]),
+          Math.max(labelAABB[2], elementAABB[2]),
+          Math.max(labelAABB[3], elementAABB[3]),
+        ] as Bounds)
+      : elementAABB;
 
-  return elementsInSelection;
+    // ============== Evaluation ==============
+
+    // 1. If the selection box WRAPs the element's AABB, then add it to the
+    //    selection and move on, regardless of the selection mode.
+    //
+    //    PERF: This trick only works with axis-aligned box selection and the
+    //          current convex element shapes!
+    if (boundsContainBounds(selectionBounds, commonAABB)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      }
+      elementsInSelection.add(element);
+      continue;
+    }
+
+    // 2. Handle the case where the label is overlapped by the selection box
+    if (
+      boxSelectionMode === "overlap" &&
+      labelAABB &&
+      doBoundsIntersect(selectionBounds, labelAABB)
+    ) {
+      elementsInSelection.add(element);
+      continue;
+    }
+
+    // 3. Handle the case where the selection is not wrapping the element, but
+    //    it does intersect the element's outline (non-AABB).
+    if (
+      boxSelectionMode === "overlap" &&
+      doBoundsIntersect(selectionBounds, elementAABB)
+    ) {
+      let hasIntersection = false;
+
+      // Preliminary check potential intersection imprecision
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads(
+            pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle,
+          );
+
+          return pointInsideBounds(rotatedPoint, selectionBounds);
+        });
+      } else {
+        const nonRotatedElementBounds = getElementBounds(
+          element,
+          elementsMap,
+          true,
+        );
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = [
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1],
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3],
+            ),
+            center,
+            element.angle,
+          ),
+          pointRotateRads(
+            pointFrom<GlobalPoint>(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
+            ),
+            center,
+            element.angle,
+          ),
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads(point, center, element.angle),
+            selectionBounds,
+          );
+        });
+      }
+
+      if (!hasIntersection) {
+        hasIntersection = selectionEdges.some(
+          (selectionEdge) =>
+            intersectElementWithLineSegment(
+              element,
+              elementsMap,
+              selectionEdge,
+              strokeWidth / 2,
+              true, // Stop at first hit for better performance
+            ).length > 0,
+        );
+      }
+
+      if (hasIntersection) {
+        if (framesInSelection && isFrameLikeElement(element)) {
+          framesInSelection.add(element.id);
+        }
+
+        elementsInSelection.add(element);
+        continue;
+      }
+    }
+
+    // 4. We don't need to handle when the selection is inside the element
+    //    as it is separately handled in App.
+  }
+
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+
+  if (boxSelectionMode === "overlap") {
+    Array.from(elementsInSelection).forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+
+      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
+    });
+  } else if (boxSelectionMode === "contain") {
+    elementsInSelection.forEach((element) => {
+      // note: currently we only support top-level group handling since
+      // we don't support box selecting while editing the group/subgroup
+      // see https://github.com/excalidraw/excalidraw/pull/11234#issuecomment-4387654451
+      const groupId = element.groupIds.at(-1);
+
+      const group = groupId ? groups[groupId] : null;
+
+      if (
+        group &&
+        !group.every((groupElement) => elementsInSelection.has(groupElement))
+      ) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+
+  // to maintain original order elements (namely for group selection)
+  return elements.filter((element) => elementsInSelection.has(element));
 };
 
 export const getVisibleAndNonSelectedElements = (
@@ -288,3 +543,19 @@ export const getSelectionStateForElements = (
     ),
   };
 };
+
+/**
+ * Returns editing or single-selected text element, if any.
+ */
+export const getActiveTextElement = (
+  selectedElements: readonly NonDeleted<ExcalidrawElement>[],
+  appState: Pick<AppState, "editingTextElement">,
+) => {
+  const activeTextElement =
+    appState.editingTextElement ||
+    (selectedElements.length === 1 &&
+      isTextElement(selectedElements[0]) &&
+      selectedElements[0]);
+
+  return activeTextElement || null;
+};

packages/element/src/shape.ts

@@ -57,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading";
 
 import { canChangeRoundness } from "./comparisons";
 import {
+  elementCenterPoint,
   getArrowheadPoints,
-  getCenterForBounds,
   getDiamondPoints,
   getElementAbsoluteCoords,
 } from "./bounds";
@@ -583,7 +583,11 @@ const getArrowheadShapes = (
 
 export const generateLinearCollisionShape = (
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-) => {
+  elementsMap: ElementsMap,
+): {
+  op: string;
+  data: number[];
+}[] => {
   const generator = new RoughGenerator();
   const options: Options = {
     seed: element.seed,
@@ -592,20 +596,7 @@ export const generateLinearCollisionShape = (
     roughness: 0,
     preserveVertices: true,
   };
-  const center = getCenterForBounds(
+  const center = elementCenterPoint(element, elementsMap);
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3]),
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity],
-    ),
-  );
 
   switch (element.type) {
     case "line":

packages/element/src/sortElements.ts

@@ -1,59 +1,56 @@
-import { arrayToMapWithIndex } from "@excalidraw/common";
+import { arrayToMap } from "@excalidraw/common";
 
 import type { ExcalidrawElement } from "./types";
 
-const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
+const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
-  const origElements: ExcalidrawElement[] = elements.slice();
+  const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
-  const sortedElements = new Set<ExcalidrawElement>();
+    return element.groupIds[element.groupIds.length - level - 1];
-
-  const orderInnerGroups = (
-    elements: readonly ExcalidrawElement[],
-  ): ExcalidrawElement[] => {
-    const firstGroupSig = elements[0]?.groupIds?.join("");
-    const aGroup: ExcalidrawElement[] = [elements[0]];
-    const bGroup: ExcalidrawElement[] = [];
-    for (const element of elements.slice(1)) {
-      if (element.groupIds?.join("") === firstGroupSig) {
-        aGroup.push(element);
-      } else {
-        bGroup.push(element);
-      }
-    }
-    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
   };
 
-  const groupHandledElements = new Map<string, true>();
+  const orderLevel = (
+    levelElements: readonly ExcalidrawElement[],
+    level: number,
+  ): ExcalidrawElement[] => {
+    const buckets = new Map<string, ExcalidrawElement[]>();
+    // Slots preserve first-occurrence order: a groupId reserves its slot
+    // the first time one of its members is seen; loose elements occupy
+    // their own slot. Groups are then expanded (and recursed into) in place.
+    const slots: (ExcalidrawElement | string)[] = [];
 
-  origElements.forEach((element, idx) => {
+    for (const element of levelElements) {
-    if (groupHandledElements.has(element.id)) {
+      const groupId = groupIdAtLevel(element, level);
-      return;
+      if (groupId === undefined) {
-    }
+        slots.push(element);
-    if (element.groupIds?.length) {
+        continue;
-      const topGroup = element.groupIds[element.groupIds.length - 1];
-      const groupElements = origElements.slice(idx).filter((element) => {
-        const ret = element?.groupIds?.some((id) => id === topGroup);
-        if (ret) {
-          groupHandledElements.set(element!.id, true);
-        }
-        return ret;
-      });
-
-      for (const elem of orderInnerGroups(groupElements)) {
-        sortedElements.add(elem);
       }
-    } else {
+      let bucket = buckets.get(groupId);
-      sortedElements.add(element);
+      if (!bucket) {
+        bucket = [];
+        buckets.set(groupId, bucket);
+        slots.push(groupId);
+      }
+      bucket.push(element);
     }
-  });
+
+    return slots.flatMap((slot) =>
+      typeof slot === "string"
+        ? orderLevel(buckets.get(slot)!, level + 1)
+        : [slot],
+    );
+  };
+
+  // `groupIds` is stored innermost-first, so the outermost group is the
+  // last entry. We recurse from level 0 (outermost) inward.
+  const sortedElements = orderLevel(elements, 0);
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
-  if (sortedElements.size !== elements.length) {
+  if (sortedElements.length !== elements.length) {
-    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
+    console.error("defragmentGroups: lost some elements... bailing!");
     return elements;
   }
 
-  return [...sortedElements];
+  return sortedElements;
 };
 
 /**
@@ -68,39 +65,40 @@ const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
 const normalizeBoundElementsOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  const elementsMap = arrayToMapWithIndex(elements);
+  const elementsMap = arrayToMap(elements);
 
-  const origElements: (ExcalidrawElement | null)[] = elements.slice();
   const sortedElements = new Set<ExcalidrawElement>();
 
-  origElements.forEach((element, idx) => {
+  for (const element of elements) {
-    if (!element) {
+    if (sortedElements.has(element)) {
-      return;
+      continue;
     }
+
     if (element.boundElements?.length) {
       sortedElements.add(element);
-      origElements[idx] = null;
+      for (const boundElement of element.boundElements) {
-      element.boundElements.forEach((boundElement) => {
         const child = elementsMap.get(boundElement.id);
         if (child && boundElement.type === "text") {
-          sortedElements.add(child[0]);
+          sortedElements.add(child);
-          origElements[child[1]] = null;
         }
-      });
-    } else if (element.type === "text" && element.containerId) {
-      const parent = elementsMap.get(element.containerId);
-      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
-        sortedElements.add(element);
-        origElements[idx] = null;
-
-        // if element has a container and container lists it, skip this element
-        // as it'll be taken care of by the container
       }
-    } else {
+      continue;
-      sortedElements.add(element);
-      origElements[idx] = null;
     }
-  });
+
+    // if element has a container and container lists it, skip this element
+    // as it'll be taken care of by the container
+    if (
+      element.type === "text" &&
+      element.containerId &&
+      elementsMap
+        .get(element.containerId)
+        ?.boundElements?.some((el) => el.id === element.id)
+    ) {
+      continue;
+    }
+
+    sortedElements.add(element);
+  }
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
@@ -117,5 +115,5 @@ const normalizeBoundElementsOrder = (
 export const normalizeElementOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };

packages/element/src/textElement.ts

@@ -347,6 +347,7 @@ export const getContainerCenter = (
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
       index + 1,
+      elementsMap,
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -441,7 +442,8 @@ const VALID_CONTAINER_TYPES = new Set([
 
 export const isValidTextContainer = (element: {
   type: ExcalidrawElementType;
-}) => VALID_CONTAINER_TYPES.has(element.type);
+}): element is ExcalidrawTextContainer =>
+  VALID_CONTAINER_TYPES.has(element.type);
 
 export const computeContainerDimensionForBoundText = (
   dimension: number,

packages/element/src/textWrapping.ts

@@ -4,6 +4,22 @@ import { charWidth, getLineWidth } from "./textMeasurements";
 
 import type { FontString } from "./types";
 
+/**
+ * This module approximates browser-like soft wrapping for Excalidraw text.
+ *
+ * The flow is:
+ * 1. `parseTokens()` splits a hard line into breakable tokens using a unicode-aware regex.
+ * 2. `getWrappedTextLines()` reflows each hard line into one or more visual lines and
+ *    records where each visual line came from in the source text.
+ * 3. `wrapLine()` assembles tokens into lines, and `wrapWord()` handles a single token
+ *    that is wider than the available width.
+ * 4. `trimLine()` / `trimLineEndAtSoftBreak()` mirror browser behavior around trailing
+ *    whitespace so the rendered text stays consistent with what users see on canvas.
+ *
+ * Mostly, you'll want to use wrapText(). getWrappedTextLines() is for callers
+ * that need metadata such as mapping visual lines back to `originalText`
+ * for caret placement or future editor features.
+ */
 let cachedCjkRegex: RegExp | undefined;
 let cachedLineBreakRegex: RegExp | undefined;
 let cachedEmojiRegex: RegExp | undefined;
@@ -358,6 +374,10 @@ const Break = {
 
 /**
  * Breaks the line into the tokens based on the found line break opporutnities.
+ *
+ * Note: tokenization normalizes to NFC first so decomposed graphemes are treated as
+ * their composed variants for wrapping. Any code that needs exact source offsets should
+ * keep in mind that this assumes the input text is already NFC-normalized.
  */
 export const parseTokens = (line: string) => {
   const breakLineRegex = getLineBreakRegex();
@@ -370,56 +390,120 @@ export const parseTokens = (line: string) => {
 
 /**
  * Wraps the original text into the lines based on the given width.
+ *
+ * This is a convenience adapter over `getWrappedTextLines()` for call sites
+ * that only need the rendered wrapped string and not the source offsets.
  */
 export const wrapText = (
   text: string,
   font: FontString,
   maxWidth: number,
 ): string => {
+  return getWrappedTextLines(text, font, maxWidth)
+    .map((line) => line.text)
+    .join("\n");
+};
+
+/**
+ * A single rendered visual line produced from the original text.
+ *
+ * `start` and `end` are end-exclusive code-unit offsets into the original text, and do
+ * not include synthetic soft line breaks inserted by this module. If trailing whitespace
+ * was trimmed away at a wrap boundary, `end` points to the last rendered character.
+ */
+export type WrappedTextLine = {
+  text: string;
+  start: number;
+  end: number;
+};
+
+/**
+ * Splits only on existing hard line breaks and preserves original offsets.
+ */
+const getHardLineBreaks = (text: string): WrappedTextLine[] => {
+  let offset = 0;
+
+  return text.split("\n").map((line) => {
+    const start = offset;
+    const end = start + line.length;
+
+    offset = end + 1;
+
+    return {
+      text: line,
+      start,
+      end,
+    };
+  });
+};
+
+/**
+ * Returns the rendered visual lines together with their source offsets.
+ *
+ * This is the source-of-truth wrapping pipeline for callers that need more than the
+ * final wrapped string, for example caret placement or future editor/rich-text mapping.
+ */
+export const getWrappedTextLines = (
+  text: string,
+  font: FontString,
+  maxWidth: number,
+): WrappedTextLine[] => {
   // if maxWidth is not finite or NaN which can happen in case of bugs in
   // computation, we need to make sure we don't continue as we'll end up
   // in an infinite loop
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
+    return getHardLineBreaks(text);
   }
 
-  const lines: Array<string> = [];
+  const lines: WrappedTextLine[] = [];
-  const originalLines = text.split("\n");
+  let offset = 0;
 
-  for (const originalLine of originalLines) {
+  for (const originalLine of text.split("\n")) {
-    const currentLineWidth = getLineWidth(originalLine, font);
+    const originalLineWidth = getLineWidth(originalLine, font);
 
-    if (currentLineWidth <= maxWidth) {
+    if (originalLineWidth <= maxWidth) {
-      lines.push(originalLine);
+      lines.push({
-      continue;
+        text: originalLine,
+        start: offset,
+        end: offset + originalLine.length,
+      });
+    } else {
+      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
     }
 
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
+    offset += originalLine.length + 1;
-    lines.push(...wrappedLine);
   }
 
-  return lines.join("\n");
+  return lines;
 };
 
 /**
- * Wraps the original line into the lines based on the given width.
+ * Wraps a single hard line into one or more visual lines.
+ *
+ * The line-local offsets are tracked in original-text code units so
+ * we can map the visual line back to the source.
  */
 const wrapLine = (
   line: string,
   font: FontString,
   maxWidth: number,
-): string[] => {
+  lineStart: number,
-  const lines: Array<string> = [];
+): WrappedTextLine[] => {
+  const lines: WrappedTextLine[] = [];
   const tokens = parseTokens(line);
-  const tokenIterator = tokens[Symbol.iterator]();
 
   let currentLine = "";
+  let currentLineStart = lineStart;
+  let currentLineEnd = lineStart;
   let currentLineWidth = 0;
+  // Tracks the next token's code-unit position in the original source string.
+  let tokenOffset = lineStart;
+  let tokenIndex = 0;
 
-  let iterator = tokenIterator.next();
+  while (tokenIndex < tokens.length) {
-
+    const token = tokens[tokenIndex];
-  while (!iterator.done) {
+    const tokenStart = tokenOffset;
-    const token = iterator.value;
+    const tokenEnd = tokenStart + token.length;
     const testLine = currentLine + token;
 
     // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
@@ -429,37 +513,59 @@ const wrapLine = (
 
     // build up the current line, skipping length check for possibly trailing whitespaces
     if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = tokenStart;
+      }
       currentLine = testLine;
+      currentLineEnd = tokenEnd;
       currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
+      tokenOffset = tokenEnd;
+      tokenIndex++;
       continue;
     }
 
     // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
     if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
+      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
+        text: "",
+        start: tokenStart,
+        end: tokenStart,
+      };
       const precedingLines = wrappedWord.slice(0, -1);
 
       lines.push(...precedingLines);
 
       // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine;
+      currentLine = trailingLine.text;
-      currentLineWidth = getLineWidth(trailingLine, font);
+      currentLineStart = trailingLine.start;
-      iterator = tokenIterator.next();
+      currentLineEnd = trailingLine.end;
+      currentLineWidth = getLineWidth(trailingLine.text, font);
+      tokenOffset = tokenEnd;
+      tokenIndex++;
     } else {
       // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(currentLine.trimEnd());
+      lines.push(
+        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd),
+      );
 
       // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
       currentLine = "";
+      currentLineStart = tokenStart;
+      currentLineEnd = tokenStart;
       currentLineWidth = 0;
     }
   }
 
   // iterator done, push the trailing line if exists
   if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
+    const trailingLine = trimLine(
+      currentLine,
+      currentLineStart,
+      currentLineEnd,
+      font,
+      maxWidth,
+    );
     lines.push(trailingLine);
   }
 
@@ -467,59 +573,100 @@ const wrapLine = (
 };
 
 /**
- * Wraps the word into the lines based on the given width.
+ * Wraps a single word that could not be placed on an empty line as-is.
  */
 const wrapWord = (
   word: string,
   font: FontString,
   maxWidth: number,
-): Array<string> => {
+  wordStart: number,
+): WrappedTextLine[] => {
   // multi-codepoint emojis are already broken apart and shouldn't be broken further
   if (getEmojiRegex().test(word)) {
-    return [word];
+    return [
+      {
+        text: word,
+        start: wordStart,
+        end: wordStart + word.length,
+      },
+    ];
   }
 
   satisfiesWordInvariant(word);
 
-  const lines: Array<string> = [];
+  const lines: WrappedTextLine[] = [];
   const chars = Array.from(word);
 
   let currentLine = "";
+  let currentLineStart = wordStart;
+  let currentLineEnd = wordStart;
   let currentLineWidth = 0;
+  let offset = wordStart;
 
   for (const char of chars) {
+    const charStart = offset;
+    const charEnd = charStart + char.length;
     const _charWidth = charWidth.calculate(char, font);
     const testLineWidth = currentLineWidth + _charWidth;
 
     if (testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = charStart;
+      }
       currentLine = currentLine + char;
+      currentLineEnd = charEnd;
       currentLineWidth = testLineWidth;
+      offset = charEnd;
       continue;
     }
 
     if (currentLine) {
-      lines.push(currentLine);
+      lines.push({
+        text: currentLine,
+        start: currentLineStart,
+        end: currentLineEnd,
+      });
     }
 
     currentLine = char;
+    currentLineStart = charStart;
+    currentLineEnd = charEnd;
     currentLineWidth = _charWidth;
+    offset = charEnd;
   }
 
   if (currentLine) {
-    lines.push(currentLine);
+    lines.push({
+      text: currentLine,
+      start: currentLineStart,
+      end: currentLineEnd,
+    });
   }
 
   return lines;
 };
 
 /**
- * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
+ * Trims trailing whitespace that is exceeding the `maxWidth`.
+ *
+ * Used for the trailing visual line of a hard line, where some trailing
+ * whitespace may still be visible if it fits into the available width.
  */
-const trimLine = (line: string, font: FontString, maxWidth: number) => {
+const trimLine = (
+  line: string,
+  start: number,
+  end: number,
+  font: FontString,
+  maxWidth: number,
+): WrappedTextLine => {
   const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth;
 
   if (!shouldTrimWhitespaces) {
-    return line;
+    return {
+      text: line,
+      start,
+      end,
+    };
   }
 
   // defensively default to `trimeEnd` in case the regex does not match
@@ -543,7 +690,30 @@ const trimLine = (line: string, font: FontString, maxWidth: number) => {
     trimmedLineWidth = testLineWidth;
   }
 
-  return trimmedLine;
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line.length - trimmedLine.length),
+  };
+};
+
+/**
+ * Used for internal soft-wrap boundaries, where trailing whitespace should not
+ * survive into the rendered line even though it still exists in the original
+ * text.
+ */
+const trimLineEndAtSoftBreak = (
+  line: string,
+  start: number,
+  end: number,
+): WrappedTextLine => {
+  const trimmedLine = line.trimEnd();
+
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line.length - trimmedLine.length),
+  };
 };
 
 /**

packages/element/src/typeChecks.ts

@@ -392,3 +392,23 @@ export const canBecomePolygon = (
     (points.length === 3 && !pointsEqual(points[0], points[points.length - 1]))
   );
 };
+
+export const isEligibleFrameChildType = (type: ElementOrToolType) => {
+  switch (type) {
+    case "rectangle":
+    case "diamond":
+    case "ellipse":
+    case "arrow":
+    case "line":
+    case "freedraw":
+    case "text":
+    case "image":
+    case "frame":
+    case "embeddable": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};

packages/element/src/utils.ts

@@ -124,6 +124,7 @@ const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
  */
 export function deconstructLinearOrFreeDrawElement(
   element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
+  elementsMap: ElementsMap,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
   const cachedShape = getElementShapesCacheEntry(element, 0);
 
@@ -131,10 +132,7 @@ export function deconstructLinearOrFreeDrawElement(
     return cachedShape;
   }
 
-  const ops = generateLinearCollisionShape(element) as {
+  const ops = generateLinearCollisionShape(element, elementsMap);
-    op: string;
-    data: number[];
-  }[];
   const lines = [];
   const curves = [];
 

packages/element/tests/collision.test.tsx

@@ -1,4 +1,4 @@
-import { arrayToMap } from "@excalidraw/common";
+import { arrayToMap, reseed } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
@@ -12,6 +12,7 @@ import { hitElementItself } from "../src/collision";
 describe("check rotated elements can be hit:", () => {
   beforeEach(async () => {
     localStorage.clear();
+    reseed(7);
     await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
@@ -56,6 +57,7 @@ describe("hitElementItself cache", () => {
     });
 
     localStorage.clear();
+    reseed(7);
     await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 

packages/element/tests/cropElement.test.tsx

@@ -330,30 +330,22 @@ describe("Cropping and other features", async () => {
     const widthToHeightRatio = image.width / image.height;
 
     const canvas = await exportToCanvas({
-      data: {
+      elements: [image],
-        elements: [image],
+      // @ts-ignore
-        // @ts-ignore
+      appState: h.state,
-        appState: h.state,
+      files: h.app.files,
-        files: h.app.files,
+      exportPadding: 0,
-      },
-      config: {
-        padding: 0,
-      },
     });
     const exportedCanvasRatio = canvas.width / canvas.height;
 
     expect(widthToHeightRatio).toBeCloseTo(exportedCanvasRatio);
 
     const svg = await exportToSvg({
-      data: {
+      elements: [image],
-        elements: [image],
+      // @ts-ignore
-        // @ts-ignore
+      appState: h.state,
-        appState: h.state,
+      files: h.app.files,
-        files: h.app.files,
+      exportPadding: 0,
-      },
-      config: {
-        padding: 0,
-      },
     });
     const svgWidth = svg.getAttribute("width");
     const svgHeight = svg.getAttribute("height");

packages/element/tests/fractionalIndex.test.ts

@@ -1,9 +1,8 @@
 /* eslint-disable no-lone-blocks */
-import { generateKeyBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
 import {
+  InvalidFractionalIndexError,
   syncInvalidIndices,
   syncMovedIndices,
   validateFractionalIndices,
@@ -13,13 +12,34 @@ import { deepCopyElement } from "@excalidraw/element";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
+import {
+  generateKeyBetween,
+  validateOrderKey,
+} from "@excalidraw/fractional-indexing";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   FractionalIndex,
 } from "@excalidraw/element/types";
 
-import { InvalidFractionalIndexError } from "../src/fractionalIndex";
+describe("fractional index format validation", () => {
+  it("should reject malformed base62 order keys", () => {
+    expect(() => validateOrderKey("a!")).toThrow();
+    expect(() => validateOrderKey("a_")).toThrow();
+    expect(() => validateOrderKey("a1!")).toThrow();
+    expect(() => validateOrderKey("a1_")).toThrow();
+    expect(() => validateOrderKey("zd0032")).toThrow();
+  });
+
+  it("should accept valid base62 order keys", () => {
+    expect(() => validateOrderKey("Zz")).not.toThrow();
+    expect(() => validateOrderKey("a0")).not.toThrow();
+    expect(() => validateOrderKey("a1")).not.toThrow();
+    expect(() => validateOrderKey("a1V")).not.toThrow();
+    expect(() => validateOrderKey("z".padEnd(28, "z"))).not.toThrow();
+  });
+});
 
 describe("sync invalid indices with array order", () => {
   describe("should NOT sync empty array", () => {
@@ -104,6 +124,46 @@ describe("sync invalid indices with array order", () => {
     });
   });
 
+  describe("should sync when fractional index is malformed", () => {
+    // "zd0032" has head "z" which requires length 28 per getIntegerLength,
+    // but the string is far too short, so validateOrderKey throws for it
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "zd0032" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "zd0032" },
+        { id: "C", index: "a3" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "a!" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "a!" },
+        { id: "C", index: "a2" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+  });
+
   describe("should sync when fractional indices are duplicated", () => {
     testInvalidIndicesSync({
       elements: [

packages/element/tests/frame.test.tsx

@@ -2,15 +2,24 @@ import {
   convertToExcalidrawElements,
   Excalidraw,
 } from "@excalidraw/excalidraw";
+import { arrayToMap } from "@excalidraw/common";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { Keyboard, Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { getTextEditor } from "@excalidraw/excalidraw/tests/queries/dom";
 import {
   getCloneByOrigId,
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import type { ExcalidrawElement } from "../src/types";
+import { getSelectedElements } from "@excalidraw/excalidraw/scene";
+
+import { elementOverlapsWithFrame } from "../src/frame";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+} from "../src/types";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -125,6 +134,250 @@ describe("adding elements to frames", () => {
     });
   });
 
+  it("should treat an element fully containing a frame as overlapping the frame", () => {
+    const containingRect = API.createElement({
+      type: "rectangle",
+      x: -50,
+      y: -50,
+      width: 250,
+      height: 250,
+    });
+
+    API.setElements([containingRect, frame]);
+
+    expect(
+      elementOverlapsWithFrame(
+        containingRect,
+        frame as ExcalidrawFrameLikeElement,
+        arrayToMap(h.elements),
+      ),
+    ).toBe(true);
+  });
+
+  it("should not add a newly created element to a frame behind a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([frame, cover]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(null);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      cover.id,
+      createdElement?.id,
+    ]);
+  });
+
+  it("should add a newly created element to a frame over a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([cover, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should highlight the target frame while creating a new element", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.upAt(40, 40);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should highlight the target frame while hovering with a creation tool", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.moveTo(20, 20);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.moveTo(200, 200);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should not add grid-snapped text outside the frame to the clicked frame", async () => {
+    const offsetFrame = API.createElement({
+      id: "offsetFrame",
+      type: "frame",
+      x: 10,
+      y: 0,
+      width: 150,
+      height: 150,
+    });
+
+    API.setElements([offsetFrame]);
+    API.setAppState({
+      gridModeEnabled: true,
+    });
+
+    UI.clickTool("text");
+    mouse.clickAt(12, 0);
+
+    await getTextEditor();
+
+    const createdText = h.elements.find(
+      (element) => element.id !== offsetFrame.id,
+    );
+
+    expect(createdText?.x).toBe(0);
+    expect(createdText?.y).toBe(0);
+    expect(createdText?.frameId).toBe(null);
+  });
+
+  it("should add a newly created element to a frame behind another frame", () => {
+    const lockedFrame = API.createElement({
+      id: "lockedFrame",
+      type: "frame",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      locked: true,
+    });
+
+    API.setElements([frame, lockedFrame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== lockedFrame.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should insert a newly created frame child just below its frame", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frameChildUnderCursor, otherFrameChild, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+      frame.id,
+    ]);
+  });
+
+  it("should insert a newly created frame child above the highest frame child", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frame, frameChildUnderCursor, otherFrameChild]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+    ]);
+  });
+
   const commonTestCases = async (
     func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
   ) => {
@@ -415,6 +668,345 @@ describe("adding elements to frames", () => {
   describe("dragging elements into the frame", async () => {
     await commonTestCases(dragElementIntoFrame);
 
+    it("should add a dragged element fully containing the frame", () => {
+      const containingRect = API.createElement({
+        type: "rectangle",
+        x: 220,
+        y: 20,
+        width: 300,
+        height: 300,
+      });
+
+      API.setElements([frame, containingRect]);
+
+      dragElementIntoFrame(frame, containingRect);
+
+      expect(API.getElement(containingRect).frameId).toBe(frame.id);
+    });
+
+    it("should drag an element into a frame", () => {
+      API.setElements([rect2, frame]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should layer a dragged element above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, rect2]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(rect2.index! > frameChild.index!).toBe(true);
+      expect(rect2.index! > frame.index!).toBe(true);
+    });
+
+    it("should preview a dragged element above the highest frame child before pointerup", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([rect2, frame, frameChild]);
+      API.setSelectedElements([rect2]);
+      API.updateElement(rect2, {
+        x: 10,
+        y: 10,
+      });
+
+      const getRenderableElementIds = (
+        selectedElementsAreBeingDragged: boolean,
+      ) => {
+        return h.app.renderer
+          .getRenderableElements({
+            zoom: h.state.zoom,
+            offsetLeft: 0,
+            offsetTop: 0,
+            scrollX: 0,
+            scrollY: 0,
+            height: 1000,
+            width: 1000,
+            editingTextElement: h.state.editingTextElement,
+            newElement: h.state.newElement,
+            selectedElements: getSelectedElements(h.elements, h.state),
+            selectedElementsAreBeingDragged,
+            frameToHighlight: frame as ExcalidrawFrameLikeElement,
+          })
+          .visibleElements.map((element) => element.id);
+      };
+
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(false)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(true)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should not preview reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 40,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      const renderableElementIds = h.app.renderer
+        .getRenderableElements({
+          zoom: h.state.zoom,
+          offsetLeft: 0,
+          offsetTop: 0,
+          scrollX: 0,
+          scrollY: 0,
+          height: 1000,
+          width: 1000,
+          editingTextElement: h.state.editingTextElement,
+          newElement: h.state.newElement,
+          selectedElements: getSelectedElements(h.elements, h.state),
+          selectedElementsAreBeingDragged: true,
+          frameToHighlight: frame as ExcalidrawFrameLikeElement,
+        })
+        .visibleElements.map((element) => element.id);
+
+      expect(renderableElementIds).toEqual([
+        frameChild.id,
+        frame.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should put a dragged mixed selection above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+        boundElements: [{ id: "boundText", type: "text" }],
+      });
+      const boundText = API.createElement({
+        id: "boundText",
+        type: "text",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        containerId: frameChild.id,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const nonFrameElement = API.createElement({
+        id: "nonFrameElement",
+        type: "rectangle",
+        x: 155,
+        y: 10,
+        width: 20,
+        height: 20,
+      });
+
+      API.setElements([
+        frame,
+        frameChild,
+        boundText,
+        otherFrameChild,
+        nonFrameElement,
+      ]);
+      API.setSelectedElements([frameChild, nonFrameElement]);
+
+      mouse.downAt(
+        nonFrameElement.x + nonFrameElement.width / 2,
+        nonFrameElement.y + nonFrameElement.height / 2,
+      );
+      mouse.moveTo(frame.x + frame.width - 5, nonFrameElement.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(boundText.frameId).toBe(frame.id);
+      expect(nonFrameElement.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        otherFrameChild.id,
+        frameChild.id,
+        boundText.id,
+        nonFrameElement.id,
+      ]);
+    });
+
+    it("should not reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(frameChild.x + frameChild.width / 2 + 5, frameChild.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should not drag an element into a frame behind a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([frame, cover, rect2]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should drag an element into a frame over a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([cover, rect2, frame]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should keep dragging a frame child over a non-frame element above its frame", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 100,
+        y: 20,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, cover]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(20, 20);
+
+      expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+      mouse.upAt(20, 20);
+
+      expect(frameChild.frameId).toBe(frame.id);
+    });
+
     it.skip("should drag element inside, duplicate it and keep it in frame", () => {
       API.setElements([frame, rect2]);
 

packages/element/tests/sortElements.test.ts

@@ -326,19 +326,59 @@ describe("normalizeElementsOrder", () => {
       ]),
       [
         "BA_rect1",
+        "CBA_rect3",
+        "CBA_rect7",
         "BA_rect5",
         "BA_rect6",
         "A_rect2",
         "A_rect5",
-        "CBA_rect3",
-        "CBA_rect7",
         "rect4",
         "X_rect8",
-        "X_rect11",
         "YX_rect10",
+        "X_rect11",
         "rect9",
       ],
     );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "A_rect1",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+        API.createElement({
+          id: "CBA_rect2",
+          type: "rectangle",
+          groupIds: ["C", "B", "A"],
+        }),
+        API.createElement({
+          id: "A_rect3",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+      ]),
+      ["A_rect1", "CBA_rect2", "A_rect3"],
+    );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "abcT_rect1",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect2",
+          type: "rectangle",
+          groupIds: ["a", "bc", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect3",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+      ]),
+      ["abcT_rect1", "abcT_rect3", "abcT_rect2"],
+    );
   });
 
   // TODO

packages/element/tests/textWrapping.test.ts

@@ -1,4 +1,8 @@
-import { wrapText, parseTokens } from "../src/textWrapping";
+import {
+  getWrappedTextLines,
+  parseTokens,
+  wrapText,
+} from "../src/textWrapping";
 
 import type { FontString } from "../src/types";
 
@@ -102,6 +106,71 @@ describe("Test wrapText", () => {
     expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
   });
 
+  it("should retain original text offsets for wrapped lines", () => {
+    expect(getWrappedTextLines("Hello World!", font, 60)).toEqual([
+      {
+        text: "Hello",
+        start: 0,
+        end: 5,
+      },
+      {
+        text: "World!",
+        start: 6,
+        end: 12,
+      },
+    ]);
+  });
+
+  it("should exclude whitespace trimmed away at soft-wrap boundaries from line offsets", () => {
+    expect(getWrappedTextLines("  Hello  World", font, 90)).toEqual([
+      {
+        text: "  Hello",
+        start: 0,
+        end: 7,
+      },
+      {
+        text: "World",
+        start: 9,
+        end: 14,
+      },
+    ]);
+  });
+
+  it("should retain offsets when wrapping a single long token", () => {
+    expect(getWrappedTextLines("Excalidraw", font, 50)).toEqual([
+      {
+        text: "Excal",
+        start: 0,
+        end: 5,
+      },
+      {
+        text: "idraw",
+        start: 5,
+        end: 10,
+      },
+    ]);
+  });
+
+  it("should preserve empty hard lines in metadata", () => {
+    expect(getWrappedTextLines("A\n\nB", font, 100)).toEqual([
+      {
+        text: "A",
+        start: 0,
+        end: 1,
+      },
+      {
+        text: "",
+        start: 2,
+        end: 2,
+      },
+      {
+        text: "B",
+        start: 3,
+        end: 4,
+      },
+    ]);
+  });
+
   describe("When text is CJK", () => {
     it("should break each CJK character when width is very small", () => {
       // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"

packages/excalidraw/actions/actionDeselect.ts

@@ -0,0 +1,147 @@
+import {
+  getElementsInGroup,
+  isSomeElementSelected,
+  makeNextSelectedElementIds,
+  selectGroupsForSelectedElements,
+} from "@excalidraw/element";
+import { CaptureUpdateAction } from "@excalidraw/element";
+import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common";
+
+import type { GroupId } from "@excalidraw/element/types";
+
+import { register } from "./register";
+
+import type { AppClassProperties, AppState } from "../types";
+
+const getNextActiveTool = (
+  appState: Readonly<AppState>,
+  app: AppClassProperties,
+) => {
+  if (appState.activeTool.type === "eraser") {
+    return updateActiveTool(appState, {
+      ...(appState.activeTool.lastActiveTool || {
+        type: app.state.preferredSelectionTool.type,
+      }),
+      lastActiveToolBeforeEraser: null,
+    });
+  }
+
+  return updateActiveTool(appState, {
+    type: app.state.preferredSelectionTool.type,
+  });
+};
+
+const getParentEditingGroupId = (
+  appState: Readonly<AppState>,
+  app: AppClassProperties,
+  selectedElementIds: AppState["selectedElementIds"],
+): GroupId | null => {
+  if (!appState.editingGroupId) {
+    return null;
+  }
+
+  const nonDeletedElements = app.scene.getNonDeletedElements();
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds,
+    elements: nonDeletedElements,
+  });
+  const candidateElements = selectedElements.length
+    ? selectedElements
+    : getElementsInGroup(nonDeletedElements, appState.editingGroupId);
+
+  for (const element of candidateElements) {
+    const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId);
+    if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) {
+      return element.groupIds[editingGroupIndex + 1] as GroupId;
+    }
+  }
+
+  return null;
+};
+
+export const actionDeselect = register({
+  name: "deselect",
+  label: "",
+  trackEvent: false,
+  perform: (_elements, appState, _, app) => {
+    const activeTool = getNextActiveTool(appState, app);
+
+    if (appState.editingGroupId) {
+      const nonDeletedElements = app.scene.getNonDeletedElements();
+      const selectedElementIds =
+        Object.keys(appState.selectedElementIds).length > 0
+          ? appState.selectedElementIds
+          : getElementsInGroup(
+              nonDeletedElements,
+              appState.editingGroupId,
+            ).reduce((acc, element) => {
+              acc[element.id] = true;
+              return acc;
+            }, {} as Record<string, true>);
+
+      return {
+        appState: {
+          ...appState,
+          ...selectGroupsForSelectedElements(
+            {
+              editingGroupId: getParentEditingGroupId(
+                appState,
+                app,
+                selectedElementIds,
+              ),
+              selectedElementIds,
+            },
+            nonDeletedElements,
+            appState,
+            app,
+          ),
+          activeEmbeddable: null,
+          activeTool,
+          selectedLinearElement: null,
+          selectionElement: null,
+          showHyperlinkPopup: false,
+          suggestedBinding: null,
+          frameToHighlight: null,
+        },
+        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      };
+    }
+
+    return {
+      appState: {
+        ...appState,
+        activeEmbeddable: null,
+        activeTool,
+        editingGroupId: null,
+        selectedElementIds: makeNextSelectedElementIds({}, appState),
+        selectedGroupIds: {},
+        selectedLinearElement: null,
+        selectionElement: null,
+        showHyperlinkPopup: false,
+        suggestedBinding: null,
+        frameToHighlight: null,
+      },
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+    };
+  },
+  keyTest: (event, appState, _, app) => {
+    if (event.key !== KEYS.ESCAPE) {
+      return false;
+    }
+
+    if (isWritableElement(event.target)) {
+      return false;
+    }
+
+    return (
+      !appState.newElement &&
+      appState.multiElement === null &&
+      !appState.selectedLinearElement?.isEditing &&
+      (appState.activeEmbeddable !== null ||
+        appState.activeTool.type !== app.state.preferredSelectionTool.type ||
+        !!appState.editingGroupId ||
+        !!appState.selectedLinearElement ||
+        isSomeElementSelected(app.scene.getNonDeletedElements(), appState))
+    );
+  },
+});

packages/excalidraw/actions/actionFinalize.tsx

@@ -329,8 +329,8 @@ export const actionFinalize = register<FormData>({
         selectionElement: null,
         multiElement: null,
         editingTextElement: null,
-        startBoundElement: null,
         suggestedBinding: null,
+        frameToHighlight: null,
         selectedElementIds:
           element &&
           !appState.activeTool.locked &&
@@ -348,9 +348,7 @@ export const actionFinalize = register<FormData>({
     };
   },
   keyTest: (event, appState) =>
-    (event.key === KEYS.ESCAPE &&
+    (event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) ||
-      (appState.selectedLinearElement?.isEditing ||
-        (!appState.newElement && appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
   PanelComponent: ({ appState, updateData, data }) => (

packages/excalidraw/actions/actionFrame.ts

@@ -205,7 +205,6 @@ export const actionWrapSelectionInFrame = register({
       [...app.scene.getElementsIncludingDeleted(), frame],
       selectedElements,
       frame,
-      appState,
     );
 
     return {

packages/excalidraw/actions/actionGroup.tsx

@@ -277,7 +277,6 @@ export const actionUngroup = register({
             elementsMap,
           ),
           frame,
-          app,
         );
       }
     });

packages/excalidraw/actions/actionHistory.tsx

@@ -1,5 +1,4 @@
 import {
-  isWindows,
   KEYS,
   matchKey,
   arrayToMap,
@@ -114,7 +113,7 @@ export const createRedoAction: ActionCreator = (history) => ({
     ),
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (event[KEYS.CTRL_OR_CMD] && !event.shiftKey && matchKey(event, KEYS.Y)),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,

packages/excalidraw/actions/actionProperties.tsx

@@ -191,7 +191,7 @@ export const getFormValue = function <T extends Primitive>(
   elements: readonly ExcalidrawElement[],
   app: AppClassProperties,
   getAttribute: (element: ExcalidrawElement) => T,
-  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
+  elementPredicate: true | ((element: ExcalidrawElement) => boolean),
   defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
   const editingTextElement = app.state.editingTextElement;
@@ -209,9 +209,9 @@ export const getFormValue = function <T extends Primitive>(
     if (hasSelection) {
       const selectedElements = app.scene.getSelectedElements(app.state);
       const targetElements =
-        isRelevantElement === true
+        elementPredicate === true
           ? selectedElements
-          : selectedElements.filter((el) => isRelevantElement(el));
+          : selectedElements.filter((el) => elementPredicate(el));
 
       ret =
         reduceToCommonValue(targetElements, getAttribute) ??
@@ -730,9 +730,28 @@ export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ app, updateData }) => (
+  PanelComponent: ({ elements, appState, app, updateData }) => {
-    <Range updateData={updateData} app={app} testId="opacity" />
+    const opacity = getFormValue(
-  ),
+      elements,
+      app,
+      (element) => element.opacity,
+      true,
+      (hasSelection) => (hasSelection ? null : appState.currentItemOpacity),
+    );
+
+    return (
+      <Range
+        label={t("labels.opacity")}
+        value={opacity ?? appState.currentItemOpacity}
+        hasCommonValue={opacity !== null}
+        onChange={updateData}
+        min={0}
+        max={100}
+        step={10}
+        testId="opacity"
+      />
+    );
+  },
 });
 
 export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(

packages/excalidraw/actions/actionTextAutoResize.ts

@@ -1,24 +1,24 @@
 import { getFontString } from "@excalidraw/common";
 
-import { newElementWith } from "@excalidraw/element";
+import { isExcalidrawElement, newElementWith } from "@excalidraw/element";
 import { measureText } from "@excalidraw/element";
 
 import { isTextElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { getSelectedElements } from "../scene";
 
 import { register } from "./register";
 
-import type { AppClassProperties } from "../types";
-
 export const actionTextAutoResize = register({
   name: "autoResize",
   label: "labels.autoResize",
   icon: null,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, _: unknown, app: AppClassProperties) => {
+  predicate: (elements, appState, _: unknown) => {
     const selectedElements = getSelectedElements(elements, appState);
     return (
       selectedElements.length === 1 &&
@@ -26,13 +26,18 @@ export const actionTextAutoResize = register({
       !selectedElements[0].autoResize
     );
   },
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState, targetElement) => {
     const selectedElements = getSelectedElements(elements, appState);
 
+    const targetTextElement =
+      isExcalidrawElement(targetElement) && isTextElement(targetElement)
+        ? targetElement
+        : (selectedElements[0] as ExcalidrawElement | undefined);
+
     return {
       appState,
       elements: elements.map((element) => {
-        if (element.id === selectedElements[0].id && isTextElement(element)) {
+        if (element.id === targetTextElement?.id && isTextElement(element)) {
           const metrics = measureText(
             element.originalText,
             getFontString(element),

packages/excalidraw/actions/index.ts

@@ -34,6 +34,7 @@ export {
 export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
 
 export { actionFinalize } from "./actionFinalize";
+export { actionDeselect } from "./actionDeselect";
 
 export {
   actionChangeProjectName,

packages/excalidraw/actions/types.ts

@@ -114,6 +114,7 @@ export type ActionName =
   | "distributeVertically"
   | "flipHorizontal"
   | "flipVertical"
+  | "deselect"
   | "viewMode"
   | "exportWithDarkMode"
   | "toggleTheme"

packages/excalidraw/animatedTrail.ts

@@ -1,5 +1,4 @@
 import { LaserPointer } from "@excalidraw/laser-pointer";
-
 import {
   SVG_NS,
   getSvgPathFromStroke,
@@ -8,7 +7,8 @@ import {
 
 import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
 
-import type { AnimationFrameHandler } from "./animation-frame-handler";
+import { AnimationController } from "./renderer/animation";
+
 import type App from "./components/App";
 import type { AppState } from "./types";
 
@@ -34,15 +34,16 @@ export class AnimatedTrail implements Trail {
   private container?: SVGSVGElement;
   private trailElement: SVGPathElement;
   private trailAnimation?: SVGAnimateElement;
+  private key: string;
+
+  private static counter = 0;
 
   constructor(
-    private animationFrameHandler: AnimationFrameHandler,
     protected app: App,
     private options: Partial<LaserPointerOptions> &
       Partial<AnimatedTrailOptions>,
   ) {
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
+    this.key = `animated-trail-${AnimatedTrail.counter++}`;
-
     this.trailElement = document.createElementNS(SVG_NS, "path");
     if (this.options.animateTrail) {
       this.trailAnimation = document.createElementNS(SVG_NS, "animate");
@@ -73,6 +74,15 @@ export class AnimatedTrail implements Trail {
     return false;
   }
 
+  private cleanup() {
+    this.pastTrails = [];
+    this.currentTrail = undefined;
+
+    if (this.trailElement.parentNode === this.container) {
+      this.container?.removeChild(this.trailElement);
+    }
+  }
+
   start(container?: SVGSVGElement) {
     if (container) {
       this.container = container;
@@ -82,15 +92,23 @@ export class AnimatedTrail implements Trail {
       this.container.appendChild(this.trailElement);
     }
 
-    this.animationFrameHandler.start(this);
+    if (!AnimationController.running(this.key)) {
+      AnimationController.start(this.key, () => {
+        const needsNext = this.onFrame();
+        if (needsNext) {
+          return { keep: true };
+        }
+
+        this.cleanup();
+
+        return null;
+      });
+    }
   }
 
   stop() {
-    this.animationFrameHandler.stop(this);
+    AnimationController.cancel(this.key);
-
+    this.cleanup();
-    if (this.trailElement.parentNode === this.container) {
-      this.container?.removeChild(this.trailElement);
-    }
   }
 
   startPath(x: number, y: number) {
@@ -145,21 +163,25 @@ export class AnimatedTrail implements Trail {
 
     if (this.currentTrail) {
       const currentPath = this.drawTrail(this.currentTrail, this.app.state);
-
       paths.push(currentPath);
     }
 
-    this.pastTrails = this.pastTrails.filter((trail) => {
+    this.pastTrails = this.pastTrails.filter(
-      return trail.getStrokeOutline().length !== 0;
+      (t) =>
-    });
+        t.getStrokeOutline(t.options.size / this.app.state.zoom.value)
+          .length !== 0,
+    );
 
     if (paths.length === 0) {
-      this.stop();
+      // Clean up the SVG path if there are no trails to render
+      this.trailElement.setAttribute("d", "");
+
+      return false;
     }
 
     const svgPaths = paths.join(" ").trim();
-
     this.trailElement.setAttribute("d", svgPaths);
+
     if (this.trailAnimation) {
       this.trailElement.setAttribute(
         "fill",
@@ -175,6 +197,8 @@ export class AnimatedTrail implements Trail {
         (this.options.fill ?? (() => "black"))(this),
       );
     }
+
+    return true;
   }
 
   private drawTrail(trail: LaserPointer, state: AppState): string {

packages/excalidraw/animation-frame-handler.ts

@@ -1,79 +0,0 @@
-export type AnimationCallback = (timestamp: number) => void | boolean;
-
-export type AnimationTarget = {
-  callback: AnimationCallback;
-  stopped: boolean;
-};
-
-export class AnimationFrameHandler {
-  private targets = new WeakMap<object, AnimationTarget>();
-  private rafIds = new WeakMap<object, number>();
-
-  register(key: object, callback: AnimationCallback) {
-    this.targets.set(key, { callback, stopped: true });
-  }
-
-  start(key: object) {
-    const target = this.targets.get(key);
-
-    if (!target) {
-      return;
-    }
-
-    if (this.rafIds.has(key)) {
-      return;
-    }
-
-    this.targets.set(key, { ...target, stopped: false });
-    this.scheduleFrame(key);
-  }
-
-  stop(key: object) {
-    const target = this.targets.get(key);
-    if (target && !target.stopped) {
-      this.targets.set(key, { ...target, stopped: true });
-    }
-
-    this.cancelFrame(key);
-  }
-
-  private constructFrame(key: object): FrameRequestCallback {
-    return (timestamp: number) => {
-      const target = this.targets.get(key);
-
-      if (!target) {
-        return;
-      }
-
-      const shouldAbort = this.onFrame(target, timestamp);
-
-      if (!target.stopped && !shouldAbort) {
-        this.scheduleFrame(key);
-      } else {
-        this.cancelFrame(key);
-      }
-    };
-  }
-
-  private scheduleFrame(key: object) {
-    const rafId = requestAnimationFrame(this.constructFrame(key));
-
-    this.rafIds.set(key, rafId);
-  }
-
-  private cancelFrame(key: object) {
-    if (this.rafIds.has(key)) {
-      const rafId = this.rafIds.get(key)!;
-
-      cancelAnimationFrame(rafId);
-    }
-
-    this.rafIds.delete(key);
-  }
-
-  private onFrame(target: AnimationTarget, timestamp: number): boolean {
-    const shouldAbort = target.callback(timestamp);
-
-    return shouldAbort ?? false;
-  }
-}

packages/excalidraw/appState.ts

@@ -99,7 +99,6 @@ export const getDefaultAppState = (): Omit<
       open: false,
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
     },
-    startBoundElement: null,
     suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
@@ -128,6 +127,7 @@ export const getDefaultAppState = (): Omit<
     lockedMultiSelections: {},
     activeLockedId: null,
     bindMode: "orbit",
+    boxSelectionMode: "contain",
   };
 };
 
@@ -193,6 +193,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: true, export: false, server: false },
+  boxSelectionMode: { browser: true, export: false, server: false },
   bindingPreference: { browser: true, export: false, server: false },
   isMidpointSnappingEnabled: { browser: true, export: false, server: false },
   defaultSidebarDockedPreference: {
@@ -229,7 +230,6 @@ const APP_STATE_STORAGE_CONF = (<
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
-  startBoundElement: { browser: false, export: false, server: false },
   suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -46,6 +46,7 @@ import {
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 
 import type { JSX } from "react";
+import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
 
 export interface FontDescriptor {
   value: number;
@@ -86,6 +87,15 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
   }
 };
 
+const getFontFamilyLabel = (
+  fontFamily: FontFamilyValues,
+  fontFaces: ExcalidrawFontFace[],
+) =>
+  // prefer our config as the browser resolved names may be wrapped in quotes and such
+  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
+  fontFaces[0]?.fontFace?.family ??
+  "Unknown";
+
 export const FontPickerList = React.memo(
   ({
     selectedFontFamily,
@@ -114,7 +124,7 @@ export const FontPickerList = React.memo(
             const fontDescriptor = {
               value: familyId,
               icon: getFontFamilyIcon(familyId),
-              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
+              text: getFontFamilyLabel(familyId, fontFaces),
             };
 
             if (metadata.deprecated) {

packages/excalidraw/components/ImageExportDialog.tsx

@@ -1,3 +1,4 @@
+import { exportToCanvas } from "@excalidraw/utils/export";
 import React, { useEffect, useRef, useState } from "react";
 
 import {
@@ -5,7 +6,6 @@ import {
   EXPORT_IMAGE_TYPES,
   isFirefox,
   EXPORT_SCALES,
-  THEME,
   cloneJSON,
 } from "@excalidraw/common";
 
@@ -26,7 +26,6 @@ import { useCopyStatus } from "../hooks/useCopiedIndicator";
 
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../scene/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
@@ -129,26 +128,19 @@ const ImageExportModal = ({
     };
 
     exportToCanvas({
-      data: {
+      elements: exportedElements,
-        elements: exportedElements,
+      appState: {
-        appState: {
+        ...appStateSnapshot,
-          ...appStateSnapshot,
+        name: projectName,
-          name: projectName,
+        exportBackground: exportWithBackground,
-          exportBackground: exportWithBackground,
+        exportWithDarkMode,
-          exportScale,
+        exportScale,
-          exportEmbedScene: embedScene,
+        exportEmbedScene: embedScene,
-        },
-        files,
-      },
-      config: {
-        padding: DEFAULT_EXPORT_PADDING,
-        maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-        exportingFrame,
-        theme: exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
-        canvasBackgroundColor: exportWithBackground
-          ? appStateSnapshot.viewBackgroundColor
-          : false,
       },
+      files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
+      exportingFrame,
     })
       .then(async (canvas) => {
         if (isStaleRequest()) {

packages/excalidraw/components/LayerUI.tsx

@@ -650,8 +650,7 @@ const LayerUI = ({
 };
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
+  const { cursorButton, scrollX, scrollY, ...ret } = appState;
-    appState;
   return ret;
 };
 

packages/excalidraw/components/LibraryMenuItems.tsx

@@ -199,6 +199,7 @@ export default function LibraryMenuItems({
             type: "everything",
             elements: item.elements,
             randomizeSeed: true,
+            preserveFrameChildrenOrder: true,
           }).duplicatedElements,
         };
       });

packages/excalidraw/components/PasteChartDialog.tsx

@@ -72,20 +72,18 @@ const ChartPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      svg = await exportToSvg({
+      svg = await exportToSvg(
-        data: {
+        elements,
-          elements,
+        {
-          appState: {
+          exportBackground: false,
-            exportBackground: false,
+          viewBackgroundColor: "#fff",
-            viewBackgroundColor: "#fff",
+          exportWithDarkMode: theme === "dark",
-          },
-          files: null,
         },
-        config: {
+        null, // files
+        {
           skipInliningFonts: true,
-          theme,
         },
-      });
+      );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);
@@ -136,20 +134,18 @@ const PlainTextPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      const svg = await exportToSvg({
+      const svg = await exportToSvg(
-        data: {
+        [textElement],
-          elements: [textElement],
+        {
-          appState: {
+          exportBackground: false,
-            exportBackground: false,
+          viewBackgroundColor: "#fff",
-            viewBackgroundColor: "#fff",
+          exportWithDarkMode: theme === "dark",
-          },
-          files: null,
         },
-        config: {
+        null,
+        {
           skipInliningFonts: true,
-          theme,
         },
-      });
+      );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);

packages/excalidraw/components/PublishLibrary.tsx

@@ -1,3 +1,4 @@
+import { exportToCanvas, exportToSvg } from "@excalidraw/utils/export";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
@@ -12,7 +13,6 @@ import {
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import { canvasToBlob, resizeImageFile } from "../data/blob";
 import { t } from "../i18n";
-import { exportToCanvas, exportToSvg } from "../scene/export";
 
 import { Dialog } from "./Dialog";
 import DialogActionButton from "./DialogActionButton";
@@ -63,14 +63,9 @@ const generatePreviewImage = async (libraryItems: LibraryItems) => {
   // ---------------------------------------------------------------------------
   for (const [index, item] of libraryItems.entries()) {
     const itemCanvas = await exportToCanvas({
-      data: {
+      elements: item.elements,
-        elements: item.elements,
+      files: null,
-        files: null,
+      maxWidthOrHeight: BOX_SIZE,
-        appState: {},
-      },
-      config: {
-        maxWidthOrHeight: BOX_SIZE,
-      },
     });
 
     const { width, height } = itemCanvas;
@@ -132,18 +127,14 @@ const SingleLibraryItem = ({
     }
     (async () => {
       const svg = await exportToSvg({
-        data: {
+        elements: libItem.elements,
-          elements: libItem.elements,
+        appState: {
-          appState: {
+          ...appState,
-            ...appState,
+          viewBackgroundColor: "#fff",
-            viewBackgroundColor: "#fff",
+          exportBackground: true,
-            exportBackground: true,
-          },
-          files: null,
-        },
-        config: {
-          skipInliningFonts: true,
         },
+        files: null,
+        skipInliningFonts: true,
       });
       node.innerHTML = svg.outerHTML;
     })();

packages/excalidraw/components/RadioGroup.scss

@@ -26,13 +26,16 @@
     background: var(--RadioGroup-background);
     border: 1px solid var(--RadioGroup-border);
 
+    gap: 2px;
+
     &__choice {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
+      min-width: 20px;
       height: 24px;
+      padding: 0 0.375rem;
 
       color: var(--RadioGroup-choice-color-off);
       background: var(--RadioGroup-choice-background-off);

packages/excalidraw/components/Range.tsx

@@ -1,74 +1,78 @@
 import React, { useEffect } from "react";
 
-import { t } from "../i18n";
-
 import "./Range.scss";
 
-import type { AppClassProperties } from "../types";
-
 export type RangeProps = {
-  updateData: (value: number) => void;
+  label: React.ReactNode;
-  app: AppClassProperties;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLabel?: React.ReactNode;
+  hasCommonValue?: boolean;
   testId?: string;
 };
 
-export const Range = ({ updateData, app, testId }: RangeProps) => {
+export const Range = ({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 10,
+  minLabel = min,
+  hasCommonValue = true,
+  testId,
+}: RangeProps) => {
   const rangeRef = React.useRef<HTMLInputElement>(null);
   const valueRef = React.useRef<HTMLDivElement>(null);
-  const selectedElements = app.scene.getSelectedElements(app.state);
-  let hasCommonOpacity = true;
-  const firstElement = selectedElements.at(0);
-  const leastCommonOpacity = selectedElements.reduce((acc, element) => {
-    if (acc != null && acc !== element.opacity) {
-      hasCommonOpacity = false;
-    }
-    if (acc == null || acc > element.opacity) {
-      return element.opacity;
-    }
-    return acc;
-  }, firstElement?.opacity ?? null);
-
-  const value = leastCommonOpacity ?? app.state.currentItemOpacity;
 
   useEffect(() => {
     if (rangeRef.current && valueRef.current) {
       const rangeElement = rangeRef.current;
       const valueElement = valueRef.current;
       const inputWidth = rangeElement.offsetWidth;
-      const thumbWidth = 15; // 15 is the width of the thumb
+      const thumbWidth =
+        parseFloat(
+          getComputedStyle(rangeElement).getPropertyValue(
+            "--slider-thumb-size",
+          ),
+        ) || 16;
+      const progress = ((value - min) / (max - min || 1)) * 100;
       const position =
-        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+        (progress / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
       valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${progress}%, var(--button-bg) ${progress}%, var(--button-bg) 100%)`;
     }
-  }, [value]);
+  }, [max, min, value]);
 
   return (
     <label className="control-label">
-      {t("labels.opacity")}
+      {label}
       <div className="range-wrapper">
         <input
           style={{
-            ["--color-slider-track" as string]: hasCommonOpacity
+            ["--color-slider-track" as string]: hasCommonValue
               ? undefined
               : "var(--button-bg)",
           }}
           ref={rangeRef}
           type="range"
-          min="0"
+          min={min}
-          max="100"
+          max={max}
-          step="10"
+          step={step}
           onChange={(event) => {
-            updateData(+event.target.value);
+            onChange(+event.target.value);
           }}
           value={value}
           className="range-input"
           data-testid={testId}
         />
         <div className="value-bubble" ref={valueRef}>
-          {value !== 0 ? value : null}
+          {value !== min ? value : null}
         </div>
-        <div className="zero-label">0</div>
+        <div className="zero-label">{minLabel}</div>
       </div>
     </label>
   );

packages/excalidraw/components/SVGLayer.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 
 import "./SVGLayer.scss";
 
-import type { Trail } from "../animated-trail";
+import type { Trail } from "../animatedTrail";
 
 type SVGLayerProps = {
   trails: Trail[];

packages/excalidraw/components/Stats/Dimension.tsx

@@ -206,7 +206,6 @@ const handleDimensionChange: DragInputCallbackType<
           scene.getElementsIncludingDeleted(),
           nextElementsInFrame,
           latestElement,
-          app,
         );
 
         scene.replaceAllElements(updatedElements);
@@ -302,7 +301,6 @@ const handleDragFinished: DragFinishedCallbackType = ({
       app.scene.getElementsIncludingDeleted(),
       nextElementsInFrame,
       latestElement,
-      app,
     );
 
     app.scene.replaceAllElements(updatedElements);

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -261,7 +261,6 @@ const handleDimensionChange: DragInputCallbackType<
               scene.getElementsIncludingDeleted(),
               nextElementsInFrame,
               latestElement,
-              app,
             );
 
             scene.replaceAllElements(updatedElements);
@@ -416,7 +415,6 @@ const handleDragFinished: DragFinishedCallbackType = ({
       app.scene.getElementsIncludingDeleted(),
       nextElementsInFrame,
       latestElement,
-      app,
     );
 
     app.scene.replaceAllElements(updatedElements);

packages/excalidraw/components/Stats/stats.test.tsx

@@ -361,12 +361,10 @@ describe("stats for a non-generic element", () => {
     mouse.clickAt(20, 30);
     const editor = await getTextEditor();
     updateTextEditor(editor, "Hello!");
-    act(() => {
+    Keyboard.exitTextEditor(editor);
-      editor.blur();
-    });
 
     const text = h.elements[0] as ExcalidrawTextElement;
-    mouse.clickOn(text);
+    API.setSelectedElements([text]);
 
     elementStats = stats?.querySelector("#elementStats");
 
@@ -752,7 +750,7 @@ describe("frame resizing behavior", () => {
       x: 0,
       y: 0,
       width: 100,
-      height: 100,
+      height: 103,
     });
 
     // Create a rectangle outside the frame

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,4 +1,8 @@
-import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "@excalidraw/common";
+import {
+  DEFAULT_EXPORT_PADDING,
+  EDITOR_LS_KEYS,
+  THEME,
+} from "@excalidraw/common";
 
 import { convertToExcalidrawElements } from "@excalidraw/element";
 
@@ -101,16 +105,14 @@ export const convertMermaidToExcalidraw = async ({
     };
 
     const canvas = await exportToCanvas({
-      data: {
+      elements: data.current.elements,
-        elements: data.current.elements,
+      files: data.current.files,
-        files: data.current.files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
-      },
+      maxWidthOrHeight:
-      config: {
+        Math.max(parent.offsetWidth, parent.offsetHeight) *
-        padding: DEFAULT_EXPORT_PADDING,
+        window.devicePixelRatio,
-        maxWidthOrHeight:
+      appState: {
-          Math.max(parent.offsetWidth, parent.offsetHeight) *
+        exportWithDarkMode: theme === THEME.DARK,
-          window.devicePixelRatio,
-        theme,
       },
     });
 

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -39,7 +39,7 @@ type InteractiveCanvasProps = {
   visibleElements: readonly NonDeletedExcalidrawElement[];
   selectedElements: readonly NonDeletedExcalidrawElement[];
   allElementsMap: NonDeletedSceneElementsMap;
-  sceneNonce: number | undefined;
+  canvasNonce: string;
   selectionNonce: number | undefined;
   scale: number;
   appState: InteractiveCanvasAppState;
@@ -54,6 +54,7 @@ type InteractiveCanvasProps = {
     DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"],
     undefined
   >;
+  onClick: Exclude<DOMAttributes<HTMLCanvasElement>["onClick"], undefined>;
   onPointerMove: Exclude<
     DOMAttributes<HTMLCanvasElement>["onPointerMove"],
     undefined
@@ -213,6 +214,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
       height={props.appState.height * props.scale}
       ref={props.handleCanvasRef}
       onContextMenu={props.onContextMenu}
+      onClick={props.onClick}
       onPointerMove={props.onPointerMove}
       onPointerUp={props.onPointerUp}
       onPointerCancel={props.onPointerCancel}
@@ -277,10 +279,10 @@ const areEqual = (
   // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
   if (
     prevProps.selectionNonce !== nextProps.selectionNonce ||
-    prevProps.sceneNonce !== nextProps.sceneNonce ||
+    prevProps.canvasNonce !== nextProps.canvasNonce ||
     prevProps.scale !== nextProps.scale ||
     // we need to memoize on elementsMap because they may have renewed
-    // even if sceneNonce didn't change (e.g. we filter elements out based
+    // even if canvasNonce didn't change (e.g. we filter elements out based
     // on appState)
     prevProps.elementsMap !== nextProps.elementsMap ||
     prevProps.visibleElements !== nextProps.visibleElements ||

packages/excalidraw/components/canvases/NewElementCanvas.tsx

@@ -14,6 +14,7 @@ import type { RoughCanvas } from "roughjs/bin/canvas";
 
 interface NewElementCanvasProps {
   appState: AppState;
+  newElement: NonNullable<AppState["newElement"]>;
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   scale: number;
@@ -31,7 +32,7 @@ const NewElementCanvas = (props: NewElementCanvasProps) => {
       {
         canvas: canvasRef.current,
         scale: props.scale,
-        newElement: props.appState.newElement,
+        newElement: props.newElement,
         elementsMap: props.elementsMap,
         allElementsMap: props.allElementsMap,
         rc: props.rc,

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -23,7 +23,7 @@ type StaticCanvasProps = {
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
-  sceneNonce: number | undefined;
+  canvasNonce: string;
   selectionNonce: number | undefined;
   scale: number;
   appState: StaticCanvasAppState;
@@ -110,10 +110,10 @@ const areEqual = (
   nextProps: StaticCanvasProps,
 ) => {
   if (
-    prevProps.sceneNonce !== nextProps.sceneNonce ||
+    prevProps.canvasNonce !== nextProps.canvasNonce ||
     prevProps.scale !== nextProps.scale ||
     // we need to memoize on elementsMap because they may have renewed
-    // even if sceneNonce didn't change (e.g. we filter elements out based
+    // even if canvasNonce didn't change (e.g. we filter elements out based
     // on appState)
     prevProps.elementsMap !== nextProps.elementsMap ||
     prevProps.visibleElements !== nextProps.visibleElements

packages/excalidraw/components/dropdownMenu/DropdownMenu.scss

@@ -2,7 +2,7 @@
 
 .excalidraw {
   .dropdown-menu {
-    max-width: 16rem;
+    max-width: 20rem;
     z-index: 1;
 
     &--placement-top {

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx

@@ -1,4 +1,5 @@
 import { useEditorInterface } from "../App";
+import { Ellipsify } from "../Ellipsify";
 import { RadioGroup } from "../RadioGroup";
 
 type Props<T> = {
@@ -12,6 +13,7 @@ type Props<T> = {
   onChange: (value: T) => void;
   children: React.ReactNode;
   name: string;
+  icon?: React.ReactNode;
 };
 
 const DropdownMenuItemContentRadio = <T,>({
@@ -21,13 +23,17 @@ const DropdownMenuItemContentRadio = <T,>({
   choices,
   children,
   name,
+  icon,
 }: Props<T>) => {
   const editorInterface = useEditorInterface();
 
   return (
     <>
       <div className="dropdown-menu-item-base dropdown-menu-item-bare">
-        <label className="dropdown-menu-item__text">{children}</label>
+        {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
+        <label className="dropdown-menu-item__text">
+          <Ellipsify>{children}</Ellipsify>
+        </label>
         <RadioGroup
           name={name}
           value={value}

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -39,7 +39,13 @@ import DropdownMenuItemCheckbox from "../dropdownMenu/DropdownMenuItemCheckbox";
 import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
 import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
-import { GithubIcon, DiscordIcon, XBrandIcon, settingsIcon } from "../icons";
+import {
+  GithubIcon,
+  DiscordIcon,
+  XBrandIcon,
+  settingsIcon,
+  emptyIcon,
+} from "../icons";
 import {
   boltIcon,
   DeviceDesktopIcon,
@@ -427,6 +433,39 @@ const PreferencesToggleToolLockItem = () => {
   );
 };
 
+const PreferencesBoxSelectionModeItem = () => {
+  const { t } = useI18n();
+  const appState = useUIAppState();
+  const setAppState = useExcalidrawSetAppState();
+
+  return (
+    <DropdownMenuItemContentRadio<"contain" | "overlap">
+      name="boxSelectionMode"
+      icon={emptyIcon}
+      value={appState.boxSelectionMode}
+      onChange={(value) => {
+        setAppState({
+          boxSelectionMode: value,
+        });
+      }}
+      choices={[
+        {
+          value: "contain",
+          label: t("labels.boxSelectionContain"),
+          ariaLabel: t("labels.boxSelectionContain"),
+        },
+        {
+          value: "overlap",
+          label: t("labels.boxSelectionOverlap"),
+          ariaLabel: t("labels.boxSelectionOverlap"),
+        },
+      ]}
+    >
+      {t("labels.boxSelectionMode")}
+    </DropdownMenuItemContentRadio>
+  );
+};
+
 const PreferencesToggleSnapModeItem = () => {
   const { t } = useI18n();
   const actionManager = useExcalidrawActionManager();
@@ -568,6 +607,7 @@ export const Preferences = ({
       <DropdownMenuSub.Content className="excalidraw-main-menu-preferences-submenu">
         {children || (
           <>
+            <PreferencesBoxSelectionModeItem />
             <PreferencesToggleToolLockItem />
             <PreferencesToggleSnapModeItem />
             <PreferencesToggleGridModeItem />
@@ -585,6 +625,7 @@ export const Preferences = ({
 };
 
 Preferences.ToggleToolLock = PreferencesToggleToolLockItem;
+Preferences.BoxSelectionMode = PreferencesBoxSelectionModeItem;
 Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
 Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
 Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;

packages/excalidraw/components/shapes.tsx

@@ -119,15 +119,12 @@ export const SHAPES = [
 export const getToolbarTools = (app: AppClassProperties) => {
   return app.state.preferredSelectionTool.type === "lasso"
     ? ([
+        SHAPES[0],
         {
+          ...SHAPES[1],
           value: "lasso",
-          icon: SelectionIcon,
-          key: KEYS.V,
-          numericKey: KEYS["1"],
-          fillable: true,
-          toolbar: true,
         },
-        ...SHAPES.slice(1),
+        ...SHAPES.slice(2),
       ] as const)
     : SHAPES;
 };

packages/excalidraw/css/styles.scss

@@ -814,6 +814,14 @@ body.excalidraw-cursor-resize * {
   .excalidraw__embeddable__outer {
     width: 100%;
     height: 100%;
+  }
+
+  .excalidraw__embeddable__content {
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+
+    &,
     & > * {
       border-radius: var(--embeddable-radius);
     }

packages/excalidraw/data/blob.ts

@@ -311,6 +311,48 @@ export const dataURLToString = (dataURL: DataURL) => {
   return base64ToString(dataURL.slice(dataURL.indexOf(",") + 1));
 };
 
+const getImageFileDimensions = async (file: File) => {
+  const browserURL = typeof window !== "undefined" ? window.URL : undefined;
+  let objectURL: string | null = null;
+  let imageSource: string;
+
+  try {
+    imageSource = browserURL?.createObjectURL
+      ? (objectURL = browserURL.createObjectURL(file))
+      : await getDataURL(file);
+  } catch {
+    objectURL = null;
+    imageSource = await getDataURL(file);
+  }
+
+  return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    const image = new Image();
+
+    const cleanup = () => {
+      image.onload = null;
+      image.onerror = null;
+
+      if (objectURL && browserURL?.revokeObjectURL) {
+        browserURL.revokeObjectURL(objectURL);
+      }
+    };
+
+    image.onload = () => {
+      cleanup();
+      resolve({
+        width: image.naturalWidth || image.width,
+        height: image.naturalHeight || image.height,
+      });
+    };
+    image.onerror = (error) => {
+      cleanup();
+      reject(error);
+    };
+
+    image.src = imageSource;
+  });
+};
+
 export const resizeImageFile = async (
   file: File,
   opts: {
@@ -324,6 +366,20 @@ export const resizeImageFile = async (
     return file;
   }
 
+  if (!isSupportedImageFile(file)) {
+    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
+  }
+
+  if (!opts.outputType || opts.outputType === file.type) {
+    const dimensions = await getImageFileDimensions(file);
+
+    if (
+      Math.max(dimensions.width, dimensions.height) <= opts.maxWidthOrHeight
+    ) {
+      return file;
+    }
+  }
+
   const [pica, imageBlobReduce] = await Promise.all([
     import("pica").then((res) => res.default),
     // a wrapper for pica for better API
@@ -347,10 +403,6 @@ export const resizeImageFile = async (
     };
   }
 
-  if (!isSupportedImageFile(file)) {
-    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
-  }
-
   return new File(
     [await reduce.toBlob(file, { max: opts.maxWidthOrHeight, alpha: true })],
     file.name,

packages/excalidraw/data/index.ts

@@ -4,9 +4,9 @@ import {
   IMAGE_MIME_TYPES,
   isFirefox,
   MIME_TYPES,
-  THEME,
   cloneJSON,
   SVG_DOCUMENT_PREAMBLE,
+  arrayToMap,
 } from "@excalidraw/common";
 
 import { getNonDeletedElements } from "@excalidraw/element";
@@ -50,6 +50,7 @@ export const prepareElementsForExport = (
   exportSelectionOnly: boolean,
 ) => {
   elements = getNonDeletedElements(elements);
+  const elementsMap = arrayToMap(elements);
 
   const isExportingSelection =
     exportSelectionOnly &&
@@ -72,7 +73,11 @@ export const prepareElementsForExport = (
       isFrameLikeElement(exportedElements[0])
     ) {
       exportingFrame = exportedElements[0];
-      exportedElements = getElementsOverlappingFrame(elements, exportingFrame);
+      exportedElements = getElementsOverlappingFrame(
+        elements,
+        exportingFrame,
+        elementsMap,
+      );
     } else if (exportedElements.length > 1) {
       exportedElements = getSelectedElements(
         elements,
@@ -116,29 +121,20 @@ export const exportCanvas = async (
   if (elements.length === 0) {
     throw new Error(t("alerts.cannotExportEmptyCanvas"));
   }
-
-  const theme = appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT;
-
   if (type === "svg" || type === "clipboard-svg") {
-    const svgPromise = exportToSvg({
+    const svgPromise = exportToSvg(
-      data: {
+      elements,
-        elements,
+      {
-        appState: {
+        exportBackground,
-          ...appState,
+        exportWithDarkMode: appState.exportWithDarkMode,
-          exportBackground,
+        viewBackgroundColor,
-          exportEmbedScene: appState.exportEmbedScene && type === "svg",
+        exportPadding,
-        },
+        exportScale: appState.exportScale,
-        files,
+        exportEmbedScene: appState.exportEmbedScene && type === "svg",
       },
-      config: {
+      files,
-        padding: exportPadding,
+      { exportingFrame },
-        exportingFrame,
+    );
-        theme,
-        canvasBackgroundColor: exportBackground
-          ? viewBackgroundColor
-          : "transparent",
-      },
-    });
 
     if (type === "svg") {
       return fileSave(
@@ -168,19 +164,11 @@ export const exportCanvas = async (
     }
   }
 
-  const tempCanvas = exportToCanvas({
+  const tempCanvas = exportToCanvas(elements, appState, files, {
-    data: {
+    exportBackground,
-      elements,
+    viewBackgroundColor,
-      appState,
+    exportPadding,
-      files,
+    exportingFrame,
-    },
-    config: {
-      canvasBackgroundColor: exportBackground ? viewBackgroundColor : false,
-      padding: exportPadding,
-      theme,
-      scale: appState.exportScale,
-      exportingFrame,
-    },
   });
 
   if (type === "png") {

packages/excalidraw/data/resave.ts

@@ -20,10 +20,6 @@ export const resaveAsImageWithScene = async (
 ) => {
   const fileHandleType = getFileHandleType(fileHandle);
 
-  if (Math.random() < 1) {
-    throw new Error("OLALALALA");
-  }
-
   if (!isImageFileHandleType(fileHandleType)) {
     throw new Error(
       "fileHandle should exist and should be of type svg or png when resaving",

packages/excalidraw/data/restore.ts

@@ -1,4 +1,4 @@
-import { isFiniteNumber, pointFrom } from "@excalidraw/math";
+import { isFiniteNumber, isValidPoint, pointFrom } from "@excalidraw/math";
 
 import {
   type CombineBrandsIfNeeded,
@@ -96,6 +96,69 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
+const MAX_ARROW_PX = 75_000;
+
+const restoreLinearElementPoints = (
+  points: unknown,
+  width: unknown,
+  height: unknown,
+): LocalPoint[] => {
+  const restoredPoints = Array.isArray(points)
+    ? points.reduce<LocalPoint[]>((acc, point) => {
+        if (isValidPoint(point)) {
+          acc.push(pointFrom<LocalPoint>(point[0], point[1]));
+        }
+        return acc;
+      }, [])
+    : [];
+
+  return restoredPoints.length < 2
+    ? [
+        pointFrom<LocalPoint>(0, 0),
+        pointFrom<LocalPoint>(
+          isFiniteNumber(width) ? width : 0,
+          isFiniteNumber(height) ? height : 0,
+        ),
+      ]
+    : restoredPoints;
+};
+
+const restoreFreedrawPoints = (
+  points: unknown,
+  pressures: unknown,
+): {
+  points: LocalPoint[];
+  pressures: number[];
+} => {
+  if (!Array.isArray(points)) {
+    return {
+      points: [],
+      pressures: [],
+    };
+  }
+
+  const pressureValues: readonly unknown[] = Array.isArray(pressures)
+    ? pressures
+    : [];
+  const restoredPoints: LocalPoint[] = [];
+  const restoredPressures: number[] = [];
+
+  points.forEach((point, index) => {
+    if (isValidPoint(point)) {
+      restoredPoints.push(pointFrom<LocalPoint>(point[0], point[1]));
+      if (index in pressureValues) {
+        const pressure = pressureValues[index];
+        restoredPressures.push(isFiniteNumber(pressure) ? pressure : 0.5);
+      }
+    }
+  });
+
+  return {
+    points: restoredPoints,
+    pressures: restoredPressures,
+  };
+};
+
 export const AllowedExcalidrawActiveTools: Record<
   AppState["activeTool"]["type"],
   boolean
@@ -251,7 +314,9 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
       };
     }
 
-    console.error(`could not repair binding for element`);
+    console.error(
+      `Could not repair binding for element "${boundElement?.id}" out of (${elementsMap?.size}) elements`,
+    );
   } catch (error) {
     console.error("Error repairing binding:", error);
   }
@@ -410,10 +475,15 @@ export const restoreElement = (
 
       return element;
     case "freedraw": {
+      const { points, pressures } = restoreFreedrawPoints(
+        element.points,
+        element.pressures,
+      );
+
       return restoreElementWithProperties(element, {
-        points: element.points,
+        points,
         simulatePressure: element.simulatePressure,
-        pressures: element.pressures,
+        pressures,
       });
     }
     case "image":
@@ -431,14 +501,20 @@ export const restoreElement = (
       const endArrowhead = normalizeArrowhead(element.endArrowhead);
       let x = element.x;
       let y = element.y;
-      let points = // migrate old arrow model to new one
+      let points = restoreLinearElementPoints(
-        !Array.isArray(element.points) || element.points.length < 2
+        element.points,
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+        element.width,
-          : element.points;
+        element.height,
+      );
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
         ({ points, x, y } =
-          LinearElementEditor.getNormalizeElementPointsAndCoords(element));
+          LinearElementEditor.getNormalizeElementPointsAndCoords({
+            ...element,
+            points,
+            x: x ?? 0,
+            y: y ?? 0,
+          } as ExcalidrawLinearElement));
       }
 
       return restoreElementWithProperties(element, {
@@ -452,7 +528,7 @@ export const restoreElement = (
         y,
         ...(isLineElement(element)
           ? {
-              polygon: isValidPolygon(element.points)
+              polygon: isValidPolygon(points)
                 ? element.polygon ?? false
                 : false,
             }
@@ -465,24 +541,31 @@ export const restoreElement = (
         element.endArrowhead === undefined
           ? "arrow"
           : normalizeArrowhead(element.endArrowhead);
-      const x: number | undefined = element.x;
+      const x = element.x as number | undefined;
-      const y: number | undefined = element.y;
+      const y = element.y as number | undefined;
-      const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
+      const points = restoreLinearElementPoints(
-        !Array.isArray(element.points) || element.points.length < 2
+        element.points,
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
+        element.width,
-          : element.points;
+        element.height,
+      );
+      const elementWithRestoredPoints = {
+        ...element,
+        points,
+        x: x ?? 0,
+        y: y ?? 0,
+      } as ExcalidrawArrowElement;
 
       const base = {
         type: element.type,
         startBinding: repairBinding(
-          element as ExcalidrawArrowElement,
+          elementWithRestoredPoints,
           element.startBinding,
           targetElementsMap,
           existingElementsMap,
           "start",
         ),
         endBinding: repairBinding(
-          element as ExcalidrawArrowElement,
+          elementWithRestoredPoints,
           element.endBinding,
           targetElementsMap,
           existingElementsMap,
@@ -491,8 +574,8 @@ export const restoreElement = (
         startArrowhead,
         endArrowhead,
         points,
-        x,
+        x: x ?? 0,
-        y,
+        y: y ?? 0,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
       };
@@ -511,12 +594,44 @@ export const restoreElement = (
           })
         : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
 
-      return {
+      const normalizedRestoredElement = {
         ...restoredElement,
         ...LinearElementEditor.getNormalizeElementPointsAndCoords(
           restoredElement,
         ),
       };
+
+      // Last resort fix for extremely large arrows
+      if (
+        normalizedRestoredElement.width > MAX_ARROW_PX ||
+        normalizedRestoredElement.height > MAX_ARROW_PX
+      ) {
+        console.error(
+          `Removing extremely large arrow ${
+            normalizedRestoredElement.id
+          } (type: ${
+            isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
+          }, width: ${normalizedRestoredElement.width}, height: ${
+            normalizedRestoredElement.height
+          }, x: ${normalizedRestoredElement.x}, y: ${
+            normalizedRestoredElement.y
+          })`,
+        );
+        return {
+          ...normalizedRestoredElement,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          points: [
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
+          ],
+          isDeleted: true,
+        };
+      }
+
+      return normalizedRestoredElement;
     }
 
     // generic elements
@@ -664,6 +779,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
   const existingElementsMap = existingElements
     ? arrayToMap(existingElements)
     : null;
+
   const restoredElements = syncInvalidIndices(
     (targetElements || []).reduce((elements, element) => {
       // filtering out selection, which is legacy, no longer kept in elements,
@@ -760,7 +876,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
     }
   }
 
-  // NOTE (mtolmacs): Temporary fix for extremely large arrows
+  // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
   // Need to iterate again so we have attached text nodes in elementsMap
   return restoredElements.map((element) => {
     if (
@@ -934,6 +1050,12 @@ export const restoreAppState = (
         : defaultValue;
   }
 
+  const boxSelectionMode =
+    appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
+  if (boxSelectionMode !== undefined) {
+    nextAppState.boxSelectionMode = boxSelectionMode;
+  }
+
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",

packages/excalidraw/eraser/index.ts

@@ -33,9 +33,7 @@ import type { Bounds } from "@excalidraw/common";
 import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
-import { AnimatedTrail } from "../animated-trail";
+import { AnimatedTrail } from "../animatedTrail";
-
-import type { AnimationFrameHandler } from "../animation-frame-handler";
 
 import type App from "../components/App";
 
@@ -43,8 +41,8 @@ export class EraserTrail extends AnimatedTrail {
   private elementsToErase: Set<ExcalidrawElement["id"]> = new Set();
   private groupsToErase: Set<ExcalidrawElement["id"]> = new Set();
 
-  constructor(animationFrameHandler: AnimationFrameHandler, app: App) {
+  constructor(app: App) {
-    super(animationFrameHandler, app, {
+    super(app, {
       streamline: 0.2,
       size: 5,
       keepHead: true,

packages/excalidraw/hooks/useLibraryItemSvg.ts

@@ -1,9 +1,8 @@
+import { exportToSvg } from "@excalidraw/utils/export";
 import { useEffect, useState } from "react";
 
 import { COLOR_PALETTE } from "@excalidraw/common";
 
-import { exportToSvg } from "../scene/export";
-
 import { atom, useAtom } from "../editor-jotai";
 
 import type { LibraryItem } from "../types";
@@ -13,18 +12,17 @@ export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 export const libraryItemSvgsCache = atom<SvgCache>(new Map());
 
 const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
+  // TODO should pass theme (appState.exportWithDark) - we're still using
+  // CSS filter here
   return await exportToSvg({
-    data: {
+    elements,
-      elements,
+    appState: {
-      appState: {
+      exportBackground: false,
-        exportBackground: false,
+      viewBackgroundColor: COLOR_PALETTE.white,
-        viewBackgroundColor: COLOR_PALETTE.white,
-      },
-      files: null,
-    },
-    config: {
-      skipInliningFonts: true,
     },
+    files: null,
+    renderEmbeddables: false,
+    skipInliningFonts: true,
   });
 };
 

packages/excalidraw/index-node.ts

@@ -1,3 +1,4 @@
+import { getDefaultAppState } from "./appState";
 import { exportToCanvas } from "./scene/export";
 
 const fs = require("fs");
@@ -58,23 +59,26 @@ const elements = [
 registerFont("./public/Virgil.woff2", { family: "Virgil" });
 registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
 
-(async () => {
+const canvas = exportToCanvas(
-  const canvas = await exportToCanvas({
+  elements as any,
-    data: {
+  {
-      elements: elements as any,
+    ...getDefaultAppState(),
-      appState: {},
+    offsetTop: 0,
-      files: {},
+    offsetLeft: 0,
-    },
+    width: 0,
-    config: {
+    height: 0,
-      canvasBackgroundColor: "#ffffff",
+  },
-      createCanvas,
+  {}, // files
-    },
+  {
-  });
+    exportBackground: true,
+    viewBackgroundColor: "#ffffff",
+  },
+  createCanvas,
+);
 
-  const out = fs.createWriteStream("test.png");
+const out = fs.createWriteStream("test.png");
-  const stream = (canvas as any).createPNGStream();
+const stream = (canvas as any).createPNGStream();
-  stream.pipe(out);
+stream.pipe(out);
-  out.on("finish", () => {
+out.on("finish", () => {
-    console.info("test.png was created.");
+  console.info("test.png was created.");
-  });
+});
-})();

packages/excalidraw/index.tsx

@@ -6,7 +6,11 @@ import React, {
   useState,
 } from "react";
 
-import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common";
+import {
+  DEFAULT_IMAGE_OPTIONS,
+  DEFAULT_UI_OPTIONS,
+  isShallowEqual,
+} from "@excalidraw/common";
 
 import App, {
   ExcalidrawAPIContext,
@@ -95,9 +99,11 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
+    resolveRenderOpacity,
     aiEnabled,
     showDeprecatedFonts,
     renderScrollbars,
+    imageOptions,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -128,6 +134,13 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     UIOptions.canvasActions.toggleTheme = true;
   }
 
+  const normalizedImageOptions: AppProps["imageOptions"] = {
+    maxFileSizeBytes:
+      imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
+    maxWidthOrHeight:
+      imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight,
+  };
+
   const setExcalidrawAPI = useContext(ExcalidrawAPISetContext);
 
   const onExcalidrawAPIRef = useRef(onExcalidrawAPI);
@@ -205,9 +218,11 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onDuplicate={onDuplicate}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
+          resolveRenderOpacity={resolveRenderOpacity}
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
           renderScrollbars={renderScrollbars}
+          imageOptions={normalizedImageOptions}
         >
           {children}
         </App>
@@ -225,11 +240,13 @@ const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
   const {
     initialData: prevInitialData,
     UIOptions: prevUIOptions = {},
+    imageOptions: prevImageOptions,
     ...prev
   } = prevProps;
   const {
     initialData: nextInitialData,
     UIOptions: nextUIOptions = {},
+    imageOptions: nextImageOptions,
     ...next
   } = nextProps;
 
@@ -273,7 +290,17 @@ const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
     return prevUIOptions[key] === nextUIOptions[key];
   });
 
-  return isUIOptionsSame && isShallowEqual(prev, next);
+  const isImageOptionsSame =
+    (prevImageOptions?.maxWidthOrHeight ??
+      DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) ===
+      (nextImageOptions?.maxWidthOrHeight ??
+        DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) &&
+    (prevImageOptions?.maxFileSizeBytes ??
+      DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) ===
+      (nextImageOptions?.maxFileSizeBytes ??
+        DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes);
+
+  return isUIOptionsSame && isImageOptionsSame && isShallowEqual(prev, next);
 };
 
 export const Excalidraw = React.memo(ExcalidrawBase, areEqual);
@@ -304,9 +331,7 @@ export {
   exportToBlob,
   exportToSvg,
   exportToClipboard,
-} from "./scene/export";
+} from "@excalidraw/utils/export";
-
-export type { ExportSceneData, ExportSceneConfig } from "./scene/export";
 
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export {
@@ -384,6 +409,8 @@ export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToC
 export { getDataURL } from "./data/blob";
 export { isElementLink } from "@excalidraw/element";
 
+export { Fonts } from "./fonts/Fonts";
+
 export { setCustomTextMetricsProvider } from "@excalidraw/element";
 
 export { CommandPalette } from "./components/CommandPalette/CommandPalette";

packages/excalidraw/laserTrails.ts

@@ -2,27 +2,20 @@ import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
 
 import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
 
-import { AnimatedTrail } from "./animated-trail";
+import { AnimatedTrail } from "./animatedTrail";
 import { getClientColor } from "./clients";
 
-import type { Trail } from "./animated-trail";
+import type { Trail } from "./animatedTrail";
-import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 import type { SocketId } from "./types";
 
 export class LaserTrails implements Trail {
   public localTrail: AnimatedTrail;
   private collabTrails = new Map<SocketId, AnimatedTrail>();
-
   private container?: SVGSVGElement;
 
-  constructor(
+  constructor(private app: App) {
-    private animationFrameHandler: AnimationFrameHandler,
+    this.localTrail = new AnimatedTrail(app, {
-    private app: App,
-  ) {
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-
-    this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
       ...this.getTrailOptions(),
       fill: () => DEFAULT_LASER_COLOR,
     });
@@ -63,30 +56,45 @@ export class LaserTrails implements Trail {
 
   start(container: SVGSVGElement) {
     this.container = container;
-
-    this.animationFrameHandler.start(this);
     this.localTrail.start(container);
   }
 
   stop() {
-    this.animationFrameHandler.stop(this);
     this.localTrail.stop();
+    this.stopCollabTrails();
+    this.container = undefined;
   }
 
-  onFrame() {
+  private stopCollabTrails(collaborators?: App["state"]["collaborators"]) {
-    this.updateCollabTrails();
+    for (const [key, trail] of this.collabTrails) {
+      const collaborator = collaborators?.get(key);
+
+      if (!collaborator) {
+        trail.stop();
+        this.collabTrails.delete(key);
+      }
+    }
   }
 
-  private updateCollabTrails() {
+  updateCollabTrails(collaborators: App["state"]["collaborators"]) {
-    if (!this.container || this.app.state.collaborators.size === 0) {
+    this.stopCollabTrails(collaborators);
+
+    if (!this.container || collaborators.size === 0) {
       return;
     }
 
-    for (const [key, collaborator] of this.app.state.collaborators.entries()) {
+    for (const [key, collaborator] of collaborators.entries()) {
-      let trail!: AnimatedTrail;
+      // Current user has their own trail drawn via localTrail
+      if (collaborator.isCurrentUser) {
+        continue;
+      }
 
-      if (!this.collabTrails.has(key)) {
+      // IDEA: Use the collaborator pointer coordinates to trace out the
-        trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
+      // laser pointer trail when 1) the selected collab tool is the laser
+      // pointer and 2) the collab pointer button is in the "down" state.
+      let trail = this.collabTrails.get(key);
+      if (!trail) {
+        trail = new AnimatedTrail(this.app, {
           ...this.getTrailOptions(),
           fill: () =>
             collaborator.pointer?.laserColor ||
@@ -95,36 +103,33 @@ export class LaserTrails implements Trail {
         trail.start(this.container);
 
         this.collabTrails.set(key, trail);
-      } else {
-        trail = this.collabTrails.get(key)!;
       }
 
       if (collaborator.pointer && collaborator.pointer.tool === "laser") {
-        if (collaborator.button === "down" && !trail.hasCurrentTrail) {
+        const buttonDown = collaborator.button === "down";
+        const buttonUp = collaborator.button === "up";
+        const hasTrail = trail.hasCurrentTrail;
+
+        // Initialize a new trail
+        if (buttonDown && !hasTrail) {
           trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
         }
 
-        if (
+        // Add only original points
-          collaborator.button === "down" &&
+        const lastPointOriginal = !trail.hasLastPoint(
-          trail.hasCurrentTrail &&
+          collaborator.pointer.x,
-          !trail.hasLastPoint(collaborator.pointer.x, collaborator.pointer.y)
+          collaborator.pointer.y,
-        ) {
+        );
+        if (buttonDown && lastPointOriginal) {
           trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
         }
 
-        if (collaborator.button === "up" && trail.hasCurrentTrail) {
+        // End the trail on button up
+        if (buttonUp && hasTrail) {
           trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
           trail.endPath();
         }
       }
     }
-
-    for (const key of this.collabTrails.keys()) {
-      if (!this.app.state.collaborators.has(key)) {
-        const trail = this.collabTrails.get(key)!;
-        trail.stop();
-        this.collabTrails.delete(key);
-      }
-    }
   }
 }

packages/excalidraw/lasso/index.ts

@@ -25,9 +25,7 @@ import type {
   NonDeleted,
 } from "@excalidraw/element/types";
 
-import { type AnimationFrameHandler } from "../animation-frame-handler";
+import { AnimatedTrail } from "../animatedTrail";
-
-import { AnimatedTrail } from "../animated-trail";
 
 import { getLassoSelectedElementIds } from "./utils";
 
@@ -47,8 +45,8 @@ export class LassoTrail extends AnimatedTrail {
   private canvasTranslate: CanvasTranslate | null = null;
   private keepPreviousSelection: boolean = false;
 
-  constructor(animationFrameHandler: AnimationFrameHandler, app: App) {
+  constructor(app: App) {
-    super(animationFrameHandler, app, {
+    super(app, {
       animateTrail: true,
       streamline: 0.4,
       sizeMapping: (c) => {

packages/excalidraw/locales/en.json

@@ -185,6 +185,9 @@
     "shapeSwitch": "Switch shape",
     "preferences": "Preferences",
     "preferences_toolLock": "Tool lock",
+    "boxSelectionMode": "Select on",
+    "boxSelectionContain": "Wrap",
+    "boxSelectionOverlap": "Overlap",
     "arrowBinding": "Arrow binding",
     "midpointSnapping": "Snap to midpoints"
   },
@@ -661,7 +664,7 @@
     "placeholder": {
       "title": "Let's design your diagram",
       "description": "Describe the diagram you want to create, and we'll generate it for you.",
-      "hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams."
+      "hint": "At the moment we know Flowchart, Sequence, Class, State, and Entity Relationship diagrams."
     },
     "preview": "Preview",
     "insert": "Insert",

packages/excalidraw/package.json

@@ -88,14 +88,13 @@
     "@excalidraw/element": "0.18.0",
     "@excalidraw/laser-pointer": "1.3.1",
     "@excalidraw/math": "0.18.0",
-    "@excalidraw/mermaid-to-excalidraw": "2.1.1",
+    "@excalidraw/mermaid-to-excalidraw": "2.2.2",
     "@excalidraw/random-username": "1.1.0",
     "browser-fs-access": "0.38.0",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
     "es6-promise-pool": "2.5.0",
-    "fractional-indexing": "3.2.0",
     "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
     "jotai": "2.11.0",

packages/excalidraw/polyfill.ts

@@ -23,6 +23,94 @@ const polyfill = () => {
     });
   }
 
+  if (!Array.prototype.findLast) {
+    Object.defineProperty(Array.prototype, "findLast", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        return this
+          .slice()
+          .reverse()
+          .find((value, index) =>
+            predicate.call(thisArg, value, this.length - index - 1, this),
+          );
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.findIndex) {
+    Object.defineProperty(Array.prototype, "findIndex", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        for (let index = 0; index < this.length; index++) {
+          if (predicate.call(thisArg, this[index], index, this)) {
+            return index;
+          }
+        }
+
+        return -1;
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.findLastIndex) {
+    Object.defineProperty(Array.prototype, "findLastIndex", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        const index = this
+          .slice()
+          .reverse()
+          .findIndex((value, index) =>
+            predicate.call(thisArg, value, this.length - index - 1, this),
+          );
+
+        return index === -1 ? -1 : this.length - index - 1;
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.toReversed) {
+    Object.defineProperty(Array.prototype, "toReversed", {
+      value: function <T>(this: T[]) {
+        return this.slice().reverse();
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.toSorted) {
+    Object.defineProperty(Array.prototype, "toSorted", {
+      value: function <T>(
+        this: T[],
+        compareFn?: (a: T, b: T) => number,
+      ) {
+        return this.slice().sort(compareFn);
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
   if (!Element.prototype.replaceChildren) {
     Element.prototype.replaceChildren = function (...nodes) {
       this.innerHTML = "";

packages/excalidraw/renderer/animation.ts

@@ -6,7 +6,10 @@ export type Animation<R extends object> = (params: {
 }) => R | null | undefined;
 
 export class AnimationController {
-  private static isRunning = false;
+  private static scheduledFrame:
+    | { id: ReturnType<typeof requestAnimationFrame>; type: "raf" }
+    | { id: ReturnType<typeof setTimeout>; type: "timeout" }
+    | null = null;
   private static animations = new Map<
     string,
     {
@@ -17,6 +20,10 @@ export class AnimationController {
   >();
 
   static start<R extends object>(key: string, animation: Animation<R>) {
+    if (AnimationController.animations.has(key)) {
+      return;
+    }
+
     const initialState = animation({
       deltaTime: 0,
       state: undefined,
@@ -29,19 +36,54 @@ export class AnimationController {
         state: initialState,
       });
 
-      if (!AnimationController.isRunning) {
+      AnimationController.scheduleNextFrame();
-        AnimationController.isRunning = true;
-
-        if (isRenderThrottlingEnabled()) {
-          requestAnimationFrame(AnimationController.tick);
-        } else {
-          setTimeout(AnimationController.tick, 0);
-        }
-      }
     }
   }
 
+  private static scheduleNextFrame() {
+    if (AnimationController.scheduledFrame) {
+      return;
+    }
+
+    if (isRenderThrottlingEnabled()) {
+      AnimationController.scheduledFrame = {
+        id: requestAnimationFrame(AnimationController.tick),
+        type: "raf",
+      };
+    } else {
+      AnimationController.scheduledFrame = {
+        id: setTimeout(AnimationController.tick, 0),
+        type: "timeout",
+      };
+    }
+  }
+
+  private static cancelScheduledFrame() {
+    if (!AnimationController.scheduledFrame) {
+      return;
+    }
+
+    if (AnimationController.scheduledFrame.type === "raf") {
+      cancelAnimationFrame(AnimationController.scheduledFrame.id);
+    } else {
+      clearTimeout(AnimationController.scheduledFrame.id);
+    }
+
+    AnimationController.scheduledFrame = null;
+  }
+
+  private static cancelScheduledFrameIfIdle() {
+    if (AnimationController.animations.size > 0) {
+      return false;
+    }
+
+    AnimationController.cancelScheduledFrame();
+    return true;
+  }
+
   private static tick() {
+    AnimationController.scheduledFrame = null;
+
     if (AnimationController.animations.size > 0) {
       for (const [key, animation] of AnimationController.animations) {
         const now = performance.now();
@@ -56,8 +98,7 @@ export class AnimationController {
         if (!state) {
           AnimationController.animations.delete(key);
 
-          if (AnimationController.animations.size === 0) {
+          if (AnimationController.cancelScheduledFrameIfIdle()) {
-            AnimationController.isRunning = false;
             return;
           }
         } else {
@@ -66,11 +107,11 @@ export class AnimationController {
         }
       }
 
-      if (isRenderThrottlingEnabled()) {
+      if (AnimationController.cancelScheduledFrameIfIdle()) {
-        requestAnimationFrame(AnimationController.tick);
+        return;
-      } else {
-        setTimeout(AnimationController.tick, 0);
       }
+
+      AnimationController.scheduleNextFrame();
     }
   }
 
@@ -80,5 +121,6 @@ export class AnimationController {
 
   static cancel(key: string) {
     AnimationController.animations.delete(key);
+    AnimationController.cancelScheduledFrameIfIdle();
   }
 }

packages/excalidraw/renderer/interactiveScene.ts

@@ -41,6 +41,7 @@ import {
   maxBindingDistance_simple,
   isTextElement,
   LinearElementEditor,
+  getActiveTextElement,
 } from "@excalidraw/element";
 
 import { renderSelectionElement } from "@excalidraw/element";
@@ -58,6 +59,8 @@ import {
   isFocusPointVisible,
 } from "@excalidraw/element";
 
+import type { EditorInterface } from "@excalidraw/common";
+
 import type {
   TransformHandles,
   TransformHandleType,
@@ -86,6 +89,10 @@ import {
 } from "../scene/scrollbars";
 
 import { getClientColor, renderRemoteCursors } from "../clients";
+import {
+  getTextAutoResizeHandle,
+  getTextBoxPadding,
+} from "../textAutoResizeHandle";
 
 import {
   bootstrapCanvas,
@@ -1149,6 +1156,7 @@ const renderLinearPointHandles = (
           points[idx],
           idx,
           appState.zoom,
+          elementsMap,
         )
       ) {
         renderSingleLinearPoint(
@@ -1489,21 +1497,58 @@ const renderTextBox = (
   selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
 ) => {
   context.save();
-  const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+  const padding = getTextBoxPadding(appState.zoom.value);
   const width = text.width + padding * 2;
   const height = text.height + padding * 2;
-  const cx = text.x + width / 2;
+  const cx = text.x + text.width / 2;
-  const cy = text.y + height / 2;
+  const cy = text.y + text.height / 2;
-  const shiftX = -(width / 2 + padding);
+  const shiftX = -(text.width / 2 + padding);
-  const shiftY = -(height / 2 + padding);
+  const shiftY = -(text.height / 2 + padding);
   context.translate(cx + appState.scrollX, cy + appState.scrollY);
   context.rotate(text.angle);
   context.lineWidth = 1 / appState.zoom.value;
   context.strokeStyle = selectionColor;
+  context.globalAlpha = 0.5;
+  context.setLineDash([6 / appState.zoom.value, 4 / appState.zoom.value]);
   context.strokeRect(shiftX, shiftY, width, height);
   context.restore();
 };
 
+const renderResetAutoResizeHandle = (
+  text: NonDeleted<ExcalidrawTextElement>,
+  context: CanvasRenderingContext2D,
+  appState: InteractiveCanvasAppState,
+  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
+  formFactor: EditorInterface["formFactor"],
+) => {
+  const autoResizeHandle = getTextAutoResizeHandle(
+    text,
+    appState.zoom.value,
+    formFactor,
+  );
+
+  if (!autoResizeHandle) {
+    return;
+  }
+
+  context.save();
+  context.globalAlpha = 0.5;
+  context.lineWidth = 1.5 / appState.zoom.value;
+  context.lineCap = "round";
+  context.strokeStyle = selectionColor;
+  context.beginPath();
+  context.moveTo(
+    autoResizeHandle.start[0] + appState.scrollX,
+    autoResizeHandle.start[1] + appState.scrollY,
+  );
+  context.lineTo(
+    autoResizeHandle.end[0] + appState.scrollX,
+    autoResizeHandle.end[1] + appState.scrollY,
+  );
+  context.stroke();
+  context.restore();
+};
+
 const _renderInteractiveScene = ({
   app,
   canvas,
@@ -1584,10 +1629,19 @@ const _renderInteractiveScene = ({
     }
   }
 
-  if (
+  const activeTextElement = getActiveTextElement(selectedElements, appState);
-    appState.editingTextElement &&
+
-    isTextElement(appState.editingTextElement)
+  if (activeTextElement && !activeTextElement.autoResize) {
-  ) {
+    renderResetAutoResizeHandle(
+      activeTextElement,
+      context,
+      appState,
+      renderConfig.selectionColor,
+      editorInterface.formFactor,
+    );
+  }
+
+  if (appState.editingTextElement) {
     const textElement = allElementsMap.get(appState.editingTextElement.id) as
       | ExcalidrawTextElement
       | undefined;

packages/excalidraw/renderer/staticScene.ts

@@ -14,11 +14,16 @@ import {
 } from "@excalidraw/element";
 import {
   elementOverlapsWithFrame,
+  getContainingFrame,
   getTargetFrame,
   shouldApplyFrameClip,
 } from "@excalidraw/element";
 
-import { renderElement } from "@excalidraw/element";
+import {
+  getRenderElementWithPositionOverride,
+  getRenderOpacity,
+  renderElement,
+} from "@excalidraw/element";
 
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 
@@ -170,7 +175,10 @@ const renderLinkIcon = (
   context: CanvasRenderingContext2D,
   appState: StaticCanvasAppState,
   elementsMap: ElementsMap,
+  renderConfig: StaticCanvasRenderConfig,
 ) => {
+  element = getRenderElementWithPositionOverride(element, renderConfig);
+
   if (element.link && !appState.selectedElementIds[element.id]) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x, y, width, height] = getLinkHandleFromCoords(
@@ -221,7 +229,13 @@ const renderLinkIcon = (
 
       linkCanvasCacheContext.restore();
     }
-    context.globalAlpha = element.opacity / 100;
+    context.globalAlpha = getRenderOpacity(
+      element,
+      renderConfig,
+      getContainingFrame(element, elementsMap),
+      renderConfig.elementsPendingErasure,
+      renderConfig.pendingFlowchartNodes,
+    );
     context.drawImage(linkCanvas, x - centerX, y - centerY, width, height);
     context.restore();
   }
@@ -370,7 +384,7 @@ const _renderStaticScene = ({
         context.restore();
 
         if (!isExporting) {
-          renderLinkIcon(element, context, appState, elementsMap);
+          renderLinkIcon(element, context, appState, elementsMap, renderConfig);
         }
       } catch (error: any) {
         console.error(
@@ -421,7 +435,7 @@ const _renderStaticScene = ({
             );
           }
           if (!isExporting) {
-            renderLinkIcon(element, context, appState, elementsMap);
+            renderLinkIcon(element, context, appState, elementsMap, renderConfig);
           }
         };
         // - when exporting the whole canvas, we DO NOT apply clipping

packages/excalidraw/scene/Renderer.ts

@@ -1,9 +1,15 @@
-import { isElementInViewport } from "@excalidraw/element";
+import {
+  getCommonFrameId,
+  getFrameChildrenInsertionIndex,
+  isElementInViewport,
+} from "@excalidraw/element";
 
-import { memoize, toBrandedType } from "@excalidraw/common";
+import { arrayToMap, memoize, toBrandedType } from "@excalidraw/common";
 
 import type {
   ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
@@ -16,6 +22,21 @@ import type { RenderableElementsMap } from "./types";
 
 import type { AppState } from "../types";
 
+type GetRenderableElementsOpts = {
+  zoom: AppState["zoom"];
+  offsetLeft: AppState["offsetLeft"];
+  offsetTop: AppState["offsetTop"];
+  scrollX: AppState["scrollX"];
+  scrollY: AppState["scrollY"];
+  height: AppState["height"];
+  width: AppState["width"];
+  editingTextElement: AppState["editingTextElement"];
+  newElement: AppState["newElement"];
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+  selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
+  frameToHighlight: AppState["frameToHighlight"];
+};
+
 export class Renderer {
   private scene: Scene;
 
@@ -23,9 +44,121 @@ export class Renderer {
     this.scene = scene;
   }
 
-  public getRenderableElements = (() => {
+  private getVisibleCanvasElements({
-    const getVisibleCanvasElements = ({
+    elementsMap,
-      elementsMap,
+    zoom,
+    offsetLeft,
+    offsetTop,
+    scrollX,
+    scrollY,
+    height,
+    width,
+  }: {
+    elementsMap: NonDeletedElementsMap;
+    zoom: AppState["zoom"];
+    offsetLeft: AppState["offsetLeft"];
+    offsetTop: AppState["offsetTop"];
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    height: AppState["height"];
+    width: AppState["width"];
+  }): readonly NonDeletedExcalidrawElement[] {
+    const visibleElements: NonDeletedExcalidrawElement[] = [];
+    for (const element of elementsMap.values()) {
+      if (
+        isElementInViewport(
+          element,
+          width,
+          height,
+          {
+            zoom,
+            offsetLeft,
+            offsetTop,
+            scrollX,
+            scrollY,
+          },
+          elementsMap,
+        )
+      ) {
+        visibleElements.push(element);
+      }
+    }
+    return visibleElements;
+  }
+
+  private getRenderableElementsMap({
+    elements,
+    editingTextElement,
+    newElement,
+  }: {
+    elements: readonly NonDeletedExcalidrawElement[];
+    editingTextElement: AppState["editingTextElement"];
+    newElement: AppState["newElement"];
+  }) {
+    const elementsMap = toBrandedType<RenderableElementsMap>(new Map());
+    const newElementCanvasElement = newElement?.frameId ? null : newElement;
+
+    for (const element of elements) {
+      if (newElementCanvasElement?.id === element.id) {
+        continue;
+      }
+
+      // we don't want to render text element that's being currently edited
+      // (it's rendered on remote only)
+      if (
+        !editingTextElement ||
+        editingTextElement.type !== "text" ||
+        element.id !== editingTextElement.id
+      ) {
+        elementsMap.set(element.id, element);
+      }
+    }
+    return { elementsMap, newElementCanvasElement };
+  }
+
+  private sortSelectedElementsIntoHighlightedFrame<
+    T extends ExcalidrawElement,
+  >({
+    visibleElements,
+    selectedElements,
+    frameToHighlight,
+  }: {
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly T[];
+    frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement>;
+  }): readonly T[] {
+    if (!selectedElements.length) {
+      return visibleElements;
+    }
+
+    // we assume all selected elements are eligible frame children if
+    // frameToHighlight is defined
+    const selectedElementsMap = arrayToMap(selectedElements);
+
+    // thus, all deselected elements are the ones we won't reorder
+    const deselectedElements = visibleElements.filter(
+      (element) => !selectedElementsMap.has(element.id),
+    );
+
+    const insertionIndex = getFrameChildrenInsertionIndex(
+      deselectedElements,
+      frameToHighlight.id,
+    );
+
+    if (insertionIndex === null) {
+      return visibleElements;
+    }
+
+    return [
+      ...deselectedElements.slice(0, insertionIndex),
+      ...selectedElements,
+      ...deselectedElements.slice(insertionIndex),
+    ] as readonly T[];
+  }
+
+  private _getRenderableElements = memoize(
+    ({
+      canvasNonce,
       zoom,
       offsetLeft,
       offsetTop,
@@ -33,70 +166,27 @@ export class Renderer {
       scrollY,
       height,
       width,
-    }: {
-      elementsMap: NonDeletedElementsMap;
-      zoom: AppState["zoom"];
-      offsetLeft: AppState["offsetLeft"];
-      offsetTop: AppState["offsetTop"];
-      scrollX: AppState["scrollX"];
-      scrollY: AppState["scrollY"];
-      height: AppState["height"];
-      width: AppState["width"];
-    }): readonly NonDeletedExcalidrawElement[] => {
-      const visibleElements: NonDeletedExcalidrawElement[] = [];
-      for (const element of elementsMap.values()) {
-        if (
-          isElementInViewport(
-            element,
-            width,
-            height,
-            {
-              zoom,
-              offsetLeft,
-              offsetTop,
-              scrollX,
-              scrollY,
-            },
-            elementsMap,
-          )
-        ) {
-          visibleElements.push(element);
-        }
-      }
-      return visibleElements;
-    };
-
-    const getRenderableElements = ({
-      elements,
       editingTextElement,
-      newElementId,
+      newElement,
-    }: {
+    }: Omit<
-      elements: readonly NonDeletedExcalidrawElement[];
+      GetRenderableElementsOpts,
-      editingTextElement: AppState["editingTextElement"];
+      | "selectedElements"
-      newElementId: ExcalidrawElement["id"] | undefined;
+      | "selectedElementsAreBeingDragged"
+      | "frameToHighlight"
+    > & {
+      canvasNonce: string;
     }) => {
-      const elementsMap = toBrandedType<RenderableElementsMap>(new Map());
+      const elements = this.scene.getNonDeletedElements();
 
-      for (const element of elements) {
+      const { elementsMap, newElementCanvasElement } =
-        if (newElementId === element.id) {
+        this.getRenderableElementsMap({
-          continue;
+          elements,
-        }
+          editingTextElement,
+          newElement,
+        });
 
-        // we don't want to render text element that's being currently edited
+      const visibleElements = this.getVisibleCanvasElements({
-        // (it's rendered on remote only)
+        elementsMap,
-        if (
-          !editingTextElement ||
-          editingTextElement.type !== "text" ||
-          element.id !== editingTextElement.id
-        ) {
-          elementsMap.set(element.id, element);
-        }
-      }
-      return elementsMap;
-    };
-
-    return memoize(
-      ({
         zoom,
         offsetLeft,
         offsetTop,
@@ -104,52 +194,69 @@ export class Renderer {
         scrollY,
         height,
         width,
-        editingTextElement,
+      });
-        newElementId,
-        // cache-invalidation nonce
-        sceneNonce: _sceneNonce,
-      }: {
-        zoom: AppState["zoom"];
-        offsetLeft: AppState["offsetLeft"];
-        offsetTop: AppState["offsetTop"];
-        scrollX: AppState["scrollX"];
-        scrollY: AppState["scrollY"];
-        height: AppState["height"];
-        width: AppState["width"];
-        editingTextElement: AppState["editingTextElement"];
-        /** note: first render of newElement will always bust the cache
-         * (we'd have to prefilter elements outside of this function) */
-        newElementId: ExcalidrawElement["id"] | undefined;
-        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
-      }) => {
-        const elements = this.scene.getNonDeletedElements();
 
-        const elementsMap = getRenderableElements({
+      return {
-          elements,
+        elementsMap,
-          editingTextElement,
+        visibleElements,
-          newElementId,
+        newElementCanvasElement,
+        canvasNonce,
+      };
+    },
+  );
+
+  public getRenderableElements = (opts: GetRenderableElementsOpts) => {
+    const { newElement } = opts;
+    const canvasNonce = `${this.scene.getSceneNonce()}${
+      newElement?.frameId ? `:${newElement.versionNonce}` : ""
+    }`;
+
+    const ret = this._getRenderableElements({
+      canvasNonce,
+
+      // don't spread `opts` because we don't want to memoize on some props
+
+      zoom: opts.zoom,
+      offsetLeft: opts.offsetLeft,
+      offsetTop: opts.offsetTop,
+      scrollX: opts.scrollX,
+      scrollY: opts.scrollY,
+      height: opts.height,
+      width: opts.width,
+      editingTextElement: opts.editingTextElement,
+      newElement: opts.newElement,
+    });
+
+    // if we're dragging elements over a frame, reorder the selected elements
+    // inside the frame during render (we don't set the `element.frameId` until
+    // pointerup else we'd have to painstainly restore the orig index if user
+    // didn't end up adding elements to the frame)
+    if (
+      opts.frameToHighlight &&
+      opts.selectedElementsAreBeingDragged &&
+      // if all dragged elements are already in the frame, don't reorder
+      getCommonFrameId(opts.selectedElements) !== opts.frameToHighlight.id
+    ) {
+      const reorderedVisibleElements =
+        this.sortSelectedElementsIntoHighlightedFrame({
+          visibleElements: ret.visibleElements,
+          selectedElements: opts.selectedElements,
+          frameToHighlight: opts.frameToHighlight,
         });
 
-        const visibleElements = getVisibleCanvasElements({
+      return {
-          elementsMap,
+        ...ret,
-          zoom,
+        visibleElements: reorderedVisibleElements,
-          offsetLeft,
+      };
-          offsetTop,
+    }
-          scrollX,
-          scrollY,
-          height,
-          width,
-        });
 
-        return { elementsMap, visibleElements };
+    return ret;
-      },
+  };
-    );
-  })();
 
   // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
   // safe to break TS contract here (for upstream cases)
   public destroy() {
     renderStaticSceneThrottled.cancel();
-    this.getRenderableElements.clear();
+    this._getRenderableElements.clear();
   }
 }

packages/excalidraw/scene/export.ts

@@ -1,13 +1,13 @@
 import rough from "roughjs/bin/rough";
 
 import {
+  DEFAULT_EXPORT_PADDING,
   FRAME_STYLE,
   FONT_FAMILY,
   SVG_NS,
   THEME,
   MIME_TYPES,
   EXPORT_DATA_TYPES,
-  COLOR_WHITE,
   arrayToMap,
   distance,
   getFontString,
@@ -47,33 +47,20 @@ import type {
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-  Theme,
 } from "@excalidraw/element/types";
 
 import { getDefaultAppState } from "../appState";
 import { base64ToString, decode, encode, stringToBase64 } from "../data/encode";
 import { serializeAsJSON } from "../data/json";
-import { restoreAppState } from "../data/restore";
-import { encodePngMetadata } from "../data/image";
 
 import { Fonts } from "../fonts";
 
 import { renderStaticScene } from "../renderer/staticScene";
 import { renderSceneToSvg } from "../renderer/staticSvgScene";
 
-import {
-  copyBlobToClipboardAsPng,
-  copyTextToSystemClipboard,
-  copyToClipboard,
-} from "../clipboard";
-
 import type { RenderableElementsMap } from "./types";
 
-import type { AppState, BinaryFiles, NormalizedZoomValue } from "../types";
+import type { AppState, BinaryFiles } from "../types";
-
-// Default minimum export size in pixels
-const DEFAULT_SMALLEST_EXPORT_SIZE = 20;
-const DEFAULT_ZOOM_VALUE = 1 as NormalizedZoomValue;
 
 const truncateText = (element: ExcalidrawTextElement, maxWidth: number) => {
   if (element.width <= maxWidth) {
@@ -170,7 +157,11 @@ const prepareElementsForRender = ({
   let nextElements: readonly ExcalidrawElement[];
 
   if (exportingFrame) {
-    nextElements = getElementsOverlappingFrame(elements, exportingFrame);
+    nextElements = getElementsOverlappingFrame(
+      elements,
+      exportingFrame,
+      arrayToMap(elements),
+    );
   } else if (frameRendering.enabled && frameRendering.name) {
     nextElements = addFrameLabelsAsTextElements(elements, {
       exportWithDarkMode,
@@ -182,205 +173,36 @@ const prepareElementsForRender = ({
   return nextElements;
 };
 
-// ---------------------------------------------------------------------------
+export const exportToCanvas = async (
-// Types for the new API
+  elements: readonly NonDeletedExcalidrawElement[],
-// ---------------------------------------------------------------------------
+  appState: AppState,
-
+  files: BinaryFiles,
-export type ExportSceneData = {
+  {
-  elements: readonly NonDeletedExcalidrawElement[];
+    exportBackground,
-  appState?: Partial<
+    exportPadding = DEFAULT_EXPORT_PADDING,
-    Omit<AppState, "offsetTop" | "offsetLeft" | "exportWithDarkMode">
+    viewBackgroundColor,
-  >;
+    exportingFrame,
-  files: BinaryFiles | null;
+  }: {
-};
+    exportBackground: boolean;
-
+    exportPadding?: number;
-export type ExportSceneConfig = {
+    viewBackgroundColor: string;
-  theme?: Theme;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
-  /**
+  },
-   * Canvas background. Valid values are:
+  createCanvas: (
-   *
-   * - `undefined` - the background of "appState.viewBackgroundColor" is used.
-   * - `false` - no background is used (set to "transparent").
-   * - `string` - should be a valid CSS color.
-   *
-   * @default undefined
-   */
-  canvasBackgroundColor?: string | false;
-  /**
-   * Canvas padding in pixels. Affected by `scale`.
-   *
-   * When `fit` is set to `none`, padding is added to the content bounding box
-   * (including if you set `width` or `height` or `maxWidthOrHeight` or
-   * `widthOrHeight`).
-   *
-   * When `fit` set to `contain`, padding is subtracted from the content
-   * bounding box (ensuring the size doesn't exceed the supplied values, with
-   * the exeception of using alongside `scale` as noted above), and the padding
-   * serves as a minimum distance between the content and the canvas edges, as
-   * it may exceed the supplied padding value from one side or the other in
-   * order to maintain the aspect ratio. It is recommended to set `position`
-   * to `center` when using `fit=contain`.
-   *
-   * When `fit` is set to `none` and either `width` or `height` or
-   * `maxWidthOrHeight` is set, padding is simply adding to the bounding box
-   * and the content may overflow the canvas, thus right or bottom padding
-   * may be ignored.
-   *
-   * @default 0
-   */
-  padding?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Makes sure the canvas content fits into a frame of width/height no larger
-   * than this value, while maintaining the aspect ratio.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  maxWidthOrHeight?: number;
-  /**
-   * Scale the canvas content to be excatly this many pixels wide/tall,
-   * maintaining the aspect ratio.
-   *
-   * Cannot be used in conjunction with `maxWidthOrHeight`.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  widthOrHeight?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
-   * content.
-   *
-   * If `width` omitted but `height` supplied, `width` is calculated from the
-   * the content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box width when both `width` and `height`
-   * are omitted.
-   */
-  width?: number;
-  /**
-   * Height of the frame.
-   *
-   * If `height` omitted but `width` supplied, `height` is calculated from the
-   * content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box height when both `width` and `height`
-   * are omitted.
-   */
-  height?: number;
-  /**
-   * Left canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `x` postion of the content bounding box.
-   */
-  x?: number;
-  /**
-   * Top canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `y` postion of the content bounding box.
-   */
-  y?: number;
-  /**
-   * Indicates the coordinate system of the `x` and `y` values.
-   *
-   * - `canvas` - `x` and `y` are relative to the canvas [0, 0] position.
-   * - `content` - `x` and `y` are relative to the content bounding box.
-   *
-   * @default "canvas"
-   */
-  origin?: "canvas" | "content";
-  /**
-   * If dimensions specified and `x` and `y` are not specified, this indicates
-   * how the canvas should be scaled.
-   *
-   * Behavior aligns with the `object-fit` CSS property.
-   *
-   * - `none`    - no scaling.
-   * - `contain` - scale to fit the frame. Includes `padding`.
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `fit` is ignored.
-   *
-   * @default "contain" unless `width`, `height`, `maxWidthOrHeight`, or
-   * `widthOrHeight` is specified in which case `none` is the default (can be
-   * changed). If `x` or `y` are specified, `none` is forced.
-   */
-  fit?: "none" | "contain";
-  /**
-   * When either `x` or `y` are not specified, indicates how the canvas should
-   * be aligned on the respective axis.
-   *
-   * - `none`   - canvas aligned to top left.
-   * - `center` - canvas is centered on the axis which is not specified
-   *              (or both).
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `position` is ignored.
-   *
-   * @default "center"
-   */
-  position?: "center" | "topLeft";
-  // -------------------------------------------------------------------------
-  /**
-   * A multiplier to increase/decrease the frame dimensions
-   * (content resolution).
-   *
-   * For example, if your canvas is 300x150 and you set scale to 2, the
-   * resulting size will be 600x300.
-   *
-   * @default 1
-   */
-  scale?: number;
-  /**
-   * If you need to suply your own canvas, e.g. in test environments or in
-   * Node.js.
-   *
-   * Do not set `canvas.width/height` or modify the canvas context as that's
-   * handled by Excalidraw.
-   *
-   * Defaults to `document.createElement("canvas")`.
-   */
-  createCanvas?: () => HTMLCanvasElement;
-  /**
-   * If you want to supply `width`/`height` dynamically (or derive from the
-   * content bounding box), you can use this function.
-   *
-   * Ignored if `maxWidthOrHeight`, `width`, or `height` is set.
-   */
-  getDimensions?: (
     width: number,
     height: number,
-  ) => { width: number; height: number; scale?: number };
+  ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
-
+    const canvas = document.createElement("canvas");
-  exportingFrame?: ExcalidrawFrameLikeElement | null;
+    canvas.width = width * appState.exportScale;
-
+    canvas.height = height * appState.exportScale;
-  loadFonts?: () => Promise<void>;
+    return { canvas, scale: appState.exportScale };
-};
+  },
-
+  loadFonts: () => Promise<void> = async () => {
-// ---------------------------------------------------------------------------
+    await Fonts.loadElementsFonts(elements);
-// Internal helper to configure export dimensions
+  },
-// ---------------------------------------------------------------------------
+) => {
-
+  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
-const configExportDimension = async ({
+  await loadFonts();
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  const { exportingFrame } = cfg;
-
-  const elements = data.elements;
-
-  // initialize defaults
-  // ---------------------------------------------------------------------------
-
-  const appState = restoreAppState(data.appState, null);
 
   const frameRendering = getFrameRenderingConfig(
     exportingFrame ?? null,
@@ -400,255 +222,26 @@ const configExportDimension = async ({
   });
 
   if (exportingFrame) {
-    cfg.padding = 0;
+    exportPadding = 0;
   }
 
-  cfg.fit =
+  const [minX, minY, width, height] = getCanvasSize(
-    cfg.fit ??
-    (cfg.width != null ||
-    cfg.height != null ||
-    cfg.maxWidthOrHeight != null ||
-    cfg.widthOrHeight != null
-      ? "contain"
-      : "none");
-
-  cfg.padding = cfg.padding ?? 0;
-  cfg.scale = cfg.scale ?? 1;
-
-  cfg.origin = cfg.origin ?? "canvas";
-  cfg.position = cfg.position ?? "center";
-
-  if (cfg.maxWidthOrHeight != null && cfg.widthOrHeight != null) {
-    if (!import.meta.env.PROD) {
-      console.warn("`maxWidthOrHeight` is ignored when `widthOrHeight` is set");
-    }
-    cfg.maxWidthOrHeight = undefined;
-  }
-
-  if (
-    (cfg.maxWidthOrHeight != null || cfg.width != null || cfg.height != null) &&
-    cfg.getDimensions
-  ) {
-    if (!import.meta.env.PROD) {
-      console.warn(
-        "`getDimensions` is ignored when `width`, `height`, or `maxWidthOrHeight` is set",
-      );
-    }
-    cfg.getDimensions = undefined;
-  }
-  // ---------------------------------------------------------------------------
-
-  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
-  if (cfg.loadFonts) {
-    await cfg.loadFonts();
-  } else {
-    await Fonts.loadElementsFonts(elements);
-  }
-
-  // value used to scale the canvas context. By default, we use this to
-  // make the canvas fit into the frame (e.g. for `cfg.fit` set to `contain`).
-  // If `cfg.scale` is set, we multiply the resulting canvasScale by it to
-  // scale the output further.
-  let exportScale = 1;
-
-  const origCanvasSize = getCanvasSize(
     exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
   );
 
-  // variables for original content bounding box
+  const { canvas, scale = 1 } = createCanvas(width, height);
-  const [origX, origY, origWidth, origHeight] = origCanvasSize;
-  // variables for target bounding box
-  let [x, y, width, height] = origCanvasSize;
 
-  x = cfg.x ?? x;
+  const defaultAppState = getDefaultAppState();
-  y = cfg.y ?? y;
-  width = cfg.width ?? width;
-  height = cfg.height ?? height;
-
-  if (cfg.fit === "contain" || cfg.widthOrHeight || cfg.maxWidthOrHeight) {
-    cfg.padding =
-      cfg.padding && cfg.padding > 0
-        ? Math.min(
-            cfg.padding,
-            (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-            (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-          )
-        : 0;
-
-    if (cfg.getDimensions != null) {
-      const ret = cfg.getDimensions(width, height);
-
-      width = ret.width;
-      height = ret.height;
-
-      cfg.padding = Math.min(
-        cfg.padding,
-        (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-        (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.widthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.widthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.maxWidthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.maxWidthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    }
-  }
-
-  if (cfg.maxWidthOrHeight != null || cfg.widthOrHeight != null) {
-    if (cfg.padding) {
-      if (cfg.maxWidthOrHeight != null) {
-        cfg.maxWidthOrHeight -= cfg.padding * 2;
-      } else if (cfg.widthOrHeight != null) {
-        cfg.widthOrHeight -= cfg.padding * 2;
-      }
-    }
-
-    const max = Math.max(width, height);
-    if (cfg.widthOrHeight != null) {
-      // calculate by how much do we need to scale the canvas to fit into the
-      // target dimension (e.g. target: max 50px, actual: 70x100px => scale: 0.5)
-      exportScale = cfg.widthOrHeight / max;
-    } else if (cfg.maxWidthOrHeight != null) {
-      exportScale = cfg.maxWidthOrHeight < max ? cfg.maxWidthOrHeight / max : 1;
-    }
-
-    width *= exportScale;
-    height *= exportScale;
-  } else if (cfg.getDimensions) {
-    const ret = cfg.getDimensions(width, height);
-
-    width = ret.width;
-    height = ret.height;
-    cfg.scale = ret.scale ?? cfg.scale;
-  } else if (cfg.fit === "contain") {
-    width -= cfg.padding * 2;
-    height -= cfg.padding * 2;
-
-    const wRatio = width / origWidth;
-    const hRatio = height / origHeight;
-    // scale the orig canvas to fit in the target region
-    exportScale = Math.min(wRatio, hRatio);
-  }
-
-  x = cfg.x ?? origX;
-  y = cfg.y ?? origY;
-
-  // if we switch to "content" coords, we need to offset cfg-supplied
-  // coords by the x/y of content bounding box
-  if (cfg.origin === "content") {
-    if (cfg.x != null) {
-      x += origX;
-    }
-    if (cfg.y != null) {
-      y += origY;
-    }
-  }
-
-  // Centering the content to the frame.
-  // We divide width/height by canvasScale so that we calculate in the original
-  // aspect ratio dimensions.
-  if (cfg.position === "center") {
-    x -=
-      width / exportScale / 2 -
-      (cfg.x == null ? origWidth : width + cfg.padding * 2) / 2;
-    y -=
-      height / exportScale / 2 -
-      (cfg.y == null ? origHeight : height + cfg.padding * 2) / 2;
-  }
-
-  // rescale padding based on current canvasScale factor so that the resulting
-  // padding is kept the same as supplied by user (with the exception of
-  // `cfg.scale` being set, which also scales the padding)
-  const normalizedPadding = cfg.padding / exportScale;
-
-  // scale the whole frame by cfg.scale (on top of whatever canvasScale we
-  // calculated above)
-  exportScale *= cfg.scale;
-
-  width *= cfg.scale;
-  height *= cfg.scale;
-
-  const exportWidth = width + cfg.padding * 2 * cfg.scale;
-  const exportHeight = height + cfg.padding * 2 * cfg.scale;
-
-  return {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  };
-};
-
-// ---------------------------------------------------------------------------
-// exportToCanvas
-// ---------------------------------------------------------------------------
-
-/**
- * This API is usually used as a precursor to searializing to Blob or PNG,
- * but can also be used to create a canvas for other purposes.
- */
-export const exportToCanvas = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  const {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  } = await configExportDimension({ data, config });
-
-  const canvas = cfg.createCanvas
-    ? cfg.createCanvas()
-    : document.createElement("canvas");
-
-  canvas.width = exportWidth;
-  canvas.height = exportHeight;
 
   const { imageCache } = await updateImageCache({
     imageCache: new Map(),
     fileIds: getInitializedImageElements(elementsForRender).map(
       (element) => element.fileId,
     ),
-    files: data.files || {},
+    files,
   });
 
-  const theme =
-    cfg.theme ?? (appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT);
-
-  // Determine the background color for the canvas
-  const viewBackgroundColor =
-    cfg.canvasBackgroundColor === false
-      ? // "transparent" triggers clearRect in bootstrapCanvas
-        "transparent"
-      : cfg.canvasBackgroundColor ||
-        appState.viewBackgroundColor ||
-        COLOR_WHITE;
-
   renderStaticScene({
     canvas,
     rc: rough.canvas(canvas),
@@ -656,23 +249,19 @@ export const exportToCanvas = async ({
       arrayToMap(elementsForRender),
     ),
     allElementsMap: toBrandedType<NonDeletedSceneElementsMap>(
-      arrayToMap(syncInvalidIndices(data.elements)),
+      arrayToMap(syncInvalidIndices(elements)),
     ),
     visibleElements: elementsForRender,
-    scale: exportScale,
+    scale,
     appState: {
       ...appState,
       frameRendering,
-      width,
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      height,
+      scrollX: -minX + exportPadding,
-      offsetLeft: 0,
+      scrollY: -minY + exportPadding,
-      offsetTop: 0,
+      zoom: defaultAppState.zoom,
-      scrollX: -x + normalizedPadding,
-      scrollY: -y + normalizedPadding,
-      zoom: { value: DEFAULT_ZOOM_VALUE },
       shouldCacheIgnoreZoom: false,
-      theme,
+      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
-      viewBackgroundColor,
     },
     renderConfig: {
       canvasBackgroundColor: viewBackgroundColor,
@@ -683,44 +272,13 @@ export const exportToCanvas = async ({
       embedsValidationStatus: new Map(),
       elementsPendingErasure: new Set(),
       pendingFlowchartNodes: null,
-      theme,
+      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
     },
   });
 
   return canvas;
 };
 
-// ---------------------------------------------------------------------------
-// exportToSvg
-// ---------------------------------------------------------------------------
-
-type ExportToSvgConfig = Pick<
-  ExportSceneConfig,
-  | "canvasBackgroundColor"
-  | "padding"
-  | "theme"
-  | "exportingFrame"
-  | "scale"
-  | "width"
-  | "height"
-  | "x"
-  | "y"
-  | "origin"
-  | "fit"
-  | "position"
-  | "maxWidthOrHeight"
-  | "widthOrHeight"
-  | "getDimensions"
-  | "loadFonts"
-> & {
-  /**
-   * if true, all embeddables passed in will be rendered when possible.
-   */
-  renderEmbeddables?: boolean;
-  skipInliningFonts?: true;
-  reuseImages?: boolean;
-};
-
 const createHTMLComment = (text: string) => {
   // surrounding with spaces to maintain prettified consistency with previous
   // iterations
@@ -728,34 +286,61 @@ const createHTMLComment = (text: string) => {
   return document.createComment(` ${text} `);
 };
 
-export const exportToSvg = async ({
+export const exportToSvg = async (
-  data,
+  elements: readonly NonDeletedExcalidrawElement[],
-  config,
+  appState: {
-}: {
+    exportBackground: boolean;
-  data: ExportSceneData;
+    exportPadding?: number;
-  config?: ExportToSvgConfig;
+    exportScale?: number;
-}) => {
+    viewBackgroundColor: string;
-  const {
+    exportWithDarkMode?: boolean;
-    config: cfg,
+    exportEmbedScene?: boolean;
-    normalizedPadding,
+    frameRendering?: AppState["frameRendering"];
-    exportWidth,
+  },
-    exportHeight,
+  files: BinaryFiles | null,
-    exportScale,
+  opts?: {
-    x,
+    /**
-    y,
+     * if true, all embeddables passed in will be rendered when possible.
-    elementsForRender,
+     */
-    appState,
+    renderEmbeddables?: boolean;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+    skipInliningFonts?: true;
+    reuseImages?: boolean;
+  },
+): Promise<SVGSVGElement> => {
+  const frameRendering = getFrameRenderingConfig(
+    opts?.exportingFrame ?? null,
+    appState.frameRendering ?? null,
+  );
+
+  let {
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    exportWithDarkMode = false,
+    viewBackgroundColor,
+    exportScale = 1,
+    exportEmbedScene,
+  } = appState;
+
+  const { exportingFrame = null } = opts || {};
+
+  const elementsForRender = prepareElementsForRender({
+    elements,
+    exportingFrame,
+    exportWithDarkMode,
     frameRendering,
-  } = await configExportDimension({ data, config });
+  });
 
-  const offsetX = -(x - normalizedPadding);
+  if (exportingFrame) {
-  const offsetY = -(y - normalizedPadding);
+    exportPadding = 0;
+  }
 
-  const { elements } = data;
+  const [minX, minY, width, height] = getCanvasSize(
+    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
+  );
 
-  const theme =
+  const offsetX = -minX + exportPadding;
-    cfg.theme ?? (appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT);
+  const offsetY = -minY + exportPadding;
-  const exportWithDarkMode = theme === THEME.DARK;
 
   // ---------------------------------------------------------------------------
   // initialize SVG root element
@@ -765,12 +350,9 @@ export const exportToSvg = async ({
 
   svgRoot.setAttribute("version", "1.1");
   svgRoot.setAttribute("xmlns", SVG_NS);
-  svgRoot.setAttribute(
+  svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    "viewBox",
+  svgRoot.setAttribute("width", `${width * exportScale}`);
-    `0 0 ${exportWidth / exportScale} ${exportHeight / exportScale}`,
+  svgRoot.setAttribute("height", `${height * exportScale}`);
-  );
-  svgRoot.setAttribute("width", `${exportWidth}`);
-  svgRoot.setAttribute("height", `${exportHeight}`);
 
   const defsElement = svgRoot.ownerDocument.createElementNS(SVG_NS, "defs");
 
@@ -789,7 +371,7 @@ export const exportToSvg = async ({
 
   // we need to serialize the "original" elements before we put them through
   // the tempScene hack which duplicates and regenerates ids
-  if (appState.exportEmbedScene) {
+  if (exportEmbedScene) {
     try {
       encodeSvgBase64Payload({
         metadataElement,
@@ -797,7 +379,7 @@ export const exportToSvg = async ({
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
         // only the elements that we're exporting, and no extra.
-        payload: serializeAsJSON(elements, appState, data.files || {}, "local"),
+        payload: serializeAsJSON(elements, appState, files || {}, "local"),
       });
     } catch (error: any) {
       console.error(error);
@@ -835,7 +417,7 @@ export const exportToSvg = async ({
       rect.setAttribute("width", `${frame.width}`);
       rect.setAttribute("height", `${frame.height}`);
 
-      if (!cfg.exportingFrame) {
+      if (!exportingFrame) {
         rect.setAttribute("rx", `${FRAME_STYLE.radius}`);
         rect.setAttribute("ry", `${FRAME_STYLE.radius}`);
       }
@@ -850,10 +432,9 @@ export const exportToSvg = async ({
   // inline font faces
   // ---------------------------------------------------------------------------
 
-  const fontFaces =
+  const fontFaces = !opts?.skipInliningFonts
-    config?.skipInliningFonts !== true
+    ? await Fonts.generateFontFaceDeclarations(elements)
-      ? await Fonts.generateFontFaceDeclarations(elements)
+    : [];
-      : [];
 
   const delimiter = "\n      "; // 6 spaces
 
@@ -870,16 +451,17 @@ export const exportToSvg = async ({
   // ---------------------------------------------------------------------------
 
   // render background rect
-  if (appState.exportBackground && appState.viewBackgroundColor) {
+  if (appState.exportBackground && viewBackgroundColor) {
-    const bgColor = cfg.canvasBackgroundColor || appState.viewBackgroundColor;
     const rect = svgRoot.ownerDocument.createElementNS(SVG_NS, "rect");
     rect.setAttribute("x", "0");
     rect.setAttribute("y", "0");
-    rect.setAttribute("width", `${exportWidth / exportScale}`);
+    rect.setAttribute("width", `${width}`);
-    rect.setAttribute("height", `${exportHeight / exportScale}`);
+    rect.setAttribute("height", `${height}`);
     rect.setAttribute(
       "fill",
-      exportWithDarkMode ? applyDarkModeFilter(bgColor) : bgColor,
+      exportWithDarkMode
+        ? applyDarkModeFilter(viewBackgroundColor)
+        : viewBackgroundColor,
     );
     svgRoot.appendChild(rect);
   }
@@ -890,14 +472,14 @@ export const exportToSvg = async ({
 
   const rsvg = rough.svg(svgRoot);
 
-  const renderEmbeddables = config?.renderEmbeddables ?? false;
+  const renderEmbeddables = opts?.renderEmbeddables ?? false;
 
   renderSceneToSvg(
     elementsForRender,
     toBrandedType<RenderableElementsMap>(arrayToMap(elementsForRender)),
     rsvg,
     svgRoot,
-    data.files || {},
+    files || {},
     {
       offsetX,
       offsetY,
@@ -905,7 +487,7 @@ export const exportToSvg = async ({
       exportWithDarkMode,
       renderEmbeddables,
       frameRendering,
-      canvasBackgroundColor: appState.viewBackgroundColor,
+      canvasBackgroundColor: viewBackgroundColor,
       embedsValidationStatus: renderEmbeddables
         ? new Map(
             elementsForRender
@@ -913,8 +495,8 @@ export const exportToSvg = async ({
               .map((element) => [element.id, true]),
           )
         : new Map(),
-      reuseImages: config?.reuseImages ?? true,
+      reuseImages: opts?.reuseImages ?? true,
-      theme,
+      theme: exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
     },
   );
 
@@ -923,10 +505,6 @@ export const exportToSvg = async ({
   return svgRoot;
 };
 
-// ---------------------------------------------------------------------------
-// SVG payload encoding/decoding
-// ---------------------------------------------------------------------------
-
 export const encodeSvgBase64Payload = ({
   payload,
   metadataElement,
@@ -982,149 +560,26 @@ export const decodeSvgBase64Payload = ({ svg }: { svg: string }) => {
   throw new Error("INVALID");
 };
 
-// ---------------------------------------------------------------------------
-// getCanvasSize
-// ---------------------------------------------------------------------------
-
 // calculate smallest area to fit the contents in
-export const getCanvasSize = (
+const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
 ): Bounds => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX);
+  const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY);
+  const height = distance(minY, maxY) + exportPadding * 2;
 
   return [minX, minY, width, height];
 };
 
-/**
- * Gets the export dimensions for a set of elements.
- *
- * @param elements - Elements to calculate size for
- * @param exportPadding - Padding to add around the elements
- * @param scale - Scale factor
- * @returns [width, height] tuple
- */
 export const getExportSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
   scale: number,
 ): [number, number] => {
-  const [, , width, height] = getCanvasSize(elements);
+  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
+    (dimension) => Math.trunc(dimension * scale),
+  );
 
-  return [
+  return [width, height];
-    Math.trunc((width + exportPadding * 2) * scale),
-    Math.trunc((height + exportPadding * 2) * scale),
-  ];
-};
-
-// ---------------------------------------------------------------------------
-// exportToBlob
-// ---------------------------------------------------------------------------
-
-export { MIME_TYPES };
-
-type ExportToBlobConfig = ExportSceneConfig & {
-  mimeType?: string;
-  quality?: number;
-};
-
-export const exportToBlob = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportToBlobConfig;
-}): Promise<Blob> => {
-  let { mimeType = MIME_TYPES.png, quality } = config || {};
-
-  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
-    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
-  }
-
-  // typo in MIME type (should be "jpeg")
-  if (mimeType === "image/jpg") {
-    mimeType = MIME_TYPES.jpg;
-  }
-
-  if (mimeType === MIME_TYPES.jpg && config?.canvasBackgroundColor !== false) {
-    if (config?.canvasBackgroundColor === undefined) {
-      console.warn(
-        `Defaulting "canvasBackgroundColor" for "${MIME_TYPES.jpg}" mimeType`,
-      );
-      config = {
-        ...config,
-        canvasBackgroundColor:
-          data.appState?.viewBackgroundColor || COLOR_WHITE,
-      };
-    }
-  }
-
-  const canvas = await exportToCanvas({ data, config });
-
-  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
-
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      async (blob) => {
-        if (!blob) {
-          return reject(new Error("couldn't export to blob"));
-        }
-        if (
-          blob &&
-          mimeType === MIME_TYPES.png &&
-          data.appState?.exportEmbedScene
-        ) {
-          blob = await encodePngMetadata({
-            blob,
-            metadata: serializeAsJSON(
-              // NOTE as long as we're using the Scene hack, we need to ensure
-              // we pass the original, uncloned elements when serializing
-              // so that we keep ids stable
-              data.elements,
-              data.appState,
-              data.files || {},
-              "local",
-            ),
-          });
-        }
-        resolve(blob);
-      },
-      mimeType,
-      quality,
-    );
-  });
-};
-
-// ---------------------------------------------------------------------------
-// exportToClipboard
-// ---------------------------------------------------------------------------
-
-export const exportToClipboard = async ({
-  type,
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-} & (
-  | { type: "png"; config?: ExportToBlobConfig }
-  | { type: "svg"; config?: ExportToSvgConfig }
-  | { type: "json"; config?: never }
-)) => {
-  if (type === "svg") {
-    const svg = await exportToSvg({
-      data: {
-        ...data,
-        appState: restoreAppState(data.appState, null),
-      },
-      config,
-    });
-    await copyTextToSystemClipboard(svg.outerHTML);
-  } else if (type === "png") {
-    await copyBlobToClipboardAsPng(exportToBlob({ data, config }));
-  } else if (type === "json") {
-    await copyToClipboard(data.elements, data.files);
-  } else {
-    throw new Error("Invalid export type");
-  }
 };