@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/actions/actionProperties.js

@@ -1,26 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS, DEFAULT_ELEMENT_STROKE_COLOR_PALETTE, DEFAULT_ELEMENT_STROKE_PICKS, } from "../colors";
 import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
+import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
-import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, FreedrawIcon, FontFamilyNormalIcon, FontFamilyCodeIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, } from "../components/icons";
-import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, ROUNDNESS, STROKE_WIDTH, VERTICAL_ALIGN, } from "../constants";
+import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, sharpArrowIcon, roundArrowIcon, elbowArrowIcon, } from "../components/icons";
+import { ARROW_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, ROUNDNESS, STROKE_WIDTH, VERTICAL_ALIGN, } from "../constants";
 import { getNonDeletedElements, isTextElement, redrawTextBoundingBox, } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement, getDefaultLineHeight, } from "../element/textElement";
-import { isBoundToContainer, isLinearElement, isUsingAdaptiveRadius, } from "../element/typeChecks";
+import { getBoundTextElement } from "../element/textElement";
+import { isArrowElement, isBoundToContainer, isElbowArrow, isLinearElement, isUsingAdaptiveRadius, } from "../element/typeChecks";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import { canHaveArrowheads, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, isSomeElementSelected, } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { arrayToMap, getFontFamilyString, getShortcutKey, tupleToCoors, } from "../utils";
 import { register } from "./register";
 import { StoreAction } from "../store";
+import { Fonts, getLineHeight } from "../fonts";
+import { bindLinearElement, bindPointToSnapToElementOutline, calculateFixedPointForElbowArrowBinding, getHoveredElementForBinding, } from "../element/binding";
+import { mutateElbowArrow } from "../element/routing";
+import { LinearElementEditor } from "../element/linearElementEditor";
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 export const changeProperty = (elements, appState, callback, includeBoundText = false) => {
     const selectedElementIds = arrayToMap(getSelectedElements(elements, appState, {
@@ -394,59 +400,253 @@ export const actionChangeFontFamily = register({
     label: "labels.fontFamily",
     trackEvent: false,
     perform: (elements, appState, value, app) => {
-        return {
-            elements: changeProperty(elements, appState, (oldElement) => {
-                if (isTextElement(oldElement)) {
-                    const newElement = newElementWith(oldElement, {
-                        fontFamily: value,
-                        lineHeight: getDefaultLineHeight(value),
+        const { cachedElements, resetAll, resetContainers, ...nextAppState } = value;
+        if (resetAll) {
+            const nextElements = changeProperty(elements, appState, (element) => {
+                const cachedElement = cachedElements?.get(element.id);
+                if (cachedElement) {
+                    const newElement = newElementWith(element, {
+                        ...cachedElement,
                     });
-                    redrawTextBoundingBox(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());
                     return newElement;
                 }
-                return oldElement;
-            }, true),
+                return element;
+            }, true);
+            return {
+                elements: nextElements,
+                appState: {
+                    ...appState,
+                    ...nextAppState,
+                },
+                storeAction: StoreAction.UPDATE,
+            };
+        }
+        const { currentItemFontFamily, currentHoveredFontFamily } = value;
+        let nexStoreAction = StoreAction.NONE;
+        let nextFontFamily;
+        let skipOnHoverRender = false;
+        if (currentItemFontFamily) {
+            nextFontFamily = currentItemFontFamily;
+            nexStoreAction = StoreAction.CAPTURE;
+        }
+        else if (currentHoveredFontFamily) {
+            nextFontFamily = currentHoveredFontFamily;
+            nexStoreAction = StoreAction.NONE;
+            const selectedTextElements = getSelectedElements(elements, appState, {
+                includeBoundTextElement: true,
+            }).filter((element) => isTextElement(element));
+            // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined
+            if (selectedTextElements.length > 200) {
+                skipOnHoverRender = true;
+            }
+            else {
+                let i = 0;
+                let textLengthAccumulator = 0;
+                while (i < selectedTextElements.length &&
+                    textLengthAccumulator < 5000) {
+                    const textElement = selectedTextElements[i];
+                    textLengthAccumulator += textElement?.originalText.length || 0;
+                    i++;
+                }
+                if (textLengthAccumulator > 5000) {
+                    skipOnHoverRender = true;
+                }
+            }
+        }
+        const result = {
             appState: {
                 ...appState,
-                currentItemFontFamily: value,
+                ...nextAppState,
             },
-            storeAction: StoreAction.CAPTURE,
+            storeAction: nexStoreAction,
         };
+        if (nextFontFamily && !skipOnHoverRender) {
+            const elementContainerMapping = new Map();
+            let uniqueGlyphs = new Set();
+            let skipFontFaceCheck = false;
+            const fontsCache = Array.from(Fonts.loadedFontsCache.values());
+            const fontFamily = Object.entries(FONT_FAMILY).find(([_, value]) => value === nextFontFamily)?.[0];
+            // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)
+            if (currentHoveredFontFamily &&
+                fontFamily &&
+                fontsCache.some((sig) => sig.startsWith(fontFamily))) {
+                skipFontFaceCheck = true;
+            }
+            // following causes re-render so make sure we changed the family
+            // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg
+            Object.assign(result, {
+                elements: changeProperty(elements, appState, (oldElement) => {
+                    if (isTextElement(oldElement) &&
+                        (oldElement.fontFamily !== nextFontFamily ||
+                            currentItemFontFamily) // force update on selection
+                    ) {
+                        const newElement = newElementWith(oldElement, {
+                            fontFamily: nextFontFamily,
+                            lineHeight: getLineHeight(nextFontFamily),
+                        });
+                        const cachedContainer = cachedElements?.get(oldElement.containerId || "") || {};
+                        const container = app.scene.getContainerElement(oldElement);
+                        if (resetContainers && container && cachedContainer) {
+                            // reset the container back to it's cached version
+                            mutateElement(container, { ...cachedContainer }, false);
+                        }
+                        if (!skipFontFaceCheck) {
+                            uniqueGlyphs = new Set([
+                                ...uniqueGlyphs,
+                                ...Array.from(newElement.originalText),
+                            ]);
+                        }
+                        elementContainerMapping.set(newElement, container);
+                        return newElement;
+                    }
+                    return oldElement;
+                }, true),
+            });
+            // size is irrelevant, but necessary
+            const fontString = `10px ${getFontFamilyString({
+                fontFamily: nextFontFamily,
+            })}`;
+            const glyphs = Array.from(uniqueGlyphs.values()).join();
+            if (skipFontFaceCheck ||
+                window.document.fonts.check(fontString, glyphs)) {
+                // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
+                for (const [element, container] of elementContainerMapping) {
+                    // trigger synchronous redraw
+                    redrawTextBoundingBox(element, container, app.scene.getNonDeletedElementsMap(), false);
+                }
+            }
+            else {
+                // otherwise try to load all font faces for the given glyphs and redraw elements once our font faces loaded
+                window.document.fonts.load(fontString, glyphs).then((fontFaces) => {
+                    for (const [element, container] of elementContainerMapping) {
+                        // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)
+                        const latestElement = app.scene.getElement(element.id);
+                        const latestContainer = container
+                            ? app.scene.getElement(container.id)
+                            : null;
+                        if (latestElement) {
+                            // trigger async redraw
+                            redrawTextBoundingBox(latestElement, latestContainer, app.scene.getNonDeletedElementsMap(), false);
+                        }
+                    }
+                    // trigger update once we've mutated all the elements, which also updates our cache
+                    app.fonts.onLoaded(fontFaces);
+                });
+            }
+        }
+        return result;
     },
-    PanelComponent: ({ elements, appState, updateData, app }) => {
-        const options = [
-            {
-                value: FONT_FAMILY.Virgil,
-                text: t("labels.handDrawn"),
-                icon: FreedrawIcon,
-                testId: "font-family-virgil",
-            },
-            {
-                value: FONT_FAMILY.Helvetica,
-                text: t("labels.normal"),
-                icon: FontFamilyNormalIcon,
-                testId: "font-family-normal",
-            },
-            {
-                value: FONT_FAMILY.Cascadia,
-                text: t("labels.code"),
-                icon: FontFamilyCodeIcon,
-                testId: "font-family-code",
-            },
-        ];
-        return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.fontFamily") }), _jsx(ButtonIconSelect, { group: "font-family", options: options, value: getFormValue(elements, appState, (element) => {
-                        if (isTextElement(element)) {
-                            return element.fontFamily;
+    PanelComponent: ({ elements, appState, app, updateData }) => {
+        const cachedElementsRef = useRef(new Map());
+        const prevSelectedFontFamilyRef = useRef(null);
+        // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
+        const [batchedData, setBatchedData] = useState({});
+        const isUnmounted = useRef(true);
+        const selectedFontFamily = useMemo(() => {
+            const getFontFamily = (elementsArray, elementsMap) => getFormValue(elementsArray, appState, (element) => {
+                if (isTextElement(element)) {
+                    return element.fontFamily;
+                }
+                const boundTextElement = getBoundTextElement(element, elementsMap);
+                if (boundTextElement) {
+                    return boundTextElement.fontFamily;
+                }
+                return null;
+            }, (element) => isTextElement(element) ||
+                getBoundTextElement(element, elementsMap) !== null, (hasSelection) => hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY);
+            // popup opened, use cached elements
+            if (batchedData.openPopup === "fontFamily" &&
+                appState.openPopup === "fontFamily") {
+                return getFontFamily(Array.from(cachedElementsRef.current?.values() ?? []), cachedElementsRef.current);
+            }
+            // popup closed, use all elements
+            if (!batchedData.openPopup && appState.openPopup !== "fontFamily") {
+                return getFontFamily(elements, app.scene.getNonDeletedElementsMap());
+            }
+            // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had
+            return prevSelectedFontFamilyRef.current;
+        }, [batchedData.openPopup, appState, elements, app.scene]);
+        useEffect(() => {
+            prevSelectedFontFamilyRef.current = selectedFontFamily;
+        }, [selectedFontFamily]);
+        useEffect(() => {
+            if (Object.keys(batchedData).length) {
+                updateData(batchedData);
+                // reset the data after we've used the data
+                setBatchedData({});
+            }
+            // call update only on internal state changes
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [batchedData]);
+        useEffect(() => {
+            isUnmounted.current = false;
+            return () => {
+                isUnmounted.current = true;
+            };
+        }, []);
+        return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.fontFamily") }), _jsx(FontPicker, { isOpened: appState.openPopup === "fontFamily", selectedFontFamily: selectedFontFamily, hoveredFontFamily: appState.currentHoveredFontFamily, onSelect: (fontFamily) => {
+                        setBatchedData({
+                            openPopup: null,
+                            currentHoveredFontFamily: null,
+                            currentItemFontFamily: fontFamily,
+                        });
+                        // defensive clear so immediate close won't abuse the cached elements
+                        cachedElementsRef.current.clear();
+                    }, onHover: (fontFamily) => {
+                        setBatchedData({
+                            currentHoveredFontFamily: fontFamily,
+                            cachedElements: new Map(cachedElementsRef.current),
+                            resetContainers: true,
+                        });
+                    }, onLeave: () => {
+                        setBatchedData({
+                            currentHoveredFontFamily: null,
+                            cachedElements: new Map(cachedElementsRef.current),
+                            resetAll: true,
+                        });
+                    }, onPopupChange: (open) => {
+                        if (open) {
+                            // open, populate the cache from scratch
+                            cachedElementsRef.current.clear();
+                            const { editingElement } = appState;
+                            if (editingElement?.type === "text") {
+                                // retrieve the latest version from the scene, as `editingElement` isn't mutated
+                                const latestEditingElement = app.scene.getElement(editingElement.id);
+                                // inside the wysiwyg editor
+                                cachedElementsRef.current.set(editingElement.id, newElementWith(latestEditingElement || editingElement, {}, true));
+                            }
+                            else {
+                                const selectedElements = getSelectedElements(elements, appState, {
+                                    includeBoundTextElement: true,
+                                });
+                                for (const element of selectedElements) {
+                                    cachedElementsRef.current.set(element.id, newElementWith(element, {}, true));
+                                }
+                            }
+                            setBatchedData({
+                                openPopup: "fontFamily",
+                            });
                         }
-                        const boundTextElement = getBoundTextElement(element, app.scene.getNonDeletedElementsMap());
-                        if (boundTextElement) {
-                            return boundTextElement.fontFamily;
+                        else {
+                            // close, use the cache and clear it afterwards
+                            const data = {
+                                openPopup: null,
+                                currentHoveredFontFamily: null,
+                                cachedElements: new Map(cachedElementsRef.current),
+                                resetAll: true,
+                            };
+                            if (isUnmounted.current) {
+                                // in case the component was unmounted by the parent, trigger the update directly
+                                updateData({ ...batchedData, ...data });
+                            }
+                            else {
+                                setBatchedData(data);
+                            }
+                            cachedElementsRef.current.clear();
                         }
-                        return null;
-                    }, (element) => isTextElement(element) ||
-                        getBoundTextElement(element, app.scene.getNonDeletedElementsMap()) !== null, (hasSelection) => hasSelection
-                        ? null
-                        : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY), onChange: (value) => updateData(value) })] }));
+                    } })] }));
     },
 });
 export const actionChangeTextAlign = register({
@@ -563,15 +763,20 @@ export const actionChangeRoundness = register({
     trackEvent: false,
     perform: (elements, appState, value) => {
         return {
-            elements: changeProperty(elements, appState, (el) => newElementWith(el, {
-                roundness: value === "round"
-                    ? {
-                        type: isUsingAdaptiveRadius(el.type)
-                            ? ROUNDNESS.ADAPTIVE_RADIUS
-                            : ROUNDNESS.PROPORTIONAL_RADIUS,
-                    }
-                    : null,
-            })),
+            elements: changeProperty(elements, appState, (el) => {
+                if (isElbowArrow(el)) {
+                    return el;
+                }
+                return newElementWith(el, {
+                    roundness: value === "round"
+                        ? {
+                            type: isUsingAdaptiveRadius(el.type)
+                                ? ROUNDNESS.ADAPTIVE_RADIUS
+                                : ROUNDNESS.PROPORTIONAL_RADIUS,
+                        }
+                        : null,
+                });
+            }),
             appState: {
                 ...appState,
                 currentItemRoundness: value,
@@ -593,7 +798,7 @@ export const actionChangeRoundness = register({
                             text: t("labels.round"),
                             icon: EdgeRoundIcon,
                         },
-                    ], value: getFormValue(elements, appState, (element) => hasLegacyRoundness ? null : element.roundness ? "round" : "sharp", (element) => element.hasOwnProperty("roundness"), (hasSelection) => hasSelection ? null : appState.currentItemRoundness), onChange: (value) => updateData(value) })] }));
+                    ], value: getFormValue(elements, appState, (element) => hasLegacyRoundness ? null : element.roundness ? "round" : "sharp", (element) => !isArrowElement(element) && element.hasOwnProperty("roundness"), (hasSelection) => hasSelection ? null : appState.currentItemRoundness), onChange: (value) => updateData(value) })] }));
     },
 });
 const getArrowheadOptions = (flip) => {
@@ -708,3 +913,123 @@ export const actionChangeArrowhead = register({
                                 : appState.currentItemEndArrowhead, true, appState.currentItemEndArrowhead), onChange: (value) => updateData({ position: "end", type: value }) })] })] }));
     },
 });
+export const actionChangeArrowType = register({
+    name: "changeArrowType",
+    label: "Change arrow types",
+    trackEvent: false,
+    perform: (elements, appState, value, app) => {
+        return {
+            elements: changeProperty(elements, appState, (el) => {
+                if (!isArrowElement(el)) {
+                    return el;
+                }
+                const newElement = newElementWith(el, {
+                    roundness: value === ARROW_TYPE.round
+                        ? {
+                            type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                        }
+                        : null,
+                    elbowed: value === ARROW_TYPE.elbow,
+                    points: value === ARROW_TYPE.elbow || el.elbowed
+                        ? [el.points[0], el.points[el.points.length - 1]]
+                        : el.points,
+                });
+                if (isElbowArrow(newElement)) {
+                    const elementsMap = app.scene.getNonDeletedElementsMap();
+                    app.dismissLinearEditor();
+                    const startGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, 0, elementsMap);
+                    const endGlobalPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(newElement, -1, elementsMap);
+                    const startHoveredElement = !newElement.startBinding &&
+                        getHoveredElementForBinding(tupleToCoors(startGlobalPoint), elements, elementsMap, true);
+                    const endHoveredElement = !newElement.endBinding &&
+                        getHoveredElementForBinding(tupleToCoors(endGlobalPoint), elements, elementsMap, true);
+                    const startElement = startHoveredElement
+                        ? startHoveredElement
+                        : newElement.startBinding &&
+                            elementsMap.get(newElement.startBinding.elementId);
+                    const endElement = endHoveredElement
+                        ? endHoveredElement
+                        : newElement.endBinding &&
+                            elementsMap.get(newElement.endBinding.elementId);
+                    const finalStartPoint = startHoveredElement
+                        ? bindPointToSnapToElementOutline(startGlobalPoint, endGlobalPoint, startHoveredElement, elementsMap)
+                        : startGlobalPoint;
+                    const finalEndPoint = endHoveredElement
+                        ? bindPointToSnapToElementOutline(endGlobalPoint, startGlobalPoint, endHoveredElement, elementsMap)
+                        : endGlobalPoint;
+                    startHoveredElement &&
+                        bindLinearElement(newElement, startHoveredElement, "start", elementsMap);
+                    endHoveredElement &&
+                        bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
+                    mutateElbowArrow(newElement, app.scene, [finalStartPoint, finalEndPoint].map((point) => [point[0] - newElement.x, point[1] - newElement.y]), [0, 0], {
+                        ...(startElement && newElement.startBinding
+                            ? {
+                                startBinding: {
+                                    // @ts-ignore TS cannot discern check above
+                                    ...newElement.startBinding,
+                                    ...calculateFixedPointForElbowArrowBinding(newElement, startElement, "start", elementsMap),
+                                },
+                            }
+                            : {}),
+                        ...(endElement && newElement.endBinding
+                            ? {
+                                endBinding: {
+                                    // @ts-ignore TS cannot discern check above
+                                    ...newElement.endBinding,
+                                    ...calculateFixedPointForElbowArrowBinding(newElement, endElement, "end", elementsMap),
+                                },
+                            }
+                            : {}),
+                    });
+                }
+                else {
+                    mutateElement(newElement, {
+                        startBinding: newElement.startBinding
+                            ? { ...newElement.startBinding, fixedPoint: null }
+                            : null,
+                        endBinding: newElement.endBinding
+                            ? { ...newElement.endBinding, fixedPoint: null }
+                            : null,
+                    }, false);
+                }
+                return newElement;
+            }),
+            appState: {
+                ...appState,
+                currentItemArrowType: value,
+            },
+            storeAction: StoreAction.CAPTURE,
+        };
+    },
+    PanelComponent: ({ elements, appState, updateData }) => {
+        return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.arrowtypes") }), _jsx(ButtonIconSelect, { group: "arrowtypes", options: [
+                        {
+                            value: ARROW_TYPE.sharp,
+                            text: t("labels.arrowtype_sharp"),
+                            icon: sharpArrowIcon,
+                            testId: "sharp-arrow",
+                        },
+                        {
+                            value: ARROW_TYPE.round,
+                            text: t("labels.arrowtype_round"),
+                            icon: roundArrowIcon,
+                            testId: "round-arrow",
+                        },
+                        {
+                            value: ARROW_TYPE.elbow,
+                            text: t("labels.arrowtype_elbowed"),
+                            icon: elbowArrowIcon,
+                            testId: "elbow-arrow",
+                        },
+                    ], value: getFormValue(elements, appState, (element) => {
+                        if (isArrowElement(element)) {
+                            return element.elbowed
+                                ? ARROW_TYPE.elbow
+                                : element.roundness
+                                    ? ARROW_TYPE.round
+                                    : ARROW_TYPE.sharp;
+                        }
+                        return null;
+                    }, (element) => isArrowElement(element), (hasSelection) => hasSelection ? null : appState.currentItemArrowType), onChange: (value) => updateData(value) })] }));
+    },
+});

package/dist/excalidraw/actions/actionSelectAll.d.ts

@@ -71,7 +71,9 @@ export declare const actionSelectAll: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -84,7 +86,7 @@ export declare const actionSelectAll: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/actionStyles.d.ts

@@ -64,7 +64,9 @@ export declare const actionCopyStyles: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -77,7 +79,7 @@ export declare const actionCopyStyles: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/actionStyles.js

@@ -4,11 +4,12 @@ import { t } from "../i18n";
 import { register } from "./register";
 import { newElementWith } from "../element/mutateElement";
 import { DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, } from "../constants";
-import { getBoundTextElement, getDefaultLineHeight, } from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
 import { hasBoundTextElement, canApplyRoundnessTypeToElement, getDefaultRoundnessTypeForElement, isFrameLikeElement, isArrowElement, } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 import { paintIcon } from "../components/icons";
 import { StoreAction } from "../store";
+import { getLineHeight } from "../fonts";
 // `copiedStyles` is exported only for tests.
 export let copiedStyles = "{}";
 export const actionCopyStyles = register({
@@ -88,7 +89,7 @@ export const actionPasteStyles = register({
                             textAlign: elementStylesToCopyFrom.textAlign ||
                                 DEFAULT_TEXT_ALIGN,
                             lineHeight: elementStylesToCopyFrom.lineHeight ||
-                                getDefaultLineHeight(fontFamily),
+                                getLineHeight(fontFamily),
                         });
                         let container = null;
                         if (newElement.containerId) {

package/dist/excalidraw/actions/actionToggleGridMode.d.ts

@@ -66,7 +66,9 @@ export declare const actionToggleGridMode: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -79,7 +81,7 @@ export declare const actionToggleGridMode: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/actionToggleObjectsSnapMode.d.ts

@@ -64,7 +64,9 @@ export declare const actionToggleObjectsSnapMode: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -77,7 +79,7 @@ export declare const actionToggleObjectsSnapMode: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/actionToggleStats.d.ts

@@ -67,7 +67,9 @@ export declare const actionToggleStats: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -80,7 +82,7 @@ export declare const actionToggleStats: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/actionToggleViewMode.d.ts

@@ -64,7 +64,9 @@ export declare const actionToggleViewMode: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -77,7 +79,7 @@ export declare const actionToggleViewMode: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;