@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/components/Stats/utils.d.ts

@@ -0,0 +1,26 @@
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+export type StatsInputProperty = "x" | "y" | "width" | "height" | "angle" | "fontSize";
+export declare const SMALLEST_DELTA = 0.01;
+export declare const isPropertyEditable: (element: ExcalidrawElement, property: keyof ExcalidrawElement) => boolean;
+export declare const getStepSizedValue: (value: number, stepSize: number) => number;
+export type AtomicUnit = Record<string, true>;
+export declare const getElementsInAtomicUnit: (atomicUnit: AtomicUnit, elementsMap: ElementsMap, originalElementsMap?: ElementsMap) => {
+    original: NonDeletedExcalidrawElement;
+    latest: NonDeletedExcalidrawElement;
+}[];
+export declare const newOrigin: (x1: number, y1: number, w1: number, h1: number, w2: number, h2: number, angle: number) => {
+    x: number;
+    y: number;
+};
+export declare const resizeElement: (nextWidth: number, nextHeight: number, keepAspectRatio: boolean, origElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, shouldInformMutation?: boolean) => void;
+export declare const moveElement: (newTopLeftX: number, newTopLeftY: number, originalElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, originalElementsMap: ElementsMap, shouldInformMutation?: boolean) => void;
+export declare const getAtomicUnits: (targetElements: readonly ExcalidrawElement[], appState: AppState) => AtomicUnit[];
+export declare const updateBindings: (latestElement: ExcalidrawElement, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, options?: {
+    simultaneouslyUpdated?: readonly ExcalidrawElement[];
+    newSize?: {
+        width: number;
+        height: number;
+    };
+}) => void;

package/dist/excalidraw/components/Stats/utils.js

@@ -0,0 +1,162 @@
+import { bindOrUnbindLinearElements, updateBoundElements, } from "../../element/binding";
+import { mutateElement } from "../../element/mutateElement";
+import { measureFontSizeFromWidth, rescalePointsInElement, } from "../../element/resizeElements";
+import { getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getBoundTextMaxWidth, handleBindTextResize, } from "../../element/textElement";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../../element/typeChecks";
+import { getSelectedGroupIds, getElementsInGroup, isInGroup, } from "../../groups";
+import { rotate } from "../../math";
+import { getFontString } from "../../utils";
+export const SMALLEST_DELTA = 0.01;
+export const isPropertyEditable = (element, property) => {
+    if (property === "height" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "width" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "angle" && isFrameLikeElement(element)) {
+        return false;
+    }
+    return true;
+};
+export const getStepSizedValue = (value, stepSize) => {
+    const v = value + stepSize / 2;
+    return v - (v % stepSize);
+};
+export const getElementsInAtomicUnit = (atomicUnit, elementsMap, originalElementsMap) => {
+    return Object.keys(atomicUnit)
+        .map((id) => ({
+        original: (originalElementsMap ?? elementsMap).get(id),
+        latest: elementsMap.get(id),
+    }))
+        .filter((el) => el.original !== undefined && el.latest !== undefined);
+};
+export const newOrigin = (x1, y1, w1, h1, w2, h2, angle) => {
+    /**
+     * The formula below is the result of solving
+     *   rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
+     * where rotate is the function defined in math.ts
+     *
+     * This is so that the new origin (x2, y2),
+     * when rotated against the new center (cx2, cy2),
+     * coincides with (x1, y1) rotated against (cx1, cy1)
+     *
+     * The reason for doing this computation is so the element's top left corner
+     * on the canvas remains fixed after any changes in its dimension.
+     */
+    return {
+        x: x1 +
+            (w1 - w2) / 2 +
+            ((w2 - w1) / 2) * Math.cos(angle) +
+            ((h1 - h2) / 2) * Math.sin(angle),
+        y: y1 +
+            (h1 - h2) / 2 +
+            ((w2 - w1) / 2) * Math.sin(angle) +
+            ((h2 - h1) / 2) * Math.cos(angle),
+    };
+};
+export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(origElement.id);
+    if (!latestElement) {
+        return;
+    }
+    let boundTextFont = {};
+    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+    if (boundTextElement) {
+        const minWidth = getApproxMinLineWidth(getFontString(boundTextElement), boundTextElement.lineHeight);
+        const minHeight = getApproxMinLineHeight(boundTextElement.fontSize, boundTextElement.lineHeight);
+        nextWidth = Math.max(nextWidth, minWidth);
+        nextHeight = Math.max(nextHeight, minHeight);
+    }
+    const { width: oldWidth, height: oldHeight } = latestElement;
+    mutateElement(latestElement, {
+        ...newOrigin(latestElement.x, latestElement.y, latestElement.width, latestElement.height, nextWidth, nextHeight, latestElement.angle),
+        width: nextWidth,
+        height: nextHeight,
+        ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap, elements, scene, {
+        newSize: {
+            width: nextWidth,
+            height: nextHeight,
+        },
+    });
+    if (boundTextElement) {
+        boundTextFont = {
+            fontSize: boundTextElement.fontSize,
+        };
+        if (keepAspectRatio) {
+            const updatedElement = {
+                ...latestElement,
+                width: nextWidth,
+                height: nextHeight,
+            };
+            const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, getBoundTextMaxWidth(updatedElement, boundTextElement));
+            boundTextFont = {
+                fontSize: nextFont?.size ?? boundTextElement.fontSize,
+            };
+        }
+    }
+    updateBoundElements(latestElement, elementsMap, scene, {
+        oldSize: { width: oldWidth, height: oldHeight },
+    });
+    if (boundTextElement && boundTextFont) {
+        mutateElement(boundTextElement, {
+            fontSize: boundTextFont.fontSize,
+        });
+    }
+    handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
+};
+export const moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, elements, scene, originalElementsMap, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(originalElement.id);
+    if (!latestElement) {
+        return;
+    }
+    const [cx, cy] = [
+        originalElement.x + originalElement.width / 2,
+        originalElement.y + originalElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(originalElement.x, originalElement.y, cx, cy, originalElement.angle);
+    const changeInX = newTopLeftX - topLeftX;
+    const changeInY = newTopLeftY - topLeftY;
+    const [x, y] = rotate(newTopLeftX, newTopLeftY, cx + changeInX, cy + changeInY, -originalElement.angle);
+    mutateElement(latestElement, {
+        x,
+        y,
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap, elements, scene);
+    const boundTextElement = getBoundTextElement(originalElement, originalElementsMap);
+    if (boundTextElement) {
+        const latestBoundTextElement = elementsMap.get(boundTextElement.id);
+        latestBoundTextElement &&
+            mutateElement(latestBoundTextElement, {
+                x: boundTextElement.x + changeInX,
+                y: boundTextElement.y + changeInY,
+            }, shouldInformMutation);
+    }
+};
+export const getAtomicUnits = (targetElements, appState) => {
+    const selectedGroupIds = getSelectedGroupIds(appState);
+    const _atomicUnits = selectedGroupIds.map((gid) => {
+        return getElementsInGroup(targetElements, gid).reduce((acc, el) => {
+            acc[el.id] = true;
+            return acc;
+        }, {});
+    });
+    targetElements
+        .filter((el) => !isInGroup(el))
+        .forEach((el) => {
+        _atomicUnits.push({
+            [el.id]: true,
+        });
+    });
+    return _atomicUnits;
+};
+export const updateBindings = (latestElement, elementsMap, elements, scene, options) => {
+    if (isLinearElement(latestElement)) {
+        bindOrUnbindLinearElements([latestElement], elementsMap, elements, scene, true, []);
+    }
+    else {
+        updateBoundElements(latestElement, elementsMap, scene, options);
+    }
+};

package/dist/excalidraw/components/TTDDialog/MermaidToExcalidraw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./MermaidToExcalidraw.scss";
-import { MermaidToExcalidrawLibProps } from "./common";
+import type { MermaidToExcalidrawLibProps } from "./common";
 declare const MermaidToExcalidraw: ({ mermaidToExcalidrawLib, }: {
     mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialog.js

@@ -141,8 +141,8 @@ export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...re
                                             marginLeft: "10px",
                                             fontSize: 10,
                                             borderRadius: "12px",
-                                            background: "pink",
-                                            color: "#000",
+                                            background: "var(--color-promo)",
+                                            color: "var(--color-surface-lowest)",
                                         }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
                                         action: onGenerate,
                                         label: "Generate",

package/dist/excalidraw/components/TTDDialog/TTDDialogInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from "react";
+import type { ChangeEventHandler } from "react";
 interface TTDDialogInputProps {
     input: string;
     placeholder: string;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 interface TTDDialogPanelProps {
     label: string;
     children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanels.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogPanels: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialogTabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const TTDDialogTabs: {
     (props: {
         children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogTrigger: {
     ({ children, icon, }: {
         children?: ReactNode;

package/dist/excalidraw/components/TTDDialog/common.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
+import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppClassProperties, BinaryFiles } from "../../types";
 export interface MermaidToExcalidrawLibProps {
     loaded: boolean;
     api: Promise<{
-        parseMermaidToExcalidraw: (definition: string, options: MermaidOptions) => Promise<MermaidToExcalidrawResult>;
+        parseMermaidToExcalidraw: (definition: string, config?: MermaidConfig) => Promise<MermaidToExcalidrawResult>;
     }>;
 }
 interface ConvertMermaidToExcalidrawFormatProps {

package/dist/excalidraw/components/TTDDialog/common.js

@@ -1,4 +1,4 @@
-import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE, EDITOR_LS_KEYS, } from "../../constants";
+import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import { canvasToBlob } from "../../data/blob";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
@@ -30,14 +30,10 @@ export const convertMermaidToExcalidraw = async ({ canvasRef, mermaidToExcalidra
         const api = await mermaidToExcalidrawLib.api;
         let ret;
         try {
-            ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
-                fontSize: DEFAULT_FONT_SIZE,
-            });
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition);
         }
         catch (err) {
-            ret = await api.parseMermaidToExcalidraw(mermaidDefinition.replace(/"/g, "'"), {
-                fontSize: DEFAULT_FONT_SIZE,
-            });
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition.replace(/"/g, "'"));
         }
         const { elements, files } = ret;
         setError(null);

package/dist/excalidraw/components/TextField.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import type { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
     onChange?: (value: string) => void;

package/dist/excalidraw/components/Toast.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import "./Toast.scss";
 export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;

package/dist/excalidraw/components/ToolButton.d.ts

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
-import React, { CSSProperties } from "react";
-import { PointerType } from "../element/types";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
     icon?: React.ReactNode;

package/dist/excalidraw/components/Trans.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TranslationKeys } from "../i18n";
+import type { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
     i18nKey: TranslationKeys;

package/dist/excalidraw/components/UserList.d.ts

@@ -1,6 +1,6 @@
 import "./UserList.scss";
 import React from "react";
-import { Collaborator, SocketId } from "../types";
+import type { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
     socketId: SocketId;
     collaborator: Collaborator;

package/dist/excalidraw/components/UserList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "./UserList.scss";
 import React, { useLayoutEffect } from "react";
 import clsx from "clsx";
@@ -6,13 +6,14 @@ import { Tooltip } from "./Tooltip";
 import { useExcalidrawActionManager } from "./App";
 import * as Popover from "@radix-ui/react-popover";
 import { Island } from "./Island";
-import { searchIcon } from "./icons";
+import { QuickSearch } from "./QuickSearch";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 import { supportsResizeObserver } from "../constants";
+import { ScrollableList } from "./ScrollableList";
 const DEFAULT_MAX_AVATARS = 4;
 const SHOW_COLLABORATORS_FILTER_AT = 8;
-const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(React.Fragment, { children: children }));
+const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(_Fragment, { children: children }));
 const renderCollaborator = ({ actionManager, collaborator, socketId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
     const data = {
         socketId,
@@ -43,6 +44,7 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
     });
     const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap.values()).filter((collaborator) => collaborator.username?.trim());
     const [searchTerm, setSearchTerm] = React.useState("");
+    const filteredCollaborators = uniqueCollaboratorsArray.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm));
     const userListWrapper = React.useRef(null);
     useLayoutEffect(() => {
         if (userListWrapper.current) {
@@ -67,10 +69,6 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         }
     }, []);
     const [maxAvatars, setMaxAvatars] = React.useState(DEFAULT_MAX_AVATARS);
-    const searchTermNormalized = searchTerm.trim().toLowerCase();
-    const filteredCollaborators = searchTermNormalized
-        ? uniqueCollaboratorsArray.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm))
-        : uniqueCollaboratorsArray;
     const firstNCollaborators = uniqueCollaboratorsArray.slice(0, maxAvatars - 1);
     const firstNAvatarsJSX = firstNCollaborators.map((collaborator) => renderCollaborator({
         actionManager,
@@ -85,24 +83,26 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
             socketId: collaborator.socketId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow,
-        })) })) : (_jsx("div", { className: "UserList-wrapper", ref: userListWrapper, children: _jsxs("div", { className: clsx("UserList", className), style: { [`--max-avatars`]: maxAvatars }, children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > maxAvatars - 1 && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
-                        if (!isOpen) {
-                            setSearchTerm("");
-                        }
-                    }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - maxAvatars + 1] }), _jsx(Popover.Content, { style: {
+        })) })) : (_jsx("div", { className: "UserList__wrapper", ref: userListWrapper, children: _jsxs("div", { className: clsx("UserList", className), style: { [`--max-avatars`]: maxAvatars }, children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > maxAvatars - 1 && (_jsxs(Popover.Root, { children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - maxAvatars + 1] }), _jsx(Popover.Content, { style: {
                                 zIndex: 2,
                                 width: "15rem",
                                 textAlign: "left",
-                            }, align: "end", sideOffset: 10, children: _jsxs(Island, { style: { overflow: "hidden" }, children: [uniqueCollaboratorsArray.length >=
-                                        SHOW_COLLABORATORS_FILTER_AT && (_jsxs("div", { className: "UserList__search-wrapper", children: [searchIcon, _jsx("input", { className: "UserList__search", type: "text", placeholder: t("userList.search.placeholder"), value: searchTerm, onChange: (e) => {
-                                                    setSearchTerm(e.target.value);
-                                                } })] })), _jsxs("div", { className: "dropdown-menu UserList__collaborators", children: [filteredCollaborators.length === 0 && (_jsx("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") })), _jsx("div", { className: "UserList__hint", children: t("userList.hint.text") }), filteredCollaborators.map((collaborator) => renderCollaborator({
-                                                actionManager,
-                                                collaborator,
-                                                socketId: collaborator.socketId,
-                                                withName: true,
-                                                isBeingFollowed: collaborator.socketId === userToFollow,
-                                            }))] })] }) })] }))] }) }));
+                            }, align: "end", sideOffset: 10, children: _jsxs(Island, { padding: 2, children: [uniqueCollaboratorsArray.length >=
+                                        SHOW_COLLABORATORS_FILTER_AT && (_jsx(QuickSearch, { placeholder: t("quickSearch.placeholder"), onChange: setSearchTerm })), _jsx(ScrollableList, { className: "dropdown-menu UserList__collaborators", placeholder: t("userList.empty"), children: filteredCollaborators.length > 0
+                                            ? [
+                                                _jsx("div", { className: "hint", children: t("userList.hint.text") }),
+                                                filteredCollaborators.map((collaborator) => renderCollaborator({
+                                                    actionManager,
+                                                    collaborator,
+                                                    socketId: collaborator.socketId,
+                                                    withName: true,
+                                                    isBeingFollowed: collaborator.socketId === userToFollow,
+                                                })),
+                                            ]
+                                            : [] }), _jsx(Popover.Arrow, { width: 20, height: 10, style: {
+                                            fill: "var(--popup-bg-color)",
+                                            filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+                                        } })] }) })] }))] }) }));
 }, (prev, next) => {
     if (prev.collaborators.size !== next.collaborators.size ||
         prev.mobile !== next.mobile ||

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -2,14 +2,15 @@ import React from "react";
 import type { DOMAttributes } from "react";
 import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement>;
     canvas: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    allElementsMap: NonDeletedSceneElementsMap;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -49,6 +49,7 @@ const InteractiveCanvas = (props) => {
             elementsMap: props.elementsMap,
             visibleElements: props.visibleElements,
             selectedElements: props.selectedElements,
+            allElementsMap: props.allElementsMap,
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
@@ -99,14 +100,15 @@ const getRelevantAppStateProps = (appState) => ({
     activeEmbeddable: appState.activeEmbeddable,
     snapLines: appState.snapLines,
     zenModeEnabled: appState.zenModeEnabled,
+    editingElement: appState.editingElement,
 });
 const areEqual = (prevProps, nextProps) => {
     // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
-        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -68,12 +68,13 @@ const getRelevantAppStateProps = (appState) => ({
     selectedElementIds: appState.selectedElementIds,
     frameToHighlight: appState.frameToHighlight,
     editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

package/dist/excalidraw/components/dropdownMenu/DropdownMenu.d.ts

@@ -25,17 +25,26 @@ declare const DropdownMenu: {
         displayName: string;
     };
     Item: {
-        ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+        ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
             icon?: JSX.Element | undefined;
-            onSelect: (event: Event) => void;
+            value?: string | number | undefined;
+            order?: number | undefined;
+            onSelect?: ((event: Event) => void) | undefined;
             children: React.ReactNode;
             shortcut?: string | undefined;
+            hovered?: boolean | undefined;
             selected?: boolean | undefined;
+            textStyle?: React.CSSProperties | undefined;
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
         Badge: {
-            ({ children, }: {
+            ({ type, children, }: {
+                type?: import("../../utility-types").ValueOf<{
+                    readonly GREEN: "green";
+                    readonly RED: "red";
+                    readonly BLUE: "blue";
+                }> | undefined;
                 children: React.ReactNode;
             }): JSX.Element;
             displayName: string;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItem.d.ts

@@ -1,23 +1,43 @@
 import React from "react";
+import type { ValueOf } from "../../utility-types";
 declare const DropdownMenuItem: {
-    ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+    ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
         icon?: JSX.Element | undefined;
-        onSelect: (event: Event) => void;
+        value?: string | number | undefined;
+        order?: number | undefined;
+        onSelect?: ((event: Event) => void) | undefined;
         children: React.ReactNode;
         shortcut?: string | undefined;
+        hovered?: boolean | undefined;
         selected?: boolean | undefined;
+        textStyle?: React.CSSProperties | undefined;
         className?: string | undefined;
     } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
     displayName: string;
     Badge: {
-        ({ children, }: {
+        ({ type, children, }: {
+            type?: ValueOf<{
+                readonly GREEN: "green";
+                readonly RED: "red";
+                readonly BLUE: "blue";
+            }> | undefined;
             children: React.ReactNode;
         }): JSX.Element;
         displayName: string;
     };
 };
+export declare const DropDownMenuItemBadgeType: {
+    readonly GREEN: "green";
+    readonly RED: "red";
+    readonly BLUE: "blue";
+};
 export declare const DropDownMenuItemBadge: {
-    ({ children, }: {
+    ({ type, children, }: {
+        type?: ValueOf<{
+            readonly GREEN: "green";
+            readonly RED: "red";
+            readonly BLUE: "blue";
+        }> | undefined;
         children: React.ReactNode;
     }): JSX.Element;
     displayName: string;