fix type

Co-authored-by: Mark Tolmacs <mark@lazycat.hu>

.eslintrc.json

@@ -32,6 +32,12 @@
         "name": "jotai",
         "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
       }
+    ],
+    "react/jsx-no-target-blank": [
+      "error",
+      {
+        "allowReferrer": true
+      }
     ]
   }
 }

excalidraw-app/components/AI.tsx

@@ -73,7 +73,7 @@ export const AIComponents = ({
                   </br>
                   <div>You can also try <a href="${
                     import.meta.env.VITE_APP_PLUS_LP
-                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
+                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noopener">Excalidraw+</a> to get more requests.</div>
                 </div>
                 </body>
                 </html>`,

excalidraw-app/components/EncryptedIcon.tsx

@@ -10,7 +10,7 @@ export const EncryptedIcon = () => {
       className="encrypted-icon tooltip"
       href="https://plus.excalidraw.com/blog/end-to-end-encryption"
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener"
       aria-label={t("encrypted.link")}
     >
       <Tooltip label={t("encrypted.tooltip")} long={true}>

excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -10,7 +10,7 @@ export const ExcalidrawPlusAppLink = () => {
         import.meta.env.VITE_APP_PLUS_APP
       }?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
       target="_blank"
-      rel="noreferrer"
+      rel="noopener"
       className="plus-button"
     >
       Go to Excalidraw+

excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap

@@ -198,7 +198,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
     <a
       class="welcome-screen-menu-item "
       href="undefined/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-      rel="noreferrer"
+      rel="noopener"
       target="_blank"
     >
       <div

packages/common/src/constants.ts

@@ -119,6 +119,7 @@ export const CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
   ZOOM_ACTIONS: "zoom-actions",
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
+  CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
 };
 
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";

packages/common/src/utility-types.ts

@@ -68,3 +68,28 @@ export type MaybePromise<T> = T | Promise<T>;
 
 // get union of all keys from the union of types
 export type AllPossibleKeys<T> = T extends any ? keyof T : never;
+
+// utlity types for filter helper and related data structures
+// -----------------------------------------------------------------------------
+export type ReadonlyArrayOrMap<
+  T,
+  K = T extends { id: string } ? T["id"] : string,
+> = readonly T[] | ReadonlyMap<K, T>;
+
+export type GenericAccumulator<T = unknown> = Set<T> | Map<T, T> | Array<T>;
+export type ArrayAccumulator<T = unknown> = Array<T>;
+export type MapAccumulator<T = unknown, K = unknown> = Map<T, K>;
+export type SetAccumulator<T = unknown> = Set<T>;
+export type OutputAccumulator<
+  Accumulator,
+  OutputType,
+  Attr extends keyof OutputType = never,
+> = Accumulator extends SetAccumulator
+  ? Set<[Attr] extends [never] ? OutputType : Attr>
+  : Accumulator extends MapAccumulator
+  ? Map<
+      OutputType extends { id: string } ? OutputType["id"] : string,
+      [Attr] extends [never] ? OutputType : Attr
+    >
+  : Array<OutputType>;
+// -----------------------------------------------------------------------------

packages/element/src/binding.ts

@@ -81,7 +81,6 @@ import type {
   NonDeletedSceneElementsMap,
   ExcalidrawTextElement,
   ExcalidrawArrowElement,
-  OrderedExcalidrawElement,
   ExcalidrawElbowArrowElement,
   FixedPoint,
   FixedPointBinding,
@@ -276,15 +275,6 @@ const getBindingStrategyForDraggingArrowEndpoints = (
           zoom,
         )
       : null // If binding is disabled and start is dragged, break all binds
-    : !isElbowArrow(selectedElement)
-    ? // We have to update the focus and gap of the binding, so let's rebind
-      getElligibleElementForBindingElement(
-        selectedElement,
-        "start",
-        elementsMap,
-        elements,
-        zoom,
-      )
     : "keep";
   const end = endDragged
     ? isBindingEnabled
@@ -296,15 +286,6 @@ const getBindingStrategyForDraggingArrowEndpoints = (
           zoom,
         )
       : null // If binding is disabled and end is dragged, break all binds
-    : !isElbowArrow(selectedElement)
-    ? // We have to update the focus and gap of the binding, so let's rebind
-      getElligibleElementForBindingElement(
-        selectedElement,
-        "end",
-        elementsMap,
-        elements,
-        zoom,
-      )
     : "keep";
 
   return [start, end];
@@ -728,29 +709,32 @@ const calculateFocusAndGap = (
 
 // Supports translating, rotating and scaling `changedElement` with bound
 // linear elements.
-// Because scaling involves moving the focus points as well, it is
-// done before the `changedElement` is updated, and the `newSize` is passed
-// in explicitly.
 export const updateBoundElements = (
   changedElement: NonDeletedExcalidrawElement,
   scene: Scene,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: { width: number; height: number };
-    changedElements?: Map<string, OrderedExcalidrawElement>;
+    changedElements?: Map<string, ExcalidrawElement>;
   },
 ) => {
+  if (!isBindableElement(changedElement)) {
+    return;
+  }
+
   const { newSize, simultaneouslyUpdated } = options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
 
-  if (!isBindableElement(changedElement)) {
-    return;
+  let elementsMap: ElementsMap = scene.getNonDeletedElementsMap();
+  if (options?.changedElements) {
+    elementsMap = new Map(elementsMap) as typeof elementsMap;
+    options.changedElements.forEach((element) => {
+      elementsMap.set(element.id, element);
+    });
   }
 
-  const elementsMap = scene.getNonDeletedElementsMap();
-
   boundElementsVisitor(elementsMap, changedElement, (element) => {
     if (!isLinearElement(element) || element.isDeleted) {
       return;
@@ -854,6 +838,25 @@ export const updateBoundElements = (
   });
 };
 
+export const updateBindings = (
+  latestElement: ExcalidrawElement,
+  scene: Scene,
+  options?: {
+    simultaneouslyUpdated?: readonly ExcalidrawElement[];
+    newSize?: { width: number; height: number };
+    zoom?: AppState["zoom"];
+  },
+) => {
+  if (isLinearElement(latestElement)) {
+    bindOrUnbindLinearElements([latestElement], true, [], scene, options?.zoom);
+  } else {
+    updateBoundElements(latestElement, scene, {
+      ...options,
+      changedElements: new Map([[latestElement.id, latestElement]]),
+    });
+  }
+};
+
 const doesNeedUpdate = (
   boundElement: NonDeleted<ExcalidrawLinearElement>,
   changedElement: ExcalidrawBindableElement,
@@ -1168,6 +1171,48 @@ export const snapToMid = (
       center,
       angle,
     );
+  } else if (element.type === "diamond") {
+    const distance = FIXED_BINDING_DISTANCE - 1;
+    const topLeft = pointFrom<GlobalPoint>(
+      x + width / 4 - distance,
+      y + height / 4 - distance,
+    );
+    const topRight = pointFrom<GlobalPoint>(
+      x + (3 * width) / 4 + distance,
+      y + height / 4 - distance,
+    );
+    const bottomLeft = pointFrom<GlobalPoint>(
+      x + width / 4 - distance,
+      y + (3 * height) / 4 + distance,
+    );
+    const bottomRight = pointFrom<GlobalPoint>(
+      x + (3 * width) / 4 + distance,
+      y + (3 * height) / 4 + distance,
+    );
+    if (
+      pointDistance(topLeft, nonRotated) <
+      Math.max(horizontalThrehsold, verticalThrehsold)
+    ) {
+      return pointRotateRads(topLeft, center, angle);
+    }
+    if (
+      pointDistance(topRight, nonRotated) <
+      Math.max(horizontalThrehsold, verticalThrehsold)
+    ) {
+      return pointRotateRads(topRight, center, angle);
+    }
+    if (
+      pointDistance(bottomLeft, nonRotated) <
+      Math.max(horizontalThrehsold, verticalThrehsold)
+    ) {
+      return pointRotateRads(bottomLeft, center, angle);
+    }
+    if (
+      pointDistance(bottomRight, nonRotated) <
+      Math.max(horizontalThrehsold, verticalThrehsold)
+    ) {
+      return pointRotateRads(bottomRight, center, angle);
+    }
   }
 
   return p;

packages/element/src/bounds.ts

@@ -1,17 +1,17 @@
 import rough from "roughjs/bin/rough";
 
 import {
-  rescalePoints,
   arrayToMap,
   invariant,
+  rescalePoints,
   sizeOf,
 } from "@excalidraw/common";
 
 import {
   degreesToRadians,
   lineSegment,
-  pointFrom,
   pointDistance,
+  pointFrom,
   pointFromArray,
   pointRotateRads,
 } from "@excalidraw/math";
@@ -33,8 +33,8 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
-import { ShapeCache } from "./ShapeCache";
 import { generateRoughOptions } from "./Shape";
+import { ShapeCache } from "./ShapeCache";
 import { LinearElementEditor } from "./linearElementEditor";
 import { getBoundTextElement, getContainerElement } from "./textElement";
 import {
@@ -52,20 +52,20 @@ import {
   deconstructRectanguloidElement,
 } from "./utils";
 
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  Arrowhead,
-  ExcalidrawFreeDrawElement,
-  NonDeleted,
-  ExcalidrawTextElementWithContainer,
-  ElementsMap,
-  ExcalidrawRectanguloidElement,
-  ExcalidrawEllipseElement,
-  ElementsMapOrArray,
-} from "./types";
 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
+import type {
+  Arrowhead,
+  ElementsMap,
+  ElementsMapOrArray,
+  ExcalidrawElement,
+  ExcalidrawEllipseElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawRectanguloidElement,
+  ExcalidrawTextElementWithContainer,
+  NonDeleted,
+} from "./types";
 
 export type RectangleBox = {
   x: number;

packages/element/src/dragElements.ts

@@ -26,6 +26,10 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import { filterElements } from "./utils";
+
+import { getFrameChildren } from "./frame";
+
 import type Scene from "./Scene";
 
 import type { Bounds } from "./bounds";
@@ -65,23 +69,13 @@ export const dragSelectedElements = (
     return true;
   });
 
-  // we do not want a frame and its elements to be selected at the same time
-  // but when it happens (due to some bug), we want to avoid updating element
-  // in the frame twice, hence the use of set
-  const elementsToUpdate = new Set<NonDeletedExcalidrawElement>(
-    selectedElements,
+  // update frames and their children (use a set to make sure we avoid
+  // duplicates in case the user already selected the frame's children)
+  const elementsToUpdate = getFrameChildren(
+    scene.getNonDeletedElements(),
+    filterElements(selectedElements, isFrameLikeElement, new Set(), "id"),
+    new Set(selectedElements),
   );
-  const frames = selectedElements
-    .filter((e) => isFrameLikeElement(e))
-    .map((f) => f.id);
-
-  if (frames.length > 0) {
-    for (const element of scene.getNonDeletedElements()) {
-      if (element.frameId !== null && frames.includes(element.frameId)) {
-        elementsToUpdate.add(element);
-      }
-    }
-  }
 
   const origElements: ExcalidrawElement[] = [];
 

packages/element/src/frame.ts

@@ -9,7 +9,13 @@ import type {
   StaticCanvasAppState,
 } from "@excalidraw/excalidraw/types";
 
-import type { ReadonlySetLike } from "@excalidraw/common/utility-types";
+import type {
+  ArrayAccumulator,
+  GenericAccumulator,
+  ReadonlyArrayOrMap,
+  ReadonlySetLike,
+  OutputAccumulator,
+} from "@excalidraw/common/utility-types";
 
 import { getElementsWithinSelection, getSelectedElements } from "./selection";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
@@ -27,6 +33,8 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import { filterElements } from "./utils";
+
 import type { ExcalidrawElementsIncludingDeleted } from "./Scene";
 
 import type {
@@ -230,17 +238,30 @@ export const groupByFrameLikes = (elements: readonly ExcalidrawElement[]) => {
   return frameElementsMap;
 };
 
-export const getFrameChildren = (
-  allElements: ElementsMapOrArray,
-  frameId: string,
-) => {
-  const frameChildren: ExcalidrawElement[] = [];
-  for (const element of allElements.values()) {
-    if (element.frameId === frameId) {
-      frameChildren.push(element);
-    }
+export const getFrameChildren = <
+  K extends ExcalidrawElement,
+  O extends GenericAccumulator = ArrayAccumulator,
+>(
+  allElements: ReadonlyArrayOrMap<K>,
+  frameId: K["id"] | Set<string>,
+  output?: O,
+): OutputAccumulator<O, K> => {
+  if (frameId instanceof Set && frameId.size === 0) {
+    return (output || []) as any as OutputAccumulator<O, K>;
   }
-  return frameChildren;
+
+  return filterElements(
+    allElements,
+    (element): element is K => {
+      if (!element.frameId) {
+        return false;
+      }
+      return typeof frameId === "string"
+        ? element.frameId === frameId
+        : frameId.has(element.frameId);
+    },
+    output || [],
+  ) as any as OutputAccumulator<O, K>;
 };
 
 export const getFrameLikeElements = (

packages/element/src/newElement.ts

@@ -44,7 +44,6 @@ import type {
   ExcalidrawIframeElement,
   ElementsMap,
   ExcalidrawArrowElement,
-  FixedSegment,
   ExcalidrawElbowArrowElement,
 } from "./types";
 
@@ -478,7 +477,7 @@ export const newArrowElement = <T extends boolean>(
     endArrowhead?: Arrowhead | null;
     points?: ExcalidrawArrowElement["points"];
     elbowed?: T;
-    fixedSegments?: FixedSegment[] | null;
+    fixedSegments?: ExcalidrawElbowArrowElement["fixedSegments"] | null;
   } & ElementConstructorOpts,
 ): T extends true
   ? NonDeleted<ExcalidrawElbowArrowElement>

packages/element/src/resizeElements.ts

@@ -962,11 +962,6 @@ export const resizeSingleElement = (
       isDragging: false,
     });
 
-    updateBoundElements(latestElement, scene, {
-      // TODO: confirm with MARK if this actually makes sense
-      newSize: { width: nextWidth, height: nextHeight },
-    });
-
     if (boundTextElement && boundTextFont != null) {
       scene.mutateElement(boundTextElement, {
         fontSize: boundTextFont.fontSize,
@@ -978,6 +973,11 @@ export const resizeSingleElement = (
       handleDirection,
       shouldMaintainAspectRatio,
     );
+
+    updateBoundElements(latestElement, scene, {
+      // TODO: confirm with MARK if this actually makes sense
+      newSize: { width: nextWidth, height: nextHeight },
+    });
   }
 };
 

packages/element/src/typeChecks.ts

@@ -119,6 +119,20 @@ export const isElbowArrow = (
   return isArrowElement(element) && element.elbowed;
 };
 
+export const isSharpArrow = (
+  element?: ExcalidrawElement,
+): element is ExcalidrawArrowElement => {
+  return isArrowElement(element) && !element.elbowed && !element.roundness;
+};
+
+export const isCurvedArrow = (
+  element?: ExcalidrawElement,
+): element is ExcalidrawArrowElement => {
+  return (
+    isArrowElement(element) && !element.elbowed && element.roundness !== null
+  );
+};
+
 export const isLinearElementType = (
   elementType: ElementOrToolType,
 ): boolean => {
@@ -271,6 +285,10 @@ export const isBoundToContainer = (
   );
 };
 
+export const isArrowBoundToElement = (element: ExcalidrawArrowElement) => {
+  return !!element.startBinding || !!element.endBinding;
+};
+
 export const isUsingAdaptiveRadius = (type: string) =>
   type === "rectangle" ||
   type === "embeddable" ||

packages/element/src/types.ts

@@ -412,3 +412,11 @@ export type NonDeletedSceneElementsMap = Map<
 export type ElementsMapOrArray =
   | readonly ExcalidrawElement[]
   | Readonly<ElementsMap>;
+
+export type ConvertibleGenericTypes = "rectangle" | "diamond" | "ellipse";
+export type ConvertibleLinearTypes =
+  | "line"
+  | "sharpArrow"
+  | "curvedArrow"
+  | "elbowArrow";
+export type ConvertibleTypes = ConvertibleGenericTypes | ConvertibleLinearTypes;

packages/element/src/utils.ts

@@ -10,7 +10,7 @@ import {
   type GlobalPoint,
 } from "@excalidraw/math";
 
-import { elementCenterPoint } from "@excalidraw/common";
+import { elementCenterPoint, isReadonlyArray } from "@excalidraw/common";
 
 import type { Curve, LineSegment } from "@excalidraw/math";
 
@@ -18,8 +18,15 @@ import { getCornerRadius } from "./shapes";
 
 import { getDiamondPoints } from "./bounds";
 
+import type {
+  GenericAccumulator,
+  OutputAccumulator,
+  ReadonlyArrayOrMap,
+} from "../../common/src/utility-types";
+
 import type {
   ExcalidrawDiamondElement,
+  ExcalidrawElement,
   ExcalidrawRectanguloidElement,
 } from "./types";
 
@@ -353,3 +360,35 @@ export function deconstructDiamondElement(
 
   return [sides, corners];
 }
+
+export const filterElements = <
+  InputType extends ExcalidrawElement,
+  PredicateOutputType extends InputType,
+  AccumulatorType extends GenericAccumulator,
+  Attr extends keyof PredicateOutputType = never,
+>(
+  elements: ReadonlyArrayOrMap<InputType>,
+  predicate: (elem: InputType) => elem is PredicateOutputType,
+  accumulator: AccumulatorType,
+  attr?: Attr,
+): OutputAccumulator<AccumulatorType, PredicateOutputType, Attr> => {
+  for (const element of isReadonlyArray(elements)
+    ? elements
+    : elements.values()) {
+    if (predicate(element)) {
+      if (accumulator instanceof Set) {
+        accumulator.add(attr ? element[attr] : element);
+      } else if (accumulator instanceof Map) {
+        accumulator.set(element.id, attr ? element[attr] : element);
+      } else {
+        accumulator.push(element);
+      }
+    }
+  }
+
+  return accumulator as any as OutputAccumulator<
+    AccumulatorType,
+    PredicateOutputType,
+    Attr
+  >;
+};

packages/excalidraw/actions/actionToggleShapeSwitch.tsx

@@ -0,0 +1,34 @@
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import {
+  getConversionTypeFromElements,
+  convertElementTypePopupAtom,
+} from "../components/ConvertElementTypePopup";
+import { editorJotaiStore } from "../editor-jotai";
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
+export const actionToggleShapeSwitch = register({
+  name: "toggleShapeSwitch",
+  label: "labels.shapeSwitch",
+  icon: () => null,
+  viewMode: true,
+  trackEvent: {
+    category: "shape_switch",
+    action: "toggle",
+  },
+  keywords: ["change", "switch", "swap"],
+  perform(elements, appState, _, app) {
+    editorJotaiStore.set(convertElementTypePopupAtom, {
+      type: "panel",
+    });
+
+    return {
+      captureUpdate: CaptureUpdateAction.NEVER,
+    };
+  },
+  checked: (appState) => appState.gridModeEnabled,
+  predicate: (elements, appState, props) =>
+    getConversionTypeFromElements(elements as ExcalidrawElement[]) !== null,
+});

packages/excalidraw/actions/types.ts

@@ -140,7 +140,8 @@ export type ActionName =
   | "linkToElement"
   | "cropEditor"
   | "wrapSelectionInFrame"
-  | "toggleLassoTool";
+  | "toggleLassoTool"
+  | "toggleShapeSwitch";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -195,7 +196,8 @@ export interface Action {
           | "menu"
           | "collab"
           | "hyperlink"
-          | "search_menu";
+          | "search_menu"
+          | "shape_switch";
         action?: string;
         predicate?: (
           appState: Readonly<AppState>,

packages/excalidraw/animated-trail.ts

@@ -129,7 +129,6 @@ export class AnimatedTrail implements Trail {
   }
 
   private update() {
-    this.pastTrails = [];
     this.start();
     if (this.trailAnimation) {
       this.trailAnimation.setAttribute("begin", "indefinite");

packages/excalidraw/components/App.tsx

@@ -100,6 +100,7 @@ import {
   arrayToMap,
   type EXPORT_IMAGE_TYPES,
   randomInteger,
+  CLASSES,
 } from "@excalidraw/common";
 
 import {
@@ -431,7 +432,7 @@ import {
 } from "../components/hyperlink/Hyperlink";
 
 import { Fonts } from "../fonts";
-import { editorJotaiStore } from "../editor-jotai";
+import { editorJotaiStore, type WritableAtom } from "../editor-jotai";
 import { ImageSceneDataError } from "../errors";
 import {
   getSnapLinesAtPointer,
@@ -467,6 +468,12 @@ import { LassoTrail } from "../lasso";
 
 import { EraserTrail } from "../eraser";
 
+import ConvertElementTypePopup, {
+  getConversionTypeFromElements,
+  convertElementTypePopupAtom,
+  convertElementTypes,
+} from "./ConvertElementTypePopup";
+
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
@@ -498,7 +505,6 @@ import type { ExportedElements } from "../data";
 import type { ContextMenuItems } from "./ContextMenu";
 import type { FileSystemHandle } from "../data/filesystem";
 import type { ExcalidrawElementSkeleton } from "../data/transform";
-
 import type {
   AppClassProperties,
   AppProps,
@@ -815,6 +821,15 @@ class App extends React.Component<AppProps, AppState> {
     );
   }
 
+  updateEditorAtom = <Value, Args extends unknown[], Result>(
+    atom: WritableAtom<Value, Args, Result>,
+    ...args: Args
+  ): Result => {
+    const result = editorJotaiStore.set(atom, ...args);
+    this.triggerRender();
+    return result;
+  };
+
   private onWindowMessage(event: MessageEvent) {
     if (
       event.origin !== "https://player.vimeo.com" &&
@@ -1583,6 +1598,9 @@ class App extends React.Component<AppProps, AppState> {
 
     const firstSelectedElement = selectedElements[0];
 
+    const showShapeSwitchPanel =
+      editorJotaiStore.get(convertElementTypePopupAtom)?.type === "panel";
+
     return (
       <div
         className={clsx("excalidraw excalidraw-container", {
@@ -1857,6 +1875,9 @@ class App extends React.Component<AppProps, AppState> {
                           />
                         )}
                         {this.renderFrameNames()}
+                        {showShapeSwitchPanel && (
+                          <ConvertElementTypePopup app={this} />
+                        )}
                       </ExcalidrawActionManagerContext.Provider>
                       {this.renderEmbeddables()}
                     </ExcalidrawElementsContext.Provider>
@@ -2138,7 +2159,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private openEyeDropper = ({ type }: { type: "stroke" | "background" }) => {
-    editorJotaiStore.set(activeEyeDropperAtom, {
+    this.updateEditorAtom(activeEyeDropperAtom, {
       swapPreviewOnAlt: true,
       colorPickerType:
         type === "stroke" ? "elementStroke" : "elementBackground",
@@ -4157,6 +4178,40 @@ class App extends React.Component<AppProps, AppState> {
           return;
         }
 
+        // Shape switching
+        if (event.key === KEYS.ESCAPE) {
+          this.updateEditorAtom(convertElementTypePopupAtom, null);
+        } else if (
+          event.key === KEYS.TAB &&
+          (document.activeElement === this.excalidrawContainerRef?.current ||
+            document.activeElement?.classList.contains(
+              CLASSES.CONVERT_ELEMENT_TYPE_POPUP,
+            ))
+        ) {
+          event.preventDefault();
+
+          const conversionType =
+            getConversionTypeFromElements(selectedElements);
+
+          if (
+            editorJotaiStore.get(convertElementTypePopupAtom)?.type === "panel"
+          ) {
+            if (
+              convertElementTypes(this, {
+                conversionType,
+                direction: event.shiftKey ? "left" : "right",
+              })
+            ) {
+              this.store.shouldCaptureIncrement();
+            }
+          }
+          if (conversionType) {
+            this.updateEditorAtom(convertElementTypePopupAtom, {
+              type: "panel",
+            });
+          }
+        }
+
         if (
           event.key === KEYS.ESCAPE &&
           this.flowChartCreator.isCreatingChart
@@ -4615,7 +4670,7 @@ class App extends React.Component<AppProps, AppState> {
         event[KEYS.CTRL_OR_CMD] &&
         (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
       ) {
-        editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+        this.updateEditorAtom(activeConfirmDialogAtom, "clearCanvas");
       }
 
       // eye dropper
@@ -6364,7 +6419,11 @@ class App extends React.Component<AppProps, AppState> {
           focus: false,
         })),
       }));
-      editorJotaiStore.set(searchItemInFocusAtom, null);
+      this.updateEditorAtom(searchItemInFocusAtom, null);
+    }
+
+    if (editorJotaiStore.get(convertElementTypePopupAtom)) {
+      this.updateEditorAtom(convertElementTypePopupAtom, null);
     }
 
     // since contextMenu options are potentially evaluated on each render,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -11,6 +11,8 @@ import {
   isWritableElement,
 } from "@excalidraw/common";
 
+import { actionToggleShapeSwitch } from "@excalidraw/excalidraw/actions/actionToggleShapeSwitch";
+
 import type { MarkRequired } from "@excalidraw/common/utility-types";
 
 import {
@@ -410,6 +412,14 @@ function CommandPaletteInner({
             actionManager.executeAction(actionToggleSearchMenu);
           },
         },
+        {
+          label: t("labels.shapeSwitch"),
+          category: DEFAULT_CATEGORIES.elements,
+          icon: boltIcon,
+          perform: () => {
+            actionManager.executeAction(actionToggleShapeSwitch);
+          },
+        },
         {
           label: t("labels.changeStroke"),
           keywords: ["color", "outline"],

packages/excalidraw/components/ConvertElementTypePopup.scss

@@ -0,0 +1,18 @@
+@import "../css//variables.module.scss";
+
+.excalidraw {
+  .ConvertElementTypePopup {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.2rem;
+    border-radius: 0.5rem;
+    background: var(--island-bg-color);
+    box-shadow: var(--shadow-island);
+    padding: 0.5rem;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

packages/excalidraw/components/HelpDialog.tsx

@@ -21,7 +21,7 @@ const Header = () => (
       className="HelpDialog__btn"
       href="https://docs.excalidraw.com"
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener"
     >
       <div className="HelpDialog__link-icon">{ExternalLinkIcon}</div>
       {t("helpDialog.documentation")}
@@ -30,7 +30,7 @@ const Header = () => (
       className="HelpDialog__btn"
       href="https://plus.excalidraw.com/blog"
       target="_blank"
-      rel="noopener noreferrer"
+      rel="noopener"
     >
       <div className="HelpDialog__link-icon">{ExternalLinkIcon}</div>
       {t("helpDialog.blog")}
@@ -247,6 +247,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("toolBar.link")}
               shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
             />
+            <Shortcut
+              label={t("toolBar.convertElementType")}
+              shortcuts={["Tab", "Shift+Tab"]}
+              isOr={true}
+            />
           </ShortcutIsland>
           <ShortcutIsland
             className="HelpDialog__island--view"

packages/excalidraw/components/PublishLibrary.tsx

@@ -389,7 +389,7 @@ const PublishLibrary = ({
                 <a
                   href="https://libraries.excalidraw.com"
                   target="_blank"
-                  rel="noopener noreferrer"
+                  rel="noopener"
                 >
                   {el}
                 </a>

packages/excalidraw/components/Stats/Angle.tsx

@@ -11,8 +11,10 @@ import type Scene from "@excalidraw/element/Scene";
 
 import { angleIcon } from "../icons";
 
+import { updateBindings } from "../../../element/src/binding";
+
 import DragInput from "./DragInput";
-import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AppState } from "../../types";

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -10,7 +10,12 @@ import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 import type Scene from "@excalidraw/element/Scene";
 
 import StatsDragInput from "./DragInput";
-import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
+import {
+  getAtomicUnits,
+  getStepSizedValue,
+  isPropertyEditable,
+  STEP_SIZE,
+} from "./utils";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
@@ -26,8 +31,6 @@ interface MultiPositionProps {
   appState: AppState;
 }
 
-const STEP_SIZE = 10;
-
 const moveElements = (
   property: MultiPositionProps["property"],
   changeInTopX: number,

packages/excalidraw/components/Stats/Position.tsx

@@ -11,7 +11,7 @@ import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 import type Scene from "@excalidraw/element/Scene";
 
 import StatsDragInput from "./DragInput";
-import { getStepSizedValue, moveElement } from "./utils";
+import { getStepSizedValue, moveElement, STEP_SIZE } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AppState } from "../../types";
@@ -24,8 +24,6 @@ interface PositionProps {
   appState: AppState;
 }
 
-const STEP_SIZE = 10;
-
 const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   accumulatedChange,
   instantChange,

packages/excalidraw/components/Stats/utils.ts

@@ -1,13 +1,8 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
-import {
-  bindOrUnbindLinearElements,
-  updateBoundElements,
-} from "@excalidraw/element/binding";
 import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isFrameLikeElement,
-  isLinearElement,
   isTextElement,
 } from "@excalidraw/element/typeChecks";
 
@@ -17,6 +12,8 @@ import {
   isInGroup,
 } from "@excalidraw/element/groups";
 
+import { getFrameChildren } from "@excalidraw/element/frame";
+
 import type { Radians } from "@excalidraw/math";
 
 import type {
@@ -27,6 +24,8 @@ import type {
 
 import type Scene from "@excalidraw/element/Scene";
 
+import { updateBindings } from "../../../element/src/binding";
+
 import type { AppState } from "../../types";
 
 export type StatsInputProperty =
@@ -39,6 +38,7 @@ export type StatsInputProperty =
   | "gridStep";
 
 export const SMALLEST_DELTA = 0.01;
+export const STEP_SIZE = 10;
 
 export const isPropertyEditable = (
   element: ExcalidrawElement,
@@ -172,6 +172,68 @@ export const moveElement = (
         { informMutation: shouldInformMutation, isDragging: false },
       );
   }
+
+  if (isFrameLikeElement(originalElement)) {
+    const originalChildren = getFrameChildren(
+      originalElementsMap,
+      originalElement.id,
+    );
+    originalChildren.forEach((child) => {
+      const latestChildElement = elementsMap.get(child.id);
+
+      if (!latestChildElement) {
+        return;
+      }
+
+      const [childCX, childCY] = [
+        child.x + child.width / 2,
+        child.y + child.height / 2,
+      ];
+      const [childTopLeftX, childTopLeftY] = pointRotateRads(
+        pointFrom(child.x, child.y),
+        pointFrom(childCX, childCY),
+        child.angle,
+      );
+
+      const childNewTopLeftX = Math.round(childTopLeftX + changeInX);
+      const childNewTopLeftY = Math.round(childTopLeftY + changeInY);
+
+      const [childX, childY] = pointRotateRads(
+        pointFrom(childNewTopLeftX, childNewTopLeftY),
+        pointFrom(childCX + changeInX, childCY + changeInY),
+        -child.angle as Radians,
+      );
+
+      scene.mutateElement(
+        latestChildElement,
+        {
+          x: childX,
+          y: childY,
+        },
+        { informMutation: shouldInformMutation, isDragging: false },
+      );
+      updateBindings(latestChildElement, scene, {
+        simultaneouslyUpdated: originalChildren,
+      });
+
+      const boundTextElement = getBoundTextElement(
+        latestChildElement,
+        originalElementsMap,
+      );
+      if (boundTextElement) {
+        const latestBoundTextElement = elementsMap.get(boundTextElement.id);
+        latestBoundTextElement &&
+          scene.mutateElement(
+            latestBoundTextElement,
+            {
+              x: boundTextElement.x + changeInX,
+              y: boundTextElement.y + changeInY,
+            },
+            { informMutation: shouldInformMutation, isDragging: false },
+          );
+      }
+    });
+  }
 };
 
 export const getAtomicUnits = (
@@ -194,19 +256,3 @@ export const getAtomicUnits = (
     });
   return _atomicUnits;
 };
-
-export const updateBindings = (
-  latestElement: ExcalidrawElement,
-  scene: Scene,
-  options?: {
-    simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: { width: number; height: number };
-    zoom?: AppState["zoom"];
-  },
-) => {
-  if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements([latestElement], true, [], scene, options?.zoom);
-  } else {
-    updateBoundElements(latestElement, scene, options);
-  }
-};

packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -16,7 +16,7 @@ const DropdownMenuItemLink = ({
   onSelect,
   className = "",
   selected,
-  rel = "noreferrer",
+  rel = "noopener",
   ...rest
 }: {
   href: string;
@@ -31,11 +31,12 @@ const DropdownMenuItemLink = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
+    // eslint-disable-next-line react/jsx-no-target-blank
     <a
       {...rest}
       href={href}
       target="_blank"
-      rel="noreferrer"
+      rel={rel || "noopener"}
       className={getDropdownMenuItemClassName(className, selected)}
       title={rest.title ?? rest["aria-label"]}
       onClick={handleClick}

packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -78,7 +78,7 @@ const WelcomeScreenMenuItemLink = ({
       className={`welcome-screen-menu-item ${className}`}
       href={href}
       target="_blank"
-      rel="noreferrer"
+      rel="noopener"
     >
       <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
         {children}

packages/excalidraw/data/restore.ts

@@ -29,6 +29,7 @@ import { bumpVersion } from "@excalidraw/element/mutateElement";
 import { getContainerElement } from "@excalidraw/element/textElement";
 import { detectLineHeight } from "@excalidraw/element/textMeasurements";
 import {
+  isArrowBoundToElement,
   isArrowElement,
   isElbowArrow,
   isFixedPointBinding,
@@ -594,8 +595,7 @@ export const restoreElements = (
   return restoredElements.map((element) => {
     if (
       isElbowArrow(element) &&
-      element.startBinding == null &&
-      element.endBinding == null &&
+      !isArrowBoundToElement(element) &&
       !validateElbowPoints(element.points)
     ) {
       return {

packages/excalidraw/editor-jotai.ts

@@ -1,10 +1,15 @@
 // eslint-disable-next-line no-restricted-imports
-import { atom, createStore, type PrimitiveAtom } from "jotai";
+import {
+  atom,
+  createStore,
+  type PrimitiveAtom,
+  type WritableAtom,
+} from "jotai";
 import { createIsolation } from "jotai-scope";
 
 const jotai = createIsolation();
 
-export { atom, PrimitiveAtom };
+export { atom, PrimitiveAtom, WritableAtom };
 export const { useAtom, useSetAtom, useAtomValue, useStore } = jotai;
 export const EditorJotaiProvider: ReturnType<
   typeof createIsolation

packages/excalidraw/locales/en.json

@@ -165,7 +165,9 @@
     "unCroppedDimension": "Uncropped dimension",
     "copyElementLink": "Copy link to object",
     "linkToElement": "Link to object",
-    "wrapSelectionInFrame": "Wrap selection in frame"
+    "wrapSelectionInFrame": "Wrap selection in frame",
+    "tab": "Tab",
+    "shapeSwitch": "Switch shape"
   },
   "elementLink": {
     "title": "Link to object",
@@ -296,7 +298,8 @@
     "laser": "Laser pointer",
     "hand": "Hand (panning tool)",
     "extraTools": "More tools",
-    "mermaidToExcalidraw": "Mermaid to Excalidraw"
+    "mermaidToExcalidraw": "Mermaid to Excalidraw",
+    "convertElementType": "Toggle shape type"
   },
   "element": {
     "rectangle": "Rectangle",

packages/excalidraw/renderer/helpers.ts

@@ -1,7 +1,30 @@
-import { THEME, THEME_FILTER } from "@excalidraw/common";
+import { elementCenterPoint, THEME, THEME_FILTER } from "@excalidraw/common";
+
+import { FIXED_BINDING_DISTANCE } from "@excalidraw/element/binding";
+import { getDiamondPoints } from "@excalidraw/element/bounds";
+import { getCornerRadius } from "@excalidraw/element/shapes";
+
+import {
+  bezierEquation,
+  curve,
+  curveTangent,
+  type GlobalPoint,
+  pointFrom,
+  pointFromVector,
+  pointRotateRads,
+  vector,
+  vectorNormal,
+  vectorNormalize,
+  vectorScale,
+} from "@excalidraw/math";
+
+import type {
+  ExcalidrawDiamondElement,
+  ExcalidrawRectanguloidElement,
+} from "@excalidraw/element/types";
 
 import type { StaticCanvasRenderConfig } from "../scene/types";
-import type { StaticCanvasAppState, AppState } from "../types";
+import type { AppState, StaticCanvasAppState } from "../types";
 
 export const fillCircle = (
   context: CanvasRenderingContext2D,
@@ -72,3 +95,399 @@ export const bootstrapCanvas = ({
 
   return context;
 };
+
+function drawCatmullRomQuadraticApprox(
+  ctx: CanvasRenderingContext2D,
+  points: GlobalPoint[],
+  segments = 20,
+) {
+  ctx.lineTo(points[0][0], points[0][1]);
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1 < 0 ? 0 : i - 1];
+    const p1 = points[i];
+    const p2 = points[i + 1 >= points.length ? points.length - 1 : i + 1];
+
+    for (let t = 0; t <= 1; t += 1 / segments) {
+      const t2 = t * t;
+
+      const x =
+        (1 - t) * (1 - t) * p0[0] + 2 * (1 - t) * t * p1[0] + t2 * p2[0];
+
+      const y =
+        (1 - t) * (1 - t) * p0[1] + 2 * (1 - t) * t * p1[1] + t2 * p2[1];
+
+      ctx.lineTo(x, y);
+    }
+  }
+}
+
+function drawCatmullRomCubicApprox(
+  ctx: CanvasRenderingContext2D,
+  points: GlobalPoint[],
+  segments = 20,
+) {
+  ctx.lineTo(points[0][0], points[0][1]);
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1 < 0 ? 0 : i - 1];
+    const p1 = points[i];
+    const p2 = points[i + 1 >= points.length ? points.length - 1 : i + 1];
+    const p3 = points[i + 2 >= points.length ? points.length - 1 : i + 2];
+
+    for (let t = 0; t <= 1; t += 1 / segments) {
+      const t2 = t * t;
+      const t3 = t2 * t;
+
+      const x =
+        0.5 *
+        (2 * p1[0] +
+          (-p0[0] + p2[0]) * t +
+          (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 +
+          (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3);
+
+      const y =
+        0.5 *
+        (2 * p1[1] +
+          (-p0[1] + p2[1]) * t +
+          (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 +
+          (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3);
+
+      ctx.lineTo(x, y);
+    }
+  }
+}
+
+export const drawHighlightForRectWithRotation = (
+  context: CanvasRenderingContext2D,
+  element: ExcalidrawRectanguloidElement,
+  padding: number,
+) => {
+  const [x, y] = pointRotateRads(
+    pointFrom<GlobalPoint>(element.x, element.y),
+    elementCenterPoint(element),
+    element.angle,
+  );
+
+  context.save();
+  context.translate(x, y);
+  context.rotate(element.angle);
+
+  let radius = getCornerRadius(
+    Math.min(element.width, element.height),
+    element,
+  );
+  if (radius === 0) {
+    radius = 0.01;
+  }
+
+  context.beginPath();
+
+  {
+    const topLeftApprox = offsetQuadraticBezier(
+      pointFrom(0, 0 + radius),
+      pointFrom(0, 0),
+      pointFrom(0 + radius, 0),
+      padding,
+    );
+    const topRightApprox = offsetQuadraticBezier(
+      pointFrom(element.width - radius, 0),
+      pointFrom(element.width, 0),
+      pointFrom(element.width, radius),
+      padding,
+    );
+    const bottomRightApprox = offsetQuadraticBezier(
+      pointFrom(element.width, element.height - radius),
+      pointFrom(element.width, element.height),
+      pointFrom(element.width - radius, element.height),
+      padding,
+    );
+    const bottomLeftApprox = offsetQuadraticBezier(
+      pointFrom(radius, element.height),
+      pointFrom(0, element.height),
+      pointFrom(0, element.height - radius),
+      padding,
+    );
+
+    context.moveTo(
+      topLeftApprox[topLeftApprox.length - 1][0],
+      topLeftApprox[topLeftApprox.length - 1][1],
+    );
+    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, topRightApprox);
+    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
+    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
+    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, topLeftApprox);
+  }
+
+  // Counter-clockwise for the cutout in the middle. We need to have an "inverse
+  // mask" on a filled shape for the diamond highlight, because stroking creates
+  // sharp inset edges on line joins < 90 degrees.
+  {
+    const topLeftApprox = offsetQuadraticBezier(
+      pointFrom(0 + radius, 0),
+      pointFrom(0, 0),
+      pointFrom(0, 0 + radius),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const topRightApprox = offsetQuadraticBezier(
+      pointFrom(element.width, radius),
+      pointFrom(element.width, 0),
+      pointFrom(element.width - radius, 0),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const bottomRightApprox = offsetQuadraticBezier(
+      pointFrom(element.width - radius, element.height),
+      pointFrom(element.width, element.height),
+      pointFrom(element.width, element.height - radius),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const bottomLeftApprox = offsetQuadraticBezier(
+      pointFrom(0, element.height - radius),
+      pointFrom(0, element.height),
+      pointFrom(radius, element.height),
+      -FIXED_BINDING_DISTANCE,
+    );
+
+    context.moveTo(
+      topLeftApprox[topLeftApprox.length - 1][0],
+      topLeftApprox[topLeftApprox.length - 1][1],
+    );
+    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
+    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
+    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, topRightApprox);
+    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
+    drawCatmullRomQuadraticApprox(context, topLeftApprox);
+  }
+
+  context.closePath();
+  context.fill();
+
+  context.restore();
+};
+
+export const strokeEllipseWithRotation = (
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  cx: number,
+  cy: number,
+  angle: number,
+) => {
+  context.beginPath();
+  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
+  context.stroke();
+};
+
+export const strokeRectWithRotation = (
+  context: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  cx: number,
+  cy: number,
+  angle: number,
+  fill: boolean = false,
+  /** should account for zoom */
+  radius: number = 0,
+) => {
+  context.save();
+  context.translate(cx, cy);
+  context.rotate(angle);
+  if (fill) {
+    context.fillRect(x - cx, y - cy, width, height);
+  }
+  if (radius && context.roundRect) {
+    context.beginPath();
+    context.roundRect(x - cx, y - cy, width, height, radius);
+    context.stroke();
+    context.closePath();
+  } else {
+    context.strokeRect(x - cx, y - cy, width, height);
+  }
+  context.restore();
+};
+
+export const drawHighlightForDiamondWithRotation = (
+  context: CanvasRenderingContext2D,
+  padding: number,
+  element: ExcalidrawDiamondElement,
+) => {
+  const [x, y] = pointRotateRads(
+    pointFrom<GlobalPoint>(element.x, element.y),
+    elementCenterPoint(element),
+    element.angle,
+  );
+  context.save();
+  context.translate(x, y);
+  context.rotate(element.angle);
+
+  {
+    context.beginPath();
+
+    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+      getDiamondPoints(element);
+    const verticalRadius = element.roundness
+      ? getCornerRadius(Math.abs(topX - leftX), element)
+      : (topX - leftX) * 0.01;
+    const horizontalRadius = element.roundness
+      ? getCornerRadius(Math.abs(rightY - topY), element)
+      : (rightY - topY) * 0.01;
+    const topApprox = offsetCubicBezier(
+      pointFrom(topX - verticalRadius, topY + horizontalRadius),
+      pointFrom(topX, topY),
+      pointFrom(topX, topY),
+      pointFrom(topX + verticalRadius, topY + horizontalRadius),
+      padding,
+    );
+    const rightApprox = offsetCubicBezier(
+      pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
+      pointFrom(rightX, rightY),
+      pointFrom(rightX, rightY),
+      pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
+      padding,
+    );
+    const bottomApprox = offsetCubicBezier(
+      pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
+      pointFrom(bottomX, bottomY),
+      pointFrom(bottomX, bottomY),
+      pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
+      padding,
+    );
+    const leftApprox = offsetCubicBezier(
+      pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
+      pointFrom(leftX, leftY),
+      pointFrom(leftX, leftY),
+      pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
+      padding,
+    );
+
+    context.moveTo(
+      topApprox[topApprox.length - 1][0],
+      topApprox[topApprox.length - 1][1],
+    );
+    context.lineTo(rightApprox[0][0], rightApprox[0][1]);
+    drawCatmullRomCubicApprox(context, rightApprox);
+    context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
+    drawCatmullRomCubicApprox(context, bottomApprox);
+    context.lineTo(leftApprox[0][0], leftApprox[0][1]);
+    drawCatmullRomCubicApprox(context, leftApprox);
+    context.lineTo(topApprox[0][0], topApprox[0][1]);
+    drawCatmullRomCubicApprox(context, topApprox);
+  }
+
+  // Counter-clockwise for the cutout in the middle. We need to have an "inverse
+  // mask" on a filled shape for the diamond highlight, because stroking creates
+  // sharp inset edges on line joins < 90 degrees.
+  {
+    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+      getDiamondPoints(element);
+    const verticalRadius = element.roundness
+      ? getCornerRadius(Math.abs(topX - leftX), element)
+      : (topX - leftX) * 0.01;
+    const horizontalRadius = element.roundness
+      ? getCornerRadius(Math.abs(rightY - topY), element)
+      : (rightY - topY) * 0.01;
+    const topApprox = offsetCubicBezier(
+      pointFrom(topX + verticalRadius, topY + horizontalRadius),
+      pointFrom(topX, topY),
+      pointFrom(topX, topY),
+      pointFrom(topX - verticalRadius, topY + horizontalRadius),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const rightApprox = offsetCubicBezier(
+      pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
+      pointFrom(rightX, rightY),
+      pointFrom(rightX, rightY),
+      pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const bottomApprox = offsetCubicBezier(
+      pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
+      pointFrom(bottomX, bottomY),
+      pointFrom(bottomX, bottomY),
+      pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
+      -FIXED_BINDING_DISTANCE,
+    );
+    const leftApprox = offsetCubicBezier(
+      pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
+      pointFrom(leftX, leftY),
+      pointFrom(leftX, leftY),
+      pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
+      -FIXED_BINDING_DISTANCE,
+    );
+
+    context.moveTo(
+      topApprox[topApprox.length - 1][0],
+      topApprox[topApprox.length - 1][1],
+    );
+    context.lineTo(leftApprox[0][0], leftApprox[0][1]);
+    drawCatmullRomCubicApprox(context, leftApprox);
+    context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
+    drawCatmullRomCubicApprox(context, bottomApprox);
+    context.lineTo(rightApprox[0][0], rightApprox[0][1]);
+    drawCatmullRomCubicApprox(context, rightApprox);
+    context.lineTo(topApprox[0][0], topApprox[0][1]);
+    drawCatmullRomCubicApprox(context, topApprox);
+  }
+  context.closePath();
+  context.fill();
+  context.restore();
+};
+
+function offsetCubicBezier(
+  p0: GlobalPoint,
+  p1: GlobalPoint,
+  p2: GlobalPoint,
+  p3: GlobalPoint,
+  offsetDist: number,
+  steps = 20,
+) {
+  const offsetPoints = [];
+
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const c = curve(p0, p1, p2, p3);
+    const point = bezierEquation(c, t);
+    const tangent = vectorNormalize(curveTangent(c, t));
+    const normal = vectorNormal(tangent);
+
+    offsetPoints.push(pointFromVector(vectorScale(normal, offsetDist), point));
+  }
+
+  return offsetPoints;
+}
+
+function offsetQuadraticBezier(
+  p0: GlobalPoint,
+  p1: GlobalPoint,
+  p2: GlobalPoint,
+  offsetDist: number,
+  steps = 20,
+) {
+  const offsetPoints = [];
+
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const t1 = 1 - t;
+    const point = pointFrom<GlobalPoint>(
+      t1 * t1 * p0[0] + 2 * t1 * t * p1[0] + t * t * p2[0],
+      t1 * t1 * p0[1] + 2 * t1 * t * p1[1] + t * t * p2[1],
+    );
+    const tangentX = 2 * (1 - t) * (p1[0] - p0[0]) + 2 * t * (p2[0] - p1[0]);
+    const tangentY = 2 * (1 - t) * (p1[1] - p0[1]) + 2 * t * (p2[1] - p1[1]);
+    const tangent = vectorNormalize(vector(tangentX, tangentY));
+    const normal = vectorNormal(tangent);
+
+    offsetPoints.push(pointFromVector(vectorScale(normal, offsetDist), point));
+  }
+
+  return offsetPoints;
+}

packages/excalidraw/renderer/interactiveScene.ts

@@ -1,23 +1,22 @@
-import oc from "open-color";
 import {
   pointFrom,
   type GlobalPoint,
   type LocalPoint,
   type Radians,
 } from "@excalidraw/math";
+import oc from "open-color";
 
 import {
+  arrayToMap,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   FRAME_STYLE,
-  THEME,
-  arrayToMap,
   invariant,
+  THEME,
   throttleRAF,
 } from "@excalidraw/common";
 
 import {
-  BINDING_HIGHLIGHT_OFFSET,
-  BINDING_HIGHLIGHT_THICKNESS,
+  FIXED_BINDING_DISTANCE,
   maxBindingGap,
 } from "@excalidraw/element/binding";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
@@ -35,14 +34,12 @@ import {
   isTextElement,
 } from "@excalidraw/element/typeChecks";
 
-import { getCornerRadius } from "@excalidraw/element/shapes";
-
 import { renderSelectionElement } from "@excalidraw/element/renderElement";
 
 import {
-  isSelectedViaGroup,
-  getSelectedGroupIds,
   getElementsInGroup,
+  getSelectedGroupIds,
+  isSelectedViaGroup,
   selectGroupsFromGivenElements,
 } from "@excalidraw/element/groups";
 
@@ -86,8 +83,12 @@ import { getClientColor, renderRemoteCursors } from "../clients";
 
 import {
   bootstrapCanvas,
+  drawHighlightForDiamondWithRotation,
+  drawHighlightForRectWithRotation,
   fillCircle,
   getNormalizedCanvasDimensions,
+  strokeEllipseWithRotation,
+  strokeRectWithRotation,
 } from "./helpers";
 
 import type {
@@ -160,57 +161,6 @@ const highlightPoint = <Point extends LocalPoint | GlobalPoint>(
   );
 };
 
-const strokeRectWithRotation = (
-  context: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  angle: number,
-  fill: boolean = false,
-  /** should account for zoom */
-  radius: number = 0,
-) => {
-  context.save();
-  context.translate(cx, cy);
-  context.rotate(angle);
-  if (fill) {
-    context.fillRect(x - cx, y - cy, width, height);
-  }
-  if (radius && context.roundRect) {
-    context.beginPath();
-    context.roundRect(x - cx, y - cy, width, height, radius);
-    context.stroke();
-    context.closePath();
-  } else {
-    context.strokeRect(x - cx, y - cy, width, height);
-  }
-  context.restore();
-};
-
-const strokeDiamondWithRotation = (
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  angle: number,
-) => {
-  context.save();
-  context.translate(cx, cy);
-  context.rotate(angle);
-  context.beginPath();
-  context.moveTo(0, height / 2);
-  context.lineTo(width / 2, 0);
-  context.lineTo(0, -height / 2);
-  context.lineTo(-width / 2, 0);
-  context.closePath();
-  context.stroke();
-  context.restore();
-};
-
 const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
@@ -237,19 +187,6 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
   );
 };
 
-const strokeEllipseWithRotation = (
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  angle: number,
-) => {
-  context.beginPath();
-  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
-  context.stroke();
-};
-
 const renderBindingHighlightForBindableElement = (
   context: CanvasRenderingContext2D,
   element: ExcalidrawBindableElement,
@@ -261,16 +198,10 @@ const renderBindingHighlightForBindableElement = (
   const height = y2 - y1;
 
   context.strokeStyle = "rgba(0,0,0,.05)";
-  // When zooming out, make line width greater for visibility
-  const zoomValue = zoom.value < 1 ? zoom.value : 1;
-  context.lineWidth = BINDING_HIGHLIGHT_THICKNESS / zoomValue;
-  // To ensure the binding highlight doesn't overlap the element itself
-  const padding = context.lineWidth / 2 + BINDING_HIGHLIGHT_OFFSET;
+  context.fillStyle = "rgba(0,0,0,.05)";
 
-  const radius = getCornerRadius(
-    Math.min(element.width, element.height),
-    element,
-  );
+  // To ensure the binding highlight doesn't overlap the element itself
+  const padding = maxBindingGap(element, element.width, element.height, zoom);
 
   switch (element.type) {
     case "rectangle":
@@ -280,37 +211,20 @@ const renderBindingHighlightForBindableElement = (
     case "embeddable":
     case "frame":
     case "magicframe":
-      strokeRectWithRotation(
-        context,
-        x1 - padding,
-        y1 - padding,
-        width + padding * 2,
-        height + padding * 2,
-        x1 + width / 2,
-        y1 + height / 2,
-        element.angle,
-        undefined,
-        radius,
-      );
+      drawHighlightForRectWithRotation(context, element, padding);
       break;
     case "diamond":
-      const side = Math.hypot(width, height);
-      const wPadding = (padding * side) / height;
-      const hPadding = (padding * side) / width;
-      strokeDiamondWithRotation(
-        context,
-        width + wPadding * 2,
-        height + hPadding * 2,
-        x1 + width / 2,
-        y1 + height / 2,
-        element.angle,
-      );
+      drawHighlightForDiamondWithRotation(context, padding, element);
       break;
     case "ellipse":
+      context.lineWidth =
+        maxBindingGap(element, element.width, element.height, zoom) -
+        FIXED_BINDING_DISTANCE;
+
       strokeEllipseWithRotation(
         context,
-        width + padding * 2,
-        height + padding * 2,
+        width + padding + FIXED_BINDING_DISTANCE,
+        height + padding + FIXED_BINDING_DISTANCE,
         x1 + width / 2,
         y1 + height / 2,
         element.angle,

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

@@ -21,7 +21,7 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
     <a
       class="dropdown-menu-item dropdown-menu-item-base"
       href="blog.excalidaw.com"
-      rel="noreferrer"
+      rel="noopener"
       target="_blank"
     >
       <div
@@ -392,7 +392,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         aria-label="GitHub"
         class="dropdown-menu-item dropdown-menu-item-base"
         href="https://github.com/excalidraw/excalidraw"
-        rel="noreferrer"
+        rel="noopener"
         target="_blank"
         title="GitHub"
       >
@@ -426,7 +426,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         aria-label="X"
         class="dropdown-menu-item dropdown-menu-item-base"
         href="https://x.com/excalidraw"
-        rel="noreferrer"
+        rel="noopener"
         target="_blank"
         title="X"
       >
@@ -472,7 +472,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         aria-label="Discord"
         class="dropdown-menu-item dropdown-menu-item-base"
         href="https://discord.gg/UexuTaE"
-        rel="noreferrer"
+        rel="noopener"
         target="_blank"
         title="Discord"
       >

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

@@ -171,7 +171,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 19,
+  "version": 9,
   "width": 100,
   "x": 100,
   "y": -50,
@@ -198,7 +198,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
-  "height": "102.35417",
+  "height": "102.45605",
   "id": "id172",
   "index": "a2",
   "isDeleted": false,
@@ -212,8 +212,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
       0,
     ],
     [
-      "101.77517",
-      "102.35417",
+      "102.80179",
+      "102.45605",
     ],
   ],
   "roughness": 1,
@@ -227,9 +227,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 40,
-  "width": "101.77517",
-  "x": "0.70711",
+  "version": 37,
+  "width": "102.80179",
+  "x": "-0.42182",
   "y": 0,
 }
 `;
@@ -264,7 +264,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
+  "version": 14,
   "width": 50,
   "x": 100,
   "y": 100,
@@ -291,22 +291,39 @@ History {
         "added": Map {},
         "removed": Map {},
         "updated": Map {
+          "id171" => Delta {
+            "deleted": {
+              "boundElements": [],
+            },
+            "inserted": {
+              "boundElements": [
+                {
+                  "id": "id172",
+                  "type": "arrow",
+                },
+              ],
+            },
+          },
           "id172" => Delta {
             "deleted": {
               "endBinding": {
-                "elementId": "id171",
-                "focus": "0.00990",
+                "elementId": "id175",
+                "fixedPoint": [
+                  "0.50000",
+                  1,
+                ],
+                "focus": 0,
                 "gap": 1,
               },
-              "height": "0.98586",
+              "height": "70.45017",
               "points": [
                 [
                   0,
                   0,
                 ],
                 [
-                  "98.58579",
-                  "-0.98586",
+                  "100.70774",
+                  "70.45017",
                 ],
               ],
               "startBinding": {
@@ -321,7 +338,7 @@ History {
                 "focus": "-0.02000",
                 "gap": 1,
               },
-              "height": "0.00000",
+              "height": "0.09250",
               "points": [
                 [
                   0,
@@ -329,7 +346,7 @@ History {
                 ],
                 [
                   "98.58579",
-                  "0.00000",
+                  "0.09250",
                 ],
               ],
               "startBinding": {
@@ -339,6 +356,19 @@ History {
               },
             },
           },
+          "id175" => Delta {
+            "deleted": {
+              "boundElements": [
+                {
+                  "id": "id172",
+                  "type": "arrow",
+                },
+              ],
+            },
+            "inserted": {
+              "boundElements": [],
+            },
+          },
         },
       },
     },
@@ -366,59 +396,32 @@ History {
               ],
             },
           },
-          "id171" => Delta {
-            "deleted": {
-              "boundElements": [],
-            },
-            "inserted": {
-              "boundElements": [
-                {
-                  "id": "id172",
-                  "type": "arrow",
-                },
-              ],
-            },
-          },
           "id172" => Delta {
             "deleted": {
-              "endBinding": {
-                "elementId": "id175",
-                "fixedPoint": [
-                  "0.50000",
-                  1,
-                ],
-                "focus": 0,
-                "gap": 1,
-              },
-              "height": "102.35417",
+              "height": "102.45584",
               "points": [
                 [
                   0,
                   0,
                 ],
                 [
-                  "101.77517",
-                  "102.35417",
+                  "102.79971",
+                  "102.45584",
                 ],
               ],
               "startBinding": null,
               "y": 0,
             },
             "inserted": {
-              "endBinding": {
-                "elementId": "id171",
-                "focus": "0.00990",
-                "gap": 1,
-              },
-              "height": "0.98586",
+              "height": "70.33521",
               "points": [
                 [
                   0,
                   0,
                 ],
                 [
-                  "98.58579",
-                  "-0.98586",
+                  "100.78887",
+                  "70.33521",
                 ],
               ],
               "startBinding": {
@@ -426,20 +429,7 @@ History {
                 "focus": "0.02970",
                 "gap": 1,
               },
-              "y": "0.99364",
-            },
-          },
-          "id175" => Delta {
-            "deleted": {
-              "boundElements": [
-                {
-                  "id": "id172",
-                  "type": "arrow",
-                },
-              ],
-            },
-            "inserted": {
-              "boundElements": [],
+              "y": "35.20327",
             },
           },
         },
@@ -739,7 +729,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 9,
+  "version": 19,
   "width": 100,
   "x": 150,
   "y": -50,
@@ -819,8 +809,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 30,
-  "width": 0,
+  "version": 33,
+  "width": 100,
   "x": "149.29289",
   "y": 0,
 }
@@ -846,20 +836,22 @@ History {
         "added": Map {},
         "removed": Map {},
         "updated": Map {
-          "id167" => Delta {
+          "id166" => Delta {
             "deleted": {
-              "points": [
-                [
-                  0,
-                  0,
-                ],
-                [
-                  0,
-                  0,
-                ],
-              ],
+              "boundElements": [],
             },
             "inserted": {
+              "boundElements": [
+                {
+                  "id": "id167",
+                  "type": "arrow",
+                },
+              ],
+            },
+          },
+          "id167" => Delta {
+            "deleted": {
+              "endBinding": null,
               "points": [
                 [
                   0,
@@ -871,6 +863,23 @@ History {
                 ],
               ],
             },
+            "inserted": {
+              "endBinding": {
+                "elementId": "id166",
+                "focus": -0,
+                "gap": 1,
+              },
+              "points": [
+                [
+                  0,
+                  0,
+                ],
+                [
+                  0,
+                  0,
+                ],
+              ],
+            },
           },
         },
       },
@@ -899,22 +908,8 @@ History {
               ],
             },
           },
-          "id166" => Delta {
-            "deleted": {
-              "boundElements": [],
-            },
-            "inserted": {
-              "boundElements": [
-                {
-                  "id": "id167",
-                  "type": "arrow",
-                },
-              ],
-            },
-          },
           "id167" => Delta {
             "deleted": {
-              "endBinding": null,
               "points": [
                 [
                   0,
@@ -928,18 +923,13 @@ History {
               "startBinding": null,
             },
             "inserted": {
-              "endBinding": {
-                "elementId": "id166",
-                "focus": -0,
-                "gap": 1,
-              },
               "points": [
                 [
                   0,
                   0,
                 ],
                 [
-                  0,
+                  100,
                   0,
                 ],
               ],

packages/excalidraw/types.ts

@@ -714,6 +714,7 @@ export type AppClassProperties = {
   excalidrawContainerValue: App["excalidrawContainerValue"];
 
   onPointerUpEmitter: App["onPointerUpEmitter"];
+  updateEditorAtom: App["updateEditorAtom"];
 };
 
 export type PointerDownState = Readonly<{

packages/excalidraw/wysiwyg/textWysiwyg.tsx

@@ -80,6 +80,8 @@ const getTransform = (
   return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
+type SubmitHandler = () => void;
+
 export const textWysiwyg = ({
   id,
   onChange,
@@ -106,7 +108,7 @@ export const textWysiwyg = ({
   excalidrawContainer: HTMLDivElement | null;
   app: App;
   autoSelect?: boolean;
-}) => {
+}): SubmitHandler => {
   const textPropertiesUpdated = (
     updatedTextElement: ExcalidrawTextElement,
     editable: HTMLTextAreaElement,
@@ -186,7 +188,6 @@ export const textWysiwyg = ({
         }
 
         maxWidth = getBoundTextMaxWidth(container, updatedTextElement);
-
         maxHeight = getBoundTextMaxHeight(
           container,
           updatedTextElement as ExcalidrawTextElementWithContainer,
@@ -735,4 +736,6 @@ export const textWysiwyg = ({
   excalidrawContainer
     ?.querySelector(".excalidraw-textEditorContainer")!
     .appendChild(editable);
+
+  return handleSubmit;
 };

packages/math/src/curve.ts

@@ -2,6 +2,7 @@ import type { Bounds } from "@excalidraw/element/bounds";
 
 import { isPoint, pointDistance, pointFrom } from "./point";
 import { rectangle, rectangleIntersectLineSegment } from "./rectangle";
+import { vector } from "./vector";
 
 import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
 
@@ -82,7 +83,7 @@ function solve(
   return [t0, s0];
 }
 
-const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
+export const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
   c: Curve<Point>,
   t: number,
 ) =>
@@ -274,6 +275,26 @@ export function isCurve<P extends GlobalPoint | LocalPoint>(
   );
 }
 
+export function curveTangent<Point extends GlobalPoint | LocalPoint>(
+  [p0, p1, p2, p3]: Curve<Point>,
+  t: number,
+) {
+  return vector(
+    -3 * (1 - t) * (1 - t) * p0[0] +
+      3 * (1 - t) * (1 - t) * p1[0] -
+      6 * t * (1 - t) * p1[0] -
+      3 * t * t * p2[0] +
+      6 * t * (1 - t) * p2[0] +
+      3 * t * t * p3[0],
+    -3 * (1 - t) * (1 - t) * p0[1] +
+      3 * (1 - t) * (1 - t) * p1[1] -
+      6 * t * (1 - t) * p1[1] -
+      3 * t * t * p2[1] +
+      6 * t * (1 - t) * p2[1] +
+      3 * t * t * p3[1],
+  );
+}
+
 function curveBounds<Point extends GlobalPoint | LocalPoint>(
   c: Curve<Point>,
 ): Bounds {

packages/math/src/vector.ts

@@ -143,3 +143,8 @@ export const vectorNormalize = (v: Vector): Vector => {
 
   return vector(v[0] / m, v[1] / m);
 };
+
+/**
+ * Calculate the right-hand normal of the vector.
+ */
+export const vectorNormal = (v: Vector): Vector => vector(v[1], -v[0]);