@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItem.js

@@ -1,22 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { getDropdownMenuItemClassName, useHandleDropdownMenuItemClick, } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
-const DropdownMenuItem = ({ icon, onSelect, children, shortcut, className, selected, ...rest }) => {
-    const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
-    return (_jsx("button", { ...rest, onClick: handleClick, type: "button", className: getDropdownMenuItemClassName(className, selected), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+import { useExcalidrawAppState } from "../App";
+import { THEME } from "../../constants";
+const DropdownMenuItem = ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }) => {
+    const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (hovered) {
+            if (order === 0) {
+                // scroll into the first item differently, so it's visible what is above (i.e. group title)
+                ref.current?.scrollIntoView({ block: "end" });
+            }
+            else {
+                ref.current?.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }, [hovered, order]);
+    return (_jsx("button", { ...rest, ref: ref, value: value, onClick: handleClick, className: getDropdownMenuItemClassName(className, selected, hovered), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { textStyle: textStyle, icon: icon, shortcut: shortcut, children: children }) }));
 };
 DropdownMenuItem.displayName = "DropdownMenuItem";
-export const DropDownMenuItemBadge = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: "inline-flex",
-            marginLeft: "auto",
-            padding: "2px 4px",
-            background: "var(--color-promo)",
-            color: "var(--color-surface-lowest)",
-            borderRadius: 6,
-            fontSize: 9,
-            fontFamily: "Cascadia, monospace",
-        }, children: children }));
+export const DropDownMenuItemBadgeType = {
+    GREEN: "green",
+    RED: "red",
+    BLUE: "blue",
+};
+export const DropDownMenuItemBadge = ({ type = DropDownMenuItemBadgeType.BLUE, children, }) => {
+    const { theme } = useExcalidrawAppState();
+    const style = {
+        display: "inline-flex",
+        marginLeft: "auto",
+        padding: "2px 4px",
+        borderRadius: 6,
+        fontSize: 9,
+        fontFamily: "Cascadia, monospace",
+        border: theme === THEME.LIGHT ? "1.5px solid white" : "none",
+    };
+    switch (type) {
+        case DropDownMenuItemBadgeType.GREEN:
+            Object.assign(style, {
+                backgroundColor: "var(--background-color-badge)",
+                color: "var(--color-badge)",
+            });
+            break;
+        case DropDownMenuItemBadgeType.RED:
+            Object.assign(style, {
+                backgroundColor: "pink",
+                color: "darkred",
+            });
+            break;
+        case DropDownMenuItemBadgeType.BLUE:
+        default:
+            Object.assign(style, {
+                background: "var(--color-promo)",
+                color: "var(--color-surface-lowest)",
+            });
+    }
+    return (_jsx("div", { className: "DropDownMenuItemBadge", style: style, children: children }));
 };
 DropDownMenuItemBadge.displayName = "DropdownMenuItemBadge";
 DropdownMenuItem.Badge = DropDownMenuItemBadge;

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-declare const MenuItemContent: ({ icon, shortcut, children, }: {
+declare const MenuItemContent: ({ textStyle, icon, shortcut, children, }: {
     icon?: JSX.Element | undefined;
     shortcut?: string | undefined;
+    textStyle?: import("react").CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export default MenuItemContent;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDevice } from "../App";
-const MenuItemContent = ({ icon, shortcut, children, }) => {
+const MenuItemContent = ({ textStyle, icon, shortcut, children, }) => {
     const device = useDevice();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { className: "dropdown-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }))] }));
+    return (_jsxs(_Fragment, { children: [icon && _jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { style: textStyle, className: "dropdown-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }))] }));
 };
 export default MenuItemContent;

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

@@ -2,5 +2,5 @@ import React from "react";
 export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
-export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
+export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean, hovered?: boolean) => string;
 export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;

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

@@ -2,8 +2,9 @@ import React, { useContext } from "react";
 import { EVENT } from "../../constants";
 import { composeEventHandlers } from "../../utils";
 export const DropdownMenuContentPropsContext = React.createContext({});
-export const getDropdownMenuItemClassName = (className = "", selected = false) => {
-    return `dropdown-menu-item dropdown-menu-item-base ${className} ${selected ? "dropdown-menu-item--selected" : ""}`.trim();
+export const getDropdownMenuItemClassName = (className = "", selected = false, hovered = false) => {
+    return `dropdown-menu-item dropdown-menu-item-base ${className}
+  ${selected ? "dropdown-menu-item--selected" : ""} ${hovered ? "dropdown-menu-item--hovered" : ""}`.trim();
 };
 export const useHandleDropdownMenuItemClick = (origOnClick, onSelect) => {
     const DropdownMenuContentProps = useContext(DropdownMenuContentPropsContext);

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

@@ -140,6 +140,7 @@ export declare const FontSizeMediumIcon: JSX.Element;
 export declare const FontSizeLargeIcon: JSX.Element;
 export declare const FontSizeExtraLargeIcon: JSX.Element;
 export declare const fontSizeIcon: JSX.Element;
+export declare const FontFamilyHeadingIcon: JSX.Element;
 export declare const FontFamilyNormalIcon: JSX.Element;
 export declare const FontFamilyCodeIcon: JSX.Element;
 export declare const TextAlignLeftIcon: JSX.Element;
@@ -200,6 +201,9 @@ export declare const loginIcon: JSX.Element;
 export declare const youtubeIcon: JSX.Element;
 export declare const gridIcon: JSX.Element;
 export declare const lineEditorIcon: JSX.Element;
+export declare const sharpArrowIcon: JSX.Element;
+export declare const elbowArrowIcon: JSX.Element;
+export declare const roundArrowIcon: JSX.Element;
 export declare const collapseDownIcon: JSX.Element;
 export declare const collapseUpIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -201,6 +201,7 @@ export const FontSizeMediumIcon = createIcon(_jsxs(_Fragment, { children: [_jsx(
 export const FontSizeLargeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5.833 3.333v13.334h8.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const FontSizeExtraLargeIcon = createIcon(_jsx(_Fragment, { children: _jsx("path", { d: "m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), modifiedTablerIconProps);
 export const fontSizeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 7v-2h13v2" }), _jsx("path", { d: "M10 5v14" }), _jsx("path", { d: "M12 19h-4" }), _jsx("path", { d: "M15 13v-1h6v1" }), _jsx("path", { d: "M18 12v7" }), _jsx("path", { d: "M17 19h2" })] }), tablerIconProps);
+export const FontFamilyHeadingIcon = createIcon(_jsx(_Fragment, { children: _jsxs("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M7 12h10" }), _jsx("path", { d: "M7 5v14" }), _jsx("path", { d: "M17 5v14" }), _jsx("path", { d: "M15 19h4" }), _jsx("path", { d: "M15 5h4" }), _jsx("path", { d: "M5 19h4" }), _jsx("path", { d: "M5 5h4" })] }) }), tablerIconProps);
 export const FontFamilyNormalIcon = createIcon(_jsx(_Fragment, { children: _jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334" }) }) }), modifiedTablerIconProps);
 export const FontFamilyCodeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const TextAlignLeftIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "4", y1: "12", x2: "12", y2: "12" }), _jsx("line", { x1: "4", y1: "16", x2: "16", y2: "16" })] }), tablerIconProps);
@@ -259,5 +260,11 @@ export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_j
 export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
 export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
 export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), tablerIconProps);
+// arrow-up-right (modified)
+export const sharpArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 18l12 -12" }), _jsx("path", { d: "M18 10v-4h-4" })] }), tablerIconProps);
+// arrow-guide (modified)
+export const elbowArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7" }), _jsx("path", { d: "M18 4l3 3l-3 3" })] }), tablerIconProps);
+// arrow-ramp-right-2 (heavily modified)
+export const roundArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { d: "M16,12L20,9L16,6" }), _jsx("path", { d: "M6 20c0 -6.075 4.925 -11 11 -11h3" })] }), tablerIconProps);
 export const collapseDownIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 9l6 6l6 -6" })] }), tablerIconProps);
 export const collapseUpIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 15l6 -6l6 6" })] }), tablerIconProps);

package/dist/excalidraw/components/main-menu/MainMenu.d.ts

@@ -19,17 +19,26 @@ declare const MainMenu: React.FC<{
         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/welcome-screen/WelcomeScreen.Center.js

@@ -26,11 +26,11 @@ const Center = ({ children }) => {
 };
 Center.displayName = "Center";
 const Logo = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__logo virgil welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
+    return (_jsx("div", { className: "welcome-screen-center__logo excalifont welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
 };
 Logo.displayName = "Logo";
 const Heading = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor virgil", children: children }));
+    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor excalifont", children: children }));
 };
 Heading.displayName = "Heading";
 const Menu = ({ children }) => {

package/dist/excalidraw/components/welcome-screen/WelcomeScreen.Hints.js

@@ -4,17 +4,17 @@ import { useTunnels } from "../../context/tunnels";
 import { WelcomeScreenHelpArrow, WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow, } from "../icons";
 const MenuHint = ({ children }) => {
     const { WelcomeScreenMenuHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
+    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
 };
 MenuHint.displayName = "MenuHint";
 const ToolbarHint = ({ children }) => {
     const { WelcomeScreenToolbarHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
+    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
 };
 ToolbarHint.displayName = "ToolbarHint";
 const HelpHint = ({ children }) => {
     const { WelcomeScreenHelpHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
+    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
 };
 HelpHint.displayName = "HelpHint";
 export { HelpHint, MenuHint, ToolbarHint };

package/dist/excalidraw/constants.d.ts

@@ -1,4 +1,4 @@
-import type { AppProps } from "./types";
+import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 export declare const isDarwin: boolean;
 export declare const isWindows: boolean;
@@ -86,11 +86,23 @@ export declare const ENV: {
 export declare const CLASSES: {
     SHAPE_ACTIONS_MENU: string;
 };
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export declare const FONT_FAMILY: {
     Virgil: number;
     Helvetica: number;
     Cascadia: number;
-    Assistant: number;
+    Excalifont: number;
+    Nunito: number;
+    "Lilita One": number;
+    "Comic Shanns": number;
+    "Liberation Sans": number;
 };
 export declare const THEME: {
     readonly LIGHT: "light";
@@ -285,3 +297,6 @@ export declare const STATS_PANELS: {
     readonly elementProperties: 2;
 };
 export declare const MIN_WIDTH_OR_HEIGHT = 1;
+export declare const ARROW_TYPE: {
+    [T in AppState["currentItemArrowType"]]: T;
+};

package/dist/excalidraw/constants.js

@@ -99,12 +99,24 @@ export const ENV = {
 export const CLASSES = {
     SHAPE_ACTIONS_MENU: "App-menu__left",
 };
-// 1-based in case we ever do `if(element.fontFamily)`
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export const FONT_FAMILY = {
     Virgil: 1,
     Helvetica: 2,
     Cascadia: 3,
-    Assistant: 4,
+    // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
+    Excalifont: 5,
+    Nunito: 6,
+    "Lilita One": 7,
+    "Comic Shanns": 8,
+    "Liberation Sans": 9,
 };
 export const THEME = {
     LIGHT: "light",
@@ -128,7 +140,7 @@ export const FRAME_STYLE = {
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Virgil;
+export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
@@ -231,7 +243,7 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
+export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const ENCRYPTION_KEY_BITS = 128;
 export const VERSIONS = {
@@ -336,3 +348,8 @@ export const EDITOR_LS_KEYS = {
 export const DEFAULT_FILENAME = "Untitled";
 export const STATS_PANELS = { generalStats: 1, elementProperties: 2 };
 export const MIN_WIDTH_OR_HEIGHT = 1;
+export const ARROW_TYPE = {
+    sharp: "sharp",
+    round: "round",
+    elbow: "elbow",
+};

package/dist/excalidraw/data/reconcile.js

@@ -1,4 +1,5 @@
-import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { ENV } from "../constants";
+import { orderByFractionalIndex, syncInvalidIndices, validateFractionalIndices, } from "../fractionalIndex";
 import { arrayToMap } from "../utils";
 const shouldDiscardRemoteElement = (localAppState, local, remote) => {
     if (local &&
@@ -43,6 +44,22 @@ export const reconcileElements = (localElements, remoteElements, localAppState)
         }
     }
     const orderedElements = orderByFractionalIndex(reconciledElements);
+    if (import.meta.env.DEV ||
+        import.meta.env.MODE === ENV.TEST ||
+        window?.DEBUG_FRACTIONAL_INDICES) {
+        const elements = syncInvalidIndices(
+        // create new instances due to the mutation
+        orderedElements.map((x) => ({ ...x })));
+        validateFractionalIndices(elements, {
+            // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+            shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+            includeBoundTextValidation: true,
+            reconciliationContext: {
+                localElements,
+                remoteElements,
+            },
+        });
+    }
     // de-duplicate indices
     syncInvalidIndices(orderedElements);
     return orderedElements;

package/dist/excalidraw/data/restore.js

@@ -1,5 +1,5 @@
 import { getNonDeletedElements, getNormalizedDimensions, isInvisiblySmallElement, refreshTextDimensions, } from "../element";
-import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
+import { isArrowElement, isElbowArrow, isLinearElement, isTextElement, isUsingAdaptiveRadius, } from "../element/typeChecks";
 import { randomId } from "../random";
 import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
 import { getDefaultAppState } from "../appState";
@@ -7,10 +7,11 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
-import { detectLineHeight, getContainerElement, getDefaultLineHeight, } from "../element/textElement";
+import { detectLineHeight, getContainerElement } from "../element/textElement";
 import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
+import { getLineHeight } from "../fonts";
 export const AllowedExcalidrawActiveTools = {
     selection: true,
     text: true,
@@ -35,11 +36,17 @@ const getFontFamilyByName = (fontFamilyName) => {
     }
     return DEFAULT_FONT_FAMILY;
 };
-const repairBinding = (binding) => {
+const repairBinding = (element, binding) => {
     if (!binding) {
         return null;
     }
-    return { ...binding, focus: binding.focus || 0 };
+    return {
+        ...binding,
+        focus: binding.focus || 0,
+        fixedPoint: isElbowArrow(element)
+            ? binding.fixedPoint ?? [0, 0]
+            : null,
+    };
 };
 const restoreElementWithProperties = (element, extra) => {
     const base = {
@@ -116,7 +123,7 @@ const restoreElement = (element) => {
                         detectLineHeight(element)
                     : // no element height likely means programmatic use, so default
                         // to a fixed line height
-                        getDefaultLineHeight(element.fontFamily));
+                        getLineHeight(element.fontFamily));
             element = restoreElementWithProperties(element, {
                 fontSize,
                 fontFamily,
@@ -153,8 +160,7 @@ const restoreElement = (element) => {
         // @ts-ignore LEGACY type
         // eslint-disable-next-line no-fallthrough
         case "draw":
-        case "arrow": {
-            const { startArrowhead = null, endArrowhead = element.type === "arrow" ? "arrow" : null, } = element;
+            const { startArrowhead = null, endArrowhead = null } = element;
             let x = element.x;
             let y = element.y;
             let points = // migrate old arrow model to new one
@@ -171,14 +177,42 @@ const restoreElement = (element) => {
                 type: element.type === "draw"
                     ? "line"
                     : element.type,
-                startBinding: repairBinding(element.startBinding),
-                endBinding: repairBinding(element.endBinding),
+                startBinding: repairBinding(element, element.startBinding),
+                endBinding: repairBinding(element, element.endBinding),
+                lastCommittedPoint: null,
+                startArrowhead,
+                endArrowhead,
+                points,
+                x,
+                y,
+                ...getSizeFromPoints(points),
+            });
+        case "arrow": {
+            const { startArrowhead = null, endArrowhead = "arrow" } = element;
+            let x = element.x;
+            let y = element.y;
+            let points = // migrate old arrow model to new one
+             !Array.isArray(element.points) || element.points.length < 2
+                ? [
+                    [0, 0],
+                    [element.width, element.height],
+                ]
+                : element.points;
+            if (points[0][0] !== 0 || points[0][1] !== 0) {
+                ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
+            }
+            // TODO: Separate arrow from linear element
+            return restoreElementWithProperties(element, {
+                type: element.type,
+                startBinding: repairBinding(element, element.startBinding),
+                endBinding: repairBinding(element, element.endBinding),
                 lastCommittedPoint: null,
                 startArrowhead,
                 endArrowhead,
                 points,
                 x,
                 y,
+                elbowed: element.elbowed,
                 ...getSizeFromPoints(points),
             });
         }
@@ -314,6 +348,18 @@ localElements, opts) => {
         if (opts.refreshDimensions && isTextElement(element)) {
             Object.assign(element, refreshTextDimensions(element, getContainerElement(element, restoredElementsMap), restoredElementsMap));
         }
+        if (isLinearElement(element)) {
+            if (element.startBinding &&
+                (!restoredElementsMap.has(element.startBinding.elementId) ||
+                    !isArrowElement(element))) {
+                element.startBinding = null;
+            }
+            if (element.endBinding &&
+                (!restoredElementsMap.has(element.endBinding.elementId) ||
+                    !isArrowElement(element))) {
+                element.endBinding = null;
+            }
+        }
     }
     return restoredElements;
 };

package/dist/excalidraw/data/transform.js

@@ -1,12 +1,14 @@
 import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
 import { getCommonBounds, newElement, newLinearElement, redrawTextBoundingBox, } from "../element";
 import { bindLinearElement } from "../element/binding";
-import { newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
-import { getDefaultLineHeight, measureText, normalizeText, } from "../element/textElement";
+import { newArrowElement, newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
+import { measureText, normalizeText } from "../element/textElement";
 import { arrayToMap, assertNever, cloneJSON, getFontString, toBrandedType, } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
+import { getLineHeight } from "../fonts";
+import { isArrowElement } from "../element/typeChecks";
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
     width: 100,
     height: 0,
@@ -273,7 +275,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
             case "arrow": {
                 const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
                 const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-                excalidrawElement = newLinearElement({
+                excalidrawElement = newArrowElement({
                     width,
                     height,
                     endArrowhead: "arrow",
@@ -282,6 +284,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
                         [width, height],
                     ],
                     ...element,
+                    type: "arrow",
                 });
                 Object.assign(excalidrawElement, getSizeFromPoints(excalidrawElement.points));
                 break;
@@ -289,7 +292,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
             case "text": {
                 const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
                 const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
-                const lineHeight = element?.lineHeight || getDefaultLineHeight(fontFamily);
+                const lineHeight = element?.lineHeight || getLineHeight(fontFamily);
                 const text = element.text ?? "";
                 const normalizedText = normalizeText(text);
                 const metrics = measureText(normalizedText, getFontString({ fontFamily, fontSize }), lineHeight);
@@ -362,7 +365,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
                     let [container, text] = bindTextToContainer(excalidrawElement, element?.label, elementsMap);
                     elementStore.add(container);
                     elementStore.add(text);
-                    if (container.type === "arrow") {
+                    if (isArrowElement(container)) {
                         const originalStart = element.type === "arrow" ? element?.start : undefined;
                         const originalEnd = element.type === "arrow" ? element?.end : undefined;
                         if (originalStart && originalStart.id) {

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

@@ -1,6 +1,9 @@
-import type { ExcalidrawBindableElement, ExcalidrawElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
-import type { AppClassProperties, AppState } from "../types";
+import type { ExcalidrawBindableElement, ExcalidrawElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap, OrderedExcalidrawElement, ExcalidrawElbowArrowElement, FixedPoint } from "./types";
+import type { Bounds } from "./bounds";
+import type { AppState } from "../types";
 import type { ElementUpdate } from "./mutateElement";
+import type Scene from "../scene/Scene";
+import { type Heading } from "./heading";
 export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
 export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
@@ -9,29 +12,43 @@ export type SuggestedPointBinding = [
 ];
 export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
-export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], app: AppClassProperties, isBindingEnabled: boolean, draggingPoints: readonly number[] | null) => void;
-export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => SuggestedBinding[];
+export declare const FIXED_BINDING_DISTANCE = 5;
+export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap, scene: Scene) => void;
+export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, isBindingEnabled: boolean, draggingPoints: readonly number[] | null) => void;
+export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => SuggestedBinding[];
 export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
-}, app: AppClassProperties) => void;
+}, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[]) => void;
 export declare const bindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDeleted<ExcalidrawLinearElement>, alreadyBoundToId: ExcalidrawBindableElement["id"] | undefined, bindableElement: ExcalidrawBindableElement) => boolean;
 export declare const getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
-}, app: AppClassProperties) => NonDeleted<ExcalidrawBindableElement> | null;
-export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, options?: {
+}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => NonDeleted<ExcalidrawBindableElement> | null;
+export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, scene: Scene, options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: {
+    oldSize?: {
         width: number;
         height: number;
     };
+    changedElements?: Map<string, OrderedExcalidrawElement>;
 }) => void;
+export declare const getHeadingForElbowArrowSnap: (point: readonly [number, number], otherPoint: readonly [number, number], bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, elementsMap: ElementsMap, origPoint: readonly [number, number]) => Heading;
+export declare const bindPointToSnapToElementOutline: (point: readonly [number, number], otherPoint: readonly [number, number], bindableElement: ExcalidrawBindableElement | undefined, elementsMap: ElementsMap) => readonly [number, number];
+export declare const avoidRectangularCorner: (element: ExcalidrawBindableElement, p: readonly [number, number]) => readonly [number, number];
+export declare const snapToMid: (element: ExcalidrawBindableElement, p: readonly [number, number], tolerance?: number) => readonly [number, number];
+export declare const calculateFixedPointForElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawElbowArrowElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap) => {
+    fixedPoint: FixedPoint;
+};
 export declare const fixBindingsAfterDuplication: (sceneElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>, duplicatesServeAsOld?: "duplicatesServeAsOld" | undefined) => void;
 export declare const fixBindingsAfterDeletion: (sceneElements: readonly ExcalidrawElement[], deletedElements: readonly ExcalidrawElement[]) => void;
+export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
+    x: number;
+    y: number;
+}, elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => boolean;
 export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
+export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
 export declare const bindingProperties: Set<BindableProp | BindingProp>;
 export type BindableProp = "boundElements";
 export type BindingProp = "frameId" | "containerId" | "startBinding" | "endBinding";
@@ -73,3 +90,5 @@ export declare class BindableElement {
      */
     static rebindAffected: (elements: ElementsMap, bindableElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void) => void;
 }
+export declare const getGlobalFixedPointForBindableElement: (fixedPointRatio: [number, number], element: ExcalidrawBindableElement) => [number, number];
+export declare const getArrowLocalFixedPoints: (arrow: ExcalidrawElbowArrowElement, elementsMap: ElementsMap) => (readonly [number, number])[];