Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage

feat: #8063 Added reddit links as embeddable

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

examples/excalidraw/components/ExampleApp.tsx

@@ -40,7 +40,7 @@ import type {
 } from "@excalidraw/excalidraw/dist/excalidraw/element/types";
 import type { ImportedLibraryData } from "@excalidraw/excalidraw/dist/excalidraw/data/types";
 
-import "./App.scss";
+import "./ExampleApp.scss";
 
 type Comment = {
   x: number;
@@ -73,7 +73,7 @@ export interface AppProps {
   excalidrawLib: typeof TExcalidraw;
 }
 
-export default function App({
+export default function ExampleApp({
   appTitle,
   useCustom,
   customArgs,

examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,7 +1,7 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import App from "../../components/App";
+import App from "../../components/ExampleApp";
 
 import "@excalidraw/excalidraw/index.css";
 

examples/excalidraw/with-script-in-browser/index.tsx

@@ -1,4 +1,4 @@
-import App from "../components/App";
+import App from "../components/ExampleApp";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 

excalidraw-app/App.tsx

@@ -4,6 +4,7 @@ import { trackEvent } from "../packages/excalidraw/analytics";
 import { getDefaultAppState } from "../packages/excalidraw/appState";
 import { ErrorDialog } from "../packages/excalidraw/components/ErrorDialog";
 import { TopErrorBoundary } from "./components/TopErrorBoundary";
+import { useMathSubtype } from "../packages/excalidraw/element/subtypes/mathjax";
 import {
   APP_NAME,
   EVENT,
@@ -355,6 +356,8 @@ const ExcalidrawWrapper = () => {
   const [excalidrawAPI, excalidrawRefCallback] =
     useCallbackRefState<ExcalidrawImperativeAPI>();
 
+  useMathSubtype(excalidrawAPI);
+
   const [, setShareDialogState] = useAtom(shareDialogStateAtom);
   const [collabAPI] = useAtom(collabAPIAtom);
   const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
@@ -649,7 +652,12 @@ const ExcalidrawWrapper = () => {
 
     // Render the debug scene if the debug canvas is available
     if (debugCanvasRef.current && excalidrawAPI) {
-      debugRenderer(debugCanvasRef.current, appState, window.devicePixelRatio);
+      debugRenderer(
+        debugCanvasRef.current,
+        appState,
+        window.devicePixelRatio,
+        () => forceRefresh((prev) => !prev),
+      );
     }
   };
 

excalidraw-app/components/DebugCanvas.tsx

@@ -68,12 +68,17 @@ const _debugRenderer = (
   canvas: HTMLCanvasElement,
   appState: AppState,
   scale: number,
+  refresh: () => void,
 ) => {
   const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
     canvas,
     scale,
   );
 
+  if (appState.height !== canvas.height || appState.width !== canvas.width) {
+    refresh();
+  }
+
   const context = bootstrapCanvas({
     canvas,
     scale,
@@ -138,8 +143,13 @@ export const saveDebugState = (debug: { enabled: boolean }) => {
 };
 
 export const debugRenderer = throttleRAF(
-  (canvas: HTMLCanvasElement, appState: AppState, scale: number) => {
-    _debugRenderer(canvas, appState, scale);
+  (
+    canvas: HTMLCanvasElement,
+    appState: AppState,
+    scale: number,
+    refresh: () => void,
+  ) => {
+    _debugRenderer(canvas, appState, scale, refresh);
   },
   { trailing: true },
 );

excalidraw-app/index.html

@@ -130,15 +130,6 @@
     </script>
     <% } %>
 
-    <!-- For Nunito only preload the latin range, which should be good enough for now -->
-    <link
-      rel="preload"
-      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-
     <!-- Register Assistant as the UI font, before the scene inits -->
     <link
       rel="stylesheet"

excalidraw-app/vite.config.mts

@@ -48,6 +48,8 @@ export default defineConfig({
       },
     },
     sourcemap: true,
+    // don't auto-inline small assets (i.e. fonts hosted on CDN)
+    assetsInlineLimit: 0,
   },
   plugins: [
     woff2BrowserPlugin(),

package.json

@@ -32,7 +32,9 @@
     "husky": "7.0.4",
     "jsdom": "22.1.0",
     "lint-staged": "12.3.7",
+    "patch-package": "8.0.0",
     "pepjs": "0.5.3",
+    "postinstall-postinstall": "2.1.0",
     "prettier": "2.6.2",
     "rewire": "6.0.0",
     "typescript": "4.9.4",
@@ -61,6 +63,7 @@
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prepare": "husky install",
+    "postinstall": "patch-package",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "yarn --cwd ./excalidraw-app start",
     "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",

packages/excalidraw/CHANGELOG.md

@@ -15,6 +15,8 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
+
 - `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
 
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)
@@ -303,6 +305,7 @@ define: {
 
 ## 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)

packages/excalidraw/actions/actionBoundText.tsx

@@ -10,7 +10,7 @@ import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
-  measureText,
+  measureTextElement,
   redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@@ -31,7 +31,7 @@ import type {
 } from "../element/types";
 import type { AppState } from "../types";
 import type { Mutable } from "../utility-types";
-import { arrayToMap, getFontString } from "../utils";
+import { arrayToMap } from "../utils";
 import { register } from "./register";
 import { syncMovedIndices } from "../fractionalIndex";
 import { StoreAction } from "../store";
@@ -51,11 +51,9 @@ export const actionUnbindText = register({
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement) {
-        const { width, height } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-          boundTextElement.lineHeight,
-        );
+        const { width, height } = measureTextElement(boundTextElement, {
+          text: boundTextElement.originalText,
+        });
         const originalContainerHeight = getOriginalContainerHeightFromCache(
           element.id,
         );

packages/excalidraw/actions/actionFinalize.tsx

@@ -15,7 +15,7 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
@@ -115,7 +115,7 @@ export const actionFinalize = register({
           mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
-                ? point(firstPoint[0], firstPoint[1])
+                ? pointFrom(firstPoint[0], firstPoint[1])
                 : p,
             ),
           });
@@ -217,6 +217,7 @@ export const actionFinalize = register({
       onClick={updateData}
       visible={appState.multiElement != null}
       size={data?.size || "medium"}
+      style={{ pointerEvents: "all" }}
     />
   ),
 });

packages/excalidraw/actions/actionFlip.test.tsx

@@ -0,0 +1,211 @@
+import React from "react";
+import { Excalidraw } from "../index";
+import { render } from "../tests/test-utils";
+import { API } from "../tests/helpers/api";
+import { pointFrom } from "../../math";
+import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
+
+const { h } = window;
+
+describe("flipping re-centers selection", () => {
+  it("elbow arrow touches group selection side yet it remains in place after multiple moves", async () => {
+    const elements = [
+      API.createElement({
+        type: "rectangle",
+        id: "rec1",
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        boundElements: [{ id: "arr", type: "arrow" }],
+      }),
+      API.createElement({
+        type: "rectangle",
+        id: "rec2",
+        x: 220,
+        y: 250,
+        width: 100,
+        height: 100,
+        boundElements: [{ id: "arr", type: "arrow" }],
+      }),
+      API.createElement({
+        type: "arrow",
+        id: "arr",
+        x: 149.9,
+        y: 95,
+        width: 156,
+        height: 239.9,
+        startBinding: {
+          elementId: "rec1",
+          focus: 0,
+          gap: 5,
+          fixedPoint: [0.49, -0.05],
+        },
+        endBinding: {
+          elementId: "rec2",
+          focus: 0,
+          gap: 5,
+          fixedPoint: [-0.05, 0.49],
+        },
+        startArrowhead: null,
+        endArrowhead: "arrow",
+        points: [
+          pointFrom(0, 0),
+          pointFrom(0, -35),
+          pointFrom(-90.9, -35),
+          pointFrom(-90.9, 204.9),
+          pointFrom(65.1, 204.9),
+        ],
+        elbowed: true,
+      }),
+    ];
+    await render(<Excalidraw initialData={{ elements }} />);
+
+    API.setSelectedElements(elements);
+
+    expect(Object.keys(h.state.selectedElementIds).length).toBe(3);
+
+    API.executeAction(actionFlipHorizontal);
+    API.executeAction(actionFlipHorizontal);
+    API.executeAction(actionFlipHorizontal);
+    API.executeAction(actionFlipHorizontal);
+
+    const rec1 = h.elements.find((el) => el.id === "rec1");
+    expect(rec1?.x).toBeCloseTo(100);
+    expect(rec1?.y).toBeCloseTo(100);
+
+    const rec2 = h.elements.find((el) => el.id === "rec2");
+    expect(rec2?.x).toBeCloseTo(220);
+    expect(rec2?.y).toBeCloseTo(250);
+  });
+});
+
+describe("flipping arrowheads", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  it("flipping bound arrow should flip arrowheads only", () => {
+    const rect = API.createElement({
+      type: "rectangle",
+      boundElements: [{ type: "arrow", id: "arrow1" }],
+    });
+    const arrow = API.createElement({
+      type: "arrow",
+      id: "arrow1",
+      startArrowhead: "arrow",
+      endArrowhead: null,
+      endBinding: {
+        elementId: rect.id,
+        focus: 0.5,
+        gap: 5,
+      },
+    });
+
+    API.setElements([rect, arrow]);
+    API.setSelectedElements([arrow]);
+
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe(null);
+
+    API.executeAction(actionFlipHorizontal);
+    expect(API.getElement(arrow).startArrowhead).toBe(null);
+    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
+
+    API.executeAction(actionFlipHorizontal);
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe(null);
+
+    API.executeAction(actionFlipVertical);
+    expect(API.getElement(arrow).startArrowhead).toBe(null);
+    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
+  });
+
+  it("flipping bound arrow should flip arrowheads only 2", () => {
+    const rect = API.createElement({
+      type: "rectangle",
+      boundElements: [{ type: "arrow", id: "arrow1" }],
+    });
+    const rect2 = API.createElement({
+      type: "rectangle",
+      boundElements: [{ type: "arrow", id: "arrow1" }],
+    });
+    const arrow = API.createElement({
+      type: "arrow",
+      id: "arrow1",
+      startArrowhead: "arrow",
+      endArrowhead: "circle",
+      startBinding: {
+        elementId: rect.id,
+        focus: 0.5,
+        gap: 5,
+      },
+      endBinding: {
+        elementId: rect2.id,
+        focus: 0.5,
+        gap: 5,
+      },
+    });
+
+    API.setElements([rect, rect2, arrow]);
+    API.setSelectedElements([arrow]);
+
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe("circle");
+
+    API.executeAction(actionFlipHorizontal);
+    expect(API.getElement(arrow).startArrowhead).toBe("circle");
+    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
+
+    API.executeAction(actionFlipVertical);
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe("circle");
+  });
+
+  it("flipping unbound arrow shouldn't flip arrowheads", () => {
+    const arrow = API.createElement({
+      type: "arrow",
+      id: "arrow1",
+      startArrowhead: "arrow",
+      endArrowhead: "circle",
+    });
+
+    API.setElements([arrow]);
+    API.setSelectedElements([arrow]);
+
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe("circle");
+
+    API.executeAction(actionFlipHorizontal);
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe("circle");
+  });
+
+  it("flipping bound arrow shouldn't flip arrowheads if selected alongside non-arrow eleemnt", () => {
+    const rect = API.createElement({
+      type: "rectangle",
+      boundElements: [{ type: "arrow", id: "arrow1" }],
+    });
+    const arrow = API.createElement({
+      type: "arrow",
+      id: "arrow1",
+      startArrowhead: "arrow",
+      endArrowhead: null,
+      endBinding: {
+        elementId: rect.id,
+        focus: 0.5,
+        gap: 5,
+      },
+    });
+
+    API.setElements([rect, arrow]);
+    API.setSelectedElements([rect, arrow]);
+
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe(null);
+
+    API.executeAction(actionFlipHorizontal);
+    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
+    expect(API.getElement(arrow).endArrowhead).toBe(null);
+  });
+});

packages/excalidraw/actions/actionFlip.ts

@@ -2,6 +2,8 @@ import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
 import type {
+  ExcalidrawArrowElement,
+  ExcalidrawElbowArrowElement,
   ExcalidrawElement,
   NonDeleted,
   NonDeletedSceneElementsMap,
@@ -18,7 +20,13 @@ import {
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { flipHorizontal, flipVertical } from "../components/icons";
 import { StoreAction } from "../store";
-import { isLinearElement } from "../element/typeChecks";
+import {
+  isArrowElement,
+  isElbowArrow,
+  isLinearElement,
+} from "../element/typeChecks";
+import { mutateElbowArrow } from "../element/routing";
+import { mutateElement, newElementWith } from "../element/mutateElement";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -109,7 +117,23 @@ const flipElements = (
   flipDirection: "horizontal" | "vertical",
   app: AppClassProperties,
 ): ExcalidrawElement[] => {
-  const { minX, minY, maxX, maxY } = getCommonBoundingBox(selectedElements);
+  if (
+    selectedElements.every(
+      (element) =>
+        isArrowElement(element) && (element.startBinding || element.endBinding),
+    )
+  ) {
+    return selectedElements.map((element) => {
+      const _element = element as ExcalidrawArrowElement;
+      return newElementWith(_element, {
+        startArrowhead: _element.endArrowhead,
+        endArrowhead: _element.startArrowhead,
+      });
+    });
+  }
+
+  const { minX, minY, maxX, maxY, midX, midY } =
+    getCommonBoundingBox(selectedElements);
 
   resizeMultipleElements(
     elementsMap,
@@ -131,5 +155,48 @@ const flipElements = (
     [],
   );
 
+  // ---------------------------------------------------------------------------
+  // flipping arrow elements (and potentially other) makes the selection group
+  // "move" across the canvas because of how arrows can bump against the "wall"
+  // of the selection, so we need to center the group back to the original
+  // position so that repeated flips don't accumulate the offset
+
+  const { elbowArrows, otherElements } = selectedElements.reduce(
+    (
+      acc: {
+        elbowArrows: ExcalidrawElbowArrowElement[];
+        otherElements: ExcalidrawElement[];
+      },
+      element,
+    ) =>
+      isElbowArrow(element)
+        ? { ...acc, elbowArrows: acc.elbowArrows.concat(element) }
+        : { ...acc, otherElements: acc.otherElements.concat(element) },
+    { elbowArrows: [], otherElements: [] },
+  );
+
+  const { midX: newMidX, midY: newMidY } =
+    getCommonBoundingBox(selectedElements);
+  const [diffX, diffY] = [midX - newMidX, midY - newMidY];
+  otherElements.forEach((element) =>
+    mutateElement(element, {
+      x: element.x + diffX,
+      y: element.y + diffY,
+    }),
+  );
+  elbowArrows.forEach((element) =>
+    mutateElbowArrow(
+      element,
+      elementsMap,
+      element.points,
+      undefined,
+      undefined,
+      {
+        informMutation: false,
+      },
+    ),
+  );
+  // ---------------------------------------------------------------------------
+
   return selectedElements;
 };

packages/excalidraw/actions/actionProperties.tsx

@@ -116,7 +116,7 @@ import {
 import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
-import { point, vector } from "../../math";
+import { pointFrom, vector } from "../../math";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -1651,7 +1651,7 @@ export const actionChangeArrowType = register({
             elementsMap,
             [finalStartPoint, finalEndPoint].map(
               (p): LocalPoint =>
-                point(p[0] - newElement.x, p[1] - newElement.y),
+                pointFrom(p[0] - newElement.x, p[1] - newElement.y),
             ),
             vector(0, 0),
             {
@@ -1685,19 +1685,6 @@ export const actionChangeArrowType = register({
                 : {}),
             },
           );
-        } else {
-          mutateElement(
-            newElement,
-            {
-              startBinding: newElement.startBinding
-                ? { ...newElement.startBinding, fixedPoint: null }
-                : null,
-              endBinding: newElement.endBinding
-                ? { ...newElement.endBinding, fixedPoint: null }
-                : null,
-            },
-            false,
-          );
         }
 
         return newElement;

packages/excalidraw/actions/manager.tsx

@@ -6,6 +6,7 @@ import type {
   ActionResult,
   PanelComponentProps,
   ActionSource,
+  ActionPredicateFn,
 } from "./types";
 import type {
   ExcalidrawElement,
@@ -45,6 +46,7 @@ const trackAction = (
 
 export class ActionManager {
   actions = {} as Record<ActionName, Action>;
+  actionPredicates = [] as ActionPredicateFn[];
 
   updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
 
@@ -72,6 +74,37 @@ 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 as ActionName];
+      if (filter(action, elements, appState, this.app, data)) {
+        actions.push(action);
+      }
+    }
+    return actions;
+  }
+
   registerAction(action: Action) {
     this.actions[action.name] = action;
   }
@@ -88,7 +121,7 @@ export class ActionManager {
         (action) =>
           (action.name in canvasActions
             ? canvasActions[action.name as keyof typeof canvasActions]
-            : true) &&
+            : this.isActionEnabled(action, { noPredicates: true })) &&
           action.keyTest &&
           action.keyTest(
             event,
@@ -147,7 +180,7 @@ export class ActionManager {
       "PanelComponent" in this.actions[name] &&
       (name in canvasActions
         ? canvasActions[name as keyof typeof canvasActions]
-        : true)
+        : this.isActionEnabled(this.actions[name], { noPredicates: true }))
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
@@ -169,6 +202,7 @@ export class ActionManager {
 
       return (
         <PanelComponent
+          key={name}
           elements={this.getElementsIncludingDeleted()}
           appState={this.getAppState()}
           updateData={updateData}
@@ -182,13 +216,31 @@ export class ActionManager {
     return null;
   };
 
-  isActionEnabled = (action: Action) => {
-    const elements = this.getElementsIncludingDeleted();
+  isActionEnabled = (
+    action: Action,
+    opts?: {
+      elements?: readonly ExcalidrawElement[];
+      data?: Record<string, any>;
+      noPredicates?: boolean;
+    },
+  ): boolean => {
+    const elements = opts?.elements ?? this.getElementsIncludingDeleted();
     const appState = this.getAppState();
+    const data = opts?.data;
 
-    return (
-      !action.predicate ||
-      action.predicate(elements, appState, this.app.props, this.app)
-    );
+    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, this.app, data)) {
+        enabled = false;
+      }
+    });
+    return enabled;
   };
 }

packages/excalidraw/actions/shortcuts.ts

@@ -2,11 +2,12 @@ import { isDarwin } from "../constants";
 import { t } from "../i18n";
 import type { SubtypeOf } from "../utility-types";
 import { getShortcutKey } from "../utils";
-import type { ActionName } from "./types";
+import type { ActionName, CustomActionName } from "./types";
 
 export type ShortcutName =
   | SubtypeOf<
       ActionName,
+      | CustomActionName
       | "toggleTheme"
       | "loadScene"
       | "clearCanvas"
@@ -54,6 +55,15 @@ export type ShortcutName =
   | "commandPalette"
   | "searchMenu";
 
+export const registerCustomShortcuts = (
+  shortcuts: Record<CustomActionName, string[]>,
+) => {
+  for (const key in shortcuts) {
+    const shortcut = key as CustomActionName;
+    shortcutMap[shortcut] = shortcuts[shortcut];
+  }
+};
+
 const shortcutMap: Record<ShortcutName, string[]> = {
   toggleTheme: [getShortcutKey("Shift+Alt+D")],
   saveScene: [getShortcutKey("CtrlOrCmd+S")],

packages/excalidraw/actions/types.ts

@@ -41,10 +41,24 @@ 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,
+  app: AppClassProperties,
+  data?: Record<string, any>,
+) => boolean;
+
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
 
+export const makeCustomActionName = (name: string) =>
+  `custom.${name}` as CustomActionName;
+export type CustomActionName = `custom.${string}`;
 export type ActionName =
+  | CustomActionName
   | "copy"
   | "cut"
   | "paste"
@@ -179,6 +193,7 @@ export interface Action {
     appState: AppState,
     appProps: ExcalidrawProps,
     app: AppClassProperties,
+    data?: Record<string, any>,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
   trackEvent:

packages/excalidraw/appState.ts

@@ -170,6 +170,8 @@ 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 },

packages/excalidraw/charts.ts

@@ -1,5 +1,5 @@
 import type { Radians } from "../math";
-import { point } from "../math";
+import { pointFrom } from "../math";
 import {
   COLOR_PALETTE,
   DEFAULT_CHART_COLOR_INDEX,
@@ -13,6 +13,8 @@ import {
 import { newElement, newLinearElement, newTextElement } from "./element";
 import type { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
+import type { AppState } from "./types";
+import { selectSubtype } from "./element/subtypes";
 
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
 
@@ -25,6 +27,8 @@ export interface Spreadsheet {
   title: string | null;
   labels: string[] | null;
   values: number[];
+  activeSubtypes?: AppState["activeSubtypes"];
+  customData?: AppState["customData"];
 }
 
 export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
@@ -195,13 +199,17 @@ 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 ? `${label.slice(0, 5)}...` : label,
+        text:
+          label.length > 8 && custom.subtype === undefined
+            ? `${label.slice(0, 5)}...`
+            : label,
         x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
         y: y + BAR_GAP / 2,
         width: BAR_WIDTH,
@@ -209,6 +217,7 @@ const chartXLabels = (
         fontSize: 16,
         textAlign: "center",
         verticalAlign: "top",
+        ...custom,
       });
     }) || []
   );
@@ -229,6 +238,7 @@ const chartYLabels = (
     y: y - BAR_GAP,
     text: "0",
     textAlign: "right",
+    ...selectSubtype(spreadsheet, "text"),
   });
 
   const maxYLabel = newTextElement({
@@ -239,6 +249,7 @@ const chartYLabels = (
     y: y - BAR_HEIGHT - minYLabel.height / 2,
     text: Math.max(...spreadsheet.values).toLocaleString(),
     textAlign: "right",
+    ...selectSubtype(spreadsheet, "text"),
   });
 
   return [minYLabel, maxYLabel];
@@ -260,7 +271,8 @@ const chartLines = (
     x,
     y,
     width: chartWidth,
-    points: [point(0, 0), point(chartWidth, 0)],
+    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    ...selectSubtype(spreadsheet, "line"),
   });
 
   const yLine = newLinearElement({
@@ -271,7 +283,8 @@ const chartLines = (
     x,
     y,
     height: chartHeight,
-    points: [point(0, 0), point(0, -chartHeight)],
+    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
+    ...selectSubtype(spreadsheet, "line"),
   });
 
   const maxLine = newLinearElement({
@@ -284,7 +297,8 @@ const chartLines = (
     strokeStyle: "dotted",
     width: chartWidth,
     opacity: GRID_OPACITY,
-    points: [point(0, 0), point(chartWidth, 0)],
+    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    ...selectSubtype(spreadsheet, "line"),
   });
 
   return [xLine, yLine, maxLine];
@@ -311,6 +325,7 @@ const chartBaseElements = (
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
         roundness: null,
         textAlign: "center",
+        ...selectSubtype(spreadsheet, "text"),
       })
     : null;
 
@@ -327,6 +342,7 @@ const chartBaseElements = (
         strokeColor: COLOR_PALETTE.black,
         fillStyle: "solid",
         opacity: 6,
+        ...selectSubtype(spreadsheet, "rectangle"),
       })
     : null;
 
@@ -359,6 +375,7 @@ const chartTypeBar = (
       y: y - barHeight - BAR_GAP,
       width: BAR_WIDTH,
       height: barHeight,
+      ...selectSubtype(spreadsheet, "rectangle"),
     });
   });
 
@@ -409,6 +426,7 @@ const chartTypeLine = (
     width: maxX - minX,
     strokeWidth: 2,
     points: points as any,
+    ...selectSubtype(spreadsheet, "line"),
   });
 
   const dots = spreadsheet.values.map((value, index) => {
@@ -425,6 +443,7 @@ const chartTypeLine = (
       y: y + cy - BAR_GAP * 2,
       width: BAR_GAP,
       height: BAR_GAP,
+      ...selectSubtype(spreadsheet, "ellipse"),
     });
   });
 
@@ -441,7 +460,8 @@ const chartTypeLine = (
       height: cy,
       strokeStyle: "dotted",
       opacity: GRID_OPACITY,
-      points: [point(0, 0), point(0, cy)],
+      points: [pointFrom(0, 0), pointFrom(0, cy)],
+      ...selectSubtype(spreadsheet, "line"),
     });
   });
 

packages/excalidraw/clipboard.ts

@@ -2,7 +2,7 @@ import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import type { BinaryFiles } from "./types";
+import type { AppState, BinaryFiles } from "./types";
 import type { Spreadsheet } from "./charts";
 import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
 import {
@@ -333,6 +333,7 @@ const parseClipboardEvent = async (
 export const parseClipboard = async (
   event: ClipboardEvent,
   isPlainPaste = false,
+  appState?: AppState,
 ): Promise<ClipboardData> => {
   const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
 
@@ -349,6 +350,10 @@ export const parseClipboard = async (
       !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
 
     if (spreadsheetResult) {
+      if ("spreadsheet" in spreadsheetResult) {
+        spreadsheetResult.spreadsheet.activeSubtypes = appState?.activeSubtypes;
+        spreadsheetResult.spreadsheet.customData = appState?.customData;
+      }
       return spreadsheetResult;
     }
   } catch (error: any) {

packages/excalidraw/components/Actions.tsx

@@ -21,6 +21,7 @@ import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
+import { SubtypeShapeActions } from "./Subtypes";
 import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import {
@@ -136,6 +137,7 @@ export const SelectedShapeActions = ({
       {canChangeBackgroundColor(appState, targetElements) && (
         <div>{renderAction("changeBackgroundColor")}</div>
       )}
+      <SubtypeShapeActions elements={targetElements} />
       {showFillIcons && renderAction("changeFillStyle")}
 
       {(hasStrokeWidth(appState.activeTool.type) ||

packages/excalidraw/components/App.tsx

@@ -185,6 +185,7 @@ import type {
   MagicGenerationData,
   ExcalidrawNonSelectionElement,
   ExcalidrawArrowElement,
+  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -287,6 +288,7 @@ import {
   getDateTime,
   isShallowEqual,
   arrayToMap,
+  toBrandedType,
 } from "../utils";
 import {
   createSrcDoc,
@@ -299,6 +301,18 @@ import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
+import type {
+  SubtypeLoadedCb,
+  SubtypeRecord,
+  SubtypePrepFn,
+} from "../element/subtypes";
+import {
+  checkRefreshOnSubtypeLoad,
+  isSubtypeAction,
+  prepareSubtype,
+  selectSubtype,
+  subtypeActionPredicate,
+} from "../element/subtypes";
 import {
   dataURLToFile,
   generateIdFromFile,
@@ -435,7 +449,7 @@ import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
 import { isMaybeMermaidDefinition } from "../mermaid";
 import NewElementCanvas from "./canvases/NewElementCanvas";
-import { mutateElbowArrow } from "../element/routing";
+import { mutateElbowArrow, updateElbowArrow } from "../element/routing";
 import {
   FlowChartCreator,
   FlowChartNavigator,
@@ -443,7 +457,7 @@ import {
 } from "../element/flowchart";
 import { searchItemInFocusAtom } from "./SearchMenu";
 import type { LocalPoint, Radians } from "../../math";
-import { point, pointDistance, vector } from "../../math";
+import { pointFrom, pointDistance, vector } from "../../math";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -708,6 +722,7 @@ class App extends React.Component<AppProps, AppState> {
         registerAction: (action: Action) => {
           this.actionManager.registerAction(action);
         },
+        addSubtype: this.addSubtype,
         refresh: this.refresh,
         setToast: this.setToast,
         id: this.id,
@@ -744,6 +759,19 @@ class App extends React.Component<AppProps, AppState> {
     this.actionManager.registerAction(
       createRedoAction(this.history, this.store),
     );
+    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();
+      }
+    };
+    return prepareSubtype(record, subtypePrepFn, subtypeLoadedCb);
   }
 
   private onWindowMessage(event: MessageEvent) {
@@ -2949,7 +2977,7 @@ class App extends React.Component<AppProps, AppState> {
       // event else some browsers (FF...) will clear the clipboardData
       // (something something security)
       let file = event?.clipboardData?.files[0];
-      const data = await parseClipboard(event, isPlainPaste);
+      const data = await parseClipboard(event, isPlainPaste, this.state);
       if (!file && !isPlainPaste) {
         if (data.mixedContent) {
           return this.addElementsFromMixedContentPaste(data.mixedContent, {
@@ -3109,7 +3137,45 @@ class App extends React.Component<AppProps, AppState> {
     retainSeed?: boolean;
     fitToContent?: boolean;
   }) => {
-    const elements = restoreElements(opts.elements, null, undefined);
+    let elements = opts.elements.map((el, _, elements) => {
+      if (isElbowArrow(el)) {
+        const startEndElements = [
+          el.startBinding &&
+            elements.find((l) => l.id === el.startBinding?.elementId),
+          el.endBinding &&
+            elements.find((l) => l.id === el.endBinding?.elementId),
+        ];
+        const startBinding = startEndElements[0] ? el.startBinding : null;
+        const endBinding = startEndElements[1] ? el.endBinding : null;
+        return {
+          ...el,
+          ...updateElbowArrow(
+            {
+              ...el,
+              startBinding,
+              endBinding,
+            },
+            toBrandedType<NonDeletedSceneElementsMap>(
+              new Map(
+                startEndElements
+                  .filter((x) => x != null)
+                  .map(
+                    (el) =>
+                      [el!.id, el] as [
+                        string,
+                        Ordered<NonDeletedExcalidrawElement>,
+                      ],
+                  ),
+              ),
+            ),
+            [el.points[0], el.points[el.points.length - 1]],
+          ),
+        };
+      }
+
+      return el;
+    });
+    elements = restoreElements(elements, null, undefined);
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
 
     const elementsCenterX = distance(minX, maxX) / 2;
@@ -3349,6 +3415,7 @@ class App extends React.Component<AppProps, AppState> {
       fontFamily: this.state.currentItemFontFamily,
       textAlign: DEFAULT_TEXT_ALIGN,
       verticalAlign: DEFAULT_VERTICAL_ALIGN,
+      ...selectSubtype(this.state, "text"),
       locked: false,
     };
     const fontString = getFontString({
@@ -4870,7 +4937,7 @@ class App extends React.Component<AppProps, AppState> {
         this.getElementHitThreshold(),
       );
 
-      return isPointInShape(point(x, y), selectionShape);
+      return isPointInShape(pointFrom(x, y), selectionShape);
     }
 
     // take bound text element into consideration for hit collision as well
@@ -5058,6 +5125,7 @@ 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,
@@ -5229,7 +5297,7 @@ class App extends React.Component<AppProps, AppState> {
           element,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          point(scenePointer.x, scenePointer.y),
+          pointFrom(scenePointer.x, scenePointer.y),
           this.device.editor.isMobile,
         )
       );
@@ -5241,11 +5309,14 @@ class App extends React.Component<AppProps, AppState> {
     isTouchScreen: boolean,
   ) => {
     const draggedDistance = pointDistance(
-      point(
+      pointFrom(
         this.lastPointerDownEvent!.clientX,
         this.lastPointerDownEvent!.clientY,
       ),
-      point(this.lastPointerUpEvent!.clientX, this.lastPointerUpEvent!.clientY),
+      pointFrom(
+        this.lastPointerUpEvent!.clientX,
+        this.lastPointerUpEvent!.clientY,
+      ),
     );
     if (
       !this.hitLinkElement ||
@@ -5264,7 +5335,7 @@ class App extends React.Component<AppProps, AppState> {
       this.hitLinkElement,
       elementsMap,
       this.state,
-      point(lastPointerDownCoords.x, lastPointerDownCoords.y),
+      pointFrom(lastPointerDownCoords.x, lastPointerDownCoords.y),
       this.device.editor.isMobile,
     );
     const lastPointerUpCoords = viewportCoordsToSceneCoords(
@@ -5275,7 +5346,7 @@ class App extends React.Component<AppProps, AppState> {
       this.hitLinkElement,
       elementsMap,
       this.state,
-      point(lastPointerUpCoords.x, lastPointerUpCoords.y),
+      pointFrom(lastPointerUpCoords.x, lastPointerUpCoords.y),
       this.device.editor.isMobile,
     );
     if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@@ -5525,7 +5596,7 @@ class App extends React.Component<AppProps, AppState> {
         // threshold, add a point
         if (
           pointDistance(
-            point(scenePointerX - rx, scenePointerY - ry),
+            pointFrom(scenePointerX - rx, scenePointerY - ry),
             lastPoint,
           ) >= LINE_CONFIRM_THRESHOLD
         ) {
@@ -5534,7 +5605,7 @@ class App extends React.Component<AppProps, AppState> {
             {
               points: [
                 ...points,
-                point<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
+                pointFrom<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
               ],
             },
             false,
@@ -5548,7 +5619,7 @@ class App extends React.Component<AppProps, AppState> {
         points.length > 2 &&
         lastCommittedPoint &&
         pointDistance(
-          point(scenePointerX - rx, scenePointerY - ry),
+          pointFrom(scenePointerX - rx, scenePointerY - ry),
           lastCommittedPoint,
         ) < LINE_CONFIRM_THRESHOLD
       ) {
@@ -5596,7 +5667,7 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
             [
               ...points.slice(0, -1),
-              point<LocalPoint>(
+              pointFrom<LocalPoint>(
                 lastCommittedX + dxFromLastCommitted,
                 lastCommittedY + dyFromLastCommitted,
               ),
@@ -5615,7 +5686,7 @@ class App extends React.Component<AppProps, AppState> {
             {
               points: [
                 ...points.slice(0, -1),
-                point<LocalPoint>(
+                pointFrom<LocalPoint>(
                   lastCommittedX + dxFromLastCommitted,
                   lastCommittedY + dyFromLastCommitted,
                 ),
@@ -5844,8 +5915,8 @@ class App extends React.Component<AppProps, AppState> {
     };
 
     const distance = pointDistance(
-      point(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-      point(scenePointer.x, scenePointer.y),
+      pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
+      pointFrom(scenePointer.x, scenePointer.y),
     );
     const threshold = this.getElementHitThreshold();
     const p = { ...pointerDownState.lastCoords };
@@ -6357,7 +6428,7 @@ class App extends React.Component<AppProps, AppState> {
           this.hitLinkElement,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          point(scenePointer.x, scenePointer.y),
+          pointFrom(scenePointer.x, scenePointer.y),
         )
       ) {
         this.handleEmbeddableCenterClick(this.hitLinkElement);
@@ -7048,7 +7119,7 @@ class App extends React.Component<AppProps, AppState> {
       simulatePressure,
       locked: false,
       frameId: topLayerFrame ? topLayerFrame.id : null,
-      points: [point<LocalPoint>(0, 0)],
+      points: [pointFrom<LocalPoint>(0, 0)],
       pressures: simulatePressure ? [] : [event.pressure],
     });
 
@@ -7211,6 +7282,7 @@ 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,
     });
@@ -7257,7 +7329,10 @@ class App extends React.Component<AppProps, AppState> {
         multiElement.points.length > 1 &&
         lastCommittedPoint &&
         pointDistance(
-          point(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry),
+          pointFrom(
+            pointerDownState.origin.x - rx,
+            pointerDownState.origin.y - ry,
+          ),
           lastCommittedPoint,
         ) < LINE_CONFIRM_THRESHOLD
       ) {
@@ -7324,6 +7399,7 @@ class App extends React.Component<AppProps, AppState> {
                     null,
               startArrowhead,
               endArrowhead,
+              ...selectSubtype(this.state, elementType),
               locked: false,
               frameId: topLayerFrame ? topLayerFrame.id : null,
               elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
@@ -7343,6 +7419,7 @@ class App extends React.Component<AppProps, AppState> {
                 this.state.currentItemRoundness === "round"
                   ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
                   : null,
+              ...selectSubtype(this.state, elementType),
               locked: false,
               frameId: topLayerFrame ? topLayerFrame.id : null,
             });
@@ -7359,7 +7436,7 @@ class App extends React.Component<AppProps, AppState> {
         };
       });
       mutateElement(element, {
-        points: [...element.points, point<LocalPoint>(0, 0)],
+        points: [...element.points, pointFrom<LocalPoint>(0, 0)],
       });
       const boundElement = getHoveredElementForBinding(
         pointerDownState.origin,
@@ -7423,6 +7500,7 @@ 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;
@@ -7612,8 +7690,8 @@ class App extends React.Component<AppProps, AppState> {
       ) {
         if (
           pointDistance(
-            point(pointerCoords.x, pointerCoords.y),
-            point(pointerDownState.origin.x, pointerDownState.origin.y),
+            pointFrom(pointerCoords.x, pointerCoords.y),
+            pointFrom(pointerDownState.origin.x, pointerDownState.origin.y),
           ) < DRAGGING_THRESHOLD
         ) {
           return;
@@ -7962,7 +8040,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points, point<LocalPoint>(dx, dy)],
+                points: [...points, pointFrom<LocalPoint>(dx, dy)],
                 pressures,
               },
               false,
@@ -7991,7 +8069,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points, point<LocalPoint>(dx, dy)],
+                points: [...points, pointFrom<LocalPoint>(dx, dy)],
               },
               false,
             );
@@ -7999,7 +8077,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElbowArrow(
               newElement,
               elementsMap,
-              [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
+              [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
               vector(0, 0),
               undefined,
               {
@@ -8011,7 +8089,7 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
+                points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
               },
               false,
             );
@@ -8320,9 +8398,9 @@ class App extends React.Component<AppProps, AppState> {
           : [...newElement.pressures, childEvent.pressure];
 
         mutateElement(newElement, {
-          points: [...points, point<LocalPoint>(dx, dy)],
+          points: [...points, pointFrom<LocalPoint>(dx, dy)],
           pressures,
-          lastCommittedPoint: point<LocalPoint>(dx, dy),
+          lastCommittedPoint: pointFrom<LocalPoint>(dx, dy),
         });
 
         this.actionManager.executeAction(actionFinalize);
@@ -8369,7 +8447,7 @@ class App extends React.Component<AppProps, AppState> {
           mutateElement(newElement, {
             points: [
               ...newElement.points,
-              point<LocalPoint>(
+              pointFrom<LocalPoint>(
                 pointerCoords.x - newElement.x,
                 pointerCoords.y - newElement.y,
               ),
@@ -8683,8 +8761,8 @@ class App extends React.Component<AppProps, AppState> {
         this.eraserTrail.endPath();
 
         const draggedDistance = pointDistance(
-          point(pointerStart.clientX, pointerStart.clientY),
-          point(pointerEnd.clientX, pointerEnd.clientY),
+          pointFrom(pointerStart.clientX, pointerStart.clientY),
+          pointFrom(pointerEnd.clientX, pointerEnd.clientY),
         );
 
         if (draggedDistance === 0) {
@@ -10002,6 +10080,39 @@ class App extends React.Component<AppProps, AppState> {
 
       const elementsToHighlight = new Set<ExcalidrawElement>();
       selectedFrames.forEach((frame) => {
+        const elementsInFrame = getFrameChildren(
+          this.scene.getNonDeletedElements(),
+          frame.id,
+        );
+
+        // keep elements' positions relative to their frames on frames resizing
+        if (transformHandleType) {
+          if (transformHandleType.includes("w")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+          if (transformHandleType.includes("n")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+        }
+
         getElementsInResizingFrame(
           this.scene.getNonDeletedElements(),
           frame,
@@ -10022,6 +10133,29 @@ 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 = [];
 

packages/excalidraw/components/LayerUI.tsx

@@ -56,6 +56,7 @@ import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
+import { SubtypeToggles } from "./Subtypes";
 import { LaserPointerButton } from "./LaserPointerButton";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
@@ -299,6 +300,7 @@ const LayerUI = ({
                           />
                         </Stack.Row>
                       </Island>
+                      <SubtypeToggles />
                       {isCollaborating && (
                         <Island
                           style={{

packages/excalidraw/components/MobileMenu.tsx

@@ -24,6 +24,7 @@ import { PenModeButton } from "./PenModeButton";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
+import { SubtypeToggles } from "./Subtypes";
 
 type MobileMenuProps = {
   appState: UIAppState;
@@ -89,6 +90,7 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
+                <SubtypeToggles />
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (

packages/excalidraw/components/PasteChartDialog.tsx

@@ -3,7 +3,7 @@ import React, { useLayoutEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import type { ChartElements, Spreadsheet } from "../charts";
 import { renderSpreadsheet } from "../charts";
-import type { ChartType } from "../element/types";
+import type { ChartType, ElementsMap } from "../element/types";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
 import type { UIAppState } from "../types";
@@ -11,6 +11,12 @@ 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;
 
@@ -26,41 +32,64 @@ 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 () => {
-      svg = await exportToSvg(
-        elements,
-        {
-          exportBackground: false,
-          viewBackgroundColor: oc.white,
-        },
-        null, // files
-      );
-      svg.querySelector(".style-fonts")?.remove();
-      previewNode.replaceChildren();
-      previewNode.appendChild(svg);
+      (async () => {
+        let elements: ChartElements;
+        await ensureSubtypesLoaded(
+          props.spreadsheet?.activeSubtypes ?? [],
+          () => {
+            if (!props.spreadsheet) {
+              return;
+            }
 
-      if (props.selected) {
-        (previewNode.parentNode as HTMLDivElement).focus();
-      }
+            elements = renderSpreadsheet(
+              props.chartType,
+              props.spreadsheet,
+              0,
+              0,
+            );
+            const elementsMap = new Map() as ElementsMap;
+            for (const element of elements) {
+              if (!element.isDeleted) {
+                elementsMap.set(element.id, element);
+              }
+            }
+            elements.forEach(
+              (el) =>
+                isTextElement(el) &&
+                redrawTextBoundingBox(
+                  el,
+                  getContainerElement(el, elementsMap),
+                  elementsMap,
+                ),
+            );
+            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();
+      };
     })();
-
-    return () => {
-      previewNode.replaceChildren();
-    };
   }, [props.spreadsheet, props.chartType, props.selected]);
 
   return (

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -20,7 +20,7 @@ import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { point, type GlobalPoint } from "../../../math";
+import { pointFrom, type GlobalPoint } from "../../../math";
 
 interface MultiDimensionProps {
   property: "width" | "height";
@@ -182,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
           nextHeight,
           initialHeight,
           aspectRatio,
-          point(x1, y1),
+          pointFrom(x1, y1),
           property,
           latestElements,
           originalElements,
@@ -287,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
         nextHeight,
         initialHeight,
         aspectRatio,
-        point(x1, y1),
+        pointFrom(x1, y1),
         property,
         latestElements,
         originalElements,

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -13,7 +13,7 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
-import { point, pointRotateRads } from "../../../math";
+import { pointFrom, pointRotateRads } from "../../../math";
 
 interface MultiPositionProps {
   property: "x" | "y";
@@ -44,8 +44,8 @@ const moveElements = (
       origElement.y + origElement.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      point(origElement.x, origElement.y),
-      point(cx, cy),
+      pointFrom(origElement.x, origElement.y),
+      pointFrom(cx, cy),
       origElement.angle,
     );
 
@@ -97,8 +97,8 @@ const moveGroupTo = (
       ];
 
       const [topLeftX, topLeftY] = pointRotateRads(
-        point(latestElement.x, latestElement.y),
-        point(cx, cy),
+        pointFrom(latestElement.x, latestElement.y),
+        pointFrom(cx, cy),
         latestElement.angle,
       );
 
@@ -171,8 +171,8 @@ const handlePositionChange: DragInputCallbackType<
             origElement.y + origElement.height / 2,
           ];
           const [topLeftX, topLeftY] = pointRotateRads(
-            point(origElement.x, origElement.y),
-            point(cx, cy),
+            pointFrom(origElement.x, origElement.y),
+            pointFrom(cx, cy),
             origElement.angle,
           );
 
@@ -241,8 +241,8 @@ const MultiPosition = ({
         const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
 
         const [topLeftX, topLeftY] = pointRotateRads(
-          point(el.x, el.y),
-          point(cx, cy),
+          pointFrom(el.x, el.y),
+          pointFrom(cx, cy),
           el.angle,
         );
 

packages/excalidraw/components/Stats/Position.tsx

@@ -4,7 +4,7 @@ import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { point, pointRotateRads } from "../../../math";
+import { pointFrom, pointRotateRads } from "../../../math";
 
 interface PositionProps {
   property: "x" | "y";
@@ -33,8 +33,8 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     origElement.y + origElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    point(origElement.x, origElement.y),
-    point(cx, cy),
+    pointFrom(origElement.x, origElement.y),
+    pointFrom(cx, cy),
     origElement.angle,
   );
 
@@ -93,8 +93,8 @@ const Position = ({
   appState,
 }: PositionProps) => {
   const [topLeftX, topLeftY] = pointRotateRads(
-    point(element.x, element.y),
-    point(element.x + element.width / 2, element.y + element.height / 2),
+    pointFrom(element.x, element.y),
+    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
     element.angle,
   );
   const value =

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

@@ -25,7 +25,7 @@ import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
 import type { Degrees } from "../../../math";
-import { degreesToRadians, point, pointRotateRads } from "../../../math";
+import { degreesToRadians, pointFrom, pointRotateRads } from "../../../math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -264,8 +264,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
 
@@ -283,8 +283,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 0, 45);
 
     let [newTopLeftX, newTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
 
@@ -294,8 +294,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 45, 66);
 
     [newTopLeftX, newTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
     expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -311,8 +311,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
     testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -321,8 +321,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
     expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -334,8 +334,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+      pointFrom(rectangle.x, rectangle.y),
+      pointFrom(cx, cy),
       rectangle.angle,
     );
 

packages/excalidraw/components/Stats/utils.ts

@@ -1,5 +1,5 @@
 import type { Radians } from "../../../math";
-import { point, pointRotateRads } from "../../../math";
+import { pointFrom, pointRotateRads } from "../../../math";
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
@@ -231,8 +231,8 @@ export const moveElement = (
     originalElement.y + originalElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    point(originalElement.x, originalElement.y),
-    point(cx, cy),
+    pointFrom(originalElement.x, originalElement.y),
+    pointFrom(cx, cy),
     originalElement.angle,
   );
 
@@ -240,8 +240,8 @@ export const moveElement = (
   const changeInY = newTopLeftY - topLeftY;
 
   const [x, y] = pointRotateRads(
-    point(newTopLeftX, newTopLeftY),
-    point(cx + changeInX, cy + changeInY),
+    pointFrom(newTopLeftX, newTopLeftY),
+    pointFrom(cx + changeInX, cy + changeInY),
     -originalElement.angle as Radians,
   );
 

packages/excalidraw/components/Subtypes.tsx

@@ -0,0 +1,188 @@
+import { getShortcutKey, updateActiveTool } from "../utils";
+import { t } from "../i18n";
+import type { Action } from "../actions/types";
+import { makeCustomActionName } from "../actions/types";
+import clsx from "clsx";
+import type { Subtype, SubtypeRecord } from "../element/subtypes";
+import {
+  getSubtypeNames,
+  hasAlwaysEnabledActions,
+  isSubtypeAction,
+  isValidSubtype,
+  subtypeCollides,
+} from "../element/subtypes";
+import type { ExcalidrawElement, Theme } from "../element/types";
+import {
+  useExcalidrawActionManager,
+  useExcalidrawContainer,
+  useExcalidrawSetAppState,
+} from "./App";
+import type { ContextMenuItems } from "./ContextMenu";
+import { Island } from "./Island";
+
+export const SubtypeButton = (
+  subtype: Subtype,
+  parentType: SubtypeRecord["parents"][number],
+  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: makeCustomActionName(subtype),
+    label: t(`toolBar.${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,
+        },
+        storeAction: "capture",
+      };
+    },
+    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 },
+      });
+    });
+  };
+
+  // Only render if one or more subtypes are registered
+  if (getSubtypeNames().length === 0) {
+    return <></>;
+  }
+  return (
+    <>
+      <Island
+        style={{
+          marginLeft: 8,
+          alignSelf: "center",
+          height: "fit-content",
+        }}
+      >
+        {getSubtypeNames().map((subtype) =>
+          am.renderAction(
+            makeCustomActionName(subtype),
+            hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
+          ),
+        )}
+      </Island>
+    </>
+  );
+};
+
+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";

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -36,7 +36,7 @@ import { trackEvent } from "../../analytics";
 import { useAppProps, useExcalidrawAppState } from "../App";
 import { isEmbeddableElement } from "../../element/typeChecks";
 import { getLinkHandleFromCoords } from "./helpers";
-import { point, type GlobalPoint } from "../../../math";
+import { pointFrom, type GlobalPoint } from "../../../math";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -181,7 +181,7 @@ export const Hyperlink = ({
         element,
         elementsMap,
         appState,
-        point(event.clientX, event.clientY),
+        pointFrom(event.clientX, event.clientY),
       ) as boolean;
       if (shouldHide) {
         timeoutId = window.setTimeout(() => {

packages/excalidraw/components/hyperlink/helpers.ts

@@ -1,5 +1,5 @@
 import type { GlobalPoint, Radians } from "../../../math";
-import { point, pointRotateRads } from "../../../math";
+import { pointFrom, pointRotateRads } from "../../../math";
 import { MIME_TYPES } from "../../constants";
 import type { Bounds } from "../../element/bounds";
 import { getElementAbsoluteCoords } from "../../element/bounds";
@@ -35,8 +35,8 @@ export const getLinkHandleFromCoords = (
   const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
 
   const [rotatedX, rotatedY] = pointRotateRads(
-    point(x + linkWidth / 2, y + linkHeight / 2),
-    point(centerX, centerY),
+    pointFrom(x + linkWidth / 2, y + linkHeight / 2),
+    pointFrom(centerX, centerY),
     angle,
   );
   return [
@@ -85,5 +85,10 @@ export const isPointHittingLink = (
   ) {
     return true;
   }
-  return isPointHittingLinkIcon(element, elementsMap, appState, point(x, y));
+  return isPointHittingLinkIcon(
+    element,
+    elementsMap,
+    appState,
+    pointFrom(x, y),
+  );
 };

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "#d8f5a2",
   "boundElements": [
     {
-      "id": "id45",
+      "id": "id47",
       "type": "arrow",
     },
     {
-      "id": "id46",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -47,7 +47,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id46",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -118,7 +118,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id47",
+    "elementId": "id49",
     "fixedPoint": null,
     "focus": -0.08139534883720931,
     "gap": 1,
@@ -200,7 +200,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id45",
+      "id": "id47",
       "type": "arrow",
     },
   ],
@@ -238,7 +238,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id48",
+      "id": "id50",
       "type": "arrow",
     },
   ],
@@ -284,7 +284,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id48",
+      "id": "id50",
       "type": "arrow",
     },
   ],
@@ -329,7 +329,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id49",
+      "id": "id51",
       "type": "text",
     },
   ],
@@ -392,7 +392,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id48",
+  "containerId": "id50",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -433,7 +433,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id38",
+      "id": "id40",
       "type": "text",
     },
   ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id40",
+    "elementId": "id42",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -472,7 +472,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id39",
+    "elementId": "id41",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -496,7 +496,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id37",
+  "containerId": "id39",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -537,7 +537,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id37",
+      "id": "id39",
       "type": "arrow",
     },
   ],
@@ -574,7 +574,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id37",
+      "id": "id39",
       "type": "arrow",
     },
   ],
@@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id42",
+      "id": "id44",
       "type": "text",
     },
   ],
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id44",
+    "elementId": "id46",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -650,7 +650,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id43",
+    "elementId": "id45",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -674,7 +674,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id41",
+  "containerId": "id43",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -716,7 +716,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id41",
+      "id": "id43",
       "type": "arrow",
     },
   ],
@@ -762,7 +762,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id41",
+      "id": "id43",
       "type": "arrow",
     },
   ],
@@ -1303,7 +1303,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id54",
+      "id": "id56",
       "type": "text",
     },
     {
@@ -1346,7 +1346,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id55",
+      "id": "id57",
       "type": "text",
     },
   ],
@@ -1385,7 +1385,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id56",
+      "id": "id58",
       "type": "text",
     },
     {
@@ -1428,7 +1428,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id57",
+      "id": "id59",
       "type": "text",
     },
     {
@@ -1475,7 +1475,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id58",
+      "id": "id60",
       "type": "text",
     },
   ],
@@ -1540,7 +1540,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id59",
+      "id": "id61",
       "type": "text",
     },
   ],

packages/excalidraw/data/encode.ts

@@ -57,6 +57,15 @@ export const base64ToString = async (base64: string, isByteString = false) => {
     : byteStringToString(window.atob(base64));
 };
 
+export const base64ToArrayBuffer = (base64: string): ArrayBuffer => {
+  if (typeof Buffer !== "undefined") {
+    // Node.js environment
+    return Buffer.from(base64, "base64").buffer;
+  }
+  // Browser environment
+  return byteStringToArrayBuffer(atob(base64));
+};
+
 // -----------------------------------------------------------------------------
 // text encoding
 // -----------------------------------------------------------------------------

packages/excalidraw/data/restore.ts

@@ -5,6 +5,7 @@ import type {
   ExcalidrawLinearElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
+  FixedPointBinding,
   FontFamilyValues,
   OrderedExcalidrawElement,
   PointBinding,
@@ -21,6 +22,7 @@ import {
 import {
   isArrowElement,
   isElbowArrow,
+  isFixedPointBinding,
   isLinearElement,
   isTextElement,
   isUsingAdaptiveRadius,
@@ -55,7 +57,7 @@ import {
   getNormalizedZoom,
 } from "../scene";
 import type { LocalPoint, Radians } from "../../math";
-import { isFiniteNumber, point } from "../../math";
+import { isFiniteNumber, pointFrom } from "../../math";
 
 type RestoredAppState = Omit<
   AppState,
@@ -101,8 +103,8 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
 
 const repairBinding = (
   element: ExcalidrawLinearElement,
-  binding: PointBinding | null,
-): PointBinding | null => {
+  binding: PointBinding | FixedPointBinding | null,
+): PointBinding | FixedPointBinding | null => {
   if (!binding) {
     return null;
   }
@@ -110,14 +112,17 @@ const repairBinding = (
   return {
     ...binding,
     focus: binding.focus || 0,
-    fixedPoint: isElbowArrow(element)
-      ? normalizeFixedPoint(binding.fixedPoint ?? [0, 0])
-      : null,
+    ...(isElbowArrow(element) && isFixedPointBinding(binding)
+      ? {
+          fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+        }
+      : {}),
   };
 };
 
 const restoreElementWithProperties = <
-  T extends Required<Omit<ExcalidrawElement, "customData">> & {
+  T extends Required<Omit<ExcalidrawElement, "subtype" | "customData">> & {
+    subtype?: ExcalidrawElement["subtype"];
     customData?: ExcalidrawElement["customData"];
     /** @deprecated */
     boundElementIds?: readonly ExcalidrawElement["id"][];
@@ -180,6 +185,9 @@ const restoreElementWithProperties = <
     locked: element.locked ?? false,
   };
 
+  if ("subtype" in element) {
+    base.subtype = element.subtype;
+  }
   if ("customData" in element || "customData" in extra) {
     base.customData =
       "customData" in extra ? extra.customData : element.customData;
@@ -264,7 +272,7 @@ const restoreElement = (
       let y = element.y;
       let points = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
-          ? [point(0, 0), point(element.width, element.height)]
+          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -292,7 +300,7 @@ const restoreElement = (
       let y: number | undefined = element.y;
       let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
-          ? [point(0, 0), point(element.width, element.height)]
+          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
           : element.points;
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -593,6 +601,12 @@ 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",

packages/excalidraw/data/transform.test.ts

@@ -2,7 +2,7 @@ import { vi } from "vitest";
 import type { ExcalidrawElementSkeleton } from "./transform";
 import { convertToExcalidrawElements } from "./transform";
 import type { ExcalidrawArrowElement } from "../element/types";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 const opts = { regenerateIds: false };
 
@@ -309,28 +309,32 @@ describe("Test Transform", () => {
   });
 
   describe("Test Frames", () => {
+    const elements: ExcalidrawElementSkeleton[] = [
+      {
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        strokeWidth: 2,
+        id: "1",
+      },
+      {
+        type: "diamond",
+        x: 120,
+        y: 20,
+        backgroundColor: "#fff3bf",
+        strokeWidth: 2,
+        label: {
+          text: "HELLO EXCALIDRAW",
+          strokeColor: "#099268",
+          fontSize: 30,
+        },
+        id: "2",
+      },
+    ];
+
     it("should transform frames and update frame ids when regenerated", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        {
-          type: "rectangle",
-          x: 10,
-          y: 10,
-          strokeWidth: 2,
-          id: "1",
-        },
-        {
-          type: "diamond",
-          x: 120,
-          y: 20,
-          backgroundColor: "#fff3bf",
-          strokeWidth: 2,
-          label: {
-            text: "HELLO EXCALIDRAW",
-            strokeColor: "#099268",
-            fontSize: 30,
-          },
-          id: "2",
-        },
+        ...elements,
         {
           type: "frame",
           children: ["1", "2"],
@@ -352,28 +356,9 @@ describe("Test Transform", () => {
       });
     });
 
-    it("should consider max of calculated and frame dimensions when provided", () => {
+    it("should consider user defined frame dimensions over calculated when provided", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        {
-          type: "rectangle",
-          x: 10,
-          y: 10,
-          strokeWidth: 2,
-          id: "1",
-        },
-        {
-          type: "diamond",
-          x: 120,
-          y: 20,
-          backgroundColor: "#fff3bf",
-          strokeWidth: 2,
-          label: {
-            text: "HELLO EXCALIDRAW",
-            strokeColor: "#099268",
-            fontSize: 30,
-          },
-          id: "2",
-        },
+        ...elements,
         {
           type: "frame",
           children: ["1", "2"],
@@ -388,7 +373,27 @@ describe("Test Transform", () => {
       );
       const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
       expect(frame.width).toBe(800);
-      expect(frame.height).toBe(126);
+      expect(frame.height).toBe(100);
+    });
+
+    it("should consider user defined frame coordinates calculated when provided", () => {
+      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
+        ...elements,
+        {
+          type: "frame",
+          children: ["1", "2"],
+          name: "My frame",
+          x: 100,
+          y: 300,
+        },
+      ];
+      const excalidrawElements = convertToExcalidrawElements(
+        elementsSkeleton,
+        opts,
+      );
+      const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
+      expect(frame.x).toBe(100);
+      expect(frame.y).toBe(300);
     });
   });
 
@@ -912,7 +917,7 @@ describe("Test Transform", () => {
         x: 111.262,
         y: 57,
         strokeWidth: 2,
-        points: [point(0, 0), point(272.985, 0)],
+        points: [pointFrom(0, 0), pointFrom(272.985, 0)],
         label: {
           text: "How are you?",
           fontSize: 20,
@@ -935,7 +940,7 @@ describe("Test Transform", () => {
         x: 77.017,
         y: 79,
         strokeWidth: 2,
-        points: [point(0, 0)],
+        points: [pointFrom(0, 0)],
         label: {
           text: "Friendship",
           fontSize: 20,

packages/excalidraw/data/transform.ts

@@ -46,6 +46,7 @@ import {
   assertNever,
   cloneJSON,
   getFontString,
+  isDevEnv,
   toBrandedType,
 } from "../utils";
 import { getSizeFromPoints } from "../points";
@@ -53,7 +54,7 @@ import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getLineHeight } from "../fonts";
 import { isArrowElement } from "../element/typeChecks";
-import { point, type LocalPoint } from "../../math";
+import { pointFrom, type LocalPoint } from "../../math";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -536,7 +537,7 @@ export const convertToExcalidrawElements = (
         excalidrawElement = newLinearElement({
           width,
           height,
-          points: [point(0, 0), point(width, height)],
+          points: [pointFrom(0, 0), pointFrom(width, height)],
           ...element,
         });
 
@@ -549,7 +550,7 @@ export const convertToExcalidrawElements = (
           width,
           height,
           endArrowhead: "arrow",
-          points: [point(0, 0), point(width, height)],
+          points: [pointFrom(0, 0), pointFrom(width, height)],
           ...element,
           type: "arrow",
         });
@@ -717,7 +718,7 @@ export const convertToExcalidrawElements = (
   }
 
   // Once all the excalidraw elements are created, we can add frames since we
-  // need to calculate coordinates and dimensions of frame which is possibe after all
+  // need to calculate coordinates and dimensions of frame which is possible after all
   // frame children are processed.
   for (const [id, element] of elementsWithIds) {
     if (element.type !== "frame" && element.type !== "magicframe") {
@@ -764,10 +765,26 @@ export const convertToExcalidrawElements = (
     maxX = maxX + PADDING;
     maxY = maxY + PADDING;
 
-    // Take the max of calculated and provided frame dimensions, whichever is higher
-    const width = Math.max(frame?.width, maxX - minX);
-    const height = Math.max(frame?.height, maxY - minY);
-    Object.assign(frame, { x: minX, y: minY, width, height });
+    const frameX = frame?.x || minX;
+    const frameY = frame?.y || minY;
+    const frameWidth = frame?.width || maxX - minX;
+    const frameHeight = frame?.height || maxY - minY;
+
+    Object.assign(frame, {
+      x: frameX,
+      y: frameY,
+      width: frameWidth,
+      height: frameHeight,
+    });
+    if (
+      isDevEnv() &&
+      element.children.length &&
+      (frame?.x || frame?.y || frame?.width || frame?.height)
+    ) {
+      console.info(
+        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically",
+      );
+    }
   }
 
   return elementStore.getElements();

packages/excalidraw/element/binding.ts

@@ -39,6 +39,7 @@ import {
   isBindingElement,
   isBoundToContainer,
   isElbowArrow,
+  isFixedPointBinding,
   isFrameLikeElement,
   isLinearElement,
   isRectangularElement,
@@ -65,7 +66,7 @@ import {
 import type { LocalPoint, Radians } from "../../math";
 import {
   lineSegment,
-  point,
+  pointFrom,
   pointRotateRads,
   type GlobalPoint,
   vectorFromPoint,
@@ -719,7 +720,7 @@ export const getHeadingForElbowArrowSnap = (
     return vectorToHeading(
       vectorFromPoint(
         p,
-        point<GlobalPoint>(
+        pointFrom<GlobalPoint>(
           bindableElement.x + bindableElement.width / 2,
           bindableElement.y + bindableElement.height / 2,
         ),
@@ -765,15 +766,15 @@ export const bindPointToSnapToElementOutline = (
     const intersections = [
       ...(intersectElementWithLine(
         bindableElement,
-        point(p[0], p[1] - 2 * bindableElement.height),
-        point(p[0], p[1] + 2 * bindableElement.height),
+        pointFrom(p[0], p[1] - 2 * bindableElement.height),
+        pointFrom(p[0], p[1] + 2 * bindableElement.height),
         FIXED_BINDING_DISTANCE,
         elementsMap,
       ) ?? []),
       ...(intersectElementWithLine(
         bindableElement,
-        point(p[0] - 2 * bindableElement.width, p[1]),
-        point(p[0] + 2 * bindableElement.width, p[1]),
+        pointFrom(p[0] - 2 * bindableElement.width, p[1]),
+        pointFrom(p[0] + 2 * bindableElement.width, p[1]),
         FIXED_BINDING_DISTANCE,
         elementsMap,
       ) ?? []),
@@ -797,7 +798,7 @@ export const bindPointToSnapToElementOutline = (
           isVertical
             ? Math.abs(p[1] - i[1]) < 0.1
             : Math.abs(p[0] - i[0]) < 0.1,
-        )[0] ?? point;
+        )[0] ?? p;
   }
 
   return p;
@@ -814,25 +815,25 @@ const headingToMidBindPoint = (
   switch (true) {
     case compareHeading(heading, HEADING_UP):
       return pointRotateRads(
-        point((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
+        pointFrom((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
         center,
         bindableElement.angle,
       );
     case compareHeading(heading, HEADING_RIGHT):
       return pointRotateRads(
-        point(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
+        pointFrom(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
         center,
         bindableElement.angle,
       );
     case compareHeading(heading, HEADING_DOWN):
       return pointRotateRads(
-        point((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
+        pointFrom((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
         center,
         bindableElement.angle,
       );
     default:
       return pointRotateRads(
-        point(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
+        pointFrom(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
         center,
         bindableElement.angle,
       );
@@ -843,7 +844,7 @@ export const avoidRectangularCorner = (
   element: ExcalidrawBindableElement,
   p: GlobalPoint,
 ): GlobalPoint => {
-  const center = point<GlobalPoint>(
+  const center = pointFrom<GlobalPoint>(
     element.x + element.width / 2,
     element.y + element.height / 2,
   );
@@ -853,13 +854,13 @@ export const avoidRectangularCorner = (
     // Top left
     if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
       return pointRotateRads<GlobalPoint>(
-        point(element.x - FIXED_BINDING_DISTANCE, element.y),
+        pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      point(element.x, element.y - FIXED_BINDING_DISTANCE),
+      pointFrom(element.x, element.y - FIXED_BINDING_DISTANCE),
       center,
       element.angle,
     );
@@ -870,13 +871,16 @@ export const avoidRectangularCorner = (
     // Bottom left
     if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
       return pointRotateRads(
-        point(element.x, element.y + element.height + FIXED_BINDING_DISTANCE),
+        pointFrom(
+          element.x,
+          element.y + element.height + FIXED_BINDING_DISTANCE,
+        ),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      point(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
+      pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
       center,
       element.angle,
     );
@@ -890,7 +894,7 @@ export const avoidRectangularCorner = (
       element.width + FIXED_BINDING_DISTANCE
     ) {
       return pointRotateRads(
-        point(
+        pointFrom(
           element.x + element.width,
           element.y + element.height + FIXED_BINDING_DISTANCE,
         ),
@@ -899,7 +903,7 @@ export const avoidRectangularCorner = (
       );
     }
     return pointRotateRads(
-      point(
+      pointFrom(
         element.x + element.width + FIXED_BINDING_DISTANCE,
         element.y + element.height,
       ),
@@ -916,13 +920,16 @@ export const avoidRectangularCorner = (
       element.width + FIXED_BINDING_DISTANCE
     ) {
       return pointRotateRads(
-        point(element.x + element.width, element.y - FIXED_BINDING_DISTANCE),
+        pointFrom(
+          element.x + element.width,
+          element.y - FIXED_BINDING_DISTANCE,
+        ),
         center,
         element.angle,
       );
     }
     return pointRotateRads(
-      point(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
+      pointFrom(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
       center,
       element.angle,
     );
@@ -937,7 +944,10 @@ export const snapToMid = (
   tolerance: number = 0.05,
 ): GlobalPoint => {
   const { x, y, width, height, angle } = element;
-  const center = point<GlobalPoint>(x + width / 2 - 0.1, y + height / 2 - 0.1);
+  const center = pointFrom<GlobalPoint>(
+    x + width / 2 - 0.1,
+    y + height / 2 - 0.1,
+  );
   const nonRotated = pointRotateRads(p, center, -angle as Radians);
 
   // snap-to-center point is adaptive to element size, but we don't want to go
@@ -952,7 +962,7 @@ export const snapToMid = (
   ) {
     // LEFT
     return pointRotateRads(
-      point(x - FIXED_BINDING_DISTANCE, center[1]),
+      pointFrom(x - FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle,
     );
@@ -963,7 +973,7 @@ export const snapToMid = (
   ) {
     // TOP
     return pointRotateRads(
-      point(center[0], y - FIXED_BINDING_DISTANCE),
+      pointFrom(center[0], y - FIXED_BINDING_DISTANCE),
       center,
       angle,
     );
@@ -974,7 +984,7 @@ export const snapToMid = (
   ) {
     // RIGHT
     return pointRotateRads(
-      point(x + width + FIXED_BINDING_DISTANCE, center[1]),
+      pointFrom(x + width + FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle,
     );
@@ -985,7 +995,7 @@ export const snapToMid = (
   ) {
     // DOWN
     return pointRotateRads(
-      point(center[0], y + height + FIXED_BINDING_DISTANCE),
+      pointFrom(center[0], y + height + FIXED_BINDING_DISTANCE),
       center,
       angle,
     );
@@ -1013,7 +1023,7 @@ const updateBoundPoint = (
   const direction = startOrEnd === "startBinding" ? -1 : 1;
   const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
 
-  if (isElbowArrow(linearElement)) {
+  if (isElbowArrow(linearElement) && isFixedPointBinding(binding)) {
     const fixedPoint =
       normalizeFixedPoint(binding.fixedPoint) ??
       calculateFixedPointForElbowArrowBinding(
@@ -1022,11 +1032,11 @@ const updateBoundPoint = (
         startOrEnd === "startBinding" ? "start" : "end",
         elementsMap,
       ).fixedPoint;
-    const globalMidPoint = point<GlobalPoint>(
+    const globalMidPoint = pointFrom<GlobalPoint>(
       bindableElement.x + bindableElement.width / 2,
       bindableElement.y + bindableElement.height / 2,
     );
-    const global = point<GlobalPoint>(
+    const global = pointFrom<GlobalPoint>(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
       bindableElement.y + fixedPoint[1] * bindableElement.height,
     );
@@ -1117,7 +1127,7 @@ export const calculateFixedPointForElbowArrowBinding = (
     hoveredElement,
     elementsMap,
   );
-  const globalMidPoint = point(
+  const globalMidPoint = pointFrom(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2,
   );
@@ -1336,9 +1346,9 @@ export const bindingBorderTest = (
   const threshold = maxBindingGap(element, element.width, element.height);
   const shape = getElementShape(element, elementsMap);
   return (
-    isPointOnShape(point(x, y), shape, threshold) ||
+    isPointOnShape(pointFrom(x, y), shape, threshold) ||
     (fullShape === true &&
-      pointInsideBounds(point(x, y), aabbForElement(element)))
+      pointInsideBounds(pointFrom(x, y), aabbForElement(element)))
   );
 };
 
@@ -2196,11 +2206,11 @@ export const getGlobalFixedPointForBindableElement = (
   const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
 
   return pointRotateRads(
-    point(
+    pointFrom(
       element.x + element.width * fixedX,
       element.y + element.height * fixedY,
     ),
-    point<GlobalPoint>(
+    pointFrom<GlobalPoint>(
       element.x + element.width / 2,
       element.y + element.height / 2,
     ),
@@ -2228,7 +2238,7 @@ const getGlobalFixedPoints = (
           arrow.startBinding.fixedPoint,
           startElement as ExcalidrawBindableElement,
         )
-      : point<GlobalPoint>(
+      : pointFrom<GlobalPoint>(
           arrow.x + arrow.points[0][0],
           arrow.y + arrow.points[0][1],
         );
@@ -2238,7 +2248,7 @@ const getGlobalFixedPoints = (
           arrow.endBinding.fixedPoint,
           endElement as ExcalidrawBindableElement,
         )
-      : point<GlobalPoint>(
+      : pointFrom<GlobalPoint>(
           arrow.x + arrow.points[arrow.points.length - 1][0],
           arrow.y + arrow.points[arrow.points.length - 1][1],
         );

packages/excalidraw/element/bounds.test.ts

@@ -1,5 +1,5 @@
 import type { LocalPoint } from "../../math";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 import { ROUNDNESS } from "../constants";
 import { arrayToMap } from "../utils";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
@@ -125,9 +125,9 @@ describe("getElementBounds", () => {
         a: 0.6447741904932416,
       }),
       points: [
-        point<LocalPoint>(0, 0),
-        point<LocalPoint>(67.33984375, 92.48828125),
-        point<LocalPoint>(-102.7890625, 52.15625),
+        pointFrom<LocalPoint>(0, 0),
+        pointFrom<LocalPoint>(67.33984375, 92.48828125),
+        pointFrom<LocalPoint>(-102.7890625, 52.15625),
       ],
     } as ExcalidrawLinearElement;
 

packages/excalidraw/element/bounds.ts

@@ -34,7 +34,7 @@ import type {
 import {
   degreesToRadians,
   lineSegment,
-  point,
+  pointFrom,
   pointDistance,
   pointFromArray,
   pointRotateRads,
@@ -113,8 +113,8 @@ export class ElementBounds {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(([x, y]) =>
           pointRotateRads(
-            point(x, y),
-            point(cx - element.x, cy - element.y),
+            pointFrom(x, y),
+            pointFrom(cx - element.x, cy - element.y),
             element.angle,
           ),
         ),
@@ -130,23 +130,23 @@ export class ElementBounds {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
       const [x11, y11] = pointRotateRads(
-        point(cx, y1),
-        point(cx, cy),
+        pointFrom(cx, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x12, y12] = pointRotateRads(
-        point(cx, y2),
-        point(cx, cy),
+        pointFrom(cx, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x22, y22] = pointRotateRads(
-        point(x1, cy),
-        point(cx, cy),
+        pointFrom(x1, cy),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x21, y21] = pointRotateRads(
-        point(x2, cy),
-        point(cx, cy),
+        pointFrom(x2, cy),
+        pointFrom(cx, cy),
         element.angle,
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -164,23 +164,23 @@ export class ElementBounds {
       bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
     } else {
       const [x11, y11] = pointRotateRads(
-        point(x1, y1),
-        point(cx, cy),
+        pointFrom(x1, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x12, y12] = pointRotateRads(
-        point(x1, y2),
-        point(cx, cy),
+        pointFrom(x1, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x22, y22] = pointRotateRads(
-        point(x2, y2),
-        point(cx, cy),
+        pointFrom(x2, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
       const [x21, y21] = pointRotateRads(
-        point(x2, y1),
-        point(cx, cy),
+        pointFrom(x2, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -255,7 +255,7 @@ export const getElementLineSegments = (
     elementsMap,
   );
 
-  const center: GlobalPoint = point(cx, cy);
+  const center: GlobalPoint = pointFrom(cx, cy);
 
   if (isLinearElement(element) || isFreeDrawElement(element)) {
     const segments: LineSegment<GlobalPoint>[] = [];
@@ -266,7 +266,7 @@ export const getElementLineSegments = (
       segments.push(
         lineSegment(
           pointRotateRads(
-            point(
+            pointFrom(
               element.points[i][0] + element.x,
               element.points[i][1] + element.y,
             ),
@@ -274,7 +274,7 @@ export const getElementLineSegments = (
             element.angle,
           ),
           pointRotateRads(
-            point(
+            pointFrom(
               element.points[i + 1][0] + element.x,
               element.points[i + 1][1] + element.y,
             ),
@@ -470,7 +470,7 @@ export const getMinMaxXYFromCurvePathOps = (
   ops: Op[],
   transformXY?: (p: GlobalPoint) => GlobalPoint,
 ): Bounds => {
-  let currentP: GlobalPoint = point(0, 0);
+  let currentP: GlobalPoint = pointFrom(0, 0);
 
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
@@ -484,9 +484,9 @@ export const getMinMaxXYFromCurvePathOps = (
         // move operation does not draw anything; so, it always
         // returns false
       } else if (op === "bcurveTo") {
-        const _p1 = point<GlobalPoint>(data[0], data[1]);
-        const _p2 = point<GlobalPoint>(data[2], data[3]);
-        const _p3 = point<GlobalPoint>(data[4], data[5]);
+        const _p1 = pointFrom<GlobalPoint>(data[0], data[1]);
+        const _p2 = pointFrom<GlobalPoint>(data[2], data[3]);
+        const _p3 = pointFrom<GlobalPoint>(data[4], data[5]);
 
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
@@ -591,21 +591,21 @@ export const getArrowheadPoints = (
 
   invariant(data.length === 6, "Op data length is not 6");
 
-  const p3 = point(data[4], data[5]);
-  const p2 = point(data[2], data[3]);
-  const p1 = point(data[0], data[1]);
+  const p3 = pointFrom(data[4], data[5]);
+  const p2 = pointFrom(data[2], data[3]);
+  const p1 = pointFrom(data[0], data[1]);
 
   // We need to find p0 of the bezier curve.
   // It is typically the last point of the previous
   // curve; it can also be the position of moveTo operation.
   const prevOp = ops[index - 1];
-  let p0 = point(0, 0);
+  let p0 = pointFrom(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray(prevOp.data);
     invariant(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = point(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
   }
 
   // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
@@ -671,13 +671,13 @@ export const getArrowheadPoints = (
 
   // Return points
   const [x3, y3] = pointRotateRads(
-    point(xs, ys),
-    point(x2, y2),
+    pointFrom(xs, ys),
+    pointFrom(x2, y2),
     ((-angle * Math.PI) / 180) as Radians,
   );
   const [x4, y4] = pointRotateRads(
-    point(xs, ys),
-    point(x2, y2),
+    pointFrom(xs, ys),
+    pointFrom(x2, y2),
     degreesToRadians(angle),
   );
 
@@ -690,8 +690,8 @@ export const getArrowheadPoints = (
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        point(x2 + minSize * 2, y2),
-        point(x2, y2),
+        pointFrom(x2 + minSize * 2, y2),
+        pointFrom(x2, y2),
         Math.atan2(py - y2, px - x2) as Radians,
       );
     } else {
@@ -701,8 +701,8 @@ export const getArrowheadPoints = (
           : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        point(x2 - minSize * 2, y2),
-        point(x2, y2),
+        pointFrom(x2 - minSize * 2, y2),
+        pointFrom(x2, y2),
         Math.atan2(y2 - py, x2 - px) as Radians,
       );
     }
@@ -746,8 +746,8 @@ const getLinearElementRotatedBounds = (
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
     const [x, y] = pointRotateRads(
-      point(element.x + pointX, element.y + pointY),
-      point(cx, cy),
+      pointFrom(element.x + pointX, element.y + pointY),
+      pointFrom(cx, cy),
       element.angle,
     );
 
@@ -775,8 +775,8 @@ const getLinearElementRotatedBounds = (
   const ops = getCurvePathOps(shape);
   const transformXY = ([x, y]: GlobalPoint) =>
     pointRotateRads<GlobalPoint>(
-      point(element.x + x, element.y + y),
-      point(cx, cy),
+      pointFrom(element.x + x, element.y + y),
+      pointFrom(cx, cy),
       element.angle,
     );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -931,8 +931,8 @@ export const getClosestElementBounds = (
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance = pointDistance(
-      point((x1 + x2) / 2, (y1 + y2) / 2),
-      point(from.x, from.y),
+      pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom(from.x, from.y),
     );
 
     if (distance < minDistance) {
@@ -990,7 +990,7 @@ export const getVisibleSceneBounds = ({
 };
 
 export const getCenterForBounds = (bounds: Bounds): GlobalPoint =>
-  point(
+  pointFrom(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2,
   );

packages/excalidraw/element/collision.ts

@@ -17,7 +17,7 @@ import {
 } from "./typeChecks";
 import { getBoundTextShape, isPathALoop } from "../shapes";
 import type { GlobalPoint, LocalPoint, Polygon } from "../../math";
-import { isPointWithinBounds, point } from "../../math";
+import { isPointWithinBounds, pointFrom } from "../../math";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
   if (element.type === "arrow") {
@@ -61,13 +61,13 @@ export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
   let hit = shouldTestInside(element)
     ? // Since `inShape` tests STRICTLY againt the insides of a shape
       // we would need `onShape` as well to include the "borders"
-      isPointInShape(point(x, y), shape) ||
-      isPointOnShape(point(x, y), shape, threshold)
-    : isPointOnShape(point(x, y), shape, threshold);
+      isPointInShape(pointFrom(x, y), shape) ||
+      isPointOnShape(pointFrom(x, y), shape, threshold)
+    : isPointOnShape(pointFrom(x, y), shape, threshold);
 
   // hit test against a frame's name
   if (!hit && frameNameBound) {
-    hit = isPointInShape(point(x, y), {
+    hit = isPointInShape(pointFrom(x, y), {
       type: "polygon",
       data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
         .data as Polygon<Point>,
@@ -89,7 +89,11 @@ export const hitElementBoundingBox = (
   y1 -= tolerance;
   x2 += tolerance;
   y2 += tolerance;
-  return isPointWithinBounds(point(x1, y1), point(x, y), point(x2, y2));
+  return isPointWithinBounds(
+    pointFrom(x1, y1),
+    pointFrom(x, y),
+    pointFrom(x2, y2),
+  );
 };
 
 export const hitElementBoundingBoxOnly = <
@@ -115,5 +119,5 @@ export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
   y: number,
   textShape: GeometricShape<Point> | null,
 ): boolean => {
-  return !!textShape && isPointInShape(point(x, y), textShape);
+  return !!textShape && isPointInShape(pointFrom(x, y), textShape);
 };

packages/excalidraw/element/dragElements.ts

@@ -35,7 +35,6 @@ export const dragSelectedElements = (
 ) => {
   if (
     _selectedElements.length === 1 &&
-    isArrowElement(_selectedElements[0]) &&
     isElbowArrow(_selectedElements[0]) &&
     (_selectedElements[0].startBinding || _selectedElements[0].endBinding)
   ) {
@@ -43,13 +42,7 @@ export const dragSelectedElements = (
   }
 
   const selectedElements = _selectedElements.filter(
-    (el) =>
-      !(
-        isArrowElement(el) &&
-        isElbowArrow(el) &&
-        el.startBinding &&
-        el.endBinding
-      ),
+    (el) => !(isElbowArrow(el) && el.startBinding && el.endBinding),
   );
 
   // we do not want a frame and its elements to be selected at the same time

packages/excalidraw/element/embeddable.ts

@@ -45,6 +45,12 @@ const RE_GENERIC_EMBED =
 const RE_GIPHY =
   /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
 
+const RE_REDDIT =
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?reddit\.com\/r\/([a-zA-Z0-9_]+)\/comments\/([a-zA-Z0-9_]+)\/([a-zA-Z0-9_]+)\/?(?:\?[^#\s]*)?(?:#[^\s]*)?$/;
+
+const RE_REDDIT_EMBED =
+  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:www\.)?reddit\.com\/[^"']*)/i;
+
 const ALLOWED_DOMAINS = new Set([
   "youtube.com",
   "youtu.be",
@@ -59,6 +65,7 @@ const ALLOWED_DOMAINS = new Set([
   "stackblitz.com",
   "val.town",
   "giphy.com",
+  "reddit.com",
 ]);
 
 const ALLOW_SAME_ORIGIN = new Set([
@@ -71,6 +78,7 @@ const ALLOW_SAME_ORIGIN = new Set([
   "x.com",
   "*.simplepdf.eu",
   "stackblitz.com",
+  "reddit.com",
 ]);
 
 export const createSrcDoc = (body: string) => {
@@ -218,6 +226,24 @@ export const getEmbedLink = (
     return ret;
   }
 
+  if (RE_REDDIT.test(link)) {
+    const [, page, postId, title] = link.match(RE_REDDIT)!;
+    const safeURL = sanitizeHTMLAttribute(
+      `https://reddit.com/r/${page}/comments/${postId}/${title}`,
+    );
+    const ret: IframeDataWithSandbox = {
+      type: "document",
+      srcdoc: (theme: string) =>
+        createSrcDoc(
+          `<blockquote class="reddit-embed-bq" data-embed-theme="${theme}"><a href="${safeURL}"></a><br></blockquote><script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>`,
+        ),
+      intrinsicSize: { w: 480, h: 480 },
+      sandbox: { allowSameOrigin },
+    };
+    embeddedLinkCache.set(originalLink, ret);
+    return ret;
+  }
+
   if (RE_GH_GIST.test(link)) {
     const [, user, gistId] = link.match(RE_GH_GIST)!;
     const safeURL = sanitizeHTMLAttribute(
@@ -361,6 +387,11 @@ export const maybeParseEmbedSrc = (str: string): string => {
     return twitterMatch[1];
   }
 
+  const redditMatch = str.match(RE_REDDIT_EMBED);
+  if (redditMatch && redditMatch.length === 2) {
+    return redditMatch[1];
+  }
+
   const gistMatch = str.match(RE_GH_GIST_EMBED);
   if (gistMatch && gistMatch.length === 2) {
     return gistMatch[1];

packages/excalidraw/element/flowchart.ts

@@ -29,7 +29,7 @@ import {
   isFlowchartNodeElement,
 } from "./typeChecks";
 import { invariant } from "../utils";
-import { point, type LocalPoint } from "../../math";
+import { pointFrom, type LocalPoint } from "../../math";
 import { aabbForElement } from "../shapes";
 
 type LinkDirection = "up" | "right" | "down" | "left";
@@ -421,7 +421,7 @@ const createBindingArrow = (
     strokeColor: appState.currentItemStrokeColor,
     strokeStyle: appState.currentItemStrokeStyle,
     strokeWidth: appState.currentItemStrokeWidth,
-    points: [point(0, 0), point(endX, endY)],
+    points: [pointFrom(0, 0), pointFrom(endX, endY)],
     elbowed: true,
   });
 

packages/excalidraw/element/heading.ts

@@ -6,7 +6,7 @@ import type {
   Radians,
 } from "../../math";
 import {
-  point,
+  pointFrom,
   pointRotateRads,
   pointScaleFromOrigin,
   radiansToDegrees,
@@ -82,7 +82,7 @@ export const headingForPointFromElement = <
 
     const top = pointRotateRads(
       pointScaleFromOrigin(
-        point(element.x + element.width / 2, element.y),
+        pointFrom(element.x + element.width / 2, element.y),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -91,7 +91,7 @@ export const headingForPointFromElement = <
     );
     const right = pointRotateRads(
       pointScaleFromOrigin(
-        point(element.x + element.width, element.y + element.height / 2),
+        pointFrom(element.x + element.width, element.y + element.height / 2),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -100,7 +100,7 @@ export const headingForPointFromElement = <
     );
     const bottom = pointRotateRads(
       pointScaleFromOrigin(
-        point(element.x + element.width / 2, element.y + element.height),
+        pointFrom(element.x + element.width / 2, element.y + element.height),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -109,7 +109,7 @@ export const headingForPointFromElement = <
     );
     const left = pointRotateRads(
       pointScaleFromOrigin(
-        point(element.x, element.y + element.height / 2),
+        pointFrom(element.x, element.y + element.height / 2),
         midPoint,
         SEARCH_CONE_MULTIPLIER,
       ),
@@ -133,22 +133,22 @@ export const headingForPointFromElement = <
   }
 
   const topLeft = pointScaleFromOrigin(
-    point(aabb[0], aabb[1]),
+    pointFrom(aabb[0], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const topRight = pointScaleFromOrigin(
-    point(aabb[2], aabb[1]),
+    pointFrom(aabb[2], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const bottomLeft = pointScaleFromOrigin(
-    point(aabb[0], aabb[3]),
+    pointFrom(aabb[0], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
   const bottomRight = pointScaleFromOrigin(
-    point(aabb[2], aabb[3]),
+    pointFrom(aabb[2], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER,
   ) as Point;

packages/excalidraw/element/linearElementEditor.ts

@@ -49,7 +49,7 @@ import type Scene from "../scene/Scene";
 import type { Radians } from "../../math";
 import {
   pointCenter,
-  point,
+  pointFrom,
   pointRotateRads,
   pointsEqual,
   vector,
@@ -102,12 +102,13 @@ export class LinearElementEditor {
   public readonly endBindingElement: ExcalidrawBindableElement | null | "keep";
   public readonly hoverPointIndex: number;
   public readonly segmentMidPointHoveredCoords: GlobalPoint | null;
+  public readonly elbowed: boolean;
 
   constructor(element: NonDeleted<ExcalidrawLinearElement>) {
     this.elementId = element.id as string & {
       _brand: "excalidrawLinearElementId";
     };
-    if (!pointsEqual(element.points[0], point(0, 0))) {
+    if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
     }
 
@@ -131,6 +132,7 @@ export class LinearElementEditor {
     };
     this.hoverPointIndex = -1;
     this.segmentMidPointHoveredCoords = null;
+    this.elbowed = isElbowArrow(element) && element.elbowed;
   }
 
   // ---------------------------------------------------------------------------
@@ -285,7 +287,7 @@ export class LinearElementEditor {
           element,
           elementsMap,
           referencePoint,
-          point(scenePointerX, scenePointerY),
+          pointFrom(scenePointerX, scenePointerY),
           event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         );
 
@@ -294,7 +296,7 @@ export class LinearElementEditor {
           [
             {
               index: selectedIndex,
-              point: point(
+              point: pointFrom(
                 width + referencePoint[0],
                 height + referencePoint[1],
               ),
@@ -327,7 +329,7 @@ export class LinearElementEditor {
                     scenePointerY - linearElementEditor.pointerOffset.y,
                     event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
                   )
-                : point(
+                : pointFrom(
                     element.points[pointIndex][0] + deltaX,
                     element.points[pointIndex][1] + deltaY,
                   );
@@ -588,11 +590,11 @@ export class LinearElementEditor {
       linearElementEditor.segmentMidPointHoveredCoords;
     if (existingSegmentMidpointHitCoords) {
       const distance = pointDistance(
-        point(
+        pointFrom(
           existingSegmentMidpointHitCoords[0],
           existingSegmentMidpointHitCoords[1],
         ),
-        point(scenePointer.x, scenePointer.y),
+        pointFrom(scenePointer.x, scenePointer.y),
       );
       if (distance <= threshold) {
         return existingSegmentMidpointHitCoords;
@@ -604,8 +606,8 @@ export class LinearElementEditor {
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
         const distance = pointDistance(
-          point(midPoints[index]![0], midPoints[index]![1]),
-          point(scenePointer.x, scenePointer.y),
+          pointFrom(midPoints[index]![0], midPoints[index]![1]),
+          pointFrom(scenePointer.x, scenePointer.y),
         );
         if (distance <= threshold) {
           return midPoints[index];
@@ -624,8 +626,8 @@ export class LinearElementEditor {
     zoom: AppState["zoom"],
   ) {
     let distance = pointDistance(
-      point(startPoint[0], startPoint[1]),
-      point(endPoint[0], endPoint[1]),
+      pointFrom(startPoint[0], startPoint[1]),
+      pointFrom(endPoint[0], endPoint[1]),
     );
     if (element.points.length > 2 && element.roundness) {
       distance = getBezierCurveLength(element, endPoint);
@@ -827,11 +829,11 @@ export class LinearElementEditor {
     const targetPoint =
       clickedPointIndex > -1 &&
       pointRotateRads(
-        point(
+        pointFrom(
           element.x + element.points[clickedPointIndex][0],
           element.y + element.points[clickedPointIndex][1],
         ),
-        point(cx, cy),
+        pointFrom(cx, cy),
         element.angle,
       );
 
@@ -926,11 +928,11 @@ export class LinearElementEditor {
         element,
         elementsMap,
         lastCommittedPoint,
-        point(scenePointerX, scenePointerY),
+        pointFrom(scenePointerX, scenePointerY),
         event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
       );
 
-      newPoint = point(
+      newPoint = pointFrom(
         width + lastCommittedPoint[0],
         height + lastCommittedPoint[1],
       );
@@ -982,8 +984,8 @@ export class LinearElementEditor {
 
     const { x, y } = element;
     return pointRotateRads(
-      point(x + p[0], y + p[1]),
-      point(cx, cy),
+      pointFrom(x + p[0], y + p[1]),
+      pointFrom(cx, cy),
       element.angle,
     );
   }
@@ -999,8 +1001,8 @@ export class LinearElementEditor {
     return element.points.map((p) => {
       const { x, y } = element;
       return pointRotateRads(
-        point(x + p[0], y + p[1]),
-        point(cx, cy),
+        pointFrom(x + p[0], y + p[1]),
+        pointFrom(cx, cy),
         element.angle,
       );
     });
@@ -1023,8 +1025,12 @@ export class LinearElementEditor {
     const { x, y } = element;
 
     return p
-      ? pointRotateRads(point(x + p[0], y + p[1]), point(cx, cy), element.angle)
-      : pointRotateRads(point(x, y), point(cx, cy), element.angle);
+      ? pointRotateRads(
+          pointFrom(x + p[0], y + p[1]),
+          pointFrom(cx, cy),
+          element.angle,
+        )
+      : pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), element.angle);
   }
 
   static pointFromAbsoluteCoords(
@@ -1034,7 +1040,7 @@ export class LinearElementEditor {
   ): LocalPoint {
     if (isElbowArrow(element)) {
       // No rotation for elbow arrows
-      return point(
+      return pointFrom(
         absoluteCoords[0] - element.x,
         absoluteCoords[1] - element.y,
       );
@@ -1044,11 +1050,11 @@ export class LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const [x, y] = pointRotateRads(
-      point(absoluteCoords[0], absoluteCoords[1]),
-      point(cx, cy),
+      pointFrom(absoluteCoords[0], absoluteCoords[1]),
+      pointFrom(cx, cy),
       -element.angle as Radians,
     );
-    return point(x - element.x, y - element.y);
+    return pointFrom(x - element.x, y - element.y);
   }
 
   static getPointIndexUnderCursor(
@@ -1069,7 +1075,7 @@ export class LinearElementEditor {
     while (--idx > -1) {
       const p = pointHandles[idx];
       if (
-        pointDistance(point(x, y), point(p[0], p[1])) * zoom.value <
+        pointDistance(pointFrom(x, y), pointFrom(p[0], p[1])) * zoom.value <
         // +1px to account for outline stroke
         LinearElementEditor.POINT_HANDLE_SIZE + 1
       ) {
@@ -1091,12 +1097,12 @@ export class LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const [rotatedX, rotatedY] = pointRotateRads(
-      point(pointerOnGrid[0], pointerOnGrid[1]),
-      point(cx, cy),
+      pointFrom(pointerOnGrid[0], pointerOnGrid[1]),
+      pointFrom(cx, cy),
       -element.angle as Radians,
     );
 
-    return point(rotatedX - element.x, rotatedY - element.y);
+    return pointFrom(rotatedX - element.x, rotatedY - element.y);
   }
 
   /**
@@ -1116,7 +1122,7 @@ export class LinearElementEditor {
 
     return {
       points: points.map((p) => {
-        return point(p[0] - offsetX, p[1] - offsetY);
+        return pointFrom(p[0] - offsetX, p[1] - offsetY);
       }),
       x: element.x + offsetX,
       y: element.y + offsetY,
@@ -1170,8 +1176,8 @@ export class LinearElementEditor {
         }
         acc.push(
           nextPoint
-            ? point((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
-            : point(p[0], p[1]),
+            ? pointFrom((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
+            : pointFrom(p[0], p[1]),
         );
 
         nextSelectedIndices.push(indexCursor + 1);
@@ -1192,7 +1198,7 @@ export class LinearElementEditor {
         [
           {
             index: element.points.length - 1,
-            point: point(lastPoint[0] + 30, lastPoint[1] + 30),
+            point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
           },
         ],
         elementsMap,
@@ -1233,7 +1239,9 @@ export class LinearElementEditor {
     const nextPoints = element.points.reduce((acc: LocalPoint[], p, idx) => {
       if (!pointIndices.includes(idx)) {
         acc.push(
-          !acc.length ? point(0, 0) : point(p[0] - offsetX, p[1] - offsetY),
+          !acc.length
+            ? pointFrom(0, 0)
+            : pointFrom(p[0] - offsetX, p[1] - offsetY),
         );
       }
       return acc;
@@ -1310,9 +1318,9 @@ export class LinearElementEditor {
         const deltaY =
           selectedPointData.point[1] - points[selectedPointData.index][1];
 
-        return point(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
+        return pointFrom(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
       }
-      return offsetX || offsetY ? point(p[0] - offsetX, p[1] - offsetY) : p;
+      return offsetX || offsetY ? pointFrom(p[0] - offsetX, p[1] - offsetY) : p;
     });
 
     LinearElementEditor._updatePoints(
@@ -1366,8 +1374,8 @@ export class LinearElementEditor {
 
     const origin = linearElementEditor.pointerDownState.origin!;
     const dist = pointDistance(
-      point(origin.x, origin.y),
-      point(pointerCoords.x, pointerCoords.y),
+      pointFrom(origin.x, origin.y),
+      pointFrom(pointerCoords.x, pointerCoords.y),
     );
     if (
       !appState.editingLinearElement &&
@@ -1477,7 +1485,9 @@ export class LinearElementEditor {
         nextPoints,
         vector(offsetX, offsetY),
         bindings,
-        options,
+        {
+          isDragging: options?.isDragging,
+        },
       );
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
@@ -1489,8 +1499,8 @@ export class LinearElementEditor {
       const dX = prevCenterX - nextCenterX;
       const dY = prevCenterY - nextCenterY;
       const rotated = pointRotateRads(
-        point(offsetX, offsetY),
-        point(dX, dY),
+        pointFrom(offsetX, offsetY),
+        pointFrom(dX, dY),
         element.angle,
       );
       mutateElement(element, {
@@ -1536,8 +1546,8 @@ export class LinearElementEditor {
     );
 
     return pointRotateRads(
-      point(width, height),
-      point(0, 0),
+      pointFrom(width, height),
+      pointFrom(0, 0),
       -element.angle as Radians,
     );
   }
@@ -1607,36 +1617,36 @@ export class LinearElementEditor {
       );
     const boundTextX2 = boundTextX1 + boundTextElement.width;
     const boundTextY2 = boundTextY1 + boundTextElement.height;
-    const centerPoint = point(cx, cy);
+    const centerPoint = pointFrom(cx, cy);
 
     const topLeftRotatedPoint = pointRotateRads(
-      point(x1, y1),
+      pointFrom(x1, y1),
       centerPoint,
       element.angle,
     );
     const topRightRotatedPoint = pointRotateRads(
-      point(x2, y1),
+      pointFrom(x2, y1),
       centerPoint,
       element.angle,
     );
 
     const counterRotateBoundTextTopLeft = pointRotateRads(
-      point(boundTextX1, boundTextY1),
+      pointFrom(boundTextX1, boundTextY1),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextTopRight = pointRotateRads(
-      point(boundTextX2, boundTextY1),
+      pointFrom(boundTextX2, boundTextY1),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextBottomLeft = pointRotateRads(
-      point(boundTextX1, boundTextY2),
+      pointFrom(boundTextX1, boundTextY2),
       centerPoint,
       -element.angle as Radians,
     );
     const counterRotateBoundTextBottomRight = pointRotateRads(
-      point(boundTextX2, boundTextY2),
+      pointFrom(boundTextX2, boundTextY2),
       centerPoint,
       -element.angle as Radians,
     );

packages/excalidraw/element/mutateElement.ts

@@ -5,12 +5,23 @@ import { randomInteger } from "../random";
 import { getUpdatedTimestamp } from "../utils";
 import type { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
+import { maybeGetSubtypeProps } from "./newElement";
+import { getSubtypeMethods } from "./subtypes";
 
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
   "id" | "version" | "versionNonce" | "updated"
 >;
 
+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
@@ -21,6 +32,8 @@ 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)
@@ -69,6 +82,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
             }
           }
           if (!didChangePoints) {
+            key in oldUpdates && (increment = true);
             continue;
           }
         }
@@ -76,6 +90,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
       (element as any)[key] = value;
       didChange = true;
+      key in oldUpdates && (increment = true);
     }
   }
 
@@ -92,9 +107,11 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     ShapeCache.delete(element);
   }
 
-  element.version++;
-  element.versionNonce = randomInteger();
-  element.updated = getUpdatedTimestamp();
+  if (increment) {
+    element.version++;
+    element.versionNonce = randomInteger();
+    element.updated = getUpdatedTimestamp();
+  }
 
   if (informMutation) {
     Scene.getScene(element)?.triggerUpdate();
@@ -110,6 +127,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
   force = false,
 ): 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") {
@@ -121,6 +140,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
         continue;
       }
       didChange = true;
+      key in oldUpdates && (increment = true);
     }
   }
 
@@ -128,6 +148,9 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     return element;
   }
 
+  if (!increment) {
+    return { ...element, ...updates };
+  }
   return {
     ...element,
     ...updates,

packages/excalidraw/element/newElement.test.ts

@@ -5,7 +5,7 @@ import { FONT_FAMILY, ROUNDNESS } from "../constants";
 import { isPrimitive } from "../utils";
 import type { ExcalidrawLinearElement } from "./types";
 import type { LocalPoint } from "../../math";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 const assertCloneObjects = (source: any, clone: any) => {
   for (const key in clone) {
@@ -38,7 +38,7 @@ describe("duplicating single elements", () => {
     element.__proto__ = { hello: "world" };
 
     mutateElement(element, {
-      points: [point<LocalPoint>(1, 2), point<LocalPoint>(3, 4)],
+      points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
     });
 
     const copy = duplicateElement(null, new Map(), element);

packages/excalidraw/element/newElement.ts

@@ -19,12 +19,7 @@ import type {
   ElementsMap,
   ExcalidrawArrowElement,
 } from "./types";
-import {
-  arrayToMap,
-  getFontString,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "../utils";
+import { arrayToMap, getUpdatedTimestamp, isTestEnv } from "../utils";
 import { randomInteger, randomId } from "../random";
 import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -32,9 +27,9 @@ import type { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
-  measureText,
+  measureTextElement,
   normalizeText,
-  wrapText,
+  wrapTextElement,
   getBoundTextMaxWidth,
 } from "./textElement";
 import {
@@ -48,6 +43,30 @@ import {
 import type { MarkOptional, Merge, Mutable } from "../utility-types";
 import { getLineHeight } from "../fonts";
 import type { Radians } from "../../math";
+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">,
@@ -62,6 +81,8 @@ export type ElementConstructorOpts = MarkOptional<
   | "version"
   | "versionNonce"
   | "link"
+  | "subtype"
+  | "customData"
   | "strokeStyle"
   | "fillStyle"
   | "strokeColor"
@@ -99,8 +120,10 @@ 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,
@@ -136,8 +159,11 @@ export const newElement = (
   opts: {
     type: ExcalidrawGenericElement["type"];
   } & ElementConstructorOpts,
-): NonDeleted<ExcalidrawGenericElement> =>
-  _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
+): NonDeleted<ExcalidrawGenericElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
+  return _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
+};
 
 export const newEmbeddableElement = (
   opts: {
@@ -230,10 +256,12 @@ export const newTextElement = (
   const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
   const lineHeight = opts.lineHeight || getLineHeight(fontFamily);
   const text = normalizeText(opts.text);
-  const metrics = measureText(
-    text,
-    getFontString({ fontFamily, fontSize }),
-    lineHeight,
+  const metrics = measureTextElement(
+    { ...opts, fontSize, fontFamily, lineHeight },
+    {
+      text,
+      customData: opts.customData,
+    },
   );
   const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
   const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
@@ -277,11 +305,9 @@ const getAdjustedDimensions = (
   width: number;
   height: number;
 } => {
-  let { width: nextWidth, height: nextHeight } = measureText(
-    nextText,
-    getFontString(element),
-    element.lineHeight,
-  );
+  let { width: nextWidth, height: nextHeight } = measureTextElement(element, {
+    text: nextText,
+  });
 
   // wrapped text
   if (!element.autoResize) {
@@ -297,11 +323,7 @@ const getAdjustedDimensions = (
     !element.containerId &&
     element.autoResize
   ) {
-    const prevMetrics = measureText(
-      element.text,
-      getFontString(element),
-      element.lineHeight,
-    );
+    const prevMetrics = measureTextElement(element);
     const offsets = getTextElementPositionOffsets(element, {
       width: nextWidth - prevMetrics.width,
       height: nextHeight - prevMetrics.height,
@@ -404,12 +426,14 @@ export const refreshTextDimensions = (
     return;
   }
   if (container || !textElement.autoResize) {
-    text = wrapText(
-      text,
-      getFontString(textElement),
+    text = wrapTextElement(
+      textElement,
       container
         ? getBoundTextMaxWidth(container, textElement)
         : textElement.width,
+      {
+        text,
+      },
     );
   }
   const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
@@ -424,6 +448,8 @@ export const newFreeDrawElement = (
     pressures?: ExcalidrawFreeDrawElement["pressures"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
   return {
     ..._newElementBase<ExcalidrawFreeDrawElement>(opts.type, opts),
     points: opts.points || [],
@@ -439,6 +465,8 @@ 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 || [],
@@ -459,6 +487,8 @@ export const newArrowElement = (
     elbowed?: boolean;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawArrowElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
   return {
     ..._newElementBase<ExcalidrawArrowElement>(opts.type, opts),
     points: opts.points || [],
@@ -479,6 +509,8 @@ 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,

packages/excalidraw/element/resizeElements.ts

@@ -9,6 +9,7 @@ import type {
   ExcalidrawTextElementWithContainer,
   ExcalidrawImageElement,
   ElementsMap,
+  ExcalidrawArrowElement,
   NonDeletedSceneElementsMap,
   SceneElementsMap,
 } from "./types";
@@ -57,7 +58,7 @@ import type { GlobalPoint } from "../../math";
 import {
   pointCenter,
   normalizeRadians,
-  point,
+  pointFrom,
   pointFromPair,
   pointRotateRads,
   type Radians,
@@ -239,8 +240,8 @@ const resizeSingleTextElement = (
   );
   // rotation pointer with reverse angle
   const [rotatedX, rotatedY] = pointRotateRads(
-    point(pointerX, pointerY),
-    point(cx, cy),
+    pointFrom(pointerX, pointerY),
+    pointFrom(cx, cy),
     -element.angle as Radians,
   );
   let scaleX = 0;
@@ -275,23 +276,23 @@ const resizeSingleTextElement = (
     const startBottomRight = [x2, y2];
     const startCenter = [cx, cy];
 
-    let newTopLeft = point<GlobalPoint>(x1, y1);
+    let newTopLeft = pointFrom<GlobalPoint>(x1, y1);
     if (["n", "w", "nw"].includes(transformHandleType)) {
-      newTopLeft = point<GlobalPoint>(
+      newTopLeft = pointFrom<GlobalPoint>(
         startBottomRight[0] - Math.abs(nextWidth),
         startBottomRight[1] - Math.abs(nextHeight),
       );
     }
     if (transformHandleType === "ne") {
       const bottomLeft = [startTopLeft[0], startBottomRight[1]];
-      newTopLeft = point<GlobalPoint>(
+      newTopLeft = pointFrom<GlobalPoint>(
         bottomLeft[0],
         bottomLeft[1] - Math.abs(nextHeight),
       );
     }
     if (transformHandleType === "sw") {
       const topRight = [startBottomRight[0], startTopLeft[1]];
-      newTopLeft = point<GlobalPoint>(
+      newTopLeft = pointFrom<GlobalPoint>(
         topRight[0] - Math.abs(nextWidth),
         topRight[1],
       );
@@ -310,12 +311,20 @@ const resizeSingleTextElement = (
     }
 
     const angle = element.angle;
-    const rotatedTopLeft = pointRotateRads(newTopLeft, point(cx, cy), angle);
-    const newCenter = point<GlobalPoint>(
+    const rotatedTopLeft = pointRotateRads(
+      newTopLeft,
+      pointFrom(cx, cy),
+      angle,
+    );
+    const newCenter = pointFrom<GlobalPoint>(
       newTopLeft[0] + Math.abs(nextWidth) / 2,
       newTopLeft[1] + Math.abs(nextHeight) / 2,
     );
-    const rotatedNewCenter = pointRotateRads(newCenter, point(cx, cy), angle);
+    const rotatedNewCenter = pointRotateRads(
+      newCenter,
+      pointFrom(cx, cy),
+      angle,
+    );
     newTopLeft = pointRotateRads(
       rotatedTopLeft,
       rotatedNewCenter,
@@ -340,12 +349,12 @@ const resizeSingleTextElement = (
       stateAtResizeStart.height,
       true,
     );
-    const startTopLeft = point<GlobalPoint>(x1, y1);
-    const startBottomRight = point<GlobalPoint>(x2, y2);
+    const startTopLeft = pointFrom<GlobalPoint>(x1, y1);
+    const startBottomRight = pointFrom<GlobalPoint>(x2, y2);
     const startCenter = pointCenter(startTopLeft, startBottomRight);
 
     const rotatedPointer = pointRotateRads(
-      point(pointerX, pointerY),
+      pointFrom(pointerX, pointerY),
       startCenter,
       -stateAtResizeStart.angle as Radians,
     );
@@ -418,7 +427,7 @@ const resizeSingleTextElement = (
       startCenter,
       angle,
     );
-    const newCenter = point(
+    const newCenter = pointFrom(
       newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
       newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
     );
@@ -460,13 +469,13 @@ export const resizeSingleElement = (
     stateAtResizeStart.height,
     true,
   );
-  const startTopLeft = point(x1, y1);
-  const startBottomRight = point(x2, y2);
+  const startTopLeft = pointFrom(x1, y1);
+  const startBottomRight = pointFrom(x2, y2);
   const startCenter = pointCenter(startTopLeft, startBottomRight);
 
   // Calculate new dimensions based on cursor position
   const rotatedPointer = pointRotateRads(
-    point(pointerX, pointerY),
+    pointFrom(pointerX, pointerY),
     startCenter,
     -stateAtResizeStart.angle as Radians,
   );
@@ -647,7 +656,7 @@ export const resizeSingleElement = (
     startCenter,
     angle,
   );
-  const newCenter = point(
+  const newCenter = pointFrom(
     newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
     newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
   );
@@ -816,20 +825,20 @@ export const resizeMultipleElements = (
   const direction = transformHandleType;
 
   const anchorsMap: Record<TransformHandleDirection, GlobalPoint> = {
-    ne: point(minX, maxY),
-    se: point(minX, minY),
-    sw: point(maxX, minY),
-    nw: point(maxX, maxY),
-    e: point(minX, minY + height / 2),
-    w: point(maxX, minY + height / 2),
-    n: point(minX + width / 2, maxY),
-    s: point(minX + width / 2, minY),
+    ne: pointFrom(minX, maxY),
+    se: pointFrom(minX, minY),
+    sw: pointFrom(maxX, minY),
+    nw: pointFrom(maxX, maxY),
+    e: pointFrom(minX, minY + height / 2),
+    w: pointFrom(maxX, minY + height / 2),
+    n: pointFrom(minX + width / 2, maxY),
+    s: pointFrom(minX + width / 2, minY),
   };
 
   // anchor point must be on the opposite side of the dragged selection handle
   // or be the center of the selection if shouldResizeFromCenter
   const [anchorX, anchorY] = shouldResizeFromCenter
-    ? point(midX, midY)
+    ? pointFrom(midX, midY)
     : anchorsMap[direction];
 
   const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;
@@ -909,6 +918,8 @@ export const resizeMultipleElements = (
       fontSize?: ExcalidrawTextElement["fontSize"];
       scale?: ExcalidrawImageElement["scale"];
       boundTextFontSize?: ExcalidrawTextElement["fontSize"];
+      startBinding?: ExcalidrawArrowElement["startBinding"];
+      endBinding?: ExcalidrawArrowElement["endBinding"];
     };
   }[] = [];
 
@@ -993,19 +1004,6 @@ export const resizeMultipleElements = (
 
     mutateElement(element, update, false);
 
-    if (isArrowElement(element) && isElbowArrow(element)) {
-      mutateElbowArrow(
-        element,
-        elementsMap,
-        element.points,
-        undefined,
-        undefined,
-        {
-          informMutation: false,
-        },
-      );
-    }
-
     updateBoundElements(element, elementsMap, {
       simultaneouslyUpdated: elementsToUpdate,
       oldSize: { width: oldWidth, height: oldHeight },
@@ -1054,12 +1052,12 @@ const rotateMultipleElements = (
       const origAngle =
         originalElements.get(element.id)?.angle ?? element.angle;
       const [rotatedCX, rotatedCY] = pointRotateRads(
-        point(cx, cy),
-        point(centerX, centerY),
+        pointFrom(cx, cy),
+        pointFrom(centerX, centerY),
         (centerAngle + origAngle - element.angle) as Radians,
       );
 
-      if (isArrowElement(element) && isElbowArrow(element)) {
+      if (isElbowArrow(element)) {
         const points = getArrowLocalFixedPoints(element, elementsMap);
         mutateElbowArrow(element, elementsMap, points);
       } else {
@@ -1111,40 +1109,44 @@ export const getResizeOffsetXY = (
   const angle = (
     selectedElements.length === 1 ? selectedElements[0].angle : 0
   ) as Radians;
-  [x, y] = pointRotateRads(point(x, y), point(cx, cy), -angle as Radians);
+  [x, y] = pointRotateRads(
+    pointFrom(x, y),
+    pointFrom(cx, cy),
+    -angle as Radians,
+  );
   switch (transformHandleType) {
     case "n":
       return pointRotateRads(
-        point(x - (x1 + x2) / 2, y - y1),
-        point(0, 0),
+        pointFrom(x - (x1 + x2) / 2, y - y1),
+        pointFrom(0, 0),
         angle,
       );
     case "s":
       return pointRotateRads(
-        point(x - (x1 + x2) / 2, y - y2),
-        point(0, 0),
+        pointFrom(x - (x1 + x2) / 2, y - y2),
+        pointFrom(0, 0),
         angle,
       );
     case "w":
       return pointRotateRads(
-        point(x - x1, y - (y1 + y2) / 2),
-        point(0, 0),
+        pointFrom(x - x1, y - (y1 + y2) / 2),
+        pointFrom(0, 0),
         angle,
       );
     case "e":
       return pointRotateRads(
-        point(x - x2, y - (y1 + y2) / 2),
-        point(0, 0),
+        pointFrom(x - x2, y - (y1 + y2) / 2),
+        pointFrom(0, 0),
         angle,
       );
     case "nw":
-      return pointRotateRads(point(x - x1, y - y1), point(0, 0), angle);
+      return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
     case "ne":
-      return pointRotateRads(point(x - x2, y - y1), point(0, 0), angle);
+      return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
     case "sw":
-      return pointRotateRads(point(x - x1, y - y2), point(0, 0), angle);
+      return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
     case "se":
-      return pointRotateRads(point(x - x2, y - y2), point(0, 0), angle);
+      return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
     default:
       return [0, 0];
   }

packages/excalidraw/element/resizeTest.ts

@@ -23,7 +23,7 @@ import { SIDE_RESIZING_THRESHOLD } from "../constants";
 import { isLinearElement } from "./typeChecks";
 import type { GlobalPoint, LineSegment, LocalPoint } from "../../math";
 import {
-  point,
+  pointFrom,
   pointOnLineSegment,
   pointRotateRads,
   type Radians,
@@ -92,16 +92,20 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
     if (!(isLinearElement(element) && element.points.length <= 2)) {
       const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        point(x1 - SPACING, y1 - SPACING),
-        point(x2 + SPACING, y2 + SPACING),
-        point(cx, cy),
+        pointFrom(x1 - SPACING, y1 - SPACING),
+        pointFrom(x2 + SPACING, y2 + SPACING),
+        pointFrom(cx, cy),
         element.angle,
       );
 
       for (const [dir, side] of Object.entries(sides)) {
         // test to see if x, y are on the line segment
         if (
-          pointOnLineSegment(point(x, y), side as LineSegment<Point>, SPACING)
+          pointOnLineSegment(
+            pointFrom(x, y),
+            side as LineSegment<Point>,
+            SPACING,
+          )
         ) {
           return dir as TransformHandleType;
         }
@@ -178,9 +182,9 @@ export const getTransformHandleTypeFromCoords = <
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
 
     const sides = getSelectionBorders(
-      point(x1 - SPACING, y1 - SPACING),
-      point(x2 + SPACING, y2 + SPACING),
-      point(cx, cy),
+      pointFrom(x1 - SPACING, y1 - SPACING),
+      pointFrom(x2 + SPACING, y2 + SPACING),
+      pointFrom(cx, cy),
       0 as Radians,
     );
 
@@ -188,7 +192,7 @@ export const getTransformHandleTypeFromCoords = <
       // test to see if x, y are on the line segment
       if (
         pointOnLineSegment(
-          point(scenePointerX, scenePointerY),
+          pointFrom(scenePointerX, scenePointerY),
           side as LineSegment<Point>,
           SPACING,
         )
@@ -265,10 +269,10 @@ const getSelectionBorders = <Point extends LocalPoint | GlobalPoint>(
   center: Point,
   angle: Radians,
 ) => {
-  const topLeft = pointRotateRads(point(x1, y1), center, angle);
-  const topRight = pointRotateRads(point(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads(point(x1, y2), center, angle);
-  const bottomRight = pointRotateRads(point(x2, y2), center, angle);
+  const topLeft = pointRotateRads(pointFrom(x1, y1), center, angle);
+  const topRight = pointRotateRads(pointFrom(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, angle);
+  const bottomRight = pointRotateRads(pointFrom(x2, y2), center, angle);
 
   return {
     n: [topLeft, topRight],

packages/excalidraw/element/routing.test.tsx

@@ -17,7 +17,7 @@ import type {
   ExcalidrawElbowArrowElement,
 } from "./types";
 import { ARROW_TYPE } from "../constants";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 const { h } = window;
 
@@ -32,8 +32,8 @@ describe("elbow arrow routing", () => {
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(arrow);
     mutateElbowArrow(arrow, scene.getNonDeletedElementsMap(), [
-      point(-45 - arrow.x, -100.1 - arrow.y),
-      point(45 - arrow.x, 99.9 - arrow.y),
+      pointFrom(-45 - arrow.x, -100.1 - arrow.y),
+      pointFrom(45 - arrow.x, 99.9 - arrow.y),
     ]);
     expect(arrow.points).toEqual([
       [0, 0],
@@ -69,7 +69,7 @@ describe("elbow arrow routing", () => {
       y: -100.1,
       width: 90,
       height: 200,
-      points: [point(0, 0), point(90, 200)],
+      points: [pointFrom(0, 0), pointFrom(90, 200)],
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(rectangle1);
     scene.insertElement(rectangle2);
@@ -81,7 +81,7 @@ describe("elbow arrow routing", () => {
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    mutateElbowArrow(arrow, elementsMap, [point(0, 0), point(90, 200)]);
+    mutateElbowArrow(arrow, elementsMap, [pointFrom(0, 0), pointFrom(90, 200)]);
 
     expect(arrow.points).toEqual([
       [0, 0],
@@ -94,7 +94,16 @@ describe("elbow arrow routing", () => {
 
 describe("elbow arrow ui", () => {
   beforeEach(async () => {
+    localStorage.clear();
     await render(<Excalidraw handleKeyboardGlobally={true} />);
+
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
+      button: 2,
+      clientX: 1,
+      clientY: 1,
+    });
+    const contextMenu = UI.queryContextMenu();
+    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
   });
 
   it("can follow bound shapes", async () => {
@@ -130,8 +139,8 @@ describe("elbow arrow ui", () => {
     expect(arrow.elbowed).toBe(true);
     expect(arrow.points).toEqual([
       [0, 0],
-      [35, 0],
-      [35, 200],
+      [45, 0],
+      [45, 200],
       [90, 200],
     ]);
   });
@@ -163,14 +172,6 @@ describe("elbow arrow ui", () => {
       h.state,
     )[0] as ExcalidrawArrowElement;
 
-    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
-      button: 2,
-      clientX: 1,
-      clientY: 1,
-    });
-    const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByTestId(contextMenu!, "stats")!);
-
     mouse.click(51, 51);
 
     const inputAngle = UI.queryStatsProperty("A")?.querySelector(
@@ -182,8 +183,8 @@ describe("elbow arrow ui", () => {
       [0, 0],
       [35, 0],
       [35, 90],
-      [25, 90],
-      [25, 165],
+      [35, 90], // Note that coordinates are rounded above!
+      [35, 165],
       [103, 165],
     ]);
   });

packages/excalidraw/element/routing.ts

@@ -1,6 +1,6 @@
 import type { Radians } from "../../math";
 import {
-  point,
+  pointFrom,
   pointScaleFromOrigin,
   pointTranslate,
   vector,
@@ -36,11 +36,11 @@ import {
   HEADING_UP,
   vectorToHeading,
 } from "./heading";
+import type { ElementUpdate } from "./mutateElement";
 import { mutateElement } from "./mutateElement";
 import { isBindableElement, isRectanguloidElement } from "./typeChecks";
 import type {
   ExcalidrawElbowArrowElement,
-  FixedPointBinding,
   NonDeletedSceneElementsMap,
   SceneElementsMap,
 } from "./types";
@@ -72,16 +72,48 @@ export const mutateElbowArrow = (
   elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   nextPoints: readonly LocalPoint[],
   offset?: Vector,
-  otherUpdates?: {
-    startBinding?: FixedPointBinding | null;
-    endBinding?: FixedPointBinding | null;
+  otherUpdates?: Omit<
+    ElementUpdate<ExcalidrawElbowArrowElement>,
+    "angle" | "x" | "y" | "width" | "height" | "elbowed" | "points"
+  >,
+  options?: {
+    isDragging?: boolean;
+    informMutation?: boolean;
   },
+) => {
+  const update = updateElbowArrow(
+    arrow,
+    elementsMap,
+    nextPoints,
+    offset,
+    options,
+  );
+  if (update) {
+    mutateElement(
+      arrow,
+      {
+        ...otherUpdates,
+        ...update,
+        angle: 0 as Radians,
+      },
+      options?.informMutation,
+    );
+  } else {
+    console.error("Elbow arrow cannot find a route");
+  }
+};
+
+export const updateElbowArrow = (
+  arrow: ExcalidrawElbowArrowElement,
+  elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
+  nextPoints: readonly LocalPoint[],
+  offset?: Vector,
   options?: {
     isDragging?: boolean;
     disableBinding?: boolean;
     informMutation?: boolean;
   },
-) => {
+): ElementUpdate<ExcalidrawElbowArrowElement> | null => {
   const origStartGlobalPoint: GlobalPoint = pointTranslate(
     pointTranslate<LocalPoint, GlobalPoint>(
       nextPoints[0],
@@ -235,6 +267,8 @@ export const mutateElbowArrow = (
           BASE_PADDING,
         ),
     boundsOverlap,
+    hoveredStartElement && aabbForElement(hoveredStartElement),
+    hoveredEndElement && aabbForElement(hoveredEndElement),
   );
   const startDonglePosition = getDonglePosition(
     dynamicAABBs[0],
@@ -295,18 +329,10 @@ export const mutateElbowArrow = (
     startDongle && points.unshift(startGlobalPoint);
     endDongle && points.push(endGlobalPoint);
 
-    mutateElement(
-      arrow,
-      {
-        ...otherUpdates,
-        ...normalizedArrowElementUpdate(simplifyElbowArrowPoints(points), 0, 0),
-        angle: 0 as Radians,
-      },
-      options?.informMutation,
-    );
-  } else {
-    console.error("Elbow arrow cannot find a route");
+    return normalizedArrowElementUpdate(simplifyElbowArrowPoints(points), 0, 0);
   }
+
+  return null;
 };
 
 const offsetFromHeading = (
@@ -475,7 +501,11 @@ const generateDynamicAABBs = (
   startDifference?: [number, number, number, number],
   endDifference?: [number, number, number, number],
   disableSideHack?: boolean,
+  startElementBounds?: Bounds | null,
+  endElementBounds?: Bounds | null,
 ): Bounds[] => {
+  const startEl = startElementBounds ?? a;
+  const endEl = endElementBounds ?? b;
   const [startUp, startRight, startDown, startLeft] = startDifference ?? [
     0, 0, 0, 0,
   ];
@@ -484,29 +514,29 @@ const generateDynamicAABBs = (
   const first = [
     a[0] > b[2]
       ? a[1] > b[3] || a[3] < b[1]
-        ? Math.min((a[0] + b[2]) / 2, a[0] - startLeft)
-        : (a[0] + b[2]) / 2
+        ? Math.min((startEl[0] + endEl[2]) / 2, a[0] - startLeft)
+        : (startEl[0] + endEl[2]) / 2
       : a[0] > b[0]
       ? a[0] - startLeft
       : common[0] - startLeft,
     a[1] > b[3]
       ? a[0] > b[2] || a[2] < b[0]
-        ? Math.min((a[1] + b[3]) / 2, a[1] - startUp)
-        : (a[1] + b[3]) / 2
+        ? Math.min((startEl[1] + endEl[3]) / 2, a[1] - startUp)
+        : (startEl[1] + endEl[3]) / 2
       : a[1] > b[1]
       ? a[1] - startUp
       : common[1] - startUp,
     a[2] < b[0]
       ? a[1] > b[3] || a[3] < b[1]
-        ? Math.max((a[2] + b[0]) / 2, a[2] + startRight)
-        : (a[2] + b[0]) / 2
+        ? Math.max((startEl[2] + endEl[0]) / 2, a[2] + startRight)
+        : (startEl[2] + endEl[0]) / 2
       : a[2] < b[2]
       ? a[2] + startRight
       : common[2] + startRight,
     a[3] < b[1]
       ? a[0] > b[2] || a[2] < b[0]
-        ? Math.max((a[3] + b[1]) / 2, a[3] + startDown)
-        : (a[3] + b[1]) / 2
+        ? Math.max((startEl[3] + endEl[1]) / 2, a[3] + startDown)
+        : (startEl[3] + endEl[1]) / 2
       : a[3] < b[3]
       ? a[3] + startDown
       : common[3] + startDown,
@@ -514,29 +544,29 @@ const generateDynamicAABBs = (
   const second = [
     b[0] > a[2]
       ? b[1] > a[3] || b[3] < a[1]
-        ? Math.min((b[0] + a[2]) / 2, b[0] - endLeft)
-        : (b[0] + a[2]) / 2
+        ? Math.min((endEl[0] + startEl[2]) / 2, b[0] - endLeft)
+        : (endEl[0] + startEl[2]) / 2
       : b[0] > a[0]
       ? b[0] - endLeft
       : common[0] - endLeft,
     b[1] > a[3]
       ? b[0] > a[2] || b[2] < a[0]
-        ? Math.min((b[1] + a[3]) / 2, b[1] - endUp)
-        : (b[1] + a[3]) / 2
+        ? Math.min((endEl[1] + startEl[3]) / 2, b[1] - endUp)
+        : (endEl[1] + startEl[3]) / 2
       : b[1] > a[1]
       ? b[1] - endUp
       : common[1] - endUp,
     b[2] < a[0]
       ? b[1] > a[3] || b[3] < a[1]
-        ? Math.max((b[2] + a[0]) / 2, b[2] + endRight)
-        : (b[2] + a[0]) / 2
+        ? Math.max((endEl[2] + startEl[0]) / 2, b[2] + endRight)
+        : (endEl[2] + startEl[0]) / 2
       : b[2] < a[2]
       ? b[2] + endRight
       : common[2] + endRight,
     b[3] < a[1]
       ? b[0] > a[2] || b[2] < a[0]
-        ? Math.max((b[3] + a[1]) / 2, b[3] + endDown)
-        : (b[3] + a[1]) / 2
+        ? Math.max((endEl[3] + startEl[1]) / 2, b[3] + endDown)
+        : (endEl[3] + startEl[1]) / 2
       : b[3] < a[3]
       ? b[3] + endDown
       : common[3] + endDown,
@@ -713,13 +743,13 @@ const getDonglePosition = (
 ): GlobalPoint => {
   switch (heading) {
     case HEADING_UP:
-      return point(p[0], bounds[1]);
+      return pointFrom(p[0], bounds[1]);
     case HEADING_RIGHT:
-      return point(bounds[2], p[1]);
+      return pointFrom(bounds[2], p[1]);
     case HEADING_DOWN:
-      return point(p[0], bounds[3]);
+      return pointFrom(p[0], bounds[3]);
   }
-  return point(bounds[0], p[1]);
+  return pointFrom(bounds[0], p[1]);
 };
 
 const estimateSegmentCount = (

packages/excalidraw/element/subtypes/index.ts

@@ -0,0 +1,541 @@
+import { useEffect } from "react";
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  NonDeleted,
+} from "../types";
+import { getNonDeletedElements } from "../";
+import { getSelectedElements } from "../../scene";
+import type { AppState, ExcalidrawImperativeAPI, ToolType } from "../../types";
+import type { LangLdr } from "../../i18n";
+import { registerCustomLangData } from "../../i18n";
+
+import type {
+  Action,
+  ActionName,
+  ActionPredicateFn,
+  CustomActionName,
+} from "../../actions/types";
+import { makeCustomActionName } from "../../actions/types";
+import { 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 ActionName[];
+}[] = [];
+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"] & ToolType)[];
+  actionNames?: readonly SubtypeActionName[];
+  disabledNames?: readonly DisabledActionName[];
+  shortcutMap?: Record<string, 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,
+  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,
+  app,
+) {
+  // 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.editingTextElement
+    ? [appState.editingTextElement, ...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, app.scene.getElementsMapIncludingDeleted())!
+          : 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, app.scene.getElementsMapIncludingDeleted())!
+          : 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, app.scene.getElementsMapIncludingDeleted())!
+          : 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, app.scene.getElementsMapIncludingDeleted())!
+          : 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,
+                  app.scene.getElementsMapIncludingDeleted(),
+                )!
+              : 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 };
+  render: (
+    element: NonDeleted<ExcalidrawElement>,
+    elementsMap: ElementsMap,
+    context: CanvasRenderingContext2D,
+  ) => void;
+  renderSvg: (
+    svgRoot: SVGElement,
+    addToRoot: (node: SVGElement, element: ExcalidrawElement) => void,
+    element: NonDeleted<ExcalidrawElement>,
+    elementsMap: ElementsMap,
+    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: {}, setLanguageAux: LangLdr) => 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: readonly 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.map((actionName) =>
+          makeCustomActionName(actionName),
+        ),
+      },
+    ];
+  }
+  if (record.disabledNames) {
+    disabledActionMap = [
+      ...disabledActionMap,
+      { subtype, actions: record.disabledNames },
+    ];
+  }
+  if (record.alwaysEnabledNames) {
+    alwaysEnabledMap = [
+      ...alwaysEnabledMap,
+      {
+        subtype,
+        actions: record.alwaysEnabledNames.map((actionName) =>
+          makeCustomActionName(actionName),
+        ),
+      },
+    ];
+  }
+  const customShortcutMap = record.shortcutMap;
+  if (customShortcutMap) {
+    const shortcutMap: Record<CustomActionName, string[]> = {};
+    for (const key in customShortcutMap) {
+      shortcutMap[makeCustomActionName(key)] = customShortcutMap[key];
+    }
+    registerCustomShortcuts(shortcutMap);
+  }
+
+  // Prepare the subtype
+  const { actions, methods } = subtypePrepFn(
+    addSubtypeAction,
+    registerCustomLangData,
+    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[],
+) => {
+  const elementsMap = new Map() as ElementsMap;
+  for (const element of elements) {
+    if (!element.isDeleted) {
+      elementsMap.set(element.id, element);
+    }
+  }
+  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, elementsMap),
+          elementsMap,
+          false,
+        );
+      }
+      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.triggerUpdate());
+  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);
+        if (prep.actions) {
+          prep.actions.forEach((action) => api.registerAction(action));
+        }
+      }
+    }
+  }, [api, record, subtypePrepFn]);
+};

packages/excalidraw/element/subtypes/mathjax/icon.tsx

@@ -0,0 +1,13 @@
+import type { 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 },
+  );

packages/excalidraw/element/subtypes/mathjax/index.ts

@@ -0,0 +1,15 @@
+import type { 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);
+};

packages/excalidraw/element/subtypes/mathjax/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "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"
+  }
+}

packages/excalidraw/element/subtypes/mathjax/tests/implementation.test.tsx

@@ -0,0 +1,76 @@
+import { vi } from "vitest";
+import { render } from "../../../../tests/test-utils";
+import { API } from "../../../../tests/helpers/api";
+import { Excalidraw } from "../../../../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,
+    };
+    expect(measureTextElement(elements[1])).toStrictEqual(metrics);
+    expect(measureTextElement(elements[2])).toStrictEqual(metrics);
+  });
+});

packages/excalidraw/element/subtypes/mathjax/types.ts

@@ -0,0 +1,17 @@
+import { getShortcutKey } from "../../../utils";
+import type { 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"],
+};

packages/excalidraw/element/textElement.ts

@@ -1,3 +1,5 @@
+import type { SubtypeMethods } from "./subtypes";
+import { getSubtypeMethods } from "./subtypes";
 import { getFontString, arrayToMap, isTestEnv, normalizeEOL } from "../utils";
 import type {
   ElementsMap,
@@ -30,6 +32,30 @@ import {
 } from "./containerCache";
 import type { 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 (
     normalizeEOL(text)
@@ -64,18 +90,12 @@ export const redrawTextBoundingBox = (
     maxWidth = container
       ? getBoundTextMaxWidth(container, textElement)
       : textElement.width;
-    boundTextUpdates.text = wrapText(
-      textElement.originalText,
-      getFontString(textElement),
-      maxWidth,
-    );
+    boundTextUpdates.text = wrapTextElement(textElement, maxWidth);
   }
 
-  const metrics = measureText(
-    boundTextUpdates.text,
-    getFontString(textElement),
-    textElement.lineHeight,
-  );
+  const metrics = measureTextElement(textElement, {
+    text: boundTextUpdates.text,
+  });
 
   // Note: only update width for unwrapped text and bound texts (which always have autoResize set to true)
   if (textElement.autoResize) {
@@ -83,6 +103,14 @@ export const redrawTextBoundingBox = (
   }
   boundTextUpdates.height = metrics.height;
 
+  // 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,
@@ -191,17 +219,9 @@ export const handleBindTextResize = (
       (transformHandleType !== "n" && transformHandleType !== "s")
     ) {
       if (text) {
-        text = wrapText(
-          textElement.originalText,
-          getFontString(textElement),
-          maxWidth,
-        );
+        text = wrapTextElement(textElement, maxWidth);
       }
-      const metrics = measureText(
-        text,
-        getFontString(textElement),
-        textElement.lineHeight,
-      );
+      const metrics = measureTextElement(textElement, { text });
       nextHeight = metrics.height;
       nextWidth = metrics.width;
     }

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -19,7 +19,7 @@ import type {
 import { API } from "../tests/helpers/api";
 import { getOriginalContainerHeightFromCache } from "./containerCache";
 import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -42,7 +42,7 @@ describe("textWysiwyg", () => {
         type: "line",
         width: 100,
         height: 0,
-        points: [point(0, 0), point(100, 0)],
+        points: [pointFrom(0, 0), pointFrom(100, 0)],
       });
       const textSize = 20;
       const text = API.createElement({

packages/excalidraw/element/textWysiwyg.tsx

@@ -25,6 +25,7 @@ import {
   getContainerElement,
   getTextElementAngle,
   getTextWidth,
+  measureText,
   normalizeText,
   redrawTextBoundingBox,
   wrapText,
@@ -46,12 +47,15 @@ import {
 import type App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import type { SubtypeMethods } from "./subtypes";
+import { getSubtypeMethods } from "./subtypes";
 import {
   originalContainerCache,
   updateOriginalContainerCache,
 } from "./containerCache";
 
 const getTransform = (
+  offsetX: number,
   width: number,
   height: number,
   angle: number,
@@ -69,9 +73,18 @@ const getTransform = (
   if (height > maxHeight && zoom.value !== 1) {
     translateY = (maxHeight * (zoom.value - 1)) / 2;
   }
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
+  const offset = offsetX !== 0 ? ` translate(${offsetX}px, 0px)` : "";
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)${offset}`;
 };
 
+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,
@@ -137,14 +150,27 @@ export const textWysiwyg = ({
         app.scene.getNonDeletedElementsMap(),
       );
 
-      let width = updatedTextElement.width;
+      // Editing metrics
+      const eMetrics = measureText(
+        container && updatedTextElement.containerId
+          ? wrapText(
+              updatedTextElement.originalText,
+              getFontString(updatedTextElement),
+              getBoundTextMaxWidth(container, updatedTextElement),
+            )
+          : updatedTextElement.originalText,
+        getFontString(updatedTextElement),
+        updatedTextElement.lineHeight,
+      );
 
-      // set to element height by default since that's
+      let width = Math.max(updatedTextElement.width, eMetrics.width);
+
+      // Set to element height by default since that's
       // what is going to be used for unbounded text
-      let height = updatedTextElement.height;
+      let height = Math.max(updatedTextElement.height, eMetrics.height);
 
-      let maxWidth = updatedTextElement.width;
-      let maxHeight = updatedTextElement.height;
+      let maxWidth = width;
+      let maxHeight = height;
 
       if (container && updatedTextElement.containerId) {
         if (isArrowElement(container)) {
@@ -240,14 +266,37 @@ export const textWysiwyg = ({
         width += 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;
+      let { width: w, height: h } = updatedTextElement;
+
       // add 5% buffer otherwise it causes wysiwyg to jump
       height *= 1.05;
+      h *= 1.05;
+
+      const transformOrigin =
+        updatedTextElement.width !== eMetrics.width ||
+        updatedTextElement.height !== eMetrics.height
+          ? { transformOrigin: `${w / 2}px ${h / 2}px` }
+          : {};
 
       const font = getFontString(updatedTextElement);
 
       // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)
       const padding = !isSafari
-        ? Math.ceil(updatedTextElement.fontSize / 2)
+        ? Math.ceil(updatedTextElement.fontSize / appState.zoom.value / 2)
         : 0;
 
       // Make sure text editor height doesn't go beyond viewport
@@ -261,7 +310,9 @@ export const textWysiwyg = ({
         height: `${height}px`,
         left: `${viewportX - padding}px`,
         top: `${viewportY}px`,
+        ...transformOrigin,
         transform: getTransform(
+          offsetX,
           width,
           height,
           getTextElementAngle(updatedTextElement, container),
@@ -322,6 +373,7 @@ export const textWysiwyg = ({
     whiteSpace,
     overflowWrap: "break-word",
     boxSizing: "content-box",
+    ...getEditorStyle(element),
   });
   editable.value = element.originalText;
   updateWysiwygStyle();

packages/excalidraw/element/transformHandles.ts

@@ -19,7 +19,7 @@ import {
   isIOS,
 } from "../constants";
 import type { Radians } from "../../math";
-import { point, pointRotateRads } from "../../math";
+import { pointFrom, pointRotateRads } from "../../math";
 
 export type TransformHandleDirection =
   | "n"
@@ -95,8 +95,8 @@ const generateTransformHandle = (
   angle: Radians,
 ): TransformHandle => {
   const [xx, yy] = pointRotateRads(
-    point(x + width / 2, y + height / 2),
-    point(cx, cy),
+    pointFrom(x + width / 2, y + height / 2),
+    pointFrom(cx, cy),
     angle,
   );
   return [xx - width / 2, yy - height / 2, width, height];

packages/excalidraw/element/typeChecks.ts

@@ -320,9 +320,12 @@ export const getDefaultRoundnessTypeForElement = (
 };
 
 export const isFixedPointBinding = (
-  binding: PointBinding,
+  binding: PointBinding | FixedPointBinding,
 ): binding is FixedPointBinding => {
-  return binding.fixedPoint != null;
+  return (
+    Object.hasOwn(binding, "fixedPoint") &&
+    (binding as FixedPointBinding).fixedPoint != null
+  );
 };
 
 // TODO: Move this to @excalidraw/math

packages/excalidraw/element/types.ts

@@ -76,6 +76,7 @@ type _ExcalidrawElementBase = Readonly<{
   updated: number;
   link: string | null;
   locked: boolean;
+  subtype?: string;
   customData?: Record<string, any>;
 }>;
 
@@ -193,6 +194,7 @@ export type ExcalidrawElement =
   | ExcalidrawGenericElement
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
+  | ExcalidrawArrowElement
   | ExcalidrawFreeDrawElement
   | ExcalidrawImageElement
   | ExcalidrawFrameElement
@@ -268,15 +270,19 @@ export type PointBinding = {
   elementId: ExcalidrawBindableElement["id"];
   focus: number;
   gap: number;
-  // Represents the fixed point binding information in form of a vertical and
-  // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
-  // gives the user selected fixed point by multiplying the bound element width
-  // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
-  // bound element-local point coordinate.
-  fixedPoint: FixedPoint | null;
 };
 
-export type FixedPointBinding = Merge<PointBinding, { fixedPoint: FixedPoint }>;
+export type FixedPointBinding = Merge<
+  PointBinding,
+  {
+    // Represents the fixed point binding information in form of a vertical and
+    // horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
+    // gives the user selected fixed point by multiplying the bound element width
+    // with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
+    // bound element-local point coordinate.
+    fixedPoint: FixedPoint;
+  }
+>;
 
 export type Arrowhead =
   | "arrow"

packages/excalidraw/fonts/ExcalidrawFont.ts

@@ -1,4 +1,8 @@
-import { stringToBase64, toByteString } from "../data/encode";
+import {
+  base64ToArrayBuffer,
+  stringToBase64,
+  toByteString,
+} from "../data/encode";
 import { LOCAL_FONT_PROTOCOL } from "./metadata";
 import loadWoff2 from "./wasm/woff2.loader";
 import loadHbSubset from "./wasm/hb-subset.loader";
@@ -49,10 +53,7 @@ export class ExcalidrawFont implements Font {
 
       // it's dataurl (server), the font is inlined as base64, no need to fetch
       if (url.protocol === "data:") {
-        const arrayBuffer = Buffer.from(
-          url.toString().split(",")[1],
-          "base64",
-        ).buffer;
+        const arrayBuffer = base64ToArrayBuffer(url.toString().split(",")[1]);
 
         const base64 = await ExcalidrawFont.subsetGlyphsByCodePoints(
           arrayBuffer,

packages/excalidraw/fonts/index.ts

@@ -24,14 +24,14 @@ import Cascadia from "./assets/CascadiaCode-Regular.woff2";
 import ComicShanns from "./assets/ComicShanns-Regular.woff2";
 import LiberationSans from "./assets/LiberationSans-Regular.woff2";
 
-import LilitaLatin from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
-import LilitaLatinExt from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
+import LilitaLatin from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
+import LilitaLatinExt from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
 
-import NunitoLatin from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
-import NunitoLatinExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
-import NunitoCyrilic from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
-import NunitoCyrilicExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
-import NunitoVietnamese from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
+import NunitoLatin from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
+import NunitoLatinExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
+import NunitoCyrilic from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
+import NunitoCyrilicExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
+import NunitoVietnamese from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
 
 export class Fonts {
   // it's ok to track fonts across multiple instances only once, so let's use

packages/excalidraw/frame.ts

@@ -29,7 +29,7 @@ import { getElementLineSegments } from "./element/bounds";
 import { doLineSegmentsIntersect, elementsOverlappingBBox } from "../utils/";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 import type { ReadonlySetLike } from "./utility-types";
-import { isPointWithinBounds, point } from "../math";
+import { isPointWithinBounds, pointFrom } from "../math";
 
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
@@ -159,9 +159,9 @@ export const isCursorInFrame = (
   const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
 
   return isPointWithinBounds(
-    point(fx1, fy1),
-    point(cursorCoords.x, cursorCoords.y),
-    point(fx2, fy2),
+    pointFrom(fx1, fy1),
+    pointFrom(cursorCoords.x, cursorCoords.y),
+    pointFrom(fx2, fy2),
   );
 };
 

packages/excalidraw/global.d.ts

@@ -104,3 +104,5 @@ declare namespace jest {
     toBeNonNaNNumber(): void;
   }
 }
+
+declare module "mathjax-full/js/input/asciimath/mathjax2/legacy/MathJax";

packages/excalidraw/i18n.ts

@@ -87,6 +87,17 @@ if (import.meta.env.DEV) {
 let currentLang: Language = defaultLang;
 let currentLangData = {};
 
+let fallbackCustomLangData = {};
+const langLoaders: LangLdr[] = [];
+export type LangLdr = (langCode: string) => Promise<{}>;
+
+export const registerCustomLangData = (fallbackLangData: {}, ldr: LangLdr) => {
+  if (!langLoaders.includes(ldr)) {
+    fallbackCustomLangData = { ...fallbackLangData, ...fallbackCustomLangData };
+    langLoaders.push(ldr);
+  }
+};
+
 export const setLanguage = async (lang: Language) => {
   currentLang = lang;
   document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
@@ -101,6 +112,14 @@ export const setLanguage = async (lang: Language) => {
       console.error(`Failed to load language ${lang.code}:`, error.message);
       currentLangData = fallbackLangData;
     }
+    const auxData = langLoaders.map((fn) => fn(currentLang.code));
+    while (auxData.length > 0) {
+      try {
+        currentLangData = { ...(await auxData.pop()), ...currentLangData };
+      } catch (error: any) {
+        console.error(`Error loading ${lang.code} extra data:`, error.message);
+      }
+    }
   }
 
   jotaiStore.set(editorLangCodeAtom, lang.code);
@@ -123,7 +142,9 @@ const findPartsForData = (data: any, parts: string[]) => {
 };
 
 export const t = (
-  path: NestedKeyOf<typeof fallbackLangData>,
+  path:
+    | NestedKeyOf<typeof fallbackLangData>
+    | `${NestedKeyOf<typeof fallbackLangData>}.${string}`,
   replacement?: { [key: string]: string | number } | null,
   fallback?: string,
 ) => {
@@ -138,6 +159,7 @@ export const t = (
   let translation =
     findPartsForData(currentLangData, parts) ||
     findPartsForData(fallbackLangData, parts) ||
+    findPartsForData(fallbackCustomLangData, parts) ||
     fallback;
   if (translation === undefined) {
     const errorMessage = `Can't find translation for ${path}`;

packages/excalidraw/package.json

@@ -72,6 +72,7 @@
     "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",
     "lodash.throttle": "4.1.1",
+    "mathjax-full": "3.2.2",
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "1.0.11",

packages/excalidraw/renderer/interactiveScene.ts

@@ -52,7 +52,6 @@ import {
 } from "./helpers";
 import oc from "open-color";
 import {
-  isArrowElement,
   isElbowArrow,
   isFrameLikeElement,
   isLinearElement,
@@ -807,7 +806,6 @@ const _renderInteractiveScene = ({
             // Elbow arrow elements cannot be selected when bound on either end
             (
               isSingleLinearElementSelected &&
-              isArrowElement(element) &&
               isElbowArrow(element) &&
               (element.startBinding || element.endBinding)
             )

packages/excalidraw/renderer/renderElement.ts

@@ -23,7 +23,6 @@ import type { RoughCanvas } from "roughjs/bin/canvas";
 
 import type {
   StaticCanvasRenderConfig,
-  RenderableElementsMap,
   InteractiveCanvasRenderConfig,
 } from "../scene/types";
 import { distance, getFontString, isRTL } from "../utils";
@@ -37,6 +36,7 @@ import type {
   PendingExcalidrawElements,
 } from "../types";
 import { getDefaultAppState } from "../appState";
+import { getSubtypeMethods } from "../element/subtypes";
 import {
   BOUND_TEXT_PADDING,
   ELEMENT_READY_TO_ERASE_OPACITY,
@@ -251,7 +251,14 @@ const generateElementCanvas = (
     context.filter = IMAGE_INVERT_FILTER;
   }
 
-  drawElementOnCanvas(element, rc, context, renderConfig, appState);
+  drawElementOnCanvas(
+    element,
+    elementsMap,
+    rc,
+    context,
+    renderConfig,
+    appState,
+  );
 
   context.restore();
 
@@ -374,11 +381,22 @@ const drawImagePlaceholder = (
 
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
   appState: StaticCanvasAppState,
 ) => {
+  context.globalAlpha =
+    ((getContainingFrame(element, elementsMap)?.opacity ?? 100) *
+      element.opacity) /
+    10000;
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.render) {
+    map.render(element, elementsMap, context);
+    context.globalAlpha = 1;
+    return;
+  }
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -673,7 +691,7 @@ export const renderSelectionElement = (
 
 export const renderElement = (
   element: NonDeletedExcalidrawElement,
-  elementsMap: RenderableElementsMap,
+  elementsMap: ElementsMap,
   allElementsMap: NonDeletedSceneElementsMap,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
@@ -742,7 +760,14 @@ export const renderElement = (
         context.translate(cx, cy);
         context.rotate(element.angle);
         context.translate(-shiftX, -shiftY);
-        drawElementOnCanvas(element, rc, context, renderConfig, appState);
+        drawElementOnCanvas(
+          element,
+          elementsMap,
+          rc,
+          context,
+          renderConfig,
+          appState,
+        );
         context.restore();
       } else {
         const elementWithCanvas = generateElementWithCanvas(
@@ -837,6 +862,7 @@ export const renderElement = (
 
           drawElementOnCanvas(
             element,
+            elementsMap,
             tempRc,
             tempCanvasContext,
             renderConfig,
@@ -880,7 +906,14 @@ export const renderElement = (
           }
 
           context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig, appState);
+          drawElementOnCanvas(
+            element,
+            elementsMap,
+            rc,
+            context,
+            renderConfig,
+            appState,
+          );
         }
 
         context.restore();

packages/excalidraw/renderer/renderSnaps.ts

@@ -1,4 +1,4 @@
-import { point, type GlobalPoint, type LocalPoint } from "../../math";
+import { pointFrom, type GlobalPoint, type LocalPoint } from "../../math";
 import { THEME } from "../constants";
 import type { PointSnapLine, PointerSnapLine } from "../snapping";
 import type { InteractiveCanvasAppState } from "../types";
@@ -140,27 +140,31 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
     // (1)
     if (!appState.zenModeEnabled) {
       drawLine(
-        point(from[0], from[1] - FULL),
-        point(from[0], from[1] + FULL),
+        pointFrom(from[0], from[1] - FULL),
+        pointFrom(from[0], from[1] + FULL),
         context,
       );
     }
 
     // (3)
     drawLine(
-      point(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
-      point(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
+      pointFrom(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
+      pointFrom(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
       context,
     );
     drawLine(
-      point(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
-      point(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
+      pointFrom(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
+      pointFrom(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
       context,
     );
 
     if (!appState.zenModeEnabled) {
       // (4)
-      drawLine(point(to[0], to[1] - FULL), point(to[0], to[1] + FULL), context);
+      drawLine(
+        pointFrom(to[0], to[1] - FULL),
+        pointFrom(to[0], to[1] + FULL),
+        context,
+      );
 
       // (2)
       drawLine(from, to, context);
@@ -170,27 +174,31 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
     // (1)
     if (!appState.zenModeEnabled) {
       drawLine(
-        point(from[0] - FULL, from[1]),
-        point(from[0] + FULL, from[1]),
+        pointFrom(from[0] - FULL, from[1]),
+        pointFrom(from[0] + FULL, from[1]),
         context,
       );
     }
 
     // (3)
     drawLine(
-      point(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
-      point(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
+      pointFrom(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
+      pointFrom(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
       context,
     );
     drawLine(
-      point(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
-      point(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
+      pointFrom(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
+      pointFrom(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
       context,
     );
 
     if (!appState.zenModeEnabled) {
       // (4)
-      drawLine(point(to[0] - FULL, to[1]), point(to[0] + FULL, to[1]), context);
+      drawLine(
+        pointFrom(to[0] - FULL, to[1]),
+        pointFrom(to[0] + FULL, to[1]),
+        context,
+      );
 
       // (2)
       drawLine(from, to, context);

packages/excalidraw/renderer/staticSvgScene.ts

@@ -35,6 +35,7 @@ import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
 import type { AppState, BinaryFiles } from "../types";
 import { getFontFamilyString, isRTL, isTestEnv } from "../utils";
 import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement";
+import { getSubtypeMethods } from "../element/subtypes";
 import { getVerticalOffset } from "../fonts";
 import { getCornerRadius, isPathALoop } from "../shapes";
 
@@ -125,6 +126,15 @@ const renderElementToSvg = (
     root.appendChild(node);
   };
 
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.renderSvg) {
+    map.renderSvg(svgRoot, addToRoot, element, elementsMap, {
+      offsetX,
+      offsetY,
+    });
+    return;
+  }
+
   const opacity =
     ((getContainingFrame(element, elementsMap)?.opacity ?? 100) *
       element.opacity) /
@@ -421,6 +431,7 @@ const renderElementToSvg = (
           image.setAttribute("width", "100%");
           image.setAttribute("height", "100%");
           image.setAttribute("href", fileData.dataURL);
+          image.setAttribute("preserveAspectRatio", "none");
 
           symbol.appendChild(image);
 

packages/excalidraw/scene/Shape.ts

@@ -24,7 +24,7 @@ import {
 import { canChangeRoundness } from "./comparisons";
 import type { EmbedsValidationStatus } from "../types";
 import {
-  point,
+  pointFrom,
   pointDistance,
   type GlobalPoint,
   type LocalPoint,
@@ -408,7 +408,7 @@ export const _generateElementShape = (
       // initial position to it
       const points = element.points.length
         ? element.points
-        : [point<LocalPoint>(0, 0)];
+        : [pointFrom<LocalPoint>(0, 0)];
 
       if (isElbowArrow(element)) {
         shape = [

packages/excalidraw/scene/export.ts

@@ -185,6 +185,11 @@ export const exportToCanvas = async (
     exportingFrame ?? null,
     appState.frameRendering ?? null,
   );
+  // for canvas export, don't clip if exporting a specific frame as it would
+  // clip the corners of the content
+  if (exportingFrame) {
+    frameRendering.clip = false;
+  }
 
   const elementsForRender = prepareElementsForRender({
     elements,
@@ -351,6 +356,11 @@ export const exportToSvg = async (
     }) rotate(${frame.angle} ${cx} ${cy})"
           width="${frame.width}"
           height="${frame.height}"
+          ${
+            exportingFrame
+              ? ""
+              : `rx=${FRAME_STYLE.radius} ry=${FRAME_STYLE.radius}`
+          }
           >
           </rect>
         </clipPath>`;

packages/excalidraw/shapes.tsx

@@ -1,6 +1,6 @@
 import {
   isPoint,
-  point,
+  pointFrom,
   pointDistance,
   pointFromPair,
   pointRotateRads,
@@ -167,15 +167,15 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
         ? getClosedCurveShape<Point>(
             element,
             roughShape,
-            point<Point>(element.x, element.y),
+            pointFrom<Point>(element.x, element.y),
             element.angle,
-            point(cx, cy),
+            pointFrom(cx, cy),
           )
         : getCurveShape<Point>(
             roughShape,
-            point<Point>(element.x, element.y),
+            pointFrom<Point>(element.x, element.y),
             element.angle,
-            point(cx, cy),
+            pointFrom(cx, cy),
           );
     }
 
@@ -186,7 +186,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
       const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
       return getFreedrawShape(
         element,
-        point(cx, cy),
+        pointFrom(cx, cy),
         shouldTestInside(element),
       );
     }
@@ -233,7 +233,7 @@ export const getControlPointsForBezierCurve = <
   }
 
   const ops = getCurvePathOps(shape[0]);
-  let currentP = point<P>(0, 0);
+  let currentP = pointFrom<P>(0, 0);
   let index = 0;
   let minDistance = Infinity;
   let controlPoints: P[] | null = null;
@@ -249,9 +249,9 @@ export const getControlPointsForBezierCurve = <
     }
     if (op === "bcurveTo") {
       const p0 = currentP;
-      const p1 = point<P>(data[0], data[1]);
-      const p2 = point<P>(data[2], data[3]);
-      const p3 = point<P>(data[4], data[5]);
+      const p1 = pointFrom<P>(data[0], data[1]);
+      const p2 = pointFrom<P>(data[2], data[3]);
+      const p3 = pointFrom<P>(data[4], data[5]);
       const distance = pointDistance(p3, endPoint);
       if (distance < minDistance) {
         minDistance = distance;
@@ -279,7 +279,7 @@ export const getBezierXY = <P extends GlobalPoint | LocalPoint>(
     p0[idx] * Math.pow(t, 3);
   const tx = equation(t, 0);
   const ty = equation(t, 1);
-  return point(tx, ty);
+  return pointFrom(tx, ty);
 };
 
 const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
@@ -301,12 +301,12 @@ const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
       controlPoints[3],
       t,
     );
-    pointsOnCurve.push(point(p[0], p[1]));
+    pointsOnCurve.push(pointFrom(p[0], p[1]));
     t -= 0.05;
   }
   if (pointsOnCurve.length) {
     if (pointsEqual(pointsOnCurve.at(-1)!, endPoint)) {
-      pointsOnCurve.push(point(endPoint[0], endPoint[1]));
+      pointsOnCurve.push(pointFrom(endPoint[0], endPoint[1]));
     }
   }
   return pointsOnCurve;
@@ -393,24 +393,24 @@ export const aabbForElement = (
     midY: element.y + element.height / 2,
   };
 
-  const center = point(bbox.midX, bbox.midY);
+  const center = pointFrom(bbox.midX, bbox.midY);
   const [topLeftX, topLeftY] = pointRotateRads(
-    point(bbox.minX, bbox.minY),
+    pointFrom(bbox.minX, bbox.minY),
     center,
     element.angle,
   );
   const [topRightX, topRightY] = pointRotateRads(
-    point(bbox.maxX, bbox.minY),
+    pointFrom(bbox.maxX, bbox.minY),
     center,
     element.angle,
   );
   const [bottomRightX, bottomRightY] = pointRotateRads(
-    point(bbox.maxX, bbox.maxY),
+    pointFrom(bbox.maxX, bbox.maxY),
     center,
     element.angle,
   );
   const [bottomLeftX, bottomLeftY] = pointRotateRads(
-    point(bbox.minX, bbox.maxY),
+    pointFrom(bbox.minX, bbox.maxY),
     center,
     element.angle,
   );
@@ -442,14 +442,14 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
   p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
 
 export const aabbsOverlapping = (a: Bounds, b: Bounds) =>
-  pointInsideBounds(point(a[0], a[1]), b) ||
-  pointInsideBounds(point(a[2], a[1]), b) ||
-  pointInsideBounds(point(a[2], a[3]), b) ||
-  pointInsideBounds(point(a[0], a[3]), b) ||
-  pointInsideBounds(point(b[0], b[1]), a) ||
-  pointInsideBounds(point(b[2], b[1]), a) ||
-  pointInsideBounds(point(b[2], b[3]), a) ||
-  pointInsideBounds(point(b[0], b[3]), a);
+  pointInsideBounds(pointFrom(a[0], a[1]), b) ||
+  pointInsideBounds(pointFrom(a[2], a[1]), b) ||
+  pointInsideBounds(pointFrom(a[2], a[3]), b) ||
+  pointInsideBounds(pointFrom(a[0], a[3]), b) ||
+  pointInsideBounds(pointFrom(b[0], b[1]), a) ||
+  pointInsideBounds(pointFrom(b[2], b[1]), a) ||
+  pointInsideBounds(pointFrom(b[2], b[3]), a) ||
+  pointInsideBounds(pointFrom(b[0], b[3]), a);
 
 export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
   if (

packages/excalidraw/snapping.ts

@@ -1,6 +1,6 @@
 import type { InclusiveRange } from "../math";
 import {
-  point,
+  pointFrom,
   pointRotateRads,
   rangeInclusive,
   rangeIntersection,
@@ -228,52 +228,52 @@ export const getElementsCorners = (
       !boundingBoxCorners
     ) {
       const leftMid = pointRotateRads<GlobalPoint>(
-        point(x1, y1 + halfHeight),
-        point(cx, cy),
+        pointFrom(x1, y1 + halfHeight),
+        pointFrom(cx, cy),
         element.angle,
       );
       const topMid = pointRotateRads<GlobalPoint>(
-        point(x1 + halfWidth, y1),
-        point(cx, cy),
+        pointFrom(x1 + halfWidth, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const rightMid = pointRotateRads<GlobalPoint>(
-        point(x2, y1 + halfHeight),
-        point(cx, cy),
+        pointFrom(x2, y1 + halfHeight),
+        pointFrom(cx, cy),
         element.angle,
       );
       const bottomMid = pointRotateRads<GlobalPoint>(
-        point(x1 + halfWidth, y2),
-        point(cx, cy),
+        pointFrom(x1 + halfWidth, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
-      const center = point<GlobalPoint>(cx, cy);
+      const center = pointFrom<GlobalPoint>(cx, cy);
 
       result = omitCenter
         ? [leftMid, topMid, rightMid, bottomMid]
         : [leftMid, topMid, rightMid, bottomMid, center];
     } else {
       const topLeft = pointRotateRads<GlobalPoint>(
-        point(x1, y1),
-        point(cx, cy),
+        pointFrom(x1, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const topRight = pointRotateRads<GlobalPoint>(
-        point(x2, y1),
-        point(cx, cy),
+        pointFrom(x2, y1),
+        pointFrom(cx, cy),
         element.angle,
       );
       const bottomLeft = pointRotateRads<GlobalPoint>(
-        point(x1, y2),
-        point(cx, cy),
+        pointFrom(x1, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
       const bottomRight = pointRotateRads<GlobalPoint>(
-        point(x2, y2),
-        point(cx, cy),
+        pointFrom(x2, y2),
+        pointFrom(cx, cy),
         element.angle,
       );
-      const center = point<GlobalPoint>(cx, cy);
+      const center = pointFrom<GlobalPoint>(cx, cy);
 
       result = omitCenter
         ? [topLeft, topRight, bottomLeft, bottomRight]
@@ -287,18 +287,18 @@ export const getElementsCorners = (
     const width = maxX - minX;
     const height = maxY - minY;
 
-    const topLeft = point<GlobalPoint>(minX, minY);
-    const topRight = point<GlobalPoint>(maxX, minY);
-    const bottomLeft = point<GlobalPoint>(minX, maxY);
-    const bottomRight = point<GlobalPoint>(maxX, maxY);
-    const center = point<GlobalPoint>(minX + width / 2, minY + height / 2);
+    const topLeft = pointFrom<GlobalPoint>(minX, minY);
+    const topRight = pointFrom<GlobalPoint>(maxX, minY);
+    const bottomLeft = pointFrom<GlobalPoint>(minX, maxY);
+    const bottomRight = pointFrom<GlobalPoint>(maxX, maxY);
+    const center = pointFrom<GlobalPoint>(minX + width / 2, minY + height / 2);
 
     result = omitCenter
       ? [topLeft, topRight, bottomLeft, bottomRight]
       : [topLeft, topRight, bottomLeft, bottomRight, center];
   }
 
-  return result.map((p) => point(round(p[0]), round(p[1])));
+  return result.map((p) => pointFrom(round(p[0]), round(p[1])));
 };
 
 const getReferenceElements = (
@@ -375,8 +375,11 @@ export const getVisibleGaps = (
         horizontalGaps.push({
           startBounds,
           endBounds,
-          startSide: [point(startMaxX, startMinY), point(startMaxX, startMaxY)],
-          endSide: [point(endMinX, endMinY), point(endMinX, endMaxY)],
+          startSide: [
+            pointFrom(startMaxX, startMinY),
+            pointFrom(startMaxX, startMaxY),
+          ],
+          endSide: [pointFrom(endMinX, endMinY), pointFrom(endMinX, endMaxY)],
           length: endMinX - startMaxX,
           overlap: rangeIntersection(
             rangeInclusive(startMinY, startMaxY),
@@ -415,8 +418,11 @@ export const getVisibleGaps = (
         verticalGaps.push({
           startBounds,
           endBounds,
-          startSide: [point(startMinX, startMaxY), point(startMaxX, startMaxY)],
-          endSide: [point(endMinX, endMinY), point(endMaxX, endMinY)],
+          startSide: [
+            pointFrom(startMinX, startMaxY),
+            pointFrom(startMaxX, startMaxY),
+          ],
+          endSide: [pointFrom(endMinX, endMinY), pointFrom(endMaxX, endMinY)],
           length: endMinY - startMaxY,
           overlap: rangeIntersection(
             rangeInclusive(startMinX, startMaxX),
@@ -832,7 +838,7 @@ const createPointSnapLines = (
         }
         snapsX[key].push(
           ...snap.points.map((p) =>
-            point<GlobalPoint>(round(p[0]), round(p[1])),
+            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
           ),
         );
       }
@@ -849,7 +855,7 @@ const createPointSnapLines = (
         }
         snapsY[key].push(
           ...snap.points.map((p) =>
-            point<GlobalPoint>(round(p[0]), round(p[1])),
+            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
           ),
         );
       }
@@ -863,7 +869,7 @@ const createPointSnapLines = (
         points: dedupePoints(
           points
             .map((p) => {
-              return point<GlobalPoint>(Number(key), p[1]);
+              return pointFrom<GlobalPoint>(Number(key), p[1]);
             })
             .sort((a, b) => a[1] - b[1]),
         ),
@@ -876,7 +882,7 @@ const createPointSnapLines = (
           points: dedupePoints(
             points
               .map((p) => {
-                return point<GlobalPoint>(p[0], Number(key));
+                return pointFrom<GlobalPoint>(p[0], Number(key));
               })
               .sort((a, b) => a[0] - b[0]),
           ),
@@ -940,16 +946,16 @@ const createGapSnapLines = (
               type: "gap",
               direction: "horizontal",
               points: [
-                point(gapSnap.gap.startSide[0][0], gapLineY),
-                point(minX, gapLineY),
+                pointFrom(gapSnap.gap.startSide[0][0], gapLineY),
+                pointFrom(minX, gapLineY),
               ],
             },
             {
               type: "gap",
               direction: "horizontal",
               points: [
-                point(maxX, gapLineY),
-                point(gapSnap.gap.endSide[0][0], gapLineY),
+                pointFrom(maxX, gapLineY),
+                pointFrom(gapSnap.gap.endSide[0][0], gapLineY),
               ],
             },
           );
@@ -966,16 +972,16 @@ const createGapSnapLines = (
               type: "gap",
               direction: "vertical",
               points: [
-                point(gapLineX, gapSnap.gap.startSide[0][1]),
-                point(gapLineX, minY),
+                pointFrom(gapLineX, gapSnap.gap.startSide[0][1]),
+                pointFrom(gapLineX, minY),
               ],
             },
             {
               type: "gap",
               direction: "vertical",
               points: [
-                point(gapLineX, maxY),
-                point(gapLineX, gapSnap.gap.endSide[0][1]),
+                pointFrom(gapLineX, maxY),
+                pointFrom(gapLineX, gapSnap.gap.endSide[0][1]),
               ],
             },
           );
@@ -991,12 +997,15 @@ const createGapSnapLines = (
             {
               type: "gap",
               direction: "horizontal",
-              points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
+              points: [
+                pointFrom(startMaxX, gapLineY),
+                pointFrom(endMinX, gapLineY),
+              ],
             },
             {
               type: "gap",
               direction: "horizontal",
-              points: [point(endMaxX, gapLineY), point(minX, gapLineY)],
+              points: [pointFrom(endMaxX, gapLineY), pointFrom(minX, gapLineY)],
             },
           );
         }
@@ -1011,12 +1020,18 @@ const createGapSnapLines = (
             {
               type: "gap",
               direction: "horizontal",
-              points: [point(maxX, gapLineY), point(startMinX, gapLineY)],
+              points: [
+                pointFrom(maxX, gapLineY),
+                pointFrom(startMinX, gapLineY),
+              ],
             },
             {
               type: "gap",
               direction: "horizontal",
-              points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
+              points: [
+                pointFrom(startMaxX, gapLineY),
+                pointFrom(endMinX, gapLineY),
+              ],
             },
           );
         }
@@ -1031,12 +1046,18 @@ const createGapSnapLines = (
             {
               type: "gap",
               direction: "vertical",
-              points: [point(gapLineX, maxY), point(gapLineX, startMinY)],
+              points: [
+                pointFrom(gapLineX, maxY),
+                pointFrom(gapLineX, startMinY),
+              ],
             },
             {
               type: "gap",
               direction: "vertical",
-              points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
+              points: [
+                pointFrom(gapLineX, startMaxY),
+                pointFrom(gapLineX, endMinY),
+              ],
             },
           );
         }
@@ -1051,12 +1072,15 @@ const createGapSnapLines = (
             {
               type: "gap",
               direction: "vertical",
-              points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
+              points: [
+                pointFrom(gapLineX, startMaxY),
+                pointFrom(gapLineX, endMinY),
+              ],
             },
             {
               type: "gap",
               direction: "vertical",
-              points: [point(gapLineX, endMaxY), point(gapLineX, minY)],
+              points: [pointFrom(gapLineX, endMaxY), pointFrom(gapLineX, minY)],
             },
           );
         }
@@ -1070,7 +1094,7 @@ const createGapSnapLines = (
       return {
         ...gapSnapLine,
         points: gapSnapLine.points.map((p) =>
-          point(round(p[0]), round(p[1])),
+          pointFrom(round(p[0]), round(p[1])),
         ) as PointPair,
       };
     }),
@@ -1120,35 +1144,35 @@ export const snapResizingElements = (
   if (transformHandle) {
     switch (transformHandle) {
       case "e": {
-        selectionSnapPoints.push(point(maxX, minY), point(maxX, maxY));
+        selectionSnapPoints.push(pointFrom(maxX, minY), pointFrom(maxX, maxY));
         break;
       }
       case "w": {
-        selectionSnapPoints.push(point(minX, minY), point(minX, maxY));
+        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(minX, maxY));
         break;
       }
       case "n": {
-        selectionSnapPoints.push(point(minX, minY), point(maxX, minY));
+        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(maxX, minY));
         break;
       }
       case "s": {
-        selectionSnapPoints.push(point(minX, maxY), point(maxX, maxY));
+        selectionSnapPoints.push(pointFrom(minX, maxY), pointFrom(maxX, maxY));
         break;
       }
       case "ne": {
-        selectionSnapPoints.push(point(maxX, minY));
+        selectionSnapPoints.push(pointFrom(maxX, minY));
         break;
       }
       case "nw": {
-        selectionSnapPoints.push(point(minX, minY));
+        selectionSnapPoints.push(pointFrom(minX, minY));
         break;
       }
       case "se": {
-        selectionSnapPoints.push(point(maxX, maxY));
+        selectionSnapPoints.push(pointFrom(maxX, maxY));
         break;
       }
       case "sw": {
-        selectionSnapPoints.push(point(minX, maxY));
+        selectionSnapPoints.push(pointFrom(minX, maxY));
         break;
       }
     }
@@ -1191,10 +1215,10 @@ export const snapResizingElements = (
   );
 
   const corners: GlobalPoint[] = [
-    point(x1, y1),
-    point(x1, y2),
-    point(x2, y1),
-    point(x2, y2),
+    pointFrom(x1, y1),
+    pointFrom(x1, y2),
+    pointFrom(x2, y1),
+    pointFrom(x2, y2),
   ];
 
   getPointSnaps(
@@ -1231,7 +1255,7 @@ export const snapNewElement = (
   }
 
   const selectionSnapPoints: GlobalPoint[] = [
-    point(origin.x + dragOffset.x, origin.y + dragOffset.y),
+    pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y),
   ];
 
   const snapDistance = getSnapDistance(app.state.zoom.value);
@@ -1331,7 +1355,7 @@ export const getSnapLinesAtPointer = (
 
         verticalSnapLines.push({
           type: "pointer",
-          points: [corner, point(corner[0], pointer.y)],
+          points: [corner, pointFrom(corner[0], pointer.y)],
           direction: "vertical",
         });
 
@@ -1347,7 +1371,7 @@ export const getSnapLinesAtPointer = (
 
         horizontalSnapLines.push({
           type: "pointer",
-          points: [corner, point(pointer.x, corner[1])],
+          points: [corner, pointFrom(pointer.x, corner[1])],
           direction: "horizontal",
         });
 

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -8430,6 +8430,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": LinearElementEditor {
+    "elbowed": false,
     "elementId": "id0",
     "endBindingElement": "keep",
     "hoverPointIndex": -1,
@@ -8649,6 +8650,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": LinearElementEditor {
+    "elbowed": false,
     "elementId": "id0",
     "endBindingElement": "keep",
     "hoverPointIndex": -1,
@@ -9058,6 +9060,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": LinearElementEditor {
+    "elbowed": false,
     "elementId": "id0",
     "endBindingElement": "keep",
     "hoverPointIndex": -1,
@@ -9454,6 +9457,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": LinearElementEditor {
+    "elbowed": false,
     "elementId": "id0",
     "endBindingElement": "keep",
     "hoverPointIndex": -1,

packages/excalidraw/tests/binding.test.tsx

@@ -7,7 +7,7 @@ import { API } from "./helpers/api";
 import { KEYS } from "../keys";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import { arrayToMap } from "../utils";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 const { h } = window;
 
@@ -32,7 +32,12 @@ describe("element binding", () => {
       y: 0,
       width: 100,
       height: 1,
-      points: [point(0, 0), point(0, 0), point(100, 0), point(100, 0)],
+      points: [
+        pointFrom(0, 0),
+        pointFrom(0, 0),
+        pointFrom(100, 0),
+        pointFrom(100, 0),
+      ],
     });
     API.setElements([rect, arrow]);
     expect(arrow.startBinding).toBe(null);
@@ -310,7 +315,7 @@ describe("element binding", () => {
     const arrow1 = API.createElement({
       type: "arrow",
       id: "arrow1",
-      points: [point(0, 0), point(0, -87.45777932247563)],
+      points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
       startBinding: {
         elementId: "rectangle1",
         focus: 0.2,
@@ -328,7 +333,7 @@ describe("element binding", () => {
     const arrow2 = API.createElement({
       type: "arrow",
       id: "arrow2",
-      points: [point(0, 0), point(0, -87.45777932247563)],
+      points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
       startBinding: {
         elementId: "text1",
         focus: 0.2,

packages/excalidraw/tests/customActions.test.tsx

@@ -0,0 +1,94 @@
+import type { ExcalidrawElement } from "../element/types";
+import { getShortcutKey } from "../utils";
+import { API } from "./helpers/api";
+import { render } from "./test-utils";
+import { Excalidraw } from "../index";
+import {
+  getShortcutFromShortcutName,
+  registerCustomShortcuts,
+} from "../actions/shortcuts";
+import type {
+  Action,
+  ActionPredicateFn,
+  ActionResult,
+  CustomActionName,
+} from "../actions/types";
+import { makeCustomActionName } 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 shortcutName = makeCustomActionName("test");
+    const shortcuts: Record<CustomActionName, string[]> = {};
+    shortcuts[shortcutName] = [
+      getShortcutKey("CtrlOrCmd+1"),
+      getShortcutKey("CtrlOrCmd+2"),
+    ];
+    registerCustomShortcuts(shortcuts);
+    expect(getShortcutFromShortcutName(shortcutName)).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.enable";
+    const enableAction: Action = {
+      name: enableName,
+      label: "",
+      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);
+  });
+});

packages/excalidraw/tests/flip.test.tsx

@@ -28,7 +28,7 @@ import { getBoundTextElementPosition } from "../element/textElement";
 import { createPasteEvent } from "../clipboard";
 import { arrayToMap, cloneJSON } from "../utils";
 import type { LocalPoint } from "../../math";
-import { point, type Radians } from "../../math";
+import { pointFrom, type Radians } from "../../math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -146,9 +146,9 @@ const createLinearElementWithCurveInsideMinMaxPoints = (
     link: null,
     locked: false,
     points: [
-      point<LocalPoint>(0, 0),
-      point<LocalPoint>(-922.4761962890625, 300.3277587890625),
-      point<LocalPoint>(828.0126953125, 410.51605224609375),
+      pointFrom<LocalPoint>(0, 0),
+      pointFrom<LocalPoint>(-922.4761962890625, 300.3277587890625),
+      pointFrom<LocalPoint>(828.0126953125, 410.51605224609375),
     ],
   });
 };

packages/excalidraw/tests/helpers/api.ts

@@ -9,6 +9,8 @@ import type {
   ExcalidrawFrameElement,
   ExcalidrawElementType,
   ExcalidrawMagicFrameElement,
+  ExcalidrawElbowArrowElement,
+  ExcalidrawArrowElement,
 } from "../../element/types";
 import { newElement, newTextElement, newLinearElement } from "../../element";
 import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS } from "../../constants";
@@ -18,7 +20,18 @@ import fs from "fs";
 import util from "util";
 import path from "path";
 import { getMimeType } from "../../data/blob";
+import type {
+  SubtypeLoadedCb,
+  SubtypePrepFn,
+  SubtypeRecord,
+} from "../../element/subtypes";
 import {
+  checkRefreshOnSubtypeLoad,
+  prepareSubtype,
+  selectSubtype,
+} from "../../element/subtypes";
+import {
+  maybeGetSubtypeProps,
   newArrowElement,
   newEmbeddableElement,
   newFrameElement,
@@ -36,7 +49,7 @@ import type App from "../../components/App";
 import { createTestHook } from "../../components/App";
 import type { Action } from "../../actions/types";
 import { mutateElement } from "../../element/mutateElement";
-import { point, type LocalPoint, type Radians } from "../../../math";
+import { pointFrom, type LocalPoint, type Radians } from "../../../math";
 
 const readFile = util.promisify(fs.readFile);
 // so that window.h is available when App.tsx is not imported as well.
@@ -45,6 +58,19 @@ createTestHook();
 const { h } = window;
 
 export class API {
+  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 updateScene: InstanceType<typeof App>["updateScene"] = (...args) => {
     act(() => {
       h.app.updateScene(...args);
@@ -127,6 +153,10 @@ export class API {
     expect(API.getSelectedElements().length).toBe(0);
   };
 
+  static getElement = <T extends ExcalidrawElement>(element: T): T => {
+    return h.app.scene.getElementsMapIncludingDeleted().get(element.id) as T || element;
+  }
+
   static createElement = <
     T extends Exclude<ExcalidrawElementType, "selection"> = "rectangle",
   >({
@@ -169,6 +199,8 @@ 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"]
@@ -179,10 +211,16 @@ export class API {
     scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
     status?: T extends "image" ? ExcalidrawImageElement["status"] : never;
     startBinding?: T extends "arrow"
-      ? ExcalidrawLinearElement["startBinding"]
+      ? ExcalidrawArrowElement["startBinding"] | ExcalidrawElbowArrowElement["startBinding"]
       : never;
     endBinding?: T extends "arrow"
-      ? ExcalidrawLinearElement["endBinding"]
+      ? ExcalidrawArrowElement["endBinding"] | ExcalidrawElbowArrowElement["endBinding"]
+      : never;
+    startArrowhead?: T extends "arrow"
+      ? ExcalidrawArrowElement["startArrowhead"] | ExcalidrawElbowArrowElement["startArrowhead"]
+      : never;
+    endArrowhead?: T extends "arrow"
+      ? ExcalidrawArrowElement["endArrowhead"] | ExcalidrawElbowArrowElement["endArrowhead"]
       : never;
     elbowed?: boolean;
   }): T extends "arrow" | "line"
@@ -202,6 +240,14 @@ 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"
@@ -216,6 +262,7 @@ export class API {
       | "link"
       | "updated"
     > = {
+      ...custom,
       x,
       y,
       frameId: rest.frameId ?? null,
@@ -295,8 +342,8 @@ export class API {
           height,
           type,
           points: rest.points ?? [
-            point<LocalPoint>(0, 0),
-            point<LocalPoint>(100, 100),
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
           ],
           elbowed: rest.elbowed ?? false,
         });
@@ -308,8 +355,8 @@ export class API {
           height,
           type,
           points: rest.points ?? [
-            point<LocalPoint>(0, 0),
-            point<LocalPoint>(100, 100),
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
           ],
         });
         break;
@@ -340,6 +387,8 @@ export class API {
     if (element.type === "arrow") {
       element.startBinding = rest.startBinding ?? null;
       element.endBinding = rest.endBinding ?? null;
+      element.startArrowhead = rest.startArrowhead ?? null;
+      element.endArrowhead = rest.endArrowhead ?? null;
     }
     if (id) {
       element.id = id;

packages/excalidraw/tests/helpers/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "toolBar": {
+    "test": "Test",
+    "test2": "Test 2",
+    "test3": "Test 3"
+  }
+}

packages/excalidraw/tests/helpers/ui.ts

@@ -34,7 +34,7 @@ import { getTextEditor } from "../queries/dom";
 import { arrayToMap } from "../../utils";
 import { createTestHook } from "../../components/App";
 import type { GlobalPoint, LocalPoint, Radians } from "../../../math";
-import { point, pointRotateRads } from "../../../math";
+import { pointFrom, pointRotateRads } from "../../../math";
 
 // so that window.h is available when App.tsx is not imported as well.
 createTestHook();
@@ -142,7 +142,7 @@ const getElementPointForSelection = (
   element: ExcalidrawElement,
 ): GlobalPoint => {
   const { x, y, width, height, angle } = element;
-  const target = point<GlobalPoint>(
+  const target = pointFrom<GlobalPoint>(
     x +
       (isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
     y,
@@ -151,9 +151,12 @@ const getElementPointForSelection = (
 
   if (isLinearElement(element)) {
     const bounds = getElementPointsCoords(element, element.points);
-    center = point((bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2);
+    center = pointFrom(
+      (bounds[0] + bounds[2]) / 2,
+      (bounds[1] + bounds[3]) / 2,
+    );
   } else {
-    center = point(x + width / 2, y + height / 2);
+    center = pointFrom(x + width / 2, y + height / 2);
   }
 
   if (isTextElement(element)) {
@@ -469,8 +472,8 @@ export class UI {
     const width = initialWidth ?? initialHeight ?? size;
     const height = initialHeight ?? size;
     const points: LocalPoint[] = initialPoints ?? [
-      point(0, 0),
-      point(width, height),
+      pointFrom(0, 0),
+      pointFrom(width, height),
     ];
 
     UI.clickTool(type);

packages/excalidraw/tests/history.test.tsx

@@ -31,6 +31,7 @@ import type {
   ExcalidrawGenericElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
+  FixedPointBinding,
   FractionalIndex,
   SceneElementsMap,
 } from "../element/types";
@@ -45,7 +46,7 @@ import { HistoryEntry } from "../history";
 import { AppStateChange, ElementsChange } from "../change";
 import { Snapshot, StoreAction } from "../store";
 import type { LocalPoint, Radians } from "../../math";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 const { h } = window;
 
@@ -2040,22 +2041,22 @@ describe("history", () => {
             width: 178.9000000000001,
             height: 236.10000000000002,
             points: [
-              point(0, 0),
-              point(178.9000000000001, 0),
-              point(178.9000000000001, 236.10000000000002),
+              pointFrom(0, 0),
+              pointFrom(178.9000000000001, 0),
+              pointFrom(178.9000000000001, 236.10000000000002),
             ],
             startBinding: {
               elementId: "KPrBI4g_v9qUB1XxYLgSz",
               focus: -0.001587301587301948,
               gap: 5,
               fixedPoint: [1.0318471337579618, 0.49920634920634904],
-            },
+            } as FixedPointBinding,
             endBinding: {
               elementId: "u2JGnnmoJ0VATV4vCNJE5",
               focus: -0.0016129032258049847,
               gap: 3.537079145500037,
               fixedPoint: [0.4991935483870975, -0.03875193720914723],
-            },
+            } as FixedPointBinding,
           },
         ],
         storeAction: StoreAction.CAPTURE,
@@ -2158,11 +2159,11 @@ describe("history", () => {
         elements: [
           newElementWith(h.elements[0] as ExcalidrawLinearElement, {
             points: [
-              point(0, 0),
-              point(5, 5),
-              point(10, 10),
-              point(15, 15),
-              point(20, 20),
+              pointFrom(0, 0),
+              pointFrom(5, 5),
+              pointFrom(10, 10),
+              pointFrom(15, 15),
+              pointFrom(20, 20),
             ] as LocalPoint[],
           }),
         ],
@@ -4455,7 +4456,7 @@ describe("history", () => {
           elements: [
             h.elements[0],
             newElementWith(h.elements[1], { boundElements: [] }),
-            newElementWith(h.elements[2] as ExcalidrawLinearElement, {
+            newElementWith(h.elements[2] as ExcalidrawElbowArrowElement, {
               endBinding: {
                 elementId: remoteContainer.id,
                 gap: 1,
@@ -4655,7 +4656,7 @@ describe("history", () => {
         // Simulate remote update
         API.updateScene({
           elements: [
-            newElementWith(h.elements[0] as ExcalidrawLinearElement, {
+            newElementWith(h.elements[0] as ExcalidrawElbowArrowElement, {
               startBinding: {
                 elementId: rect1.id,
                 gap: 1,

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -28,7 +28,7 @@ import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
 import { vi } from "vitest";
 import { arrayToMap } from "../utils";
 import type { GlobalPoint } from "../../math";
-import { pointCenter, point } from "../../math";
+import { pointCenter, pointFrom } from "../../math";
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,
@@ -57,8 +57,8 @@ describe("Test Linear Elements", () => {
     interactiveCanvas = container.querySelector("canvas.interactive")!;
   });
 
-  const p1 = point<GlobalPoint>(20, 20);
-  const p2 = point<GlobalPoint>(60, 20);
+  const p1 = pointFrom<GlobalPoint>(20, 20);
+  const p2 = pointFrom<GlobalPoint>(60, 20);
   const midpoint = pointCenter<GlobalPoint>(p1, p2);
   const delta = 50;
   const mouse = new Pointer("mouse");
@@ -75,7 +75,7 @@ describe("Test Linear Elements", () => {
       height: 0,
       type,
       roughness,
-      points: [point(0, 0), point(p2[0] - p1[0], p2[1] - p1[1])],
+      points: [pointFrom(0, 0), pointFrom(p2[0] - p1[0], p2[1] - p1[1])],
       roundness,
     });
     API.setElements([line]);
@@ -99,9 +99,9 @@ describe("Test Linear Elements", () => {
       type,
       roughness,
       points: [
-        point(0, 0),
-        point(p3[0], p3[1]),
-        point(p2[0] - p1[0], p2[1] - p1[1]),
+        pointFrom(0, 0),
+        pointFrom(p3[0], p3[1]),
+        pointFrom(p2[0] - p1[0], p2[1] - p1[1]),
       ],
       roundness,
     });
@@ -161,7 +161,7 @@ describe("Test Linear Elements", () => {
     expect(line.points.length).toEqual(2);
 
     mouse.clickAt(midpoint[0], midpoint[1]);
-    drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
+    drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
 
     expect(line.points.length).toEqual(2);
 
@@ -169,7 +169,7 @@ describe("Test Linear Elements", () => {
     expect(line.y).toBe(originalY);
     expect(line.points.length).toEqual(2);
 
-    drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
+    drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
     expect(line.x).toBe(originalX);
     expect(line.y).toBe(originalY);
     expect(line.points.length).toEqual(3);
@@ -184,7 +184,7 @@ describe("Test Linear Elements", () => {
     expect((h.elements[0] as ExcalidrawLinearElement).points.length).toEqual(2);
 
     // drag line from midpoint
-    drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
+    drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
     expect(line.points.length).toEqual(3);
@@ -248,7 +248,7 @@ describe("Test Linear Elements", () => {
       mouse.clickAt(midpoint[0], midpoint[1]);
       expect(line.points.length).toEqual(2);
 
-      drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
+      drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
       expect(line.x).toBe(originalX);
       expect(line.y).toBe(originalY);
       expect(line.points.length).toEqual(3);
@@ -261,7 +261,7 @@ describe("Test Linear Elements", () => {
       enterLineEditingMode(line);
 
       // drag line from midpoint
-      drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
+      drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `12`,
       );
@@ -356,7 +356,7 @@ describe("Test Linear Elements", () => {
       const startPoint = pointCenter(points[0], midPoints[0]!);
       const deltaX = 50;
       const deltaY = 20;
-      const endPoint = point<GlobalPoint>(
+      const endPoint = pointFrom<GlobalPoint>(
         startPoint[0] + deltaX,
         startPoint[1] + deltaY,
       );
@@ -399,8 +399,8 @@ describe("Test Linear Elements", () => {
       // This is the expected midpoint for line with round edge
       // hence hardcoding it so if later some bug is introduced
       // this will fail and we can fix it
-      const firstSegmentMidpoint = point<GlobalPoint>(55, 45);
-      const lastSegmentMidpoint = point<GlobalPoint>(75, 40);
+      const firstSegmentMidpoint = pointFrom<GlobalPoint>(55, 45);
+      const lastSegmentMidpoint = pointFrom<GlobalPoint>(75, 40);
 
       let line: ExcalidrawLinearElement;
 
@@ -416,7 +416,7 @@ describe("Test Linear Elements", () => {
         // drag line via first segment midpoint
         drag(
           firstSegmentMidpoint,
-          point(
+          pointFrom(
             firstSegmentMidpoint[0] + delta,
             firstSegmentMidpoint[1] + delta,
           ),
@@ -426,7 +426,10 @@ describe("Test Linear Elements", () => {
         // drag line from last segment midpoint
         drag(
           lastSegmentMidpoint,
-          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
+          pointFrom(
+            lastSegmentMidpoint[0] + delta,
+            lastSegmentMidpoint[1] + delta,
+          ),
         );
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
@@ -475,10 +478,10 @@ describe("Test Linear Elements", () => {
           h.state,
         );
 
-        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
 
         // Drag from first point
-        drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
+        drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
@@ -516,10 +519,10 @@ describe("Test Linear Elements", () => {
           h.state,
         );
 
-        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
 
         // Drag from first point
-        drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
+        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
@@ -556,7 +559,7 @@ describe("Test Linear Elements", () => {
         // dragging line from last segment midpoint
         drag(
           lastSegmentMidpoint,
-          point(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
+          pointFrom(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
         );
         expect(line.points.length).toEqual(4);
 
@@ -589,11 +592,11 @@ describe("Test Linear Elements", () => {
       // This is the expected midpoint for line with round edge
       // hence hardcoding it so if later some bug is introduced
       // this will fail and we can fix it
-      const firstSegmentMidpoint = point<GlobalPoint>(
+      const firstSegmentMidpoint = pointFrom<GlobalPoint>(
         55.9697848965255,
         47.442326230998205,
       );
-      const lastSegmentMidpoint = point<GlobalPoint>(
+      const lastSegmentMidpoint = pointFrom<GlobalPoint>(
         76.08587175006699,
         43.294165939653226,
       );
@@ -612,7 +615,7 @@ describe("Test Linear Elements", () => {
         // drag line from first segment midpoint
         drag(
           firstSegmentMidpoint,
-          point(
+          pointFrom(
             firstSegmentMidpoint[0] + delta,
             firstSegmentMidpoint[1] + delta,
           ),
@@ -622,7 +625,10 @@ describe("Test Linear Elements", () => {
         // drag line from last segment midpoint
         drag(
           lastSegmentMidpoint,
-          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
+          pointFrom(
+            lastSegmentMidpoint[0] + delta,
+            lastSegmentMidpoint[1] + delta,
+          ),
         );
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `16`,
@@ -669,10 +675,10 @@ describe("Test Linear Elements", () => {
           h.state,
         );
 
-        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
 
         // Drag from first point
-        drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
+        drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
 
         const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
           line,
@@ -717,10 +723,10 @@ describe("Test Linear Elements", () => {
           h.state,
         );
 
-        const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
+        const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
 
         // Drag from first point
-        drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
+        drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
 
         expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
           `12`,
@@ -751,7 +757,10 @@ describe("Test Linear Elements", () => {
 
         drag(
           lastSegmentMidpoint,
-          point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
+          pointFrom(
+            lastSegmentMidpoint[0] + delta,
+            lastSegmentMidpoint[1] + delta,
+          ),
         );
         expect(line.points.length).toEqual(4);
 
@@ -811,8 +820,8 @@ describe("Test Linear Elements", () => {
       API.setSelectedElements([line]);
       enterLineEditingMode(line, true);
       drag(
-        point(line.points[0][0] + line.x, line.points[0][1] + line.y),
-        point(
+        pointFrom(line.points[0][0] + line.x, line.points[0][1] + line.y),
+        pointFrom(
           dragEndPositionOffset[0] + line.x,
           dragEndPositionOffset[1] + line.y,
         ),
@@ -927,14 +936,14 @@ describe("Test Linear Elements", () => {
         // This is the expected midpoint for line with round edge
         // hence hardcoding it so if later some bug is introduced
         // this will fail and we can fix it
-        const firstSegmentMidpoint = point<GlobalPoint>(
+        const firstSegmentMidpoint = pointFrom<GlobalPoint>(
           55.9697848965255,
           47.442326230998205,
         );
         // drag line from first segment midpoint
         drag(
           firstSegmentMidpoint,
-          point(
+          pointFrom(
             firstSegmentMidpoint[0] + delta,
             firstSegmentMidpoint[1] + delta,
           ),
@@ -1151,7 +1160,7 @@ describe("Test Linear Elements", () => {
       );
 
       // Drag from last point
-      drag(points[1], point(points[1][0] + 300, points[1][1]));
+      drag(points[1], pointFrom(points[1][0] + 300, points[1][1]));
 
       expect({ width: container.width, height: container.height })
         .toMatchInlineSnapshot(`
@@ -1350,11 +1359,11 @@ describe("Test Linear Elements", () => {
           [
             {
               index: 0,
-              point: point(line.points[0][0] + 10, line.points[0][1] + 10),
+              point: pointFrom(line.points[0][0] + 10, line.points[0][1] + 10),
             },
             {
               index: line.points.length - 1,
-              point: point(
+              point: pointFrom(
                 line.points[line.points.length - 1][0] - 10,
                 line.points[line.points.length - 1][1] - 10,
               ),

packages/excalidraw/tests/resize.test.tsx

@@ -4,6 +4,7 @@ import { render } from "./test-utils";
 import { reseed } from "../random";
 import { UI, Keyboard, Pointer } from "./helpers/ui";
 import type {
+  ExcalidrawElbowArrowElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
 } from "../element/types";
@@ -16,7 +17,7 @@ import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { arrayToMap } from "../utils";
 import type { LocalPoint } from "../../math";
-import { point } from "../../math";
+import { pointFrom } from "../../math";
 
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -219,12 +220,17 @@ describe("generic element", () => {
 
 describe.each(["line", "freedraw"] as const)("%s element", (type) => {
   const points: Record<typeof type, LocalPoint[]> = {
-    line: [point(0, 0), point(60, -20), point(20, 40), point(-40, 0)],
+    line: [
+      pointFrom(0, 0),
+      pointFrom(60, -20),
+      pointFrom(20, 40),
+      pointFrom(-40, 0),
+    ],
     freedraw: [
-      point(0, 0),
-      point(-2.474600807561444, 41.021700699972),
-      point(3.6627956000014024, 47.84174560617245),
-      point(40.495224145598115, 47.15909710753482),
+      pointFrom(0, 0),
+      pointFrom(-2.474600807561444, 41.021700699972),
+      pointFrom(3.6627956000014024, 47.84174560617245),
+      pointFrom(40.495224145598115, 47.15909710753482),
     ],
   };
 
@@ -292,11 +298,11 @@ describe("arrow element", () => {
   it("resizes with a label", async () => {
     const arrow = UI.createElement("arrow", {
       points: [
-        point(0, 0),
-        point(40, 140),
-        point(80, 60), // label's anchor
-        point(180, 20),
-        point(200, 120),
+        pointFrom(0, 0),
+        pointFrom(40, 140),
+        pointFrom(80, 60), // label's anchor
+        pointFrom(180, 20),
+        pointFrom(200, 120),
       ],
     });
     const label = await UI.editText(arrow, "Hello");
@@ -333,6 +339,62 @@ describe("arrow element", () => {
     expect(label.angle).toBeCloseTo(0);
     expect(label.fontSize).toEqual(20);
   });
+
+  it("flips the fixed point binding on negative resize for single bindable", () => {
+    const rectangle = UI.createElement("rectangle", {
+      x: -100,
+      y: -75,
+      width: 95,
+      height: 100,
+    });
+    UI.clickTool("arrow");
+    UI.clickOnTestId("elbow-arrow");
+    mouse.reset();
+    mouse.moveTo(-5, 0);
+    mouse.click();
+    mouse.moveTo(120, 200);
+    mouse.click();
+
+    const arrow = h.scene.getSelectedElements(
+      h.state,
+    )[0] as ExcalidrawElbowArrowElement;
+
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
+
+    UI.resize(rectangle, "se", [-200, -150]);
+
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
+  });
+
+  it("flips the fixed point binding on negative resize for group selection", () => {
+    const rectangle = UI.createElement("rectangle", {
+      x: -100,
+      y: -75,
+      width: 95,
+      height: 100,
+    });
+    UI.clickTool("arrow");
+    UI.clickOnTestId("elbow-arrow");
+    mouse.reset();
+    mouse.moveTo(-5, 0);
+    mouse.click();
+    mouse.moveTo(120, 200);
+    mouse.click();
+
+    const arrow = h.scene.getSelectedElements(
+      h.state,
+    )[0] as ExcalidrawElbowArrowElement;
+
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
+    expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
+
+    UI.resize([rectangle, arrow], "nw", [300, 350]);
+
+    expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.144, 2);
+    expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.25);
+  });
 });
 
 describe("text element", () => {
@@ -690,24 +752,24 @@ describe("multiple selection", () => {
       x: 60,
       y: 40,
       points: [
-        point(0, 0),
-        point(-40, 40),
-        point(-60, 0),
-        point(0, -40),
-        point(40, 20),
-        point(0, 40),
+        pointFrom(0, 0),
+        pointFrom(-40, 40),
+        pointFrom(-60, 0),
+        pointFrom(0, -40),
+        pointFrom(40, 20),
+        pointFrom(0, 40),
       ],
     });
     const freedraw = UI.createElement("freedraw", {
       x: 63.56072661326618,
       y: 100,
       points: [
-        point(0, 0),
-        point(-43.56072661326618, 18.15048126846341),
-        point(-43.56072661326618, 29.041198460587566),
-        point(-38.115368017204105, 42.652452795512204),
-        point(-19.964886748740696, 66.24829266003775),
-        point(19.056612930986716, 77.1390098521619),
+        pointFrom(0, 0),
+        pointFrom(-43.56072661326618, 18.15048126846341),
+        pointFrom(-43.56072661326618, 29.041198460587566),
+        pointFrom(-38.115368017204105, 42.652452795512204),
+        pointFrom(-19.964886748740696, 66.24829266003775),
+        pointFrom(19.056612930986716, 77.1390098521619),
       ],
     });
 
@@ -828,7 +890,6 @@ describe("multiple selection", () => {
     expect(leftBoundArrow.endBinding?.elementId).toBe(
       leftArrowBinding.elementId,
     );
-    expect(leftBoundArrow.endBinding?.fixedPoint).toBeNull();
     expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
 
     expect(rightBoundArrow.x).toBeCloseTo(210);
@@ -843,7 +904,6 @@ describe("multiple selection", () => {
     expect(rightBoundArrow.endBinding?.elementId).toBe(
       rightArrowBinding.elementId,
     );
-    expect(rightBoundArrow.endBinding?.fixedPoint).toBeNull();
     expect(rightBoundArrow.endBinding?.focus).toBe(rightArrowBinding.focus);
   });
 
@@ -1046,13 +1106,13 @@ describe("multiple selection", () => {
       x: 60,
       y: 0,
       points: [
-        point(0, 0),
-        point(-40, 40),
-        point(-20, 60),
-        point(20, 20),
-        point(40, 40),
-        point(-20, 100),
-        point(-60, 60),
+        pointFrom(0, 0),
+        pointFrom(-40, 40),
+        pointFrom(-20, 60),
+        pointFrom(20, 20),
+        pointFrom(40, 40),
+        pointFrom(-20, 100),
+        pointFrom(-60, 60),
       ],
     });