mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-20 13:47:46 +02:00
Changes: change px values to rem, chop up tooltip into managable pieces, extract some re-usable utils into a domUtils folder, rename some files and functions and more
This commit is contained in:
EthanHealy01
parent
e8a95aab0b
commit
9aeb652cac
@ -1,503 +0,0 @@
|
|||||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import styles from './Tooltip.module.css';
|
|
||||||
|
|
||||||
export interface TooltipTip {
|
|
||||||
title?: string;
|
|
||||||
description?: string;
|
|
||||||
bullets?: string[];
|
|
||||||
body?: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TooltipProps {
|
|
||||||
sidebarTooltip?: boolean;
|
|
||||||
position?: 'right' | 'left' | 'top' | 'bottom';
|
|
||||||
content?: React.ReactNode;
|
|
||||||
tips?: TooltipTip[];
|
|
||||||
children: React.ReactElement;
|
|
||||||
offset?: number;
|
|
||||||
maxWidth?: number | string;
|
|
||||||
open?: boolean;
|
|
||||||
onOpenChange?: (open: boolean) => void;
|
|
||||||
arrow?: boolean;
|
|
||||||
portalTarget?: HTMLElement;
|
|
||||||
header?: {
|
|
||||||
title: string;
|
|
||||||
logo?: React.ReactNode;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
type Position = 'right' | 'left' | 'top' | 'bottom';
|
|
||||||
|
|
||||||
interface PlacementResult {
|
|
||||||
top: number;
|
|
||||||
left: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
function place(
|
|
||||||
triggerRect: DOMRect,
|
|
||||||
tooltipRect: DOMRect,
|
|
||||||
position: Position,
|
|
||||||
offset: number
|
|
||||||
): PlacementResult {
|
|
||||||
let top = 0;
|
|
||||||
let left = 0;
|
|
||||||
|
|
||||||
switch (position) {
|
|
||||||
case 'right':
|
|
||||||
top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
|
|
||||||
left = triggerRect.right + offset;
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
|
|
||||||
left = triggerRect.left - tooltipRect.width - offset;
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
top = triggerRect.top - tooltipRect.height - offset;
|
|
||||||
left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
|
|
||||||
break;
|
|
||||||
case 'bottom':
|
|
||||||
top = triggerRect.bottom + offset;
|
|
||||||
left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { top, left };
|
|
||||||
}
|
|
||||||
|
|
||||||
function clamp(value: number, min: number, max: number): number {
|
|
||||||
return Math.min(Math.max(value, min), max);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSidebarRect(): { rect: DOMRect | null, isCorrectSidebar: boolean } {
|
|
||||||
// Find the rightmost sidebar - this will be the "All Tools" expanded panel
|
|
||||||
const allSidebars = [];
|
|
||||||
|
|
||||||
// Find the QuickAccessBar (narrow left bar)
|
|
||||||
const quickAccessBar = document.querySelector('[data-sidebar="quick-access"]');
|
|
||||||
if (quickAccessBar) {
|
|
||||||
const rect = quickAccessBar.getBoundingClientRect();
|
|
||||||
if (rect.width > 0) {
|
|
||||||
allSidebars.push({
|
|
||||||
element: 'QuickAccessBar',
|
|
||||||
selector: '[data-sidebar="quick-access"]',
|
|
||||||
rect
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the tool panel (the expanded "All Tools" panel)
|
|
||||||
const toolPanel = document.querySelector('[data-sidebar="tool-panel"]');
|
|
||||||
if (toolPanel) {
|
|
||||||
const rect = toolPanel.getBoundingClientRect();
|
|
||||||
if (rect.width > 0) {
|
|
||||||
allSidebars.push({
|
|
||||||
element: 'ToolPanel',
|
|
||||||
selector: '[data-sidebar="tool-panel"]',
|
|
||||||
rect
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use the rightmost sidebar (which should be the tool panel when expanded)
|
|
||||||
if (allSidebars.length > 0) {
|
|
||||||
const rightmostSidebar = allSidebars.reduce((rightmost, current) => {
|
|
||||||
return current.rect.right > rightmost.rect.right ? current : rightmost;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Only consider it correct if we're using the ToolPanel (expanded All Tools sidebar)
|
|
||||||
const isCorrectSidebar = rightmostSidebar.element === 'ToolPanel';
|
|
||||||
|
|
||||||
console.log('✅ Tooltip positioning using:', {
|
|
||||||
element: rightmostSidebar.element,
|
|
||||||
selector: rightmostSidebar.selector,
|
|
||||||
width: rightmostSidebar.rect.width,
|
|
||||||
right: rightmostSidebar.rect.right,
|
|
||||||
isCorrectSidebar,
|
|
||||||
rect: rightmostSidebar.rect
|
|
||||||
});
|
|
||||||
|
|
||||||
return { rect: rightmostSidebar.rect, isCorrectSidebar };
|
|
||||||
}
|
|
||||||
|
|
||||||
console.warn('⚠️ No sidebars found, using fallback positioning');
|
|
||||||
// Final fallback
|
|
||||||
return { rect: new DOMRect(0, 0, 280, window.innerHeight), isCorrectSidebar: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Tooltip: React.FC<TooltipProps> = ({
|
|
||||||
sidebarTooltip = false,
|
|
||||||
position = 'right',
|
|
||||||
content,
|
|
||||||
tips,
|
|
||||||
children,
|
|
||||||
offset: gap = 8,
|
|
||||||
maxWidth = 280,
|
|
||||||
open: controlledOpen,
|
|
||||||
onOpenChange,
|
|
||||||
arrow = false,
|
|
||||||
portalTarget,
|
|
||||||
header,
|
|
||||||
}) => {
|
|
||||||
const [internalOpen, setInternalOpen] = useState(false);
|
|
||||||
const [isPinned, setIsPinned] = useState(false);
|
|
||||||
const [coords, setCoords] = useState<{ top: number; left: number; arrowOffset: number | null }>({ top: 0, left: 0, arrowOffset: null });
|
|
||||||
const [positionReady, setPositionReady] = useState(false);
|
|
||||||
const triggerRef = useRef<HTMLElement>(null);
|
|
||||||
const tooltipRef = useRef<HTMLDivElement>(null);
|
|
||||||
const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
||||||
|
|
||||||
// Always use controlled mode - if no controlled props provided, use internal state
|
|
||||||
const isControlled = controlledOpen !== undefined;
|
|
||||||
const open = isControlled ? controlledOpen : internalOpen;
|
|
||||||
|
|
||||||
const handleOpenChange = (newOpen: boolean) => {
|
|
||||||
if (isControlled) {
|
|
||||||
onOpenChange?.(newOpen);
|
|
||||||
} else {
|
|
||||||
setInternalOpen(newOpen);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset position ready state when closing
|
|
||||||
if (!newOpen) {
|
|
||||||
setPositionReady(false);
|
|
||||||
setIsPinned(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTooltipClick = (e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsPinned(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDocumentClick = (e: MouseEvent) => {
|
|
||||||
// If tooltip is pinned and we click outside of it, unpin it
|
|
||||||
if (isPinned && tooltipRef.current && !tooltipRef.current.contains(e.target as Node)) {
|
|
||||||
setIsPinned(false);
|
|
||||||
handleOpenChange(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Memoize sidebar position for performance
|
|
||||||
const sidebarLeft = useMemo(() => {
|
|
||||||
if (!sidebarTooltip) return 0;
|
|
||||||
const sidebarInfo = getSidebarRect();
|
|
||||||
return sidebarInfo.rect ? sidebarInfo.rect.right : 240;
|
|
||||||
}, [sidebarTooltip]);
|
|
||||||
|
|
||||||
const updatePosition = () => {
|
|
||||||
if (!triggerRef.current || !open) return;
|
|
||||||
|
|
||||||
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
||||||
|
|
||||||
let top: number;
|
|
||||||
let left: number;
|
|
||||||
let arrowOffset: number | null = null;
|
|
||||||
|
|
||||||
if (sidebarTooltip) {
|
|
||||||
// Get fresh sidebar position each time
|
|
||||||
const sidebarInfo = getSidebarRect();
|
|
||||||
const currentSidebarRight = sidebarInfo.rect ? sidebarInfo.rect.right : sidebarLeft;
|
|
||||||
|
|
||||||
// Only show tooltip if we have the correct sidebar (ToolPanel)
|
|
||||||
if (!sidebarInfo.isCorrectSidebar) {
|
|
||||||
console.log('🚫 Not showing tooltip - wrong sidebar detected');
|
|
||||||
setPositionReady(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Position to the right of correct sidebar with 20px gap
|
|
||||||
left = currentSidebarRight + 20;
|
|
||||||
top = triggerRect.top; // Align top of tooltip with trigger element
|
|
||||||
|
|
||||||
console.log('Sidebar tooltip positioning:', {
|
|
||||||
currentSidebarRight,
|
|
||||||
triggerRect,
|
|
||||||
calculatedLeft: left,
|
|
||||||
calculatedTop: top,
|
|
||||||
isCorrectSidebar: sidebarInfo.isCorrectSidebar
|
|
||||||
});
|
|
||||||
|
|
||||||
// Only clamp if we have tooltip dimensions
|
|
||||||
if (tooltipRef.current) {
|
|
||||||
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
||||||
const maxTop = window.innerHeight - tooltipRect.height - 4;
|
|
||||||
const originalTop = top;
|
|
||||||
top = clamp(top, 4, maxTop);
|
|
||||||
|
|
||||||
// If tooltip was clamped, adjust arrow position to stay aligned with trigger
|
|
||||||
if (originalTop !== top) {
|
|
||||||
arrowOffset = triggerRect.top + triggerRect.height / 2 - top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setCoords({ top, left, arrowOffset });
|
|
||||||
setPositionReady(true);
|
|
||||||
} else {
|
|
||||||
// Regular tooltip logic
|
|
||||||
if (!tooltipRef.current) return;
|
|
||||||
|
|
||||||
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
||||||
const placement = place(triggerRect, tooltipRect, position, gap);
|
|
||||||
top = placement.top;
|
|
||||||
left = placement.left;
|
|
||||||
|
|
||||||
// Clamp to viewport
|
|
||||||
top = clamp(top, 4, window.innerHeight - tooltipRect.height - 4);
|
|
||||||
left = clamp(left, 4, window.innerWidth - tooltipRect.width - 4);
|
|
||||||
|
|
||||||
// Calculate arrow position to stay aligned with trigger
|
|
||||||
if (position === 'top' || position === 'bottom') {
|
|
||||||
// For top/bottom arrows, adjust horizontal position
|
|
||||||
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
||||||
const tooltipCenter = left + tooltipRect.width / 2;
|
|
||||||
if (Math.abs(triggerCenter - tooltipCenter) > 4) {
|
|
||||||
// Arrow needs adjustment
|
|
||||||
arrowOffset = triggerCenter - left - 4; // 4px is half arrow width
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// For left/right arrows, adjust vertical position
|
|
||||||
const triggerCenter = triggerRect.top + triggerRect.height / 2;
|
|
||||||
const tooltipCenter = top + tooltipRect.height / 2;
|
|
||||||
if (Math.abs(triggerCenter - tooltipCenter) > 4) {
|
|
||||||
// Arrow needs adjustment
|
|
||||||
arrowOffset = triggerCenter - top - 4; // 4px is half arrow height
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setCoords({ top, left, arrowOffset });
|
|
||||||
setPositionReady(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) return;
|
|
||||||
|
|
||||||
requestAnimationFrame(updatePosition);
|
|
||||||
|
|
||||||
const handleUpdate = () => requestAnimationFrame(updatePosition);
|
|
||||||
window.addEventListener('scroll', handleUpdate, true);
|
|
||||||
window.addEventListener('resize', handleUpdate);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearTimeout(hoverTimeoutRef.current!);
|
|
||||||
|
|
||||||
window.removeEventListener('scroll', handleUpdate, true);
|
|
||||||
window.removeEventListener('resize', handleUpdate);
|
|
||||||
};
|
|
||||||
}, [open, sidebarLeft, position, gap, sidebarTooltip]);
|
|
||||||
// Add document click listener for unpinning
|
|
||||||
useEffect(() => {
|
|
||||||
if (isPinned) {
|
|
||||||
document.addEventListener('click', handleDocumentClick);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('click', handleDocumentClick);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [isPinned]);
|
|
||||||
|
|
||||||
const getArrowClass = () => {
|
|
||||||
// No arrow for sidebar tooltips
|
|
||||||
if (sidebarTooltip) return null;
|
|
||||||
|
|
||||||
switch (position) {
|
|
||||||
case 'top': return "tooltip-arrow tooltip-arrow-top";
|
|
||||||
case 'bottom': return "tooltip-arrow tooltip-arrow-bottom";
|
|
||||||
case 'left': return "tooltip-arrow tooltip-arrow-left";
|
|
||||||
case 'right': return "tooltip-arrow tooltip-arrow-right";
|
|
||||||
default: return "tooltip-arrow tooltip-arrow-right";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getArrowStyleClass = (arrowClass: string) => {
|
|
||||||
const styleKey = arrowClass.split(' ')[1];
|
|
||||||
// Handle both kebab-case and camelCase CSS module exports
|
|
||||||
return styles[styleKey as keyof typeof styles] ||
|
|
||||||
styles[styleKey.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) as keyof typeof styles] ||
|
|
||||||
'';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Only show tooltip when position is ready and correct
|
|
||||||
const shouldShowTooltip = open && (sidebarTooltip ? positionReady : true);
|
|
||||||
|
|
||||||
const tooltipElement = shouldShowTooltip ? (
|
|
||||||
<div
|
|
||||||
ref={tooltipRef}
|
|
||||||
style={{
|
|
||||||
position: 'fixed',
|
|
||||||
top: coords.top,
|
|
||||||
left: coords.left,
|
|
||||||
maxWidth,
|
|
||||||
zIndex: 9999,
|
|
||||||
visibility: 'visible',
|
|
||||||
opacity: 1,
|
|
||||||
color: 'var(--text-primary)',
|
|
||||||
}}
|
|
||||||
className={`${styles['tooltip-container']} ${isPinned ? styles.pinned : ''}`}
|
|
||||||
onClick={handleTooltipClick}
|
|
||||||
>
|
|
||||||
{isPinned && (
|
|
||||||
<button
|
|
||||||
className={styles['tooltip-pin-button']}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsPinned(false);
|
|
||||||
handleOpenChange(false);
|
|
||||||
}}
|
|
||||||
title="Close tooltip"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-rounded">
|
|
||||||
close
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{arrow && getArrowClass() && (
|
|
||||||
<div
|
|
||||||
className={`${styles['tooltip-arrow']} ${getArrowStyleClass(getArrowClass()!)}`}
|
|
||||||
style={coords.arrowOffset !== null ? {
|
|
||||||
[position === 'top' || position === 'bottom' ? 'left' : 'top']: coords.arrowOffset
|
|
||||||
} : undefined}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{header && (
|
|
||||||
<div className={styles['tooltip-header']}>
|
|
||||||
<div className={styles['tooltip-logo']}>
|
|
||||||
{header.logo || <img src="/logo-tooltip.svg" alt="Stirling PDF" style={{ width: '1.4rem', height: '1.4rem', display: 'block' }} />}
|
|
||||||
</div>
|
|
||||||
<span className={styles['tooltip-title']}>{header.title}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
className={styles['tooltip-body']}
|
|
||||||
style={{
|
|
||||||
color: 'var(--text-primary)',
|
|
||||||
padding: '16px',
|
|
||||||
fontSize: '14px',
|
|
||||||
lineHeight: '1.6'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ color: 'var(--text-primary)' }}>
|
|
||||||
{tips ? (
|
|
||||||
<>
|
|
||||||
{tips.map((tip, index) => (
|
|
||||||
<div key={index} style={{ marginBottom: index < tips.length - 1 ? '24px' : '0' }}>
|
|
||||||
{tip.title && (
|
|
||||||
<div style={{
|
|
||||||
display: 'inline-block',
|
|
||||||
backgroundColor: 'var(--tooltip-title-bg)',
|
|
||||||
color: 'var(--tooltip-title-color)',
|
|
||||||
padding: '6px 12px',
|
|
||||||
borderRadius: '16px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
marginBottom: '12px'
|
|
||||||
}}>
|
|
||||||
{tip.title}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{tip.description && (
|
|
||||||
<p style={{ margin: '0 0 12px 0', color: 'var(--text-secondary)', fontSize: '13px' }} dangerouslySetInnerHTML={{ __html: tip.description }} />
|
|
||||||
)}
|
|
||||||
{tip.bullets && tip.bullets.length > 0 && (
|
|
||||||
<ul style={{ margin: '0', paddingLeft: '16px', color: 'var(--text-secondary)', fontSize: '13px' }}>
|
|
||||||
{tip.bullets.map((bullet, bulletIndex) => (
|
|
||||||
<li key={bulletIndex} style={{ marginBottom: '6px' }} dangerouslySetInnerHTML={{ __html: bullet }} />
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
{tip.body && (
|
|
||||||
<div style={{ marginTop: '12px' }}>
|
|
||||||
{tip.body}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{content && (
|
|
||||||
<div style={{ marginTop: '24px' }}>
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
content
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
const handleMouseEnter = (e: React.MouseEvent) => {
|
|
||||||
// Clear any existing timeout
|
|
||||||
if (hoverTimeoutRef.current) {
|
|
||||||
clearTimeout(hoverTimeoutRef.current);
|
|
||||||
hoverTimeoutRef.current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only show on hover if not pinned
|
|
||||||
if (!isPinned) {
|
|
||||||
handleOpenChange(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
(children.props as any)?.onMouseEnter?.(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseLeave = (e: React.MouseEvent) => {
|
|
||||||
// Only hide on mouse leave if not pinned
|
|
||||||
if (!isPinned) {
|
|
||||||
// Add a small delay to prevent flickering
|
|
||||||
hoverTimeoutRef.current = setTimeout(() => {
|
|
||||||
handleOpenChange(false);
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
(children.props as any)?.onMouseLeave?.(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick = (e: React.MouseEvent) => {
|
|
||||||
// Toggle pin state on click
|
|
||||||
if (open) {
|
|
||||||
setIsPinned(!isPinned);
|
|
||||||
} else {
|
|
||||||
handleOpenChange(true);
|
|
||||||
setIsPinned(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
(children.props as any)?.onClick?.(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
const enhancedChildren = React.cloneElement(children as any, {
|
|
||||||
ref: (node: HTMLElement) => {
|
|
||||||
triggerRef.current = node;
|
|
||||||
// Forward ref if children already has one
|
|
||||||
const originalRef = (children as any).ref;
|
|
||||||
if (typeof originalRef === 'function') {
|
|
||||||
originalRef(node);
|
|
||||||
} else if (originalRef && typeof originalRef === 'object') {
|
|
||||||
originalRef.current = node;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onMouseEnter: handleMouseEnter,
|
|
||||||
onMouseLeave: handleMouseLeave,
|
|
||||||
onClick: handleClick,
|
|
||||||
onFocus: (e: React.FocusEvent) => {
|
|
||||||
if (!isPinned) {
|
|
||||||
handleOpenChange(true);
|
|
||||||
}
|
|
||||||
(children.props as any)?.onFocus?.(e);
|
|
||||||
},
|
|
||||||
onBlur: (e: React.FocusEvent) => {
|
|
||||||
if (!isPinned) {
|
|
||||||
handleOpenChange(false);
|
|
||||||
}
|
|
||||||
(children.props as any)?.onBlur?.(e);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{enhancedChildren}
|
|
||||||
{portalTarget && document.body.contains(portalTarget)
|
|
||||||
? tooltipElement && createPortal(tooltipElement, portalTarget)
|
|
||||||
: tooltipElement}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -6,7 +6,7 @@ A flexible, accessible tooltip component that supports both regular positioning
|
|||||||
|
|
||||||
- 🎯 **Smart Positioning**: Automatically positions tooltips to stay within viewport bounds
|
- 🎯 **Smart Positioning**: Automatically positions tooltips to stay within viewport bounds
|
||||||
- 📱 **Sidebar Support**: Special positioning logic for sidebar/navigation elements
|
- 📱 **Sidebar Support**: Special positioning logic for sidebar/navigation elements
|
||||||
- ♿ **Accessible**: Works with both mouse and keyboard interactions
|
- ♿ **Accessible**: Works with mouse interactions and click-to-pin functionality
|
||||||
- 🎨 **Customizable**: Support for arrows, structured content, and custom JSX
|
- 🎨 **Customizable**: Support for arrows, structured content, and custom JSX
|
||||||
- 🌙 **Theme Support**: Built-in dark mode and theme variable support
|
- 🌙 **Theme Support**: Built-in dark mode and theme variable support
|
||||||
- ⚡ **Performance**: Memoized calculations and efficient event handling
|
- ⚡ **Performance**: Memoized calculations and efficient event handling
|
||||||
@ -1,16 +1,16 @@
|
|||||||
/* Tooltip Container */
|
/* Tooltip Container */
|
||||||
.tooltip-container {
|
.tooltip-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
border: 1px solid var(--border-default);
|
border: 0.0625rem solid var(--border-default);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
background-color: var(--bg-raised);
|
background-color: var(--bg-raised);
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
transition: opacity 100ms ease-out, transform 100ms ease-out;
|
transition: opacity 100ms ease-out, transform 100ms ease-out;
|
||||||
min-width: 400px;
|
min-width: 25rem;
|
||||||
max-width: 50vh;
|
max-width: 50vh;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
@ -21,7 +21,7 @@
|
|||||||
/* Pinned tooltip indicator */
|
/* Pinned tooltip indicator */
|
||||||
.tooltip-container.pinned {
|
.tooltip-container.pinned {
|
||||||
border-color: var(--primary-color, #3b82f6);
|
border-color: var(--primary-color, #3b82f6);
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(59, 130, 246, 0.1);
|
box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05), 0 0 0 0.125rem rgba(59, 130, 246, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pinned tooltip header */
|
/* Pinned tooltip header */
|
||||||
@ -34,25 +34,25 @@
|
|||||||
/* Close button */
|
/* Close button */
|
||||||
.tooltip-pin-button {
|
.tooltip-pin-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -8px;
|
top: -0.5rem;
|
||||||
right: 8px;
|
right: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
background: var(--bg-raised);
|
background: var(--bg-raised);
|
||||||
padding: 4px;
|
padding: 0.25rem;
|
||||||
border-radius: 4px;
|
border-radius: 0.25rem;
|
||||||
border: 1px solid var(--primary-color, #3b82f6);
|
border: 0.0625rem solid var(--primary-color, #3b82f6);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 24px;
|
min-width: 1.5rem;
|
||||||
min-height: 24px;
|
min-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-pin-button .material-symbols-outlined {
|
.tooltip-pin-button .material-symbols-outlined {
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,22 +65,22 @@
|
|||||||
.tooltip-header {
|
.tooltip-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 0.5rem;
|
||||||
padding: 12px 16px;
|
padding: 0.75rem 1rem;
|
||||||
background-color: var(--tooltip-header-bg);
|
background-color: var(--tooltip-header-bg);
|
||||||
color: var(--tooltip-header-color);
|
color: var(--tooltip-header-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-top-left-radius: 12px;
|
border-top-left-radius: 0.75rem;
|
||||||
border-top-right-radius: 12px;
|
border-top-right-radius: 0.75rem;
|
||||||
margin: -1px -1px 0 -1px;
|
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
|
||||||
border: 1px solid var(--tooltip-border);
|
border: 0.0625rem solid var(--tooltip-border);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-logo {
|
.tooltip-logo {
|
||||||
width: 16px;
|
width: 1rem;
|
||||||
height: 16px;
|
height: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -92,9 +92,9 @@
|
|||||||
|
|
||||||
/* Tooltip Body */
|
/* Tooltip Body */
|
||||||
.tooltip-body {
|
.tooltip-body {
|
||||||
padding: 16px !important;
|
padding: 1rem !important;
|
||||||
color: var(--text-primary) !important;
|
color: var(--text-primary) !important;
|
||||||
font-size: 14px !important;
|
font-size: 0.875rem !important;
|
||||||
line-height: 1.6 !important;
|
line-height: 1.6 !important;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -142,24 +142,24 @@
|
|||||||
/* Tooltip Arrows */
|
/* Tooltip Arrows */
|
||||||
.tooltip-arrow {
|
.tooltip-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 8px;
|
width: 0.5rem;
|
||||||
height: 8px;
|
height: 0.5rem;
|
||||||
background: var(--bg-raised);
|
background: var(--bg-raised);
|
||||||
border: 1px solid var(--border-default);
|
border: 0.0625rem solid var(--border-default);
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tooltip-arrow-sidebar {
|
.tooltip-arrow-sidebar {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: -4px;
|
left: -0.25rem;
|
||||||
transform: translateY(-50%) rotate(45deg);
|
transform: translateY(-50%) rotate(45deg);
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-arrow-top {
|
.tooltip-arrow-top {
|
||||||
top: -4px;
|
top: -0.25rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) rotate(45deg);
|
transform: translateX(-50%) rotate(45deg);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@ -167,7 +167,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-arrow-bottom {
|
.tooltip-arrow-bottom {
|
||||||
bottom: -4px;
|
bottom: -0.25rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) rotate(45deg);
|
transform: translateX(-50%) rotate(45deg);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
@ -175,7 +175,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-arrow-left {
|
.tooltip-arrow-left {
|
||||||
right: -4px;
|
right: -0.25rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%) rotate(45deg);
|
transform: translateY(-50%) rotate(45deg);
|
||||||
border-left: none;
|
border-left: none;
|
||||||
@ -183,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-arrow-right {
|
.tooltip-arrow-right {
|
||||||
left: -4px;
|
left: -0.25rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%) rotate(45deg);
|
transform: translateY(-50%) rotate(45deg);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
237
frontend/src/components/shared/tooltip/Tooltip.tsx
Normal file
237
frontend/src/components/shared/tooltip/Tooltip.tsx
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import { isClickOutside, addEventListenerWithCleanup } from '../../../utils/domUtils';
|
||||||
|
import { useTooltipPosition } from '../../../hooks/useTooltipPosition';
|
||||||
|
import { TooltipContent, TooltipTip } from './TooltipContent';
|
||||||
|
import styles from './Tooltip.module.css';
|
||||||
|
|
||||||
|
export interface TooltipProps {
|
||||||
|
sidebarTooltip?: boolean;
|
||||||
|
position?: 'right' | 'left' | 'top' | 'bottom';
|
||||||
|
content?: React.ReactNode;
|
||||||
|
tips?: TooltipTip[];
|
||||||
|
children: React.ReactElement;
|
||||||
|
offset?: number;
|
||||||
|
maxWidth?: number | string;
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
arrow?: boolean;
|
||||||
|
portalTarget?: HTMLElement;
|
||||||
|
header?: {
|
||||||
|
title: string;
|
||||||
|
logo?: React.ReactNode;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Tooltip: React.FC<TooltipProps> = ({
|
||||||
|
sidebarTooltip = false,
|
||||||
|
position = 'right',
|
||||||
|
content,
|
||||||
|
tips,
|
||||||
|
children,
|
||||||
|
offset: gap = 8,
|
||||||
|
maxWidth = 280,
|
||||||
|
open: controlledOpen,
|
||||||
|
onOpenChange,
|
||||||
|
arrow = false,
|
||||||
|
portalTarget,
|
||||||
|
header,
|
||||||
|
}) => {
|
||||||
|
const [internalOpen, setInternalOpen] = useState(false);
|
||||||
|
const [isPinned, setIsPinned] = useState(false);
|
||||||
|
const triggerRef = useRef<HTMLElement>(null);
|
||||||
|
const tooltipRef = useRef<HTMLDivElement>(null);
|
||||||
|
const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
// Always use controlled mode - if no controlled props provided, use internal state
|
||||||
|
const isControlled = controlledOpen !== undefined;
|
||||||
|
const open = isControlled ? controlledOpen : internalOpen;
|
||||||
|
|
||||||
|
const handleOpenChange = (newOpen: boolean) => {
|
||||||
|
if (isControlled) {
|
||||||
|
onOpenChange?.(newOpen);
|
||||||
|
} else {
|
||||||
|
setInternalOpen(newOpen);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset pin state when closing
|
||||||
|
if (!newOpen) {
|
||||||
|
setIsPinned(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTooltipClick = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsPinned(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDocumentClick = (e: MouseEvent) => {
|
||||||
|
// If tooltip is pinned and we click outside of it, unpin it
|
||||||
|
if (isPinned && isClickOutside(e, tooltipRef.current)) {
|
||||||
|
setIsPinned(false);
|
||||||
|
handleOpenChange(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use the positioning hook
|
||||||
|
const { coords, positionReady } = useTooltipPosition({
|
||||||
|
open,
|
||||||
|
sidebarTooltip,
|
||||||
|
position,
|
||||||
|
gap,
|
||||||
|
triggerRef,
|
||||||
|
tooltipRef
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add document click listener for unpinning
|
||||||
|
useEffect(() => {
|
||||||
|
if (isPinned) {
|
||||||
|
return addEventListenerWithCleanup(document, 'click', handleDocumentClick as EventListener);
|
||||||
|
}
|
||||||
|
}, [isPinned]);
|
||||||
|
|
||||||
|
const getArrowClass = () => {
|
||||||
|
// No arrow for sidebar tooltips
|
||||||
|
if (sidebarTooltip) return null;
|
||||||
|
|
||||||
|
switch (position) {
|
||||||
|
case 'top': return "tooltip-arrow tooltip-arrow-top";
|
||||||
|
case 'bottom': return "tooltip-arrow tooltip-arrow-bottom";
|
||||||
|
case 'left': return "tooltip-arrow tooltip-arrow-left";
|
||||||
|
case 'right': return "tooltip-arrow tooltip-arrow-right";
|
||||||
|
default: return "tooltip-arrow tooltip-arrow-right";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getArrowStyleClass = (arrowClass: string) => {
|
||||||
|
const styleKey = arrowClass.split(' ')[1];
|
||||||
|
// Handle both kebab-case and camelCase CSS module exports
|
||||||
|
return styles[styleKey as keyof typeof styles] ||
|
||||||
|
styles[styleKey.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) as keyof typeof styles] ||
|
||||||
|
'';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Only show tooltip when position is ready and correct
|
||||||
|
const shouldShowTooltip = open && (sidebarTooltip ? positionReady : true);
|
||||||
|
|
||||||
|
const tooltipElement = shouldShowTooltip ? (
|
||||||
|
<div
|
||||||
|
ref={tooltipRef}
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: coords.top,
|
||||||
|
left: coords.left,
|
||||||
|
maxWidth,
|
||||||
|
zIndex: 9999,
|
||||||
|
visibility: 'visible',
|
||||||
|
opacity: 1,
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
}}
|
||||||
|
className={`${styles['tooltip-container']} ${isPinned ? styles.pinned : ''}`}
|
||||||
|
onClick={handleTooltipClick}
|
||||||
|
>
|
||||||
|
{isPinned && (
|
||||||
|
<button
|
||||||
|
className={styles['tooltip-pin-button']}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsPinned(false);
|
||||||
|
handleOpenChange(false);
|
||||||
|
}}
|
||||||
|
title="Close tooltip"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-rounded">
|
||||||
|
close
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{arrow && getArrowClass() && (
|
||||||
|
<div
|
||||||
|
className={`${styles['tooltip-arrow']} ${getArrowStyleClass(getArrowClass()!)}`}
|
||||||
|
style={coords.arrowOffset !== null ? {
|
||||||
|
[position === 'top' || position === 'bottom' ? 'left' : 'top']: coords.arrowOffset
|
||||||
|
} : undefined}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{header && (
|
||||||
|
<div className={styles['tooltip-header']}>
|
||||||
|
<div className={styles['tooltip-logo']}>
|
||||||
|
{header.logo || <img src="/logo-tooltip.svg" alt="Stirling PDF" style={{ width: '1.4rem', height: '1.4rem', display: 'block' }} />}
|
||||||
|
</div>
|
||||||
|
<span className={styles['tooltip-title']}>{header.title}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<TooltipContent
|
||||||
|
content={content}
|
||||||
|
tips={tips}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const handleMouseEnter = (e: React.MouseEvent) => {
|
||||||
|
// Clear any existing timeout
|
||||||
|
if (hoverTimeoutRef.current) {
|
||||||
|
clearTimeout(hoverTimeoutRef.current);
|
||||||
|
hoverTimeoutRef.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only show on hover if not pinned
|
||||||
|
if (!isPinned) {
|
||||||
|
handleOpenChange(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
(children.props as any)?.onMouseEnter?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = (e: React.MouseEvent) => {
|
||||||
|
// Only hide on mouse leave if not pinned
|
||||||
|
if (!isPinned) {
|
||||||
|
// Add a small delay to prevent flickering
|
||||||
|
hoverTimeoutRef.current = setTimeout(() => {
|
||||||
|
handleOpenChange(false);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
(children.props as any)?.onMouseLeave?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent) => {
|
||||||
|
// Toggle pin state on click
|
||||||
|
if (open) {
|
||||||
|
setIsPinned(!isPinned);
|
||||||
|
} else {
|
||||||
|
handleOpenChange(true);
|
||||||
|
setIsPinned(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
(children.props as any)?.onClick?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Take the child element and add tooltip behavior to it
|
||||||
|
const childWithTooltipHandlers = React.cloneElement(children as any, {
|
||||||
|
// Keep track of the element for positioning
|
||||||
|
ref: (node: HTMLElement) => {
|
||||||
|
triggerRef.current = node;
|
||||||
|
// Don't break if the child already has a ref
|
||||||
|
const originalRef = (children as any).ref;
|
||||||
|
if (typeof originalRef === 'function') {
|
||||||
|
originalRef(node);
|
||||||
|
} else if (originalRef && typeof originalRef === 'object') {
|
||||||
|
originalRef.current = node;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Add mouse events to show/hide tooltip
|
||||||
|
onMouseEnter: handleMouseEnter,
|
||||||
|
onMouseLeave: handleMouseLeave,
|
||||||
|
onClick: handleClick,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{childWithTooltipHandlers}
|
||||||
|
{portalTarget && document.body.contains(portalTarget)
|
||||||
|
? tooltipElement && createPortal(tooltipElement, portalTarget)
|
||||||
|
: tooltipElement}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
78
frontend/src/components/shared/tooltip/TooltipContent.tsx
Normal file
78
frontend/src/components/shared/tooltip/TooltipContent.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styles from './Tooltip.module.css';
|
||||||
|
|
||||||
|
export interface TooltipTip {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
bullets?: string[];
|
||||||
|
body?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TooltipContentProps {
|
||||||
|
content?: React.ReactNode;
|
||||||
|
tips?: TooltipTip[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TooltipContent: React.FC<TooltipContentProps> = ({
|
||||||
|
content,
|
||||||
|
tips,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles['tooltip-body']}`}
|
||||||
|
style={{
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
padding: '16px',
|
||||||
|
fontSize: '14px',
|
||||||
|
lineHeight: '1.6'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ color: 'var(--text-primary)' }}>
|
||||||
|
{tips ? (
|
||||||
|
<>
|
||||||
|
{tips.map((tip, index) => (
|
||||||
|
<div key={index} style={{ marginBottom: index < tips.length - 1 ? '24px' : '0' }}>
|
||||||
|
{tip.title && (
|
||||||
|
<div style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
backgroundColor: 'var(--tooltip-title-bg)',
|
||||||
|
color: 'var(--tooltip-title-color)',
|
||||||
|
padding: '6px 12px',
|
||||||
|
borderRadius: '16px',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '600',
|
||||||
|
marginBottom: '12px'
|
||||||
|
}}>
|
||||||
|
{tip.title}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{tip.description && (
|
||||||
|
<p style={{ margin: '0 0 12px 0', color: 'var(--text-secondary)', fontSize: '13px' }} dangerouslySetInnerHTML={{ __html: tip.description }} />
|
||||||
|
)}
|
||||||
|
{tip.bullets && tip.bullets.length > 0 && (
|
||||||
|
<ul style={{ margin: '0', paddingLeft: '16px', color: 'var(--text-secondary)', fontSize: '13px' }}>
|
||||||
|
{tip.bullets.map((bullet, bulletIndex) => (
|
||||||
|
<li key={bulletIndex} style={{ marginBottom: '6px' }} dangerouslySetInnerHTML={{ __html: bullet }} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
{tip.body && (
|
||||||
|
<div style={{ marginTop: '12px' }}>
|
||||||
|
{tip.body}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{content && (
|
||||||
|
<div style={{ marginTop: '24px' }}>
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
content
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { TooltipContent } from './types';
|
import { TooltipContent } from './types';
|
||||||
|
|
||||||
export const useCompressTips = (): TooltipContent => {
|
export const CompressTips = (): TooltipContent => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -11,11 +11,11 @@ export const useCompressTips = (): TooltipContent => {
|
|||||||
tips: [
|
tips: [
|
||||||
{
|
{
|
||||||
title: t("compress.tooltip.description.title", "Description"),
|
title: t("compress.tooltip.description.title", "Description"),
|
||||||
description: t("compress.tooltip.description.text", "Compression is an easy way to reduce your file size. Pick <strong>File Size</strong> to enter a target size and have us adjust quality for you. Pick <strong>Quality</strong> to set compression strength manually.")
|
description: t("compress.tooltip.description.text", "Compression is an easy way to reduce your file size. Pick File Size to enter a target size and have us adjust quality for you. Pick Quality to set compression strength manually.")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("compress.tooltip.qualityAdjustment.title", "Quality Adjustment"),
|
title: t("compress.tooltip.qualityAdjustment.title", "Quality Adjustment"),
|
||||||
description: t("compress.tooltip.qualityAdjustment.text", "Drag the slider to adjust the compression strength. <strong>Lower values (1-3)</strong> preserve quality but result in larger files. <strong>Higher values (7-9)</strong> shrink the file more but reduce image clarity."),
|
description: t("compress.tooltip.qualityAdjustment.text", "Drag the slider to adjust the compression strength. Lower values (1-3) preserve quality but result in larger files. Higher values (7-9) shrink the file more but reduce image clarity."),
|
||||||
bullets: [
|
bullets: [
|
||||||
t("compress.tooltip.qualityAdjustment.bullet1", "Lower values preserve quality"),
|
t("compress.tooltip.qualityAdjustment.bullet1", "Lower values preserve quality"),
|
||||||
t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size")
|
t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size")
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { TooltipContent } from './types';
|
import { TooltipContent } from './types';
|
||||||
|
|
||||||
export const useOcrTips = (): TooltipContent => {
|
export const OcrTips = (): TooltipContent => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -13,9 +13,9 @@ export const useOcrTips = (): TooltipContent => {
|
|||||||
title: t("ocr.tooltip.mode.title", "OCR Mode"),
|
title: t("ocr.tooltip.mode.title", "OCR Mode"),
|
||||||
description: t("ocr.tooltip.mode.text", "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight."),
|
description: t("ocr.tooltip.mode.text", "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight."),
|
||||||
bullets: [
|
bullets: [
|
||||||
t("ocr.tooltip.mode.bullet1", "<strong>Auto</strong> skips pages that already contain text layers."),
|
t("ocr.tooltip.mode.bullet1", "Auto skips pages that already contain text layers."),
|
||||||
t("ocr.tooltip.mode.bullet2", "<strong>Force</strong> re-OCRs every page and replaces all the text."),
|
t("ocr.tooltip.mode.bullet2", "Force re-OCRs every page and replaces all the text."),
|
||||||
t("ocr.tooltip.mode.bullet3", "<strong>Strict</strong> halts if any selectable text is found.")
|
t("ocr.tooltip.mode.bullet3", "Strict halts if any selectable text is found.")
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -26,9 +26,9 @@ export const useOcrTips = (): TooltipContent => {
|
|||||||
title: t("ocr.tooltip.output.title", "Output"),
|
title: t("ocr.tooltip.output.title", "Output"),
|
||||||
description: t("ocr.tooltip.output.text", "Decide how you want the text output formatted:"),
|
description: t("ocr.tooltip.output.text", "Decide how you want the text output formatted:"),
|
||||||
bullets: [
|
bullets: [
|
||||||
t("ocr.tooltip.output.bullet1", "<strong>Searchable PDF</strong> embeds text behind the original image."),
|
t("ocr.tooltip.output.bullet1", "Searchable PDF embeds text behind the original image."),
|
||||||
t("ocr.tooltip.output.bullet2", "<strong>HOCR XML</strong> returns a structured machine-readable file."),
|
t("ocr.tooltip.output.bullet2", "HOCR XML returns a structured machine-readable file."),
|
||||||
t("ocr.tooltip.output.bullet3", "<strong>Plain-text sidecar</strong> creates a separate .txt file with raw content.")
|
t("ocr.tooltip.output.bullet3", "Plain-text sidecar creates a separate .txt file with raw content.")
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -2,7 +2,7 @@ import React, { createContext, useContext, useMemo, useRef } from 'react';
|
|||||||
import { Paper, Text, Stack, Box, Flex } from '@mantine/core';
|
import { Paper, Text, Stack, Box, Flex } from '@mantine/core';
|
||||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||||
import { Tooltip, TooltipTip } from '../../shared/Tooltip';
|
import { Tooltip, TooltipTip } from '../../shared/tooltip/Tooltip';
|
||||||
|
|
||||||
interface ToolStepContextType {
|
interface ToolStepContextType {
|
||||||
visibleStepCount: number;
|
visibleStepCount: number;
|
||||||
@ -31,6 +31,38 @@ export interface ToolStepProps {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderTooltipTitle = (
|
||||||
|
title: string,
|
||||||
|
tooltip: ToolStepProps['tooltip'],
|
||||||
|
isCollapsed: boolean
|
||||||
|
) => {
|
||||||
|
if (tooltip && !isCollapsed) {
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
content={tooltip.content}
|
||||||
|
tips={tooltip.tips}
|
||||||
|
header={tooltip.header}
|
||||||
|
sidebarTooltip={true}
|
||||||
|
>
|
||||||
|
<Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<Text fw={500} size="lg">
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
<span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
|
||||||
|
gpp_maybe
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Text fw={500} size="lg">
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const ToolStep = ({
|
const ToolStep = ({
|
||||||
title,
|
title,
|
||||||
isVisible = true,
|
isVisible = true,
|
||||||
@ -80,27 +112,7 @@ const ToolStep = ({
|
|||||||
{stepNumber}
|
{stepNumber}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
{tooltip && !isCollapsed ? (
|
{renderTooltipTitle(title, tooltip, isCollapsed)}
|
||||||
<Tooltip
|
|
||||||
content={tooltip.content}
|
|
||||||
tips={tooltip.tips}
|
|
||||||
header={tooltip.header}
|
|
||||||
sidebarTooltip={true}
|
|
||||||
>
|
|
||||||
<Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<Text fw={500} size="lg">
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
<span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
|
|
||||||
gpp_maybe
|
|
||||||
</span>
|
|
||||||
</Flex>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<Text fw={500} size="lg">
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
{isCollapsed ? (
|
{isCollapsed ? (
|
||||||
|
|||||||
177
frontend/src/hooks/useTooltipPosition.ts
Normal file
177
frontend/src/hooks/useTooltipPosition.ts
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
|
import { clamp, getSidebarRect } from '../utils/domUtils';
|
||||||
|
|
||||||
|
type Position = 'right' | 'left' | 'top' | 'bottom';
|
||||||
|
|
||||||
|
interface PlacementResult {
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PositionState {
|
||||||
|
coords: { top: number; left: number; arrowOffset: number | null };
|
||||||
|
positionReady: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function place(
|
||||||
|
triggerRect: DOMRect,
|
||||||
|
tooltipRect: DOMRect,
|
||||||
|
position: Position,
|
||||||
|
offset: number
|
||||||
|
): PlacementResult {
|
||||||
|
let top = 0;
|
||||||
|
let left = 0;
|
||||||
|
|
||||||
|
switch (position) {
|
||||||
|
case 'right':
|
||||||
|
top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
|
||||||
|
left = triggerRect.right + offset;
|
||||||
|
break;
|
||||||
|
case 'left':
|
||||||
|
top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
|
||||||
|
left = triggerRect.left - tooltipRect.width - offset;
|
||||||
|
break;
|
||||||
|
case 'top':
|
||||||
|
top = triggerRect.top - tooltipRect.height - offset;
|
||||||
|
left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom':
|
||||||
|
top = triggerRect.bottom + offset;
|
||||||
|
left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { top, left };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTooltipPosition({
|
||||||
|
open,
|
||||||
|
sidebarTooltip,
|
||||||
|
position,
|
||||||
|
gap,
|
||||||
|
triggerRef,
|
||||||
|
tooltipRef
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
sidebarTooltip: boolean;
|
||||||
|
position: Position;
|
||||||
|
gap: number;
|
||||||
|
triggerRef: React.RefObject<HTMLElement | null>;
|
||||||
|
tooltipRef: React.RefObject<HTMLDivElement | null>;
|
||||||
|
}): PositionState {
|
||||||
|
const [coords, setCoords] = useState<{ top: number; left: number; arrowOffset: number | null }>({
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
arrowOffset: null
|
||||||
|
});
|
||||||
|
const [positionReady, setPositionReady] = useState(false);
|
||||||
|
|
||||||
|
// Memoize sidebar position for performance
|
||||||
|
const sidebarLeft = useMemo(() => {
|
||||||
|
if (!sidebarTooltip) return 0;
|
||||||
|
const sidebarInfo = getSidebarRect();
|
||||||
|
return sidebarInfo.rect ? sidebarInfo.rect.right : 240;
|
||||||
|
}, [sidebarTooltip]);
|
||||||
|
|
||||||
|
const updatePosition = () => {
|
||||||
|
if (!triggerRef.current || !open) return;
|
||||||
|
|
||||||
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||||
|
|
||||||
|
let top: number;
|
||||||
|
let left: number;
|
||||||
|
let arrowOffset: number | null = null;
|
||||||
|
|
||||||
|
if (sidebarTooltip) {
|
||||||
|
// Get fresh sidebar position each time
|
||||||
|
const sidebarInfo = getSidebarRect();
|
||||||
|
const currentSidebarRight = sidebarInfo.rect ? sidebarInfo.rect.right : sidebarLeft;
|
||||||
|
|
||||||
|
// Only show tooltip if we have the correct sidebar (ToolPanel)
|
||||||
|
if (!sidebarInfo.isCorrectSidebar) {
|
||||||
|
console.log('🚫 Not showing tooltip - wrong sidebar detected');
|
||||||
|
setPositionReady(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Position to the right of correct sidebar with 20px gap
|
||||||
|
left = currentSidebarRight + 20;
|
||||||
|
top = triggerRect.top; // Align top of tooltip with trigger element
|
||||||
|
|
||||||
|
console.log('Sidebar tooltip positioning:', {
|
||||||
|
currentSidebarRight,
|
||||||
|
triggerRect,
|
||||||
|
calculatedLeft: left,
|
||||||
|
calculatedTop: top,
|
||||||
|
isCorrectSidebar: sidebarInfo.isCorrectSidebar
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only clamp if we have tooltip dimensions
|
||||||
|
if (tooltipRef.current) {
|
||||||
|
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
||||||
|
const maxTop = window.innerHeight - tooltipRect.height - 4;
|
||||||
|
const originalTop = top;
|
||||||
|
top = clamp(top, 4, maxTop);
|
||||||
|
|
||||||
|
// If tooltip was clamped, adjust arrow position to stay aligned with trigger
|
||||||
|
if (originalTop !== top) {
|
||||||
|
arrowOffset = triggerRect.top + triggerRect.height / 2 - top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setCoords({ top, left, arrowOffset });
|
||||||
|
setPositionReady(true);
|
||||||
|
} else {
|
||||||
|
// Regular tooltip logic
|
||||||
|
if (!tooltipRef.current) return;
|
||||||
|
|
||||||
|
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
||||||
|
const placement = place(triggerRect, tooltipRect, position, gap);
|
||||||
|
top = placement.top;
|
||||||
|
left = placement.left;
|
||||||
|
|
||||||
|
// Clamp to viewport
|
||||||
|
top = clamp(top, 4, window.innerHeight - tooltipRect.height - 4);
|
||||||
|
left = clamp(left, 4, window.innerWidth - tooltipRect.width - 4);
|
||||||
|
|
||||||
|
// Calculate arrow position to stay aligned with trigger
|
||||||
|
if (position === 'top' || position === 'bottom') {
|
||||||
|
// For top/bottom arrows, adjust horizontal position
|
||||||
|
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
||||||
|
const tooltipCenter = left + tooltipRect.width / 2;
|
||||||
|
if (Math.abs(triggerCenter - tooltipCenter) > 4) {
|
||||||
|
// Arrow needs adjustment
|
||||||
|
arrowOffset = triggerCenter - left - 4; // 4px is half arrow width
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// For left/right arrows, adjust vertical position
|
||||||
|
const triggerCenter = triggerRect.top + triggerRect.height / 2;
|
||||||
|
const tooltipCenter = top + tooltipRect.height / 2;
|
||||||
|
if (Math.abs(triggerCenter - tooltipCenter) > 4) {
|
||||||
|
// Arrow needs adjustment
|
||||||
|
arrowOffset = triggerCenter - top - 4; // 4px is half arrow height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setCoords({ top, left, arrowOffset });
|
||||||
|
setPositionReady(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
|
||||||
|
requestAnimationFrame(updatePosition);
|
||||||
|
|
||||||
|
const handleUpdate = () => requestAnimationFrame(updatePosition);
|
||||||
|
window.addEventListener('scroll', handleUpdate, true);
|
||||||
|
window.addEventListener('resize', handleUpdate);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleUpdate, true);
|
||||||
|
window.removeEventListener('resize', handleUpdate);
|
||||||
|
};
|
||||||
|
}, [open, sidebarLeft, position, gap, sidebarTooltip]);
|
||||||
|
|
||||||
|
return { coords, positionReady };
|
||||||
|
}
|
||||||
@ -17,7 +17,7 @@ import CompressSettings from "../components/tools/compress/CompressSettings";
|
|||||||
import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
|
import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
|
||||||
import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
|
import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
|
||||||
import { BaseToolProps } from "../types/tool";
|
import { BaseToolProps } from "../types/tool";
|
||||||
import { useCompressTips } from "../components/tips/COMPRESS_TIPS";
|
import { CompressTips } from "../components/tips/CompressTips";
|
||||||
|
|
||||||
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -26,7 +26,7 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
|||||||
|
|
||||||
const compressParams = useCompressParameters();
|
const compressParams = useCompressParameters();
|
||||||
const compressOperation = useCompressOperation();
|
const compressOperation = useCompressOperation();
|
||||||
const compressTips = useCompressTips();
|
const compressTips = CompressTips();
|
||||||
|
|
||||||
// Endpoint validation
|
// Endpoint validation
|
||||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
|
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
|
|||||||
import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
|
import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
|
||||||
import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
|
import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
|
||||||
import { BaseToolProps } from "../types/tool";
|
import { BaseToolProps } from "../types/tool";
|
||||||
import { useOcrTips } from "../components/tips/OCR_TIPS";
|
import { OcrTips } from "../components/tips/OCRTips";
|
||||||
|
|
||||||
const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -27,7 +27,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
|||||||
|
|
||||||
const ocrParams = useOCRParameters();
|
const ocrParams = useOCRParameters();
|
||||||
const ocrOperation = useOCROperation();
|
const ocrOperation = useOCROperation();
|
||||||
const ocrTips = useOcrTips();
|
const ocrTips = OcrTips();
|
||||||
|
|
||||||
// Step expansion state management
|
// Step expansion state management
|
||||||
const [expandedStep, setExpandedStep] = useState<'files' | 'settings' | 'advanced' | null>('files');
|
const [expandedStep, setExpandedStep] = useState<'files' | 'settings' | 'advanced' | null>('files');
|
||||||
|
|||||||
102
frontend/src/utils/domUtils.ts
Normal file
102
frontend/src/utils/domUtils.ts
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
/**
|
||||||
|
* DOM utility functions for common operations
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clamps a value between a minimum and maximum
|
||||||
|
* @param value - The value to clamp
|
||||||
|
* @param min - The minimum allowed value
|
||||||
|
* @param max - The maximum allowed value
|
||||||
|
* @returns The clamped value
|
||||||
|
*/
|
||||||
|
export function clamp(value: number, min: number, max: number): number {
|
||||||
|
return Math.min(Math.max(value, min), max);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Safely adds an event listener with proper cleanup
|
||||||
|
* @param target - The target element or window/document
|
||||||
|
* @param event - The event type
|
||||||
|
* @param handler - The event handler function
|
||||||
|
* @param options - Event listener options
|
||||||
|
* @returns A cleanup function to remove the listener
|
||||||
|
*/
|
||||||
|
export function addEventListenerWithCleanup(
|
||||||
|
target: EventTarget,
|
||||||
|
event: string,
|
||||||
|
handler: EventListener,
|
||||||
|
options?: boolean | AddEventListenerOptions
|
||||||
|
): () => void {
|
||||||
|
target.addEventListener(event, handler, options);
|
||||||
|
return () => target.removeEventListener(event, handler, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if a click event occurred outside of a specified element
|
||||||
|
* @param event - The click event
|
||||||
|
* @param element - The element to check against
|
||||||
|
* @returns True if the click was outside the element
|
||||||
|
*/
|
||||||
|
export function isClickOutside(event: MouseEvent, element: HTMLElement | null): boolean {
|
||||||
|
return element ? !element.contains(event.target as Node) : true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the sidebar rectangle for tooltip positioning
|
||||||
|
* @returns Object containing the sidebar rect and whether it's the correct sidebar
|
||||||
|
*/
|
||||||
|
export function getSidebarRect(): { rect: DOMRect | null, isCorrectSidebar: boolean } {
|
||||||
|
// Find the rightmost sidebar - this will be the "All Tools" expanded panel
|
||||||
|
const allSidebars = [];
|
||||||
|
|
||||||
|
// Find the QuickAccessBar (narrow left bar)
|
||||||
|
const quickAccessBar = document.querySelector('[data-sidebar="quick-access"]');
|
||||||
|
if (quickAccessBar) {
|
||||||
|
const rect = quickAccessBar.getBoundingClientRect();
|
||||||
|
if (rect.width > 0) {
|
||||||
|
allSidebars.push({
|
||||||
|
element: 'QuickAccessBar',
|
||||||
|
selector: '[data-sidebar="quick-access"]',
|
||||||
|
rect
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the tool panel (the expanded "All Tools" panel)
|
||||||
|
const toolPanel = document.querySelector('[data-sidebar="tool-panel"]');
|
||||||
|
if (toolPanel) {
|
||||||
|
const rect = toolPanel.getBoundingClientRect();
|
||||||
|
if (rect.width > 0) {
|
||||||
|
allSidebars.push({
|
||||||
|
element: 'ToolPanel',
|
||||||
|
selector: '[data-sidebar="tool-panel"]',
|
||||||
|
rect
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use the rightmost sidebar (which should be the tool panel when expanded)
|
||||||
|
if (allSidebars.length > 0) {
|
||||||
|
const rightmostSidebar = allSidebars.reduce((rightmost, current) => {
|
||||||
|
return current.rect.right > rightmost.rect.right ? current : rightmost;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only consider it correct if we're using the ToolPanel (expanded All Tools sidebar)
|
||||||
|
const isCorrectSidebar = rightmostSidebar.element === 'ToolPanel';
|
||||||
|
|
||||||
|
console.log('✅ Tooltip positioning using:', {
|
||||||
|
element: rightmostSidebar.element,
|
||||||
|
selector: rightmostSidebar.selector,
|
||||||
|
width: rightmostSidebar.rect.width,
|
||||||
|
right: rightmostSidebar.rect.right,
|
||||||
|
isCorrectSidebar,
|
||||||
|
rect: rightmostSidebar.rect
|
||||||
|
});
|
||||||
|
|
||||||
|
return { rect: rightmostSidebar.rect, isCorrectSidebar };
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn('⚠️ No sidebars found, using fallback positioning');
|
||||||
|
// Final fallback
|
||||||
|
return { rect: new DOMRect(0, 0, 280, window.innerHeight), isCorrectSidebar: false };
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user