@@ -188,11 +229,7 @@ const LinkToolbar: React.FC
= React.memo(
e.stopPropagation();
onNavigate(annotationLink);
}}
- aria-label={
- internal
- ? `Go to page ${annotationLink.target?.type === "destination" ? annotationLink.target.destination.pageIndex + 1 : ""}`
- : "Open link"
- }
+ aria-label={internal ? `Go to ${label}` : "Open link"}
title={label}
>
{internal ? : }
@@ -223,7 +260,11 @@ export const LinkLayer: React.FC = ({
const documentState = useDocumentState(documentId);
const [hoveredLinkId, setHoveredLinkId] = useState(null);
+ const [toolbarPlacement, setToolbarPlacement] =
+ useState(null);
const leaveTimerRef = useRef | null>(null);
+ const linkElementRefs = useRef>(new Map());
+ const toolbarElementRef = useRef(null);
// Extract link annotations for this page from EmbedPDF annotation state
const linkAnnotations = useMemo(() => {
@@ -251,6 +292,52 @@ export const LinkLayer: React.FC = ({
// EmbedPDF scale factor (annotation rects are in PDF points at scale 1)
const scale = documentState?.scale ?? 1;
+ // The portal position is measured from DOM, so this key realigns it when the page transform changes.
+ const toolbarPositionKey = [
+ scale,
+ documentState?.document?.pages?.[pageIndex]?.rotation ?? 0,
+ documentState?.rotation ?? 0,
+ ].join(":");
+
+ const updateToolbarPlacement = useCallback((linkId: string | null) => {
+ if (!linkId) {
+ setToolbarPlacement(null);
+ return;
+ }
+
+ const linkElement = linkElementRefs.current.get(linkId);
+ if (!linkElement) {
+ setHoveredLinkId(null);
+ setToolbarPlacement(null);
+ return;
+ }
+
+ if (typeof window === "undefined") return;
+
+ const rect = linkElement.getBoundingClientRect();
+ if (isRectOutsideViewport(rect)) {
+ setHoveredLinkId(null);
+ setToolbarPlacement(null);
+ return;
+ }
+
+ const toolbarWidth = toolbarElementRef.current?.offsetWidth ?? 0;
+ const verticalSpace = TOOLBAR_HEIGHT + TOOLBAR_GAP + TOOLBAR_EDGE_MARGIN;
+ const fitsAbove = rect.top >= verticalSpace;
+ const fitsBelow = window.innerHeight - rect.bottom >= verticalSpace;
+ const centerX = rect.left + rect.width / 2;
+ const flipped = !fitsAbove && fitsBelow;
+ const top = flipped
+ ? rect.bottom + TOOLBAR_GAP
+ : Math.max(TOOLBAR_EDGE_MARGIN, rect.top - TOOLBAR_HEIGHT - TOOLBAR_GAP);
+
+ setToolbarPlacement({
+ linkId,
+ left: clampToolbarCenter(centerX, toolbarWidth),
+ top,
+ flipped,
+ });
+ }, []);
const clearLeaveTimer = useCallback(() => {
if (leaveTimerRef.current) {
@@ -263,15 +350,17 @@ export const LinkLayer: React.FC = ({
clearLeaveTimer();
leaveTimerRef.current = setTimeout(() => {
setHoveredLinkId(null);
- }, 120);
+ setToolbarPlacement(null);
+ }, TOOLBAR_LEAVE_DELAY);
}, [clearLeaveTimer]);
const handleLinkMouseEnter = useCallback(
(id: string) => {
clearLeaveTimer();
setHoveredLinkId(id);
+ updateToolbarPlacement(id);
},
- [clearLeaveTimer],
+ [clearLeaveTimer, updateToolbarPlacement],
);
const handleLinkMouseLeave = useCallback(() => {
@@ -290,6 +379,7 @@ export const LinkLayer: React.FC = ({
(annotationLink: PdfLinkAnnoObject) => {
if (!annotationLink.target) {
setHoveredLinkId(null);
+ setToolbarPlacement(null);
return;
}
@@ -329,6 +419,7 @@ export const LinkLayer: React.FC = ({
}
setHoveredLinkId(null);
+ setToolbarPlacement(null);
},
[scroll],
);
@@ -336,35 +427,103 @@ export const LinkLayer: React.FC = ({
const handleDelete = useCallback(
(annotationLink: PdfLinkAnnoObject) => {
setHoveredLinkId(null);
+ setToolbarPlacement(null);
if (!scope) return;
scope.deleteAnnotation(pageIndex, annotationLink.id);
},
[scope, pageIndex],
);
+ useEffect(() => () => clearLeaveTimer(), [clearLeaveTimer]);
+
+ useEffect(() => {
+ if (!hoveredLinkId) {
+ setToolbarPlacement(null);
+ return;
+ }
+
+ updateToolbarPlacement(hoveredLinkId);
+
+ if (typeof window === "undefined") return;
+
+ const handleViewportChange = () => {
+ updateToolbarPlacement(hoveredLinkId);
+ };
+
+ window.addEventListener("scroll", handleViewportChange, true);
+ window.addEventListener("resize", handleViewportChange);
+
+ return () => {
+ window.removeEventListener("scroll", handleViewportChange, true);
+ window.removeEventListener("resize", handleViewportChange);
+ };
+ }, [
+ hoveredLinkId,
+ linkAnnotations,
+ toolbarPositionKey,
+ updateToolbarPlacement,
+ ]);
+
+ useLayoutEffect(() => {
+ if (!hoveredLinkId || toolbarPlacement?.linkId !== hoveredLinkId) return;
+ updateToolbarPlacement(hoveredLinkId);
+ }, [
+ hoveredLinkId,
+ toolbarPlacement?.linkId,
+ toolbarPositionKey,
+ updateToolbarPlacement,
+ ]);
+
+ const hoveredAnnotationLink = useMemo(
+ () => linkAnnotations.find((link) => link.id === hoveredLinkId) ?? null,
+ [linkAnnotations, hoveredLinkId],
+ );
+
if (linkAnnotations.length === 0) return null;
+ const toolbarPortal =
+ hoveredAnnotationLink &&
+ toolbarPlacement?.linkId === hoveredAnnotationLink.id &&
+ typeof document !== "undefined"
+ ? createPortal(
+ ,
+ document.body,
+ )
+ : null;
+
return (
-
- {linkAnnotations.map((annotationLink) => {
- const isHovered = hoveredLinkId === annotationLink.id;
- const left = annotationLink.rect.origin.x * scale;
- const top = annotationLink.rect.origin.y * scale;
- const width = annotationLink.rect.size.width * scale;
- const height = annotationLink.rect.size.height * scale;
+ <>
+
+ );
+ })}
+