@dwelle/excalidraw 0.5.0-b2180aef → 0.5.0-bb58eff

package/dist/excalidraw/components/UserList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./UserList.scss";
-import React from "react";
+import React, { useLayoutEffect } from "react";
 import clsx from "clsx";
 import { Tooltip } from "./Tooltip";
 import { useExcalidrawActionManager } from "./App";
@@ -9,24 +9,28 @@ import { Island } from "./Island";
 import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
-const FIRST_N_AVATARS = 3;
+import { supportsResizeObserver } from "../constants";
+const DEFAULT_MAX_AVATARS = 4;
 const SHOW_COLLABORATORS_FILTER_AT = 8;
-const ConditionalTooltipWrapper = ({ shouldWrap, children, clientId, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children }, clientId)) : (_jsx(React.Fragment, { children: children }, clientId));
-const renderCollaborator = ({ actionManager, collaborator, clientId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
+const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(React.Fragment, { children: children }));
+const renderCollaborator = ({ actionManager, collaborator, socketId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
     const data = {
-        clientId,
+        socketId,
         collaborator,
         withName,
         isBeingFollowed,
     };
     const avatarJSX = actionManager.renderAction("goToCollaborator", data);
-    return (_jsx(ConditionalTooltipWrapper, { clientId: clientId, username: collaborator.username, shouldWrap: shouldWrapWithTooltip, children: avatarJSX }, clientId));
+    return (_jsx(ConditionalTooltipWrapper, { username: collaborator.username, shouldWrap: shouldWrapWithTooltip, children: avatarJSX }, socketId));
 };
 const collaboratorComparatorKeys = [
     "avatarUrl",
     "id",
     "socketId",
     "username",
+    "isInCall",
+    "isSpeaking",
+    "isMuted",
 ];
 export const UserList = React.memo(({ className, mobile, collaborators, userToFollow }) => {
     const actionManager = useExcalidrawActionManager();
@@ -37,47 +41,68 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         // filter on user id, else fall back on unique socketId
         userId, { ...collaborator, socketId });
     });
-    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(([_, collaborator]) => collaborator.username?.trim());
+    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap.values()).filter((collaborator) => collaborator.username?.trim());
     const [searchTerm, setSearchTerm] = React.useState("");
-    if (uniqueCollaboratorsArray.length === 0) {
-        return null;
-    }
+    const userListWrapper = React.useRef(null);
+    useLayoutEffect(() => {
+        if (userListWrapper.current) {
+            const updateMaxAvatars = (width) => {
+                const maxAvatars = Math.max(1, Math.min(8, Math.floor(width / 38)));
+                setMaxAvatars(maxAvatars);
+            };
+            updateMaxAvatars(userListWrapper.current.clientWidth);
+            if (!supportsResizeObserver) {
+                return;
+            }
+            const resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const { width } = entry.contentRect;
+                    updateMaxAvatars(width);
+                }
+            });
+            resizeObserver.observe(userListWrapper.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }, []);
+    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.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm))
         : uniqueCollaboratorsArray;
-    const firstNCollaborators = uniqueCollaboratorsArray.slice(0, FIRST_N_AVATARS);
-    const firstNAvatarsJSX = firstNCollaborators.map(([clientId, collaborator]) => renderCollaborator({
+    const firstNCollaborators = uniqueCollaboratorsArray.slice(0, maxAvatars - 1);
+    const firstNAvatarsJSX = firstNCollaborators.map((collaborator) => renderCollaborator({
         actionManager,
         collaborator,
-        clientId,
+        socketId: collaborator.socketId,
         shouldWrapWithTooltip: true,
         isBeingFollowed: collaborator.socketId === userToFollow,
     }));
-    return mobile ? (_jsx("div", { className: clsx("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(([clientId, collaborator]) => renderCollaborator({
+    return mobile ? (_jsx("div", { className: clsx("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map((collaborator) => renderCollaborator({
             actionManager,
             collaborator,
-            clientId,
+            socketId: collaborator.socketId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow,
-        })) })) : (_jsxs("div", { className: clsx("UserList", className), children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
-                    if (!isOpen) {
-                        setSearchTerm("");
-                    }
-                }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - FIRST_N_AVATARS] }), _jsx(Popover.Content, { style: {
-                            zIndex: 2,
-                            width: "13rem",
-                            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(([clientId, collaborator]) => renderCollaborator({
-                                            actionManager,
-                                            collaborator,
-                                            clientId,
-                                            withName: 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: {
+                                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,
+                                            }))] })] }) })] }))] }) }));
 }, (prev, next) => {
     if (prev.collaborators.size !== next.collaborators.size ||
         prev.mobile !== next.mobile ||
@@ -85,9 +110,13 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         prev.userToFollow !== next.userToFollow) {
         return false;
     }
+    const nextCollaboratorSocketIds = next.collaborators.keys();
     for (const [socketId, collaborator] of prev.collaborators) {
         const nextCollaborator = next.collaborators.get(socketId);
         if (!nextCollaborator ||
+            // this checks order of collaborators in the map is the same
+            // as previous render
+            socketId !== nextCollaboratorSocketIds.next().value ||
             !isShallowEqual(collaborator, nextCollaborator, collaboratorComparatorKeys)) {
             return false;
         }

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import { renderInteractiveScene } from "../../renderer/renderScene";
 import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
 import { CURSOR_TYPE } from "../../constants";
 import { t } from "../../i18n";
 import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";
 const InteractiveCanvas = (props) => {
     const isComponentMounted = useRef(false);
     useEffect(() => {
@@ -12,37 +12,34 @@ const InteractiveCanvas = (props) => {
             isComponentMounted.current = true;
             return;
         }
-        const cursorButton = {};
-        const pointerViewportCoords = {};
-        const remoteSelectedElementIds = {};
-        const pointerUsernames = {};
-        const pointerUserStates = {};
+        const remotePointerButton = new Map();
+        const remotePointerViewportCoords = new Map();
+        const remoteSelectedElementIds = new Map();
+        const remotePointerUsernames = new Map();
+        const remotePointerUserStates = new Map();
         props.appState.collaborators.forEach((user, socketId) => {
             if (user.selectedElementIds) {
                 for (const id of Object.keys(user.selectedElementIds)) {
-                    if (!(id in remoteSelectedElementIds)) {
-                        remoteSelectedElementIds[id] = [];
+                    if (!remoteSelectedElementIds.has(id)) {
+                        remoteSelectedElementIds.set(id, []);
                     }
-                    remoteSelectedElementIds[id].push(socketId);
+                    remoteSelectedElementIds.get(id).push(socketId);
                 }
             }
             if (!user.pointer || user.pointer.renderCursor === false) {
                 return;
             }
             if (user.username) {
-                pointerUsernames[socketId] = user.username;
+                remotePointerUsernames.set(socketId, user.username);
             }
             if (user.userState) {
-                pointerUserStates[socketId] = user.userState;
+                remotePointerUserStates.set(socketId, user.userState);
             }
-            pointerViewportCoords[socketId] = {
-                ...sceneCoordsToViewportCoords({
-                    sceneX: user.pointer.x,
-                    sceneY: user.pointer.y,
-                }, props.appState),
-                id: user.id || socketId,
-            };
-            cursorButton[socketId] = user.button;
+            remotePointerViewportCoords.set(socketId, sceneCoordsToViewportCoords({
+                sceneX: user.pointer.x,
+                sceneY: user.pointer.y,
+            }, props.appState));
+            remotePointerButton.set(socketId, user.button);
         });
         const selectionColor = (props.containerRef?.current &&
             getComputedStyle(props.containerRef.current).getPropertyValue("--color-selection")) ||
@@ -55,11 +52,11 @@ const InteractiveCanvas = (props) => {
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
-                remotePointerViewportCoords: pointerViewportCoords,
-                remotePointerButton: cursorButton,
+                remotePointerViewportCoords,
+                remotePointerButton,
                 remoteSelectedElementIds,
-                remotePointerUsernames: pointerUsernames,
-                remotePointerUserStates: pointerUserStates,
+                remotePointerUsernames,
+                remotePointerUserStates,
                 selectionColor,
                 renderScrollbars: false,
             },

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import { renderStaticScene } from "../../renderer/renderScene";
+import { renderStaticScene } from "../../renderer/staticScene";
 import { isShallowEqual } from "../../utils";
 import { isRenderThrottlingEnabled } from "../../reactUtils";
 const StaticCanvas = (props) => {

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

@@ -3,15 +3,35 @@ import { Island } from "../Island";
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { useStable } from "../../hooks/useStable";
 const MenuContent = ({ children, onClickOutside, className = "", onSelect, style, }) => {
     const device = useDevice();
     const menuRef = useRef(null);
+    const callbacksRef = useStable({ onClickOutside });
     useOutsideClick(menuRef, () => {
-        onClickOutside?.();
+        callbacksRef.onClickOutside?.();
     });
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === KEYS.ESCAPE) {
+                event.stopImmediatePropagation();
+                callbacksRef.onClickOutside?.();
+            }
+        };
+        document.addEventListener(EVENT.KEYDOWN, onKeyDown, {
+            // so that we can stop propagation of the event before it reaches
+            // event handlers that were bound before this one
+            capture: true,
+        });
+        return () => {
+            document.removeEventListener(EVENT.KEYDOWN, onKeyDown);
+        };
+    }, [callbacksRef]);
     const classNames = clsx(`dropdown-menu ${className}`, {
         "dropdown-menu--mobile": device.editor.isMobile,
     }).trim();

package/dist/excalidraw/components/hyperlink/Hyperlink.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AppState, ExcalidrawProps } from "../../types";
+import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import "./Hyperlink.scss";
+export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
+    element: NonDeletedExcalidrawElement;
+    elementsMap: ElementsMap;
+    setAppState: React.Component<any, AppState>["setState"];
+    onLinkOpen: ExcalidrawProps["onLinkOpen"];
+    setToast: (toast: {
+        message: string;
+        closable?: boolean;
+        duration?: number;
+    } | null) => void;
+    updateEmbedValidationStatus: (element: ExcalidrawEmbeddableElement, status: boolean) => void;
+}) => JSX.Element | null;
+export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
+export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState, elementsMap: ElementsMap) => void;
+export declare const hideHyperlinkToolip: () => void;

package/dist/excalidraw/{element → components/hyperlink}/Hyperlink.js

@@ -1,36 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getShortcutKey, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, wrapEvent, } from "../utils";
-import { getEmbedLink, embeddableURLValidator } from "./embeddable";
-import { mutateElement } from "./mutateElement";
-import { register } from "../actions/register";
-import { ToolButton } from "../components/ToolButton";
-import { FreedrawIcon, LinkIcon, TrashIcon } from "../components/icons";
-import { t } from "../i18n";
+import { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, wrapEvent, } from "../../utils";
+import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
+import { mutateElement } from "../../element/mutateElement";
+import { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon } from "../icons";
+import { t } from "../../i18n";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import clsx from "clsx";
-import { KEYS } from "../keys";
-import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
-import { rotate } from "../math";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
-import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
-import { getSelectedElements } from "../scene";
-import { isPointHittingElementBoundingBox } from "./collision";
-import { getElementAbsoluteCoords } from ".";
-import { isLocalLink, normalizeLink } from "../data/url";
+import { KEYS } from "../../keys";
+import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getSelectedElements } from "../../scene";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
-import { trackEvent } from "../analytics";
-import { useAppProps, useExcalidrawAppState } from "../components/App";
-import { isEmbeddableElement } from "./typeChecks";
+import { trackEvent } from "../../analytics";
+import { useAppProps, useExcalidrawAppState } from "../App";
+import { isEmbeddableElement } from "../../element/typeChecks";
+import { getLinkHandleFromCoords } from "./helpers";
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
 const CONTAINER_PADDING = 5;
 const CONTAINER_HEIGHT = 42;
 const AUTO_HIDE_TIMEOUT = 500;
-export const EXTERNAL_LINK_IMG = document.createElement("img");
-EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`)}`;
 let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
 const embeddableLinkCache = new Map();
-export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }) => {
+export const Hyperlink = ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }) => {
     const appState = useExcalidrawAppState();
     const appProps = useAppProps();
     const linkVal = element.link || "";
@@ -69,8 +65,11 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEm
             else {
                 const { width, height } = element;
                 const embedLink = getEmbedLink(link);
-                if (embedLink?.warning) {
-                    setToast({ message: embedLink.warning, closable: true });
+                if (embedLink?.error instanceof URIError) {
+                    setToast({
+                        message: t("toast.unrecognizedLinkFormat"),
+                        closable: true,
+                    });
                 }
                 const ar = embedLink
                     ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h
@@ -124,7 +123,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEm
             if (timeoutId) {
                 clearTimeout(timeoutId);
             }
-            const shouldHide = shouldHideLinkPopup(element, appState, [
+            const shouldHide = shouldHideLinkPopup(element, elementsMap, appState, [
                 event.clientX,
                 event.clientY,
             ]);
@@ -141,7 +140,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEm
                 clearTimeout(timeoutId);
             }
         };
-    }, [appState, element, isEditing, setAppState]);
+    }, [appState, element, isEditing, setAppState, elementsMap]);
     const handleRemove = useCallback(() => {
         trackEvent("hyperlink", "delete");
         mutateElement(element, { link: null });
@@ -154,7 +153,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEm
         trackEvent("hyperlink", "edit", "popup-ui");
         setAppState({ showHyperlinkPopup: "editor" });
     };
-    const { x, y } = getCoordsForPopover(element, appState);
+    const { x, y } = getCoordsForPopover(element, appState, elementsMap);
     if (appState.contextMenu ||
         appState.draggingElement ||
         appState.resizingElement ||
@@ -195,43 +194,13 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, updateEm
                     }
                 }, rel: "noopener noreferrer", children: element.link })) : (_jsx("div", { className: "excalidraw-hyperlinkContainer-link", children: t("labels.link.empty") })), _jsxs("div", { className: "excalidraw-hyperlinkContainer__buttons", children: [!isEditing && (_jsx(ToolButton, { type: "button", title: t("buttons.edit"), "aria-label": t("buttons.edit"), label: t("buttons.edit"), onClick: onEdit, className: "excalidraw-hyperlinkContainer--edit", icon: FreedrawIcon })), linkVal && !isEmbeddableElement(element) && (_jsx(ToolButton, { type: "button", title: t("buttons.remove"), "aria-label": t("buttons.remove"), label: t("buttons.remove"), onClick: handleRemove, className: "excalidraw-hyperlinkContainer--remove", icon: TrashIcon }))] })] }));
 };
-const getCoordsForPopover = (element, appState) => {
-    const [x1, y1] = getElementAbsoluteCoords(element);
+const getCoordsForPopover = (element, appState, elementsMap) => {
+    const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
     const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords({ sceneX: x1 + element.width / 2, sceneY: y1 }, appState);
     const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;
     const y = viewportY - appState.offsetTop - SPACE_BOTTOM;
     return { x, y };
 };
-export const actionLink = register({
-    name: "hyperlink",
-    perform: (elements, appState) => {
-        if (appState.showHyperlinkPopup === "editor") {
-            return false;
-        }
-        return {
-            elements,
-            appState: {
-                ...appState,
-                showHyperlinkPopup: "editor",
-                openMenu: null,
-            },
-            commitToHistory: true,
-        };
-    },
-    trackEvent: { category: "hyperlink", action: "click" },
-    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
-    contextItemLabel: (elements, appState) => getContextMenuLabel(elements, appState),
-    predicate: (elements, appState) => {
-        const selectedElements = getSelectedElements(elements, appState);
-        return selectedElements.length === 1;
-    },
-    PanelComponent: ({ elements, appState, updateData }) => {
-        const selectedElements = getSelectedElements(elements, appState);
-        return (_jsx(ToolButton, { type: "button", icon: LinkIcon, "aria-label": t(getContextMenuLabel(elements, appState)), title: `${isEmbeddableElement(elements[0])
-                ? t("labels.link.labelEmbed")
-                : t("labels.link.label")} - ${getShortcutKey("CtrlOrCmd+K")}`, onClick: () => updateData(null), selected: selectedElements.length === 1 && !!selectedElements[0].link }));
-    },
-});
 export const getContextMenuLabel = (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     const label = selectedElements[0].link
@@ -243,56 +212,14 @@ export const getContextMenuLabel = (elements, appState) => {
             : "labels.link.create";
     return label;
 };
-export const getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
-    const size = DEFAULT_LINK_SIZE;
-    const linkWidth = size / appState.zoom.value;
-    const linkHeight = size / appState.zoom.value;
-    const linkMarginY = size / appState.zoom.value;
-    const centerX = (x1 + x2) / 2;
-    const centerY = (y1 + y2) / 2;
-    const centeringOffset = (size - 8) / (2 * appState.zoom.value);
-    const dashedLineMargin = 4 / appState.zoom.value;
-    // Same as `ne` resize handle
-    const x = x2 + dashedLineMargin - centeringOffset;
-    const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
-    const [rotatedX, rotatedY] = rotate(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);
-    return [
-        rotatedX - linkWidth / 2,
-        rotatedY - linkHeight / 2,
-        linkWidth,
-        linkHeight,
-    ];
-};
-export const isPointHittingLinkIcon = (element, appState, [x, y]) => {
-    const threshold = 4 / appState.zoom.value;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
-    const hitLink = x > linkX - threshold &&
-        x < linkX + threshold + linkWidth &&
-        y > linkY - threshold &&
-        y < linkY + linkHeight + threshold;
-    return hitLink;
-};
-export const isPointHittingLink = (element, appState, [x, y], isMobile) => {
-    if (!element.link || appState.selectedElementIds[element.id]) {
-        return false;
-    }
-    const threshold = 4 / appState.zoom.value;
-    if (!isMobile &&
-        appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, [x, y], threshold, null)) {
-        return true;
-    }
-    return isPointHittingLinkIcon(element, appState, [x, y]);
-};
 let HYPERLINK_TOOLTIP_TIMEOUT_ID = null;
-export const showHyperlinkTooltip = (element, appState) => {
+export const showHyperlinkTooltip = (element, appState, elementsMap) => {
     if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
         clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
     }
-    HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState), HYPERLINK_TOOLTIP_DELAY);
+    HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState, elementsMap), HYPERLINK_TOOLTIP_DELAY);
 };
-const renderTooltip = (element, appState) => {
+const renderTooltip = (element, appState, elementsMap) => {
     if (!element.link) {
         return;
     }
@@ -300,7 +227,7 @@ const renderTooltip = (element, appState) => {
     tooltipDiv.classList.add("excalidraw-tooltip--visible");
     tooltipDiv.style.maxWidth = "20rem";
     tooltipDiv.textContent = element.link;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
     const linkViewportCoords = sceneCoordsToViewportCoords({ sceneX: linkX, sceneY: linkY }, appState);
     updateTooltipPosition(tooltipDiv, {
@@ -321,14 +248,14 @@ export const hideHyperlinkToolip = () => {
         getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
     }
 };
-export const shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {
+const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) => {
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)) {
+    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
         return false;
     }
-    const [x1, y1, x2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
     // hit box to prevent hiding when hovered in the vertical area between element and popover
     if (sceneX >= x1 &&
         sceneX <= x2 &&
@@ -337,7 +264,7 @@ export const shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {
         return false;
     }
     // hit box to prevent hiding when hovered around popover within threshold
-    const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState);
+    const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState, elementsMap);
     if (clientX >= popoverX - threshold &&
         clientX <= popoverX + CONTAINER_WIDTH + CONTAINER_PADDING * 2 + threshold &&
         clientY >= popoverY - threshold &&

package/dist/excalidraw/components/hyperlink/helpers.d.ts

@@ -0,0 +1,7 @@
+import { Bounds } from "../../element/bounds";
+import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import { AppState, UIAppState } from "../../types";
+export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
+export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => Bounds;
+export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number]) => boolean;
+export declare const isPointHittingLink: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -0,0 +1,49 @@
+import { MIME_TYPES } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { rotate } from "../../math";
+import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+export const EXTERNAL_LINK_IMG = document.createElement("img");
+EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`)}`;
+export const getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
+    const size = DEFAULT_LINK_SIZE;
+    const linkWidth = size / appState.zoom.value;
+    const linkHeight = size / appState.zoom.value;
+    const linkMarginY = size / appState.zoom.value;
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+    const centeringOffset = (size - 8) / (2 * appState.zoom.value);
+    const dashedLineMargin = 4 / appState.zoom.value;
+    // Same as `ne` resize handle
+    const x = x2 + dashedLineMargin - centeringOffset;
+    const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
+    const [rotatedX, rotatedY] = rotate(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);
+    return [
+        rotatedX - linkWidth / 2,
+        rotatedY - linkHeight / 2,
+        linkWidth,
+        linkHeight,
+    ];
+};
+export const isPointHittingLinkIcon = (element, elementsMap, appState, [x, y]) => {
+    const threshold = 4 / appState.zoom.value;
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
+    const hitLink = x > linkX - threshold &&
+        x < linkX + threshold + linkWidth &&
+        y > linkY - threshold &&
+        y < linkY + linkHeight + threshold;
+    return hitLink;
+};
+export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
+    if (!element.link || appState.selectedElementIds[element.id]) {
+        return false;
+    }
+    const threshold = 4 / appState.zoom.value;
+    if (!isMobile &&
+        appState.viewModeEnabled &&
+        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        return true;
+    }
+    return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);
+};

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

@@ -60,6 +60,7 @@ export declare const UndoIcon: JSX.Element;
 export declare const RedoIcon: JSX.Element;
 export declare const questionCircle: JSX.Element;
 export declare const share: JSX.Element;
+export declare const warning: JSX.Element;
 export declare const shareIOS: JSX.Element;
 export declare const shareWindows: JSX.Element;
 export declare const resetZoom: JSX.Element;
@@ -172,4 +173,6 @@ export declare const eyeIcon: JSX.Element;
 export declare const eyeClosedIcon: JSX.Element;
 export declare const brainIcon: JSX.Element;
 export declare const searchIcon: JSX.Element;
+export declare const microphoneIcon: JSX.Element;
+export declare const microphoneMutedIcon: JSX.Element;
 export {};