change css back to original

lint
add svgContainer offset
2023-10-07 10:38:46 +02:00 · 2023-10-07 10:37:37 +02:00 · 2023-10-07 10:35:06 +02:00 · 2023-10-07 08:49:32 +02:00 · 2023-10-06 12:00:35 +02:00 · 2023-10-05 17:05:16 +02:00
94 changed files with 3292 additions and 4622 deletions
@@ -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/src/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/excalidraw-app) is part of this repository as well, and the app features:

 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
@@ -38,6 +38,7 @@ 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 |
@@ -70,6 +71,7 @@ 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 |
@@ -1,6 +1,6 @@
 # Customizing Styles

-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.
+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.

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

@@ -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 worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
+The following workflow 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";
@@ -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. To do this, run:
+> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork, run:
 >
 > ```bash
 > git remote add upstream https://github.com/excalidraw/excalidraw.git
@@ -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 by don't know where to
+        Want to build your own app powered by Excalidraw but don't know where to
        start?
      </>
    ),
@@ -107,7 +107,7 @@ export type SocketUpdateDataSource = {
    type: "MOUSE_LOCATION";
    payload: {
      socketId: string;
-      pointer: { x: number; y: number };
+      pointer: { x: number; y: number; tool: "pointer" | "laser" };
      button: "down" | "up";
      selectedElementIds: AppState["selectedElementIds"];
      username: string;
@@ -5,7 +5,6 @@ import { trackEvent } from "../src/analytics";
 import { getDefaultAppState } from "../src/appState";
 import { ErrorDialog } from "../src/components/ErrorDialog";
 import { TopErrorBoundary } from "../src/components/TopErrorBoundary";
-import { useMathSubtype } from "../src/element/subtypes/mathjax";
 import {
  APP_NAME,
  EVENT,
@@ -304,8 +303,6 @@ const ExcalidrawWrapper = () => {
  const [excalidrawAPI, excalidrawRefCallback] =
    useCallbackRefState<ExcalidrawImperativeAPI>();

-  useMathSubtype(excalidrawAPI);
-
  const [collabAPI] = useAtom(collabAPIAtom);
  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
  const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
@@ -20,6 +20,7 @@
  },
  "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",
@@ -31,7 +32,6 @@
    "browser-fs-access": "0.29.1",
    "canvas-roundrect-polyfill": "0.0.1",
    "clsx": "1.1.1",
-    "copyfiles": "2.4.1",
    "cross-env": "7.0.3",
    "eslint-plugin-react": "7.32.2",
    "fake-indexeddb": "3.1.7",
@@ -41,22 +41,18 @@
    "image-blob-reduce": "3.0.1",
    "jotai": "1.13.1",
    "lodash.throttle": "4.1.1",
-    "mathjax-full": "https://github.com/MathJax/MathJax-src#develop",
    "nanoid": "3.3.3",
    "open-color": "1.9.1",
    "pako": "1.0.11",
-    "patch-package": "8.0.0",
    "perfect-freehand": "1.2.0",
    "pica": "7.1.1",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
    "points-on-curve": "0.2.0",
-    "postinstall-postinstall": "2.1.0",
    "pwacompat": "2.0.17",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "replace-in-file": "7.0.1",
    "roughjs": "4.5.2",
    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
@@ -116,7 +112,6 @@
    "fix": "yarn fix:other && yarn fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "postinstall": "patch-package && yarn --cwd node_modules/mathjax-full compile-mjs && node scripts/beta-mathjax-import-paths.js",
    "prepare": "husky install",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "vite",
@@ -1,126 +0,0 @@
-diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
-index 3b228bb9..c8bcdea5 100644
--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
-+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
-@@ -1,4 +1,4 @@
-MathJax = Object.assign(global.MathJax || {}, require("./MathJax.js").MathJax);
-+window.MathJax = Object.assign(window.MathJax || {}, require("./MathJax.js").MathJax);
- 
- //
- //  Load component-based configuration, if any
-@@ -13,10 +13,13 @@ MathJax.Ajax.Preloading(
-   "[MathJax]/jax/element/mml/jax.js"
- );
- 
-require("./jax/element/mml/jax.js");
-require("./jax/input/AsciiMath/config.js");
-require("./jax/input/AsciiMath/jax.js");
-+module.exports.AsciiMath = void 0;
-+(async () => {
-+  await import("./jax/element/mml/jax.js");
-+  await import("./jax/input/AsciiMath/config.js");
-+  await import("./jax/input/AsciiMath/jax.js");
- 
-require("./jax/element/MmlNode.js");
-+  await import("./jax/element/MmlNode.js");
- 
-module.exports.AsciiMath = MathJax.InputJax.AsciiMath;
-+  module.exports.AsciiMath = MathJax.InputJax.AsciiMath;
-+})();
-diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
-index 853b0a0e..1e009028 100644
--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
-+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
-@@ -19,7 +19,7 @@ exports.MathJax = MathJax;
-     return obj;
-   };
-   var CONSTRUCTOR = function () {
-    return function () {return arguments.callee.Init.call(this,arguments)};
-+    return function fn() {return fn.Init.call(this,Object.assign(arguments,{call:fn}))};
-   };
- 
-   BASE.Object = OBJECT({
-@@ -40,7 +40,7 @@ exports.MathJax = MathJax;
-     Init: function (args) {
-       var obj = this;
-       if (args.length === 1 && args[0] === PROTO) {return obj}
-      if (!(obj instanceof args.callee)) {obj = new args.callee(PROTO)}
-+      if (!(obj instanceof args.call)) {obj = new args.call(PROTO)}
-       return obj.Init.apply(obj,args) || obj;
-     },
-     
-@@ -65,7 +65,7 @@ exports.MathJax = MathJax;
-   
-     prototype: {
-       Init: function () {},
-      SUPER: function (fn) {return fn.callee.SUPER},
-+      SUPER: function (fn) {return fn.SUPER},
-       can: function (method) {return typeof(this[method]) === "function"},
-       has: function (property) {return typeof(this[property]) !== "undefined"},
-       isa: function (obj) {return (obj instanceof Object) && (this instanceof obj)}
-@@ -177,7 +177,7 @@ exports.MathJax = MathJax;
-   //  Create a callback from an associative array
-   //
-   var CALLBACK = function (data) {
-    var cb = function () {return arguments.callee.execute.apply(arguments.callee,arguments)};
-+    var cb = function fn() {return fn.execute.apply(fn,arguments)};
-     for (var id in CALLBACK.prototype) {
-       if (CALLBACK.prototype.hasOwnProperty(id)) {
-         if (typeof(data[id]) !== 'undefined') {cb[id] = data[id]}
-diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
-index 96fb9186..473aca11 100644
--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
-+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
-@@ -813,9 +813,9 @@ MathJax.ElementJax.mml.Augment({
-       if (!(this.isEmbellished()) || typeof(this.core) === "undefined") {return this}
-       return this.data[this.core].CoreMO();
-     },
-    toString: function () {
-+    toString: function fn() {
-       if (this.inferred) {return '[' + this.data.join(',') + ']'}
-      return this.SUPER(arguments).toString.call(this);
-+      return this.SUPER(fn).toString.call(this);
-     },
-     setTeXclass: function (prev) {
-       var i, m = this.data.length;
-@@ -1196,12 +1196,12 @@ MathJax.ElementJax.mml.Augment({
-       }
-     },
-     linebreakContainer: true,
-    Append: function () {
-+    Append: function fn() {
-       for (var i = 0, m = arguments.length; i < m; i++) {
-         if (!((arguments[i] instanceof MML.mtr) ||
-               (arguments[i] instanceof MML.mlabeledtr))) {arguments[i] = MML.mtr(arguments[i])}
-       }
-      this.SUPER(arguments).Append.apply(this,arguments);
-+      this.SUPER(fn).Append.apply(this,arguments);
-     },
-     setTeXclass: MML.mbase.setSeparateTeXclasses
-   });
-@@ -1221,11 +1221,11 @@ MathJax.ElementJax.mml.Augment({
-       mtable: {rowalign: true, columnalign: true, groupalign: true}
-     },
-     linebreakContainer: true,
-    Append: function () {
-+    Append: function fn() {
-       for (var i = 0, m = arguments.length; i < m; i++) {
-         if (!(arguments[i] instanceof MML.mtd)) {arguments[i] = MML.mtd(arguments[i])}
-       }
-      this.SUPER(arguments).Append.apply(this,arguments);
-+      this.SUPER(fn).Append.apply(this,arguments);
-     },
-     setTeXclass: MML.mbase.setSeparateTeXclasses
-   });
-@@ -1420,9 +1420,9 @@ MathJax.ElementJax.mml.Augment({
-   
-   MML.xml = MML.mbase.Subclass({
-     type: "xml",
-    Init: function () {
-+    Init: function fn() {
-       this.div = document.createElement("div");
-      return this.SUPER(arguments).Init.apply(this,arguments);
-+      return this.SUPER(fn).Init.apply(this,arguments);
-     },
-     Append: function () {
-       for (var i = 0, m = arguments.length; i < m; i++) {
@@ -11,7 +11,7 @@
    {
      "src": "apple-touch-icon.png",
      "type": "image/png",
-      "sizes": "256x256"
+      "sizes": "180x180"
    }
  ],
  "start_url": "/",
@@ -1,10 +0,0 @@
-// When building MathJax 4.0-beta from source within the Excalidraw tree, some
-// import paths don't properly translate from `ts/` to `mjs/`. This makes the
-// Excalidraw build process parse MathJax TypeScript files. The resulting error
-// messages do not occur if MathJax was built from source outside the
-// Excalidraw tree. The following regexp eliminates those error messages.
-require("replace-in-file").sync({
-  files: "node_modules/mathjax-full/mjs/**/*",
-  from: /mathjax-full\/ts/g,
-  to: "mathjax-full/mjs",
-});
@@ -10,7 +10,7 @@ import {
  computeBoundTextPosition,
  computeContainerDimensionForBoundText,
  getBoundTextElement,
-  measureTextElement,
+  measureText,
  redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@@ -31,6 +31,7 @@ import {
 } from "../element/types";
 import { AppState } from "../types";
 import { Mutable } from "../utility-types";
+import { getFontString } from "../utils";
 import { register } from "./register";

 export const actionUnbindText = register({
@@ -47,11 +48,10 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element);
      if (boundTextElement) {
-        const { width, height, baseline } = measureTextElement(
-          boundTextElement,
-          {
-            text: boundTextElement.originalText,
-          },
+        const { width, height, baseline } = measureText(
+          boundTextElement.originalText,
+          getFontString(boundTextElement),
+          boundTextElement.lineHeight,
        );
        const originalContainerHeight = getOriginalContainerHeightFromCache(
          element.id,
@@ -90,7 +90,9 @@ export const actionFinalize = register({
        }
      }
      if (isInvisiblySmallElement(multiPointElement)) {
-        newElements = newElements.slice(0, -1);
+        newElements = newElements.filter(
+          (el) => el.id !== multiPointElement.id,
+        );
      }

      // If the multi point line closes the loop,
@@ -15,6 +15,7 @@ export const actionToggleGridMode = register({
      appState: {
        ...appState,
        gridSize: this.checked!(appState) ? null : GRID_SIZE,
+        objectsSnapModeEnabled: false,
      },
      commitToHistory: false,
    };
@@ -0,0 +1,28 @@
+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,
+});
@@ -80,6 +80,7 @@ export {

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

 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
@@ -2,10 +2,10 @@ import React from "react";
 import {
  Action,
  UpdaterFn,
+  ActionName,
  ActionResult,
  PanelComponentProps,
  ActionSource,
-  ActionPredicateFn,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
@@ -40,8 +40,7 @@ const trackAction = (
 };

 export class ActionManager {
-  actions = {} as Record<Action["name"], Action>;
-  actionPredicates = [] as ActionPredicateFn[];
+  actions = {} as Record<ActionName, Action>;

  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

@@ -69,37 +68,6 @@ export class ActionManager {
    this.app = app;
  }

-  registerActionPredicate(predicate: ActionPredicateFn) {
-    if (!this.actionPredicates.includes(predicate)) {
-      this.actionPredicates.push(predicate);
-    }
-  }
-
-  filterActions(
-    filter: ActionPredicateFn,
-    opts?: {
-      elements?: readonly ExcalidrawElement[];
-      data?: Record<string, any>;
-    },
-  ): Action[] {
-    // For testing
-    if (this === undefined) {
-      return [];
-    }
-    const elements = opts?.elements ?? this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const data = opts?.data;
-
-    const actions: Action[] = [];
-    for (const key in this.actions) {
-      const action = this.actions[key];
-      if (filter(action, elements, appState, data)) {
-        actions.push(action);
-      }
-    }
-    return actions;
-  }
-
  registerAction(action: Action) {
    this.actions[action.name] = action;
  }
@@ -116,7 +84,7 @@ export class ActionManager {
        (action) =>
          (action.name in canvasActions
            ? canvasActions[action.name as keyof typeof canvasActions]
-            : this.isActionEnabled(action, { noPredicates: true })) &&
+            : true) &&
          action.keyTest &&
          action.keyTest(
            event,
@@ -167,7 +135,7 @@ export class ActionManager {
  /**
   * @param data additional data sent to the PanelComponent
   */
-  renderAction = (name: Action["name"], data?: PanelComponentProps["data"]) => {
+  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
    const canvasActions = this.app.props.UIOptions.canvasActions;

    if (
@@ -175,7 +143,7 @@ export class ActionManager {
      "PanelComponent" in this.actions[name] &&
      (name in canvasActions
        ? canvasActions[name as keyof typeof canvasActions]
-        : this.isActionEnabled(this.actions[name], { noPredicates: true }))
+        : true)
    ) {
      const action = this.actions[name];
      const PanelComponent = action.PanelComponent!;
@@ -197,7 +165,6 @@ export class ActionManager {

      return (
        <PanelComponent
-          key={name}
          elements={this.getElementsIncludingDeleted()}
          appState={this.getAppState()}
          updateData={updateData}
@@ -211,31 +178,13 @@ export class ActionManager {
    return null;
  };

-  isActionEnabled = (
-    action: Action,
-    opts?: {
-      elements?: readonly ExcalidrawElement[];
-      data?: Record<string, any>;
-      noPredicates?: boolean;
-    },
-  ): boolean => {
-    const elements = opts?.elements ?? this.getElementsIncludingDeleted();
+  isActionEnabled = (action: Action) => {
+    const elements = this.getElementsIncludingDeleted();
    const appState = this.getAppState();
-    const data = opts?.data;

-    if (
-      !opts?.noPredicates &&
-      action.predicate &&
-      !action.predicate(elements, appState, this.app.props, this.app, data)
-    ) {
-      return false;
-    }
-    let enabled = true;
-    this.actionPredicates.forEach((fn) => {
-      if (!fn(action, elements, appState, data)) {
-        enabled = false;
-      }
-    });
-    return enabled;
+    return (
+      !action.predicate ||
+      action.predicate(elements, appState, this.app.props, this.app)
+    );
  };
 }
@@ -28,6 +28,7 @@ export type ShortcutName =
      | "ungroup"
      | "gridMode"
      | "zenMode"
+      | "objectsSnapMode"
      | "stats"
      | "addToLibrary"
      | "viewMode"
@@ -74,6 +75,7 @@ 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")],
@@ -83,23 +85,8 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };

-export type CustomShortcutName = string;
-
-let customShortcutMap: Record<CustomShortcutName, string[]> = {};
-
-export const registerCustomShortcuts = (
-  shortcuts: Record<CustomShortcutName, string[]>,
-) => {
-  customShortcutMap = { ...customShortcutMap, ...shortcuts };
-};
-
-export const getShortcutFromShortcutName = (
-  name: ShortcutName | CustomShortcutName,
-) => {
-  const shortcuts =
-    name in customShortcutMap
-      ? customShortcutMap[name as CustomShortcutName]
-      : shortcutMap[name as ShortcutName];
+export const getShortcutFromShortcutName = (name: ShortcutName) => {
+  const shortcuts = shortcutMap[name];
  // if multiple shortcuts available, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
@@ -32,15 +32,6 @@ type ActionFn = (
  app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;

-// Return `true` *unless* `Action` should be disabled
-// given `elements`, `appState`, and optionally `data`.
-export type ActionPredicateFn = (
-  action: Action,
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  data?: Record<string, any>,
-) => boolean;
-
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;

@@ -60,6 +51,7 @@ export type ActionName =
  | "pasteStyles"
  | "gridMode"
  | "zenMode"
+  | "objectsSnapMode"
  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
@@ -144,7 +136,7 @@ export type PanelComponentProps = {
 };

 export interface Action {
-  name: string;
+  name: ActionName;
  PanelComponent?: React.FC<PanelComponentProps>;
  perform: ActionFn;
  keyPriority?: number;
@@ -166,7 +158,6 @@ export interface Action {
    appState: AppState,
    appProps: ExcalidrawProps,
    app: AppClassProperties,
-    data?: Record<string, any>,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
  trackEvent:
@@ -99,6 +99,12 @@ export const getDefaultAppState = (): Omit<
    pendingImageElementId: null,
    showHyperlinkPopup: false,
    selectedLinearElement: null,
+    snapLines: [],
+    originSnapOffset: {
+      x: 0,
+      y: 0,
+    },
+    objectsSnapModeEnabled: false,
  };
 };

@@ -146,8 +152,6 @@ const APP_STATE_STORAGE_CONF = (<
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
  activeTool: { browser: true, export: false, server: false },
-  activeSubtypes: { browser: true, export: false, server: false },
-  customData: { browser: true, export: false, server: false },
  penMode: { browser: true, export: false, server: false },
  penDetected: { browser: true, export: false, server: false },
  errorMessage: { browser: false, export: false, server: false },
@@ -208,6 +212,9 @@ 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 = <
@@ -11,8 +11,6 @@ import {
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
-import { AppState } from "./types";
-import { selectSubtype } from "./element/subtypes";

 export type ChartElements = readonly NonDeletedExcalidrawElement[];

@@ -25,8 +23,6 @@ export interface Spreadsheet {
  title: string | null;
  labels: string[] | null;
  values: number[];
-  activeSubtypes?: AppState["activeSubtypes"];
-  customData?: AppState["customData"];
 }

 export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
@@ -197,17 +193,13 @@ const chartXLabels = (
  groupId: string,
  backgroundColor: string,
 ): ChartElements => {
-  const custom = selectSubtype(spreadsheet, "text");
  return (
    spreadsheet.labels?.map((label, index) => {
      return newTextElement({
        groupIds: [groupId],
        backgroundColor,
        ...commonProps,
-        text:
-          label.length > 8 && custom.subtype === undefined
-            ? `${label.slice(0, 5)}...`
-            : label,
+        text: label.length > 8 ? `${label.slice(0, 5)}...` : label,
        x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
        y: y + BAR_GAP / 2,
        width: BAR_WIDTH,
@@ -215,7 +207,6 @@ const chartXLabels = (
        fontSize: 16,
        textAlign: "center",
        verticalAlign: "top",
-        ...custom,
      });
    }) || []
  );
@@ -236,7 +227,6 @@ const chartYLabels = (
    y: y - BAR_GAP,
    text: "0",
    textAlign: "right",
-    ...selectSubtype(spreadsheet, "text"),
  });

  const maxYLabel = newTextElement({
@@ -247,7 +237,6 @@ const chartYLabels = (
    y: y - BAR_HEIGHT - minYLabel.height / 2,
    text: Math.max(...spreadsheet.values).toLocaleString(),
    textAlign: "right",
-    ...selectSubtype(spreadsheet, "text"),
  });

  return [minYLabel, maxYLabel];
@@ -275,7 +264,6 @@ const chartLines = (
      [0, 0],
      [chartWidth, 0],
    ],
-    ...selectSubtype(spreadsheet, "line"),
  });

  const yLine = newLinearElement({
@@ -292,7 +280,6 @@ const chartLines = (
      [0, 0],
      [0, -chartHeight],
    ],
-    ...selectSubtype(spreadsheet, "line"),
  });

  const maxLine = newLinearElement({
@@ -311,7 +298,6 @@ const chartLines = (
      [0, 0],
      [chartWidth, 0],
    ],
-    ...selectSubtype(spreadsheet, "line"),
  });

  return [xLine, yLine, maxLine];
@@ -338,7 +324,6 @@ const chartBaseElements = (
        y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
        roundness: null,
        textAlign: "center",
-        ...selectSubtype(spreadsheet, "text"),
      })
    : null;

@@ -355,7 +340,6 @@ const chartBaseElements = (
        strokeColor: COLOR_PALETTE.black,
        fillStyle: "solid",
        opacity: 6,
-        ...selectSubtype(spreadsheet, "rectangle"),
      })
    : null;

@@ -388,7 +372,6 @@ const chartTypeBar = (
      y: y - barHeight - BAR_GAP,
      width: BAR_WIDTH,
      height: barHeight,
-      ...selectSubtype(spreadsheet, "rectangle"),
    });
  });

@@ -441,7 +424,6 @@ const chartTypeLine = (
    width: maxX - minX,
    strokeWidth: 2,
    points: points as any,
-    ...selectSubtype(spreadsheet, "line"),
  });

  const dots = spreadsheet.values.map((value, index) => {
@@ -458,7 +440,6 @@ const chartTypeLine = (
      y: y + cy - BAR_GAP * 2,
      width: BAR_GAP,
      height: BAR_GAP,
-      ...selectSubtype(spreadsheet, "ellipse"),
    });
  });

@@ -481,7 +462,6 @@ const chartTypeLine = (
        [0, 0],
        [0, cy],
      ],
-      ...selectSubtype(spreadsheet, "line"),
    });
  });

@@ -2,7 +2,7 @@ import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppState, BinaryFiles } from "./types";
+import { BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
@@ -167,7 +167,6 @@ export const getSystemClipboard = async (
 export const parseClipboard = async (
  event: ClipboardEvent | null,
  isPlainPaste = false,
-  appState?: AppState,
 ): Promise<ClipboardData> => {
  const systemClipboard = await getSystemClipboard(event);

@@ -187,10 +186,6 @@ export const parseClipboard = async (
    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);

  if (spreadsheetResult) {
-    if ("spreadsheet" in spreadsheetResult) {
-      spreadsheetResult.spreadsheet.activeSubtypes = appState?.activeSubtypes;
-      spreadsheetResult.spreadsheet.customData = appState?.customData;
-    }
    return spreadsheetResult;
  }

@@ -14,16 +14,10 @@ import {
  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { UIAppState, Zoom } from "../types";
-import {
-  capitalizeString,
-  isTransparent,
-  updateActiveTool,
-  setCursorForShape,
-} from "../utils";
+import { AppClassProperties, UIAppState, Zoom } from "../types";
+import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { SubtypeShapeActions, SubtypeToggles } from "./Subtypes";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement } from "../element/typeChecks";
@@ -37,7 +31,12 @@ import {

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

 export const SelectedShapeActions = ({
@@ -101,7 +100,6 @@ export const SelectedShapeActions = ({
      {showChangeBackgroundIcons && (
        <div>{renderAction("changeBackgroundColor")}</div>
      )}
-      <SubtypeShapeActions elements={targetElements} />
      {showFillIcons && renderAction("changeFillStyle")}

      {(hasStrokeWidth(appState.activeTool.type) ||
@@ -217,18 +215,23 @@ 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) => {
@@ -253,29 +256,14 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-${value}`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
+                app.togglePenMode(true);
              }
            }}
            onChange={({ pointerType }) => {
              if (appState.activeTool.type !== value) {
                trackEvent("toolbar", value, "ui");
              }
-              const nextActiveTool = updateActiveTool(appState, {
-                type: value,
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                activeEmbeddable: null,
-                multiElement: null,
-                selectedElementIds: {},
-              });
-              setCursorForShape(interactiveCanvas, {
-                ...appState,
-                activeTool: nextActiveTool,
-              });
+              app.setActiveTool({ type: value });
              if (value === "image") {
                onImageAction({ pointerType });
              }
@@ -302,24 +290,14 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-frame`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
+                app.togglePenMode(true);
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "frame", "ui");
-              const nextActiveTool = updateActiveTool(appState, {
-                type: "frame",
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                multiElement: null,
-                selectedElementIds: {},
-                activeEmbeddable: null,
-              });
+              app.setActiveTool({ type: "frame" });
            }}
+            selected={activeTool.type === "frame"}
          />
          <ToolButton
            className={clsx("Shape", { fillable: false })}
@@ -332,30 +310,28 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-embeddable`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
+                app.togglePenMode(true);
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "embeddable", "ui");
-              const nextActiveTool = updateActiveTool(appState, {
-                type: "embeddable",
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                multiElement: null,
-                selectedElementIds: {},
-                activeEmbeddable: null,
-              });
+              app.setActiveTool({ type: "embeddable" });
            }}
+            selected={activeTool.type === "embeddable"}
          />
        </>
      ) : (
        <DropdownMenu open={isExtraToolsMenuOpen}>
          <DropdownMenu.Trigger
-            className="App-toolbar__extra-tools-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),
+            })}
            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
            title={t("toolBar.extraTools")}
          >
@@ -368,41 +344,39 @@ export const ShapesSwitcher = ({
          >
            <DropdownMenu.Item
              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "frame",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
+                app.setActiveTool({ type: "frame" });
              }}
              icon={frameToolIcon}
              shortcut={KEYS.F.toLocaleUpperCase()}
              data-testid="toolbar-frame"
+              selected={frameToolSelected}
            >
              {t("toolBar.frame")}
            </DropdownMenu.Item>
            <DropdownMenu.Item
              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "embeddable",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
+                app.setActiveTool({ type: "embeddable" });
              }}
              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>
      )}
-      <SubtypeToggles />
    </>
  );
 };
@@ -35,6 +35,7 @@ import {
  actionLink,
  actionToggleElementLock,
  actionToggleLinearEditor,
+  actionToggleObjectsSnapMode,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
@@ -210,7 +211,7 @@ import {
 import Scene from "../scene/Scene";
 import { RenderInteractiveSceneCallback, ScrollBars } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, SHAPES } from "../shapes";
+import { findShapeByKey } from "../shapes";
 import {
  AppClassProperties,
  AppProps,
@@ -228,6 +229,9 @@ import {
  FrameNameBoundsCache,
  SidebarName,
  SidebarTabName,
+  KeyboardModifiersObject,
+  CollaboratorPointer,
+  ToolType,
 } from "../types";
 import {
  debounce,
@@ -270,16 +274,6 @@ import {
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import {
-  SubtypeLoadedCb,
-  SubtypeRecord,
-  SubtypePrepFn,
-  checkRefreshOnSubtypeLoad,
-  isSubtypeAction,
-  prepareSubtype,
-  selectSubtype,
-  subtypeActionPredicate,
-} from "../element/subtypes";
 import {
  dataURLToFile,
  generateIdFromFile,
@@ -352,6 +346,17 @@ 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";
@@ -364,6 +369,8 @@ 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!);
@@ -488,10 +495,13 @@ class App extends React.Component<AppProps, AppState> {
  private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>();

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

+  laserPathManager: LaserPathManager = new LaserPathManager(this);
+
  constructor(props: AppProps) {
    super(props);
    const defaultAppState = getDefaultAppState();
@@ -500,6 +510,7 @@ class App extends React.Component<AppProps, AppState> {
      viewModeEnabled = false,
      zenModeEnabled = false,
      gridModeEnabled = false,
+      objectsSnapModeEnabled = false,
      theme = defaultAppState.theme,
      name = defaultAppState.name,
    } = props;
@@ -510,6 +521,7 @@ class App extends React.Component<AppProps, AppState> {
      ...this.getCanvasOffsets(),
      viewModeEnabled,
      zenModeEnabled,
+      objectsSnapModeEnabled,
      gridSize: gridModeEnabled ? GRID_SIZE : null,
      name,
      width: window.innerWidth,
@@ -519,12 +531,6 @@ class App extends React.Component<AppProps, AppState> {
    this.id = nanoid();

    this.library = new Library(this);
-    this.actionManager = new ActionManager(
-      this.syncActionResult,
-      () => this.state,
-      () => this.scene.getElementsIncludingDeleted(),
-      this,
-    );
    this.scene = new Scene();

    this.canvas = document.createElement("canvas");
@@ -551,8 +557,6 @@ class App extends React.Component<AppProps, AppState> {
        getSceneElements: this.getSceneElements,
        getAppState: () => this.state,
        getFiles: () => this.files,
-        actionManager: this.actionManager,
-        addSubtype: this.addSubtype,
        refresh: this.refresh,
        setToast: this.setToast,
        id: this.id,
@@ -580,27 +584,16 @@ class App extends React.Component<AppProps, AppState> {
      onSceneUpdated: this.onSceneUpdated,
    });
    this.history = new History();
+    this.actionManager = new ActionManager(
+      this.syncActionResult,
+      () => this.state,
+      () => this.scene.getElementsIncludingDeleted(),
+      this,
+    );
    this.actionManager.registerAll(actions);

    this.actionManager.registerAction(createUndoAction(this.history));
    this.actionManager.registerAction(createRedoAction(this.history));
-    this.actionManager.registerActionPredicate(subtypeActionPredicate);
-  }
-
-  private addSubtype(record: SubtypeRecord, subtypePrepFn: SubtypePrepFn) {
-    const subtypeLoadedCb: SubtypeLoadedCb = (hasSubtype) => {
-      const elements = this.getSceneElementsIncludingDeleted();
-      // If there are any elements of the just-registered subtype,
-      // refresh the scene to re-render each such element.
-      if (checkRefreshOnSubtypeLoad(hasSubtype, elements)) {
-        this.refresh();
-      }
-    };
-    const prep = prepareSubtype(record, subtypePrepFn, subtypeLoadedCb);
-    if (prep.actions) {
-      this.actionManager.registerAll(prep.actions);
-    }
-    return prep;
  }

  private onWindowMessage(event: MessageEvent) {
@@ -1115,7 +1108,7 @@ class App extends React.Component<AppProps, AppState> {
            cursor: CURSOR_TYPE.MOVE,
            pointerEvents: this.state.viewModeEnabled
              ? POINTER_EVENTS.disabled
-              : POINTER_EVENTS.inheritFromUI,
+              : POINTER_EVENTS.enabled,
          }}
          onPointerDown={(event) => this.handleCanvasPointerDown(event)}
          onWheel={(event) => this.handleWheel(event)}
@@ -1217,12 +1210,14 @@ 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 && (
@@ -1750,7 +1745,9 @@ 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();
@@ -2188,7 +2185,7 @@ class App extends React.Component<AppProps, AppState> {
      // (something something security)
      let file = event?.clipboardData?.files[0];

-      const data = await parseClipboard(event, isPlainPaste, this.state);
+      const data = await parseClipboard(event, isPlainPaste);
      if (!file && data.text && !isPlainPaste) {
        const string = data.text.trim();
        if (string.startsWith("<svg") && string.endsWith("</svg>")) {
@@ -2418,7 +2415,6 @@ class App extends React.Component<AppProps, AppState> {
      fontFamily: this.state.currentItemFontFamily,
      textAlign: this.state.currentItemTextAlign,
      verticalAlign: DEFAULT_VERTICAL_ALIGN,
-      ...selectSubtype(this.state, "text"),
      locked: false,
    };

@@ -2566,10 +2562,11 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  togglePenMode = () => {
+  togglePenMode = (force?: boolean) => {
    this.setState((prevState) => {
      return {
-        penMode: !prevState.penMode,
+        penMode: force ?? !prevState.penMode,
+        penDetected: true,
      };
    });
  };
@@ -3063,6 +3060,15 @@ 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)
@@ -3122,15 +3128,10 @@ class App extends React.Component<AppProps, AppState> {
    }
  });

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

  private setCursor = (cursor: string) => {
@@ -3555,7 +3569,6 @@ class App extends React.Component<AppProps, AppState> {
          verticalAlign: parentCenterPosition
            ? VERTICAL_ALIGN.MIDDLE
            : DEFAULT_VERTICAL_ALIGN,
-          ...selectSubtype(this.state, "text"),
          containerId: shouldBindToContainer ? container?.id : undefined,
          groupIds: container?.groupIds ?? [],
          lineHeight,
@@ -3737,10 +3750,10 @@ class App extends React.Component<AppProps, AppState> {
    isTouchScreen: boolean,
  ) => {
    const draggedDistance = distance2d(
-      this.lastPointerDown!.clientX,
-      this.lastPointerDown!.clientY,
-      this.lastPointerUp!.clientX,
-      this.lastPointerUp!.clientY,
+      this.lastPointerDownEvent!.clientX,
+      this.lastPointerDownEvent!.clientY,
+      this.lastPointerUpEvent!.clientX,
+      this.lastPointerUpEvent!.clientY,
    );
    if (
      !this.hitLinkElement ||
@@ -3751,7 +3764,7 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }
    const lastPointerDownCoords = viewportCoordsToSceneCoords(
-      this.lastPointerDown!,
+      this.lastPointerDownEvent!,
      this.state,
    );
    const lastPointerDownHittingLinkIcon = isPointHittingLink(
@@ -3761,7 +3774,7 @@ class App extends React.Component<AppProps, AppState> {
      this.device.isMobile,
    );
    const lastPointerUpCoords = viewportCoordsToSceneCoords(
-      this.lastPointerUp!,
+      this.lastPointerUpEvent!,
      this.state,
    );
    const lastPointerUpHittingLinkIcon = isPointHittingLink(
@@ -3896,6 +3909,30 @@ 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
@@ -4366,6 +4403,10 @@ 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
@@ -4438,17 +4479,18 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }

-    this.lastPointerDown = event;
+    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+      return;
+    }
+
+    this.lastPointerDownEvent = 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 &&
@@ -4539,6 +4581,11 @@ 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"
@@ -4562,7 +4609,7 @@ class App extends React.Component<AppProps, AppState> {

    lastPointerUp = onPointerUp;

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

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

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

    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5409,7 +5460,6 @@ class App extends React.Component<AppProps, AppState> {
      roughness: this.state.currentItemRoughness,
      roundness: null,
      opacity: this.state.currentItemOpacity,
-      ...selectSubtype(this.state, "image"),
      locked: false,
      frameId: topLayerFrame ? topLayerFrame.id : null,
    });
@@ -5510,7 +5560,6 @@ class App extends React.Component<AppProps, AppState> {
            : null,
        startArrowhead,
        endArrowhead,
-        ...selectSubtype(this.state, elementType),
        locked: false,
        frameId: topLayerFrame ? topLayerFrame.id : null,
      });
@@ -5568,7 +5617,9 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      pointerDownState.origin.x,
      pointerDownState.origin.y,
-      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
+        ? null
+        : this.state.gridSize,
    );

    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5587,7 +5638,6 @@ class App extends React.Component<AppProps, AppState> {
      roughness: this.state.currentItemRoughness,
      opacity: this.state.currentItemOpacity,
      roundness: this.getCurrentItemRoundness(elementType),
-      ...selectSubtype(this.state, elementType),
      locked: false,
      frameId: topLayerFrame ? topLayerFrame.id : null,
    } as const;
@@ -5627,7 +5677,9 @@ class App extends React.Component<AppProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      pointerDownState.origin.x,
      pointerDownState.origin.y,
-      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+      this.lastPointerDownEvent?.[KEYS.CTRL_OR_CMD]
+        ? null
+        : this.state.gridSize,
    );

    const frame = newFrameElement({
@@ -5650,6 +5702,52 @@ 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 {
@@ -5707,6 +5805,10 @@ 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,
@@ -5879,33 +5981,62 @@ class App extends React.Component<AppProps, AppState> {
          !this.state.editingElement &&
          this.state.activeEmbeddable?.state !== "active"
        ) {
-          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 dragOffset = {
+            x: pointerCoords.x - pointerDownState.origin.x,
+            y: pointerCoords.y - pointerDownState.origin.y,
+          };

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

          // 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,
-              dragX,
-              dragY,
-              lockDirection,
-              dragDistanceX,
-              dragDistanceY,
+              dragOffset,
              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
@@ -5946,15 +6077,21 @@ class App extends React.Component<AppProps, AppState> {
                  groupIdMap,
                  element,
                );
-                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,
-                );
+                const origElement = pointerDownState.originalElements.get(
+                  element.id,
+                )!;
                mutateElement(duplicatedElement, {
-                  x: duplicatedElement.x + (originDragX - dragX),
-                  y: duplicatedElement.y + (originDragY - dragY),
+                  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,
+                );
+
                nextElements.push(duplicatedElement);
                elementsToAppend.push(element);
                oldIdToDuplicatedId.set(element.id, duplicatedElement.id);
@@ -5980,6 +6117,8 @@ class App extends React.Component<AppProps, AppState> {
              oldIdToDuplicatedId,
            );
            this.scene.replaceAllElements(nextSceneElements);
+            this.maybeCacheVisibleGaps(event, selectedElements, true);
+            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
          }
          return;
        }
@@ -6196,6 +6335,7 @@ class App extends React.Component<AppProps, AppState> {
        isResizing,
        isRotating,
      } = this.state;
+
      this.setState({
        isResizing: false,
        isRotating: false,
@@ -6210,8 +6350,14 @@ 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({
@@ -6435,7 +6581,9 @@ class App extends React.Component<AppProps, AppState> {
      ) {
        // remove invisible element which was added in onPointerDown
        this.scene.replaceAllElements(
-          this.scene.getElementsIncludingDeleted().slice(0, -1),
+          this.scene
+            .getElementsIncludingDeleted()
+            .filter((el) => el.id !== draggingElement.id),
        );
        this.setState({
          draggingElement: null,
@@ -6657,17 +6805,17 @@ class App extends React.Component<AppProps, AppState> {
      }
      if (isEraserActive(this.state)) {
        const draggedDistance = distance2d(
-          this.lastPointerDown!.clientX,
-          this.lastPointerDown!.clientY,
-          this.lastPointerUp!.clientX,
-          this.lastPointerUp!.clientY,
+          this.lastPointerDownEvent!.clientX,
+          this.lastPointerDownEvent!.clientY,
+          this.lastPointerUpEvent!.clientX,
+          this.lastPointerUpEvent!.clientY,
        );

        if (draggedDistance === 0) {
          const scenePointer = viewportCoordsToSceneCoords(
            {
-              clientX: this.lastPointerUp!.clientX,
-              clientY: this.lastPointerUp!.clientY,
+              clientX: this.lastPointerUpEvent!.clientX,
+              clientY: this.lastPointerUpEvent!.clientY,
            },
            this.state,
          );
@@ -6907,6 +7055,11 @@ 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({
@@ -6923,14 +7076,16 @@ class App extends React.Component<AppProps, AppState> {

      if (
        hitElement &&
-        this.lastPointerUp &&
-        this.lastPointerDown &&
-        this.lastPointerUp.timeStamp - this.lastPointerDown.timeStamp < 300 &&
+        this.lastPointerUpEvent &&
+        this.lastPointerDownEvent &&
+        this.lastPointerUpEvent.timeStamp -
+          this.lastPointerDownEvent.timeStamp <
+          300 &&
        gesture.pointers.size <= 1 &&
        isEmbeddableElement(hitElement) &&
        this.isEmbeddableCenter(
          hitElement,
-          this.lastPointerUp,
+          this.lastPointerUpEvent,
          pointerDownState.origin.x,
          pointerDownState.origin.y,
        )
@@ -7739,7 +7894,7 @@ class App extends React.Component<AppProps, AppState> {
        shouldResizeFromCenter(event),
      );
    } else {
-      const [gridX, gridY] = getGridPoint(
+      let [gridX, gridY] = getGridPoint(
        pointerCoords.x,
        pointerCoords.y,
        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
@@ -7753,6 +7908,33 @@ 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,
@@ -7767,6 +7949,7 @@ class App extends React.Component<AppProps, AppState> {
          : shouldMaintainAspectRatio(event),
        shouldResizeFromCenter(event),
        aspectRatio,
+        this.state.originSnapOffset,
      );

      this.maybeSuggestBindingForAll([draggingElement]);
@@ -7808,7 +7991,7 @@ class App extends React.Component<AppProps, AppState> {
      activeEmbeddable: null,
    });
    const pointerCoords = pointerDownState.lastCoords;
-    const [resizeX, resizeY] = getGridPoint(
+    let [resizeX, resizeY] = getGridPoint(
      pointerCoords.x - pointerDownState.resize.offset.x,
      pointerCoords.y - pointerDownState.resize.offset.y,
      event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
@@ -7836,6 +8019,41 @@ 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,
@@ -7851,6 +8069,7 @@ class App extends React.Component<AppProps, AppState> {
        resizeY,
        pointerDownState.resize.center.x,
        pointerDownState.resize.center.y,
+        this.state,
      )
    ) {
      this.maybeSuggestBindingForAll(selectedElements);
@@ -7908,29 +8127,6 @@ class App extends React.Component<AppProps, AppState> {

  private getContextMenuItems = (
    type: "canvas" | "element",
-  ): ContextMenuItems => {
-    const subtype: ContextMenuItems = [];
-    this.actionManager
-      .filterActions(isSubtypeAction)
-      .forEach(
-        (action) =>
-          this.actionManager.isActionEnabled(action, { data: {} }) &&
-          subtype.push(action),
-      );
-    if (subtype.length > 0) {
-      subtype.push(CONTEXT_MENU_SEPARATOR);
-    }
-    const standard: ContextMenuItems = this._getContextMenuItems(type).filter(
-      (item) =>
-        !item ||
-        item === CONTEXT_MENU_SEPARATOR ||
-        this.actionManager.isActionEnabled(item, { noPredicates: true }),
-    );
-    return [...subtype, ...standard];
-  };
-
-  private _getContextMenuItems = (
-    type: "canvas" | "element",
  ): ContextMenuItems => {
    const options: ContextMenuItems = [];

@@ -7961,6 +8157,7 @@ class App extends React.Component<AppProps, AppState> {
        actionUnlockAllElements,
        CONTEXT_MENU_SEPARATOR,
        actionToggleGridMode,
+        actionToggleObjectsSnapMode,
        actionToggleZenMode,
        actionToggleViewMode,
        actionToggleStats,
@@ -8107,15 +8304,21 @@ class App extends React.Component<AppProps, AppState> {
    if (!x || !y) {
      return;
    }
-    const pointer = viewportCoordsToSceneCoords(
+    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
      { clientX: x, clientY: y },
      this.state,
    );

-    if (isNaN(pointer.x) || isNaN(pointer.y)) {
+    if (isNaN(sceneX) || isNaN(sceneY)) {
      // 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,
@@ -165,6 +165,7 @@ 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"]}
@@ -258,6 +259,10 @@ 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+'")]}
@@ -0,0 +1,316 @@
+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 isDrawing = false;
+  private container: SVGSVGElement | undefined;
+
+  constructor(private app: App) {
+    this.ownState = instantiateCollabolatorState();
+  }
+
+  destroy() {
+    this.stop();
+    this.isDrawing = false;
+    this.ownState = instantiateCollabolatorState();
+    this.collaboratorsState = new Map();
+  }
+
+  startPath(x: number, y: number) {
+    if (this.container) {
+      this.container.style.top = "0px";
+      this.container.style.left = "0px";
+      const { x, y } = this.container.getBoundingClientRect();
+      this.container.style.top = `${-y}px`;
+      this.container.style.left = `${-x}px`;
+    }
+    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.isDrawing = true;
+
+    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 (this.isDrawing) {
+      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;
+    }
+
+    let somePathsExist = false;
+
+    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)}`;
+      }
+
+      if (paths.trim()) {
+        somePathsExist = true;
+      }
+
+      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)}`;
+    }
+
+    paths = paths.trim();
+
+    if (paths) {
+      somePathsExist = true;
+    }
+
+    this.ownState.svg.setAttribute("d", paths);
+    this.ownState.svg.setAttribute("fill", "red");
+
+    if (!somePathsExist) {
+      this.isDrawing = false;
+    }
+  }
+}
@@ -0,0 +1,41 @@
+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>
+  );
+};
@@ -0,0 +1,27 @@
+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>
+  );
+};
@@ -0,0 +1,19 @@
+.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;
+    }
+  }
+}
@@ -55,6 +55,7 @@ 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;
@@ -77,6 +78,7 @@ interface LayerUIProps {
  renderWelcomeScreen: boolean;
  children?: React.ReactNode;
  app: AppClassProperties;
+  isCollaborating: boolean;
 }

 const DefaultMainMenu: React.FC<{
@@ -134,6 +136,7 @@ const LayerUI = ({
  renderWelcomeScreen,
  children,
  app,
+  isCollaborating,
 }: LayerUIProps) => {
  const device = useDevice();
  const tunnels = useInitializeTunnels();
@@ -279,7 +282,7 @@ const LayerUI = ({
                            appState={appState}
                            interactiveCanvas={interactiveCanvas}
                            activeTool={appState.activeTool}
-                            setAppState={setAppState}
+                            app={app}
                            onImageAction={({ pointerType }) => {
                              onImageAction({
                                insertOnCanvasDirectly: pointerType !== "mouse",
@@ -288,6 +291,24 @@ 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>
@@ -87,7 +87,7 @@ export const MobileMenu = ({
                      appState={appState}
                      interactiveCanvas={interactiveCanvas}
                      activeTool={appState.activeTool}
-                      setAppState={setAppState}
+                      app={app}
                      onImageAction={({ pointerType }) => {
                        onImageAction({
                          insertOnCanvasDirectly: pointerType !== "mouse",
@@ -10,12 +10,6 @@ import { useApp } from "./App";
 import { Dialog } from "./Dialog";

 import "./PasteChartDialog.scss";
-import { ensureSubtypesLoaded } from "../element/subtypes";
-import { isTextElement } from "../element";
-import {
-  getContainerElement,
-  redrawTextBoundingBox,
-} from "../element/textElement";

 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;

@@ -31,54 +25,41 @@ const ChartPreviewBtn = (props: {
  );

  useLayoutEffect(() => {
+    if (!props.spreadsheet) {
+      return;
+    }
+
+    const elements = renderSpreadsheet(
+      props.chartType,
+      props.spreadsheet,
+      0,
+      0,
+    );
+    setChartElements(elements);
    let svg: SVGSVGElement;
    const previewNode = previewRef.current!;
+
    (async () => {
-      (async () => {
-        let elements: ChartElements;
-        await ensureSubtypesLoaded(
-          props.spreadsheet?.activeSubtypes ?? [],
-          () => {
-            if (!props.spreadsheet) {
-              return;
-            }
+      svg = await exportToSvg(
+        elements,
+        {
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
+        },
+        null, // files
+      );
+      svg.querySelector(".style-fonts")?.remove();
+      previewNode.replaceChildren();
+      previewNode.appendChild(svg);

-            elements = renderSpreadsheet(
-              props.chartType,
-              props.spreadsheet,
-              0,
-              0,
-            );
-            elements.forEach(
-              (el) =>
-                isTextElement(el) &&
-                redrawTextBoundingBox(el, getContainerElement(el)),
-            );
-            setChartElements(elements);
-          },
-        ).then(async () => {
-          svg = await exportToSvg(
-            elements,
-            {
-              exportBackground: false,
-              viewBackgroundColor: oc.white,
-            },
-            null, // files
-          );
-          svg.querySelector(".style-fonts")?.remove();
-          previewNode.replaceChildren();
-          previewNode.appendChild(svg);
-
-          if (props.selected) {
-            (previewNode.parentNode as HTMLDivElement).focus();
-          }
-        });
-      })();
-
-      return () => {
-        previewNode.replaceChildren();
-      };
+      if (props.selected) {
+        (previewNode.parentNode as HTMLDivElement).focus();
+      }
    })();
+
+    return () => {
+      previewNode.replaceChildren();
+    };
  }, [props.spreadsheet, props.chartType, props.selected]);

  return (
@@ -1,173 +0,0 @@
-import { getShortcutKey, updateActiveTool } from "../utils";
-import { t } from "../i18n";
-import { Action } from "../actions/types";
-import clsx from "clsx";
-import {
-  Subtype,
-  getSubtypeNames,
-  hasAlwaysEnabledActions,
-  isSubtypeAction,
-  isValidSubtype,
-  subtypeCollides,
-} from "../element/subtypes";
-import { ExcalidrawElement, Theme } from "../element/types";
-import {
-  useExcalidrawActionManager,
-  useExcalidrawContainer,
-  useExcalidrawSetAppState,
-} from "./App";
-import { ContextMenuItems } from "./ContextMenu";
-
-export const SubtypeButton = (
-  subtype: Subtype,
-  parentType: ExcalidrawElement["type"],
-  icon: ({ theme }: { theme: Theme }) => JSX.Element,
-  key?: string,
-) => {
-  const title = key !== undefined ? ` - ${getShortcutKey(key)}` : "";
-  const keyTest: Action["keyTest"] =
-    key !== undefined ? (event) => event.code === `Key${key}` : undefined;
-  const subtypeAction: Action = {
-    name: subtype,
-    trackEvent: false,
-    predicate: (...rest) => rest[4]?.subtype === subtype,
-    perform: (elements, appState) => {
-      const inactive = !appState.activeSubtypes?.includes(subtype) ?? true;
-      const activeSubtypes: Subtype[] = [];
-      if (appState.activeSubtypes) {
-        activeSubtypes.push(...appState.activeSubtypes);
-      }
-      let activated = false;
-      if (inactive) {
-        // Ensure `element.subtype` is well-defined
-        if (!subtypeCollides(subtype, activeSubtypes)) {
-          activeSubtypes.push(subtype);
-          activated = true;
-        }
-      } else {
-        // Can only be active if appState.activeSubtypes is defined
-        // and contains subtype.
-        activeSubtypes.splice(activeSubtypes.indexOf(subtype), 1);
-      }
-      const type =
-        appState.activeTool.type !== "custom" &&
-        isValidSubtype(subtype, appState.activeTool.type)
-          ? appState.activeTool.type
-          : parentType;
-      const activeTool = !inactive
-        ? appState.activeTool
-        : updateActiveTool(appState, { type });
-      const selectedElementIds = activated ? {} : appState.selectedElementIds;
-      const selectedGroupIds = activated ? {} : appState.selectedGroupIds;
-
-      return {
-        appState: {
-          ...appState,
-          activeSubtypes,
-          selectedElementIds,
-          selectedGroupIds,
-          activeTool,
-        },
-        commitToHistory: true,
-      };
-    },
-    keyTest,
-    PanelComponent: ({ elements, appState, updateData, data }) => (
-      <button
-        className={clsx("ToolIcon_type_button", "ToolIcon_type_button--show", {
-          ToolIcon: true,
-          "ToolIcon--selected":
-            appState.activeSubtypes !== undefined &&
-            appState.activeSubtypes.includes(subtype),
-          "ToolIcon--plain": true,
-        })}
-        title={`${t(`toolBar.${subtype}`)}${title}`}
-        aria-label={t(`toolBar.${subtype}`)}
-        onClick={() => {
-          updateData(null);
-        }}
-        onContextMenu={
-          data && "onContextMenu" in data
-            ? (event: React.MouseEvent) => {
-                if (
-                  appState.activeSubtypes === undefined ||
-                  (appState.activeSubtypes !== undefined &&
-                    !appState.activeSubtypes.includes(subtype))
-                ) {
-                  updateData(null);
-                }
-                data.onContextMenu(event, subtype);
-              }
-            : undefined
-        }
-      >
-        {
-          <div className="ToolIcon__icon" aria-hidden="true">
-            {icon.call(this, { theme: appState.theme })}
-          </div>
-        }
-      </button>
-    ),
-  };
-  if (key === "") {
-    delete subtypeAction.keyTest;
-  }
-  return subtypeAction;
-};
-
-export const SubtypeToggles = () => {
-  const am = useExcalidrawActionManager();
-  const { container } = useExcalidrawContainer();
-  const setAppState = useExcalidrawSetAppState();
-
-  const onContextMenu = (
-    event: React.MouseEvent<HTMLButtonElement>,
-    subtype: string,
-  ) => {
-    event.preventDefault();
-
-    const { top: offsetTop, left: offsetLeft } =
-      container!.getBoundingClientRect();
-    const left = event.clientX - offsetLeft;
-    const top = event.clientY - offsetTop;
-
-    const items: ContextMenuItems = [];
-    am.filterActions(isSubtypeAction).forEach(
-      (action) =>
-        am.isActionEnabled(action, { data: { subtype } }) && items.push(action),
-    );
-    setAppState({}, () => {
-      setAppState({
-        contextMenu: { top, left, items },
-      });
-    });
-  };
-
-  return (
-    <>
-      {getSubtypeNames().map((subtype) =>
-        am.renderAction(
-          subtype,
-          hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
-        ),
-      )}
-    </>
-  );
-};
-
-SubtypeToggles.displayName = "SubtypeToggles";
-
-export const SubtypeShapeActions = (props: {
-  elements: readonly ExcalidrawElement[];
-}) => {
-  const am = useExcalidrawActionManager();
-  return (
-    <>
-      {am
-        .filterActions(isSubtypeAction, { elements: props.elements })
-        .map((action) => am.renderAction(action.name))}
-    </>
-  );
-};
-
-SubtypeShapeActions.displayName = "SubtypeShapeActions";
@@ -170,5 +170,10 @@
        height: var(--lg-icon-size);
      }
    }
+
+    .ToolIcon__LaserPointer .ToolIcon__icon {
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
  }
 }
@@ -28,6 +28,12 @@
      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 {
@@ -193,6 +193,8 @@ const getRelevantAppStateProps = (
  showHyperlinkPopup: appState.showHyperlinkPopup,
  collaborators: appState.collaborators, // Necessary for collab. sessions
  activeEmbeddable: appState.activeEmbeddable,
+  snapLines: appState.snapLines,
+  zenModeEnabled: appState.zenModeEnabled,
 });

 const areEqual = (
@@ -59,6 +59,11 @@
        height: 2.25rem;
      }

+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
      &__text {
        text-overflow: ellipsis;
        overflow: hidden;
@@ -11,12 +11,14 @@ 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);
@@ -26,7 +28,7 @@ const DropdownMenuItem = ({
      {...rest}
      onClick={handleClick}
      type="button"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDropdownMenuItemClassName(className, selected)}
      title={rest.title ?? rest["aria-label"]}
    >
      <MenuItemContent icon={icon} shortcut={shortcut}>
@@ -3,15 +3,19 @@ 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}`.trim()}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className} ${
+        selected ? `dropdown-menu-item--selected` : ``
+      }`.trim()}
    >
      {children}
    </div>
@@ -12,6 +12,7 @@ const DropdownMenuItemLink = ({
  children,
  onSelect,
  className = "",
+  selected,
  ...rest
 }: {
  href: string;
@@ -19,6 +20,7 @@ const DropdownMenuItemLink = ({
  children: React.ReactNode;
  shortcut?: string;
  className?: string;
+  selected?: boolean;
  onSelect?: (event: Event) => void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -29,7 +31,7 @@ const DropdownMenuItemLink = ({
      href={href}
      target="_blank"
      rel="noreferrer"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDropdownMenuItemClassName(className, selected)}
      title={rest.title ?? rest["aria-label"]}
      onClick={handleClick}
    >
@@ -6,8 +6,13 @@ export const DropdownMenuContentPropsContext = React.createContext<{
  onSelect?: (event: Event) => void;
 }>({});

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

 export const useHandleDropdownMenuItemClick = (
@@ -1653,3 +1653,22 @@ 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,
+);
@@ -34,14 +34,13 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
-import { isValidSubtype } from "../element/subtypes";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
  detectLineHeight,
  getDefaultLineHeight,
-  measureTextElement,
+  measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";

@@ -68,6 +67,7 @@ export const AllowedExcalidrawActiveTools: Record<
  frame: true,
  embeddable: true,
  hand: true,
+  laser: false,
 };

 export type RestoredDataState = {
@@ -93,8 +93,7 @@ const repairBinding = (binding: PointBinding | null) => {
 };

 const restoreElementWithProperties = <
-  T extends Required<Omit<ExcalidrawElement, "subtype" | "customData">> & {
-    subtype?: ExcalidrawElement["subtype"];
+  T extends Required<Omit<ExcalidrawElement, "customData">> & {
    customData?: ExcalidrawElement["customData"];
    /** @deprecated */
    boundElementIds?: readonly ExcalidrawElement["id"][];
@@ -160,9 +159,6 @@ const restoreElementWithProperties = <
    locked: element.locked ?? false,
  };

-  if ("subtype" in element && isValidSubtype(element.subtype, base.type)) {
-    base.subtype = element.subtype;
-  }
  if ("customData" in element) {
    base.customData = element.customData;
  }
@@ -208,7 +204,11 @@ const restoreElement = (
          : // no element height likely means programmatic use, so default
            // to a fixed line height
            getDefaultLineHeight(element.fontFamily));
-      const baseline = measureTextElement(element, { text }).baseline;
+      const baseline = measureBaseline(
+        element.text,
+        getFontString(element),
+        lineHeight,
+      );
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
@@ -529,12 +529,6 @@ export const restoreAppState = (
        : defaultValue;
  }

-  if ("activeSubtypes" in appState) {
-    nextAppState.activeSubtypes = appState.activeSubtypes;
-  }
-  if ("customData" in appState) {
-    nextAppState.customData = appState.customData;
-  }
  return {
    ...nextAppState,
    cursorButton: localAppState?.cursorButton || "up",
@@ -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,6 +674,19 @@ 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,
@@ -6,23 +6,22 @@ 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[],
-  pointerX: number,
-  pointerY: number,
-  lockDirection: boolean = false,
-  distanceX: number = 0,
-  distanceY: number = 0,
+  offset: { x: number; y: number },
  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
@@ -44,12 +43,11 @@ 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)
@@ -69,12 +67,11 @@ export const dragSelectedElements = (
        (!textElement.frameId || !frames.includes(textElement.frameId))
      ) {
        updateElementCoords(
-          lockDirection,
-          distanceX,
-          distanceY,
          pointerDownState,
          textElement,
          offset,
+          snapOffset,
+          gridSize,
        );
      }
    }
@@ -85,31 +82,40 @@ export const dragSelectedElements = (
 };

 const updateElementCoords = (
-  lockDirection: boolean,
-  distanceX: number,
-  distanceY: number,
  pointerDownState: PointerDownState,
  element: NonDeletedExcalidrawElement,
-  offset: { x: number; y: number },
+  dragOffset: { x: number; y: number },
+  snapOffset: { x: number; y: number },
+  gridSize: AppState["gridSize"],
 ) => {
-  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;
+  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;
+    }
  }

  mutateElement(element, {
-    x,
-    y,
+    x: nextX,
+    y: nextY,
  });
 };
+
 export const getDragOffsetXY = (
  selectedElements: NonDeletedExcalidrawElement[],
  x: number,
@@ -133,6 +139,10 @@ 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) {
@@ -173,8 +183,8 @@ export const dragNewElement = (

  if (width !== 0 && height !== 0) {
    mutateElement(draggingElement, {
-      x: newX,
-      y: newY,
+      x: newX + (originOffset?.x ?? 0),
+      y: newY + (originOffset?.y ?? 0),
      width,
      height,
    });
@@ -6,23 +6,12 @@ import { Point } from "../types";
 import { getUpdatedTimestamp } from "../utils";
 import { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
-import { maybeGetSubtypeProps } from "./newElement";
-import { getSubtypeMethods } from "./subtypes";

 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
  Partial<TElement>,
  "id" | "version" | "versionNonce"
 >;

-const cleanUpdates = <TElement extends Mutable<ExcalidrawElement>>(
-  element: TElement,
-  updates: ElementUpdate<TElement>,
-): ElementUpdate<TElement> => {
-  const subtype = maybeGetSubtypeProps(element, element.type).subtype;
-  const map = getSubtypeMethods(subtype);
-  return map?.clean ? (map.clean(updates) as typeof updates) : updates;
-};
-
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same drawing. Note: this will trigger the component to update. Make sure you
@@ -33,8 +22,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
  informMutation = true,
 ): TElement => {
  let didChange = false;
-  let increment = false;
-  const oldUpdates = cleanUpdates(element, updates);

  // casting to any because can't use `in` operator
  // (see https://github.com/microsoft/TypeScript/issues/21732)
@@ -83,7 +70,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
            }
          }
          if (!didChangePoints) {
-            key in oldUpdates && (increment = true);
            continue;
          }
        }
@@ -91,7 +77,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(

      (element as any)[key] = value;
      didChange = true;
-      key in oldUpdates && (increment = true);
    }
  }
  if (!didChange) {
@@ -107,11 +92,9 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
    ShapeCache.delete(element);
  }

-  if (increment) {
-    element.version++;
-    element.versionNonce = randomInteger();
-    element.updated = getUpdatedTimestamp();
-  }
+  element.version++;
+  element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();

  if (informMutation) {
    Scene.getScene(element)?.informMutation();
@@ -125,8 +108,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
  updates: ElementUpdate<TElement>,
 ): TElement => {
  let didChange = false;
-  let increment = false;
-  const oldUpdates = cleanUpdates(element, updates);
  for (const key in updates) {
    const value = (updates as any)[key];
    if (typeof value !== "undefined") {
@@ -138,7 +119,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
        continue;
      }
      didChange = true;
-      key in oldUpdates && (increment = true);
    }
  }

@@ -146,9 +126,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
    return element;
  }

-  if (!increment) {
-    return { ...element, ...updates };
-  }
  return {
    ...element,
    ...updates,
@@ -15,7 +15,12 @@ import {
  ExcalidrawFrameElement,
  ExcalidrawEmbeddableElement,
 } from "../element/types";
-import { arrayToMap, getUpdatedTimestamp, isTestEnv } from "../utils";
+import {
+  arrayToMap,
+  getFontString,
+  getUpdatedTimestamp,
+  isTestEnv,
+} from "../utils";
 import { randomInteger, randomId } from "../random";
 import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -25,9 +30,9 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
  getContainerElement,
-  measureTextElement,
+  measureText,
  normalizeText,
-  wrapTextElement,
+  wrapText,
  getBoundTextMaxWidth,
  getDefaultLineHeight,
 } from "./textElement";
@@ -40,30 +45,6 @@ import {
  VERTICAL_ALIGN,
 } from "../constants";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
-import { getSubtypeMethods, isValidSubtype } from "./subtypes";
-
-export const maybeGetSubtypeProps = (
-  obj: {
-    subtype?: ExcalidrawElement["subtype"];
-    customData?: ExcalidrawElement["customData"];
-  },
-  type: ExcalidrawElement["type"],
-) => {
-  const data: typeof obj = {};
-  if ("subtype" in obj) {
-    data.subtype = obj.subtype;
-  }
-  if ("customData" in obj) {
-    data.customData = obj.customData;
-  }
-  if ("subtype" in data && !isValidSubtype(data.subtype, type)) {
-    delete data.subtype;
-  }
-  if (!("subtype" in data) && "customData" in data) {
-    delete data.customData;
-  }
-  return data as typeof obj;
-};

 export type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -77,8 +58,6 @@ export type ElementConstructorOpts = MarkOptional<
  | "version"
  | "versionNonce"
  | "link"
-  | "subtype"
-  | "customData"
  | "strokeStyle"
  | "fillStyle"
  | "strokeColor"
@@ -114,10 +93,8 @@ const _newElementBase = <T extends ExcalidrawElement>(
    ...rest
  }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
-  const { subtype, customData } = rest;
  // assign type to guard against excess properties
  const element: Merge<ExcalidrawGenericElement, { type: T["type"] }> = {
-    ...maybeGetSubtypeProps({ subtype, customData }, type),
    id: rest.id || randomId(),
    type,
    x,
@@ -151,11 +128,8 @@ export const newElement = (
  opts: {
    type: ExcalidrawGenericElement["type"];
  } & ElementConstructorOpts,
-): NonDeleted<ExcalidrawGenericElement> => {
-  const map = getSubtypeMethods(opts?.subtype);
-  map?.clean && map.clean(opts);
-  return _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
-};
+): NonDeleted<ExcalidrawGenericElement> =>
+  _newElementBase<ExcalidrawGenericElement>(opts.type, opts);

 export const newEmbeddableElement = (
  opts: {
@@ -222,12 +196,10 @@ export const newTextElement = (
  const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
  const text = normalizeText(opts.text);
-  const metrics = measureTextElement(
-    { ...opts, fontSize, fontFamily, lineHeight },
-    {
-      text,
-      customData: opts.customData,
-    },
+  const metrics = measureText(
+    text,
+    getFontString({ fontFamily, fontSize }),
+    lineHeight,
  );
  const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
  const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
@@ -272,9 +244,7 @@ const getAdjustedDimensions = (
    width: nextWidth,
    height: nextHeight,
    baseline: nextBaseline,
-  } = measureTextElement(element, {
-    text: nextText,
-  });
+  } = measureText(nextText, getFontString(element), element.lineHeight);
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@@ -283,7 +253,11 @@ const getAdjustedDimensions = (
    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
    !element.containerId
  ) {
-    const prevMetrics = measureTextElement(element);
+    const prevMetrics = measureText(
+      element.text,
+      getFontString(element),
+      element.lineHeight,
+    );
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
      height: nextHeight - prevMetrics.height,
@@ -339,9 +313,11 @@ export const refreshTextDimensions = (
  }
  const container = getContainerElement(textElement);
  if (container) {
-    text = wrapTextElement(textElement, getBoundTextMaxWidth(container), {
+    text = wrapText(
      text,
-    });
+      getFontString(textElement),
+      getBoundTextMaxWidth(container),
+    );
  }
  const dimensions = getAdjustedDimensions(textElement, text);
  return { text, ...dimensions };
@@ -373,8 +349,6 @@ export const newFreeDrawElement = (
    simulatePressure: boolean;
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
-  const map = getSubtypeMethods(opts?.subtype);
-  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawFreeDrawElement>(opts.type, opts),
    points: opts.points || [],
@@ -392,8 +366,6 @@ export const newLinearElement = (
    points?: ExcalidrawLinearElement["points"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
-  const map = getSubtypeMethods(opts?.subtype);
-  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
    points: opts.points || [],
@@ -413,8 +385,6 @@ export const newImageElement = (
    scale?: ExcalidrawImageElement["scale"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawImageElement> => {
-  const map = getSubtypeMethods(opts?.subtype);
-  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawImageElement>("image", opts),
    // in the future we'll support changing stroke color for some SVG elements,
@@ -41,7 +41,7 @@ import {
  MaybeTransformHandleType,
  TransformHandleDirection,
 } from "./transformHandles";
-import { Point, PointerDownState } from "../types";
+import { AppState, Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
  getApproxMinLineWidth,
@@ -51,7 +51,7 @@ import {
  handleBindTextResize,
  getBoundTextMaxWidth,
  getApproxMinLineHeight,
-  measureTextElement,
+  measureText,
  getBoundTextMaxHeight,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -79,6 +79,7 @@ export const transformElements = (
  pointerY: number,
  centerX: number,
  centerY: number,
+  appState: AppState,
 ) => {
  if (selectedElements.length === 1) {
    const [element] = selectedElements;
@@ -223,7 +224,11 @@ const measureFontSizeFromWidth = (
  if (nextFontSize < MIN_FONT_SIZE) {
    return null;
  }
-  const metrics = measureTextElement(element, { fontSize: nextFontSize });
+  const metrics = measureText(
+    element.text,
+    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
+    element.lineHeight,
+  );
  return {
    size: nextFontSize,
    baseline: metrics.baseline + (nextHeight - metrics.height),
@@ -462,8 +467,8 @@ export const resizeSingleElement = (
        boundTextElement.fontSize,
        boundTextElement.lineHeight,
      );
-      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
-      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
+      eleNewWidth = Math.max(eleNewWidth, minWidth);
+      eleNewHeight = Math.max(eleNewHeight, minHeight);
    }
  }

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

+  const flipX = eleNewWidth < 0;
+  const flipY = eleNewHeight < 0;
+
  // Flip horizontally
-  if (eleNewWidth < 0) {
+  if (flipX) {
    if (transformHandleDirection.includes("e")) {
      newTopLeft[0] -= Math.abs(newBoundsWidth);
    }
@@ -513,8 +521,9 @@ export const resizeSingleElement = (
      newTopLeft[0] += Math.abs(newBoundsWidth);
    }
  }
+
  // Flip vertically
-  if (eleNewHeight < 0) {
+  if (flipY) {
    if (transformHandleDirection.includes("s")) {
      newTopLeft[1] -= Math.abs(newBoundsHeight);
    }
@@ -538,10 +547,20 @@ 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,
@@ -558,16 +577,11 @@ 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: newOrigin[0],
-    y: newOrigin[1],
+    x: nextX,
+    y: nextY,
    points: rescaledPoints,
  };

@@ -676,6 +690,10 @@ 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> = {
@@ -12,6 +12,7 @@ export const showSelectedShapeActions = (
        (appState.editingElement ||
          (appState.activeTool.type !== "selection" &&
            appState.activeTool.type !== "eraser" &&
-            appState.activeTool.type !== "hand"))) ||
+            appState.activeTool.type !== "hand" &&
+            appState.activeTool.type !== "laser"))) ||
        getSelectedElements(elements, appState).length),
  );
@@ -1,490 +0,0 @@
-import { useEffect } from "react";
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types";
-import { getNonDeletedElements } from "../";
-import { getSelectedElements } from "../../scene";
-import { AppState, ExcalidrawImperativeAPI } from "../../types";
-import { registerAuxLangData } from "../../i18n";
-
-import { Action, ActionName, ActionPredicateFn } from "../../actions/types";
-import {
-  CustomShortcutName,
-  registerCustomShortcuts,
-} from "../../actions/shortcuts";
-import { register } from "../../actions/register";
-import { hasBoundTextElement, isTextElement } from "../typeChecks";
-import {
-  getBoundTextElement,
-  getContainerElement,
-  redrawTextBoundingBox,
-} from "../textElement";
-import { ShapeCache } from "../../scene/ShapeCache";
-import Scene from "../../scene/Scene";
-
-// Use "let" instead of "const" so we can dynamically add subtypes
-let subtypeNames: readonly Subtype[] = [];
-let parentTypeMap: readonly {
-  subtype: Subtype;
-  parentType: ExcalidrawElement["type"];
-}[] = [];
-let subtypeActionMap: readonly {
-  subtype: Subtype;
-  actions: readonly SubtypeActionName[];
-}[] = [];
-let disabledActionMap: readonly {
-  subtype: Subtype;
-  actions: readonly DisabledActionName[];
-}[] = [];
-let alwaysEnabledMap: readonly {
-  subtype: Subtype;
-  actions: readonly SubtypeActionName[];
-}[] = [];
-
-export type SubtypeRecord = Readonly<{
-  subtype: Subtype;
-  parents: readonly ExcalidrawElement["type"][];
-  actionNames?: readonly SubtypeActionName[];
-  disabledNames?: readonly DisabledActionName[];
-  shortcutMap?: Record<CustomShortcutName, string[]>;
-  alwaysEnabledNames?: readonly SubtypeActionName[];
-}>;
-
-// Subtype Names
-export type Subtype = Required<ExcalidrawElement>["subtype"];
-export const getSubtypeNames = (): readonly Subtype[] => {
-  return subtypeNames;
-};
-export const isValidSubtype = (s: any, t: any): s is Subtype =>
-  parentTypeMap.find(
-    (val) => (val.subtype as any) === s && (val.parentType as any) === t,
-  ) !== undefined;
-const isSubtypeName = (s: any): s is Subtype => subtypeNames.includes(s);
-
-// Subtype Actions
-
-// Used for context menus in the shape chooser
-export const hasAlwaysEnabledActions = (s: any): boolean => {
-  if (!isSubtypeName(s)) {
-    return false;
-  }
-  return alwaysEnabledMap.some((value) => value.subtype === s);
-};
-
-type SubtypeActionName = string;
-
-const isSubtypeActionName = (s: any): s is SubtypeActionName =>
-  subtypeActionMap.some((val) => val.actions.includes(s));
-
-const addSubtypeAction = (action: Action) => {
-  if (isSubtypeActionName(action.name) || isSubtypeName(action.name)) {
-    register(action);
-  }
-};
-
-// Standard actions disabled by subtypes
-type DisabledActionName = ActionName;
-
-const isDisabledActionName = (s: any): s is DisabledActionName =>
-  disabledActionMap.some((val) => val.actions.includes(s));
-
-// Is the `actionName` one of the subtype actions for `subtype`
-// (if `isAdded` is true) or one of the standard actions disabled
-// by `subtype` (if `isAdded` is false)?
-const isForSubtype = (
-  subtype: ExcalidrawElement["subtype"],
-  actionName: ActionName | SubtypeActionName,
-  isAdded: boolean,
-) => {
-  const actions = isAdded ? subtypeActionMap : disabledActionMap;
-  const map = actions.find((value) => value.subtype === subtype);
-  if (map) {
-    return map.actions.includes(actionName);
-  }
-  return false;
-};
-
-export const isSubtypeAction: ActionPredicateFn = function (action) {
-  return isSubtypeActionName(action.name) && !isSubtypeName(action.name);
-};
-
-export const subtypeActionPredicate: ActionPredicateFn = function (
-  action,
-  elements,
-  appState,
-) {
-  // We always enable subtype actions.  Also let through standard actions
-  // which no subtypes might have disabled.
-  if (
-    isSubtypeName(action.name) ||
-    (!isSubtypeActionName(action.name) && !isDisabledActionName(action.name))
-  ) {
-    return true;
-  }
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-  const chosen = appState.editingElement
-    ? [appState.editingElement, ...selectedElements]
-    : selectedElements;
-  // Now handle actions added by subtypes
-  if (isSubtypeActionName(action.name)) {
-    // Has any ExcalidrawElement enabled this actionName through having
-    // its subtype?
-    return (
-      chosen.some((el) => {
-        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
-        return isForSubtype(e.subtype, action.name, true);
-      }) ||
-      // Or has any active subtype enabled this actionName?
-      (appState.activeSubtypes !== undefined &&
-        appState.activeSubtypes?.some((subtype) => {
-          if (!isValidSubtype(subtype, appState.activeTool.type)) {
-            return false;
-          }
-          return isForSubtype(subtype, action.name, true);
-        })) ||
-      alwaysEnabledMap.some((value) => {
-        return value.actions.includes(action.name);
-      })
-    );
-  }
-  // Now handle standard actions disabled by subtypes
-  if (isDisabledActionName(action.name)) {
-    return (
-      // Has every ExcalidrawElement not disabled this actionName?
-      (chosen.every((el) => {
-        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
-        return !isForSubtype(e.subtype, action.name, false);
-      }) &&
-        // And has every active subtype not disabled this actionName?
-        (appState.activeSubtypes === undefined ||
-          appState.activeSubtypes?.every((subtype) => {
-            if (!isValidSubtype(subtype, appState.activeTool.type)) {
-              return true;
-            }
-            return !isForSubtype(subtype, action.name, false);
-          }))) ||
-      // Or can we find an ExcalidrawElement without a valid subtype
-      // which would disable this action if it had a valid subtype?
-      chosen.some((el) => {
-        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
-        return parentTypeMap.some(
-          (value) =>
-            value.parentType === e.type &&
-            !isValidSubtype(e.subtype, e.type) &&
-            isForSubtype(value.subtype, action.name, false),
-        );
-      }) ||
-      chosen.some((el) => {
-        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
-        return (
-          // Would the subtype of e by inself disable this action?
-          isForSubtype(e.subtype, action.name, false) &&
-          // Can we find an ExcalidrawElement which could have the same subtype
-          // as e but whose subtype does not disable this action?
-          chosen.some((el) => {
-            const e2 = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
-            return (
-              // Does e have a valid subtype whose parent types include the
-              // type of e2, and does the subtype of e2 not disable this action?
-              parentTypeMap
-                .filter((val) => val.subtype === e.subtype)
-                .some((val) => val.parentType === e2.type) &&
-              !isForSubtype(e2.subtype, action.name, false)
-            );
-          })
-        );
-      })
-    );
-  }
-  // Shouldn't happen
-  return true;
-};
-
-// Are any of the parent types of `subtype` shared by any subtype
-// in the array?
-export const subtypeCollides = (subtype: Subtype, subtypeArray: Subtype[]) => {
-  const subtypeParents = parentTypeMap
-    .filter((value) => value.subtype === subtype)
-    .map((value) => value.parentType);
-  const subtypeArrayParents = subtypeArray.flatMap((s) =>
-    parentTypeMap
-      .filter((value) => value.subtype === s)
-      .map((value) => value.parentType),
-  );
-  return subtypeParents.some((t) => subtypeArrayParents.includes(t));
-};
-
-// Subtype Methods
-export type SubtypeMethods = {
-  clean: (
-    updates: Omit<
-      Partial<ExcalidrawElement>,
-      "id" | "version" | "versionNonce"
-    >,
-  ) => Omit<Partial<ExcalidrawElement>, "id" | "version" | "versionNonce">;
-  getEditorStyle: (element: ExcalidrawTextElement) => Record<string, any>;
-  ensureLoaded: (callback?: () => void) => Promise<void>;
-  measureText: (
-    element: Pick<
-      ExcalidrawTextElement,
-      | "subtype"
-      | "customData"
-      | "fontSize"
-      | "fontFamily"
-      | "text"
-      | "lineHeight"
-    >,
-    next?: {
-      fontSize?: number;
-      text?: string;
-      customData?: ExcalidrawElement["customData"];
-    },
-  ) => { width: number; height: number; baseline: number };
-  render: (
-    element: NonDeleted<ExcalidrawElement>,
-    context: CanvasRenderingContext2D,
-  ) => void;
-  renderSvg: (
-    svgRoot: SVGElement,
-    root: SVGElement,
-    element: NonDeleted<ExcalidrawElement>,
-    opt?: { offsetX?: number; offsetY?: number },
-  ) => void;
-  wrapText: (
-    element: Pick<
-      ExcalidrawTextElement,
-      | "subtype"
-      | "customData"
-      | "fontSize"
-      | "fontFamily"
-      | "originalText"
-      | "lineHeight"
-    >,
-    containerWidth: number,
-    next?: {
-      fontSize?: number;
-      text?: string;
-      customData?: ExcalidrawElement["customData"];
-    },
-  ) => string;
-};
-
-type MethodMap = { subtype: Subtype; methods: Partial<SubtypeMethods> };
-const methodMaps = [] as Array<MethodMap>;
-
-// Use `getSubtypeMethods` to call subtype-specialized methods, like `render`.
-export const getSubtypeMethods = (
-  subtype: Subtype | undefined,
-): Partial<SubtypeMethods> | undefined => {
-  const map = methodMaps.find((method) => method.subtype === subtype);
-  return map?.methods;
-};
-
-export const addSubtypeMethods = (
-  subtype: Subtype,
-  methods: Partial<SubtypeMethods>,
-) => {
-  if (!methodMaps.find((method) => method.subtype === subtype)) {
-    methodMaps.push({ subtype, methods });
-  }
-};
-
-// For a given `ExcalidrawElement` type, return the active subtype
-// and associated customData (if any) from the AppState.  Assume
-// only one subtype is active for a given `ExcalidrawElement` type
-// at any given time.
-export const selectSubtype = (
-  appState: {
-    activeSubtypes?: AppState["activeSubtypes"];
-    customData?: AppState["customData"];
-  },
-  type: ExcalidrawElement["type"],
-): {
-  subtype?: ExcalidrawElement["subtype"];
-  customData?: ExcalidrawElement["customData"];
-} => {
-  if (appState.activeSubtypes === undefined) {
-    return {};
-  }
-  const subtype = appState.activeSubtypes.find((subtype) =>
-    isValidSubtype(subtype, type),
-  );
-  if (subtype === undefined) {
-    return {};
-  }
-  if (appState.customData === undefined || !(subtype in appState.customData)) {
-    return { subtype };
-  }
-  const customData = appState.customData[subtype];
-  return { subtype, customData };
-};
-
-// Callback to re-render subtyped `ExcalidrawElement`s after completing
-// async loading of the subtype.
-export type SubtypeLoadedCb = (hasSubtype: SubtypeCheckFn) => void;
-export type SubtypeCheckFn = (element: ExcalidrawElement) => boolean;
-
-// Functions to prepare subtypes for use
-export type SubtypePrepFn = (
-  addSubtypeAction: (action: Action) => void,
-  addLangData: (
-    fallbackLangData: Object,
-    setLanguageAux: (langCode: string) => Promise<Object | undefined>,
-  ) => void,
-  onSubtypeLoaded?: SubtypeLoadedCb,
-) => {
-  actions: Action[];
-  methods: Partial<SubtypeMethods>;
-};
-
-// This is the main method to set up the subtype.  The optional
-// `onSubtypeLoaded` callback may be used to re-render subtyped
-// `ExcalidrawElement`s after the subtype has finished async loading.
-// See the MathJax extension in `@excalidraw/extensions` for example.
-export const prepareSubtype = (
-  record: SubtypeRecord,
-  subtypePrepFn: SubtypePrepFn,
-  onSubtypeLoaded?: SubtypeLoadedCb,
-): { actions: Action[] | null; methods: Partial<SubtypeMethods> } => {
-  const map = getSubtypeMethods(record.subtype);
-  if (map) {
-    return { actions: null, methods: map };
-  }
-
-  // Check for undefined/null subtypes and parentTypes
-  if (
-    record.subtype === undefined ||
-    record.subtype === "" ||
-    record.parents === undefined ||
-    record.parents.length === 0
-  ) {
-    return { actions: null, methods: {} };
-  }
-
-  // Register the types
-  const subtype = record.subtype;
-  subtypeNames = [...subtypeNames, subtype];
-  record.parents.forEach((parentType) => {
-    parentTypeMap = [...parentTypeMap, { subtype, parentType }];
-  });
-  if (record.actionNames) {
-    subtypeActionMap = [
-      ...subtypeActionMap,
-      { subtype, actions: record.actionNames },
-    ];
-  }
-  if (record.disabledNames) {
-    disabledActionMap = [
-      ...disabledActionMap,
-      { subtype, actions: record.disabledNames },
-    ];
-  }
-  if (record.alwaysEnabledNames) {
-    alwaysEnabledMap = [
-      ...alwaysEnabledMap,
-      { subtype, actions: record.alwaysEnabledNames },
-    ];
-  }
-  if (record.shortcutMap) {
-    registerCustomShortcuts(record.shortcutMap);
-  }
-
-  // Prepare the subtype
-  const { actions, methods } = subtypePrepFn(
-    addSubtypeAction,
-    registerAuxLangData,
-    onSubtypeLoaded,
-  );
-
-  // Register the subtype's methods
-  addSubtypeMethods(record.subtype, methods);
-  return { actions, methods };
-};
-
-// Ensure all subtypes are loaded before continuing, eg to
-// render SVG previews of new charts.  Chart-relevant subtypes
-// include math equations in titles or non hand-drawn line styles.
-export const ensureSubtypesLoadedForElements = async (
-  elements: readonly ExcalidrawElement[],
-  callback?: () => void,
-) => {
-  // Only ensure the loading of subtypes which are actually needed.
-  // We don't want to be held up by eg downloading the MathJax SVG fonts
-  // if we don't actually need them yet.
-  const subtypesUsed = [] as Subtype[];
-  elements.forEach((el) => {
-    if (
-      "subtype" in el &&
-      isValidSubtype(el.subtype, el.type) &&
-      !subtypesUsed.includes(el.subtype)
-    ) {
-      subtypesUsed.push(el.subtype);
-    }
-  });
-  await ensureSubtypesLoaded(subtypesUsed, callback);
-};
-
-export const ensureSubtypesLoaded = async (
-  subtypes: Subtype[],
-  callback?: () => void,
-) => {
-  // Use a for loop so we can do `await map.ensureLoaded()`
-  for (let i = 0; i < subtypes.length; i++) {
-    const subtype = subtypes[i];
-    // Should be defined if prepareSubtype() has run
-    const map = getSubtypeMethods(subtype);
-    if (map?.ensureLoaded) {
-      await map.ensureLoaded();
-    }
-  }
-  if (callback) {
-    callback();
-  }
-};
-
-// Call this method after finishing any async loading for
-// subtypes of ExcalidrawElement if the newly loaded code
-// would change the rendering.
-export const checkRefreshOnSubtypeLoad = (
-  hasSubtype: SubtypeCheckFn,
-  elements: readonly ExcalidrawElement[],
-) => {
-  let refreshNeeded = false;
-  const scenes: Scene[] = [];
-  getNonDeletedElements(elements).forEach((element) => {
-    // If the element is of the subtype that was just
-    // registered, update the element's dimensions, mark the
-    // element for a re-render, and indicate the scene needs a refresh.
-    if (hasSubtype(element)) {
-      ShapeCache.delete(element);
-      if (isTextElement(element)) {
-        redrawTextBoundingBox(element, getContainerElement(element));
-      }
-      refreshNeeded = true;
-      const scene = Scene.getScene(element);
-      if (scene && !scenes.includes(scene)) {
-        // Store in case we have multiple scenes
-        scenes.push(scene);
-      }
-    }
-  });
-  // Only inform each scene once
-  scenes.forEach((scene) => scene.informMutation());
-  return refreshNeeded;
-};
-
-export const useSubtype = (
-  api: ExcalidrawImperativeAPI | null,
-  record: SubtypeRecord,
-  subtypePrepFn: SubtypePrepFn,
-) => {
-  useEffect(() => {
-    if (api) {
-      const prep = api.addSubtype(record, subtypePrepFn);
-      if (prep) {
-        addSubtypeMethods(record.subtype, prep.methods);
-      }
-    }
-  }, [api, record, subtypePrepFn]);
-};
@@ -1,13 +0,0 @@
-import { Theme } from "../../../element/types";
-import { createIcon, iconFillColor } from "../../../components/icons";
-
-// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
-export const mathSubtypeIcon = ({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      fill={iconFillColor(theme)}
-      // fa-square-root-variable-solid
-      d="M289 24.2C292.5 10 305.3 0 320 0H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H345L239 487.8c-3.2 13-14.2 22.6-27.6 24s-26.1-5.5-32.1-17.5L76.2 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c12.1 0 23.2 6.8 28.6 17.7l73.3 146.6L289 24.2zM393.4 233.4c12.5-12.5 32.8-12.5 45.3 0L480 274.7l41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L525.3 320l41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L480 365.3l-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L434.7 320l-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3z"
-    />,
-    { width: 576, height: 512, mirror: true, strokeWidth: 1.25 },
-  );
@@ -1,15 +0,0 @@
-import { ExcalidrawImperativeAPI } from "../../../types";
-import { useSubtype } from "../";
-import { getMathSubtypeRecord } from "./types";
-import { prepareMathSubtype } from "./implementation";
-
-declare global {
-  module SREfeature {
-    function custom(locale: string): Promise<string>;
-  }
-}
-
-// The main hook to use the MathJax subtype
-export const useMathSubtype = (api: ExcalidrawImperativeAPI | null) => {
-  useSubtype(api, getMathSubtypeRecord(), prepareMathSubtype);
-};
@@ -1,15 +0,0 @@
-{
-  "labels": {
-    "changeMathOnly": "Math display",
-    "mathOnlyTrue": "Math only",
-    "mathOnlyFalse": "Mixed text",
-    "resetUseTex": "Reset math input type",
-    "useTexTrueActive": "✔ Standard input",
-    "useTexTrueInactive": "Standard input",
-    "useTexFalseActive": "✔ Simplified input",
-    "useTexFalseInactive": "Simplified input"
-  },
-  "toolBar": {
-    "math": "Math"
-  }
-}
@@ -1,77 +0,0 @@
-import { vi } from "vitest";
-import { render } from "../../../../tests/test-utils";
-import { API } from "../../../../tests/helpers/api";
-import { Excalidraw } from "../../../../packages/excalidraw/index";
-
-import { measureTextElement } from "../../../textElement";
-import { ensureSubtypesLoaded } from "../../";
-import { getMathSubtypeRecord } from "../types";
-import { prepareMathSubtype } from "../implementation";
-
-describe("mathjax loaded", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-    API.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
-    await ensureSubtypesLoaded(["math"]);
-  });
-  it("text-only measurements match", async () => {
-    const text = "A quick brown fox jumps over the lazy dog.";
-    const elements = [
-      API.createElement({ type: "text", id: "A", text, subtype: "math" }),
-      API.createElement({ type: "text", id: "B", text }),
-    ];
-    const metrics1 = measureTextElement(elements[0]);
-    const metrics2 = measureTextElement(elements[1]);
-    expect(metrics1).toStrictEqual(metrics2);
-  });
-  it("minimum height remains", async () => {
-    const elements = [
-      API.createElement({ type: "text", id: "A", text: "a" }),
-      API.createElement({
-        type: "text",
-        id: "B",
-        text: "\\(\\alpha\\)",
-        subtype: "math",
-        customData: { useTex: true },
-      }),
-      API.createElement({
-        type: "text",
-        id: "C",
-        text: "`beta`",
-        subtype: "math",
-        customData: { useTex: false },
-      }),
-    ];
-    const height = measureTextElement(elements[0]).height;
-    const height1 = measureTextElement(elements[1]).height;
-    const height2 = measureTextElement(elements[2]).height;
-    expect(height).toEqual(height1);
-    expect(height).toEqual(height2);
-  });
-  it("converts math to svgs", async () => {
-    const svgDim = 42;
-    vi.spyOn(SVGElement.prototype, "getBoundingClientRect").mockImplementation(
-      () => new DOMRect(0, 0, svgDim, svgDim),
-    );
-    const elements = [];
-    const type = "text";
-    const subtype = "math";
-    let text = "Math ";
-    elements.push(API.createElement({ type, text }));
-    text = "Math \\(\\alpha\\)";
-    elements.push(
-      API.createElement({ type, subtype, text, customData: { useTex: true } }),
-    );
-    text = "Math `beta`";
-    elements.push(
-      API.createElement({ type, subtype, text, customData: { useTex: false } }),
-    );
-    const metrics = {
-      width: measureTextElement(elements[0]).width + svgDim,
-      height: svgDim,
-      baseline: 0,
-    };
-    expect(measureTextElement(elements[1])).toStrictEqual(metrics);
-    expect(measureTextElement(elements[2])).toStrictEqual(metrics);
-  });
-});
@@ -1,17 +0,0 @@
-import { getShortcutKey } from "../../../utils";
-import { SubtypeRecord } from "../";
-
-// Exports
-export const getMathSubtypeRecord = () => mathSubtype;
-
-// Use `getMathSubtype` so we don't have to export this
-const mathSubtype: SubtypeRecord = {
-  subtype: "math",
-  parents: ["text"],
-  actionNames: ["useTexTrue", "useTexFalse", "resetUseTex", "changeMathOnly"],
-  disabledNames: ["changeFontFamily"],
-  shortcutMap: {
-    resetUseTex: [getShortcutKey("Shift+R")],
-  },
-  alwaysEnabledNames: ["useTexTrue", "useTexFalse"],
-};
@@ -1,4 +1,3 @@
-import { getSubtypeMethods, SubtypeMethods } from "./subtypes";
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
  ExcalidrawElement,
@@ -37,30 +36,6 @@ import {
 } from "./textWysiwyg";
 import { ExtractSetType } from "../utility-types";

-export const measureTextElement = function (element, next) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.measureText) {
-    return map.measureText(element, next);
-  }
-
-  const fontSize = next?.fontSize ?? element.fontSize;
-  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
-  const text = next?.text ?? element.text;
-  return measureText(text, font, element.lineHeight);
-} as SubtypeMethods["measureText"];
-
-export const wrapTextElement = function (element, containerWidth, next) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.wrapText) {
-    return map.wrapText(element, containerWidth, next);
-  }
-
-  const fontSize = next?.fontSize ?? element.fontSize;
-  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
-  const text = next?.text ?? element.originalText;
-  return wrapText(text, font, containerWidth);
-} as SubtypeMethods["wrapText"];
-
 export const normalizeText = (text: string) => {
  return (
    text
@@ -93,24 +68,22 @@ export const redrawTextBoundingBox = (

  if (container) {
    maxWidth = getBoundTextMaxWidth(container, textElement);
-    boundTextUpdates.text = wrapTextElement(textElement, maxWidth);
+    boundTextUpdates.text = wrapText(
+      textElement.originalText,
+      getFontString(textElement),
+      maxWidth,
+    );
  }
-  const metrics = measureTextElement(textElement, {
-    text: boundTextUpdates.text,
-  });
+  const metrics = measureText(
+    boundTextUpdates.text,
+    getFontString(textElement),
+    textElement.lineHeight,
+  );

  boundTextUpdates.width = metrics.width;
  boundTextUpdates.height = metrics.height;
  boundTextUpdates.baseline = metrics.baseline;

-  // Maintain coordX for non left-aligned text in case the width has changed
-  if (!container) {
-    if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
-      boundTextUpdates.x += textElement.width - metrics.width;
-    } else if (textElement.textAlign === TEXT_ALIGN.CENTER) {
-      boundTextUpdates.x += textElement.width / 2 - metrics.width / 2;
-    }
-  }
  if (container) {
    const maxContainerHeight = getBoundTextMaxHeight(
      container,
@@ -223,9 +196,17 @@ export const handleBindTextResize = (
      (transformHandleType !== "n" && transformHandleType !== "s")
    ) {
      if (text) {
-        text = wrapTextElement(textElement, maxWidth);
+        text = wrapText(
+          textElement.originalText,
+          getFontString(textElement),
+          maxWidth,
+        );
      }
-      const metrics = measureTextElement(textElement, { text });
+      const metrics = measureText(
+        text,
+        getFontString(textElement),
+        textElement.lineHeight,
+      );
      nextHeight = metrics.height;
      nextWidth = metrics.width;
      nextBaseLine = metrics.baseline;
@@ -957,7 +957,7 @@ describe("textWysiwyg", () => {
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          85,
-          4.5,
+          4.999999999999986,
        ]
      `);

@@ -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(`
        [
-          375,
-          -539,
+          374.99999999999994,
+          -535.0000000000001,
        ]
      `);
    });
@@ -1190,7 +1190,7 @@ describe("textWysiwyg", () => {
      editor.blur();

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

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

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

    it("should reset the container height cache when font properties updated", async () => {
@@ -26,7 +26,6 @@ import {
  getContainerElement,
  getTextElementAngle,
  getTextWidth,
-  measureText,
  normalizeText,
  redrawTextBoundingBox,
  wrapText,
@@ -44,10 +43,8 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
-import { SubtypeMethods, getSubtypeMethods } from "./subtypes";

 const getTransform = (
-  offsetX: number,
  width: number,
  height: number,
  angle: number,
@@ -65,8 +62,7 @@ const getTransform = (
  if (height > maxHeight && zoom.value !== 1) {
    translateY = (maxHeight * (zoom.value - 1)) / 2;
  }
-  const offset = offsetX !== 0 ? ` translate(${offsetX}px, 0px)` : "";
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)${offset}`;
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };

 const originalContainerCache: {
@@ -101,14 +97,6 @@ export const getOriginalContainerHeightFromCache = (
  return originalContainerCache[id]?.height ?? null;
 };

-const getEditorStyle = function (element) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.getEditorStyle) {
-    return map.getEditorStyle(element);
-  }
-  return {};
-} as SubtypeMethods["getEditorStyle"];
-
 export const textWysiwyg = ({
  id,
  onChange,
@@ -168,24 +156,11 @@ export const textWysiwyg = ({
      const container = getContainerElement(updatedTextElement);
      let maxWidth = updatedTextElement.width;

-      // Editing metrics
-      const eMetrics = measureText(
-        container && updatedTextElement.containerId
-          ? wrapText(
-              updatedTextElement.originalText,
-              getFontString(updatedTextElement),
-              getBoundTextMaxWidth(container),
-            )
-          : updatedTextElement.originalText,
-        getFontString(updatedTextElement),
-        updatedTextElement.lineHeight,
-      );
-
-      let maxHeight = eMetrics.height;
-      let textElementWidth = Math.max(updatedTextElement.width, eMetrics.width);
+      let maxHeight = updatedTextElement.height;
+      let textElementWidth = updatedTextElement.width;
      // Set to element height by default since that's
      // what is going to be used for unbounded text
-      const textElementHeight = Math.max(updatedTextElement.height, maxHeight);
+      const textElementHeight = updatedTextElement.height;

      if (container && updatedTextElement.containerId) {
        if (isArrowElement(container)) {
@@ -271,35 +246,13 @@ export const textWysiwyg = ({
        editable.selectionEnd = editable.value.length - diff;
      }

-      let transformWidth = updatedTextElement.width;
      if (!container) {
        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
        textElementWidth = Math.min(textElementWidth, maxWidth);
      } else {
        textElementWidth += 0.5;
-        transformWidth += 0.5;
      }

-      // Horizontal offset in case updatedTextElement has a non-WYSIWYG subtype
-      const offWidth = container
-        ? Math.min(
-            0,
-            updatedTextElement.width - Math.min(maxWidth, eMetrics.width),
-          )
-        : Math.min(maxWidth, updatedTextElement.width) -
-          Math.min(maxWidth, eMetrics.width);
-      const offsetX =
-        textAlign === "right"
-          ? offWidth
-          : textAlign === "center"
-          ? offWidth / 2
-          : 0;
-      const { width: w, height: h } = updatedTextElement;
-      const transformOrigin =
-        updatedTextElement.width !== eMetrics.width ||
-        updatedTextElement.height !== eMetrics.height
-          ? { transformOrigin: `${w / 2}px ${h / 2}px` }
-          : {};
      let lineHeight = updatedTextElement.lineHeight;

      // In Safari the font size gets rounded off when rendering hence calculating the line height by rounding off font size
@@ -317,15 +270,13 @@ export const textWysiwyg = ({
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight,
-        width: `${Math.min(textElementWidth, maxWidth)}px`,
+        width: `${textElementWidth}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
-        ...transformOrigin,
        transform: getTransform(
-          offsetX,
-          transformWidth,
-          updatedTextElement.height,
+          textElementWidth,
+          textElementHeight,
          getTextElementAngle(updatedTextElement),
          appState,
          maxWidth,
@@ -383,7 +334,6 @@ export const textWysiwyg = ({
    whiteSpace,
    overflowWrap: "break-word",
    boxSizing: "content-box",
-    ...getEditorStyle(element),
  });
  editable.value = element.originalText;
  updateWysiwygStyle();
@@ -65,7 +65,6 @@ type _ExcalidrawElementBase = Readonly<{
  updated: number;
  link: string | null;
  locked: boolean;
-  subtype?: string;
  customData?: Record<string, any>;
 }>;

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

-      it("should add elements", async () => {
+      it.skip("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("should add elements when there are other other elements in between", async () => {
+      it.skip("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("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("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("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("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);
@@ -14,7 +14,7 @@ import {
  getBoundTextElement,
  getContainerElement,
 } from "./element/textElement";
-import { arrayToMap, findIndex } from "./utils";
+import { arrayToMap } from "./utils";
 import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
@@ -457,85 +457,87 @@ export const addElementsToFrame = (
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameElement,
 ) => {
-  const _elementsToAdd: ExcalidrawElement[] = [];
-
-  for (const element of elementsToAdd) {
-    _elementsToAdd.push(element);
-
-    const boundTextElement = getBoundTextElement(element);
-    if (boundTextElement) {
-      _elementsToAdd.push(boundTextElement);
-    }
-  }
-
-  const allElementsIndex = allElements.reduce(
-    (acc: Record<string, number>, element, index) => {
-      acc[element.id] = index;
-      return acc;
-    },
-    {},
+  const currTargetFrameChildrenMap = new Map(
+    allElements.reduce(
+      (acc: [ExcalidrawElement["id"], ExcalidrawElement][], element) => {
+        if (element.frameId === frame.id) {
+          acc.push([element.id, element]);
+        }
+        return acc;
+      },
+      [],
+    ),
  );

-  const frameIndex = allElementsIndex[frame.id];
-  // need to be calculated before the mutation below occurs
-  const leftFrameBoundaryIndex = findIndex(
-    allElements,
-    (e) => e.frameId === frame.id,
-  );
+  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));

-  const existingFrameChildren = allElements.filter(
-    (element) => element.frameId === frame.id,
-  );
-
-  const addedFrameChildren_left: ExcalidrawElement[] = [];
-  const addedFrameChildren_right: ExcalidrawElement[] = [];
+  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,
+    elementsToAdd,
  )) {
-    if (element.frameId !== frame.id && !isFrameElement(element)) {
-      if (allElementsIndex[element.id] > frameIndex) {
-        addedFrameChildren_right.push(element);
-      } else {
-        addedFrameChildren_left.push(element);
-      }
+    if (!currTargetFrameChildrenMap.has(element.id)) {
+      finalElementsToAdd.push(element);
+    }

-      mutateElement(
-        element,
-        {
-          frameId: frame.id,
-        },
-        false,
-      );
+    const boundTextElement = getBoundTextElement(element);
+    if (
+      boundTextElement &&
+      !suppliedElementsToAddSet.has(boundTextElement.id) &&
+      !currTargetFrameChildrenMap.has(boundTextElement.id)
+    ) {
+      finalElementsToAdd.push(boundTextElement);
    }
  }

-  const frameElement = allElements[frameIndex];
-  const nextFrameChildren = addedFrameChildren_left
-    .concat(existingFrameChildren)
-    .concat(addedFrameChildren_right);
+  const finalElementsToAddSet = new Set(finalElementsToAdd.map((el) => el.id));

-  const nextFrameChildrenMap = nextFrameChildren.reduce(
-    (acc: Record<string, boolean>, element) => {
-      acc[element.id] = true;
-      return acc;
-    },
-    {},
-  );
+  const nextElements: ExcalidrawElement[] = [];

-  const nextOtherElements_left = allElements
-    .slice(0, leftFrameBoundaryIndex >= 0 ? leftFrameBoundaryIndex : frameIndex)
-    .filter((element) => !nextFrameChildrenMap[element.id]);
+  const processedElements = new Set<ExcalidrawElement["id"]>();

-  const nextOtherElement_right = allElements
-    .slice(frameIndex + 1)
-    .filter((element) => !nextFrameChildrenMap[element.id]);
+  for (const element of allElements) {
+    if (processedElements.has(element.id)) {
+      continue;
+    }

-  const nextElements = nextOtherElements_left
-    .concat(nextFrameChildren)
-    .concat([frameElement])
-    .concat(nextOtherElement_right);
+    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,
+    );
+  }

  return nextElements;
 };
@@ -116,5 +116,3 @@ declare namespace jest {
    toBeNonNaNNumber(): void;
  }
 }
-
-declare module "mathjax-full/mjs/input/asciimath/legacy/MathJax";
@@ -87,22 +87,6 @@ if (import.meta.env.DEV) {
 let currentLang: Language = defaultLang;
 let currentLangData = {};

-const auxCurrentLangData = Array<Object>();
-const auxFallbackLangData = Array<Object>();
-const auxSetLanguageFuncs =
-  Array<(langCode: string) => Promise<Object | undefined>>();
-
-export const registerAuxLangData = (
-  fallbackLangData: Object,
-  setLanguageAux: (langCode: string) => Promise<Object | undefined>,
-) => {
-  if (auxFallbackLangData.includes(fallbackLangData)) {
-    return;
-  }
-  auxFallbackLangData.push(fallbackLangData);
-  auxSetLanguageFuncs.push(setLanguageAux);
-};
-
 export const setLanguage = async (lang: Language) => {
  currentLang = lang;
  document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
@@ -115,17 +99,6 @@ export const setLanguage = async (lang: Language) => {
      currentLangData = await import(
        /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
      );
-      // Empty the auxCurrentLangData array
-      while (auxCurrentLangData.length > 0) {
-        auxCurrentLangData.pop();
-      }
-      // Fill the auxCurrentLangData array with each locale file found in auxLangDataRoots for this language
-      auxSetLanguageFuncs.forEach(async (setLanguageFn) => {
-        const condData = await setLanguageFn(currentLang.code);
-        if (condData) {
-          auxCurrentLangData.push(condData);
-        }
-      });
    } catch (error: any) {
      console.error(`Failed to load language ${lang.code}:`, error.message);
      currentLangData = fallbackLangData;
@@ -152,9 +125,7 @@ const findPartsForData = (data: any, parts: string[]) => {
 };

 export const t = (
-  path:
-    | NestedKeyOf<typeof fallbackLangData>
-    | `${NestedKeyOf<typeof fallbackLangData>}.${string}`,
+  path: NestedKeyOf<typeof fallbackLangData>,
  replacement?: { [key: string]: string | number } | null,
  fallback?: string,
 ) => {
@@ -170,13 +141,6 @@ export const t = (
    findPartsForData(currentLangData, parts) ||
    findPartsForData(fallbackLangData, parts) ||
    fallback;
-  const auxData = Array<Object>().concat(
-    auxCurrentLangData,
-    auxFallbackLangData,
-  );
-  for (let i = 0; i < auxData.length; i++) {
-    translation = translation || findPartsForData(auxData[i], parts);
-  }
  if (translation === undefined) {
    const errorMessage = `Can't find translation for ${path}`;
    // in production, don't blow up the app on a missing translation key
@@ -21,6 +21,7 @@ export const CODES = {
  V: "KeyV",
  Z: "KeyZ",
  R: "KeyR",
+  S: "KeyS",
 } as const;

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

 describe("rotate", () => {
  it("should rotate over (x2, y2) and return the rotated coordinates for (x1, y1)", () => {
@@ -13,3 +13,43 @@ 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);
+  });
+});
@@ -472,3 +472,36 @@ 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;
+};
@@ -11,9 +11,30 @@ 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)

- Add a `subtype` attribute to `ExcalidrawElement` to allow self-contained extensions of any `ExcalidrawElement` type. Implement MathJax support on stem.excalidraw.com as a `math` subtype of `ExcalidrawTextElement`. Both standard Latex input and simplified AsciiMath input are supported. [#6037](https://github.com/excalidraw/excalidraw/pull/6037).
 - Support creating containers, linear elements, text containers, labelled arrows and arrow bindings programatically [#6546](https://github.com/excalidraw/excalidraw/pull/6546)
 - Introducing Web-Embeds (alias iframe element)[#6691](https://github.com/excalidraw/excalidraw/pull/6691)
 - Added [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateEmbeddable) to customize embeddable src url validation. [#6691](https://github.com/excalidraw/excalidraw/pull/6691)
@@ -1,6 +1,6 @@
 {
  "name": "@excalidraw/excalidraw",
-  "version": "0.16.0",
+  "version": "0.16.1",
  "main": "main.js",
  "types": "types/packages/excalidraw/index.d.ts",
  "files": [
@@ -22,5 +22,12 @@ const polyfill = () => {
      configurable: true,
    });
  }
+
+  if (!Element.prototype.replaceChildren) {
+    Element.prototype.replaceChildren = function (...nodes) {
+      this.innerHTML = "";
+      this.append(...nodes);
+    };
+  }
 };
 export default polyfill;
@@ -31,7 +31,6 @@ import {
  InteractiveCanvasAppState,
 } from "../types";
 import { getDefaultAppState } from "../appState";
-import { getSubtypeMethods } from "../element/subtypes";
 import {
  BOUND_TEXT_PADDING,
  FRAME_STYLE,
@@ -265,12 +264,6 @@ const drawElementOnCanvas = (
 ) => {
  context.globalAlpha =
    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.render) {
-    map.render(element, context);
-    context.globalAlpha = 1;
-    return;
-  }
  switch (element.type) {
    case "rectangle":
    case "embeddable":
@@ -904,11 +897,6 @@ export const renderElementToSvg = (
    root = anchorTag;
  }

-  const map = getSubtypeMethods(element.subtype);
-  if (map?.renderSvg) {
-    map.renderSvg(svgRoot, root, element, { offsetX, offsetY });
-    return;
-  }
  const opacity =
    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;

@@ -67,6 +67,7 @@ import {
  EXTERNAL_LINK_IMG,
  getLinkHandleFromCoords,
 } from "../element/Hyperlink";
+import { renderSnaps } from "./renderSnaps";
 import {
  isEmbeddableElement,
  isFrameElement,
@@ -720,6 +721,8 @@ const _renderInteractiveScene = ({
    context.restore();
  }

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

@@ -0,0 +1,189 @@
+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);
+    }
+  }
+};
@@ -11,6 +11,7 @@ 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.
@@ -89,6 +90,26 @@ 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;
@@ -331,12 +331,17 @@ 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,
@@ -363,6 +368,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -524,12 +530,14 @@ 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,
@@ -553,6 +561,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -666,7 +675,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`] = `7`;
+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 'Bring forward' in context menu brings element forward > [end of test] appState 1`] = `
 {
@@ -723,12 +732,14 @@ 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,
@@ -752,6 +763,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1039,7 +1051,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`] = `13`;
+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 to front' in context menu brings element to front > [end of test] appState 1`] = `
 {
@@ -1096,12 +1108,14 @@ 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,
@@ -1125,6 +1139,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1412,7 +1427,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`] = `13`;
+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 'Copy styles' in context menu copies styles > [end of test] appState 1`] = `
 {
@@ -1469,12 +1484,14 @@ 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,
@@ -1498,6 +1515,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1611,7 +1629,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`] = `7`;
+exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `6`;

 exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] appState 1`] = `
 {
@@ -1668,12 +1686,14 @@ 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,
@@ -1695,6 +1715,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -1847,7 +1868,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`] = `8`;
+exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `7`;

 exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] appState 1`] = `
 {
@@ -1904,12 +1925,14 @@ 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,
@@ -1933,6 +1956,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -2148,7 +2172,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`] = `8`;
+exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `7`;

 exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] appState 1`] = `
 {
@@ -2205,12 +2229,14 @@ 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,
@@ -2239,6 +2265,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -2537,7 +2564,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`] = `13`;
+exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `12`;

 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] appState 1`] = `
 {
@@ -2594,12 +2621,14 @@ 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,
@@ -2623,6 +2652,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -3416,7 +3446,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`] = `20`;
+exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `19`;

 exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] appState 1`] = `
 {
@@ -3473,12 +3503,14 @@ 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,
@@ -3502,6 +3534,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -3789,7 +3822,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`] = `12`;
+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 to back' in context menu sends element to back > [end of test] appState 1`] = `
 {
@@ -3846,12 +3879,14 @@ 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,
@@ -3875,6 +3910,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -4162,7 +4198,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`] = `12`;
+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 'Ungroup selection' in context menu ungroups selected group > [end of test] appState 1`] = `
 {
@@ -4219,12 +4255,14 @@ 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,
@@ -4251,6 +4289,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -4618,7 +4657,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`] = `14`;
+exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `13`;

 exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] appState 1`] = `
 {
@@ -4951,12 +4990,14 @@ 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,
@@ -4983,6 +5024,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -5198,7 +5240,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`] = `13`;
+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 'Ungroup selection' in context menu for group inside selected elements > [end of test] appState 1`] = `
 {
@@ -5531,12 +5573,14 @@ 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,
@@ -5565,6 +5609,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -5863,7 +5908,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`] = `14`;
+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 context menu for canvas > [end of test] appState 1`] = `
 {
@@ -5950,6 +5995,19 @@ 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",
@@ -6035,12 +6093,17 @@ 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,
@@ -6062,6 +6125,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -6431,12 +6495,14 @@ 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,
@@ -6460,6 +6526,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -6805,12 +6872,17 @@ 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,
@@ -6834,6 +6906,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": true,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -7031,6 +7104,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`] = `7`;
+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 2`] = `6`;
@@ -87,6 +87,7 @@ describe("contextMenu element", () => {
      "gridMode",
      "zenMode",
      "viewMode",
+      "objectsSnapMode",
      "stats",
    ];

@@ -1,85 +0,0 @@
-import { ExcalidrawElement } from "../element/types";
-import { getShortcutKey } from "../utils";
-import { API } from "./helpers/api";
-import { render } from "./test-utils";
-import { Excalidraw } from "../packages/excalidraw/index";
-import {
-  CustomShortcutName,
-  getShortcutFromShortcutName,
-  registerCustomShortcuts,
-} from "../actions/shortcuts";
-import { Action, ActionPredicateFn, ActionResult } from "../actions/types";
-import {
-  actionChangeFontFamily,
-  actionChangeFontSize,
-} from "../actions/actionProperties";
-import { isTextElement } from "../element";
-
-const { h } = window;
-
-describe("regression tests", () => {
-  it("should retrieve custom shortcuts", () => {
-    const shortcuts: Record<CustomShortcutName, string[]> = {
-      test: [getShortcutKey("CtrlOrCmd+1"), getShortcutKey("CtrlOrCmd+2")],
-    };
-    registerCustomShortcuts(shortcuts);
-    expect(getShortcutFromShortcutName("test")).toBe("Ctrl+1");
-  });
-
-  it("should apply universal action predicates", async () => {
-    await render(<Excalidraw />);
-    // Create the test elements
-    const el1 = API.createElement({ type: "rectangle", id: "A", y: 0 });
-    const el2 = API.createElement({ type: "rectangle", id: "B", y: 30 });
-    const el3 = API.createElement({ type: "text", id: "C", y: 60 });
-    const el12: ExcalidrawElement[] = [el1, el2];
-    const el13: ExcalidrawElement[] = [el1, el3];
-    const el23: ExcalidrawElement[] = [el2, el3];
-    const el123: ExcalidrawElement[] = [el1, el2, el3];
-    // Set up the custom Action enablers
-    const enableName = "custom" as Action["name"];
-    const enableAction: Action = {
-      name: enableName,
-      perform: (): ActionResult => {
-        return {} as ActionResult;
-      },
-      trackEvent: false,
-    };
-    const enabler: ActionPredicateFn = function (action, elements) {
-      if (action.name !== enableName || elements.some((el) => el.y === 30)) {
-        return true;
-      }
-      return false;
-    };
-    // Set up the standard Action disablers
-    const disabled1 = actionChangeFontFamily;
-    const disabled2 = actionChangeFontSize;
-    const disabler: ActionPredicateFn = function (action, elements) {
-      if (
-        action.name === disabled2.name &&
-        elements.some((el) => el.y === 0 || isTextElement(el))
-      ) {
-        return false;
-      }
-      return true;
-    };
-    // Test the custom Action enablers
-    const am = h.app.actionManager;
-    am.registerActionPredicate(enabler);
-    expect(am.isActionEnabled(enableAction, { elements: el12 })).toBe(true);
-    expect(am.isActionEnabled(enableAction, { elements: el13 })).toBe(false);
-    expect(am.isActionEnabled(enableAction, { elements: el23 })).toBe(true);
-    expect(am.isActionEnabled(disabled1, { elements: el12 })).toBe(true);
-    expect(am.isActionEnabled(disabled1, { elements: el13 })).toBe(true);
-    expect(am.isActionEnabled(disabled1, { elements: el23 })).toBe(true);
-    // Test the standard Action disablers
-    am.registerActionPredicate(disabler);
-    expect(am.isActionEnabled(disabled1, { elements: el123 })).toBe(true);
-    expect(am.isActionEnabled(disabled2, { elements: [el1] })).toBe(false);
-    expect(am.isActionEnabled(disabled2, { elements: [el2] })).toBe(true);
-    expect(am.isActionEnabled(disabled2, { elements: [el3] })).toBe(false);
-    expect(am.isActionEnabled(disabled2, { elements: el12 })).toBe(false);
-    expect(am.isActionEnabled(disabled2, { elements: el23 })).toBe(false);
-    expect(am.isActionEnabled(disabled2, { elements: el13 })).toBe(false);
-  });
-});
@@ -47,7 +47,7 @@ describe("Test dragCreate", () => {
      fireEvent.pointerUp(canvas);

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);

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

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

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
      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(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
      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(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(5);
      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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(0);
    });
@@ -16,16 +16,6 @@ import util from "util";
 import path from "path";
 import { getMimeType } from "../../data/blob";
 import {
-  SubtypeLoadedCb,
-  SubtypePrepFn,
-  SubtypeRecord,
-  checkRefreshOnSubtypeLoad,
-  prepareSubtype,
-  selectSubtype,
-  subtypeActionPredicate,
-} from "../../element/subtypes";
-import {
-  maybeGetSubtypeProps,
  newEmbeddableElement,
  newFrameElement,
  newFreeDrawElement,
@@ -42,26 +32,6 @@ const readFile = util.promisify(fs.readFile);
 const { h } = window;

 export class API {
-  constructor() {
-    h.app.actionManager.registerActionPredicate(subtypeActionPredicate);
-    if (true) {
-      // Call `prepareSubtype()` here for `@excalidraw/excalidraw`-specific subtypes
-    }
-  }
-
-  static addSubtype = (record: SubtypeRecord, subtypePrepFn: SubtypePrepFn) => {
-    const subtypeLoadedCb: SubtypeLoadedCb = (hasSubtype) => {
-      if (checkRefreshOnSubtypeLoad(hasSubtype, h.elements)) {
-        h.app.refresh();
-      }
-    };
-    const prep = prepareSubtype(record, subtypePrepFn, subtypeLoadedCb);
-    if (prep.actions) {
-      h.app.actionManager.registerAll(prep.actions);
-    }
-    return prep;
-  };
-
  static setSelectedElements = (elements: ExcalidrawElement[]) => {
    h.setState({
      selectedElementIds: elements.reduce((acc, element) => {
@@ -142,8 +112,6 @@ export class API {
    verticalAlign?: T extends "text"
      ? ExcalidrawTextElement["verticalAlign"]
      : never;
-    subtype?: ExcalidrawElement["subtype"];
-    customData?: ExcalidrawElement["customData"];
    boundElements?: ExcalidrawGenericElement["boundElements"];
    containerId?: T extends "text"
      ? ExcalidrawTextElement["containerId"]
@@ -172,14 +140,6 @@ export class API {

    const appState = h?.state || getDefaultAppState();

-    const custom = maybeGetSubtypeProps(
-      {
-        subtype: rest.subtype ?? selectSubtype(appState, type)?.subtype,
-        customData:
-          rest.customData ?? selectSubtype(appState, type)?.customData,
-      },
-      type,
-    );
    const base: Omit<
      ExcalidrawGenericElement,
      | "id"
@@ -195,7 +155,6 @@ export class API {
      | "link"
      | "updated"
    > = {
-      ...custom,
      x,
      y,
      angle: rest.angle ?? 0,
@@ -1,7 +0,0 @@
-{
-  "toolBar": {
-    "test": "Test",
-    "test2": "Test 2",
-    "test3": "Test 3"
-  }
-}
@@ -1048,14 +1048,14 @@ describe("Test Linear Elements", () => {
        .toMatchInlineSnapshot(`
          {
            "height": 130,
-            "width": 367,
+            "width": 366.11716195150507,
          }
        `);

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

      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
-      expect(renderStaticScene).toHaveBeenCalledTimes(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      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(21);
-    expect(renderStaticScene).toHaveBeenCalledTimes(20);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(24);
+    expect(renderStaticScene).toHaveBeenCalledTimes(19);
    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(7);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
      expect(h.state.selectionElement).toBeNull();
      expect(h.elements.length).toEqual(1);
      expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -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(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(5);
    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(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(5);
    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(6);
+    expect(renderStaticScene).toHaveBeenCalledTimes(5);
    expect(h.elements.length).toEqual(0);
  });
 });
@@ -110,8 +110,8 @@ describe("multi point mode in linear elements", () => {
      key: KEYS.ENTER,
    });

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

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

    const element = h.elements[0] as ExcalidrawLinearElement;
@@ -55,10 +55,15 @@ 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,
@@ -80,6 +85,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  "showHyperlinkPopup": false,
  "showStats": false,
  "showWelcomeScreen": false,
+  "snapLines": [],
  "startBoundElement": null,
  "suggestedBindings": [],
  "theme": "light",
@@ -310,7 +310,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    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(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    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(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    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(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    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(8);
+    expect(renderStaticScene).toHaveBeenCalledTimes(7);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -1,689 +0,0 @@
-import { vi } from "vitest";
-import fallbackLangData from "./helpers/locales/en.json";
-import {
-  SubtypeLoadedCb,
-  SubtypeRecord,
-  SubtypeMethods,
-  SubtypePrepFn,
-  addSubtypeMethods,
-  ensureSubtypesLoadedForElements,
-  getSubtypeMethods,
-  getSubtypeNames,
-  hasAlwaysEnabledActions,
-  isValidSubtype,
-  selectSubtype,
-  subtypeCollides,
-} from "../element/subtypes";
-
-import { render } from "./test-utils";
-import { API } from "./helpers/api";
-import { Excalidraw } from "../packages/excalidraw/index";
-
-import {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  FontString,
-  Theme,
-} from "../element/types";
-import { createIcon, iconFillColor } from "../components/icons";
-import { SubtypeButton } from "../components/Subtypes";
-import { registerAuxLangData } from "../i18n";
-import { getFontString, getShortcutKey } from "../utils";
-import * as textElementUtils from "../element/textElement";
-import { isTextElement } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { Action, ActionName } from "../actions/types";
-import { AppState } from "../types";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { actionChangeSloppiness } from "../actions";
-import { actionChangeRoundness } from "../actions/actionProperties";
-
-const MW = 200;
-const TWIDTH = 200;
-const THEIGHT = 20;
-const TBASELINE = 0;
-const FONTSIZE = 20;
-const DBFONTSIZE = 40;
-const TRFONTSIZE = 60;
-
-const getLangData = async (langCode: string): Promise<Object | undefined> => {
-  try {
-    const condData = await import(
-      /* webpackChunkName: "locales/[request]" */ `./helpers/locales/${langCode}.json`
-    );
-    if (condData) {
-      return condData;
-    }
-  } catch (e) {}
-  return undefined;
-};
-
-const testSubtypeIcon = ({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      stroke={iconFillColor(theme)}
-      strokeWidth={2}
-      strokeLinecap="round"
-      fill="none"
-    />,
-    { width: 40, height: 20, mirror: true },
-  );
-
-const TEST_ACTION = "testAction";
-const TEST_DISABLE1 = actionChangeSloppiness;
-const TEST_DISABLE3 = actionChangeRoundness;
-
-const test1: SubtypeRecord = {
-  subtype: "test",
-  parents: ["line", "arrow", "rectangle", "diamond", "ellipse"],
-  disabledNames: [TEST_DISABLE1.name as ActionName],
-  actionNames: [TEST_ACTION],
-};
-
-const testAction: Action = {
-  name: TEST_ACTION,
-  trackEvent: false,
-  perform: (elements, appState) => {
-    return {
-      elements,
-      commitToHistory: false,
-    };
-  },
-};
-
-const test1Button = SubtypeButton(
-  test1.subtype,
-  test1.parents[0],
-  testSubtypeIcon,
-);
-const test1NonParent = "text" as const;
-
-const test2: SubtypeRecord = {
-  subtype: "test2",
-  parents: ["text"],
-};
-
-const test2Button = SubtypeButton(
-  test2.subtype,
-  test2.parents[0],
-  testSubtypeIcon,
-);
-
-const test3: SubtypeRecord = {
-  subtype: "test3",
-  parents: ["text", "line"],
-  shortcutMap: {
-    testShortcut: [getShortcutKey("Shift+T")],
-  },
-  alwaysEnabledNames: ["test3Always"],
-  disabledNames: [TEST_DISABLE3.name as ActionName],
-};
-
-const test3Button = SubtypeButton(
-  test3.subtype,
-  test3.parents[0],
-  testSubtypeIcon,
-);
-
-const cleanTestElementUpdate = function (updates) {
-  const oldUpdates = {};
-  for (const key in updates) {
-    if (key !== "roughness") {
-      (oldUpdates as any)[key] = (updates as any)[key];
-    }
-  }
-  (updates as any).roughness = 0;
-  return oldUpdates;
-} as SubtypeMethods["clean"];
-
-const prepareNullSubtype = function () {
-  const methods = {} as SubtypeMethods;
-  methods.clean = cleanTestElementUpdate;
-  methods.measureText = measureTest2;
-  methods.wrapText = wrapTest2;
-
-  const actions = [test1Button, test2Button, test3Button];
-  return { actions, methods };
-} as SubtypePrepFn;
-
-const prepareTest1Subtype = function (
-  addSubtypeAction,
-  addLangData,
-  onSubtypeLoaded,
-) {
-  const methods = {} as SubtypeMethods;
-  methods.clean = cleanTestElementUpdate;
-
-  addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
-
-  const actions = [testAction, test1Button];
-  actions.forEach((action) => addSubtypeAction(action));
-
-  return { actions, methods };
-} as SubtypePrepFn;
-
-let test2Loaded = false;
-
-const ensureLoadedTest2: SubtypeMethods["ensureLoaded"] = async (callback) => {
-  test2Loaded = true;
-  if (onTest2Loaded) {
-    onTest2Loaded((el) => isTextElement(el) && el.subtype === test2.subtype);
-  }
-  if (callback) {
-    callback();
-  }
-};
-
-const measureTest2: SubtypeMethods["measureText"] = function (element, next) {
-  const text = next?.text ?? element.text;
-  const customData = next?.customData ?? {};
-  const fontSize = customData.triple
-    ? TRFONTSIZE
-    : next?.fontSize ?? element.fontSize;
-  const fontFamily = element.fontFamily;
-  const fontString = getFontString({ fontSize, fontFamily });
-  const lineHeight = element.lineHeight;
-  const metrics = textElementUtils.measureText(text, fontString, lineHeight);
-  const width = test2Loaded
-    ? metrics.width * 2
-    : Math.max(metrics.width - 10, 0);
-  const height = test2Loaded
-    ? metrics.height * 2
-    : Math.max(metrics.height - 5, 0);
-  return { width, height, baseline: 1 };
-};
-
-const wrapTest2: SubtypeMethods["wrapText"] = function (
-  element,
-  maxWidth,
-  next,
-) {
-  const text = next?.text ?? element.originalText;
-  if (next?.customData && next?.customData.triple === true) {
-    return `${text.split(" ").join("\n")}\nHELLO WORLD.`;
-  }
-  if (next?.fontSize === DBFONTSIZE) {
-    return `${text.split(" ").join("\n")}\nHELLO World.`;
-  }
-  return `${text.split(" ").join("\n")}\nHello world.`;
-};
-
-let onTest2Loaded: SubtypeLoadedCb | undefined;
-
-const prepareTest2Subtype = function (
-  addSubtypeAction,
-  addLangData,
-  onSubtypeLoaded,
-) {
-  const methods = {
-    ensureLoaded: ensureLoadedTest2,
-    measureText: measureTest2,
-    wrapText: wrapTest2,
-  } as SubtypeMethods;
-
-  addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
-
-  const actions = [test2Button];
-  actions.forEach((action) => addSubtypeAction(action));
-
-  onTest2Loaded = onSubtypeLoaded;
-
-  return { actions, methods };
-} as SubtypePrepFn;
-
-const prepareTest3Subtype = function (
-  addSubtypeAction,
-  addLangData,
-  onSubtypeLoaded,
-) {
-  const methods = {} as SubtypeMethods;
-
-  addLangData(fallbackLangData, getLangData);
-  registerAuxLangData(fallbackLangData, getLangData);
-
-  const actions = [test3Button];
-  actions.forEach((action) => addSubtypeAction(action));
-
-  return { actions, methods };
-} as SubtypePrepFn;
-
-const { h } = window;
-
-describe("subtype registration", () => {
-  it("should check for invalid subtype or parents", async () => {
-    await render(<Excalidraw />, {});
-    // Define invalid subtype records
-    const null1 = {} as SubtypeRecord;
-    const null2 = { subtype: "" } as SubtypeRecord;
-    const null3 = { subtype: "null" } as SubtypeRecord;
-    const null4 = { subtype: "null", parents: [] } as SubtypeRecord;
-    // Try registering the invalid subtypes
-    const prepN1 = API.addSubtype(null1, prepareNullSubtype);
-    const prepN2 = API.addSubtype(null2, prepareNullSubtype);
-    const prepN3 = API.addSubtype(null3, prepareNullSubtype);
-    const prepN4 = API.addSubtype(null4, prepareNullSubtype);
-    // Verify the guards in `prepareSubtype` worked
-    expect(prepN1).toStrictEqual({ actions: null, methods: {} });
-    expect(prepN2).toStrictEqual({ actions: null, methods: {} });
-    expect(prepN3).toStrictEqual({ actions: null, methods: {} });
-    expect(prepN4).toStrictEqual({ actions: null, methods: {} });
-  });
-  it("should return subtype actions and methods correctly", async () => {
-    // Check initial registration works
-    let prep1 = API.addSubtype(test1, prepareTest1Subtype);
-    expect(prep1.actions).toStrictEqual([testAction, test1Button]);
-    expect(prep1.methods).toStrictEqual({ clean: cleanTestElementUpdate });
-    // Check repeat registration fails
-    prep1 = API.addSubtype(test1, prepareNullSubtype);
-    expect(prep1.actions).toBeNull();
-    expect(prep1.methods).toStrictEqual({ clean: cleanTestElementUpdate });
-
-    // Check initial registration works
-    let prep2 = API.addSubtype(test2, prepareTest2Subtype);
-    expect(prep2.actions).toStrictEqual([test2Button]);
-    expect(prep2.methods).toStrictEqual({
-      ensureLoaded: ensureLoadedTest2,
-      measureText: measureTest2,
-      wrapText: wrapTest2,
-    });
-    // Check repeat registration fails
-    prep2 = API.addSubtype(test2, prepareNullSubtype);
-    expect(prep2.actions).toBeNull();
-    expect(prep2.methods).toStrictEqual({
-      ensureLoaded: ensureLoadedTest2,
-      measureText: measureTest2,
-      wrapText: wrapTest2,
-    });
-
-    // Check initial registration works
-    let prep3 = API.addSubtype(test3, prepareTest3Subtype);
-    expect(prep3.actions).toStrictEqual([test3Button]);
-    expect(prep3.methods).toStrictEqual({});
-    // Check repeat registration fails
-    prep3 = API.addSubtype(test3, prepareNullSubtype);
-    expect(prep3.actions).toBeNull();
-    expect(prep3.methods).toStrictEqual({});
-  });
-});
-
-describe("subtypes", () => {
-  it("should correctly register", async () => {
-    const subtypes = getSubtypeNames();
-    expect(subtypes).toContain(test1.subtype);
-    expect(subtypes).toContain(test2.subtype);
-    expect(subtypes).toContain(test3.subtype);
-  });
-  it("should return subtype methods", async () => {
-    expect(getSubtypeMethods(undefined)).toBeUndefined();
-    const test1Methods = getSubtypeMethods(test1.subtype);
-    expect(test1Methods?.clean).toBeDefined();
-    expect(test1Methods?.render).toBeUndefined();
-    expect(test1Methods?.wrapText).toBeUndefined();
-    expect(test1Methods?.renderSvg).toBeUndefined();
-    expect(test1Methods?.measureText).toBeUndefined();
-    expect(test1Methods?.ensureLoaded).toBeUndefined();
-  });
-  it("should not overwrite subtype methods", async () => {
-    addSubtypeMethods(test1.subtype, {});
-    addSubtypeMethods(test2.subtype, {});
-    addSubtypeMethods(test3.subtype, { clean: cleanTestElementUpdate });
-    const test1Methods = getSubtypeMethods(test1.subtype);
-    expect(test1Methods?.clean).toBeDefined();
-    const test2Methods = getSubtypeMethods(test2.subtype);
-    expect(test2Methods?.measureText).toBeDefined();
-    expect(test2Methods?.wrapText).toBeDefined();
-    const test3Methods = getSubtypeMethods(test3.subtype);
-    expect(test3Methods?.clean).toBeUndefined();
-  });
-  it("should register custom shortcuts", async () => {
-    expect(getShortcutFromShortcutName("testShortcut")).toBe("Shift+T");
-  });
-  it("should correctly validate", async () => {
-    test1.parents.forEach((p) => {
-      expect(isValidSubtype(test1.subtype, p)).toBe(true);
-      expect(isValidSubtype(undefined, p)).toBe(false);
-    });
-    expect(isValidSubtype(test1.subtype, test1NonParent)).toBe(false);
-    expect(isValidSubtype(test1.subtype, undefined)).toBe(false);
-    expect(isValidSubtype(undefined, undefined)).toBe(false);
-  });
-  it("should collide with themselves", async () => {
-    expect(subtypeCollides(test1.subtype, [test1.subtype])).toBe(true);
-    expect(subtypeCollides(test1.subtype, [test1.subtype, test2.subtype])).toBe(
-      true,
-    );
-  });
-  it("should not collide without type overlap", async () => {
-    expect(subtypeCollides(test1.subtype, [test2.subtype])).toBe(false);
-  });
-  it("should collide with type overlap", async () => {
-    expect(subtypeCollides(test1.subtype, [test3.subtype])).toBe(true);
-  });
-  it("should apply to ExcalidrawElements", async () => {
-    const elements = [
-      API.createElement({ type: "line", id: "A", subtype: test1.subtype }),
-      API.createElement({ type: "arrow", id: "B", subtype: test1.subtype }),
-      API.createElement({ type: "rectangle", id: "C", subtype: test1.subtype }),
-      API.createElement({ type: "diamond", id: "D", subtype: test1.subtype }),
-      API.createElement({ type: "ellipse", id: "E", subtype: test1.subtype }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    elements.forEach((el) => expect(el.subtype).toBe(test1.subtype));
-  });
-  it("should enforce prop value restrictions", async () => {
-    const elements = [
-      API.createElement({
-        type: "line",
-        id: "A",
-        subtype: test1.subtype,
-        roughness: 1,
-      }),
-      API.createElement({ type: "line", id: "B", roughness: 1 }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    elements.forEach((el) => {
-      if (el.subtype === test1.subtype) {
-        expect(el.roughness).toBe(0);
-      } else {
-        expect(el.roughness).toBe(1);
-      }
-    });
-  });
-  it("should consider enforced prop values in version increments", async () => {
-    const rectA = API.createElement({
-      type: "line",
-      id: "A",
-      subtype: test1.subtype,
-      roughness: 1,
-      strokeWidth: 1,
-    });
-    const rectB = API.createElement({
-      type: "line",
-      id: "B",
-      subtype: test1.subtype,
-      roughness: 1,
-      strokeWidth: 1,
-    });
-    // Initial element creation checks
-    expect(rectA.roughness).toBe(0);
-    expect(rectB.roughness).toBe(0);
-    expect(rectA.version).toBe(1);
-    expect(rectB.version).toBe(1);
-    // Check that attempting to set prop values not permitted by the subtype
-    // doesn't increment element versions
-    mutateElement(rectA, { roughness: 2 });
-    mutateElement(rectB, { roughness: 2, strokeWidth: 2 });
-    expect(rectA.version).toBe(1);
-    expect(rectB.version).toBe(2);
-    // Check that element versions don't increment when creating new elements
-    // while attempting to use prop values not permitted by the subtype
-    // First check based on `rectA` (unsuccessfully mutated)
-    const rectC = newElementWith(rectA, { roughness: 1 });
-    const rectD = newElementWith(rectA, { roughness: 1, strokeWidth: 1.5 });
-    expect(rectC.version).toBe(1);
-    expect(rectD.version).toBe(2);
-    // Then check based on `rectB` (successfully mutated)
-    const rectE = newElementWith(rectB, { roughness: 1 });
-    const rectF = newElementWith(rectB, { roughness: 1, strokeWidth: 1.5 });
-    expect(rectE.version).toBe(2);
-    expect(rectF.version).toBe(3);
-  });
-  it("should call custom text methods", async () => {
-    const testString = "A quick brown fox jumps over the lazy dog.";
-    const elements = [
-      API.createElement({
-        type: "text",
-        id: "A",
-        subtype: test2.subtype,
-        text: testString,
-        fontSize: FONTSIZE,
-      }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    const mockMeasureText = (text: string, font: FontString) => {
-      if (text === testString) {
-        let multiplier = 1;
-        if (font.includes(`${DBFONTSIZE}`)) {
-          multiplier = 2;
-        }
-        if (font.includes(`${TRFONTSIZE}`)) {
-          multiplier = 3;
-        }
-        const width = multiplier * TWIDTH;
-        const height = multiplier * THEIGHT;
-        const baseline = multiplier * TBASELINE;
-        return { width, height, baseline };
-      }
-      return { width: 1, height: 0, baseline: 0 };
-    };
-
-    vi.spyOn(textElementUtils, "measureText").mockImplementation(
-      mockMeasureText,
-    );
-
-    elements.forEach((el) => {
-      if (isTextElement(el)) {
-        // First test with `ExcalidrawTextElement.text`
-        const metrics = textElementUtils.measureTextElement(el);
-        expect(metrics).toStrictEqual({
-          width: TWIDTH - 10,
-          height: THEIGHT - 5,
-          baseline: TBASELINE + 1,
-        });
-        const wrappedText = textElementUtils.wrapTextElement(el, MW);
-        expect(wrappedText).toEqual(
-          `${testString.split(" ").join("\n")}\nHello world.`,
-        );
-
-        // Now test with modified text in `next`
-        let next: {
-          text?: string;
-          fontSize?: number;
-          customData?: Record<string, any>;
-        } = {
-          text: "Hello world.",
-        };
-        const nextMetrics = textElementUtils.measureTextElement(el, next);
-        expect(nextMetrics).toStrictEqual({ width: 0, height: 0, baseline: 1 });
-        const nextWrappedText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextWrappedText).toEqual("Hello\nworld.\nHello world.");
-
-        // Now test modified fontSizes in `next`
-        next = { fontSize: DBFONTSIZE };
-        const nextFM = textElementUtils.measureTextElement(el, next);
-        expect(nextFM).toStrictEqual({
-          width: 2 * TWIDTH - 10,
-          height: 2 * THEIGHT - 5,
-          baseline: 2 * TBASELINE + 1,
-        });
-        const nextFWrText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextFWrText).toEqual(
-          `${testString.split(" ").join("\n")}\nHELLO World.`,
-        );
-
-        // Now test customData in `next`
-        next = { customData: { triple: true } };
-        const nextCD = textElementUtils.measureTextElement(el, next);
-        expect(nextCD).toStrictEqual({
-          width: 3 * TWIDTH - 10,
-          height: 3 * THEIGHT - 5,
-          baseline: 3 * TBASELINE + 1,
-        });
-        const nextCDWrText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextCDWrText).toEqual(
-          `${testString.split(" ").join("\n")}\nHELLO WORLD.`,
-        );
-      }
-    });
-  });
-  it("should recognize subtypes with always-enabled actions", async () => {
-    expect(hasAlwaysEnabledActions(test1.subtype)).toBe(false);
-    expect(hasAlwaysEnabledActions(test2.subtype)).toBe(false);
-    expect(hasAlwaysEnabledActions(test3.subtype)).toBe(true);
-  });
-  it("should select active subtypes and customData", async () => {
-    const appState = {} as {
-      activeSubtypes: AppState["activeSubtypes"];
-      customData: AppState["customData"];
-    };
-
-    // No active subtypes
-    let subtypes = selectSubtype(appState, "text");
-    expect(subtypes.subtype).toBeUndefined();
-    expect(subtypes.customData).toBeUndefined();
-    // Subtype for both "text" and "line" types
-    appState.activeSubtypes = [test3.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.subtype).toBe(test3.subtype);
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.subtype).toBe(test3.subtype);
-    subtypes = selectSubtype(appState, "arrow");
-    expect(subtypes.subtype).toBeUndefined();
-    // Subtype for multiple linear types
-    appState.activeSubtypes = [test1.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.subtype).toBeUndefined();
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.subtype).toBe(test1.subtype);
-    subtypes = selectSubtype(appState, "arrow");
-    expect(subtypes.subtype).toBe(test1.subtype);
-    // Subtype for "text" only
-    appState.activeSubtypes = [test2.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.subtype).toBe(test2.subtype);
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.subtype).toBeUndefined();
-    subtypes = selectSubtype(appState, "arrow");
-    expect(subtypes.subtype).toBeUndefined();
-
-    // Test customData
-    appState.customData = {};
-    appState.customData[test1.subtype] = { test: true };
-    appState.customData[test2.subtype] = { test2: true };
-    appState.customData[test3.subtype] = { test3: true };
-    // Subtype for both "text" and "line" types
-    appState.activeSubtypes = [test3.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.customData).toBeDefined();
-    expect(subtypes.customData![test1.subtype]).toBeUndefined();
-    expect(subtypes.customData![test2.subtype]).toBeUndefined();
-    expect(subtypes.customData![test3.subtype]).toBe(true);
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.customData).toBeDefined();
-    expect(subtypes.customData![test1.subtype]).toBeUndefined();
-    expect(subtypes.customData![test2.subtype]).toBeUndefined();
-    expect(subtypes.customData![test3.subtype]).toBe(true);
-    subtypes = selectSubtype(appState, "arrow");
-    expect(subtypes.customData).toBeUndefined();
-    // Subtype for multiple linear types
-    appState.activeSubtypes = [test1.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.customData).toBeUndefined();
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.customData).toBeDefined();
-    expect(subtypes.customData![test1.subtype]).toBe(true);
-    expect(subtypes.customData![test2.subtype]).toBeUndefined();
-    expect(subtypes.customData![test3.subtype]).toBeUndefined();
-    // Multiple, non-colliding subtypes
-    appState.activeSubtypes = [test1.subtype, test2.subtype];
-    subtypes = selectSubtype(appState, "text");
-    expect(subtypes.customData).toBeDefined();
-    expect(subtypes.customData![test1.subtype]).toBeUndefined();
-    expect(subtypes.customData![test2.subtype]).toBe(true);
-    expect(subtypes.customData![test3.subtype]).toBeUndefined();
-    subtypes = selectSubtype(appState, "line");
-    expect(subtypes.customData).toBeDefined();
-    expect(subtypes.customData![test1.subtype]).toBe(true);
-    expect(subtypes.customData![test2.subtype]).toBeUndefined();
-    expect(subtypes.customData![test3.subtype]).toBeUndefined();
-  });
-});
-describe("subtype actions", () => {
-  let elements: ExcalidrawElement[];
-  beforeEach(async () => {
-    elements = [
-      API.createElement({ type: "line", id: "A", subtype: test1.subtype }),
-      API.createElement({ type: "line", id: "B" }),
-      API.createElement({ type: "line", id: "C", subtype: test3.subtype }),
-      API.createElement({ type: "text", id: "D", subtype: test3.subtype }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-  });
-  it("should apply to elements with their subtype", async () => {
-    h.setState({ selectedElementIds: { A: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(true);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(false);
-  });
-  it("should apply to elements without a subtype", async () => {
-    h.setState({ selectedElementIds: { B: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(false);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(true);
-  });
-  it("should apply to elements with and without their subtype", async () => {
-    h.setState({ selectedElementIds: { A: true, B: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(true);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(true);
-  });
-  it("should apply to elements with a different subtype", async () => {
-    h.setState({ selectedElementIds: { C: true, D: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(false);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(true);
-  });
-  it("should apply to like types with varying subtypes", async () => {
-    h.setState({ selectedElementIds: { A: true, C: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(true);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(true);
-  });
-  it("should apply to non-like types with varying subtypes", async () => {
-    h.setState({ selectedElementIds: { A: true, D: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(true);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(false);
-  });
-  it("should apply to like/non-like types with varying subtypes", async () => {
-    h.setState({ selectedElementIds: { A: true, B: true, D: true } });
-    const am = h.app.actionManager;
-    expect(am.isActionEnabled(testAction, { elements })).toBe(true);
-    expect(am.isActionEnabled(TEST_DISABLE1, { elements })).toBe(true);
-  });
-  it("should apply to the correct parent type", async () => {
-    const am = h.app.actionManager;
-    h.setState({ selectedElementIds: { A: true, C: true } });
-    expect(am.isActionEnabled(TEST_DISABLE3, { elements })).toBe(true);
-    h.setState({ selectedElementIds: { A: true, D: true } });
-    expect(am.isActionEnabled(TEST_DISABLE3, { elements })).toBe(true);
-  });
-});
-describe("subtype loading", () => {
-  let elements: ExcalidrawElement[];
-  beforeEach(async () => {
-    const testString = "A quick brown fox jumps over the lazy dog.";
-    elements = [
-      API.createElement({
-        type: "text",
-        id: "A",
-        subtype: test2.subtype,
-        text: testString,
-      }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    h.elements = elements;
-  });
-  it("should redraw text bounding boxes", async () => {
-    h.setState({ selectedElementIds: { A: true } });
-    const el = h.elements[0] as ExcalidrawTextElement;
-    expect(el.width).toEqual(100);
-    expect(el.height).toEqual(100);
-    ensureSubtypesLoadedForElements(elements);
-    expect(el.width).toEqual(TWIDTH * 2);
-    expect(el.height).toEqual(THEIGHT * 2);
-    expect(el.baseline).toEqual(TBASELINE + 1);
-  });
-});
@@ -18,8 +18,6 @@ import {
  ExcalidrawFrameElement,
  ExcalidrawEmbeddableElement,
 } from "./element/types";
-import { Action } from "./actions/types";
-import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
@@ -32,24 +30,16 @@ import { ClipboardData } from "./clipboard";
 import { isOverScrollBars } from "./scene";
 import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
-import {
-  SubtypeMethods,
-  Subtype,
-  SubtypePrepFn,
-  SubtypeRecord,
-} from "./element/subtypes";
 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?: {
-    x: number;
-    y: number;
-  };
+  pointer?: CollaboratorPointer;
  button?: "up" | "down";
  selectedElementIds?: AppState["selectedElementIds"];
  username?: string | null;
@@ -65,6 +55,12 @@ export type Collaborator = {
  id?: string;
 };

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

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

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

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

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

@@ -193,32 +202,14 @@ export type AppState = {
  // (e.g. text element when typing into the input)
  editingElement: NonDeletedExcalidrawElement | null;
  editingLinearElement: LinearElementEditor | null;
-  activeSubtypes?: Subtype[];
-  customData?: {
-    [subtype: Subtype]: ExcalidrawElement["customData"];
-  };
  activeTool: {
    /**
     * 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: LastActiveTool;
+    lastActiveTool: ActiveTool | null;
    locked: boolean;
-  } & (
-    | {
-        type:
-          | typeof SHAPES[number]["value"]
-          | "eraser"
-          | "hand"
-          | "frame"
-          | "embeddable";
-        customType: null;
-      }
-    | {
-        type: "custom";
-        customType: string;
-      }
-  );
+  } & ActiveTool;
  penMode: boolean;
  penDetected: boolean;
  exportBackground: boolean;
@@ -298,6 +289,13 @@ 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<
@@ -395,7 +393,7 @@ export interface ExcalidrawProps {
  excalidrawRef?: ForwardRef<ExcalidrawAPIRefValue>;
  isCollaborating?: boolean;
  onPointerUpdate?: (payload: {
-    pointer: { x: number; y: number };
+    pointer: { x: number; y: number; tool: "pointer" | "laser" };
    button: "down" | "up";
    pointersMap: Gesture["pointers"];
  }) => void;
@@ -411,6 +409,7 @@ export interface ExcalidrawProps {
  viewModeEnabled?: boolean;
  zenModeEnabled?: boolean;
  gridModeEnabled?: boolean;
+  objectsSnapModeEnabled?: boolean;
  libraryReturnUrl?: string;
  theme?: Theme;
  name?: string;
@@ -538,6 +537,8 @@ export type AppClassProperties = {
  onInsertElements: App["onInsertElements"];
  onExportImage: App["onExportImage"];
  lastViewportPosition: App["lastViewportPosition"];
+  togglePenMode: App["togglePenMode"];
+  setActiveTool: App["setActiveTool"];
 };

 export type PointerDownState = Readonly<{
@@ -620,11 +621,6 @@ export type ExcalidrawImperativeAPI = {
  getSceneElements: InstanceType<typeof App>["getSceneElements"];
  getAppState: () => InstanceType<typeof App>["state"];
  getFiles: () => InstanceType<typeof App>["files"];
-  actionManager: InstanceType<typeof App>["actionManager"];
-  addSubtype: (
-    record: SubtypeRecord,
-    subtypePrepFn: SubtypePrepFn,
-  ) => { actions: Action[] | null; methods: Partial<SubtypeMethods> };
  refresh: InstanceType<typeof App>["refresh"];
  setToast: InstanceType<typeof App>["setToast"];
  addFiles: (data: BinaryFileData[]) => void;
@@ -669,3 +665,10 @@ export type FrameNameBoundsCache = {
    }
  >;
 };
+
+export type KeyboardModifiersObject = {
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  metaKey: boolean;
+};
@@ -15,9 +15,8 @@ import {
  FontString,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
+import { ActiveTool, AppState, DataURL, ToolType, 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";
@@ -371,15 +370,10 @@ export const updateActiveTool = (
  appState: Pick<AppState, "activeTool">,
  data: (
    | {
-        type:
-          | typeof SHAPES[number]["value"]
-          | "eraser"
-          | "hand"
-          | "frame"
-          | "embeddable";
+        type: ToolType;
      }
    | { type: "custom"; customType: string }
-  ) & { lastActiveToolBeforeEraser?: LastActiveTool },
+  ) & { lastActiveToolBeforeEraser?: ActiveTool | null },
 ): AppState["activeTool"] => {
  if (data.type === "custom") {
    return {
@@ -111,7 +111,7 @@ export default defineConfig({
          {
            src: "apple-touch-icon.png",
            type: "image/png",
-            sizes: "256x256",
+            sizes: "180x180",
          },
        ],
        start_url: "/",
@@ -1522,6 +1522,11 @@
  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"
@@ -2878,16 +2883,6 @@
    loupe "^2.3.6"
    pretty-format "^29.5.0"

-"@xmldom/xmldom@0.9.0-beta.8":
-  version "0.9.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.9.0-beta.8.tgz#ef343e627e4d5eba57c52b40c2e1f26d12738512"
-  integrity sha512-Q5bFbYxRJKTYP7S1a0HIlumTmJRHHMGrNvBp8F1mUEyyGTeCs0g8+FKAaA6tU+YFsZgHKA0eRKzZhYdhpgAHAw==
-
-"@yarnpkg/lockfile@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
-  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
-
 abab@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -3405,7 +3400,7 @@ check-error@^1.0.2:
  optionalDependencies:
    fsevents "~2.3.2"

-ci-info@^3.2.0, ci-info@^3.7.0:
+ci-info@^3.2.0:
  version "3.8.0"
  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
@@ -3447,15 +3442,6 @@ cliui@^7.0.2:
    strip-ansi "^6.0.0"
    wrap-ansi "^7.0.0"

-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
-
 clsx@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@@ -3497,11 +3483,6 @@ combined-stream@^1.0.8:
  dependencies:
    delayed-stream "~1.0.0"

-commander@10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.0.tgz#71797971162cd3cf65f0b9d24eb28f8d303acdf1"
-  integrity sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==
-
 commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -3547,19 +3528,6 @@ convert-source-map@^1.6.0, convert-source-map@^1.7.0:
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==

-copyfiles@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
-  integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==
-  dependencies:
-    glob "^7.0.5"
-    minimatch "^3.0.3"
-    mkdirp "^1.0.4"
-    noms "0.0.0"
-    through2 "^2.0.1"
-    untildify "^4.0.0"
-    yargs "^16.1.0"
-
 core-js-compat@^3.25.1:
  version "3.30.0"
  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.0.tgz#99aa2789f6ed2debfa1df3232784126ee97f4d80"
@@ -3577,11 +3545,6 @@ core-js@^3.4:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.0.tgz#64ac6f83bc7a49fd42807327051701d4b1478dea"
  integrity sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg==

-core-util-is@~1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
-  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
-
 corser@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
@@ -4443,13 +4406,6 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

-find-yarn-workspace-root@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
-  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
-  dependencies:
-    micromatch "^4.0.2"
-
 firebase@8.3.3:
  version "8.3.3"
  resolved "https://registry.yarnpkg.com/firebase/-/firebase-8.3.3.tgz#21d8fb8eec2c43b0d8f98ab6bda5535b7454fa54"
@@ -4513,7 +4469,7 @@ fs-extra@^11.1.0:
    jsonfile "^6.0.1"
    universalify "^2.0.0"

-fs-extra@^9.0.0, fs-extra@^9.0.1:
+fs-extra@^9.0.1:
  version "9.1.0"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -4612,7 +4568,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
  dependencies:
    is-glob "^4.0.1"

-glob@^7.0.5, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
  version "7.2.3"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -4624,17 +4580,6 @@ glob@^7.0.5, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-glob@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
-  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^5.0.1"
-    once "^1.3.0"
-
 globals@^11.1.0:
  version "11.12.0"
  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -4678,7 +4623,7 @@ gopd@^1.0.1:
  dependencies:
    get-intrinsic "^1.1.3"

-graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
  version "4.2.11"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -4912,7 +4857,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5003,11 +4948,6 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
  dependencies:
    has-tostringtag "^1.0.0"

-is-docker@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
-  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
-
 is-extglob@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -5142,18 +5082,6 @@ is-weakset@^2.0.1:
    call-bind "^1.0.2"
    get-intrinsic "^1.1.1"

-is-wsl@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
-  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
-  dependencies:
-    is-docker "^2.0.0"
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
@@ -5164,11 +5092,6 @@ isarray@^2.0.5:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==

-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
-
 isexe@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -5381,13 +5304,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==

-json-stable-stringify@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.2.tgz#e06f23128e0bbe342dc996ed5a19e28b57b580e0"
-  integrity sha512-eunSSaEnxV12z+Z73y/j5N37/In40GK4GmsSy+tEHJMxknvqnA7/djeYtAgW0GsWHUfg+847WJjKaEylk2y09g==
-  dependencies:
-    jsonify "^0.0.1"
-
 json5@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -5414,11 +5330,6 @@ jsonfile@^6.0.1:
  optionalDependencies:
    graceful-fs "^4.1.6"

-jsonify@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
-  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
-
 jsonpointer@^5.0.0:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
@@ -5432,13 +5343,6 @@ jsonpointer@^5.0.0:
    array-includes "^3.1.5"
    object.assign "^4.1.3"

-klaw-sync@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
-  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-
 language-subtag-registry@~0.3.2:
  version "0.3.22"
  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
@@ -5648,20 +5552,6 @@ make-dir@^4.0.0:
  dependencies:
    semver "^7.5.3"

-"mathjax-full@https://github.com/MathJax/MathJax-src#develop":
-  version "4.0.0-beta.3"
-  resolved "https://github.com/MathJax/MathJax-src#9ca76266fc7b26ddab4efb983eebe900e3a428c0"
-  dependencies:
-    mathjax-modern-font "^4.0.0-beta.3"
-    mhchemparser "^4.2.1"
-    mj-context-menu "^0.9.1"
-    speech-rule-engine "^4.1.0-beta.7"
-
-mathjax-modern-font@^4.0.0-beta.3:
-  version "4.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/mathjax-modern-font/-/mathjax-modern-font-4.0.0-beta.3.tgz#2d032255f47e7730e3beb5d3061606f5f1e8c376"
-  integrity sha512-rUD7Hxu2yKCogWg0PVx5l4iMn2mOjcD4/vseIU+u2RxFkRfEDvfCphdBiQv27O8wnYEbdhjmn9+v4cDeDowDWg==
-
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5672,12 +5562,7 @@ merge2@^1.3.0, merge2@^1.4.1:
  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==

-mhchemparser@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/mhchemparser/-/mhchemparser-4.2.1.tgz#d73982e66bc06170a85b1985600ee9dabe157cb0"
-  integrity sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==
-
-micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.4:
  version "4.0.5"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -5712,7 +5597,7 @@ min-indent@^1.0.0:
  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==

-minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -5731,11 +5616,6 @@ minimist@^1.2.0, minimist@^1.2.6:
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==

-mj-context-menu@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/mj-context-menu/-/mj-context-menu-0.9.1.tgz#8195fb10092488d9feeba8b50f03fa56080edb14"
-  integrity sha512-ECPcVXZFRfeYOxb1MWGzctAtnQcZ6nRucE3orfkKX7t/KE2mlXO2K/bq4BcCGOuhdz3Wg2BZDy2S8ECK73/iIw==
-
 mkdirp@^0.5.6:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -5743,11 +5623,6 @@ mkdirp@^0.5.6:
  dependencies:
    minimist "^1.2.6"

-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mlly@^1.2.0, mlly@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.4.0.tgz#830c10d63f1f97bd8785377b24dc2a15d972832b"
@@ -5823,14 +5698,6 @@ node-releases@^2.0.8:
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==

-noms@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
-  integrity sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "~1.0.31"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -5935,14 +5802,6 @@ open-color@1.9.1:
  resolved "https://registry.yarnpkg.com/open-color/-/open-color-1.9.1.tgz#a6e6328f60eff7aa60e3e8fcfa50f53ff3eece35"
  integrity sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==

-open@^7.4.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
-  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
-  dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-
 opener@^1.5.1:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -5960,11 +5819,6 @@ optionator@^0.9.1:
    type-check "^0.4.0"
    word-wrap "^1.2.3"

-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
-
 p-limit@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
@@ -6018,27 +5872,6 @@ parseuri@0.0.6:
  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a"
  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==

-patch-package@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
-  integrity sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==
-  dependencies:
-    "@yarnpkg/lockfile" "^1.1.0"
-    chalk "^4.1.2"
-    ci-info "^3.7.0"
-    cross-spawn "^7.0.3"
-    find-yarn-workspace-root "^2.0.0"
-    fs-extra "^9.0.0"
-    json-stable-stringify "^1.0.2"
-    klaw-sync "^6.0.0"
-    minimist "^1.2.6"
-    open "^7.4.2"
-    rimraf "^2.6.3"
-    semver "^7.5.3"
-    slash "^2.0.0"
-    tmp "^0.0.33"
-    yaml "^2.2.2"
-
 path-data-parser@0.1.0, path-data-parser@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
@@ -6179,11 +6012,6 @@ postcss@^8.4.24:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postinstall-postinstall@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
-  integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==
-
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -6229,11 +6057,6 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
    ansi-styles "^5.0.0"
    react-is "^18.0.0"

-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 progress@^2.0.0:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -6392,29 +6215,6 @@ react@18.2.0:
  dependencies:
    loose-envify "^1.1.0"

-readable-stream@~1.0.31:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@~2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
-  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readdirp@~3.6.0:
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -6497,15 +6297,6 @@ regjsparser@^0.9.1:
  dependencies:
    jsesc "~0.5.0"

-replace-in-file@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/replace-in-file/-/replace-in-file-7.0.1.tgz#1bb69a2e5596341cc6f0f581309add6c1d364b71"
-  integrity sha512-KbhgPq04eA+TxXuUxpgWIH9k/TjF+28ofon2PXP7vq6izAILhxOtksCVcLuuQLtyjouBaPdlH6RJYYcSPVxCOA==
-  dependencies:
-    chalk "^4.1.2"
-    glob "^8.1.0"
-    yargs "^17.7.2"
-
 require-directory@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -6569,13 +6360,6 @@ rfdc@^1.3.0:
  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==

-rimraf@^2.6.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -6647,7 +6431,7 @@ safari-14-idb-fix@^3.0.0:
  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz#450fc049b996ec7f3fd9ca2f89d32e0761583440"
  integrity sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==

-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -6765,11 +6549,6 @@ sirv@^2.0.3:
    mrmime "^1.0.0"
    totalist "^3.0.0"

-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
-  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
-
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -6870,15 +6649,6 @@ sourcemap-codec@^1.4.8:
  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==

-speech-rule-engine@^4.1.0-beta.7:
-  version "4.1.0-beta.7"
-  resolved "https://registry.yarnpkg.com/speech-rule-engine/-/speech-rule-engine-4.1.0-beta.7.tgz#b3690bbe27582c07c86631e11cc045e3d3b154cc"
-  integrity sha512-e9QntjrfSKDa/w0baCXsoPQRPD9uY0r7q86Jr8ud/5zElzdG0Beiz4mc38kFb/E53c4RuYyZKSKyug8e5cVrpQ==
-  dependencies:
-    "@xmldom/xmldom" "0.9.0-beta.8"
-    commander "10.0.0"
-    wicked-good-xpath "1.3.0"
-
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -6977,18 +6747,6 @@ string.prototype.trimstart@^1.0.6:
    define-properties "^1.1.4"
    es-abstract "^1.20.4"

-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 stringify-object@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
@@ -7130,14 +6888,6 @@ text-table@^0.2.0:
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==

-through2@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
 through@^2.3.8:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -7163,13 +6913,6 @@ tinyspy@^2.1.1:
  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.1.1.tgz#9e6371b00c259e5c5b301917ca18c01d40ae558c"
  integrity sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==

-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 to-array@0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
@@ -7374,11 +7117,6 @@ universalify@^2.0.0:
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==

-untildify@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
-  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
-
 upath@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -7437,11 +7175,6 @@ use-sync-external-store@1.2.0:
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==

-util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
-
 v8-compile-cache@^2.0.3:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -7752,11 +7485,6 @@ why-is-node-running@^2.2.2:
    siginfo "^2.0.0"
    stackback "0.0.2"

-wicked-good-xpath@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz#81b0e95e8650e49c94b22298fff8686b5553cf6c"
-  integrity sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==
-
 word-wrap@^1.2.3:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
@@ -7975,11 +7703,6 @@ xmlhttprequest@1.8.0:
  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
  integrity sha512-58Im/U0mlVBLM38NdZjHyhuMtCqa61469k2YP/AaPbvCoV9aQGUpbJBj1QRm2ytRiVQBD/fsw7L2bJGDVQswBA==

-xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 y18n@^5.0.5:
  version "5.0.8"
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
@@ -8000,22 +7723,12 @@ yaml@^1.10.0, yaml@^1.10.2:
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

-yaml@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
-  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
-
 yargs-parser@^20.2.2:
  version "20.2.9"
  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==

-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-
-yargs@^16.1.0, yargs@^16.2.0:
+yargs@^16.2.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
@@ -8028,19 +7741,6 @@ yargs@^16.1.0, yargs@^16.2.0:
    y18n "^5.0.5"
    yargs-parser "^20.2.2"

-yargs@^17.7.2:
-  version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yeast@0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
Author	SHA1	Message	Date
zsviczian	60a3584e86	change css back to original	2023-10-07 10:38:46 +02:00
zsviczian	fa0e653236	lint	2023-10-07 10:37:37 +02:00
zsviczian	16de3d9243	add svgContainer offset	2023-10-07 10:35:06 +02:00
zsviczian	c65d6506f7	fix lasertool offset	2023-10-07 08:49:32 +02:00
David Luzar	a249f332a2	fix: ensure we do not stop laser update prematurely (#7100 )	2023-10-06 12:00:35 +02:00
Are	2e61926a6b	feat: initial Laser Pointer MVP (#6739 ) * feat: initial Laser pointer mvp * feat: add laser-pointer package and integrate it with collab * chore: fix yarn.lock * feat: update laser-pointer package, prevent panning from showing * feat: add laser pointer tool button when collaborating, migrate to official package * feat: reduce laser tool button size * update icon * fix icon & rotate * fix: lock zoom level * fix icon * add `selected` state, simplify and reduce api * set up pointer callbacks in viewMode if laser tool active * highlight extra-tools button if one of the nested tools active * add shortcut to laser pointer * feat: don't update paths if nothing changed * ensure we reset flag if no rAF scheduled * move `lastUpdate` to instance to optimize * return early * factor out into constants and add doc * skip iteration instead of exit * fix naming * feat: remove testing variable on window * destroy on editor unmount * fix incorrectly resetting `lastUpdate` in `stop()` --------- Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-05 17:05:16 +02:00
DanielJGeiger	e921bfb1ae	feat: Export `iconFillColor()` (#6996 )	2023-10-04 18:17:22 -05:00
David Luzar	e6f74350ac	refactor: DRY out tool typing (#7086 )	2023-10-04 23:39:00 +02:00
David Luzar	fa33aa08ab	refactor: refactor event globals to differentiate from `lastPointerUp` (#7084 )	2023-10-04 16:18:22 +02:00
David Luzar	8b838049df	fix: remove invisible elements safely (#7083 )	2023-10-04 16:09:59 +02:00
David Luzar	1f4f5e11ae	refactor: DRY out and simplify setting active tool from toolbar (#7079 )	2023-10-04 00:16:54 +02:00
David Luzar	12420592ef	feat: support menu / dropdown items to have `selected` state (#7078 )	2023-10-03 23:35:47 +02:00
DanielJGeiger	bfd318e765	docs: Update the `excalidraw-app` source-code link in README.md (#7035 ) chore: Update the `excalidraw-app` source-code link in README.md	2023-10-03 08:41:13 -05:00
Thomas Steiner	6a821f3b76	fix: Icon size in manifest (#7073 )	2023-10-03 11:07:02 +02:00
Tanmoy	84fd13e872	docs: fix minor grammar and spellings (#7039 )	2023-10-02 10:11:02 +02:00
Alberto Torrigiotti	7d2b6f3374	docs: fix typo on homepage of developer docs (#7047 )	2023-09-29 20:52:53 -05:00
David Luzar	ceb637f5ea	fix: elements being dropped/duplicated when added to frame (#7057 )	2023-09-29 15:40:14 +02:00
hugofqt	4c35eba72d	feat: element alignments - snapping (#6256 ) Co-authored-by: Ryan Di <ryan.weihao.di@gmail.com> Co-authored-by: dwelle <luzar.david@gmail.com>	2023-09-28 16:28:08 +02:00
David Luzar	4765f5536e	fix: frame name not editable on dbl-click (#7037 )	2023-09-25 16:54:23 +02:00
David Luzar	556175558a	fix: polyfill `Element.replaceChildren` (#7034 )	2023-09-24 19:07:35 +02:00
Aakansha Doshi	4db73a7f95	docs: release @excalidraw/excalidraw@0.16.1 🎉 (#7020 )	2023-09-21 10:28:21 +05:30