@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

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

@@ -1,15 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { rotate } from "../../math";
 import StatsDragInput from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getCommonBounds, isTextElement } from "../../element";
 import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 const STEP_SIZE = 10;
-const moveElements = (property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap) => {
+const moveElements = (property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap, scene) => {
     for (let i = 0; i < elements.length; i++) {
         const origElement = originalElements[i];
-        const latestElement = elements[i];
         const [cx, cy] = [
             origElement.x + origElement.width / 2,
             origElement.y + origElement.height / 2,
@@ -17,16 +16,19 @@ const moveElements = (property, changeInTopX, changeInTopY, elements, originalEl
         const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
         const newTopLeftX = property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
         const newTopLeftY = property === "y" ? Math.round(topLeftY + changeInTopY) : topLeftY;
-        moveElement(newTopLeftX, newTopLeftY, latestElement, origElement, elementsMap, originalElementsMap, false);
+        moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, elements, scene, originalElementsMap, false);
     }
 };
-const moveGroupTo = (nextX, nextY, latestElements, originalElements, elementsMap, originalElementsMap) => {
+const moveGroupTo = (nextX, nextY, originalElements, elementsMap, elements, originalElementsMap, scene) => {
     const [x1, y1, ,] = getCommonBounds(originalElements);
     const offsetX = nextX - x1;
     const offsetY = nextY - y1;
-    for (let i = 0; i < latestElements.length; i++) {
+    for (let i = 0; i < originalElements.length; i++) {
         const origElement = originalElements[i];
-        const latestElement = latestElements[i];
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement) {
+            continue;
+        }
         // bound texts are moved with their containers
         if (!isTextElement(latestElement) || !latestElement.containerId) {
             const [cx, cy] = [
@@ -34,11 +36,51 @@ const moveGroupTo = (nextX, nextY, latestElements, originalElements, elementsMap
                 latestElement.y + latestElement.height / 2,
             ];
             const [topLeftX, topLeftY] = rotate(latestElement.x, latestElement.y, cx, cy, latestElement.angle);
-            moveElement(topLeftX + offsetX, topLeftY + offsetY, latestElement, origElement, elementsMap, originalElementsMap, false);
+            moveElement(topLeftX + offsetX, topLeftY + offsetY, origElement, elementsMap, elements, scene, originalElementsMap, false);
         }
     }
 };
-const MultiPosition = ({ property, elements, elementsMap, atomicUnits, scene, }) => {
+const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, originalAppState, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();
+    if (nextValue !== undefined) {
+        for (const atomicUnit of getAtomicUnits(originalElements, originalAppState)) {
+            const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap, originalElementsMap);
+            if (elementsInUnit.length > 1) {
+                const [x1, y1, ,] = getCommonBounds(elementsInUnit.map((el) => el.latest));
+                const newTopLeftX = property === "x" ? nextValue : x1;
+                const newTopLeftY = property === "y" ? nextValue : y1;
+                moveGroupTo(newTopLeftX, newTopLeftY, elementsInUnit.map((el) => el.original), elementsMap, elements, originalElementsMap, scene);
+            }
+            else {
+                const origElement = elementsInUnit[0]?.original;
+                const latestElement = elementsInUnit[0]?.latest;
+                if (origElement &&
+                    latestElement &&
+                    isPropertyEditable(latestElement, property)) {
+                    const [cx, cy] = [
+                        origElement.x + origElement.width / 2,
+                        origElement.y + origElement.height / 2,
+                    ];
+                    const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
+                    const newTopLeftX = property === "x" ? nextValue : topLeftX;
+                    const newTopLeftY = property === "y" ? nextValue : topLeftY;
+                    moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, elements, scene, originalElementsMap, false);
+                }
+            }
+        }
+        scene.triggerUpdate();
+        return;
+    }
+    const change = shouldChangeByStepSize
+        ? getStepSizedValue(accumulatedChange, STEP_SIZE)
+        : accumulatedChange;
+    const changeInTopX = property === "x" ? change : 0;
+    const changeInTopY = property === "y" ? change : 0;
+    moveElements(property, changeInTopX, changeInTopY, originalElements, originalElements, elementsMap, originalElementsMap, scene);
+    scene.triggerUpdate();
+};
+const MultiPosition = ({ property, elements, elementsMap, atomicUnits, scene, appState, }) => {
     const positions = useMemo(() => atomicUnits.map((atomicUnit) => {
         const elementsInUnit = Object.keys(atomicUnit)
             .map((id) => elementsMap.get(id))
@@ -54,44 +96,6 @@ const MultiPosition = ({ property, elements, elementsMap, atomicUnits, scene, })
         return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
     }), [atomicUnits, elementsMap, property]);
     const value = new Set(positions).size === 1 ? positions[0] : "Mixed";
-    const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, }) => {
-        if (nextValue !== undefined) {
-            for (const atomicUnit of atomicUnits) {
-                const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap, originalElementsMap);
-                if (elementsInUnit.length > 1) {
-                    const [x1, y1, ,] = getCommonBounds(elementsInUnit.map((el) => el.latest));
-                    const newTopLeftX = property === "x" ? nextValue : x1;
-                    const newTopLeftY = property === "y" ? nextValue : y1;
-                    moveGroupTo(newTopLeftX, newTopLeftY, elementsInUnit.map((el) => el.latest), elementsInUnit.map((el) => el.original), elementsMap, originalElementsMap);
-                }
-                else {
-                    const origElement = elementsInUnit[0]?.original;
-                    const latestElement = elementsInUnit[0]?.latest;
-                    if (origElement &&
-                        latestElement &&
-                        isPropertyEditable(latestElement, property)) {
-                        const [cx, cy] = [
-                            origElement.x + origElement.width / 2,
-                            origElement.y + origElement.height / 2,
-                        ];
-                        const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
-                        const newTopLeftX = property === "x" ? nextValue : topLeftX;
-                        const newTopLeftY = property === "y" ? nextValue : topLeftY;
-                        moveElement(newTopLeftX, newTopLeftY, latestElement, origElement, elementsMap, originalElementsMap, false);
-                    }
-                }
-            }
-            scene.triggerUpdate();
-            return;
-        }
-        const change = shouldChangeByStepSize
-            ? getStepSizedValue(accumulatedChange, STEP_SIZE)
-            : accumulatedChange;
-        const changeInTopX = property === "x" ? change : 0;
-        const changeInTopY = property === "y" ? change : 0;
-        moveElements(property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap);
-        scene.triggerUpdate();
-    };
-    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: elements, dragInputCallback: handlePositionChange, value: value }));
+    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: elements, dragInputCallback: handlePositionChange, value: value, property: property, scene: scene, appState: appState }));
 };
 export default MultiPosition;

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

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 interface PositionProps {
     property: "x" | "y";
     element: ExcalidrawElement;
     elementsMap: ElementsMap;
+    scene: Scene;
+    appState: AppState;
 }
-declare const Position: ({ property, element, elementsMap }: PositionProps) => JSX.Element;
+declare const Position: ({ property, element, elementsMap, scene, appState, }: PositionProps) => JSX.Element;
 export default Position;

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

@@ -3,36 +3,38 @@ import { rotate } from "../../math";
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 const STEP_SIZE = 10;
-const Position = ({ property, element, elementsMap }) => {
+const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, property, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const elements = scene.getNonDeletedElements();
+    const origElement = originalElements[0];
+    const [cx, cy] = [
+        origElement.x + origElement.width / 2,
+        origElement.y + origElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
+    if (nextValue !== undefined) {
+        const newTopLeftX = property === "x" ? nextValue : topLeftX;
+        const newTopLeftY = property === "y" ? nextValue : topLeftY;
+        moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, elements, scene, originalElementsMap);
+        return;
+    }
+    const changeInTopX = property === "x" ? accumulatedChange : 0;
+    const changeInTopY = property === "y" ? accumulatedChange : 0;
+    const newTopLeftX = property === "x"
+        ? Math.round(shouldChangeByStepSize
+            ? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
+            : topLeftX + changeInTopX)
+        : topLeftX;
+    const newTopLeftY = property === "y"
+        ? Math.round(shouldChangeByStepSize
+            ? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
+            : topLeftY + changeInTopY)
+        : topLeftY;
+    moveElement(newTopLeftX, newTopLeftY, origElement, elementsMap, elements, scene, originalElementsMap);
+};
+const Position = ({ property, element, elementsMap, scene, appState, }) => {
     const [topLeftX, topLeftY] = rotate(element.x, element.y, element.x + element.width / 2, element.y + element.height / 2, element.angle);
     const value = Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
-    const handlePositionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldChangeByStepSize, nextValue, }) => {
-        const origElement = originalElements[0];
-        const [cx, cy] = [
-            origElement.x + origElement.width / 2,
-            origElement.y + origElement.height / 2,
-        ];
-        const [topLeftX, topLeftY] = rotate(origElement.x, origElement.y, cx, cy, origElement.angle);
-        if (nextValue !== undefined) {
-            const newTopLeftX = property === "x" ? nextValue : topLeftX;
-            const newTopLeftY = property === "y" ? nextValue : topLeftY;
-            moveElement(newTopLeftX, newTopLeftY, element, origElement, elementsMap, originalElementsMap);
-            return;
-        }
-        const changeInTopX = property === "x" ? accumulatedChange : 0;
-        const changeInTopY = property === "y" ? accumulatedChange : 0;
-        const newTopLeftX = property === "x"
-            ? Math.round(shouldChangeByStepSize
-                ? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
-                : topLeftX + changeInTopX)
-            : topLeftX;
-        const newTopLeftY = property === "y"
-            ? Math.round(shouldChangeByStepSize
-                ? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
-                : topLeftY + changeInTopY)
-            : topLeftY;
-        moveElement(newTopLeftX, newTopLeftY, element, origElement, elementsMap, originalElementsMap);
-    };
-    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: [element], dragInputCallback: handlePositionChange, value: value }));
+    return (_jsx(StatsDragInput, { label: property === "x" ? "X" : "Y", elements: [element], dragInputCallback: handlePositionChange, scene: scene, value: value, property: property, appState: appState }));
 };
 export default Position;

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

@@ -9,14 +9,16 @@ import Dimension from "./Dimension";
 import Angle from "./Angle";
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
-import { elementsAreInSameGroup, getElementsInGroup, getSelectedGroupIds, isInGroup, } from "../../groups";
+import { elementsAreInSameGroup } from "../../groups";
 import MultiAngle from "./MultiAngle";
 import MultiFontSize from "./MultiFontSize";
 import Position from "./Position";
 import MultiPosition from "./MultiPosition";
 import Collapsible from "./Collapsible";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
+import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
+import { isElbowArrow } from "../../element/typeChecks";
 const STATS_TIMEOUT = 50;
 export const Stats = (props) => {
     const appState = useExcalidrawAppState();
@@ -49,21 +51,7 @@ export const StatsInner = memo(({ scene, onClose, renderCustomStats, selectedEle
     }, [sceneNonce, elements, throttledSetSceneDimension]);
     useEffect(() => () => throttledSetSceneDimension.cancel(), [throttledSetSceneDimension]);
     const atomicUnits = useMemo(() => {
-        const selectedGroupIds = getSelectedGroupIds(appState);
-        const _atomicUnits = selectedGroupIds.map((gid) => {
-            return getElementsInGroup(selectedElements, gid).reduce((acc, el) => {
-                acc[el.id] = true;
-                return acc;
-            }, {});
-        });
-        selectedElements
-            .filter((el) => !isInGroup(el))
-            .forEach((el) => {
-            _atomicUnits.push({
-                [el.id]: true,
-            });
-        });
-        return _atomicUnits;
+        return getAtomicUnits(selectedElements, appState);
     }, [selectedElements, appState]);
     return (_jsx("div", { className: "Stats", children: _jsxs(Island, { padding: 3, children: [_jsxs("div", { className: "title", children: [_jsx("h2", { children: t("stats.title") }), _jsx("div", { className: "close", onClick: onClose, children: CloseIcon })] }), _jsx(Collapsible, { label: _jsx("h3", { children: t("stats.generalStats") }), open: !!(appState.stats.panels & STATS_PANELS.generalStats), openTrigger: () => setAppState((state) => {
                         return {
@@ -83,7 +71,7 @@ export const StatsInner = memo(({ scene, onClose, renderCustomStats, selectedEle
                                     panels: state.stats.panels ^ STATS_PANELS.elementProperties,
                                 },
                             };
-                        }), children: [singleElement && (_jsxs("div", { className: "sectionContent", children: [_jsx("div", { className: "elementType", children: t(`element.${singleElement.type}`) }), _jsxs("div", { className: "statsItem", children: [_jsx(Position, { element: singleElement, property: "x", elementsMap: elementsMap }), _jsx(Position, { element: singleElement, property: "y", elementsMap: elementsMap }), _jsx(Dimension, { property: "width", element: singleElement, elementsMap: elementsMap }), _jsx(Dimension, { property: "height", element: singleElement, elementsMap: elementsMap }), _jsx(Angle, { element: singleElement, elementsMap: elementsMap }), singleElement.type === "text" && (_jsx(FontSize, { element: singleElement, elementsMap: elementsMap }))] })] })), multipleElements && (_jsxs("div", { className: "sectionContent", children: [elementsAreInSameGroup(multipleElements) && (_jsx("div", { className: "elementType", children: t("element.group") })), _jsxs("div", { className: "elementsCount", children: [_jsx("div", { children: t("stats.elements") }), _jsx("div", { children: selectedElements.length })] }), _jsxs("div", { className: "statsItem", children: [_jsx(MultiPosition, { property: "x", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene }), _jsx(MultiPosition, { property: "y", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene }), _jsx(MultiDimension, { property: "width", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene }), _jsx(MultiDimension, { property: "height", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene }), _jsx(MultiAngle, { elements: multipleElements, elementsMap: elementsMap, scene: scene }), _jsx(MultiFontSize, { elements: multipleElements, elementsMap: elementsMap, scene: scene })] })] }))] }) }))] }) }));
+                        }), children: [singleElement && (_jsxs("div", { className: "sectionContent", children: [_jsx("div", { className: "elementType", children: t(`element.${singleElement.type}`) }), _jsxs("div", { className: "statsItem", children: [_jsx(Position, { element: singleElement, property: "x", elementsMap: elementsMap, scene: scene, appState: appState }), _jsx(Position, { element: singleElement, property: "y", elementsMap: elementsMap, scene: scene, appState: appState }), _jsx(Dimension, { property: "width", element: singleElement, scene: scene, appState: appState }), _jsx(Dimension, { property: "height", element: singleElement, scene: scene, appState: appState }), !isElbowArrow(singleElement) && (_jsx(Angle, { property: "angle", element: singleElement, scene: scene, appState: appState })), _jsx(FontSize, { property: "fontSize", element: singleElement, scene: scene, appState: appState })] })] })), multipleElements && (_jsxs("div", { className: "sectionContent", children: [elementsAreInSameGroup(multipleElements) && (_jsx("div", { className: "elementType", children: t("element.group") })), _jsxs("div", { className: "elementsCount", children: [_jsx("div", { children: t("stats.elements") }), _jsx("div", { children: selectedElements.length })] }), _jsxs("div", { className: "statsItem", children: [_jsx(MultiPosition, { property: "x", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiPosition, { property: "y", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiDimension, { property: "width", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiDimension, { property: "height", elements: multipleElements, elementsMap: elementsMap, atomicUnits: atomicUnits, scene: scene, appState: appState }), _jsx(MultiAngle, { property: "angle", elements: multipleElements, scene: scene, appState: appState }), _jsx(MultiFontSize, { property: "fontSize", elements: multipleElements, scene: scene, appState: appState, elementsMap: elementsMap })] })] }))] }) }))] }) }));
 }, (prev, next) => {
     return (prev.sceneNonce === next.sceneNonce &&
         prev.selectedElements === next.selectedElements &&

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

@@ -1,4 +1,7 @@
-import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement } from "../../element/types";
+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;
@@ -11,5 +14,13 @@ export declare const newOrigin: (x1: number, y1: number, w1: number, h1: number,
     x: number;
     y: number;
 };
-export declare const resizeElement: (nextWidth: number, nextHeight: number, keepAspectRatio: boolean, latestElement: ExcalidrawElement, origElement: ExcalidrawElement, elementsMap: ElementsMap, originalElementsMap: Map<string, ExcalidrawElement>, shouldInformMutation?: boolean) => void;
-export declare const moveElement: (newTopLeftX: number, newTopLeftY: number, latestElement: ExcalidrawElement, originalElement: ExcalidrawElement, elementsMap: ElementsMap, originalElementsMap: ElementsMap, shouldInformMutation?: boolean) => void;
+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

@@ -1,8 +1,9 @@
-import { updateBoundElements } from "../../element/binding";
+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, isTextElement } from "../../element/typeChecks";
+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;
@@ -54,7 +55,11 @@ export const newOrigin = (x1, y1, w1, h1, w2, h2, angle) => {
             ((h2 - h1) / 2) * Math.cos(angle),
     };
 };
-export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, latestElement, origElement, elementsMap, originalElementsMap, shouldInformMutation = true) => {
+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) {
@@ -63,12 +68,19 @@ export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, latestElem
         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,
@@ -85,11 +97,8 @@ export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, latestElem
             };
         }
     }
-    updateBoundElements(latestElement, elementsMap, {
-        newSize: {
-            width: nextWidth,
-            height: nextHeight,
-        },
+    updateBoundElements(latestElement, elementsMap, scene, {
+        oldSize: { width: oldWidth, height: oldHeight },
     });
     if (boundTextElement && boundTextFont) {
         mutateElement(boundTextElement, {
@@ -98,7 +107,11 @@ export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, latestElem
     }
     handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
 };
-export const moveElement = (newTopLeftX, newTopLeftY, latestElement, originalElement, elementsMap, originalElementsMap, shouldInformMutation = true) => {
+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,
@@ -111,6 +124,7 @@ export const moveElement = (newTopLeftX, newTopLeftY, latestElement, originalEle
         x,
         y,
     }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap, elements, scene);
     const boundTextElement = getBoundTextElement(originalElement, originalElementsMap);
     if (boundTextElement) {
         const latestBoundTextElement = elementsMap.get(boundTextElement.id);
@@ -121,3 +135,28 @@ export const moveElement = (newTopLeftX, newTopLeftY, latestElement, originalEle
             }, 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/common.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+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/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/StaticCanvas.js

@@ -68,6 +68,7 @@ const getRelevantAppStateProps = (appState) => ({
     selectedElementIds: appState.selectedElementIds,
     frameToHighlight: appState.frameToHighlight,
     editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
 });
 const areEqual = (prevProps, nextProps) => {
     if (prevProps.sceneNonce !== nextProps.sceneNonce ||

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;