3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: xoay màn hình theo hướng người nhìn trong màn hình bản đồ vẫn còn xoay tròn

Browse Source
This commit is contained in:
3dtours
2026-06-17 22:23:01 +07:00
parent abb61f65cd
commit 2462850e2e
1 changed files with 5 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/TourDetailPage.tsx
+5 -18
View File
@@ -172,9 +172,9 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
const map = useMap(); const map = useMap();
useEffect(() => { useEffect(() => {
const container = map.getContainer(); const container = map.getContainer();
// Tăng scale lên 1.8 để đảm bảo bao phủ toàn bộ màn hình điện thoại (vốn có tỉ lệ dài) khi xoay ở mọi góc độ // Tăng scale lên 2.5 để bao phủ hoàn toàn các màn hình siêu dài (như 21:9)
container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 1.8})`; container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 2.5})`;
container.style.transition = 'transform 0.3s ease-out'; container.style.transition = 'transform 0.1s linear';
}, [rotation, map]); }, [rotation, map]);
return null; return null;
}; };
@@ -384,7 +384,6 @@ export const TourDetailPage = ({
// State mới cho hướng thiết bị (la bàn) // State mới cho hướng thiết bị (la bàn)
const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null); const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null);
const rotationUpdateTimer = useRef<NodeJS.Timeout | null>(null);
// Theo dõi hướng thiết bị (la bàn) // Theo dõi hướng thiết bị (la bàn)
useEffect(() => { useEffect(() => {
@@ -408,10 +407,6 @@ export const TourDetailPage = ({
// Logic kết hợp để xác định hướng xoay bản đồ // Logic kết hợp để xác định hướng xoay bản đồ
useEffect(() => { useEffect(() => {
if (rotationUpdateTimer.current) {
clearTimeout(rotationUpdateTimer.current);
}
if (!isHeadingMode) { if (!isHeadingMode) {
setMapRotation(0); // Đặt lại hướng Bắc nếu chế độ xoay tắt setMapRotation(0); // Đặt lại hướng Bắc nếu chế độ xoay tắt
return; return;
@@ -427,17 +422,9 @@ export const TourDetailPage = ({
} }
if (newRotation !== null) { if (newRotation !== null) {
// Debounce cập nhật xoay để làm mượt chuyển động // Cập nhật ngay lập tức để tăng độ nhạy, CSS transition sẽ lo phần mượt mà
rotationUpdateTimer.current = setTimeout(() => { setMapRotation(newRotation);
setMapRotation(newRotation!);
}, 100); // Trì hoãn 100ms
} }
return () => {
if (rotationUpdateTimer.current) {
clearTimeout(rotationUpdateTimer.current);
}
};
}, [isHeadingMode, gpsHeading, userSpeed, deviceOrientationHeading]); }, [isHeadingMode, gpsHeading, userSpeed, deviceOrientationHeading]);
const [isStartPointAction, setIsStartPointAction] = useState(false); const [isStartPointAction, setIsStartPointAction] = useState(false);