@excalidraw/excalidraw 0.17.1-88812e0 → 0.17.1-96eeec5

package/dist/excalidraw/element/textWysiwyg.js

@@ -23,7 +23,7 @@ const getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
     }
     return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
-export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }) => {
+export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect = true, }) => {
     const textPropertiesUpdated = (updatedTextElement, editable) => {
         if (!editable.style.fontFamily || !editable.style.fontSize) {
             return false;
@@ -53,8 +53,6 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
             let textElementWidth = updatedTextElement.width;
-            // Set to element height by default since that's
-            // what is going to be used for unbounded text
             const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
@@ -113,6 +111,9 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
                 textElementWidth = Math.min(textElementWidth, maxWidth);
             }
+            else {
+                textElementWidth += 0.5;
+            }
             // Make sure text editor height doesn't go beyond viewport
             const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
             Object.assign(editable.style, {
@@ -149,7 +150,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     editable.classList.add("excalidraw-wysiwyg");
     let whiteSpace = "pre";
     let wordBreak = "normal";
-    if (isBoundToContainer(element)) {
+    if (isBoundToContainer(element) || !element.autoResize) {
         whiteSpace = "pre-wrap";
         wordBreak = "break-word";
     }
@@ -326,6 +327,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     // so that we don't need to create separate a callback for event handlers
     let submittedViaKeyboard = false;
     const handleSubmit = () => {
+        // prevent double submit
+        if (isDestroyed) {
+            return;
+        }
+        isDestroyed = true;
         // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg
         // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
         // wysiwyg on update
@@ -334,10 +340,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         if (!updateElement) {
             return;
         }
-        let text = editable.value;
         const container = getContainerElement(updateElement, app.scene.getNonDeletedElementsMap());
         if (container) {
-            text = updateElement.text;
             if (editable.value.trim()) {
                 const boundTextElementId = getBoundTextElementId(container);
                 if (!boundTextElementId || boundTextElementId !== element.id) {
@@ -361,16 +365,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             redrawTextBoundingBox(updateElement, container, app.scene.getNonDeletedElementsMap());
         }
         onSubmit({
-            text,
             viaKeyboard: submittedViaKeyboard,
-            originalText: editable.value,
+            nextOriginalText: editable.value,
         });
     };
     const cleanup = () => {
-        if (isDestroyed) {
-            return;
-        }
-        isDestroyed = true;
         // remove events to ensure they don't late-fire
         editable.onblur = null;
         editable.oninput = null;
@@ -439,9 +438,24 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             // alt-tabbing away
             window.addEventListener("blur", handleSubmit);
         }
+        else if (event.target instanceof HTMLElement &&
+            !event.target.contains(editable) &&
+            // Vitest simply ignores stopPropagation, capture-mode, or rAF
+            // so without introducing crazier hacks, nothing we can do
+            !isTestEnv()) {
+            // On mobile, blur event doesn't seem to always fire correctly,
+            // so we want to also submit on pointerdown outside the wysiwyg.
+            // Done in the next frame to prevent pointerdown from creating a new text
+            // immediately (if tools locked) so that users on mobile have chance
+            // to submit first (to hide virtual keyboard).
+            // Note: revisit if we want to differ this behavior on Desktop
+            requestAnimationFrame(() => {
+                handleSubmit();
+            });
+        }
     };
     // handle updates of textElement properties of editing element
-    const unbindUpdate = Scene.getScene(element).addCallback(() => {
+    const unbindUpdate = Scene.getScene(element).onUpdate(() => {
         updateWysiwygStyle();
         const isColorPickerActive = !!document.activeElement?.closest(".color-picker-content");
         if (!isColorPickerActive) {
@@ -450,9 +464,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     });
     // ---------------------------------------------------------------------------
     let isDestroyed = false;
-    // select on init (focusing is done separately inside the bindBlurEvent()
-    // because we need it to happen *after* the blur event from `pointerdown`)
-    editable.select();
+    if (autoSelect) {
+        // select on init (focusing is done separately inside the bindBlurEvent()
+        // because we need it to happen *after* the blur event from `pointerdown`)
+        editable.select();
+    }
     bindBlurEvent();
     // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
     // is preferred so we catch changes from host, where window may not resize.
@@ -466,7 +482,12 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     else {
         window.addEventListener("resize", updateWysiwygStyle);
     }
-    window.addEventListener("pointerdown", onPointerDown);
+    editable.onpointerdown = (event) => event.stopPropagation();
+    // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that
+    // triggered the wysiwyg
+    requestAnimationFrame(() => {
+        window.addEventListener("pointerdown", onPointerDown, { capture: true });
+    });
     window.addEventListener("wheel", stopEvent, {
         passive: false,
         capture: true,

package/dist/excalidraw/element/transformHandles.d.ts

@@ -1,6 +1,6 @@
-import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
-import { Bounds } from "./bounds";
-import { Device, InteractiveCanvasAppState, Zoom } from "../types";
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
+import type { Bounds } from "./bounds";
+import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
 export type TransformHandleType = TransformHandleDirection | "rotation";
 export type TransformHandle = Bounds;

package/dist/excalidraw/element/transformHandles.js

@@ -1,6 +1,5 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
@@ -28,12 +27,6 @@ export const OMIT_SIDES_FOR_FRAME = {
     w: true,
     rotation: true,
 };
-const OMIT_SIDES_FOR_TEXT_ELEMENT = {
-    e: true,
-    s: true,
-    n: true,
-    w: true,
-};
 const OMIT_SIDES_FOR_LINE_SLASH = {
     e: true,
     s: true,
@@ -147,9 +140,6 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
             }
         }
     }
-    else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-    }
     else if (isFrameLikeElement(element)) {
         omitSides = {
             ...omitSides,

package/dist/excalidraw/element/typeChecks.d.ts

@@ -1,6 +1,6 @@
-import { ElementOrToolType } from "../types";
-import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement } from "./types";
+import type { ElementOrToolType } from "../types";
+import type { MarkNonNullable } from "../utility-types";
+import type { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement } from "./types";
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
 export declare const isEmbeddableElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawEmbeddableElement;
@@ -17,7 +17,7 @@ export declare const isArrowElement: (element?: ExcalidrawElement | null) => ele
 export declare const isLinearElementType: (elementType: ElementOrToolType) => boolean;
 export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
 export declare const isBindingElementType: (elementType: ElementOrToolType) => boolean;
-export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
+export declare const isBindableElement: (element: ExcalidrawElement | null | undefined, includeLocked?: boolean) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => element is ExcalidrawElement;
 export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is MarkNonNullable<ExcalidrawBindableElement, "boundElements">;

package/dist/excalidraw/element/types.d.ts

@@ -1,7 +1,7 @@
-import { Point } from "../types";
-import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
-import { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
-import { MagicCacheData } from "../data/magic";
+import type { Point } from "../types";
+import type { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
+import type { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
+import type { MagicCacheData } from "../data/magic";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -154,6 +154,13 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
     originalText: string;
+    /**
+     * If `true` the width will fit the text. If `false`, the text will
+     * wrap to fit the width.
+     *
+     * @default true
+     */
+    autoResize: boolean;
     /**
      * Unitless line height (aligned to W3C). To get line height in px, multiply
      *  with font size (using `getLineHeightInPx` helper).

package/dist/excalidraw/emitter.d.ts

@@ -1,4 +1,4 @@
-import { UnsubscribeCallback } from "./types";
+import type { UnsubscribeCallback } from "./types";
 type Subscriber<T extends any[]> = (...payload: T) => void;
 export declare class Emitter<T extends any[] = []> {
     subscribers: Subscriber<T>[];

package/dist/excalidraw/fractionalIndex.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
 /**
  * Envisioned relation between array order and fractional indices:
  *

package/dist/excalidraw/fractionalIndex.js

@@ -97,12 +97,10 @@ const getMovedIndicesGroups = (elements, movedElements) => {
     const indicesGroups = [];
     let i = 0;
     while (i < elements.length) {
-        if (movedElements.has(elements[i].id) &&
-            !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index)) {
+        if (movedElements.has(elements[i].id)) {
             const indicesGroup = [i - 1, i]; // push the lower bound index as the first item
             while (++i < elements.length) {
-                if (!(movedElements.has(elements[i].id) &&
-                    !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index))) {
+                if (!movedElements.has(elements[i].id)) {
                     break;
                 }
                 indicesGroup.push(i);

package/dist/excalidraw/frame.d.ts

@@ -1,7 +1,7 @@
-import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
-import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
+import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import type { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
-import { ReadonlySetLike } from "./utility-types";
+import type { ReadonlySetLike } from "./utility-types";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap): boolean;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];

package/dist/excalidraw/gatransforms.d.ts

@@ -1,4 +1,4 @@
-import { Line, Direction, Point } from "./ga";
+import type { Line, Direction, Point } from "./ga";
 /**
  * TODO: docs
  */

package/dist/excalidraw/gesture.d.ts

@@ -1,4 +1,4 @@
-import { PointerCoords } from "./types";
+import type { PointerCoords } from "./types";
 export declare const getCenter: (pointers: Map<number, PointerCoords>) => {
     x: number;
     y: number;

package/dist/excalidraw/groups.d.ts

@@ -1,6 +1,6 @@
-import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ElementsMapOrArray, ElementsMap } from "./element/types";
-import { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
-import { Mutable } from "./utility-types";
+import type { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ElementsMapOrArray, ElementsMap } from "./element/types";
+import type { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
+import type { Mutable } from "./utility-types";
 export declare const selectGroup: (groupId: GroupId, appState: InteractiveCanvasAppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => Pick<InteractiveCanvasAppState, "selectedGroupIds" | "selectedElementIds" | "editingGroupId">;
 export declare const selectGroupsForSelectedElements: {
     (appState: Pick<AppState, "selectedElementIds" | "editingGroupId">, elements: readonly NonDeletedExcalidrawElement[], prevAppState: InteractiveCanvasAppState, app: AppClassProperties | null): Mutable<Pick<InteractiveCanvasAppState, "selectedGroupIds" | "editingGroupId" | "selectedElementIds">>;
@@ -29,5 +29,5 @@ export declare const removeFromSelectedGroups: (groupIds: ExcalidrawElement["gro
 }) => string[];
 export declare const getMaximumGroups: (elements: ExcalidrawElement[], elementsMap: ElementsMap) => ExcalidrawElement[][];
 export declare const getNonDeletedGroupIds: (elements: ElementsMap) => Set<string>;
-export declare const elementsAreInSameGroup: (elements: ExcalidrawElement[]) => boolean;
+export declare const elementsAreInSameGroup: (elements: readonly ExcalidrawElement[]) => boolean;
 export declare const isInGroup: (element: NonDeletedExcalidrawElement) => boolean;

package/dist/excalidraw/history.d.ts

@@ -1,8 +1,8 @@
-import { AppStateChange, ElementsChange } from "./change";
-import { SceneElementsMap } from "./element/types";
+import type { AppStateChange, ElementsChange } from "./change";
+import type { SceneElementsMap } from "./element/types";
 import { Emitter } from "./emitter";
-import { Snapshot } from "./store";
-import { AppState } from "./types";
+import type { Snapshot } from "./store";
+import type { AppState } from "./types";
 export declare class HistoryChangedEvent {
     readonly isUndoStackEmpty: boolean;
     readonly isRedoStackEmpty: boolean;

package/dist/excalidraw/hooks/useEmitter.d.ts

@@ -1,2 +1,2 @@
-import { Emitter } from "../emitter";
+import type { Emitter } from "../emitter";
 export declare const useEmitter: <TEvent extends unknown>(emitter: Emitter<[TEvent]>, initialState: TEvent) => TEvent;

package/dist/excalidraw/hooks/useLibraryItemSvg.d.ts

@@ -1,4 +1,4 @@
-import { LibraryItem } from "../types";
+import type { LibraryItem } from "../types";
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 export declare const libraryItemSvgsCache: import("jotai").PrimitiveAtom<SvgCache> & {
     init: SvgCache;

package/dist/excalidraw/i18n.d.ts

@@ -1,5 +1,5 @@
 import fallbackLangData from "./locales/en.json";
-import { NestedKeyOf } from "./utility-types";
+import type { NestedKeyOf } from "./utility-types";
 export interface Language {
     code: string;
     label: string;

package/dist/excalidraw/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./css/app.scss";
 import "./css/styles.scss";
 import "../../public/fonts/fonts.css";
-import { ExcalidrawProps } from "./types";
+import type { ExcalidrawProps } from "./types";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";

package/dist/excalidraw/jotai.d.ts

@@ -1,4 +1,4 @@
-import { PrimitiveAtom } from "jotai";
+import type { PrimitiveAtom } from "jotai";
 export declare const jotaiScope: unique symbol;
 export declare const jotaiStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Awaited<Value> | undefined;

package/dist/excalidraw/laser-trails.d.ts

@@ -1,5 +1,6 @@
-import { AnimatedTrail, Trail } from "./animated-trail";
-import { AnimationFrameHandler } from "./animation-frame-handler";
+import type { Trail } from "./animated-trail";
+import { AnimatedTrail } from "./animated-trail";
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 export declare class LaserTrails implements Trail {
     private animationFrameHandler;

package/dist/excalidraw/locales/en.json

@@ -129,7 +129,7 @@
         },
         "lineEditor": {
             "edit": "Edit line",
-            "exit": "Exit line editor"
+            "editArrow": "Edit arrow"
         },
         "elementLock": {
             "lock": "Lock",
@@ -148,7 +148,9 @@
         "discordChat": "Discord chat",
         "zoomToFitViewport": "Zoom to fit in viewport",
         "zoomToFitSelection": "Zoom to fit selection",
-        "zoomToFit": "Zoom to fit all elements"
+        "zoomToFit": "Zoom to fit all elements",
+        "installPWA": "Install Excalidraw locally (PWA)",
+        "autoResize": "Enable text auto-resizing"
     },
     "library": {
         "noItems": "No items added yet...",
@@ -268,6 +270,22 @@
         "mermaidToExcalidraw": "Mermaid to Excalidraw",
         "magicSettings": "AI settings"
     },
+    "element": {
+        "rectangle": "Rectangle",
+        "diamond": "Diamond",
+        "ellipse": "Ellipse",
+        "arrow": "Arrow",
+        "line": "Line",
+        "freedraw": "Freedraw",
+        "text": "Text",
+        "image": "Image",
+        "group": "Group",
+        "frame": "Frame",
+        "magicframe": "Wireframe to code",
+        "embeddable": "Web Embed",
+        "selection": "Selection",
+        "iframe": "IFrame"
+    },
     "headings": {
         "canvasActions": "Canvas actions",
         "selectedShapeActions": "Selected shape actions",
@@ -441,7 +459,10 @@
         "scene": "Scene",
         "selected": "Selected",
         "storage": "Storage",
-        "title": "Stats for nerds",
+        "fullTitle": "Stats & Element properties",
+        "title": "Stats",
+        "generalStats": "General stats",
+        "elementProperties": "Element properties",
         "total": "Total",
         "version": "Version",
         "versionCopy": "Click to copy",

package/dist/excalidraw/math.d.ts

@@ -1,5 +1,5 @@
-import { Point, Zoom } from "./types";
-import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import type { Point, Zoom } from "./types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x: number, y: number, cx: number, cy: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {
@@ -28,6 +28,8 @@ export declare const getBezierCurveLength: (element: NonDeleted<ExcalidrawLinear
 export declare const mapIntervalToBezierT: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number], interval: number) => number;
 export declare const arePointsEqual: (p1: readonly [number, number], p2: readonly [number, number]) => boolean;
 export declare const isRightAngle: (angle: number) => boolean;
+export declare const radianToDegree: (r: number) => number;
+export declare const degreeToRadian: (d: number) => number;
 export declare const rangesOverlap: ([a0, a1]: [number, number], [b0, b1]: [number, number]) => boolean;
 export declare const rangeIntersection: (rangeA: [number, number], rangeB: [number, number]) => [number, number] | null;
 export declare const isValueInRange: (value: number, min: number, max: number) => boolean;

package/dist/excalidraw/math.js

@@ -338,6 +338,12 @@ export const isRightAngle = (angle) => {
     // angle, which we can check with modulo after rounding.
     return Math.round((angle / Math.PI) * 10000) % 5000 === 0;
 };
+export const radianToDegree = (r) => {
+    return (r * 180) / Math.PI;
+};
+export const degreeToRadian = (d) => {
+    return (d / 180) * Math.PI;
+};
 // Given two ranges, return if the two ranges overlap with each other
 // e.g. [1, 3] overlaps with [2, 4] while [1, 3] does not overlap with [4, 5]
 export const rangesOverlap = ([a0, a1], [b0, b1]) => {

package/dist/excalidraw/mermaid.d.ts

@@ -0,0 +1,2 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export declare const isMaybeMermaidDefinition: (text: string) => boolean;

package/dist/excalidraw/mermaid.js

@@ -0,0 +1,28 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export const isMaybeMermaidDefinition = (text) => {
+    const chartTypes = [
+        "flowchart",
+        "sequenceDiagram",
+        "classDiagram",
+        "stateDiagram",
+        "stateDiagram-v2",
+        "erDiagram",
+        "journey",
+        "gantt",
+        "pie",
+        "quadrantChart",
+        "requirementDiagram",
+        "gitGraph",
+        "C4Context",
+        "mindmap",
+        "timeline",
+        "zenuml",
+        "sankey",
+        "xychart",
+        "block",
+    ];
+    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
+        .map((x) => `${x}(-beta)?`)
+        .join("|")}\\b`);
+    return re.test(text.trim());
+};

package/dist/excalidraw/points.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "./types";
+import type { Point } from "./types";
 export declare const getSizeFromPoints: (points: readonly Point[]) => {
     width: number;
     height: number;

package/dist/excalidraw/queue.d.ts

@@ -1,4 +1,4 @@
-import { MaybePromise } from "./utility-types";
+import type { MaybePromise } from "./utility-types";
 type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
 export declare class Queue {
     private jobs;

package/dist/excalidraw/renderer/helpers.d.ts

@@ -1,5 +1,5 @@
-import { StaticCanvasAppState, AppState } from "../types";
-import { StaticCanvasRenderConfig } from "../scene/types";
+import type { StaticCanvasAppState, AppState } from "../types";
+import type { StaticCanvasRenderConfig } from "../scene/types";
 export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke?: boolean) => void;
 export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
 export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {

package/dist/excalidraw/renderer/interactiveScene.d.ts

@@ -1,4 +1,4 @@
-import { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderInteractiveSceneThrottled: {
     (config: InteractiveSceneRenderConfig): void;
@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
-export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;

package/dist/excalidraw/renderer/interactiveScene.js

@@ -8,11 +8,11 @@ import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transf
 import { arrayToMap, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap, } from "../element/binding";
+import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
-import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -124,10 +124,11 @@ const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBindin
         fillCircle(context, x, y, threshold);
     });
 };
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+const renderSelectionBorder = (context, appState, elementProperties) => {
     const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
     const elementWidth = elementX2 - elementX1;
     const elementHeight = elementY2 - elementY1;
+    const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
     const linePadding = padding / appState.zoom.value;
     const lineWidth = 8 / appState.zoom.value;
     const spaceWidth = 4 / appState.zoom.value;
@@ -264,7 +265,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }) => {
+const renderTextBox = (text, context, appState, selectionColor) => {
+    context.save();
+    const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+    const width = text.width + padding * 2;
+    const height = text.height + padding * 2;
+    const cx = text.x + width / 2;
+    const cy = text.y + height / 2;
+    const shiftX = -(width / 2 + padding);
+    const shiftY = -(height / 2 + padding);
+    context.translate(cx + appState.scrollX, cy + appState.scrollY);
+    context.rotate(text.angle);
+    context.lineWidth = 1 / appState.zoom.value;
+    context.strokeStyle = selectionColor;
+    context.strokeRect(shiftX, shiftY, width, height);
+    context.restore();
+};
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -295,12 +312,18 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     // Paint selection element
     if (appState.selectionElement) {
         try {
-            renderSelectionElement(appState.selectionElement, context, appState);
+            renderSelectionElement(appState.selectionElement, context, appState, renderConfig.selectionColor);
         }
         catch (error) {
             console.error(error);
         }
     }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        const textElement = allElementsMap.get(appState.editingElement.id);
+        if (textElement && !textElement.autoResize) {
+            renderTextBox(textElement, context, appState, renderConfig.selectionColor);
+        }
+    }
     if (appState.isBindingEnabled) {
         appState.suggestedBindings
             .filter((binding) => binding != null)
@@ -405,7 +428,10 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.fillStyle = oc.white;
             const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse", // when we render we don't know which pointer type so use mouse,
             getOmitSidesForDevice(device));
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            if (!appState.viewModeEnabled &&
+                showBoundingBox &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }

package/dist/excalidraw/renderer/renderElement.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
-import { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
+import type { StaticCanvasRenderConfig, RenderableElementsMap, InteractiveCanvasRenderConfig } from "../scene/types";
+import type { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
 export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure) => number;
 export interface ExcalidrawElementWithCanvas {
@@ -17,7 +17,7 @@ export interface ExcalidrawElementWithCanvas {
 }
 export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
-export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
+export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => void;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;