v0.16.2

fix: Gist embed allowing unsafe html (#7883 )
2025-09-04 08:07:00 +02:00 · 2024-04-12 20:15:53 +02:00 · 2024-04-12 15:14:18 +02:00
68 changed files with 451 additions and 3192 deletions
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ The Excalidraw editor (npm package) supports:

 ## Excalidraw.com

-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
+The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/src/excalidraw-app) is part of this repository as well, and the app features:

 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@@ -38,7 +38,6 @@ To render an item, its recommended to use `MainMenu.Item`.
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
-| `selected` | `boolean` | No | `false` | Whether item is active |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
 | `shortcut` | `string` | No | - | The shortcut to be shown for the menu item |
@@ -71,7 +70,6 @@ function App() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
-| `selected` | `boolean` | No | `false` | Whether item is active |
 | `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
--- a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
@@ -1,6 +1,6 @@
 # Customizing Styles

-Excalidraw uses CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
+Excalidraw is using CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.

 Make sure the selector has higher specificity, e.g. by prefixing it with your app's selector:

--- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
@@ -34,7 +34,7 @@ function App() {

 Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.

-The following workflow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
+The following worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.

 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
--- a/dev-docs/docs/introduction/contributing.mdx
+++ b/dev-docs/docs/introduction/contributing.mdx
@@ -15,7 +15,7 @@ In case you want to pick up something from the roadmap, comment on that issue an
 1. Run `yarn` to install dependencies
 1. Create a branch for your PR with `git checkout -b your-branch-name`

-> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork, run:
+> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork. To do this, run:
 >
 > ```bash
 > git remote add upstream https://github.com/excalidraw/excalidraw.git
--- a/dev-docs/src/components/Homepage/index.js
+++ b/dev-docs/src/components/Homepage/index.js
@@ -15,7 +15,7 @@ const FeatureList = [
    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
    description: (
      <>
-        Want to build your own app powered by Excalidraw but don't know where to
+        Want to build your own app powered by Excalidraw by don't know where to
        start?
      </>
    ),
--- a/dev-docs/yarn.lock
+++ b/dev-docs/yarn.lock
@@ -5189,10 +5189,10 @@ multicast-dns@^7.2.5:
    dns-packet "^5.2.2"
    thunky "^1.0.2"

-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==

 negotiator@0.6.3:
  version "0.6.3"
@@ -5853,11 +5853,11 @@ postcss-zindex@^5.1.0:
  integrity sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==

 postcss@^8.3.11, postcss@^8.4.13, postcss@^8.4.14, postcss@^8.4.7:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
  dependencies:
-    nanoid "^3.3.6"
+    nanoid "^3.3.4"
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

--- a/excalidraw-app/data/index.ts
+++ b/excalidraw-app/data/index.ts
@@ -107,7 +107,7 @@ export type SocketUpdateDataSource = {
    type: "MOUSE_LOCATION";
    payload: {
      socketId: string;
-      pointer: { x: number; y: number; tool: "pointer" | "laser" };
+      pointer: { x: number; y: number };
      button: "down" | "up";
      selectedElementIds: AppState["selectedElementIds"];
      username: string;
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "6.0.2",
-    "@excalidraw/laser-pointer": "1.2.0",
    "@excalidraw/random-username": "1.0.0",
    "@radix-ui/react-popover": "1.0.3",
    "@radix-ui/react-tabs": "1.0.2",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -11,7 +11,7 @@
    {
      "src": "apple-touch-icon.png",
      "type": "image/png",
-      "sizes": "180x180"
+      "sizes": "256x256"
    }
  ],
  "start_url": "/",
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -90,9 +90,7 @@ export const actionFinalize = register({
        }
      }
      if (isInvisiblySmallElement(multiPointElement)) {
-        newElements = newElements.filter(
-          (el) => el.id !== multiPointElement.id,
-        );
+        newElements = newElements.slice(0, -1);
      }

      // If the multi point line closes the loop,
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@@ -15,7 +15,6 @@ export const actionToggleGridMode = register({
      appState: {
        ...appState,
        gridSize: this.checked!(appState) ? null : GRID_SIZE,
-        objectsSnapModeEnabled: false,
      },
      commitToHistory: false,
    };
--- a/src/actions/actionToggleObjectsSnapMode.tsx
+++ b/src/actions/actionToggleObjectsSnapMode.tsx
@@ -1,28 +0,0 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-
-export const actionToggleObjectsSnapMode = register({
-  name: "objectsSnapMode",
-  viewMode: true,
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.objectsSnapModeEnabled,
-  },
-  perform(elements, appState) {
-    return {
-      appState: {
-        ...appState,
-        objectsSnapModeEnabled: !this.checked!(appState),
-        gridSize: null,
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState) => appState.objectsSnapModeEnabled,
-  predicate: (elements, appState, appProps) => {
-    return typeof appProps.objectsSnapModeEnabled === "undefined";
-  },
-  contextItemLabel: "buttons.objectsSnapMode",
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.S,
-});
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -80,7 +80,6 @@ export {

 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
-export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode";

 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@@ -28,7 +28,6 @@ export type ShortcutName =
      | "ungroup"
      | "gridMode"
      | "zenMode"
-      | "objectsSnapMode"
      | "stats"
      | "addToLibrary"
      | "viewMode"
@@ -75,7 +74,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")],
  gridMode: [getShortcutKey("CtrlOrCmd+'")],
  zenMode: [getShortcutKey("Alt+Z")],
-  objectsSnapMode: [getShortcutKey("Alt+S")],
  stats: [getShortcutKey("Alt+/")],
  addToLibrary: [],
  flipHorizontal: [getShortcutKey("Shift+H")],
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -51,7 +51,6 @@ export type ActionName =
  | "pasteStyles"
  | "gridMode"
  | "zenMode"
-  | "objectsSnapMode"
  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -99,12 +99,6 @@ export const getDefaultAppState = (): Omit<
    pendingImageElementId: null,
    showHyperlinkPopup: false,
    selectedLinearElement: null,
-    snapLines: [],
-    originSnapOffset: {
-      x: 0,
-      y: 0,
-    },
-    objectsSnapModeEnabled: false,
  };
 };

@@ -212,9 +206,6 @@ const APP_STATE_STORAGE_CONF = (<
  pendingImageElementId: { browser: false, export: false, server: false },
  showHyperlinkPopup: { browser: false, export: false, server: false },
  selectedLinearElement: { browser: true, export: false, server: false },
-  snapLines: { browser: false, export: false, server: false },
-  originSnapOffset: { browser: false, export: false, server: false },
-  objectsSnapModeEnabled: { browser: true, export: false, server: false },
 });

 const _clearAppStateForStorage = <
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -14,8 +14,13 @@ import {
  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { AppClassProperties, UIAppState, Zoom } from "../types";
-import { capitalizeString, isTransparent } from "../utils";
+import { UIAppState, Zoom } from "../types";
+import {
+  capitalizeString,
+  isTransparent,
+  updateActiveTool,
+  setCursorForShape,
+} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
@@ -31,12 +36,7 @@ import {

 import "./Actions.scss";
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import {
-  EmbedIcon,
-  extraToolsIcon,
-  frameToolIcon,
-  laserPointerToolIcon,
-} from "./icons";
+import { EmbedIcon, extraToolsIcon, frameToolIcon } from "./icons";
 import { KEYS } from "../keys";

 export const SelectedShapeActions = ({
@@ -215,23 +215,18 @@ export const SelectedShapeActions = ({
 export const ShapesSwitcher = ({
  interactiveCanvas,
  activeTool,
+  setAppState,
  onImageAction,
  appState,
-  app,
 }: {
  interactiveCanvas: HTMLCanvasElement | null;
  activeTool: UIAppState["activeTool"];
+  setAppState: React.Component<any, UIAppState>["setState"];
  onImageAction: (data: { pointerType: PointerType | null }) => void;
  appState: UIAppState;
-  app: AppClassProperties;
 }) => {
  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
  const device = useDevice();
-
-  const frameToolSelected = activeTool.type === "frame";
-  const laserToolSelected = activeTool.type === "laser";
-  const embeddableToolSelected = activeTool.type === "embeddable";
-
  return (
    <>
      {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@@ -256,14 +251,29 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-${value}`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              if (appState.activeTool.type !== value) {
                trackEvent("toolbar", value, "ui");
              }
-              app.setActiveTool({ type: value });
+              const nextActiveTool = updateActiveTool(appState, {
+                type: value,
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                activeEmbeddable: null,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+              setCursorForShape(interactiveCanvas, {
+                ...appState,
+                activeTool: nextActiveTool,
+              });
              if (value === "image") {
                onImageAction({ pointerType });
              }
@@ -290,14 +300,24 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-frame`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "frame", "ui");
-              app.setActiveTool({ type: "frame" });
+              const nextActiveTool = updateActiveTool(appState, {
+                type: "frame",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+                activeEmbeddable: null,
+              });
            }}
-            selected={activeTool.type === "frame"}
          />
          <ToolButton
            className={clsx("Shape", { fillable: false })}
@@ -310,28 +330,30 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-embeddable`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "embeddable", "ui");
-              app.setActiveTool({ type: "embeddable" });
+              const nextActiveTool = updateActiveTool(appState, {
+                type: "embeddable",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+                activeEmbeddable: null,
+              });
            }}
-            selected={activeTool.type === "embeddable"}
          />
        </>
      ) : (
        <DropdownMenu open={isExtraToolsMenuOpen}>
          <DropdownMenu.Trigger
-            className={clsx("App-toolbar__extra-tools-trigger", {
-              "App-toolbar__extra-tools-trigger--selected":
-                frameToolSelected ||
-                embeddableToolSelected ||
-                // in collab we're already highlighting the laser button
-                // outside toolbar, so let's not highlight extra-tools button
-                // on top of it
-                (laserToolSelected && !app.props.isCollaborating),
-            })}
+            className="App-toolbar__extra-tools-trigger"
            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
            title={t("toolBar.extraTools")}
          >
@@ -344,36 +366,37 @@ export const ShapesSwitcher = ({
          >
            <DropdownMenu.Item
              onSelect={() => {
-                app.setActiveTool({ type: "frame" });
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "frame",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
              }}
              icon={frameToolIcon}
              shortcut={KEYS.F.toLocaleUpperCase()}
              data-testid="toolbar-frame"
-              selected={frameToolSelected}
            >
              {t("toolBar.frame")}
            </DropdownMenu.Item>
            <DropdownMenu.Item
              onSelect={() => {
-                app.setActiveTool({ type: "embeddable" });
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "embeddable",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
              }}
              icon={EmbedIcon}
              data-testid="toolbar-embeddable"
-              selected={embeddableToolSelected}
            >
              {t("toolBar.embeddable")}
            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                app.setActiveTool({ type: "laser" });
-              }}
-              icon={laserPointerToolIcon}
-              data-testid="toolbar-laser"
-              selected={laserToolSelected}
-              shortcut={KEYS.K.toLocaleUpperCase()}
-            >
-              {t("toolBar.laser")}
-            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu>
      )}
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -35,7 +35,6 @@ import {
  actionLink,
  actionToggleElementLock,
  actionToggleLinearEditor,
-  actionToggleObjectsSnapMode,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
@@ -211,7 +210,7 @@ import {
 import Scene from "../scene/Scene";
 import { RenderInteractiveSceneCallback, ScrollBars } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey } from "../shapes";
+import { findShapeByKey, SHAPES } from "../shapes";
 import {
  AppClassProperties,
  AppProps,
@@ -229,9 +228,6 @@ import {
  FrameNameBoundsCache,
  SidebarName,
  SidebarTabName,
-  KeyboardModifiersObject,
-  CollaboratorPointer,
-  ToolType,
 } from "../types";
 import {
  debounce,
@@ -346,17 +342,6 @@ import {
 import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import {
-  getSnapLinesAtPointer,
-  snapDraggedElements,
-  isActiveToolNonLinearSnappable,
-  snapNewElement,
-  snapResizingElements,
-  isSnappingEnabled,
-  getVisibleGaps,
-  getReferenceSnapPoints,
-  SnapCache,
-} from "../snapping";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { activeEyeDropperAtom } from "./EyeDropper";
@@ -369,8 +354,6 @@ import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
-import { LaserToolOverlay } from "./LaserTool/LaserTool";
-import { LaserPathManager } from "./LaserTool/LaserPathManager";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -495,13 +478,10 @@ class App extends React.Component<AppProps, AppState> {
  private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>();

  hitLinkElement?: NonDeletedExcalidrawElement;
-  lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
-  lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
-    null;
+  lastPointerDown: React.PointerEvent<HTMLElement> | null = null;
+  lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
  lastViewportPosition = { x: 0, y: 0 };

-  laserPathManager: LaserPathManager = new LaserPathManager(this);
-
  constructor(props: AppProps) {
    super(props);
    const defaultAppState = getDefaultAppState();
@@ -510,7 +490,6 @@ class App extends React.Component<AppProps, AppState> {
      viewModeEnabled = false,
      zenModeEnabled = false,
      gridModeEnabled = false,
-      objectsSnapModeEnabled = false,
      theme = defaultAppState.theme,
      name = defaultAppState.name,
    } = props;
@@ -521,7 +500,6 @@ class App extends React.Component<AppProps, AppState> {
      ...this.getCanvasOffsets(),
      viewModeEnabled,
      zenModeEnabled,
-      objectsSnapModeEnabled,
      gridSize: gridModeEnabled ? GRID_SIZE : null,
      name,
      width: window.innerWidth,
@@ -916,7 +894,11 @@ class App extends React.Component<AppProps, AppState> {
                      title="Excalidraw Embedded Content"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen={true}
-                      sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads"
+                      sandbox={`${
+                        embedLink?.sandbox?.allowSameOrigin
+                          ? "allow-same-origin"
+                          : ""
+                      } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
                    />
                  )}
                </div>
@@ -1108,7 +1090,7 @@ class App extends React.Component<AppProps, AppState> {
            cursor: CURSOR_TYPE.MOVE,
            pointerEvents: this.state.viewModeEnabled
              ? POINTER_EVENTS.disabled
-              : POINTER_EVENTS.enabled,
+              : POINTER_EVENTS.inheritFromUI,
          }}
          onPointerDown={(event) => this.handleCanvasPointerDown(event)}
          onWheel={(event) => this.handleWheel(event)}
@@ -1210,14 +1192,12 @@ class App extends React.Component<AppProps, AppState> {
                            !this.scene.getElementsIncludingDeleted().length
                          }
                          app={this}
-                          isCollaborating={this.props.isCollaborating}
                        >
                          {this.props.children}
                        </LayerUI>
                        <div className="excalidraw-textEditorContainer" />
                        <div className="excalidraw-contextMenuContainer" />
                        <div className="excalidraw-eye-dropper-container" />
-                        <LaserToolOverlay manager={this.laserPathManager} />
                        {selectedElements.length === 1 &&
                          !this.state.contextMenu &&
                          this.state.showHyperlinkPopup && (
@@ -1745,9 +1725,7 @@ class App extends React.Component<AppProps, AppState> {
    this.removeEventListeners();
    this.scene.destroy();
    this.library.destroy();
-    this.laserPathManager.destroy();
    ShapeCache.destroy();
-    SnapCache.destroy();
    clearTimeout(touchTimeout);
    isSomeElementSelected.clearCache();
    selectGroupsForSelectedElements.clearCache();
@@ -2562,11 +2540,10 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  togglePenMode = (force?: boolean) => {
+  togglePenMode = () => {
    this.setState((prevState) => {
      return {
-        penMode: force ?? !prevState.penMode,
-        penDetected: true,
+        penMode: !prevState.penMode,
      };
    });
  };
@@ -3060,15 +3037,6 @@ class App extends React.Component<AppProps, AppState> {
        }
      }

-      if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
-        if (this.state.activeTool.type === "laser") {
-          this.setActiveTool({ type: "selection" });
-        } else {
-          this.setActiveTool({ type: "laser" });
-        }
-        return;
-      }
-
      if (
        event[KEYS.CTRL_OR_CMD] &&
        (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
@@ -3128,10 +3096,15 @@ class App extends React.Component<AppProps, AppState> {
    }
  });

-  setActiveTool = (
+  private setActiveTool = (
    tool:
      | {
-          type: ToolType;
+          type:
+            | typeof SHAPES[number]["value"]
+            | "eraser"
+            | "hand"
+            | "frame"
+            | "embeddable";
        }
      | { type: "custom"; customType: string },
  ) => {
@@ -3150,30 +3123,17 @@ class App extends React.Component<AppProps, AppState> {
    if (nextActiveTool.type === "image") {
      this.onImageAction();
    }
-
-    this.setState((prevState) => {
-      const commonResets = {
-        snapLines: prevState.snapLines.length ? [] : prevState.snapLines,
-        originSnapOffset: null,
-        activeEmbeddable: null,
-      } as const;
-      if (nextActiveTool.type !== "selection") {
-        return {
-          ...prevState,
-          activeTool: nextActiveTool,
-          selectedElementIds: makeNextSelectedElementIds({}, prevState),
-          selectedGroupIds: makeNextSelectedElementIds({}, prevState),
-          editingGroupId: null,
-          multiElement: null,
-          ...commonResets,
-        };
-      }
-      return {
-        ...prevState,
+    if (nextActiveTool.type !== "selection") {
+      this.setState({
        activeTool: nextActiveTool,
-        ...commonResets,
-      };
-    });
+        selectedElementIds: makeNextSelectedElementIds({}, this.state),
+        selectedGroupIds: {},
+        editingGroupId: null,
+        activeEmbeddable: null,
+      });
+    } else {
+      this.setState({ activeTool: nextActiveTool, activeEmbeddable: null });
+    }
  };

  private setCursor = (cursor: string) => {
@@ -3750,10 +3710,10 @@ class App extends React.Component<AppProps, AppState> {
    isTouchScreen: boolean,
  ) => {
    const draggedDistance = distance2d(
-      this.lastPointerDownEvent!.clientX,
-      this.lastPointerDownEvent!.clientY,
-      this.lastPointerUpEvent!.clientX,
-      this.lastPointerUpEvent!.clientY,
+      this.lastPointerDown!.clientX,
+      this.lastPointerDown!.clientY,
+      this.lastPointerUp!.clientX,
+      this.lastPointerUp!.clientY,
    );
    if (
      !this.hitLinkElement ||
@@ -3764,7 +3724,7 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }
    const lastPointerDownCoords = viewportCoordsToSceneCoords(
-      this.lastPointerDownEvent!,
+      this.lastPointerDown!,
      this.state,
    );
    const lastPointerDownHittingLinkIcon = isPointHittingLink(
@@ -3774,7 +3734,7 @@ class App extends React.Component<AppProps, AppState> {
      this.device.isMobile,
    );
    const lastPointerUpCoords = viewportCoordsToSceneCoords(
-      this.lastPointerUpEvent!,
+      this.lastPointerUp!,
      this.state,
    );
    const lastPointerUpHittingLinkIcon = isPointHittingLink(
@@ -3909,30 +3869,6 @@ class App extends React.Component<AppProps, AppState> {
    const scenePointer = viewportCoordsToSceneCoords(event, this.state);
    const { x: scenePointerX, y: scenePointerY } = scenePointer;

-    if (
-      !this.state.draggingElement &&
-      isActiveToolNonLinearSnappable(this.state.activeTool.type)
-    ) {
-      const { originOffset, snapLines } = getSnapLinesAtPointer(
-        this.scene.getNonDeletedElements(),
-        this.state,
-        {
-          x: scenePointerX,
-          y: scenePointerY,
-        },
-        event,
-      );
-
-      this.setState({
-        snapLines,
-        originSnapOffset: originOffset,
-      });
-    } else if (!this.state.draggingElement) {
-      this.setState({
-        snapLines: [],
-      });
-    }
-
    if (
      this.state.editingLinearElement &&
      !this.state.editingLinearElement.isDragging
@@ -4403,10 +4339,6 @@ class App extends React.Component<AppProps, AppState> {
      this.setState({ contextMenu: null });
    }

-    if (this.state.snapLines) {
-      this.setAppState({ snapLines: [] });
-    }
-
    this.updateGestureOnPointerDown(event);

    // if dragging element is freedraw and another pointerdown event occurs
@@ -4479,18 +4411,17 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }

-    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
-      return;
-    }
-
-    this.lastPointerDownEvent = event;
-
+    this.lastPointerDown = event;
    this.setState({
      lastPointerDownWith: event.pointerType,
      cursorButton: "down",
    });
    this.savePointer(event.clientX, event.clientY, "down");

+    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+      return;
+    }
+
    // only handle left mouse button or touch
    if (
      event.button !== POINTER_BUTTON.MAIN &&
@@ -4581,11 +4512,6 @@ class App extends React.Component<AppProps, AppState> {
      setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
    } else if (this.state.activeTool.type === "frame") {
      this.createFrameElementOnPointerDown(pointerDownState);
-    } else if (this.state.activeTool.type === "laser") {
-      this.laserPathManager.startPath(
-        pointerDownState.lastCoords.x,
-        pointerDownState.lastCoords.y,
-      );
    } else if (
      this.state.activeTool.type !== "eraser" &&
      this.state.activeTool.type !== "hand"
@@ -4609,7 +4535,7 @@ class App extends React.Component<AppProps, AppState> {

    lastPointerUp = onPointerUp;

-    if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
+    if (!this.state.viewModeEnabled) {
      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
@@ -4625,14 +4551,14 @@ class App extends React.Component<AppProps, AppState> {
    event: React.PointerEvent<HTMLCanvasElement>,
  ) => {
    this.removePointer(event);
-    this.lastPointerUpEvent = event;
+    this.lastPointerUp = event;

    const scenePointer = viewportCoordsToSceneCoords(
      { clientX: event.clientX, clientY: event.clientY },
      this.state,
    );
    const clicklength =
-      event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
+      event.timeStamp - (this.lastPointerDown?.timeStamp ?? 0);
    if (this.device.isMobile && clicklength < 300) {
      const hitElement = this.getElementAtPosition(
        scenePointer.x,
@@ -5386,9 +5312,7 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      sceneX,
      sceneY,
-      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
-        ? null
-        : this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
    );

    const embedLink = getEmbedLink(link);
@@ -5438,9 +5362,7 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      sceneX,
      sceneY,
-      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
-        ? null
-        : this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
    );

    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5617,9 +5539,7 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      pointerDownState.origin.x,
      pointerDownState.origin.y,
-      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
-        ? null
-        : this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
    );

    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5677,9 +5597,7 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      pointerDownState.origin.x,
      pointerDownState.origin.y,
-      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
-        ? null
-        : this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
    );

    const frame = newFrameElement({
@@ -5702,52 +5620,6 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  private maybeCacheReferenceSnapPoints(
-    event: KeyboardModifiersObject,
-    selectedElements: ExcalidrawElement[],
-    recomputeAnyways: boolean = false,
-  ) {
-    if (
-      isSnappingEnabled({
-        event,
-        appState: this.state,
-        selectedElements,
-      }) &&
-      (recomputeAnyways || !SnapCache.getReferenceSnapPoints())
-    ) {
-      SnapCache.setReferenceSnapPoints(
-        getReferenceSnapPoints(
-          this.scene.getNonDeletedElements(),
-          selectedElements,
-          this.state,
-        ),
-      );
-    }
-  }
-
-  private maybeCacheVisibleGaps(
-    event: KeyboardModifiersObject,
-    selectedElements: ExcalidrawElement[],
-    recomputeAnyways: boolean = false,
-  ) {
-    if (
-      isSnappingEnabled({
-        event,
-        appState: this.state,
-        selectedElements,
-      }) &&
-      (recomputeAnyways || !SnapCache.getVisibleGaps())
-    ) {
-      SnapCache.setVisibleGaps(
-        getVisibleGaps(
-          this.scene.getNonDeletedElements(),
-          selectedElements,
-          this.state,
-        ),
-      );
-    }
-  }
-
  private onKeyDownFromPointerDownHandler(
    pointerDownState: PointerDownState,
  ): (event: KeyboardEvent) => void {
@@ -5805,10 +5677,6 @@ class App extends React.Component<AppProps, AppState> {
        return;
      }

-      if (this.state.activeTool.type === "laser") {
-        this.laserPathManager.addPointToPath(pointerCoords.x, pointerCoords.y);
-      }
-
      const [gridX, gridY] = getGridPoint(
        pointerCoords.x,
        pointerCoords.y,
@@ -5981,62 +5849,33 @@ class App extends React.Component<AppProps, AppState> {
          !this.state.editingElement &&
          this.state.activeEmbeddable?.state !== "active"
        ) {
-          const dragOffset = {
-            x: pointerCoords.x - pointerDownState.origin.x,
-            y: pointerCoords.y - pointerDownState.origin.y,
-          };
+          const [dragX, dragY] = getGridPoint(
+            pointerCoords.x - pointerDownState.drag.offset.x,
+            pointerCoords.y - pointerDownState.drag.offset.y,
+            event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+          );

-          const originalElements = [
-            ...pointerDownState.originalElements.values(),
+          const [dragDistanceX, dragDistanceY] = [
+            Math.abs(pointerCoords.x - pointerDownState.origin.x),
+            Math.abs(pointerCoords.y - pointerDownState.origin.y),
          ];

          // We only drag in one direction if shift is pressed
          const lockDirection = event.shiftKey;
-
-          if (lockDirection) {
-            const distanceX = Math.abs(dragOffset.x);
-            const distanceY = Math.abs(dragOffset.y);
-
-            const lockX = lockDirection && distanceX < distanceY;
-            const lockY = lockDirection && distanceX > distanceY;
-
-            if (lockX) {
-              dragOffset.x = 0;
-            }
-
-            if (lockY) {
-              dragOffset.y = 0;
-            }
-          }
-
-          // Snap cache *must* be synchronously popuplated before initial drag,
-          // otherwise the first drag even will not snap, causing a jump before
-          // it snaps to its position if previously snapped already.
-          this.maybeCacheVisibleGaps(event, selectedElements);
-          this.maybeCacheReferenceSnapPoints(event, selectedElements);
-
-          const { snapOffset, snapLines } = snapDraggedElements(
-            getSelectedElements(originalElements, this.state),
-            dragOffset,
-            this.state,
-            event,
-          );
-
-          this.setState({ snapLines });
-
          // when we're editing the name of a frame, we want the user to be
          // able to select and interact with the text input
          !this.state.editingFrame &&
            dragSelectedElements(
              pointerDownState,
              selectedElements,
-              dragOffset,
+              dragX,
+              dragY,
+              lockDirection,
+              dragDistanceX,
+              dragDistanceY,
              this.state,
              this.scene,
-              snapOffset,
-              event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
            );
-
          this.maybeSuggestBindingForAll(selectedElements);

          // We duplicate the selected element if alt is pressed on pointer move
@@ -6077,21 +5916,15 @@ class App extends React.Component<AppProps, AppState> {
                  groupIdMap,
                  element,
                );
-                const origElement = pointerDownState.originalElements.get(
-                  element.id,
-                )!;
-                mutateElement(duplicatedElement, {
-                  x: origElement.x,
-                  y: origElement.y,
-                });
-
-                // put duplicated element to pointerDownState.originalElements
-                // so that we can snap to the duplicated element without releasing
-                pointerDownState.originalElements.set(
-                  duplicatedElement.id,
-                  duplicatedElement,
+                const [originDragX, originDragY] = getGridPoint(
+                  pointerDownState.origin.x - pointerDownState.drag.offset.x,
+                  pointerDownState.origin.y - pointerDownState.drag.offset.y,
+                  event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
                );
-
+                mutateElement(duplicatedElement, {
+                  x: duplicatedElement.x + (originDragX - dragX),
+                  y: duplicatedElement.y + (originDragY - dragY),
+                });
                nextElements.push(duplicatedElement);
                elementsToAppend.push(element);
                oldIdToDuplicatedId.set(element.id, duplicatedElement.id);
@@ -6117,8 +5950,6 @@ class App extends React.Component<AppProps, AppState> {
              oldIdToDuplicatedId,
            );
            this.scene.replaceAllElements(nextSceneElements);
-            this.maybeCacheVisibleGaps(event, selectedElements, true);
-            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
          }
          return;
        }
@@ -6335,7 +6166,6 @@ class App extends React.Component<AppProps, AppState> {
        isResizing,
        isRotating,
      } = this.state;
-
      this.setState({
        isResizing: false,
        isRotating: false,
@@ -6350,14 +6180,8 @@ class App extends React.Component<AppProps, AppState> {
          multiElement || isTextElement(this.state.editingElement)
            ? this.state.editingElement
            : null,
-        snapLines: [],
-
-        originSnapOffset: null,
      });

-      SnapCache.setReferenceSnapPoints(null);
-      SnapCache.setVisibleGaps(null);
-
      this.savePointer(childEvent.clientX, childEvent.clientY, "up");

      this.setState({
@@ -6581,9 +6405,7 @@ class App extends React.Component<AppProps, AppState> {
      ) {
        // remove invisible element which was added in onPointerDown
        this.scene.replaceAllElements(
-          this.scene
-            .getElementsIncludingDeleted()
-            .filter((el) => el.id !== draggingElement.id),
+          this.scene.getElementsIncludingDeleted().slice(0, -1),
        );
        this.setState({
          draggingElement: null,
@@ -6805,17 +6627,17 @@ class App extends React.Component<AppProps, AppState> {
      }
      if (isEraserActive(this.state)) {
        const draggedDistance = distance2d(
-          this.lastPointerDownEvent!.clientX,
-          this.lastPointerDownEvent!.clientY,
-          this.lastPointerUpEvent!.clientX,
-          this.lastPointerUpEvent!.clientY,
+          this.lastPointerDown!.clientX,
+          this.lastPointerDown!.clientY,
+          this.lastPointerUp!.clientX,
+          this.lastPointerUp!.clientY,
        );

        if (draggedDistance === 0) {
          const scenePointer = viewportCoordsToSceneCoords(
            {
-              clientX: this.lastPointerUpEvent!.clientX,
-              clientY: this.lastPointerUpEvent!.clientY,
+              clientX: this.lastPointerUp!.clientX,
+              clientY: this.lastPointerUp!.clientY,
            },
            this.state,
          );
@@ -7055,11 +6877,6 @@ class App extends React.Component<AppProps, AppState> {
          : unbindLinearElements)(this.scene.getSelectedElements(this.state));
      }

-      if (activeTool.type === "laser") {
-        this.laserPathManager.endPath();
-        return;
-      }
-
      if (!activeTool.locked && activeTool.type !== "freedraw") {
        resetCursor(this.interactiveCanvas);
        this.setState({
@@ -7076,16 +6893,14 @@ class App extends React.Component<AppProps, AppState> {

      if (
        hitElement &&
-        this.lastPointerUpEvent &&
-        this.lastPointerDownEvent &&
-        this.lastPointerUpEvent.timeStamp -
-          this.lastPointerDownEvent.timeStamp <
-          300 &&
+        this.lastPointerUp &&
+        this.lastPointerDown &&
+        this.lastPointerUp.timeStamp - this.lastPointerDown.timeStamp < 300 &&
        gesture.pointers.size <= 1 &&
        isEmbeddableElement(hitElement) &&
        this.isEmbeddableCenter(
          hitElement,
-          this.lastPointerUpEvent,
+          this.lastPointerUp,
          pointerDownState.origin.x,
          pointerDownState.origin.y,
        )
@@ -7894,7 +7709,7 @@ class App extends React.Component<AppProps, AppState> {
        shouldResizeFromCenter(event),
      );
    } else {
-      let [gridX, gridY] = getGridPoint(
+      const [gridX, gridY] = getGridPoint(
        pointerCoords.x,
        pointerCoords.y,
        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
@@ -7908,33 +7723,6 @@ class App extends React.Component<AppProps, AppState> {
          ? image.width / image.height
          : null;

-      this.maybeCacheReferenceSnapPoints(event, [draggingElement]);
-
-      const { snapOffset, snapLines } = snapNewElement(
-        draggingElement,
-        this.state,
-        event,
-        {
-          x:
-            pointerDownState.originInGrid.x +
-            (this.state.originSnapOffset?.x ?? 0),
-          y:
-            pointerDownState.originInGrid.y +
-            (this.state.originSnapOffset?.y ?? 0),
-        },
-        {
-          x: gridX - pointerDownState.originInGrid.x,
-          y: gridY - pointerDownState.originInGrid.y,
-        },
-      );
-
-      gridX += snapOffset.x;
-      gridY += snapOffset.y;
-
-      this.setState({
-        snapLines,
-      });
-
      dragNewElement(
        draggingElement,
        this.state.activeTool.type,
@@ -7949,7 +7737,6 @@ class App extends React.Component<AppProps, AppState> {
          : shouldMaintainAspectRatio(event),
        shouldResizeFromCenter(event),
        aspectRatio,
-        this.state.originSnapOffset,
      );

      this.maybeSuggestBindingForAll([draggingElement]);
@@ -7991,7 +7778,7 @@ class App extends React.Component<AppProps, AppState> {
      activeEmbeddable: null,
    });
    const pointerCoords = pointerDownState.lastCoords;
-    let [resizeX, resizeY] = getGridPoint(
+    const [resizeX, resizeY] = getGridPoint(
      pointerCoords.x - pointerDownState.resize.offset.x,
      pointerCoords.y - pointerDownState.resize.offset.y,
      event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
@@ -8019,41 +7806,6 @@ class App extends React.Component<AppProps, AppState> {
      });
    });

-    // check needed for avoiding flickering when a key gets pressed
-    // during dragging
-    if (!this.state.selectedElementsAreBeingDragged) {
-      const [gridX, gridY] = getGridPoint(
-        pointerCoords.x,
-        pointerCoords.y,
-        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
-      );
-
-      const dragOffset = {
-        x: gridX - pointerDownState.originInGrid.x,
-        y: gridY - pointerDownState.originInGrid.y,
-      };
-
-      const originalElements = [...pointerDownState.originalElements.values()];
-
-      this.maybeCacheReferenceSnapPoints(event, selectedElements);
-
-      const { snapOffset, snapLines } = snapResizingElements(
-        selectedElements,
-        getSelectedElements(originalElements, this.state),
-        this.state,
-        event,
-        dragOffset,
-        transformHandleType,
-      );
-
-      resizeX += snapOffset.x;
-      resizeY += snapOffset.y;
-
-      this.setState({
-        snapLines,
-      });
-    }
-
    if (
      transformElements(
        pointerDownState,
@@ -8069,7 +7821,6 @@ class App extends React.Component<AppProps, AppState> {
        resizeY,
        pointerDownState.resize.center.x,
        pointerDownState.resize.center.y,
-        this.state,
      )
    ) {
      this.maybeSuggestBindingForAll(selectedElements);
@@ -8157,7 +7908,6 @@ class App extends React.Component<AppProps, AppState> {
        actionUnlockAllElements,
        CONTEXT_MENU_SEPARATOR,
        actionToggleGridMode,
-        actionToggleObjectsSnapMode,
        actionToggleZenMode,
        actionToggleViewMode,
        actionToggleStats,
@@ -8304,21 +8054,15 @@ class App extends React.Component<AppProps, AppState> {
    if (!x || !y) {
      return;
    }
-    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+    const pointer = viewportCoordsToSceneCoords(
      { clientX: x, clientY: y },
      this.state,
    );

-    if (isNaN(sceneX) || isNaN(sceneY)) {
+    if (isNaN(pointer.x) || isNaN(pointer.y)) {
      // sometimes the pointer goes off screen
    }

-    const pointer: CollaboratorPointer = {
-      x: sceneX,
-      y: sceneY,
-      tool: this.state.activeTool.type === "laser" ? "laser" : "pointer",
-    };
-
    this.props.onPointerUpdate?.({
      pointer,
      button,
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -165,7 +165,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              shortcuts={[KEYS.E, KEYS["0"]]}
            />
            <Shortcut label={t("toolBar.frame")} shortcuts={[KEYS.F]} />
-            <Shortcut label={t("toolBar.laser")} shortcuts={[KEYS.K]} />
            <Shortcut
              label={t("labels.eyeDropper")}
              shortcuts={[KEYS.I, "Shift+S", "Shift+G"]}
@@ -259,10 +258,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("buttons.zenMode")}
              shortcuts={[getShortcutKey("Alt+Z")]}
            />
-            <Shortcut
-              label={t("buttons.objectsSnapMode")}
-              shortcuts={[getShortcutKey("Alt+S")]}
-            />
            <Shortcut
              label={t("labels.showGrid")}
              shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
--- a/src/components/LaserTool/LaserPathManager.ts
+++ b/src/components/LaserTool/LaserPathManager.ts
@@ -1,293 +0,0 @@
-import { LaserPointer } from "@excalidraw/laser-pointer";
-
-import { sceneCoordsToViewportCoords } from "../../utils";
-import App from "../App";
-import { getClientColor } from "../../clients";
-
-// decay time in milliseconds
-const DECAY_TIME = 1000;
-// length of line in points before it starts decaying
-const DECAY_LENGTH = 50;
-
-const average = (a: number, b: number) => (a + b) / 2;
-function getSvgPathFromStroke(points: number[][], closed = true) {
-  const len = points.length;
-
-  if (len < 4) {
-    return ``;
-  }
-
-  let a = points[0];
-  let b = points[1];
-  const c = points[2];
-
-  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(
-    2,
-  )},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
-    b[1],
-    c[1],
-  ).toFixed(2)} T`;
-
-  for (let i = 2, max = len - 1; i < max; i++) {
-    a = points[i];
-    b = points[i + 1];
-    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(
-      2,
-    )} `;
-  }
-
-  if (closed) {
-    result += "Z";
-  }
-
-  return result;
-}
-
-declare global {
-  interface Window {
-    LPM: LaserPathManager;
-  }
-}
-
-function easeOutCubic(t: number) {
-  return 1 - Math.pow(1 - t, 3);
-}
-
-function instantiateCollabolatorState(): CollabolatorState {
-  return {
-    currentPath: undefined,
-    finishedPaths: [],
-    lastPoint: [-10000, -10000],
-    svg: document.createElementNS("http://www.w3.org/2000/svg", "path"),
-  };
-}
-
-function instantiatePath() {
-  LaserPointer.constants.cornerDetectionMaxAngle = 70;
-
-  return new LaserPointer({
-    simplify: 0,
-    streamline: 0.4,
-    sizeMapping: (c) => {
-      const pt = DECAY_TIME;
-      const pl = DECAY_LENGTH;
-      const t = Math.max(0, 1 - (performance.now() - c.pressure) / pt);
-      const l = (pl - Math.min(pl, c.totalLength - c.currentIndex)) / pl;
-
-      return Math.min(easeOutCubic(l), easeOutCubic(t));
-    },
-  });
-}
-
-type CollabolatorState = {
-  currentPath: LaserPointer | undefined;
-  finishedPaths: LaserPointer[];
-  lastPoint: [number, number];
-  svg: SVGPathElement;
-};
-
-export class LaserPathManager {
-  private ownState: CollabolatorState;
-  private collaboratorsState: Map<string, CollabolatorState> = new Map();
-
-  private rafId: number | undefined;
-  private lastUpdate = 0;
-  private container: SVGSVGElement | undefined;
-
-  constructor(private app: App) {
-    this.ownState = instantiateCollabolatorState();
-  }
-
-  destroy() {
-    this.stop();
-    this.lastUpdate = 0;
-    this.ownState = instantiateCollabolatorState();
-    this.collaboratorsState = new Map();
-  }
-
-  startPath(x: number, y: number) {
-    this.ownState.currentPath = instantiatePath();
-    this.ownState.currentPath.addPoint([x, y, performance.now()]);
-    this.updatePath(this.ownState);
-  }
-
-  addPointToPath(x: number, y: number) {
-    if (this.ownState.currentPath) {
-      this.ownState.currentPath?.addPoint([x, y, performance.now()]);
-      this.updatePath(this.ownState);
-    }
-  }
-
-  endPath() {
-    if (this.ownState.currentPath) {
-      this.ownState.currentPath.close();
-      this.ownState.finishedPaths.push(this.ownState.currentPath);
-      this.updatePath(this.ownState);
-    }
-  }
-
-  private updatePath(state: CollabolatorState) {
-    this.lastUpdate = performance.now();
-
-    if (!this.isRunning) {
-      this.start();
-    }
-  }
-
-  private isRunning = false;
-
-  start(svg?: SVGSVGElement) {
-    if (svg) {
-      this.container = svg;
-      this.container.appendChild(this.ownState.svg);
-    }
-
-    this.stop();
-    this.isRunning = true;
-    this.loop();
-  }
-
-  stop() {
-    this.isRunning = false;
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.rafId = undefined;
-  }
-
-  loop() {
-    this.rafId = requestAnimationFrame(this.loop.bind(this));
-
-    this.updateCollabolatorsState();
-
-    if (performance.now() - this.lastUpdate < DECAY_TIME * 2) {
-      this.update();
-    } else {
-      this.isRunning = false;
-    }
-  }
-
-  draw(path: LaserPointer) {
-    const stroke = path
-      .getStrokeOutline(path.options.size / this.app.state.zoom.value)
-      .map(([x, y]) => {
-        const result = sceneCoordsToViewportCoords(
-          { sceneX: x, sceneY: y },
-          this.app.state,
-        );
-
-        return [result.x, result.y];
-      });
-
-    return getSvgPathFromStroke(stroke, true);
-  }
-
-  updateCollabolatorsState() {
-    if (!this.container || !this.app.state.collaborators.size) {
-      return;
-    }
-
-    for (const [key, collabolator] of this.app.state.collaborators.entries()) {
-      if (!this.collaboratorsState.has(key)) {
-        const state = instantiateCollabolatorState();
-        this.container.appendChild(state.svg);
-        this.collaboratorsState.set(key, state);
-
-        this.updatePath(state);
-      }
-
-      const state = this.collaboratorsState.get(key)!;
-
-      if (collabolator.pointer && collabolator.pointer.tool === "laser") {
-        if (collabolator.button === "down" && state.currentPath === undefined) {
-          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
-          state.currentPath = instantiatePath();
-          state.currentPath.addPoint([
-            collabolator.pointer.x,
-            collabolator.pointer.y,
-            performance.now(),
-          ]);
-
-          this.updatePath(state);
-        }
-
-        if (collabolator.button === "down" && state.currentPath !== undefined) {
-          if (
-            collabolator.pointer.x !== state.lastPoint[0] ||
-            collabolator.pointer.y !== state.lastPoint[1]
-          ) {
-            state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
-            state.currentPath.addPoint([
-              collabolator.pointer.x,
-              collabolator.pointer.y,
-              performance.now(),
-            ]);
-
-            this.updatePath(state);
-          }
-        }
-
-        if (collabolator.button === "up" && state.currentPath !== undefined) {
-          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
-          state.currentPath.addPoint([
-            collabolator.pointer.x,
-            collabolator.pointer.y,
-            performance.now(),
-          ]);
-          state.currentPath.close();
-
-          state.finishedPaths.push(state.currentPath);
-          state.currentPath = undefined;
-
-          this.updatePath(state);
-        }
-      }
-    }
-  }
-
-  update() {
-    if (!this.container) {
-      return;
-    }
-
-    for (const [key, state] of this.collaboratorsState.entries()) {
-      if (!this.app.state.collaborators.has(key)) {
-        state.svg.remove();
-        this.collaboratorsState.delete(key);
-        continue;
-      }
-
-      state.finishedPaths = state.finishedPaths.filter((path) => {
-        const lastPoint = path.originalPoints[path.originalPoints.length - 1];
-
-        return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
-      });
-
-      let paths = state.finishedPaths.map((path) => this.draw(path)).join(" ");
-
-      if (state.currentPath) {
-        paths += ` ${this.draw(state.currentPath)}`;
-      }
-
-      state.svg.setAttribute("d", paths);
-      state.svg.setAttribute("fill", getClientColor(key));
-    }
-
-    this.ownState.finishedPaths = this.ownState.finishedPaths.filter((path) => {
-      const lastPoint = path.originalPoints[path.originalPoints.length - 1];
-
-      return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
-    });
-
-    let paths = this.ownState.finishedPaths
-      .map((path) => this.draw(path))
-      .join(" ");
-
-    if (this.ownState.currentPath) {
-      paths += ` ${this.draw(this.ownState.currentPath)}`;
-    }
-
-    this.ownState.svg.setAttribute("d", paths);
-    this.ownState.svg.setAttribute("fill", "red");
-  }
-}
--- a/src/components/LaserTool/LaserPointerButton.tsx
+++ b/src/components/LaserTool/LaserPointerButton.tsx
@@ -1,41 +0,0 @@
-import "../ToolIcon.scss";
-
-import clsx from "clsx";
-import { ToolButtonSize } from "../ToolButton";
-import { laserPointerToolIcon } from "../icons";
-
-type LaserPointerIconProps = {
-  title?: string;
-  name?: string;
-  checked: boolean;
-  onChange?(): void;
-  isMobile?: boolean;
-};
-
-const DEFAULT_SIZE: ToolButtonSize = "small";
-
-export const LaserPointerButton = (props: LaserPointerIconProps) => {
-  return (
-    <label
-      className={clsx(
-        "ToolIcon ToolIcon__LaserPointer",
-        `ToolIcon_size_${DEFAULT_SIZE}`,
-        {
-          "is-mobile": props.isMobile,
-        },
-      )}
-      title={`${props.title}`}
-    >
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        name={props.name}
-        onChange={props.onChange}
-        checked={props.checked}
-        aria-label={props.title}
-        data-testid="toolbar-LaserPointer"
-      />
-      <div className="ToolIcon__icon">{laserPointerToolIcon}</div>
-    </label>
-  );
-};
--- a/src/components/LaserTool/LaserTool.tsx
+++ b/src/components/LaserTool/LaserTool.tsx
@@ -1,27 +0,0 @@
-import { useEffect, useRef } from "react";
-import { LaserPathManager } from "./LaserPathManager";
-import "./LaserToolOverlay.scss";
-
-type LaserToolOverlayProps = {
-  manager: LaserPathManager;
-};
-
-export const LaserToolOverlay = ({ manager }: LaserToolOverlayProps) => {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-
-  useEffect(() => {
-    if (svgRef.current) {
-      manager.start(svgRef.current);
-    }
-
-    return () => {
-      manager.stop();
-    };
-  }, [manager]);
-
-  return (
-    <div className="LaserToolOverlay">
-      <svg ref={svgRef} className="LaserToolOverlayCanvas" />
-    </div>
-  );
-};
--- a/src/components/LaserTool/LaserToolOverlay.scss
+++ b/src/components/LaserTool/LaserToolOverlay.scss
@@ -1,20 +0,0 @@
-.excalidraw {
-  .LaserToolOverlay {
-    pointer-events: none;
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    z-index: 2;
-
-    .LaserToolOverlayCanvas {
-      image-rendering: auto;
-      overflow: visible;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-}
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -55,7 +55,6 @@ import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
-import { LaserPointerButton } from "./LaserTool/LaserPointerButton";

 interface LayerUIProps {
  actionManager: ActionManager;
@@ -78,7 +77,6 @@ interface LayerUIProps {
  renderWelcomeScreen: boolean;
  children?: React.ReactNode;
  app: AppClassProperties;
-  isCollaborating: boolean;
 }

 const DefaultMainMenu: React.FC<{
@@ -136,7 +134,6 @@ const LayerUI = ({
  renderWelcomeScreen,
  children,
  app,
-  isCollaborating,
 }: LayerUIProps) => {
  const device = useDevice();
  const tunnels = useInitializeTunnels();
@@ -282,7 +279,7 @@ const LayerUI = ({
                            appState={appState}
                            interactiveCanvas={interactiveCanvas}
                            activeTool={appState.activeTool}
-                            app={app}
+                            setAppState={setAppState}
                            onImageAction={({ pointerType }) => {
                              onImageAction({
                                insertOnCanvasDirectly: pointerType !== "mouse",
@@ -291,24 +288,6 @@ const LayerUI = ({
                          />
                        </Stack.Row>
                      </Island>
-                      {isCollaborating && (
-                        <Island
-                          style={{
-                            marginLeft: 8,
-                            alignSelf: "center",
-                            height: "fit-content",
-                          }}
-                        >
-                          <LaserPointerButton
-                            title={t("toolBar.laser")}
-                            checked={appState.activeTool.type === "laser"}
-                            onChange={() =>
-                              app.setActiveTool({ type: "laser" })
-                            }
-                            isMobile
-                          />
-                        </Island>
-                      )}
                    </Stack.Row>
                  </Stack.Col>
                </div>
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -87,7 +87,7 @@ export const MobileMenu = ({
                      appState={appState}
                      interactiveCanvas={interactiveCanvas}
                      activeTool={appState.activeTool}
-                      app={app}
+                      setAppState={setAppState}
                      onImageAction={({ pointerType }) => {
                        onImageAction({
                          insertOnCanvasDirectly: pointerType !== "mouse",
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -170,10 +170,5 @@
        height: var(--lg-icon-size);
      }
    }
-
-    .ToolIcon__LaserPointer .ToolIcon__icon {
-      width: var(--default-button-size);
-      height: var(--default-button-size);
-    }
  }
 }
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -28,12 +28,6 @@
      box-shadow: 0 0 0 1px
        var(--button-active-border, var(--color-primary-darkest)) inset;
    }
-
-    &--selected,
-    &--selected:hover {
-      background: var(--color-primary-light);
-      color: var(--color-primary);
-    }
  }

  .App-toolbar__extra-tools-dropdown {
--- a/src/components/canvases/InteractiveCanvas.tsx
+++ b/src/components/canvases/InteractiveCanvas.tsx
@@ -193,8 +193,6 @@ const getRelevantAppStateProps = (
  showHyperlinkPopup: appState.showHyperlinkPopup,
  collaborators: appState.collaborators, // Necessary for collab. sessions
  activeEmbeddable: appState.activeEmbeddable,
-  snapLines: appState.snapLines,
-  zenModeEnabled: appState.zenModeEnabled,
 });

 const areEqual = (
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -59,11 +59,6 @@
        height: 2.25rem;
      }

-      &--selected {
-        background: var(--color-primary-light);
-        --icon-fill-color: var(--color-primary-darker);
-      }
-
      &__text {
        text-overflow: ellipsis;
        overflow: hidden;
--- a/src/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItem.tsx
@@ -11,14 +11,12 @@ const DropdownMenuItem = ({
  children,
  shortcut,
  className,
-  selected,
  ...rest
 }: {
  icon?: JSX.Element;
  onSelect: (event: Event) => void;
  children: React.ReactNode;
  shortcut?: string;
-  selected?: boolean;
  className?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -28,7 +26,7 @@ const DropdownMenuItem = ({
      {...rest}
      onClick={handleClick}
      type="button"
-      className={getDropdownMenuItemClassName(className, selected)}
+      className={getDropdownMenuItemClassName(className)}
      title={rest.title ?? rest["aria-label"]}
    >
      <MenuItemContent icon={icon} shortcut={shortcut}>
--- a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
@@ -3,19 +3,15 @@ import React from "react";
 const DropdownMenuItemCustom = ({
  children,
  className = "",
-  selected,
  ...rest
 }: {
  children: React.ReactNode;
  className?: string;
-  selected?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      {...rest}
-      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className} ${
-        selected ? `dropdown-menu-item--selected` : ``
-      }`.trim()}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
    >
      {children}
    </div>
--- a/src/components/dropdownMenu/DropdownMenuItemLink.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemLink.tsx
@@ -12,7 +12,6 @@ const DropdownMenuItemLink = ({
  children,
  onSelect,
  className = "",
-  selected,
  ...rest
 }: {
  href: string;
@@ -20,7 +19,6 @@ const DropdownMenuItemLink = ({
  children: React.ReactNode;
  shortcut?: string;
  className?: string;
-  selected?: boolean;
  onSelect?: (event: Event) => void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -31,7 +29,7 @@ const DropdownMenuItemLink = ({
      href={href}
      target="_blank"
      rel="noreferrer"
-      className={getDropdownMenuItemClassName(className, selected)}
+      className={getDropdownMenuItemClassName(className)}
      title={rest.title ?? rest["aria-label"]}
      onClick={handleClick}
    >
--- a/src/components/dropdownMenu/common.ts
+++ b/src/components/dropdownMenu/common.ts
@@ -6,13 +6,8 @@ export const DropdownMenuContentPropsContext = React.createContext<{
  onSelect?: (event: Event) => void;
 }>({});

-export const getDropdownMenuItemClassName = (
-  className = "",
-  selected = false,
-) => {
-  return `dropdown-menu-item dropdown-menu-item-base ${className} ${
-    selected ? "dropdown-menu-item--selected" : ""
-  }`.trim();
+export const getDropdownMenuItemClassName = (className = "") => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
 };

 export const useHandleDropdownMenuItemClick = (
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -13,7 +13,7 @@ import clsx from "clsx";
 import { Theme } from "../element/types";
 import { THEME } from "../constants";

-export const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
+const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";

 const handlerColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.white : "#1e1e1e";
@@ -1653,22 +1653,3 @@ export const frameToolIcon = createIcon(
  </g>,
  tablerIconProps,
 );
-
-export const laserPointerToolIcon = createIcon(
-  <g
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.25"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    transform="rotate(90 10 10)"
-  >
-    <path
-      clipRule="evenodd"
-      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
-    />
-    <path d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13" />
-  </g>,
-
-  20,
-);
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -67,7 +67,6 @@ export const AllowedExcalidrawActiveTools: Record<
  frame: true,
  embeddable: true,
  hand: true,
-  laser: false,
 };

 export type RestoredDataState = {
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -158,7 +158,7 @@ export const getElementAbsoluteCoords = (
  ];
 };

-/*
+/**
 * for a given element, `getElementLineSegments` returns line segments
 * that can be used for visual collision detection (useful for frames)
 * as opposed to bounding box collision detection
@@ -674,19 +674,6 @@ export const getCommonBounds = (
  return [minX, minY, maxX, maxY];
 };

-export const getDraggedElementsBounds = (
-  elements: ExcalidrawElement[],
-  dragOffset: { x: number; y: number },
-) => {
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  return [
-    minX + dragOffset.x,
-    minY + dragOffset.y,
-    maxX + dragOffset.x,
-    maxY + dragOffset.y,
-  ];
-};
-
 export const getResizedElementAbsoluteCoords = (
  element: ExcalidrawElement,
  nextWidth: number,
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -6,22 +6,23 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
-import { getGridPoint } from "../math";
 import Scene from "../scene/Scene";
 import { isFrameElement } from "./typeChecks";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
  selectedElements: NonDeletedExcalidrawElement[],
-  offset: { x: number; y: number },
+  pointerX: number,
+  pointerY: number,
+  lockDirection: boolean = false,
+  distanceX: number = 0,
+  distanceY: number = 0,
  appState: AppState,
  scene: Scene,
-  snapOffset: {
-    x: number;
-    y: number;
-  },
-  gridSize: AppState["gridSize"],
 ) => {
+  const [x1, y1] = getCommonBounds(selectedElements);
+  const offset = { x: pointerX - x1, y: pointerY - y1 };
+
  // we do not want a frame and its elements to be selected at the same time
  // but when it happens (due to some bug), we want to avoid updating element
  // in the frame twice, hence the use of set
@@ -43,11 +44,12 @@ export const dragSelectedElements = (

  elementsToUpdate.forEach((element) => {
    updateElementCoords(
+      lockDirection,
+      distanceX,
+      distanceY,
      pointerDownState,
      element,
      offset,
-      snapOffset,
-      gridSize,
    );
    // update coords of bound text only if we're dragging the container directly
    // (we don't drag the group that it's part of)
@@ -67,11 +69,12 @@ export const dragSelectedElements = (
        (!textElement.frameId || !frames.includes(textElement.frameId))
      ) {
        updateElementCoords(
+          lockDirection,
+          distanceX,
+          distanceY,
          pointerDownState,
          textElement,
          offset,
-          snapOffset,
-          gridSize,
        );
      }
    }
@@ -82,40 +85,31 @@ export const dragSelectedElements = (
 };

 const updateElementCoords = (
+  lockDirection: boolean,
+  distanceX: number,
+  distanceY: number,
  pointerDownState: PointerDownState,
  element: NonDeletedExcalidrawElement,
-  dragOffset: { x: number; y: number },
-  snapOffset: { x: number; y: number },
-  gridSize: AppState["gridSize"],
+  offset: { x: number; y: number },
 ) => {
-  const originalElement =
-    pointerDownState.originalElements.get(element.id) ?? element;
-
-  let nextX = originalElement.x + dragOffset.x + snapOffset.x;
-  let nextY = originalElement.y + dragOffset.y + snapOffset.y;
-
-  if (snapOffset.x === 0 || snapOffset.y === 0) {
-    const [nextGridX, nextGridY] = getGridPoint(
-      originalElement.x + dragOffset.x,
-      originalElement.y + dragOffset.y,
-      gridSize,
-    );
-
-    if (snapOffset.x === 0) {
-      nextX = nextGridX;
-    }
-
-    if (snapOffset.y === 0) {
-      nextY = nextGridY;
-    }
+  let x: number;
+  let y: number;
+  if (lockDirection) {
+    const lockX = lockDirection && distanceX < distanceY;
+    const lockY = lockDirection && distanceX > distanceY;
+    const original = pointerDownState.originalElements.get(element.id);
+    x = lockX && original ? original.x : element.x + offset.x;
+    y = lockY && original ? original.y : element.y + offset.y;
+  } else {
+    x = element.x + offset.x;
+    y = element.y + offset.y;
  }

  mutateElement(element, {
-    x: nextX,
-    y: nextY,
+    x,
+    y,
  });
 };
-
 export const getDragOffsetXY = (
  selectedElements: NonDeletedExcalidrawElement[],
  x: number,
@@ -139,10 +133,6 @@ export const dragNewElement = (
  /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
      true */
  widthAspectRatio?: number | null,
-  originOffset: {
-    x: number;
-    y: number;
-  } | null = null,
 ) => {
  if (shouldMaintainAspectRatio && draggingElement.type !== "selection") {
    if (widthAspectRatio) {
@@ -183,8 +173,8 @@ export const dragNewElement = (

  if (width !== 0 && height !== 0) {
    mutateElement(draggingElement, {
-      x: newX + (originOffset?.x ?? 0),
-      y: newY + (originOffset?.y ?? 0),
+      x: newX,
+      y: newY,
      width,
      height,
    });
--- a/src/element/embeddable.ts
+++ b/src/element/embeddable.ts
@@ -17,6 +17,7 @@ type EmbeddedLink =
  | ({
      aspectRatio: { w: number; h: number };
      warning?: string;
+      sandbox?: { allowSameOrigin?: boolean };
    } & (
      | { type: "video" | "generic"; link: string }
      | { type: "document"; srcdoc: (theme: Theme) => string }
@@ -28,20 +29,20 @@ const embeddedLinkCache = new Map<string, EmbeddedLink>();
 const RE_YOUTUBE =
  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 const RE_VIMEO =
-  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;

 const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
 const RE_GH_GIST_EMBED =
-  /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
+  /https?:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)\.js["']/i;

 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
+const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com/;
 const RE_TWITTER_EMBED =
-  /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
+  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;

 const RE_VALTOWN =
-  /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+  /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;

 const RE_GENERIC_EMBED =
  /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
@@ -136,46 +137,27 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
  }

  if (RE_TWITTER.test(link)) {
-    let ret: EmbeddedLink;
-    // assume embed code
-    if (/<blockquote/.test(link)) {
-      const srcDoc = createSrcDoc(link);
-      ret = {
-        type: "document",
-        srcdoc: () => srcDoc,
-        aspectRatio: { w: 480, h: 480 },
-      };
-      // assume regular tweet url
-    } else {
-      ret = {
-        type: "document",
-        srcdoc: (theme: string) =>
-          createSrcDoc(
-            `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
-          ),
-        aspectRatio: { w: 480, h: 480 },
-      };
-    }
+    // the embed srcdoc still supports twitter.com domain only
+    link = link.replace(/\bx.com\b/, "twitter.com");
+
+    const ret: EmbeddedLink = {
+      type: "document",
+      srcdoc: (theme: string) =>
+        createSrcDoc(
+          `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
+        ),
+      aspectRatio: { w: 480, h: 480 },
+      sandbox: { allowSameOrigin: true },
+    };
    embeddedLinkCache.set(originalLink, ret);
    return ret;
  }

  if (RE_GH_GIST.test(link)) {
-    let ret: EmbeddedLink;
-    // assume embed code
-    if (/<script>/.test(link)) {
-      const srcDoc = createSrcDoc(link);
-      ret = {
-        type: "document",
-        srcdoc: () => srcDoc,
-        aspectRatio: { w: 550, h: 720 },
-      };
-      // assume regular url
-    } else {
-      ret = {
-        type: "document",
-        srcdoc: () =>
-          createSrcDoc(`
+    const ret: EmbeddedLink = {
+      type: "document",
+      srcdoc: () =>
+        createSrcDoc(`
          <script src="${link}.js"></script>
          <style type="text/css">
            * { margin: 0px; }
@@ -183,9 +165,8 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
            .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
          </style>
        `),
-        aspectRatio: { w: 550, h: 720 },
-      };
-    }
+      aspectRatio: { w: 550, h: 720 },
+    };
    embeddedLinkCache.set(link, ret);
    return ret;
  }
@@ -303,8 +284,8 @@ export const extractSrc = (htmlString: string): string => {
  }

  const gistMatch = htmlString.match(RE_GH_GIST_EMBED);
-  if (gistMatch && gistMatch.length === 2) {
-    return gistMatch[1];
+  if (gistMatch && gistMatch.length === 3) {
+    return `https://gist.github.com/${gistMatch[1]}/${gistMatch[2]}`;
  }

  const match = htmlString.match(RE_GENERIC_EMBED);
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -41,7 +41,7 @@ import {
  MaybeTransformHandleType,
  TransformHandleDirection,
 } from "./transformHandles";
-import { AppState, Point, PointerDownState } from "../types";
+import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
  getApproxMinLineWidth,
@@ -79,7 +79,6 @@ export const transformElements = (
  pointerY: number,
  centerX: number,
  centerY: number,
-  appState: AppState,
 ) => {
  if (selectedElements.length === 1) {
    const [element] = selectedElements;
@@ -467,8 +466,8 @@ export const resizeSingleElement = (
        boundTextElement.fontSize,
        boundTextElement.lineHeight,
      );
-      eleNewWidth = Math.max(eleNewWidth, minWidth);
-      eleNewHeight = Math.max(eleNewHeight, minHeight);
+      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
+      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
    }
  }

@@ -509,11 +508,8 @@ export const resizeSingleElement = (
    }
  }

-  const flipX = eleNewWidth < 0;
-  const flipY = eleNewHeight < 0;
-
  // Flip horizontally
-  if (flipX) {
+  if (eleNewWidth < 0) {
    if (transformHandleDirection.includes("e")) {
      newTopLeft[0] -= Math.abs(newBoundsWidth);
    }
@@ -521,9 +517,8 @@ export const resizeSingleElement = (
      newTopLeft[0] += Math.abs(newBoundsWidth);
    }
  }
-
  // Flip vertically
-  if (flipY) {
+  if (eleNewHeight < 0) {
    if (transformHandleDirection.includes("s")) {
      newTopLeft[1] -= Math.abs(newBoundsHeight);
    }
@@ -547,20 +542,10 @@ export const resizeSingleElement = (
  const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle);
  newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);

-  // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
-  // So we need to readjust (x,y) to be where the first point should be
-  const newOrigin = [...newTopLeft];
-  const linearElementXOffset = stateAtResizeStart.x - newBoundsX1;
-  const linearElementYOffset = stateAtResizeStart.y - newBoundsY1;
-  newOrigin[0] += linearElementXOffset;
-  newOrigin[1] += linearElementYOffset;
-
-  const nextX = newOrigin[0];
-  const nextY = newOrigin[1];
-
  // Readjust points for linear elements
  let rescaledElementPointsY;
  let rescaledPoints;
+
  if (isLinearElement(element) || isFreeDrawElement(element)) {
    rescaledElementPointsY = rescalePoints(
      1,
@@ -577,11 +562,16 @@ export const resizeSingleElement = (
    );
  }

+  // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
+  // So we need to readjust (x,y) to be where the first point should be
+  const newOrigin = [...newTopLeft];
+  newOrigin[0] += stateAtResizeStart.x - newBoundsX1;
+  newOrigin[1] += stateAtResizeStart.y - newBoundsY1;
  const resizedElement = {
    width: Math.abs(eleNewWidth),
    height: Math.abs(eleNewHeight),
-    x: nextX,
-    y: nextY,
+    x: newOrigin[0],
+    y: newOrigin[1],
    points: rescaledPoints,
  };

@@ -690,10 +680,6 @@ export const resizeMultipleElements = (
  const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(
    targetElements.map(({ orig }) => orig).concat(boundTextElements),
  );
-
-  // const originalHeight = maxY - minY;
-  // const originalWidth = maxX - minX;
-
  const direction = transformHandleType;

  const mapDirectionsToAnchors: Record<typeof direction, Point> = {
--- a/src/element/showSelectedShapeActions.ts
+++ b/src/element/showSelectedShapeActions.ts
@@ -12,7 +12,6 @@ export const showSelectedShapeActions = (
        (appState.editingElement ||
          (appState.activeTool.type !== "selection" &&
            appState.activeTool.type !== "eraser" &&
-            appState.activeTool.type !== "hand" &&
-            appState.activeTool.type !== "laser"))) ||
+            appState.activeTool.type !== "hand"))) ||
        getSelectedElements(elements, appState).length),
  );
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -957,7 +957,7 @@ describe("textWysiwyg", () => {
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          85,
-          4.999999999999986,
+          4.5,
        ]
      `);

@@ -1002,8 +1002,8 @@ describe("textWysiwyg", () => {
      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
-          374.99999999999994,
-          -535.0000000000001,
+          375,
+          -539,
        ]
      `);
    });
@@ -1190,7 +1190,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
-      expect(rectangle.height).toBeCloseTo(155, 8);
+      expect(rectangle.height).toBe(156);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);

      mouse.select(rectangle);
@@ -1200,12 +1200,9 @@ describe("textWysiwyg", () => {

      await new Promise((r) => setTimeout(r, 0));
      editor.blur();
-      expect(rectangle.height).toBeCloseTo(155, 8);
+      expect(rectangle.height).toBe(156);
      // cache updated again
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBeCloseTo(
-        155,
-        8,
-      );
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(156);
    });

    it("should reset the container height cache when font properties updated", async () => {
--- a/src/frame.test.tsx
+++ b/src/frame.test.tsx
@@ -177,7 +177,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect2, frame]);
      });

-      it.skip("should add elements", async () => {
+      it("should add elements", async () => {
        h.elements = [rect2, rect3, frame];

        func(frame, rect2);
@@ -188,7 +188,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect3, rect2, frame]);
      });

-      it.skip("should add elements when there are other other elements in between", async () => {
+      it("should add elements when there are other other elements in between", async () => {
        h.elements = [rect1, rect2, rect4, rect3, frame];

        func(frame, rect2);
@@ -199,7 +199,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect4, rect3, rect2, frame]);
      });

-      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, rect2, rect1, frame];

        func(frame, rect2);
@@ -234,7 +234,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect2, rect3, frame, rect4]);
      });

-      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, frame, rect2, rect1];

        func(frame, rect2);
--- a/src/frame.ts
+++ b/src/frame.ts
@@ -14,7 +14,7 @@ import {
  getBoundTextElement,
  getContainerElement,
 } from "./element/textElement";
-import { arrayToMap } from "./utils";
+import { arrayToMap, findIndex } from "./utils";
 import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
@@ -457,87 +457,85 @@ export const addElementsToFrame = (
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameElement,
 ) => {
-  const currTargetFrameChildrenMap = new Map(
-    allElements.reduce(
-      (acc: [ExcalidrawElement["id"], ExcalidrawElement][], element) => {
-        if (element.frameId === frame.id) {
-          acc.push([element.id, element]);
-        }
-        return acc;
-      },
-      [],
-    ),
-  );
+  const _elementsToAdd: ExcalidrawElement[] = [];

-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-
-  const finalElementsToAdd: ExcalidrawElement[] = [];
-
-  // - add bound text elements if not already in the array
-  // - filter out elements that are already in the frame
-  for (const element of omitGroupsContainingFrames(
-    allElements,
-    elementsToAdd,
-  )) {
-    if (!currTargetFrameChildrenMap.has(element.id)) {
-      finalElementsToAdd.push(element);
-    }
+  for (const element of elementsToAdd) {
+    _elementsToAdd.push(element);

    const boundTextElement = getBoundTextElement(element);
-    if (
-      boundTextElement &&
-      !suppliedElementsToAddSet.has(boundTextElement.id) &&
-      !currTargetFrameChildrenMap.has(boundTextElement.id)
-    ) {
-      finalElementsToAdd.push(boundTextElement);
+    if (boundTextElement) {
+      _elementsToAdd.push(boundTextElement);
    }
  }

-  const finalElementsToAddSet = new Set(finalElementsToAdd.map((el) => el.id));
+  const allElementsIndex = allElements.reduce(
+    (acc: Record<string, number>, element, index) => {
+      acc[element.id] = index;
+      return acc;
+    },
+    {},
+  );

-  const nextElements: ExcalidrawElement[] = [];
+  const frameIndex = allElementsIndex[frame.id];
+  // need to be calculated before the mutation below occurs
+  const leftFrameBoundaryIndex = findIndex(
+    allElements,
+    (e) => e.frameId === frame.id,
+  );

-  const processedElements = new Set<ExcalidrawElement["id"]>();
+  const existingFrameChildren = allElements.filter(
+    (element) => element.frameId === frame.id,
+  );

-  for (const element of allElements) {
-    if (processedElements.has(element.id)) {
-      continue;
+  const addedFrameChildren_left: ExcalidrawElement[] = [];
+  const addedFrameChildren_right: ExcalidrawElement[] = [];
+
+  for (const element of omitGroupsContainingFrames(
+    allElements,
+    _elementsToAdd,
+  )) {
+    if (element.frameId !== frame.id && !isFrameElement(element)) {
+      if (allElementsIndex[element.id] > frameIndex) {
+        addedFrameChildren_right.push(element);
+      } else {
+        addedFrameChildren_left.push(element);
+      }
+
+      mutateElement(
+        element,
+        {
+          frameId: frame.id,
+        },
+        false,
+      );
    }
-
-    processedElements.add(element.id);
-
-    if (
-      finalElementsToAddSet.has(element.id) ||
-      (element.frameId && element.frameId === frame.id)
-    ) {
-      // will be added in bulk once we process target frame
-      continue;
-    }
-
-    // target frame
-    if (element.id === frame.id) {
-      const currFrameChildren = getFrameElements(allElements, frame.id);
-      currFrameChildren.forEach((child) => {
-        processedElements.add(child.id);
-      });
-      // console.log(currFrameChildren, finalElementsToAdd, element);
-      nextElements.push(...currFrameChildren, ...finalElementsToAdd, element);
-      continue;
-    }
-
-    // console.log("(2)", element.frameId);
-    nextElements.push(element);
  }

-  for (const element of finalElementsToAdd) {
-    mutateElement(
-      element,
-      {
-        frameId: frame.id,
-      },
-      false,
-    );
-  }
+  const frameElement = allElements[frameIndex];
+  const nextFrameChildren = addedFrameChildren_left
+    .concat(existingFrameChildren)
+    .concat(addedFrameChildren_right);
+
+  const nextFrameChildrenMap = nextFrameChildren.reduce(
+    (acc: Record<string, boolean>, element) => {
+      acc[element.id] = true;
+      return acc;
+    },
+    {},
+  );
+
+  const nextOtherElements_left = allElements
+    .slice(0, leftFrameBoundaryIndex >= 0 ? leftFrameBoundaryIndex : frameIndex)
+    .filter((element) => !nextFrameChildrenMap[element.id]);
+
+  const nextOtherElement_right = allElements
+    .slice(frameIndex + 1)
+    .filter((element) => !nextFrameChildrenMap[element.id]);
+
+  const nextElements = nextOtherElements_left
+    .concat(nextFrameChildren)
+    .concat([frameElement])
+    .concat(nextOtherElement_right);

  return nextElements;
 };
--- a/src/keys.ts
+++ b/src/keys.ts
@@ -21,7 +21,6 @@ export const CODES = {
  V: "KeyV",
  Z: "KeyZ",
  R: "KeyR",
-  S: "KeyS",
 } as const;

 export const KEYS = {
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -164,7 +164,6 @@
    "darkMode": "Dark mode",
    "lightMode": "Light mode",
    "zenMode": "Zen mode",
-    "objectsSnapMode": "Snap to objects",
    "exitZenMode": "Exit zen mode",
    "cancel": "Cancel",
    "clear": "Clear",
@@ -236,7 +235,6 @@
    "eraser": "Eraser",
    "frame": "Frame tool",
    "embeddable": "Web Embed",
-    "laser": "Laser pointer",
    "hand": "Hand (panning tool)",
    "extraTools": "More tools"
  },
--- a/src/math.test.ts
+++ b/src/math.test.ts
@@ -1,4 +1,4 @@
-import { rangeIntersection, rangesOverlap, rotate } from "./math";
+import { rotate } from "./math";

 describe("rotate", () => {
  it("should rotate over (x2, y2) and return the rotated coordinates for (x1, y1)", () => {
@@ -13,43 +13,3 @@ describe("rotate", () => {
    expect(res2).toEqual([x1, x2]);
  });
 });
-
-describe("range overlap", () => {
-  it("should overlap when range a contains range b", () => {
-    expect(rangesOverlap([1, 4], [2, 3])).toBe(true);
-    expect(rangesOverlap([1, 4], [1, 4])).toBe(true);
-    expect(rangesOverlap([1, 4], [1, 3])).toBe(true);
-    expect(rangesOverlap([1, 4], [2, 4])).toBe(true);
-  });
-
-  it("should overlap when range b contains range a", () => {
-    expect(rangesOverlap([2, 3], [1, 4])).toBe(true);
-    expect(rangesOverlap([1, 3], [1, 4])).toBe(true);
-    expect(rangesOverlap([2, 4], [1, 4])).toBe(true);
-  });
-
-  it("should overlap when range a and b intersect", () => {
-    expect(rangesOverlap([1, 4], [2, 5])).toBe(true);
-  });
-});
-
-describe("range intersection", () => {
-  it("should intersect completely with itself", () => {
-    expect(rangeIntersection([1, 4], [1, 4])).toEqual([1, 4]);
-  });
-
-  it("should intersect irrespective of order", () => {
-    expect(rangeIntersection([1, 4], [2, 3])).toEqual([2, 3]);
-    expect(rangeIntersection([2, 3], [1, 4])).toEqual([2, 3]);
-    expect(rangeIntersection([1, 4], [3, 5])).toEqual([3, 4]);
-    expect(rangeIntersection([3, 5], [1, 4])).toEqual([3, 4]);
-  });
-
-  it("should intersect at the edge", () => {
-    expect(rangeIntersection([1, 4], [4, 5])).toEqual([4, 4]);
-  });
-
-  it("should not intersect", () => {
-    expect(rangeIntersection([1, 4], [5, 7])).toEqual(null);
-  });
-});
--- a/src/math.ts
+++ b/src/math.ts
@@ -472,36 +472,3 @@ export const isRightAngle = (angle: number) => {
  // angle, which we can check with modulo after rounding.
  return Math.round((angle / Math.PI) * 10000) % 5000 === 0;
 };
-
-// Given two ranges, return if the two ranges overlap with each other
-// e.g. [1, 3] overlaps with [2, 4] while [1, 3] does not overlap with [4, 5]
-export const rangesOverlap = (
-  [a0, a1]: [number, number],
-  [b0, b1]: [number, number],
-) => {
-  if (a0 <= b0) {
-    return a1 >= b0;
-  }
-
-  if (a0 >= b0) {
-    return b1 >= a0;
-  }
-
-  return false;
-};
-
-// Given two ranges,return ther intersection of the two ranges if any
-// e.g. the intersection of [1, 3] and [2, 4] is [2, 3]
-export const rangeIntersection = (
-  rangeA: [number, number],
-  rangeB: [number, number],
-): [number, number] | null => {
-  const rangeStart = Math.max(rangeA[0], rangeB[0]);
-  const rangeEnd = Math.min(rangeA[1], rangeB[1]);
-
-  if (rangeStart <= rangeEnd) {
-    return [rangeStart, rangeEnd];
-  }
-
-  return null;
-};
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -11,28 +11,6 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->

-## Unreleased
-
-### Features
-
- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078)
-
-## 0.16.1 (2023-09-21)
-
-## Excalidraw Library
-
-**_This section lists the updates made to the excalidraw library and will not affect the integration._**
-
-### Fixes
-
- More eye-droper fixes [#7019](https://github.com/excalidraw/excalidraw/pull/7019)
-
-### Refactor
-
- Move excalidraw-app outside src [#6987](https://github.com/excalidraw/excalidraw/pull/6987)
-
---
-
 ## 0.16.0 (2023-09-19)

 - Support creating containers, linear elements, text containers, labelled arrows and arrow bindings programatically [#6546](https://github.com/excalidraw/excalidraw/pull/6546)
--- a/src/packages/excalidraw/package.json
+++ b/src/packages/excalidraw/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@excalidraw/excalidraw",
-  "version": "0.16.1",
+  "version": "0.16.2",
  "main": "main.js",
  "types": "types/packages/excalidraw/index.d.ts",
  "files": [
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -22,12 +22,5 @@ const polyfill = () => {
      configurable: true,
    });
  }
-
-  if (!Element.prototype.replaceChildren) {
-    Element.prototype.replaceChildren = function (...nodes) {
-      this.innerHTML = "";
-      this.append(...nodes);
-    };
-  }
 };
 export default polyfill;
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -67,7 +67,6 @@ import {
  EXTERNAL_LINK_IMG,
  getLinkHandleFromCoords,
 } from "../element/Hyperlink";
-import { renderSnaps } from "./renderSnaps";
 import {
  isEmbeddableElement,
  isFrameElement,
@@ -721,8 +720,6 @@ const _renderInteractiveScene = ({
    context.restore();
  }

-  renderSnaps(context, appState);
-
  // Reset zoom
  context.restore();

--- a/src/renderer/renderSnaps.ts
+++ b/src/renderer/renderSnaps.ts
@@ -1,189 +0,0 @@
-import { PointSnapLine, PointerSnapLine } from "../snapping";
-import { InteractiveCanvasAppState, Point } from "../types";
-
-const SNAP_COLOR_LIGHT = "#ff6b6b";
-const SNAP_COLOR_DARK = "#ff0000";
-const SNAP_WIDTH = 1;
-const SNAP_CROSS_SIZE = 2;
-
-export const renderSnaps = (
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-) => {
-  if (!appState.snapLines.length) {
-    return;
-  }
-
-  // in dark mode, we need to adjust the color to account for color inversion.
-  // Don't change if zen mode, because we draw only crosses, we want the
-  // colors to be more visible
-  const snapColor =
-    appState.theme === "light" || appState.zenModeEnabled
-      ? SNAP_COLOR_LIGHT
-      : SNAP_COLOR_DARK;
-  // in zen mode make the cross more visible since we don't draw the lines
-  const snapWidth =
-    (appState.zenModeEnabled ? SNAP_WIDTH * 1.5 : SNAP_WIDTH) /
-    appState.zoom.value;
-
-  context.save();
-  context.translate(appState.scrollX, appState.scrollY);
-
-  for (const snapLine of appState.snapLines) {
-    if (snapLine.type === "pointer") {
-      context.lineWidth = snapWidth;
-      context.strokeStyle = snapColor;
-
-      drawPointerSnapLine(snapLine, context, appState);
-    } else if (snapLine.type === "gap") {
-      context.lineWidth = snapWidth;
-      context.strokeStyle = snapColor;
-
-      drawGapLine(
-        snapLine.points[0],
-        snapLine.points[1],
-        snapLine.direction,
-        appState,
-        context,
-      );
-    } else if (snapLine.type === "points") {
-      context.lineWidth = snapWidth;
-      context.strokeStyle = snapColor;
-      drawPointsSnapLine(snapLine, context, appState);
-    }
-  }
-
-  context.restore();
-};
-
-const drawPointsSnapLine = (
-  pointSnapLine: PointSnapLine,
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-) => {
-  if (!appState.zenModeEnabled) {
-    const firstPoint = pointSnapLine.points[0];
-    const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1];
-
-    drawLine(firstPoint, lastPoint, context);
-  }
-
-  for (const point of pointSnapLine.points) {
-    drawCross(point, appState, context);
-  }
-};
-
-const drawPointerSnapLine = (
-  pointerSnapLine: PointerSnapLine,
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-) => {
-  drawCross(pointerSnapLine.points[0], appState, context);
-  if (!appState.zenModeEnabled) {
-    drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context);
-  }
-};
-
-const drawCross = (
-  [x, y]: Point,
-  appState: InteractiveCanvasAppState,
-  context: CanvasRenderingContext2D,
-) => {
-  context.save();
-  const size =
-    (appState.zenModeEnabled ? SNAP_CROSS_SIZE * 1.5 : SNAP_CROSS_SIZE) /
-    appState.zoom.value;
-  context.beginPath();
-
-  context.moveTo(x - size, y - size);
-  context.lineTo(x + size, y + size);
-
-  context.moveTo(x + size, y - size);
-  context.lineTo(x - size, y + size);
-
-  context.stroke();
-  context.restore();
-};
-
-const drawLine = (
-  from: Point,
-  to: Point,
-  context: CanvasRenderingContext2D,
-) => {
-  context.beginPath();
-  context.lineTo(...from);
-  context.lineTo(...to);
-  context.stroke();
-};
-
-const drawGapLine = (
-  from: Point,
-  to: Point,
-  direction: "horizontal" | "vertical",
-  appState: InteractiveCanvasAppState,
-  context: CanvasRenderingContext2D,
-) => {
-  // a horizontal gap snap line
-  // |–––––––||–––––––|
-  // ^    ^   ^       ^
-  // \    \   \       \
-  // (1)  (2) (3)     (4)
-
-  const FULL = 8 / appState.zoom.value;
-  const HALF = FULL / 2;
-  const QUARTER = FULL / 4;
-
-  if (direction === "horizontal") {
-    const halfPoint = [(from[0] + to[0]) / 2, from[1]];
-    // (1)
-    if (!appState.zenModeEnabled) {
-      drawLine([from[0], from[1] - FULL], [from[0], from[1] + FULL], context);
-    }
-
-    // (3)
-    drawLine(
-      [halfPoint[0] - QUARTER, halfPoint[1] - HALF],
-      [halfPoint[0] - QUARTER, halfPoint[1] + HALF],
-      context,
-    );
-    drawLine(
-      [halfPoint[0] + QUARTER, halfPoint[1] - HALF],
-      [halfPoint[0] + QUARTER, halfPoint[1] + HALF],
-      context,
-    );
-
-    if (!appState.zenModeEnabled) {
-      // (4)
-      drawLine([to[0], to[1] - FULL], [to[0], to[1] + FULL], context);
-
-      // (2)
-      drawLine(from, to, context);
-    }
-  } else {
-    const halfPoint = [from[0], (from[1] + to[1]) / 2];
-    // (1)
-    if (!appState.zenModeEnabled) {
-      drawLine([from[0] - FULL, from[1]], [from[0] + FULL, from[1]], context);
-    }
-
-    // (3)
-    drawLine(
-      [halfPoint[0] - HALF, halfPoint[1] - QUARTER],
-      [halfPoint[0] + HALF, halfPoint[1] - QUARTER],
-      context,
-    );
-    drawLine(
-      [halfPoint[0] - HALF, halfPoint[1] + QUARTER],
-      [halfPoint[0] + HALF, halfPoint[1] + QUARTER],
-      context,
-    );
-
-    if (!appState.zenModeEnabled) {
-      // (4)
-      drawLine([to[0] - FULL, to[1]], [to[0] + FULL, to[1]], context);
-
-      // (2)
-      drawLine(from, to, context);
-    }
-  }
-};
--- a/src/scene/selection.ts
+++ b/src/scene/selection.ts
@@ -11,7 +11,6 @@ import {
  getFrameElements,
 } from "../frame";
 import { isShallowEqual } from "../utils";
-import { isElementInViewport } from "../element/sizeHelpers";

 /**
 * Frames and their containing elements are not to be selected at the same time.
@@ -90,26 +89,6 @@ export const getElementsWithinSelection = (
  return elementsInSelection;
 };

-export const getVisibleAndNonSelectedElements = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  selectedElements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedElementsSet = new Set(
-    selectedElements.map((element) => element.id),
-  );
-  return elements.filter((element) => {
-    const isVisible = isElementInViewport(
-      element,
-      appState.width,
-      appState.height,
-      appState,
-    );
-
-    return !selectedElementsSet.has(element.id) && isVisible;
-  });
-};
-
 // FIXME move this into the editor instance to keep utility methods stateless
 export const isSomeElementSelected = (function () {
  let lastElements: readonly NonDeletedExcalidrawElement[] | null = null;
--- a/src/snapping.ts
+++ b/src/snapping.ts
--- a/src/tests/snapshots/contextmenu.test.tsx.snap
+++ b/src/tests/snapshots/contextmenu.test.tsx.snap
@@ -331,17 +331,12 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": {
-    "x": 0,
-    "y": 0,
-  },
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -368,7 +363,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -530,14 +524,12 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -561,7 +553,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -675,7 +666,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e

 exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of elements 1`] = `1`;

-exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `6`;
+exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `7`;

 exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] appState 1`] = `
 {
@@ -732,14 +723,12 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -763,7 +752,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1051,7 +1039,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings

 exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `12`;
+exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `13`;

 exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] appState 1`] = `
 {
@@ -1108,14 +1096,12 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -1139,7 +1125,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1427,7 +1412,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings

 exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `12`;
+exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `13`;

 exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] appState 1`] = `
 {
@@ -1484,14 +1469,12 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -1515,7 +1498,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1629,7 +1611,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st

 exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of elements 1`] = `1`;

-exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `6`;
+exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `7`;

 exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] appState 1`] = `
 {
@@ -1686,14 +1668,12 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -1715,7 +1695,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1868,7 +1847,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen

 exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of elements 1`] = `1`;

-exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `7`;
+exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `8`;

 exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] appState 1`] = `
 {
@@ -1925,14 +1904,12 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -1956,7 +1933,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -2172,7 +2148,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates

 exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `7`;
+exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `8`;

 exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] appState 1`] = `
 {
@@ -2229,14 +2205,12 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -2265,7 +2239,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -2564,7 +2537,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group

 exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `12`;
+exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `13`;

 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] appState 1`] = `
 {
@@ -2621,14 +2594,12 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -2652,7 +2623,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -3446,7 +3416,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s

 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `19`;
+exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `20`;

 exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] appState 1`] = `
 {
@@ -3503,14 +3473,12 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -3534,7 +3502,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -3822,7 +3789,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e

 exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `11`;
+exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `12`;

 exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] appState 1`] = `
 {
@@ -3879,14 +3846,12 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -3910,7 +3875,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -4198,7 +4162,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el

 exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `11`;
+exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `12`;

 exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] appState 1`] = `
 {
@@ -4255,14 +4219,12 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -4289,7 +4251,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -4657,7 +4618,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung

 exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `13`;
+exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `14`;

 exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] appState 1`] = `
 {
@@ -4990,14 +4951,12 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -5024,7 +4983,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -5240,7 +5198,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi

 exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `12`;
+exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `13`;

 exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] appState 1`] = `
 {
@@ -5573,14 +5531,12 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -5609,7 +5565,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -5908,7 +5863,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro

 exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of elements 1`] = `2`;

-exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `13`;
+exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `14`;

 exports[`contextMenu element > shows context menu for canvas > [end of test] appState 1`] = `
 {
@@ -5995,19 +5950,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
        },
        "viewMode": true,
      },
-      {
-        "checked": [Function],
-        "contextItemLabel": "buttons.objectsSnapMode",
-        "keyTest": [Function],
-        "name": "objectsSnapMode",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "canvas",
-          "predicate": [Function],
-        },
-        "viewMode": true,
-      },
      {
        "checked": [Function],
        "contextItemLabel": "buttons.zenMode",
@@ -6093,17 +6035,12 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": {
-    "x": 0,
-    "y": 0,
-  },
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -6125,7 +6062,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -6495,14 +6431,12 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": null,
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -6526,7 +6460,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -6872,17 +6805,12 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "Untitled-201933152653",
-  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": {
-    "x": 0,
-    "y": 0,
-  },
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -6906,7 +6834,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -7104,6 +7031,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] nu

 exports[`contextMenu element > shows context menu for element > [end of test] number of elements 2`] = `2`;

-exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `6`;
+exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `7`;

 exports[`contextMenu element > shows context menu for element > [end of test] number of renders 2`] = `6`;
--- a/src/tests/snapshots/regressionTests.test.tsx.snap
+++ b/src/tests/snapshots/regressionTests.test.tsx.snap
--- a/src/tests/contextmenu.test.tsx
+++ b/src/tests/contextmenu.test.tsx
@@ -87,7 +87,6 @@ describe("contextMenu element", () => {
      "gridMode",
      "zenMode",
      "viewMode",
-      "objectsSnapMode",
      "stats",
    ];

--- a/src/tests/dragCreate.test.tsx
+++ b/src/tests/dragCreate.test.tsx
@@ -47,7 +47,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();

      expect(h.elements.length).toEqual(1);
@@ -79,7 +79,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);

      expect(h.state.selectionElement).toBeNull();

@@ -112,7 +112,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();

      expect(h.elements.length).toEqual(1);
@@ -144,7 +144,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();

      expect(h.elements.length).toEqual(1);
@@ -180,7 +180,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();

      expect(h.elements.length).toEqual(1);
@@ -221,7 +221,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-      expect(renderStaticScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
@@ -241,7 +241,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-      expect(renderStaticScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
@@ -261,7 +261,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-      expect(renderStaticScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
@@ -288,7 +288,7 @@ describe("Test dragCreate", () => {
      });

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
@@ -315,7 +315,7 @@ describe("Test dragCreate", () => {
      });

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
--- a/src/tests/linearElementEditor.test.tsx
+++ b/src/tests/linearElementEditor.test.tsx
@@ -1048,14 +1048,14 @@ describe("Test Linear Elements", () => {
        .toMatchInlineSnapshot(`
          {
            "height": 130,
-            "width": 366.11716195150507,
+            "width": 367,
          }
        `);

      expect(getBoundTextElementPosition(container, textElement))
        .toMatchInlineSnapshot(`
          {
-            "x": 271.11716195150507,
+            "x": 272,
            "y": 45,
          }
        `);
@@ -1069,9 +1069,9 @@ describe("Test Linear Elements", () => {
          [
            20,
            35,
-            501.11716195150507,
+            502,
            95,
-            205.4589377083102,
+            205.9061448421403,
            52.5,
          ]
        `);
--- a/src/tests/move.test.tsx
+++ b/src/tests/move.test.tsx
@@ -43,7 +43,7 @@ describe("move element", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(1);
      expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -84,8 +84,8 @@ describe("move element", () => {
    // select the second rectangles
    new Pointer("mouse").clickOn(rectB);

-    expect(renderInteractiveScene).toHaveBeenCalledTimes(24);
-    expect(renderStaticScene).toHaveBeenCalledTimes(19);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(21);
+    expect(renderStaticScene).toHaveBeenCalledTimes(20);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(3);
    expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
@@ -131,7 +131,7 @@ describe("duplicate element on move when ALT is clicked", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(1);
      expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
--- a/src/tests/multiPointCreate.test.tsx
+++ b/src/tests/multiPointCreate.test.tsx
@@ -48,7 +48,7 @@ describe("remove shape in non linear elements", () => {
    fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });

    expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-    expect(renderStaticScene).toHaveBeenCalledTimes(5);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.elements.length).toEqual(0);
  });

@@ -63,7 +63,7 @@ describe("remove shape in non linear elements", () => {
    fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });

    expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-    expect(renderStaticScene).toHaveBeenCalledTimes(5);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.elements.length).toEqual(0);
  });

@@ -78,7 +78,7 @@ describe("remove shape in non linear elements", () => {
    fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });

    expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
-    expect(renderStaticScene).toHaveBeenCalledTimes(5);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.elements.length).toEqual(0);
  });
 });
@@ -110,8 +110,8 @@ describe("multi point mode in linear elements", () => {
      key: KEYS.ENTER,
    });

-    expect(renderInteractiveScene).toHaveBeenCalledTimes(11);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(10);
    expect(h.elements.length).toEqual(1);

    const element = h.elements[0] as ExcalidrawLinearElement;
@@ -153,8 +153,9 @@ describe("multi point mode in linear elements", () => {
    fireEvent.keyDown(document, {
      key: KEYS.ENTER,
    });
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(11);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(10);
    expect(h.elements.length).toEqual(1);

    const element = h.elements[0] as ExcalidrawLinearElement;
--- a/src/tests/packages/snapshots/utils.test.ts.snap
+++ b/src/tests/packages/snapshots/utils.test.ts.snap
@@ -55,15 +55,10 @@ exports[`exportToSvg > with default arguments 1`] = `
  "lastPointerDownWith": "mouse",
  "multiElement": null,
  "name": "name",
-  "objectsSnapModeEnabled": false,
  "openDialog": null,
  "openMenu": null,
  "openPopup": null,
  "openSidebar": null,
-  "originSnapOffset": {
-    "x": 0,
-    "y": 0,
-  },
  "pasteDialog": {
    "data": null,
    "shown": false,
@@ -85,7 +80,6 @@ exports[`exportToSvg > with default arguments 1`] = `
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": false,
-  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
--- a/src/tests/selection.test.tsx
+++ b/src/tests/selection.test.tsx
@@ -310,7 +310,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -342,7 +342,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -374,7 +374,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -419,7 +419,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -463,7 +463,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
--- a/src/types.ts
+++ b/src/types.ts
@@ -18,6 +18,7 @@ import {
  ExcalidrawFrameElement,
  ExcalidrawEmbeddableElement,
 } from "./element/types";
+import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
@@ -33,13 +34,15 @@ import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import { ContextMenuItems } from "./components/ContextMenu";
-import { SnapLine } from "./snapping";
 import { Merge, ForwardRef, ValueOf } from "./utility-types";

 export type Point = Readonly<RoughPoint>;

 export type Collaborator = {
-  pointer?: CollaboratorPointer;
+  pointer?: {
+    x: number;
+    y: number;
+  };
  button?: "up" | "down";
  selectedElementIds?: AppState["selectedElementIds"];
  username?: string | null;
@@ -55,12 +58,6 @@ export type Collaborator = {
  id?: string;
 };

-export type CollaboratorPointer = {
-  x: number;
-  y: number;
-  tool: "pointer" | "laser";
-};
-
 export type DataURL = string & { _brand: "DataURL" };

 export type BinaryFileData = {
@@ -88,31 +85,21 @@ export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;

 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;

-export type ToolType =
-  | "selection"
-  | "rectangle"
-  | "diamond"
-  | "ellipse"
-  | "arrow"
-  | "line"
-  | "freedraw"
-  | "text"
-  | "image"
-  | "eraser"
-  | "hand"
-  | "frame"
-  | "embeddable"
-  | "laser";
-
-export type ActiveTool =
+export type LastActiveTool =
  | {
-      type: ToolType;
+      type:
+        | typeof SHAPES[number]["value"]
+        | "eraser"
+        | "hand"
+        | "frame"
+        | "embeddable";
      customType: null;
    }
  | {
      type: "custom";
      customType: string;
-    };
+    }
+  | null;

 export type SidebarName = string;
 export type SidebarTabName = string;
@@ -163,9 +150,6 @@ export type InteractiveCanvasAppState = Readonly<
    showHyperlinkPopup: AppState["showHyperlinkPopup"];
    // Collaborators
    collaborators: AppState["collaborators"];
-    // SnapLines
-    snapLines: AppState["snapLines"];
-    zenModeEnabled: AppState["zenModeEnabled"];
  }
 >;

@@ -207,9 +191,23 @@ export type AppState = {
     * indicates a previous tool we should revert back to if we deselect the
     * currently active tool. At the moment applies to `eraser` and `hand` tool.
     */
-    lastActiveTool: ActiveTool | null;
+    lastActiveTool: LastActiveTool;
    locked: boolean;
-  } & ActiveTool;
+  } & (
+    | {
+        type:
+          | typeof SHAPES[number]["value"]
+          | "eraser"
+          | "hand"
+          | "frame"
+          | "embeddable";
+        customType: null;
+      }
+    | {
+        type: "custom";
+        customType: string;
+      }
+  );
  penMode: boolean;
  penDetected: boolean;
  exportBackground: boolean;
@@ -289,13 +287,6 @@ export type AppState = {
  pendingImageElementId: ExcalidrawImageElement["id"] | null;
  showHyperlinkPopup: false | "info" | "editor";
  selectedLinearElement: LinearElementEditor | null;
-
-  snapLines: readonly SnapLine[];
-  originSnapOffset: {
-    x: number;
-    y: number;
-  } | null;
-  objectsSnapModeEnabled: boolean;
 };

 export type UIAppState = Omit<
@@ -393,7 +384,7 @@ export interface ExcalidrawProps {
  excalidrawRef?: ForwardRef<ExcalidrawAPIRefValue>;
  isCollaborating?: boolean;
  onPointerUpdate?: (payload: {
-    pointer: { x: number; y: number; tool: "pointer" | "laser" };
+    pointer: { x: number; y: number };
    button: "down" | "up";
    pointersMap: Gesture["pointers"];
  }) => void;
@@ -409,7 +400,6 @@ export interface ExcalidrawProps {
  viewModeEnabled?: boolean;
  zenModeEnabled?: boolean;
  gridModeEnabled?: boolean;
-  objectsSnapModeEnabled?: boolean;
  libraryReturnUrl?: string;
  theme?: Theme;
  name?: string;
@@ -537,8 +527,6 @@ export type AppClassProperties = {
  onInsertElements: App["onInsertElements"];
  onExportImage: App["onExportImage"];
  lastViewportPosition: App["lastViewportPosition"];
-  togglePenMode: App["togglePenMode"];
-  setActiveTool: App["setActiveTool"];
 };

 export type PointerDownState = Readonly<{
@@ -665,10 +653,3 @@ export type FrameNameBoundsCache = {
    }
  >;
 };
-
-export type KeyboardModifiersObject = {
-  ctrlKey: boolean;
-  shiftKey: boolean;
-  altKey: boolean;
-  metaKey: boolean;
-};
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -15,8 +15,9 @@ import {
  FontString,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { ActiveTool, AppState, DataURL, ToolType, Zoom } from "./types";
+import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
+import { SHAPES } from "./shapes";
 import { isEraserActive, isHandToolActive } from "./appState";
 import { ResolutionType } from "./utility-types";
 import React from "react";
@@ -370,10 +371,15 @@ export const updateActiveTool = (
  appState: Pick<AppState, "activeTool">,
  data: (
    | {
-        type: ToolType;
+        type:
+          | typeof SHAPES[number]["value"]
+          | "eraser"
+          | "hand"
+          | "frame"
+          | "embeddable";
      }
    | { type: "custom"; customType: string }
-  ) & { lastActiveToolBeforeEraser?: ActiveTool | null },
+  ) & { lastActiveToolBeforeEraser?: LastActiveTool },
 ): AppState["activeTool"] => {
  if (data.type === "custom") {
    return {
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -111,7 +111,7 @@ export default defineConfig({
          {
            src: "apple-touch-icon.png",
            type: "image/png",
-            sizes: "180x180",
+            sizes: "256x256",
          },
        ],
        start_url: "/",
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,11 +1522,6 @@
  resolved "https://registry.yarnpkg.com/@excalidraw/eslint-config/-/eslint-config-1.0.3.tgz#2122ef7413ae77874ae9848ce0f1c6b3f0d8bbbd"
  integrity sha512-GemHNF5Z6ga0BWBSX7GJaNBUchLu6RwTcAB84eX1MeckRNhNasAsPCdelDlFalz27iS4RuYEQh0bPE8SRxJgbQ==

-"@excalidraw/laser-pointer@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/laser-pointer/-/laser-pointer-1.2.0.tgz#cd34ea7d24b11743c726488cc1fcb28c161cacba"
-  integrity sha512-WjFFwLk9ahmKRKku7U0jqYpeM3fe9ZS1K43pfwPREHk4/FYU3iKDKVeS8m4tEAASnRlBt3hhLCBQLBF2uvgOnw==
-
 "@excalidraw/prettier-config@1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"
Author	SHA1	Message	Date
David Luzar	3ae8af5a13	v0.16.2	2024-04-12 20:15:53 +02:00
David Luzar	053ca9058a	fix: Gist embed allowing unsafe html (#7883 )	2024-04-12 15:14:18 +02:00