diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx index e727dd1..db0cb07 100644 --- a/frontend/src/pages/TourDetailPage.tsx +++ b/frontend/src/pages/TourDetailPage.tsx @@ -8,8 +8,8 @@ import { AddMemberModal } from '../components/AddMemberModal'; import { useConfirm } from '@/hooks/useConfirm'; import { useNotification } from '@/hooks/useNotification'; import { CommentModal } from '@/components/CommentModal'; -import { AddPhotoModal } from '@/components/AddPhotoModal'; -import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap } from 'react-leaflet'; +import { AddPhotoModal } from '@/components/AddPhotoModal'; +import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap, Tooltip } from 'react-leaflet'; import _MarkerClusterGroup from 'react-leaflet-cluster'; const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup; import { @@ -110,6 +110,47 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => { }, [rotation, map]); return null; }; + +// Component Helper để hiển thị mẹo khi người dùng dừng chuột trên bản đồ quá 3 giây +const MapHoverTip = ({ canEdit }: { canEdit: boolean }) => { + const [tipPos, setTipPos] = useState(null); + const [visible, setVisible] = useState(false); + const timerRef = React.useRef(null); + + useMapEvents({ + mousemove: (e) => { + if (!canEdit) return; + setVisible(false); + setTipPos(e.latlng); + if (timerRef.current) clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => { + setVisible(true); + }, 3000); + }, + mousedown: () => { + if (timerRef.current) clearTimeout(timerRef.current); + setVisible(false); + }, + dragstart: () => { + if (timerRef.current) clearTimeout(timerRef.current); + setVisible(false); + }, + contextmenu: () => { + if (timerRef.current) clearTimeout(timerRef.current); + setVisible(false); + } + }); + + if (!visible || !tipPos) return null; + + return ( + + + Mẹo: nhấn giữ chuột phải để ghim + + + ); +}; // Menu ngữ cảnh cho bản đồ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.LatLng) => void }) => { const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null); @@ -1219,10 +1260,10 @@ export const TourDetailPage = ({ > {canEdit && !isPublicView && ( - setRouteMenu(null)} - /> + <> + + setRouteMenu(null)} /> + )} {/* Tự động đóng khung Start và End khi dữ liệu thay đổi */}