@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-22b3927

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

@@ -1,9 +1,9 @@
-import { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
-import { MaybeTransformHandleType } from "./transformHandles";
-import { AppState } from "../types";
-import { ExtractSetType, MakeBrand } from "../utility-types";
+import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
+import type { MaybeTransformHandleType } from "./transformHandles";
+import type { AppState } from "../types";
+import type { ExtractSetType, MakeBrand } from "../utility-types";
 export declare const normalizeText: (text: string) => string;
-export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap) => void;
+export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap, informMutation?: boolean) => void;
 export declare const bindTextToShapeAfterDuplication: (newElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleType: MaybeTransformHandleType, shouldMaintainAspectRatio?: boolean) => void;
 export declare const computeBoundTextPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer, elementsMap: ElementsMap) => {
@@ -61,7 +61,6 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
 } | undefined;
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
 export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
-export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
 declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
     type: ExcalidrawElementType;
@@ -88,4 +87,5 @@ export declare const FONT_METRICS: Record<number, {
 export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
     _brand: "unitlessLineHeight";
 };
+export declare const getMinTextElementWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export {};

package/dist/excalidraw/element/textElement.js

@@ -4,10 +4,6 @@ import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, B
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
-import { isTextBindableContainer } from "./typeChecks";
-import { getElementAbsoluteCoords } from ".";
-import { getSelectedElements } from "../scene";
-import { isHittingElementNotConsideringBoundingBox } from "./collision";
 import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 export const normalizeText = (text) => {
     return (normalizeEOL(text)
@@ -17,7 +13,7 @@ export const normalizeText = (text) => {
 const splitIntoLines = (text) => {
     return normalizeText(text).split("\n");
 };
-export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
+export const redrawTextBoundingBox = (textElement, container, elementsMap, informMutation = true) => {
     let maxWidth = undefined;
     const boundTextUpdates = {
         x: textElement.x,
@@ -25,26 +21,32 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         text: textElement.text,
         width: textElement.width,
         height: textElement.height,
+        angle: container?.angle ?? textElement.angle,
     };
     boundTextUpdates.text = textElement.text;
-    if (container) {
-        maxWidth = getBoundTextMaxWidth(container, textElement);
+    if (container || !textElement.autoResize) {
+        maxWidth = container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width;
         boundTextUpdates.text = wrapText(textElement.originalText, getFontString(textElement), maxWidth);
     }
     const metrics = measureText(boundTextUpdates.text, getFontString(textElement), textElement.lineHeight);
-    boundTextUpdates.width = metrics.width;
+    // Note: only update width for unwrapped text and bound texts (which always have autoResize set to true)
+    if (textElement.autoResize) {
+        boundTextUpdates.width = metrics.width;
+    }
     boundTextUpdates.height = metrics.height;
     if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(container, textElement);
         const maxContainerWidth = getBoundTextMaxWidth(container, textElement);
         if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
             const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type);
-            mutateElement(container, { height: nextHeight });
+            mutateElement(container, { height: nextHeight }, informMutation);
             updateOriginalContainerCache(container.id, nextHeight);
         }
         if (metrics.width > maxContainerWidth) {
             const nextWidth = computeContainerDimensionForBoundText(metrics.width, container.type);
-            mutateElement(container, { width: nextWidth });
+            mutateElement(container, { width: nextWidth }, informMutation);
         }
         const updatedTextElement = {
             ...textElement,
@@ -54,7 +56,7 @@ export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
         boundTextUpdates.x = x;
         boundTextUpdates.y = y;
     }
-    mutateElement(textElement, boundTextUpdates);
+    mutateElement(textElement, boundTextUpdates, informMutation);
 };
 export const bindTextToShapeAfterDuplication = (newElements, oldElements, oldIdToDuplicatedId) => {
     const newElementsMap = arrayToMap(newElements);
@@ -540,32 +542,6 @@ export const suppportsHorizontalAlign = (selectedElements, elementsMap) => {
         return isTextElement(element);
     });
 };
-export const getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    if (selectedElements.length === 1) {
-        return isTextBindableContainer(selectedElements[0], false)
-            ? selectedElements[0]
-            : null;
-    }
-    let hitElement = null;
-    // We need to to hit testing from front (end of the array) to back (beginning of the array)
-    for (let index = elements.length - 1; index >= 0; --index) {
-        if (elements[index].isDeleted) {
-            continue;
-        }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], elementsMap);
-        if (isArrowElement(elements[index]) &&
-            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y], elementsMap)) {
-            hitElement = elements[index];
-            break;
-        }
-        else if (x1 < x && x < x2 && y1 < y && y < y2) {
-            hitElement = elements[index];
-            break;
-        }
-    }
-    return isTextBindableContainer(hitElement, false) ? hitElement : null;
-};
 const VALID_CONTAINER_TYPES = new Set([
     "rectangle",
     "ellipse",
@@ -690,3 +666,6 @@ export const getDefaultLineHeight = (fontFamily) => {
     }
     return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
+export const getMinTextElementWidth = (font, lineHeight) => {
+    return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
+};

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

@@ -1,16 +1,22 @@
-import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
-import App from "../components/App";
-export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
+import type { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+import type App from "../components/App";
+export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, }: {
     id: ExcalidrawElement["id"];
-    onChange?: ((text: string) => void) | undefined;
+    /**
+     * textWysiwyg only deals with `originalText`
+     *
+     * Note: `text`, which can be wrapped and therefore different from `originalText`,
+     *       is derived from `originalText`
+     */
+    onChange?: ((nextOriginalText: string) => void) | undefined;
     onSubmit: (data: {
-        text: string;
         viaKeyboard: boolean;
-        originalText: string;
+        nextOriginalText: string;
     }) => void;
     getViewportCoords: (x: number, y: number) => [number, number];
     element: ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
     excalidrawContainer: HTMLDivElement | null;
     app: App;
+    autoSelect?: boolean | undefined;
 }) => void;

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 { 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;
@@ -8,6 +8,12 @@ export type TransformHandles = Partial<{
     [T in TransformHandleType]: TransformHandle;
 }>;
 export type MaybeTransformHandleType = TransformHandleType | false;
+export declare const DEFAULT_OMIT_SIDES: {
+    e: boolean;
+    s: boolean;
+    n: boolean;
+    w: boolean;
+};
 export declare const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS: {
     e: boolean;
     s: boolean;
@@ -21,16 +27,28 @@ export declare const OMIT_SIDES_FOR_FRAME: {
     w: boolean;
     rotation: boolean;
 };
+export declare const canResizeFromSides: (device: Device) => boolean;
+export declare const getOmitSidesForDevice: (device: Device) => {};
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
-    n?: boolean | undefined;
-    w?: boolean | undefined;
     e?: boolean | undefined;
+    w?: boolean | undefined;
+    n?: boolean | undefined;
     nw?: boolean | undefined;
     ne?: boolean | undefined;
     sw?: boolean | undefined;
     se?: boolean | undefined;
     rotation?: boolean | undefined;
 }, margin?: number) => TransformHandles;
-export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType) => TransformHandles;
+export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType, omitSides?: {
+    s?: boolean | undefined;
+    e?: boolean | undefined;
+    w?: boolean | undefined;
+    n?: boolean | undefined;
+    nw?: boolean | undefined;
+    ne?: boolean | undefined;
+    sw?: boolean | undefined;
+    se?: boolean | undefined;
+    rotation?: boolean | undefined;
+}) => TransformHandles;
 export declare const shouldShowBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState) => boolean;

package/dist/excalidraw/element/transformHandles.js

@@ -1,32 +1,31 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
-import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "../constants";
+import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
     mouse: 8,
     pen: 16,
     touch: 28,
 };
 const ROTATION_RESIZE_HANDLE_GAP = 16;
-export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
+export const DEFAULT_OMIT_SIDES = {
     e: true,
     s: true,
     n: true,
     w: true,
 };
-export const OMIT_SIDES_FOR_FRAME = {
+export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
     e: true,
     s: true,
     n: true,
     w: true,
-    rotation: true,
 };
-const OMIT_SIDES_FOR_TEXT_ELEMENT = {
+export const OMIT_SIDES_FOR_FRAME = {
     e: true,
     s: true,
     n: true,
     w: true,
+    rotation: true,
 };
 const OMIT_SIDES_FOR_LINE_SLASH = {
     e: true,
@@ -46,6 +45,21 @@ const generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
     const [xx, yy] = rotate(x + width / 2, y + height / 2, cx, cy, angle);
     return [xx - width / 2, yy - height / 2, width, height];
 };
+export const canResizeFromSides = (device) => {
+    if (device.viewport.isMobile) {
+        return false;
+    }
+    if (device.isTouchScreen && (isAndroid || isIOS)) {
+        return false;
+    }
+    return true;
+};
+export const getOmitSidesForDevice = (device) => {
+    if (canResizeFromSides(device)) {
+        return DEFAULT_OMIT_SIDES;
+    }
+    return {};
+};
 export const getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, pointerType, omitSides = {}, margin = 4) => {
     const size = transformHandleSizes[pointerType];
     const handleWidth = size / zoom.value;
@@ -98,14 +112,13 @@ export const getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, z
     }
     return transformHandles;
 };
-export const getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse") => {
+export const getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse", omitSides = DEFAULT_OMIT_SIDES) => {
     // so that when locked element is selected (especially when you toggle lock
     // via keyboard) the locked element is visually distinct, indicating
     // you can't move/resize
     if (element.locked) {
         return {};
     }
-    let omitSides = {};
     if (element.type === "freedraw" || isLinearElement(element)) {
         if (element.points.length === 2) {
             // only check the last point because starting point is always (0,0)
@@ -127,11 +140,9 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
             }
         }
     }
-    else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-    }
     else if (isFrameLikeElement(element)) {
         omitSides = {
+            ...omitSides,
             rotation: true,
         };
     }

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 } 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;
@@ -13,7 +13,7 @@ export declare const isFrameLikeElement: (element: ExcalidrawElement | null) =>
 export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) => element is ExcalidrawFreeDrawElement;
 export declare const isFreeDrawElementType: (elementType: ExcalidrawElementType) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
-export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
+export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawArrowElement;
 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;

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;
@@ -18,6 +18,13 @@ export type StrokeStyle = "solid" | "dashed" | "dotted";
 export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
 type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
 export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
+export type FractionalIndex = string & {
+    _brand: "franctionalIndex";
+};
+export type BoundElement = Readonly<{
+    id: ExcalidrawLinearElement["id"];
+    type: "arrow" | "text";
+}>;
 type _ExcalidrawElementBase = Readonly<{
     id: string;
     x: number;
@@ -46,16 +53,18 @@ type _ExcalidrawElementBase = Readonly<{
         Used for deterministic reconciliation of updates during collaboration,
         in case the versions (see above) are identical. */
     versionNonce: number;
+    /** String in a fractional form defined by https://github.com/rocicorp/fractional-indexing.
+        Used for ordering in multiplayer scenarios, such as during reconciliation or undo / redo.
+        Always kept in sync with the array order by `syncMovedIndices` and `syncInvalidIndices`.
+        Could be null, i.e. for new elements which were not yet assigned to the scene. */
+    index: FractionalIndex | null;
     isDeleted: boolean;
     /** List of groups the element belongs to.
         Ordered from deepest to shallowest. */
     groupIds: readonly GroupId[];
     frameId: string | null;
     /** other elements that are bound to this element */
-    boundElements: readonly Readonly<{
-        id: ExcalidrawLinearElement["id"];
-        type: "arrow" | "text";
-    }>[] | null;
+    boundElements: readonly BoundElement[] | null;
     /** epoch (ms) timestamp of last element update */
     updated: number;
     link: string | null;
@@ -90,6 +99,9 @@ export type IframeData = ({
         h: number;
     };
     error?: Error;
+    sandbox?: {
+        allowSameOrigin?: boolean;
+    };
 } & ({
     type: "video" | "generic";
     link: string;
@@ -125,6 +137,10 @@ export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRe
  * between peers and contain no state local to the peer.
  */
 export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement | ExcalidrawMagicFrameElement | ExcalidrawIframeElement | ExcalidrawEmbeddableElement;
+export type Ordered<TElement extends ExcalidrawElement> = TElement & {
+    index: FractionalIndex;
+};
+export type OrderedExcalidrawElement = Ordered<ExcalidrawElement>;
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
     isDeleted: boolean;
 };
@@ -138,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).
@@ -195,11 +218,11 @@ export type NonDeletedElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcal
  * Map of all excalidraw Scene elements, including deleted.
  * Not a subset. Use this type when you need access to current Scene elements.
  */
-export type SceneElementsMap = Map<ExcalidrawElement["id"], ExcalidrawElement> & MakeBrand<"SceneElementsMap">;
+export type SceneElementsMap = Map<ExcalidrawElement["id"], Ordered<ExcalidrawElement>> & MakeBrand<"SceneElementsMap">;
 /**
  * Map of all non-deleted Scene elements.
  * Not a subset. Use this type when you need access to current Scene elements.
  */
-export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcalidrawElement> & MakeBrand<"NonDeletedSceneElementsMap">;
+export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], Ordered<NonDeletedExcalidrawElement>> & MakeBrand<"NonDeletedSceneElementsMap">;
 export type ElementsMapOrArray = readonly ExcalidrawElement[] | Readonly<ElementsMap>;
 export {};

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/errors.d.ts

@@ -10,4 +10,7 @@ export declare class ImageSceneDataError extends Error {
     code: ImageSceneDataErrorCode;
     constructor(message?: string, code?: ImageSceneDataErrorCode);
 }
+export declare class InvalidFractionalIndexError extends Error {
+    code: "ELEMENT_HAS_INVALID_INDEX";
+}
 export {};

package/dist/excalidraw/errors.js

@@ -18,3 +18,6 @@ export class ImageSceneDataError extends Error {
         this.code = code;
     }
 }
+export class InvalidFractionalIndexError extends Error {
+    code = "ELEMENT_HAS_INVALID_INDEX";
+}

package/dist/excalidraw/fractionalIndex.d.ts

@@ -0,0 +1,40 @@
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
+/**
+ * Envisioned relation between array order and fractional indices:
+ *
+ * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
+ * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
+ * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
+ * - it's necessary to always keep the fractional indices in sync with the array order
+ * - elements with invalid indices should be detected and synced, without altering the already valid indices
+ *
+ * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
+ *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
+ */
+/**
+ * Ensure that all elements have valid fractional indices.
+ *
+ * @throws `InvalidFractionalIndexError` if invalid index is detected.
+ */
+export declare const validateFractionalIndices: (indices: (ExcalidrawElement["index"] | undefined)[]) => void;
+/**
+ * Order the elements based on the fractional indices.
+ * - when fractional indices are identical, break the tie based on the element id
+ * - when there is no fractional index in one of the elements, respect the order of the array
+ */
+export declare const orderByFractionalIndex: (elements: OrderedExcalidrawElement[]) => OrderedExcalidrawElement[];
+/**
+ * Synchronizes invalid fractional indices of moved elements with the array order by mutating passed elements.
+ * If the synchronization fails or the result is invalid, it fallbacks to `syncInvalidIndices`.
+ */
+export declare const syncMovedIndices: (elements: readonly ExcalidrawElement[], movedElements: Map<string, ExcalidrawElement>) => OrderedExcalidrawElement[];
+/**
+ * Synchronizes all invalid fractional indices with the array order by mutating passed elements.
+ *
+ * WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.
+ */
+export declare const syncInvalidIndices: (elements: readonly ExcalidrawElement[]) => OrderedExcalidrawElement[];