snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)
Some checks failed
Tests / test (push) Failing after 15s
Some checks failed
Tests / test (push) Failing after 15s
This commit is contained in:
upstream-mirror
70
packages/excalidraw/components/hyperlink/Hyperlink.scss
Normal file
70
packages/excalidraw/components/hyperlink/Hyperlink.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
@use "../../css/variables.module" as *;
|
||||
|
||||
.excalidraw-hyperlinkContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
|
||||
z-index: var(--zIndex-hyperlinkContainer);
|
||||
background: var(--island-bg-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-sizing: border-box;
|
||||
// to account for LS due to rendering icons after new link created
|
||||
min-height: 42px;
|
||||
|
||||
&-input,
|
||||
button {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-input,
|
||||
&-link {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--ui-font);
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 18rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--text-primary-color);
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&-link {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
button {
|
||||
color: $color-blue-6;
|
||||
background-color: transparent !important;
|
||||
font-weight: 500;
|
||||
&.excalidraw-hyperlinkContainer--remove {
|
||||
color: $color-red-9;
|
||||
}
|
||||
}
|
||||
|
||||
&--remove .ToolIcon__icon svg {
|
||||
color: $color-red-6;
|
||||
}
|
||||
|
||||
.ToolIcon__icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
495
packages/excalidraw/components/hyperlink/Hyperlink.tsx
Normal file
495
packages/excalidraw/components/hyperlink/Hyperlink.tsx
Normal file
@@ -0,0 +1,495 @@
|
||||
import { pointFrom, type GlobalPoint } from "@excalidraw/math";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { EVENT, HYPERLINK_TOOLTIP_DELAY, KEYS } from "@excalidraw/common";
|
||||
|
||||
import { getElementAbsoluteCoords } from "@excalidraw/element";
|
||||
|
||||
import { hitElementBoundingBox } from "@excalidraw/element";
|
||||
|
||||
import { isElementLink } from "@excalidraw/element";
|
||||
|
||||
import { getEmbedLink, embeddableURLValidator } from "@excalidraw/element";
|
||||
|
||||
import {
|
||||
sceneCoordsToViewportCoords,
|
||||
viewportCoordsToSceneCoords,
|
||||
wrapEvent,
|
||||
isLocalLink,
|
||||
normalizeLink,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import { isEmbeddableElement } from "@excalidraw/element";
|
||||
|
||||
import type { Scene } from "@excalidraw/element";
|
||||
|
||||
import type {
|
||||
ElementsMap,
|
||||
ExcalidrawEmbeddableElement,
|
||||
NonDeletedExcalidrawElement,
|
||||
} from "@excalidraw/element/types";
|
||||
|
||||
import { trackEvent } from "../../analytics";
|
||||
import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
|
||||
|
||||
import { t } from "../../i18n";
|
||||
|
||||
import { useAppProps, useEditorInterface, useExcalidrawAppState } from "../App";
|
||||
import { IconButton } from "../IconButton";
|
||||
import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
|
||||
import { getSelectedElements } from "../../scene";
|
||||
|
||||
import { getLinkHandleFromCoords } from "./helpers";
|
||||
|
||||
import "./Hyperlink.scss";
|
||||
|
||||
import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
|
||||
|
||||
const POPUP_WIDTH = 380;
|
||||
const POPUP_HEIGHT = 42;
|
||||
const POPUP_PADDING = 5;
|
||||
const SPACE_BOTTOM = 85;
|
||||
const AUTO_HIDE_TIMEOUT = 500;
|
||||
|
||||
let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
|
||||
|
||||
const embeddableLinkCache = new Map<
|
||||
ExcalidrawEmbeddableElement["id"],
|
||||
string
|
||||
>();
|
||||
|
||||
export const Hyperlink = ({
|
||||
element,
|
||||
scene,
|
||||
setAppState,
|
||||
onLinkOpen,
|
||||
setToast,
|
||||
updateEmbedValidationStatus,
|
||||
}: {
|
||||
element: NonDeletedExcalidrawElement;
|
||||
scene: Scene;
|
||||
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;
|
||||
}) => {
|
||||
const elementsMap = scene.getNonDeletedElementsMap();
|
||||
const appState = useExcalidrawAppState();
|
||||
const appProps = useAppProps();
|
||||
const editorInterface = useEditorInterface();
|
||||
|
||||
const linkVal = element.link || "";
|
||||
|
||||
const [inputVal, setInputVal] = useState(linkVal);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const isEditing = appState.showHyperlinkPopup === "editor";
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!inputRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const link = normalizeLink(inputRef.current.value) || null;
|
||||
|
||||
if (!element.link && link) {
|
||||
trackEvent("hyperlink", "create");
|
||||
}
|
||||
|
||||
if (isEmbeddableElement(element)) {
|
||||
if (appState.activeEmbeddable?.element === element) {
|
||||
setAppState({ activeEmbeddable: null });
|
||||
}
|
||||
if (!link) {
|
||||
scene.mutateElement(element, {
|
||||
link: null,
|
||||
});
|
||||
updateEmbedValidationStatus(element, false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!embeddableURLValidator(link, appProps.validateEmbeddable)) {
|
||||
if (link) {
|
||||
setToast({ message: t("toast.unableToEmbed"), closable: true });
|
||||
}
|
||||
element.link && embeddableLinkCache.set(element.id, element.link);
|
||||
scene.mutateElement(element, {
|
||||
link,
|
||||
});
|
||||
updateEmbedValidationStatus(element, false);
|
||||
} else {
|
||||
const { width, height } = element;
|
||||
const embedLink = getEmbedLink(link);
|
||||
if (embedLink?.error instanceof URIError) {
|
||||
setToast({
|
||||
message: t("toast.unrecognizedLinkFormat"),
|
||||
closable: true,
|
||||
});
|
||||
}
|
||||
const ar = embedLink
|
||||
? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h
|
||||
: 1;
|
||||
const hasLinkChanged =
|
||||
embeddableLinkCache.get(element.id) !== element.link;
|
||||
scene.mutateElement(element, {
|
||||
...(hasLinkChanged
|
||||
? {
|
||||
width:
|
||||
embedLink?.type === "video"
|
||||
? width > height
|
||||
? width
|
||||
: height * ar
|
||||
: width,
|
||||
height:
|
||||
embedLink?.type === "video"
|
||||
? width > height
|
||||
? width / ar
|
||||
: height
|
||||
: height,
|
||||
}
|
||||
: {}),
|
||||
link,
|
||||
});
|
||||
updateEmbedValidationStatus(element, true);
|
||||
if (embeddableLinkCache.has(element.id)) {
|
||||
embeddableLinkCache.delete(element.id);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
scene.mutateElement(element, { link });
|
||||
}
|
||||
}, [
|
||||
element,
|
||||
scene,
|
||||
setToast,
|
||||
appProps.validateEmbeddable,
|
||||
appState.activeEmbeddable,
|
||||
setAppState,
|
||||
updateEmbedValidationStatus,
|
||||
]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
return () => {
|
||||
handleSubmit();
|
||||
};
|
||||
}, [handleSubmit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
isEditing &&
|
||||
inputRef?.current &&
|
||||
!(editorInterface.formFactor === "phone" || editorInterface.isTouchScreen)
|
||||
) {
|
||||
inputRef.current.select();
|
||||
}
|
||||
}, [isEditing, editorInterface.formFactor, editorInterface.isTouchScreen]);
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutId: number | null = null;
|
||||
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
if (isEditing) {
|
||||
return;
|
||||
}
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
const shouldHide = shouldHideLinkPopup(
|
||||
element,
|
||||
elementsMap,
|
||||
appState,
|
||||
pointFrom(event.clientX, event.clientY),
|
||||
) as boolean;
|
||||
if (shouldHide) {
|
||||
timeoutId = window.setTimeout(() => {
|
||||
setAppState({ showHyperlinkPopup: false });
|
||||
}, AUTO_HIDE_TIMEOUT);
|
||||
}
|
||||
};
|
||||
window.addEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
|
||||
return () => {
|
||||
window.removeEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
};
|
||||
}, [appState, element, isEditing, setAppState, elementsMap]);
|
||||
|
||||
const handleRemove = useCallback(() => {
|
||||
trackEvent("hyperlink", "delete");
|
||||
scene.mutateElement(element, { link: null });
|
||||
setAppState({ showHyperlinkPopup: false });
|
||||
}, [setAppState, element, scene]);
|
||||
|
||||
const onEdit = () => {
|
||||
trackEvent("hyperlink", "edit", "popup-ui");
|
||||
setAppState({ showHyperlinkPopup: "editor" });
|
||||
};
|
||||
const { x, y } = getCoordsForPopover(element, appState, elementsMap);
|
||||
if (
|
||||
appState.contextMenu ||
|
||||
appState.selectedElementsAreBeingDragged ||
|
||||
appState.resizingElement ||
|
||||
appState.isRotating ||
|
||||
appState.openMenu ||
|
||||
appState.viewModeEnabled
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="excalidraw-hyperlinkContainer"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
width: POPUP_WIDTH,
|
||||
padding: POPUP_PADDING,
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<input
|
||||
className={clsx("excalidraw-hyperlinkContainer-input")}
|
||||
placeholder={t("labels.link.hint")}
|
||||
ref={inputRef}
|
||||
value={inputVal}
|
||||
onChange={(event) => setInputVal(event.target.value)}
|
||||
autoFocus
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
// prevent cmd/ctrl+k shortcut when editing link
|
||||
if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (event.key === KEYS.ENTER || event.key === KEYS.ESCAPE) {
|
||||
handleSubmit();
|
||||
setAppState({ showHyperlinkPopup: "info" });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : element.link ? (
|
||||
<a
|
||||
href={normalizeLink(element.link || "")}
|
||||
className="excalidraw-hyperlinkContainer-link"
|
||||
target={isLocalLink(element.link) ? "_self" : "_blank"}
|
||||
onClick={(event) => {
|
||||
if (element.link && onLinkOpen) {
|
||||
const customEvent = wrapEvent(
|
||||
EVENT.EXCALIDRAW_LINK,
|
||||
event.nativeEvent,
|
||||
);
|
||||
onLinkOpen(
|
||||
{
|
||||
...element,
|
||||
link: normalizeLink(element.link),
|
||||
},
|
||||
customEvent,
|
||||
);
|
||||
if (customEvent.defaultPrevented) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{element.link}
|
||||
</a>
|
||||
) : (
|
||||
<div className="excalidraw-hyperlinkContainer-link">
|
||||
{t("labels.link.empty")}
|
||||
</div>
|
||||
)}
|
||||
<div className="excalidraw-hyperlinkContainer__buttons">
|
||||
{!isEditing && (
|
||||
<IconButton
|
||||
type="button"
|
||||
title={t("buttons.edit")}
|
||||
aria-label={t("buttons.edit")}
|
||||
label={t("buttons.edit")}
|
||||
onClick={onEdit}
|
||||
className="excalidraw-hyperlinkContainer--edit"
|
||||
icon={FreedrawIcon}
|
||||
/>
|
||||
)}
|
||||
<IconButton
|
||||
type="button"
|
||||
title={t("labels.linkToElement")}
|
||||
aria-label={t("labels.linkToElement")}
|
||||
label={t("labels.linkToElement")}
|
||||
onClick={() => {
|
||||
setAppState({
|
||||
openDialog: {
|
||||
name: "elementLinkSelector",
|
||||
sourceElementId: element.id,
|
||||
},
|
||||
});
|
||||
}}
|
||||
icon={elementLinkIcon}
|
||||
/>
|
||||
{linkVal && !isEmbeddableElement(element) && (
|
||||
<IconButton
|
||||
type="button"
|
||||
title={t("buttons.remove")}
|
||||
aria-label={t("buttons.remove")}
|
||||
label={t("buttons.remove")}
|
||||
onClick={handleRemove}
|
||||
className="excalidraw-hyperlinkContainer--remove"
|
||||
icon={TrashIcon}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getCoordsForPopover = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
appState: AppState,
|
||||
elementsMap: 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 - POPUP_WIDTH / 2;
|
||||
const y = viewportY - appState.offsetTop - SPACE_BOTTOM;
|
||||
return { x, y };
|
||||
};
|
||||
|
||||
export const getContextMenuLabel = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
appState: UIAppState,
|
||||
) => {
|
||||
const selectedElements = getSelectedElements(elements, appState);
|
||||
const label = isEmbeddableElement(selectedElements[0])
|
||||
? "labels.link.editEmbed"
|
||||
: selectedElements[0]?.link
|
||||
? "labels.link.edit"
|
||||
: "labels.link.create";
|
||||
return label;
|
||||
};
|
||||
|
||||
let HYPERLINK_TOOLTIP_TIMEOUT_ID: number | null = null;
|
||||
export const showHyperlinkTooltip = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
appState: AppState,
|
||||
elementsMap: ElementsMap,
|
||||
) => {
|
||||
if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
|
||||
clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
|
||||
}
|
||||
HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(
|
||||
() => renderTooltip(element, appState, elementsMap),
|
||||
HYPERLINK_TOOLTIP_DELAY,
|
||||
);
|
||||
};
|
||||
|
||||
const renderTooltip = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
appState: AppState,
|
||||
elementsMap: ElementsMap,
|
||||
) => {
|
||||
if (!element.link) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tooltipDiv = getTooltipDiv();
|
||||
|
||||
tooltipDiv.classList.add("excalidraw-tooltip--visible");
|
||||
tooltipDiv.style.maxWidth = "20rem";
|
||||
tooltipDiv.textContent = isElementLink(element.link)
|
||||
? t("labels.link.goToElement")
|
||||
: element.link;
|
||||
|
||||
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,
|
||||
{
|
||||
left: linkViewportCoords.x,
|
||||
top: linkViewportCoords.y,
|
||||
width: linkWidth,
|
||||
height: linkHeight,
|
||||
},
|
||||
"top",
|
||||
);
|
||||
trackEvent("hyperlink", "tooltip", "link-icon");
|
||||
|
||||
IS_HYPERLINK_TOOLTIP_VISIBLE = true;
|
||||
};
|
||||
export const hideHyperlinkToolip = () => {
|
||||
if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
|
||||
clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
|
||||
}
|
||||
if (IS_HYPERLINK_TOOLTIP_VISIBLE) {
|
||||
IS_HYPERLINK_TOOLTIP_VISIBLE = false;
|
||||
getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
|
||||
}
|
||||
};
|
||||
|
||||
const shouldHideLinkPopup = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
elementsMap: ElementsMap,
|
||||
appState: AppState,
|
||||
[clientX, clientY]: GlobalPoint,
|
||||
): Boolean => {
|
||||
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 (hitElementBoundingBox(pointFrom(sceneX, sceneY), element, elementsMap)) {
|
||||
return false;
|
||||
}
|
||||
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 &&
|
||||
sceneY >= y1 - SPACE_BOTTOM &&
|
||||
sceneY <= y1
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
// hit box to prevent hiding when hovered around popover within threshold
|
||||
const { x: popoverX, y: popoverY } = getCoordsForPopover(
|
||||
element,
|
||||
appState,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
if (
|
||||
clientX >= popoverX - threshold &&
|
||||
clientX <= popoverX + POPUP_WIDTH + POPUP_PADDING * 2 + threshold &&
|
||||
clientY >= popoverY - threshold &&
|
||||
clientY <= popoverY + threshold + POPUP_PADDING * 2 + POPUP_HEIGHT
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
105
packages/excalidraw/components/hyperlink/helpers.ts
Normal file
105
packages/excalidraw/components/hyperlink/helpers.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import { pointFrom, pointRotateRads } from "@excalidraw/math";
|
||||
|
||||
import { MIME_TYPES } from "@excalidraw/common";
|
||||
import { getElementAbsoluteCoords } from "@excalidraw/element";
|
||||
import { hitElementBoundingBox } from "@excalidraw/element";
|
||||
|
||||
import type { GlobalPoint, Radians } from "@excalidraw/math";
|
||||
|
||||
import type { Bounds } from "@excalidraw/common";
|
||||
import type {
|
||||
ElementsMap,
|
||||
NonDeletedExcalidrawElement,
|
||||
} from "@excalidraw/element/types";
|
||||
|
||||
import type { AppState } from "../../types";
|
||||
|
||||
export const DEFAULT_LINK_SIZE = 12;
|
||||
|
||||
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="1.75" 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 ELEMENT_LINK_IMG = document.createElement("img");
|
||||
ELEMENT_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="icon icon-tabler icons-tabler-outline icon-tabler-arrow-big-right-line"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-6v-6h6z" /><path d="M3 9v6" /></svg>`,
|
||||
)}`;
|
||||
|
||||
export const getLinkHandleFromCoords = (
|
||||
[x1, y1, x2, y2]: Bounds,
|
||||
angle: Radians,
|
||||
appState: Pick<AppState, "zoom">,
|
||||
): Bounds => {
|
||||
const size = DEFAULT_LINK_SIZE;
|
||||
const zoom = appState.zoom.value > 1 ? appState.zoom.value : 1;
|
||||
const linkWidth = size / zoom;
|
||||
const linkHeight = size / zoom;
|
||||
const linkMarginY = size / zoom;
|
||||
const centerX = (x1 + x2) / 2;
|
||||
const centerY = (y1 + y2) / 2;
|
||||
const centeringOffset = (size - 8) / (2 * zoom);
|
||||
const dashedLineMargin = 4 / zoom;
|
||||
|
||||
// Same as `ne` resize handle
|
||||
const x = x2 + dashedLineMargin - centeringOffset;
|
||||
const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
|
||||
|
||||
const [rotatedX, rotatedY] = pointRotateRads(
|
||||
pointFrom(x + linkWidth / 2, y + linkHeight / 2),
|
||||
pointFrom(centerX, centerY),
|
||||
angle,
|
||||
);
|
||||
return [
|
||||
rotatedX - linkWidth / 2,
|
||||
rotatedY - linkHeight / 2,
|
||||
linkWidth,
|
||||
linkHeight,
|
||||
];
|
||||
};
|
||||
|
||||
export const isPointHittingLinkIcon = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
elementsMap: ElementsMap,
|
||||
appState: AppState,
|
||||
[x, y]: GlobalPoint,
|
||||
) => {
|
||||
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: NonDeletedExcalidrawElement,
|
||||
elementsMap: ElementsMap,
|
||||
appState: AppState,
|
||||
[x, y]: GlobalPoint,
|
||||
isMobile: boolean,
|
||||
) => {
|
||||
if (!element.link || appState.selectedElementIds[element.id]) {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!isMobile &&
|
||||
appState.viewModeEnabled &&
|
||||
hitElementBoundingBox(pointFrom(x, y), element, elementsMap)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return isPointHittingLinkIcon(
|
||||
element,
|
||||
elementsMap,
|
||||
appState,
|
||||
pointFrom(x, y),
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user