+
+ );
+});
+
+export default ErrorOverlay;
diff --git a/src/client/src/components/Fullscreen3DModal.jsx b/src/client/src/components/Fullscreen3DModal.jsx
new file mode 100644
index 0000000..b8d6dde
--- /dev/null
+++ b/src/client/src/components/Fullscreen3DModal.jsx
@@ -0,0 +1,56 @@
+import React, { useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { ThreeView } from "./widgets/ThreeView";
+import { ThreeViewErrorBoundary } from "./ThreeViewErrorBoundary";
+import scale_plus from "../assets/fullscreen-modal-actions/scale_plus.png";
+import scale_minus from "../assets/fullscreen-modal-actions/scale_minus.png";
+import closeIcon from "../assets/fullscreen-modal-actions/close.png";
+
+const Fullscreen3DModal = ({ isOpen, onClose, fileUrl }) => {
+ if (!isOpen || !fileUrl) return null;
+
+ const [scale, setScale] = useState(0.1);
+ const [fullscreenResetKey, setFullscreenResetKey] = useState(0);
+
+ const handleResetScale = (e) => {
+ e.stopPropagation();
+ setScale(0.1);
+ };
+
+ return createPortal(
+
+ 
+
+
+ {error}
+
+
,
+ document.body
+ );
+};
+
+export default Fullscreen3DModal;
diff --git a/src/client/src/components/ListOfSights.jsx b/src/client/src/components/ListOfSights.jsx
new file mode 100644
index 0000000..d5d17bb
--- /dev/null
+++ b/src/client/src/components/ListOfSights.jsx
@@ -0,0 +1,520 @@
+import React, {
+ useState,
+ useEffect,
+ useRef,
+ useCallback,
+ useMemo,
+} from "react";
+import { observer } from "mobx-react-lite";
+import "../styles/ListOfSights.css";
+import { useGeolocationStore, useColorStore } from "../stores";
+import ContentAPI from "../api/content/content.api";
+import { getMediaType } from "../utils/getMediaType";
+
+// Импортируем новые компоненты
+import SightFrame from "./ListOfSights/SightFrame";
+import ListHeader from "./ListOfSights/ListHeader";
+import SightsList from "./ListOfSights/SightsList";
+import AlphabetNavigator from "./ListOfSights/AlphabetNavigator";
+import LanguageSelector from "./ListOfSights/LanguageSelector";
+import TransferWidget from "./ListOfSights/TransferWidget";
+import { apiStore } from "../api/ApiStore/store";
+
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const ListOfSights = observer(() => {
+ const [sightData, setSightData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const store = useGeolocationStore();
+ const colorStore = useColorStore();
+ const { currentColor, startColorAnimation } = colorStore;
+ const { routeSights, routeSightsEn, routeSightsZh } = apiStore;
+ const {
+ nearestSightId,
+ selectedSightId,
+ setSelectedSightId,
+ selectedLanguage,
+ selectedLanguageRight,
+ setSelectedLanguageRight,
+ nearestStationId,
+ isInteractingWith3D,
+ isManualSelection,
+ setIsManualSelection,
+ isRightWidgetSelectorOpen,
+ setIsRightWidgetSelectorOpen,
+ isLeftWidgetOpen,
+ isTransferWidgetOpen,
+ setIsTransferWidgetOpen,
+ } = store;
+ const { context: contextData, routeStations } = apiStore;
+
+ const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+ const [selectedLetter, setSelectedLetter] = useState(null);
+ const [TransferWidgetData, setTransferWidgetData] = useState(null);
+ const [isTransferButtonVisible, setIsTransferButtonVisible] = useState(false);
+ const [showTransferButton, setShowTransferButton] = useState(false);
+ const [highlightedSights, setHighlightedSights] = useState(new Set());
+ const [isAlphabetDisabled, setIsAlphabetDisabled] = useState(false);
+
+ const sightRefs = useRef({});
+ const sightsListRef = useRef(null);
+ const alphabetRef = useRef(null);
+ const isInitialSelectionDone = useRef(false);
+
+ const handleIconClick = () => {
+ setIsRightWidgetSelectorOpen(!isRightWidgetSelectorOpen);
+ };
+
+ const handleSightClick = useCallback(
+ (id) => {
+ setSelectedSightId(String(id));
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ // Закрываем виджет губернатора при выборе достопримечательности
+ store.closeGovernorModal();
+ },
+ [setSelectedSightId, setIsRightWidgetSelectorOpen, store],
+ );
+
+ const handleLetterClick = (letter) => {
+ // Если алфавит заблокирован, игнорируем клик
+ if (isAlphabetDisabled) return;
+
+ setSelectedLetter((prevLetter) => {
+ const newLetter = prevLetter === letter ? null : letter;
+
+ if (newLetter && sightData) {
+ // Блокируем алфавит на время анимации
+ setIsAlphabetDisabled(true);
+
+ // Находим все достопримечательности, начинающиеся с выбранной буквы
+ const sightsForLetter = sightData.filter((sight) => {
+ if (!sight.name) return false;
+
+ let sightFirstChar = sight.name.trim().charAt(0);
+
+ // Для китайского языка используем пиньинь или иероглиф
+ if (selectedLanguageRight === "zh") {
+ if (sight.name_pinyin) {
+ sightFirstChar = sight.name_pinyin.trim().toUpperCase().charAt(0);
+ } else {
+ // Если пиньинь нет, используем первый иероглиф
+ sightFirstChar = sight.name.trim().charAt(0);
+ }
+ } else {
+ sightFirstChar = sightFirstChar.toUpperCase();
+ }
+
+ return sightFirstChar === newLetter;
+ });
+
+ const sightIds = new Set(sightsForLetter.map((sight) => sight.id));
+
+ // Скроллим к первой достопримечательности
+ const firstSightForLetter = sightsForLetter[0];
+ if (firstSightForLetter && sightRefs.current[firstSightForLetter.id]) {
+ const targetElement = sightRefs.current[firstSightForLetter.id];
+
+ if (targetElement) {
+ // Используем setTimeout для гарантии, что OverlayScrollbars инициализирован
+ setTimeout(() => {
+ try {
+ // Используем scrollIntoView, чтобы scroll-margin-top из CSS работал правильно
+ targetElement.scrollIntoView({
+ behavior: "smooth",
+ block: "start",
+ });
+
+ // Fallback mechanism if scrollIntoView fails or is intercepted
+ setTimeout(() => {
+ if (sightsListRef.current) {
+ const container = sightsListRef.current;
+ const rect = targetElement.getBoundingClientRect();
+ const containerRect = container.getBoundingClientRect();
+
+ // Check if element is visible in container
+ const isVisible =
+ rect.top >= containerRect.top &&
+ rect.bottom <= containerRect.bottom;
+
+ if (!isVisible && container.scrollTo) {
+ // Calculate relative position
+ const relativeTop = targetElement.offsetTop;
+ container.scrollTo({
+ top: relativeTop - 15,
+ behavior: "smooth",
+ });
+ }
+ }
+ }, 100);
+ } catch (error) {
+ console.error("Ошибка при скролле к элементу:", error);
+ }
+ }, 100);
+
+ // Запускаем анимацию после завершения скролла (примерно 500-600ms для smooth scroll)
+ setTimeout(() => {
+ setHighlightedSights(sightIds);
+
+ // Через 1.5 секунды убираем подсветку и разблокируем алфавит
+ setTimeout(() => {
+ setHighlightedSights(new Set());
+ setIsAlphabetDisabled(false);
+ }, 1500);
+ }, 600);
+ }
+ } else {
+ setIsAlphabetDisabled(false);
+ }
+ } else {
+ // Если буква отменена, убираем подсветку
+ setHighlightedSights(new Set());
+ }
+ return newLetter;
+ });
+ };
+
+ const handleLanguageChange = (val) => {
+ setIsLangMenuOpen(false);
+ setSelectedLanguageRight(val);
+ };
+
+ const handleTransferToggle = () => {
+ setIsTransferWidgetOpen(!isTransferWidgetOpen);
+ };
+
+ const handleBackToNearest = useCallback(() => {
+ setIsManualSelection(false);
+ const sightData =
+ selectedLanguageRight === "ru"
+ ? routeSights
+ : selectedLanguageRight === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+
+ if (sightData && sightData.length > 0) {
+ const nearestSightInList = sightData.find((s) => s.id == nearestSightId);
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ } else {
+ setSelectedSightId(null);
+ }
+ setIsRightWidgetSelectorOpen(false);
+ // Закрываем виджет губернатора при возврате к ближайшей достопримечательности
+ store.closeGovernorModal();
+ }, [
+ setSelectedSightId,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ nearestSightId,
+ selectedLanguageRight,
+ setIsRightWidgetSelectorOpen,
+ store,
+ ]);
+
+ // Запуск анимации цвета при монтировании компонента
+ useEffect(() => {
+ startColorAnimation();
+ }, [startColorAnimation]);
+
+ // Загрузка достопримечательностей
+ useEffect(() => {
+ setError(null);
+ setIsLoading(true);
+
+ const fetchSights = async () => {
+ try {
+ const sights =
+ selectedLanguageRight === "ru"
+ ? routeSights
+ : selectedLanguageRight === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+
+ const processedSights = sights.map((sight) => ({
+ ...sight,
+ preview_media_type: getMediaType(sight.preview_media_type_raw),
+ thumbnail_type: getMediaType(sight.thumbnail_type_raw),
+ }));
+
+ const sortedSights = [...processedSights].sort((a, b) => {
+ if (a.name && b.name) {
+ return a.name.localeCompare(b.name, selectedLanguageRight, {
+ sensitivity: "base",
+ });
+ }
+ return 0;
+ });
+
+ setSightData(sortedSights);
+ } catch (err) {
+ console.error("Ошибка загрузки достопримечательностей:", err);
+ setError(
+ "Не удалось загрузить достопримечательности. Пожалуйста, попробуйте позже.",
+ );
+ setSightData([]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchSights();
+ }, [contextData?.routeId, selectedLanguageRight]);
+
+ // Анимация кнопки пересадок при открытии/закрытии левого меню
+ useEffect(() => {
+ if (isLeftWidgetOpen) {
+ // При открытии левого меню - сначала показываем кнопку пересадок
+ setIsTransferButtonVisible(true);
+ } else {
+ // При закрытии левого меню - сначала скрываем кнопку пересадок
+ setIsTransferButtonVisible(false);
+ }
+ }, [isLeftWidgetOpen]);
+
+ // Логика выбора достопримечательности
+ useEffect(() => {
+ if (!isLoading && sightData && sightData.length > 0) {
+ if (!isInitialSelectionDone.current && !isManualSelection) {
+ const nearestSightInList = sightData.find(
+ (s) => s.id == nearestSightId,
+ );
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ isInitialSelectionDone.current = true;
+ } else if (!isInitialSelectionDone.current && isManualSelection) {
+ const nearestSightInList = sightData.find(
+ (s) => s.id == nearestSightId,
+ );
+ if (
+ isManualSelection &&
+ nearestSightInList &&
+ nearestSightInList.id === selectedSightId
+ ) {
+ // Все ОК, продолжаем использовать выбранную вручную, если она совпадает с ближайшей
+ } else if (isManualSelection && selectedSightId) {
+ // Ничего не делаем здесь, выбранная вручную достопримечательность уже установлена.
+ } else {
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ }
+ isInitialSelectionDone.current = true;
+ setIsManualSelection(false);
+ }
+
+ if (
+ nearestSightId &&
+ selectedSightId !== nearestSightId &&
+ !isManualSelection &&
+ !isInteractingWith3D
+ ) {
+ const newNearestSight = sightData.find((s) => s.id == nearestSightId);
+ if (newNearestSight) {
+ setSelectedSightId(String(newNearestSight.id));
+ }
+ }
+ } else if (
+ !isLoading &&
+ (!sightData || sightData.length === 0) &&
+ isInitialSelectionDone.current
+ ) {
+ setSelectedSightId(null);
+ isInitialSelectionDone.current = false;
+ setIsManualSelection(false);
+ }
+ }, [
+ isLoading,
+ sightData,
+ nearestSightId,
+ setSelectedSightId,
+ selectedSightId,
+ isManualSelection,
+ isInteractingWith3D,
+ ]);
+
+ // Загрузка данных о пересадках для ближайшей станции
+ useEffect(() => {
+ if (!isLoading && nearestStationId != null) {
+ const fetchTransferWidgetData = async () => {
+ try {
+ const station = routeStations.find((s) => s.id == nearestStationId);
+ const response = station.transfers;
+
+ setTransferWidgetData(response);
+ } catch (err) {
+ console.error("Ошибка в получении пересадок:", err);
+ setTransferWidgetData(null);
+ }
+ };
+ fetchTransferWidgetData();
+ } else if (!isLoading && (!contextData?.routeId || !nearestStationId)) {
+ setTransferWidgetData(null);
+ }
+ }, [isLoading, contextData?.routeId, nearestStationId, routeStations]);
+
+ const currentSelectedSight = sightData
+ ? sightData.find((sight) => sight.id == selectedSightId)
+ : null;
+
+ const sightFrameMedia = useMemo(() => {
+ if (!currentSelectedSight) return null;
+
+ // Если preview_media это строка (URL), используем её как path
+ if (typeof currentSelectedSight.preview_media === "string") {
+ return {
+ id: currentSelectedSight.preview_media,
+ path: currentSelectedSight.preview_media,
+ media_type: currentSelectedSight.preview_media_type || null,
+ type: currentSelectedSight.preview_media_type || null,
+ };
+ }
+
+ if (
+ typeof currentSelectedSight.preview_media === "object" &&
+ currentSelectedSight.preview_media
+ ) {
+ return {
+ id:
+ currentSelectedSight.preview_media.id ||
+ currentSelectedSight.preview_media,
+ path:
+ currentSelectedSight.preview_media.path ||
+ currentSelectedSight.preview_media.url,
+ media_type:
+ currentSelectedSight.preview_media.type ||
+ currentSelectedSight.preview_media.media_type,
+ type:
+ currentSelectedSight.preview_media.type ||
+ currentSelectedSight.preview_media.media_type,
+ };
+ }
+
+ return {
+ id: currentSelectedSight.preview_media,
+ };
+ }, [currentSelectedSight]);
+
+ return (
+
+
+
+ {
+ setFullscreenResetKey((prev) => prev + 1);
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ {currentSelectedSight && (
+
+ );
+});
+
+export default ListOfSights;
diff --git a/src/client/src/components/ListOfSights/AlphabetNavigator.jsx b/src/client/src/components/ListOfSights/AlphabetNavigator.jsx
new file mode 100644
index 0000000..0dd17b6
--- /dev/null
+++ b/src/client/src/components/ListOfSights/AlphabetNavigator.jsx
@@ -0,0 +1,99 @@
+import React, { useMemo, forwardRef } from "react";
+
+const AlphabetNavigator = forwardRef(function AlphabetNavigator(
+ { selectedLetter, onLetterClick, sightData, selectedLanguage, isDisabled },
+ ref
+) {
+ // Генерируем алфавит на основе доступных достопримечательностей
+ const availableLetters = useMemo(() => {
+ if (!sightData || sightData.length === 0) {
+ return [];
+ }
+
+ // Получаем уникальные первые символы из названий достопримечательностей
+ const letters = new Set();
+
+ sightData.forEach((sight) => {
+ if (sight.name && sight.name.trim()) {
+ let firstChar = sight.name.trim().charAt(0);
+
+ // Для китайского языка используем пиньинь (если доступен) или иероглиф
+ if (selectedLanguage === "zh") {
+ if (sight.name_pinyin) {
+ firstChar = sight.name_pinyin.trim().toUpperCase().charAt(0);
+ } else {
+ // Если пиньинь нет, используем первый иероглиф
+ firstChar = sight.name.trim().charAt(0);
+ }
+ } else {
+ firstChar = firstChar.toUpperCase();
+ }
+
+ // Проверяем, что символ подходит для алфавита
+ if (
+ firstChar &&
+ (/[A-ZА-ЯЁ]/.test(firstChar) ||
+ (selectedLanguage === "zh" && /[\u4e00-\u9fff]/.test(firstChar)))
+ ) {
+ letters.add(firstChar);
+ }
+ }
+ });
+
+ // Сортируем символы в зависимости от языка
+ const sortedLetters = Array.from(letters).sort((a, b) => {
+ if (selectedLanguage === "zh") {
+ // Для китайского языка сортируем по пиньинь или по Unicode
+ if (/[A-Z]/.test(a) && /[A-Z]/.test(b)) {
+ // Если оба символа - латинские буквы (пиньинь)
+ return a.localeCompare(b, "en", { sensitivity: "base" });
+ } else if (/[\u4e00-\u9fff]/.test(a) && /[\u4e00-\u9fff]/.test(b)) {
+ // Если оба символа - иероглифы, сортируем по Unicode
+ return a.localeCompare(b, "zh", { sensitivity: "base" });
+ } else {
+ // Смешанные символы: сначала латинские, потом иероглифы
+ return /[A-Z]/.test(a) ? -1 : 1;
+ }
+ }
+ return a.localeCompare(b, selectedLanguage, { sensitivity: "base" });
+ });
+
+ return sortedLetters;
+ }, [sightData, selectedLanguage]);
+
+ // Если нет доступных букв, не показываем компонент
+ if (availableLetters.length === 0) {
+ return null;
+ }
+
+ return (
+
+ setIsLangMenuOpen(true)}
+ onBackToNearest={handleBackToNearest}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {availableLetters.map((letter) => (
+ !isDisabled && onLetterClick(letter)}
+ role="button"
+ tabIndex="0"
+ data-lang={selectedLanguage === "zh" ? "zh" : undefined}
+ aria-label={
+ selectedLanguage === "en"
+ ? `Scroll to sights starting with letter ${letter}`
+ : selectedLanguage === "zh"
+ ? `滚动到以字母 ${letter} 开头的景点`
+ : `Прокрутить к достопримечательностям на букву ${letter}`
+ }
+ >
+ {letter}
+
+ ))}
+
+ );
+});
+
+export default AlphabetNavigator;
diff --git a/src/client/src/components/ListOfSights/LanguageSelector.jsx b/src/client/src/components/ListOfSights/LanguageSelector.jsx
new file mode 100644
index 0000000..d2d6a46
--- /dev/null
+++ b/src/client/src/components/ListOfSights/LanguageSelector.jsx
@@ -0,0 +1,172 @@
+import React from "react";
+import { useGeolocationStore } from "../../stores";
+import { observer } from "mobx-react-lite";
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const LANGUAGE_NAMES = {
+ [LANGUAGES.EN]: "en",
+ [LANGUAGES.RU]: "ru",
+ [LANGUAGES.ZH]: "zh",
+};
+
+const LanguageSelector = observer(function LanguageSelector({
+ selectedLanguageRight,
+ onLanguageChange,
+ isOpen,
+ onToggle,
+ onBackToNearest,
+}) {
+ const store = useGeolocationStore();
+ const { isManualSelection, selectedSightId, nearestSightId } = store;
+
+ const SelectLangHandler = (val) => {
+ onLanguageChange(val);
+ };
+
+ const handleBackClick = () => {
+ if (onBackToNearest) {
+ onBackToNearest();
+ }
+ };
+
+ if (isOpen) {
+ return (
+
+
+ );
+ }
+
+ return (
+ SelectLangHandler(LANGUAGES.EN)}
+ >
+
+
+ SelectLangHandler(LANGUAGES.RU)}
+ >
+
+
+ SelectLangHandler(LANGUAGES.ZH)}
+ >
+
+
+
+
+ );
+});
+
+export default LanguageSelector;
diff --git a/src/client/src/components/ListOfSights/ListHeader.jsx b/src/client/src/components/ListOfSights/ListHeader.jsx
new file mode 100644
index 0000000..9b8a4bb
--- /dev/null
+++ b/src/client/src/components/ListOfSights/ListHeader.jsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const ListHeader = function ListHeader({
+ isLangOpen,
+ isOpen,
+ onIconClick,
+ selectedLanguageRight,
+ isManualSelection,
+ selectedSightId,
+ nearestSightId,
+ onTransferToggle,
+ isTransferWidgetOpen,
+ onBackToNearest,
+}) {
+ const getTitle = () => {
+ return selectedLanguageRight === LANGUAGES.RU
+ ? "Достопримечательности"
+ : selectedLanguageRight === LANGUAGES.ZH
+ ? "景点"
+ : "Attractions";
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default ListHeader;
diff --git a/src/client/src/components/ListOfSights/SightComponent.jsx b/src/client/src/components/ListOfSights/SightComponent.jsx
new file mode 100644
index 0000000..c2dceec
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightComponent.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { getMediaUrl } from "../../api/apiConfig";
+import { useClickDetection } from "../../hooks/useClickDetection";
+
+const SightComponent = function SightComponent({
+ media,
+ title,
+ onPointerUp,
+ sightId,
+ componentRef,
+ isHighlighted,
+}) {
+ // Используем общий хук для различения клика и скролла
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ const renderThumbnail = () => {
+ if (!media || !media.id) {
+ return
+
+
+
+
+ {getTitle()}
+
+ No Media
;
+ }
+
+ const mediaUrl = getMediaUrl(media.id);
+
+ return handlePointerDown(e, sightId)}
+ onPointerUp={(e) => handlePointerUp(e, sightId, onPointerUp)}
+ onScroll={handleScroll}
+ ref={componentRef}
+ role="button"
+ tabIndex="0"
+ aria-label={`Выбрать достопримечательность ${title}`}
+ >
+
+ );
+};
+
+export default SightComponent;
diff --git a/src/client/src/components/ListOfSights/SightFrame.jsx b/src/client/src/components/ListOfSights/SightFrame.jsx
new file mode 100644
index 0000000..c65b0f5
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightFrame.jsx
@@ -0,0 +1,609 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import axios from "axios";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import ContentAPI from "../../api/content/content.api";
+import { getMediaType } from "../../utils/getMediaType";
+import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
+import { ThreeView } from "../widgets/ThreeView";
+import {
+ MinusIcon,
+ PlusIcon,
+ SizeIcon,
+ SizeOpenIcon,
+} from "../widgets/ThreeViewIcons";
+import { ThreeViewErrorBoundary } from "../ThreeViewErrorBoundary";
+import { apiStore } from "../../api/ApiStore/store";
+import { ReactMarkdownComponent } from "../ReactMarkdown";
+import { TouchableLayout } from "../TouchableLayout";
+
+const Watermark = ({ path }) => {
+ if (!path) return null;
+ return {renderThumbnail()}
+
+ {title}
+
+
+ {isLoadingContent ? "Загрузка медиа..." : "Нет медиа для отображения"}
+
+ );
+ }
+
+ const section = articleSections[selectedSection];
+ if (!section) return null;
+
+ const sectionId = section.id?.toString();
+ const currentMediaData = mediaData[sectionId];
+ if (!currentMediaData) return null;
+
+ const className = "sight-frame-media-item visible";
+
+ try {
+ switch (currentMediaData.type) {
+ case "image":
+ return (
+
+
+ );
+ case "3d":
+ return (
+
+ {
+ setThreeViewResetKey((prev) => prev + 1);
+ }}
+ >
+
+
+ );
+ default:
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+ } catch (error) {
+ console.error(`Error rendering media ${sectionId}:`, error);
+ return (
+
+ Неподдерживаемый тип медиа: {currentMediaData.type}
+
+
+
+ );
+ }
+ };
+
+ const isCurrentMedia3D =
+ currentSection && mediaData[currentSection.id]?.type === "3d";
+
+ const getMediaStackStyle = () => {
+ if (isCurrentMedia3D && isFullscreen3D) {
+ const fullHeight = window.innerHeight * 0.8;
+
+ const width = modelAspectRatio
+ ? fullHeight * modelAspectRatio
+ : fullHeight * 1.3;
+
+ const finalWidth = Math.max(width, 550);
+ const containerWidth = 550;
+ const extraWidth = Math.max(0, finalWidth - containerWidth);
+
+ return {
+ height: `${fullHeight}px`,
+ width: `${finalWidth}px`,
+ maxWidth: "100vw",
+ overflow: "visible",
+ marginLeft: `-${extraWidth}px`,
+ marginTop: `-2px`,
+ };
+ }
+ if (isCurrentMedia3D) {
+ if (modelAspectRatio) {
+ const width = 400;
+ const height = Math.min(
+ width / modelAspectRatio,
+ window.innerHeight * 0.7,
+ );
+ return { height: `${height}px` };
+ }
+ return { height: "500px" };
+ }
+ return {};
+ };
+
+ const processedSightName = useMemo(() => {
+ if (!sight_name) return sight_name;
+
+ const namePattern =
+ /([А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]+)/g;
+
+ const parts = sight_name.split(namePattern);
+
+ if (parts.length > 1) {
+ return parts.map((part, index) => {
+ const initialsPattern =
+ /^[А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]+$/;
+ if (initialsPattern.test(part)) {
+ return (
+
+ Ошибка отображения медиа
+
+ + {part} +
+ {sightData?.watermark_lu && !isFullscreen3D && (
+
+ );
+});
+
+export default SightFrame;
diff --git a/src/client/src/components/ListOfSights/SightsList.jsx b/src/client/src/components/ListOfSights/SightsList.jsx
new file mode 100644
index 0000000..3c31462
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightsList.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import SightComponent from "./SightComponent";
+import { TouchableLayout } from "../TouchableLayout";
+
+const SightsList = function SightsList({
+ isOpen,
+ isLoading,
+ error,
+ sightData,
+ onSightClick,
+ sightRefs,
+ sightsListRef,
+ highlightedSights,
+}) {
+ return (
+
+ {contentError ? (
+
+
+ {contentError}
+
+ ) : isLoadingContent || !articleSections ? (
+
+ Загрузка контента...
+
+ ) : (
+ renderCurrentMedia()
+ )}
+
+ {contentError ? (
+
+
+ )}
+
+ )}
+
+ {contentError}
+ ) : !currentSection ? ( +Информация отсутствует.
+ ) : ( + <> + {!isFullscreen3D && ( +
+
+ )}
+ {selectedSection !== 0 && (
+ + {selectedSection === 0 ? processedSightName : sight_name} +
+
+
+
+ {selectedSection !== 0 && (
+
+ setSelectedSection(0)}
+ >
+
+
+ )}
+ {contentError ? (
+ {contentError}
+ ) : ( + articleSections && + articleSections.length > 1 && + articleSections.slice(1).map((section, index) => ( + setSelectedSection(index + 1)}
+ key={section.id || section.heading || index}
+ className={`sight-frame-menu-point ${
+ index + 1 === selectedSection ? "active" : ""
+ }`}
+ role="button"
+ tabIndex="0"
+ >
+ {section.heading}
+
+ ))
+ )}
+
+ {isLoading ? (
+ (sightRefs.current[sight.id] = el)}
+ isHighlighted={
+ highlightedSights && highlightedSights.has(sight.id)
+ }
+ />
+ ))
+ )}
+
+ Загрузка достопримечательностей...
+ ) : error ? ( +{error}
+ ) : !sightData || sightData.length === 0 ? ( +Достопримечательности не найдены.
+ ) : ( + sightData.map((sight) => ( +
+
+ );
+});
+
+export default TransferWidget;
diff --git a/src/client/src/components/ListOfSights/index.js b/src/client/src/components/ListOfSights/index.js
new file mode 100644
index 0000000..76a97bc
--- /dev/null
+++ b/src/client/src/components/ListOfSights/index.js
@@ -0,0 +1,7 @@
+export { default as SightFrame } from "./SightFrame";
+export { default as SightComponent } from "./SightComponent";
+export { default as LanguageSelector } from "./LanguageSelector";
+export { default as TransferWidget } from "./TransferWidget";
+export { default as AlphabetNavigator } from "./AlphabetNavigator";
+export { default as SightsList } from "./SightsList";
+export { default as ListHeader } from "./ListHeader";
diff --git a/src/client/src/components/Loader.jsx b/src/client/src/components/Loader.jsx
new file mode 100644
index 0000000..8f1ebb8
--- /dev/null
+++ b/src/client/src/components/Loader.jsx
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import "../styles/Loader.css";
+
+const loaderVideoPath = new URL("../assets/video/taganai.mp4", import.meta.url)
+ .href;
+
+const Loader = ({
+ loadingStatus = null,
+ loadingProgress = null,
+ onToggleDebug,
+}) => {
+ const [showLoadingInfo, setShowLoadingInfo] = useState(false);
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ if (event.key === "F3") {
+ event.preventDefault();
+ setShowLoadingInfo((prev) => !prev);
+ }
+ if (event.key === "F4") {
+ event.preventDefault();
+ onToggleDebug?.();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [onToggleDebug]);
+
+ const getStatusText = () => {
+ if (!loadingStatus) return "Данные не загружены";
+
+ if (loadingProgress) {
+ const percentage = Math.round(
+ (loadingProgress.current / loadingProgress.total) * 100,
+ );
+ return `${loadingStatus} [${loadingProgress.current}/${loadingProgress.total}] ${percentage}%`;
+ }
+
+ return loadingStatus;
+ };
+
+ return createPortal(
+
+ {getTransferLabel()}
+ {currentTransferData != null &&
+ !Object.values(currentTransferData).every((value) => value === "") ? (
+ <>
+
+
+ {currentTransferData?.metro_red?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_red}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_green?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_green}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_blue?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_blue}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_orange?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_orange}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_purple?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_purple}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.tram?.length > 0 ? (
+
+
+ 
+ {currentTransferData.tram}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.trolleybus?.length > 0 ? (
+
+
+ 
+ {currentTransferData.trolleybus}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.bus?.length > 0 ? (
+
+
+ 
+ {currentTransferData.bus}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.train?.length > 0 ? (
+
+
+ ) : (
+
+ 
+ {currentTransferData.train}
+
+ ) : (
+ ""
+ )}
+ {getNoTransfersMessage()}
+ )}
+
+ {showLoadingInfo &&
,
+ document.body,
+ );
+};
+
+export default Loader;
diff --git a/src/client/src/components/OverlayScrollbarsWrapper.jsx b/src/client/src/components/OverlayScrollbarsWrapper.jsx
new file mode 100644
index 0000000..8395c73
--- /dev/null
+++ b/src/client/src/components/OverlayScrollbarsWrapper.jsx
@@ -0,0 +1,326 @@
+import React, { useMemo, useEffect, useRef, useCallback } from "react";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import "overlayscrollbars/overlayscrollbars.css";
+
+/**
+ * Обертка для OverlayScrollbars с правильной интеграцией с React
+ */
+export const OverlayScrollbarsWrapper = React.forwardRef(
+ (
+ {
+ children,
+ className,
+ onScroll,
+ overflowX = "hidden",
+ overflowY = "scroll",
+ scrollbarVisibility = "auto",
+ ...props
+ },
+ ref
+ ) => {
+ const internalRef = useRef(null);
+ const scrollHandlerRef = useRef(onScroll);
+
+ // Обновляем ref обработчика при изменении
+ useEffect(() => {
+ scrollHandlerRef.current = onScroll;
+ }, [onScroll]);
+
+ // Получаем DOM-элемент из OverlayScrollbars компонента
+ const getDOMElement = (element) => {
+ if (!element) return null;
+
+ // Если это уже DOM элемент
+ if (typeof element.querySelector === "function") {
+ return element;
+ }
+
+ // Если это экземпляр OverlayScrollbars, получаем host элемент
+ if (element.osInstance && typeof element.osInstance === "function") {
+ const instance = element.osInstance();
+ if (instance && instance.getElements) {
+ const elements = instance.getElements();
+ return elements?.host || null;
+ }
+ }
+
+ // Пытаемся получить DOM-элемент через различные методы
+ if (element?.getElement && typeof element.getElement === "function") {
+ return element.getElement();
+ }
+
+ if (element?.$el) {
+ return element.$el;
+ }
+
+ if (element?.current) {
+ return element.current;
+ }
+
+ // Если это объект с host свойством (может быть экземпляр)
+ if (element?.host && typeof element.host.querySelector === "function") {
+ return element.host;
+ }
+
+ return null;
+ };
+
+ // Получаем viewport элемент (scrollable контейнер)
+ const getViewportElement = (element) => {
+ const domElement = getDOMElement(element);
+ if (!domElement || typeof domElement.querySelector !== "function") {
+ return null;
+ }
+ return domElement.querySelector(".os-viewport");
+ };
+
+ // Объединяем внешний ref с viewport элементом
+ useEffect(() => {
+ if (!internalRef.current) return;
+
+ // Функция для обновления ref с viewport элементом
+ const updateRef = () => {
+ const viewport = getViewportElement(internalRef.current);
+ if (viewport) {
+ if (typeof ref === "function") {
+ ref(viewport);
+ } else if (ref) {
+ ref.current = viewport;
+ }
+ return true;
+ }
+ return false;
+ };
+
+ // Пытаемся получить viewport сразу
+ const found = updateRef();
+ if (found) return; // Если нашли сразу, выходим
+
+ // Если viewport еще не создан, ждем его появления
+ const domElement = getDOMElement(internalRef.current);
+ if (domElement && typeof domElement.observe === "function") {
+ const observer = new MutationObserver(() => {
+ if (updateRef()) {
+ observer.disconnect();
+ }
+ });
+
+ observer.observe(domElement, {
+ childList: true,
+ subtree: true,
+ });
+
+ // Также проверяем периодически
+ const checkInterval = setInterval(() => {
+ if (updateRef()) {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ }
+ }, 100);
+
+ // Очищаем через 2 секунды
+ setTimeout(() => {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ }, 2000);
+
+ return () => {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ };
+ } else {
+ // Fallback: периодическая проверка
+ const checkInterval = setInterval(() => {
+ if (updateRef()) {
+ clearInterval(checkInterval);
+ }
+ }, 100);
+
+ setTimeout(() => {
+ clearInterval(checkInterval);
+ }, 2000);
+
+ return () => {
+ clearInterval(checkInterval);
+ };
+ }
+ }, [ref]);
+
+ // Подключаем обработчик события скролла напрямую на viewport элемент
+ useEffect(() => {
+ const element = internalRef.current;
+ if (!element || !scrollHandlerRef.current) return;
+
+ const handleScroll = (event) => {
+ if (scrollHandlerRef.current) {
+ scrollHandlerRef.current(event);
+ }
+ };
+
+ // Ждем, пока OverlayScrollbars создаст viewport элемент
+ const setupScrollHandler = () => {
+ const viewport = getViewportElement(element);
+ if (viewport) {
+ viewport.addEventListener("scroll", handleScroll);
+ return () => {
+ viewport.removeEventListener("scroll", handleScroll);
+ };
+ }
+ return null;
+ };
+
+ // Пытаемся подключить сразу
+ let cleanup = setupScrollHandler();
+
+ // Если viewport еще не создан, ждем его появления
+ if (!cleanup) {
+ const domElement = getDOMElement(element);
+ if (!domElement || typeof domElement.observe !== "function") {
+ // Если не можем наблюдать за изменениями, просто периодически проверяем
+ const checkInterval = setInterval(() => {
+ if (!cleanup) {
+ cleanup = setupScrollHandler();
+ if (cleanup) {
+ clearInterval(checkInterval);
+ }
+ }
+ }, 100);
+
+ setTimeout(() => {
+ clearInterval(checkInterval);
+ }, 2000);
+
+ return () => {
+ clearInterval(checkInterval);
+ if (cleanup) cleanup();
+ };
+ }
+
+ const observer = new MutationObserver(() => {
+ cleanup = setupScrollHandler();
+ if (cleanup) {
+ observer.disconnect();
+ }
+ });
+
+ observer.observe(domElement, {
+ childList: true,
+ subtree: true,
+ });
+
+ // Также проверяем периодически на случай, если MutationObserver не сработал
+ const checkInterval = setInterval(() => {
+ if (!cleanup) {
+ cleanup = setupScrollHandler();
+ if (cleanup) {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ }
+ }
+ }, 100);
+
+ // Очищаем через 2 секунды, если viewport так и не появился
+ setTimeout(() => {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ }, 2000);
+
+ return () => {
+ clearInterval(checkInterval);
+ observer.disconnect();
+ if (cleanup) cleanup();
+ };
+ }
+
+ return cleanup;
+ }, []);
+
+ const options = useMemo(
+ () => ({
+ scrollbars: {
+ theme: "os-theme-custom",
+ visibility: scrollbarVisibility,
+ autoHide: "never",
+ autoHideDelay: 0,
+ dragScrolling: true,
+ clickScrolling: false,
+ touchSupport: true,
+ snapHandle: false,
+ },
+ overflow: {
+ x: overflowX,
+ y: overflowY,
+ },
+ }),
+ [overflowX, overflowY, scrollbarVisibility]
+ );
+
+ // Обработчик инициализации OverlayScrollbars
+ const handleInitialized = useCallback(
+ (instance) => {
+ if (!instance) {
+ console.warn("OverlayScrollbars: instance is null");
+ return;
+ }
+
+ // Получаем DOM элементы из экземпляра
+ // Метод может называться elements() или getElements()
+ let elements;
+ if (typeof instance.elements === "function") {
+ elements = instance.elements();
+ } else if (typeof instance.getElements === "function") {
+ elements = instance.getElements();
+ } else {
+ console.warn("OverlayScrollbars: cannot get elements from instance");
+ return;
+ }
+
+ const viewport = elements?.viewport;
+
+ if (!viewport) {
+ console.warn("OverlayScrollbars: viewport element not found");
+ return;
+ }
+
+ if (ref) {
+ // Обновляем внешний ref с viewport элементом
+ if (typeof ref === "function") {
+ ref(viewport);
+ } else if (ref) {
+ ref.current = viewport;
+ }
+ }
+ },
+ [ref]
+ );
+
+ const events = useMemo(
+ () => ({
+ initialized: () => {
+ // После инициализации получаем instance через ref
+ if (!internalRef.current) return;
+
+ const instance = internalRef.current.osInstance?.();
+ if (instance) {
+ handleInitialized(instance);
+ }
+ },
+ }),
+ [handleInitialized]
+ );
+
+ return (
+ {getStatusText()}
}
+
+
+ {value}
+
+ );
+};
diff --git a/src/client/src/components/SimulationSettings.tsx b/src/client/src/components/SimulationSettings.tsx
new file mode 100644
index 0000000..524c399
--- /dev/null
+++ b/src/client/src/components/SimulationSettings.tsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+
+export const SimulationSettings = observer(() => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+ {open && (
+
+ );
+});
+
+function Row({ children }: { children: React.ReactNode }) {
+ return (
+
+ {/* Пауза */}
+
+ Пауза
+
+
+ {/* Направление */}
+
+ Направление
+
+
+
+ {/* Скорость */}
+
+ Скорость
+
+
+ {/* Без анимации */}
+
+ Без анимации
+
+
+ )}
+
+
+
+ {apiStore.simulationSpeed}x
+
+
+
+
+ {children}
+
+ );
+}
+
+function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
+ return (
+
+ );
+}
+
+const btnStyle: React.CSSProperties = {
+ width: 28, height: 24, borderRadius: 4,
+ border: "1px solid rgba(255,255,255,0.2)",
+ background: "rgba(255,255,255,0.08)",
+ color: "white", cursor: "pointer", fontSize: 14,
+ display: "flex", alignItems: "center", justifyContent: "center",
+};
diff --git a/src/client/src/components/StoreDebugInfo.jsx b/src/client/src/components/StoreDebugInfo.jsx
new file mode 100644
index 0000000..9a67726
--- /dev/null
+++ b/src/client/src/components/StoreDebugInfo.jsx
@@ -0,0 +1,118 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+import { geolocationStore } from "../stores/GeolocationStore";
+import { apiBaseURL, geoBaseURL, weatherBaseURL } from "../api/apiConfig";
+
+const StoreDebugInfo = observer(({ isVisible }) => {
+ if (!isVisible) return null;
+
+ const serializeMap = (map) => {
+ if (!map || !(map instanceof Map)) return map;
+ const obj = {};
+ map.forEach((value, key) => {
+ obj[key] = value;
+ });
+ return obj;
+ };
+
+ const serializeSet = (set) => {
+ if (!set || !(set.forEach)) return set;
+ const arr = [];
+ set.forEach((value) => arr.push(value));
+ return arr;
+ };
+
+ const debugData = {
+ apiStore: {
+ isLoading: apiStore.isLoading,
+ loadingStatus: apiStore.loadingStatus,
+ loadingProgress: apiStore.loadingProgress,
+ context: apiStore.context,
+ weather: apiStore.weather,
+ route: apiStore.route,
+ carrier: apiStore.carrier,
+ city: apiStore.city,
+ routeId: apiStore.routeId,
+ routeSights: { count: apiStore.routeSights?.length ?? 0, items: apiStore.routeSights ?? [] },
+ routeSightsEn: { count: apiStore.routeSightsEn?.length ?? 0 },
+ routeSightsZh: { count: apiStore.routeSightsZh?.length ?? 0 },
+ routeStations: { count: apiStore.routeStations?.length ?? 0, items: apiStore.routeStations ?? [] },
+ routeStationsEn: { count: apiStore.routeStationsEn?.length ?? 0 },
+ routeStationsZh: { count: apiStore.routeStationsZh?.length ?? 0 },
+ orderedRouteStations: { count: apiStore.orderedRouteStations?.length ?? 0 },
+ sightArticlesIds: serializeMap(apiStore.sightArticlesIds),
+ sightArticles: serializeMap(apiStore.sightArticles),
+ media: { count: apiStore.media?.length ?? 0, items: apiStore.media ?? [] },
+ },
+ geolocationStore: {
+ contextData: geolocationStore.contextData,
+ nearestSightId: geolocationStore.nearestSightId,
+ selectedSightId: geolocationStore.selectedSightId,
+ selectedLanguage: geolocationStore.selectedLanguage,
+ selectedLanguageRight: geolocationStore.selectedLanguageRight,
+ nearestStationId: geolocationStore.nearestStationId,
+ currentStationId: geolocationStore.currentStationId,
+ isLeftWidgetOpen: geolocationStore.isLeftWidgetOpen,
+ isTransferWidgetOpen: geolocationStore.isTransferWidgetOpen,
+ isGovernorWidgetOpen: geolocationStore.isGovernorWidgetOpen,
+ isManualSelection: geolocationStore.isManualSelection,
+ isRightWidgetSelectorOpen: geolocationStore.isRightWidgetSelectorOpen,
+ activeClusterId: geolocationStore.activeClusterId,
+ isLoading: geolocationStore.isLoading,
+ error: geolocationStore.error,
+ },
+ };
+
+ return createPortal(
+
+
,
+ document.body
+ );
+});
+
+export default StoreDebugInfo;
diff --git a/src/client/src/components/ThreeViewErrorBoundary.css b/src/client/src/components/ThreeViewErrorBoundary.css
new file mode 100644
index 0000000..717317a
--- /dev/null
+++ b/src/client/src/components/ThreeViewErrorBoundary.css
@@ -0,0 +1,147 @@
+.three-view-error-boundary {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ background-color: rgba(0, 0, 0, 0.05);
+ min-height: 300px;
+}
+
+.error-container {
+ max-width: 500px;
+ width: 100%;
+ padding: 24px;
+ background: linear-gradient(
+ 114deg,
+ rgba(255, 255, 255, 0.1) 8.71%,
+ rgba(255, 255, 255, 0.05) 69.69%
+ ), #006F3A;
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ color: white;
+ position: relative;
+}
+
+.error-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.error-icon {
+ font-size: 32px;
+ margin-right: 12px;
+}
+
+.error-title {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: white;
+}
+
+.error-message {
+ margin-bottom: 16px;
+ font-size: 16px;
+ line-height: 1.5;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.error-reasons {
+ margin-bottom: 16px;
+}
+
+.error-reasons p {
+ margin: 0 0 8px 0;
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.error-reasons ul {
+ margin: 8px 0;
+ padding-left: 20px;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.error-reasons li {
+ margin-bottom: 4px;
+ font-size: 14px;
+}
+
+.error-details {
+ margin-bottom: 16px;
+ background-color: rgba(0, 0, 0, 0.2);
+ padding: 12px;
+ border-radius: 6px;
+ border-left: 3px solid rgba(255, 255, 255, 0.3);
+}
+
+.error-details pre {
+ margin: 0;
+ font-family: 'Courier New', monospace;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ word-break: break-word;
+ white-space: pre-wrap;
+ max-height: 100px;
+ overflow-y: auto;
+}
+
+.error-actions {
+ display: flex;
+ gap: 12px;
+}
+
+.retry-button {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 12px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.retry-button:hover {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-1px);
+}
+
+.retry-button:active {
+ transform: translateY(0);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+ .three-view-error-boundary {
+ padding: 16px;
+ }
+
+ .error-container {
+ padding: 20px;
+ max-width: 100%;
+ }
+
+ .error-title {
+ font-size: 18px;
+ }
+
+ .error-message {
+ font-size: 14px;
+ }
+
+ .retry-button {
+ padding: 10px 20px;
+ font-size: 13px;
+ }
+}
diff --git a/src/client/src/components/ThreeViewErrorBoundary.tsx b/src/client/src/components/ThreeViewErrorBoundary.tsx
new file mode 100644
index 0000000..075bd69
--- /dev/null
+++ b/src/client/src/components/ThreeViewErrorBoundary.tsx
@@ -0,0 +1,177 @@
+import React, { Component, ReactNode } from "react";
+import "./ThreeViewErrorBoundary.css";
+
+interface Props {
+ children: ReactNode;
+ onReset?: () => void;
+ resetKey?: number | string;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+ lastResetKey?: number | string;
+}
+
+export class ThreeViewErrorBoundary extends Component
+
+
+ Store Debug (F4 — закрыть)
+
+
+
+ {JSON.stringify(debugData, null, 2)}
+ API: {apiBaseURL}
+ GEO: {geoBaseURL}
+ WEATHER: {weatherBaseURL}
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/client/src/components/TouchableLayout/index.tsx b/src/client/src/components/TouchableLayout/index.tsx
new file mode 100644
index 0000000..0d936d7
--- /dev/null
+++ b/src/client/src/components/TouchableLayout/index.tsx
@@ -0,0 +1,269 @@
+import React, {
+ useEffect,
+ useRef,
+ useState,
+ useCallback,
+ ReactNode,
+ forwardRef,
+} from "react";
+import "../../styles/TouchableLayout.css";
+
+interface TouchableLayoutProps {
+ children?: ReactNode;
+ className?: string;
+ maxHeight?: string | number;
+}
+
+function useThumbSync(scrollableRef: React.RefObject
+
+
+
+
+ ⚠️
+ Ошибка загрузки 3D модели
+
+
+
+
+
+ );
+ },
+);
+
+TouchableLayout.displayName = "TouchableLayout";
diff --git a/src/client/src/components/WeatherWidget.jsx b/src/client/src/components/WeatherWidget.jsx
new file mode 100644
index 0000000..d1a125e
--- /dev/null
+++ b/src/client/src/components/WeatherWidget.jsx
@@ -0,0 +1,192 @@
+import "../styles/WeatherWidget.css";
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import weatherApi from "../api/weather/weather.api";
+
+import getWeatherIcon from "../utils/getWeatherIcon";
+import windIcon from "../assets/weather-icons/wind.png";
+import humidityIcon from "../assets/weather-icons/humidity.png";
+import { useGeolocationStore } from "../stores";
+import { translateWeatherStatus } from "../utils/translateWeatherStatus";
+
+function WeatherDataLine({ icon, value, unit }) {
+ return (
+
+
+
+ {children}
+
+ {thumb.hasScroll && (
+
+
+
+ )}
+
+ 
+
+ );
+}
+
+const WeatherWidget = observer(() => {
+ const [currentTime, setCurrentTime] = useState(new Date());
+ const [weather, setWeather] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+ const lastDateRef = useRef(() => {
+ const today = new Date();
+ return `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+ });
+
+ const store = useGeolocationStore();
+ const { selectedLanguage, setError: setErrorStore } = store;
+
+ const fetchWeather = async () => {
+ try {
+ const data = await weatherApi.getFormattedWeather();
+ setWeather(data);
+ setError(null);
+ setHasLoadedOnce(true);
+ } catch (err) {
+ setError(err.message);
+ setErrorStore(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchWeather();
+ }, []);
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ const now = new Date();
+ setCurrentTime(now);
+
+ const newDate = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
+ if (newDate !== lastDateRef.current) {
+ lastDateRef.current = newDate;
+
+ fetchWeather();
+ }
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ useEffect(() => {
+ const intervalId = setInterval(
+ () => {
+ fetchWeather();
+ },
+ 5 * 60 * 1000,
+ );
+
+ return () => clearInterval(intervalId);
+ }, [setErrorStore]);
+
+ const formattedTime = currentTime.toLocaleTimeString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-GB",
+ { hour: "2-digit", minute: "2-digit" },
+ );
+ const day = currentTime.getDate().toString().padStart(2, "0");
+ const month = (currentTime.getMonth() + 1).toString().padStart(2, "0");
+ const weekday = currentTime.toLocaleDateString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-GB",
+ { weekday: "long" },
+ );
+ const formattedDate = `${day}.${month}, ${weekday}`;
+
+ const formatDayOfWeek = (daysToAdd) => {
+ const date = new Date();
+ date.setDate(date.getDate() + daysToAdd);
+ const dayName = date.toLocaleDateString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-US",
+ { weekday: "short" },
+ );
+ return dayName.charAt(0).toUpperCase() + dayName.slice(1);
+ };
+
+ if (!hasLoadedOnce) {
+ return null;
+ }
+
+ if (!weather) {
+ return null;
+ }
+
+ return (
+
+ {unit ? (
+ <>
+ {value}
+ {unit}
+
+ ) : (
+ value
+ )}
+
+
+
+ );
+});
+
+export default WeatherWidget;
diff --git a/src/client/src/components/map/Constants.tsx b/src/client/src/components/map/Constants.tsx
new file mode 100644
index 0000000..d69c2ef
--- /dev/null
+++ b/src/client/src/components/map/Constants.tsx
@@ -0,0 +1,12 @@
+export const UP_SCALE = 10000;
+export const PATH_WIDTH = 5;
+export const STATION_RADIUS = 8;
+export const STATION_OUTLINE_WIDTH = 4;
+export const BACKGROUND_COLOR = 0x111111;
+export const PATH_COLOR = 0xed1c24;
+export const BUS_COLOR = 0xfcd500;
+export const UNPASSED_STATION_COLOR = 0xcccccc;
+export const BASE_ICON_SIZE = 30;
+export const CLUSTER_RADIUS_BASE = 10;
+export const CLUSTER_COLOR = 0x896f58;
+export const ACTIVE_STATION_COLOR = 0xffa500;
diff --git a/src/client/src/components/map/InfiniteCanvas.tsx b/src/client/src/components/map/InfiniteCanvas.tsx
new file mode 100644
index 0000000..314a2ec
--- /dev/null
+++ b/src/client/src/components/map/InfiniteCanvas.tsx
@@ -0,0 +1,356 @@
+import { FederatedPointerEvent, FederatedWheelEvent } from "pixi.js";
+import { ReactNode, useEffect, useState, useRef, useCallback } from "react";
+import { useTransform } from "./transformContext";
+import { BACKGROUND_COLOR, SCALE_FACTOR } from "../../assets/Constants";
+import { useApplication } from "@pixi/react";
+import { useGeolocation } from "../../context/GeolocationContext";
+import ContentAPI from "../../api/content/content.api";
+import React from "react";
+import { useGeolocationStore } from "../../stores/hooks/useGeolocationStore";
+import { useCameraAnimationStore } from "../../stores";
+import { observer } from "mobx-react-lite";
+import debounce from "lodash/debounce";
+import { apiStore } from "../../api/ApiStore/store";
+
+export const InfiniteCanvas = observer(
+ ({ children }: Readonly<{ children?: ReactNode }>) => {
+ const { route } = apiStore;
+ const {
+ position,
+ setPosition,
+ scale,
+ setScale,
+ setScreenCenter,
+ isAutoMode,
+ setIsAutoMode,
+ userActivityTimestamp,
+ updateUserActivity,
+ autoModeStartTimestamp,
+ setAutoModeStartTimestamp,
+ } = useTransform();
+ const [loaded, setLoaded] = useState(false);
+
+ const applicationRef = useApplication();
+
+ const [isDragging, setIsDragging] = useState(false);
+ const [startMousePosition, setStartMousePosition] = useState({
+ x: 0,
+ y: 0,
+ });
+ const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+
+ const activePointers = useRef(new Map{formattedTime}
+ {formattedDate}
+
+
+
+
+ })
+
+
+ {weather.today.temperature}°
+
+
+ {translateWeatherStatus(weather.today.status, selectedLanguage)}
+
+
+ {weather.tomorrow.temperature !== "N/A" && (
+
+
+
+ );
+};
diff --git a/src/client/src/components/map/TravelPath.tsx b/src/client/src/components/map/TravelPath.tsx
new file mode 100644
index 0000000..4637b14
--- /dev/null
+++ b/src/client/src/components/map/TravelPath.tsx
@@ -0,0 +1,92 @@
+import { Graphics } from "pixi.js";
+import { useCallback } from "react";
+import { PATH_COLOR, PATH_WIDTH, UNPASSED_STATION_COLOR } from "./Constants";
+
+interface TravelPathProps {
+ points: { x: number; y: number }[];
+ busCoordinates?: { x: number; y: number };
+}
+
+const PASSED_PATH_COLOR = PATH_COLOR;
+const UNPASSED_PATH_COLOR = UNPASSED_STATION_COLOR;
+
+export function TravelPath({
+ points,
+ busCoordinates,
+}: Readonly
+ 
+
+
+ 53.7 ? -bgWidth / 1.42 : -bgWidth / 0.98,
+ top: 0,
+ transform: `translate(-50%, -50%) rotate(${innerRotation}deg)`,
+ width: minTramWidth,
+ height: minTramHeight,
+ }}
+ >
+ 
+
+
+
+
+ );
+});
+
+export default WebGLMap;
diff --git a/src/client/src/components/map/custom.d.ts b/src/client/src/components/map/custom.d.ts
new file mode 100644
index 0000000..6dabad2
--- /dev/null
+++ b/src/client/src/components/map/custom.d.ts
@@ -0,0 +1,26 @@
+declare module "*.svg" {
+ import React = require("react");
+ export const ReactComponent: React.FC
+ {stationLabels.map((l, idx) => {
+ let station = stationData?.[idx];
+
+ const backendAlign = station?.align ?? 3;
+ const anchor = getAnchorFromOffset(backendAlign);
+ const transformCss = `translate(${-anchor.x * 100}%, ${
+ -anchor.y * 100
+ }%)`;
+
+ const fontSizePercent = routeData?.font_size ?? 100;
+ const fontScale = fontSizePercent / 100;
+
+ const clampedScale = Math.min(Math.max(scale, 1), 3);
+ const scaleFactor = 1 + (clampedScale - 1) * 0.4;
+
+ const primaryFontSize = 16 * fontScale * scaleFactor;
+ const secondaryFontSize = 13 * fontScale * scaleFactor;
+ const secondaryMarginTop = 5 * fontScale * scaleFactor;
+ const secondaryLineHeight = 1.2 * scaleFactor;
+
+ const alignment =
+ backendAlign === 1
+ ? "left"
+ : backendAlign === 3
+ ? "right"
+ : "center";
+
+ const secondaryPositionStyle =
+ alignment === "left"
+ ? { left: 0, transform: "none" }
+ : alignment === "right"
+ ? { right: 0, transform: "none" }
+ : { left: "50%", transform: "translateX(-50%)" };
+
+ const apiBaseUrl = apiBaseURL;
+ const isMediaIdEmptyResult = isMediaIdEmpty(station?.icon);
+ const iconSrc = isMediaIdEmptyResult
+ ? null
+ : `${apiBaseUrl}/media/${station?.icon}/download`;
+ const iconSizePx = Math.round(primaryFontSize * 1.2);
+
+ return (
+
+ {!isExpanded ? (
+
+ );
+ }
+ })}
+
+ {(() => {
+ if (!routeData) return null;
+ const centerLat = routeData.center_latitude;
+ const centerLon = routeData.center_longitude;
+ if (centerLat === undefined || centerLon === undefined) return null;
+
+ if (!apiStore?.context?.currentCoordinates) return null;
+
+ const rx = animatedYellowDotPosition.x;
+ const ry = animatedYellowDotPosition.y;
+ if (rx === 0 && ry === 0) return null;
+
+ const dpr2 = Math.max(
+ 1,
+ (typeof window !== "undefined" && window.devicePixelRatio) || 1,
+ );
+ const cosR = Math.cos(rotationAngle);
+ const sinR = Math.sin(rotationAngle);
+ const pathPts: { x: number; y: number }[] = [];
+ for (let i = 0; i < routePath.length; i += 2)
+ pathPts.push({ x: routePath[i], y: routePath[i + 1] });
+ const stationsForAngle = (stationData || []).map((st: any) => {
+ const loc = coordinatesToLocal(
+ st.latitude - centerLat,
+ st.longitude - centerLon,
+ );
+ const x = loc.x * UP_SCALE,
+ y = loc.y * UP_SCALE;
+ const rx2 = x * cosR - y * sinR,
+ ry2 = x * sinR + y * cosR;
+ return {
+ longitude: rx2,
+ latitude: ry2,
+ offset_x: st.offset_x,
+ offset_y: st.offset_y,
+ align: st.align,
+ };
+ });
+ let tramSegIndex = getCurrentSegIndex();
+ if (tramSegIndex < 0 && routePath.length >= 4) {
+ let best = -1,
+ bestD = Infinity;
+ for (let i = 0; i < routePath.length - 2; i += 2) {
+ const p1x = routePath[i],
+ p1y = routePath[i + 1];
+ const p2x = routePath[i + 2],
+ p2y = routePath[i + 3];
+ const dx = p2x - p1x,
+ dy = p2y - p1y;
+ const len2 = dx * dx + dy * dy;
+ if (!len2) continue;
+ const t = ((rx - p1x) * dx + (ry - p1y) * dy) / len2;
+ const cl = Math.max(0, Math.min(1, t));
+ const px = p1x + cl * dx,
+ py = p1y + cl * dy;
+ const d = Math.hypot(rx - px, ry - py);
+ if (d < bestD) {
+ bestD = d;
+ best = i / 2;
+ }
+ }
+ tramSegIndex = best;
+ }
+ const optimalAngle = (() => {
+ const testRadiusInMap = 100 / scale;
+ const minPath = 60,
+ minPassed = 60,
+ minStation = 100;
+ let bestAng = 0,
+ bestScore = Infinity;
+ for (let i = 0; i < 12; i++) {
+ const ang = (i * Math.PI * 2) / 12;
+ const tx = rx + Math.cos(ang) * testRadiusInMap;
+ const ty = ry + Math.sin(ang) * testRadiusInMap;
+ const distPath = (function () {
+ if (pathPts.length < 2) return Infinity;
+ let md = Infinity;
+ for (let k = 0; k < pathPts.length - 1; k++) {
+ const p1 = pathPts[k],
+ p2 = pathPts[k + 1];
+ const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+ if (!L2) continue;
+ const tt =
+ ((tx - p1.x) * (p2.x - p1.x) +
+ (ty - p1.y) * (p2.y - p1.y)) /
+ L2;
+ const cl = Math.max(0, Math.min(1, tt));
+ const px = p1.x + cl * (p2.x - p1.x),
+ py = p1.y + cl * (p2.y - p1.y);
+ const d = Math.hypot(tx - px, ty - py);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ const distPassed = (function () {
+ if (pathPts.length < 2 || tramSegIndex < 0) return Infinity;
+ let md = Infinity;
+ for (
+ let k = 0;
+ k <= Math.min(tramSegIndex, pathPts.length - 2);
+ k++
+ ) {
+ const p1 = pathPts[k],
+ p2 = pathPts[k + 1];
+ const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+ if (!L2) continue;
+ const tt =
+ ((tx - p1.x) * (p2.x - p1.x) +
+ (ty - p1.y) * (p2.y - p1.y)) /
+ L2;
+ const cl = Math.max(0, Math.min(1, tt));
+ const px = p1.x + cl * (p2.x - p1.x),
+ py = p1.y + cl * (p2.y - p1.y);
+ const d = Math.hypot(tx - px, ty - py);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ const distStation = (function () {
+ if (!stationsForAngle.length) return Infinity;
+ let md = Infinity;
+
+ const LABEL_WIDTH_PX = 120;
+
+ const labelWidthMap = LABEL_WIDTH_PX / scale;
+
+ for (const st of stationsForAngle) {
+ const align = st.align ?? 3;
+
+ let lx = st.longitude;
+ let ly = st.latitude;
+
+ if (align === 1 || align === 0) {
+ lx += labelWidthMap / 2;
+ } else if (align === 3) {
+ lx -= labelWidthMap / 2;
+ }
+
+ const d = Math.hypot(tx - lx, ty - ly);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ let weight = 0;
+ if (distPath < minPath) weight += 100 * (1 - distPath / minPath);
+ if (distPassed < minPassed)
+ weight += 10 * (1 - distPassed / minPassed);
+ if (distStation < minStation)
+ weight += 1000 * (1 - distStation / minStation);
+ if (weight < bestScore) {
+ bestScore = weight;
+ bestAng = ang;
+ }
+ }
+ return bestAng;
+ })();
+
+ const offsetBack = 5 / scale;
+ const adjustedRx = rx - Math.cos(optimalAngle) * offsetBack;
+ const adjustedRy = ry - Math.sin(optimalAngle) * offsetBack;
+ const screenX = (adjustedRx * scale + position.x) / dpr2;
+ const screenY = (adjustedRy * scale + position.y) / dpr2;
+
+ const screenXDot = (rx * scale + position.x) / dpr2;
+ const screenYDot = (ry * scale + position.y) / dpr2;
+
+ let activeStationIndex = -1;
+ const tramCoords = apiStore?.context?.currentCoordinates;
+
+ if (
+ tramCoords &&
+ stationData &&
+ stationData.length > 0 &&
+ Number.isFinite(tramCoords.latitude) &&
+ Number.isFinite(tramCoords.longitude)
+ ) {
+ let bestD = Infinity;
+ const DISTANCE_THRESHOLD = 0.00015;
+
+ for (let i = 0; i < stationData.length; i++) {
+ const station = stationData[i];
+ if (
+ Number.isFinite(station.latitude) &&
+ Number.isFinite(station.longitude)
+ ) {
+ const d = getDistance(
+ {
+ latitude: tramCoords.latitude,
+ longitude: tramCoords.longitude,
+ },
+ {
+ latitude: station.latitude,
+ longitude: station.longitude,
+ },
+ );
+ if (d < bestD) {
+ bestD = d;
+ activeStationIndex = i;
+ }
+ }
+ }
+
+ if (bestD > DISTANCE_THRESHOLD) {
+ activeStationIndex = -1;
+ }
+ }
+
+ const isAtStation = activeStationIndex !== -1;
+
+ const dotColor = isAtStation ? "#fcd500" : "white";
+
+ return (
+ <>
+
+
+
+
+ );
+ })}
+ {clusteredSights.map((item) => {
+ const dpr = Math.max(
+ 1,
+ (typeof window !== "undefined" && window.devicePixelRatio) || 1,
+ );
+
+ if (item.type === "point") {
+ const s = item.data;
+ const rx = s.longitude;
+ const ry = s.latitude;
+ const isSelected = selectedSightId === String(s.id);
+ const hasIcon = !isMediaIdEmpty(s.icon ?? null);
+ const isCustomIcon = s.is_default_icon === false && hasIcon;
+ const hasSelectedAltIcon =
+ isSelected && isCustomIcon && !isMediaIdEmpty(s.alt_icon ?? null);
+ const defaultCustomIcon = isCustomIcon;
+ const shouldUseCustomSightIcon =
+ hasSelectedAltIcon || defaultCustomIcon;
+ const customSightIconScaleFactor = shouldUseCustomSightIcon
+ ? scale / Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6)
+ : 1;
+ const sightIconSizePercent = resolveSightIconSizePercent(s);
+ const sightIconUrl = hasSelectedAltIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(s.alt_icon),
+ mediaToken,
+ )
+ : defaultCustomIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(s.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+ const iconSize =
+ SIGHT_ICON_BASE_SIZE *
+ clamp(sightIconSizePercent / 100, 0.1, 10) *
+ customSightIconScaleFactor;
+
+ const screenX = (rx * scale + position.x) / dpr;
+ const screenY = (ry * scale + position.y) / dpr;
+ const iconLeft = screenX - iconSize;
+ const iconTop = screenY - iconSize;
+
+ const handleSightClick = () => {
+ setIsGovernorWidgetOpen(false);
+ setSelectedSightId(String(s.id));
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ store.closeGovernorModal();
+ };
+
+ const handleSightTouch = (e: React.TouchEvent) => {
+ e.stopPropagation();
+ handleSightClick();
+ };
+
+ return (
+
+ {iconSrc ? (
+ 
+ ) : null}
+
+
+ {l.name}
+
+ {l.sub ? (
+
+ {l.sub}
+
+ ) : null}
+
+
+ );
+ } else {
+ const cluster = item.data;
+ const rx = cluster.longitude;
+ const ry = cluster.latitude;
+
+ const iconSizePercent = resolveSightIconSizePercent();
+ const iconSize =
+ SIGHT_ICON_BASE_SIZE * clamp(iconSizePercent / 100, 0.1, 10);
+
+ const screenX = (rx * scale + position.x) / dpr;
+ const screenY = (ry * scale + position.y) / dpr;
+ const iconLeft = screenX - iconSize / 2;
+ const iconTop = screenY - iconSize / 2;
+
+ const isExpanded = activeClusterId === cluster.id;
+ const selectedSightInCluster = cluster.sights.find(
+ (sight) => selectedSightId === String(sight.id),
+ );
+ const selectedHasIconInCluster =
+ selectedSightInCluster != null &&
+ !isMediaIdEmpty(selectedSightInCluster.icon ?? null);
+ const selectedIsCustomInCluster =
+ selectedSightInCluster?.is_default_icon === false &&
+ selectedHasIconInCluster;
+ const hasSelectedAltIconInCluster =
+ selectedSightInCluster != null &&
+ selectedIsCustomInCluster &&
+ !isMediaIdEmpty(selectedSightInCluster.alt_icon ?? null);
+ const clusterIconUrl = hasSelectedAltIconInCluster
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(selectedSightInCluster?.alt_icon),
+ mediaToken,
+ )
+ : selectedIsCustomInCluster
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(selectedSightInCluster?.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+
+ const handleClusterClick = (
+ e: React.MouseEvent | React.TouchEvent,
+ ) => {
+ e.stopPropagation();
+ if (isExpanded) {
+ setActiveClusterId(null);
+ } else {
+ setActiveClusterId(cluster.id);
+ }
+ };
+
+ const handleCircleInteraction = () => {
+ if (isExpanded && clusterAutoCloseTimerRef.current) {
+ clearTimeout(clusterAutoCloseTimerRef.current);
+ clusterAutoCloseTimerRef.current = setTimeout(() => {
+ setActiveClusterId(null);
+ }, 20000);
+ }
+ };
+
+ const handleSightInClusterClick = (
+ sightId: string,
+ e: React.MouseEvent | React.TouchEvent,
+ ) => {
+ e.stopPropagation();
+ setIsGovernorWidgetOpen(false);
+ setSelectedSightId(sightId);
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ store.closeGovernorModal();
+ setActiveClusterId(null);
+ };
+
+ const hasSelectedSight = selectedSightId
+ ? cluster.sights.some(
+ (sight) => String(sight.id) === selectedSightId,
+ )
+ : false;
+
+ const badgeColor = "#006F3A";
+ const listPanelWidth = 200;
+ const listItemHeight = 30;
+ const listMaxHeight = 250;
+ const hasMoreThanTwo = cluster.sights.length > 2;
+ const shouldShowScrollbar = hasMoreThanTwo;
+
+ return (
+
+ 
+
+
+
+ ) : (
+
+ 
+
+
+ {cluster.count}
+
+
+
+ )}
+
+
+
+
+
+ {cluster.count}
+
+ e.stopPropagation()}
+ >
+
+ {cluster.sights.map((sight, index) => {
+ const isSelected =
+ selectedSightId === String(sight.id);
+ const getSightName = () => {
+ const originalSight =
+ selectedLanguage === "ru"
+ ? routeSights?.find((s) => s.id === sight.id)
+ : selectedLanguage === "en"
+ ? routeSightsEn?.find(
+ (s) => s.id === sight.id,
+ )
+ : routeSightsZh?.find(
+ (s) => s.id === sight.id,
+ );
+
+ if (originalSight?.short_name) {
+ return originalSight.short_name;
+ }
+
+ if (!originalSight?.left_article) {
+ return (
+ sight.name ||
+ `Достопримечательность ${index + 1}`
+ );
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(
+ originalSight.left_article + "_ru",
+ )
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(
+ originalSight.left_article + "_en",
+ )
+ : sightArticlesZh.get(
+ originalSight.left_article + "_zh",
+ );
+
+ return (
+ leftArticleData?.heading ||
+ sight.name ||
+ `Достопримечательность ${index + 1}`
+ );
+ };
+
+ const sightName = getSightName();
+
+ return (
+
+
+
+ handleSightInClusterClick(String(sight.id), e)
+ }
+ onTouchEnd={(e) =>
+ handleSightInClusterClick(String(sight.id), e)
+ }
+ style={{
+ display: "flex",
+ alignItems: "center",
+ height: `${listItemHeight}px`,
+ cursor: "pointer",
+ userSelect: "none",
+ touchAction: "none",
+ padding: "0 4px",
+ zIndex: 1000000000000,
+ borderBottom:
+ "1px solid rgba(255, 255, 255, 0.1)",
+ transition: "background-color 0.2s",
+ }}
+ >
+ {(() => {
+ const hasRowIcon = !isMediaIdEmpty(
+ sight.icon ?? null,
+ );
+ const isRowCustomIcon =
+ sight.is_default_icon === false && hasRowIcon;
+ const hasRowAltIcon =
+ isSelected &&
+ isRowCustomIcon &&
+ !isMediaIdEmpty(sight.alt_icon ?? null);
+ const rowIconUrl = hasRowAltIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(sight.alt_icon),
+ mediaToken,
+ )
+ : isRowCustomIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(sight.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+ return (
+ 
+ );
+ })()}
+
+ {sightName}
+
+
+ );
+ })}
+
+ {isLoading ? (
+ 
+ ) : (
+ <>
+ )}
+
+ );
+ }
+);
+
+export default LeftWidget;
diff --git a/src/client/src/components/side-menu/SideMenu.jsx b/src/client/src/components/side-menu/SideMenu.jsx
new file mode 100644
index 0000000..0d38baf
--- /dev/null
+++ b/src/client/src/components/side-menu/SideMenu.jsx
@@ -0,0 +1,794 @@
+import "../../styles/SideMenu.css";
+import AppealWidget from "../widgets/AppealWidget";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import gouvermentImage from "../../assets/images/test-image.png";
+import sideMenuPhoto from "/side-menu-photo.png";
+import RouteWidget from "../widgets/RouteWidget";
+import ContentAPI from "../../api/content/content.api";
+import { useGeolocationStore, useColorStore } from "../../stores";
+import "../../styles/LeftWidget.css";
+import SightsList from "./SightsList";
+import StationsList from "./StationsList";
+import LeftWidget from "./LeftWidget";
+import { apiStore } from "../../api/ApiStore/store";
+import { getMediaUrl } from "../../api/apiConfig";
+
+const SideMenu = observer(({ onMenuToggle }) => {
+ const {
+ carrier,
+ city,
+ route,
+ getArticle,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ } = apiStore;
+ const [isMenuOpen, openMenu] = useState(false);
+ const [isSightsOpen, openSights] = useState(false);
+ const [isStationOpen, openStation] = useState(false);
+ const [isWidgetOpen, openWidget] = useState(false);
+ const [isWeatherVisible, setIsWeatherVisible] = useState(true);
+ const [isLeftWidgetVisible, setIsLeftWidgetVisible] = useState(false);
+ const [localSelectedSightId, setLocalSelectedSightId] = useState(null);
+ const [isSightsAnimating, setIsSightsAnimating] = useState(false);
+ const [isStationAnimating, setIsStationAnimating] = useState(false);
+ const [shouldRenderSights, setShouldRenderSights] = useState(false);
+ const [shouldRenderStation, setShouldRenderStation] = useState(false);
+ const [sightTop, setSightTop] = useState(null);
+ const isSortingChangingRef = useRef(false);
+
+ const store = useGeolocationStore();
+ const { setIsGovernorWidgetOpen, sortingBy, setSortingBy } = store;
+ const colorStore = useColorStore();
+ const { currentColor, startColorAnimation } = colorStore;
+ const {
+ contextData,
+ isGovernorWidgetOpen,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ setSelectedLanguage,
+ setIsLeftWidgetOpen,
+ nearestSightId,
+ selectedSightId,
+ isManualSelection,
+ setSelectedSightId,
+ setIsManualSelection,
+ setIsRightWidgetSelectorOpen,
+ isLeftWidgetOpen,
+ } = store;
+
+ const sideMenuRef = useRef(null);
+ const sightsListRef = useRef(null);
+ const stationsListRef = useRef(null);
+ const activeTouches = useRef(new Map());
+
+ // Запуск анимации цвета при монтировании компонента
+ useEffect(() => {
+ startColorAnimation();
+ }, [startColorAnimation]);
+
+ useEffect(() => {
+ const menuContainer = sideMenuRef.current;
+ if (!menuContainer) return;
+
+ const SCROLL_THRESHOLD = 10;
+
+ const handleTouchStart = (e) => {
+ const sightsContainer = sightsListRef.current;
+ const stationsContainer = stationsListRef.current;
+
+ for (const touch of e.changedTouches) {
+ let scrollTarget = null;
+ const targetElement = document.elementFromPoint(
+ touch.clientX,
+ touch.clientY
+ );
+
+ // Определяем, над каким из скролл-контейнеров находится палец
+ if (sightsContainer && sightsContainer.contains(targetElement)) {
+ scrollTarget = sightsContainer;
+ } else if (
+ stationsContainer &&
+ stationsContainer.contains(targetElement)
+ ) {
+ scrollTarget = stationsContainer;
+ }
+
+ if (scrollTarget) {
+ activeTouches.current.set(touch.identifier, {
+ target: scrollTarget,
+ startY: touch.clientY,
+ lastY: touch.clientY,
+ isScrolling: false, // Флаг, что скролл еще не начался
+ });
+ }
+ }
+ };
+
+ const handleTouchMove = (e) => {
+ for (const touch of e.changedTouches) {
+ const activeTouch = activeTouches.current.get(touch.identifier);
+ if (activeTouch) {
+ const deltaY = touch.clientY - activeTouch.startY;
+
+ if (!activeTouch.isScrolling && Math.abs(deltaY) > SCROLL_THRESHOLD) {
+ activeTouch.isScrolling = true;
+ }
+
+ if (activeTouch.isScrolling) {
+ e.preventDefault(); // Предотвращаем стандартное поведение только при скролле
+ const moveDelta = touch.clientY - activeTouch.lastY;
+ activeTouch.target.scrollTop -= moveDelta;
+ activeTouch.lastY = touch.clientY;
+ }
+ }
+ }
+ };
+
+ const handleTouchEnd = (e) => {
+ for (const touch of e.changedTouches) {
+ activeTouches.current.delete(touch.identifier);
+ }
+ };
+
+ menuContainer.addEventListener("touchstart", handleTouchStart, {
+ passive: true,
+ });
+ menuContainer.addEventListener("touchmove", handleTouchMove, {
+ passive: false,
+ });
+ menuContainer.addEventListener("touchend", handleTouchEnd, {
+ passive: true,
+ });
+ menuContainer.addEventListener("touchcancel", handleTouchEnd, {
+ passive: true,
+ });
+
+ return () => {
+ menuContainer.removeEventListener("touchstart", handleTouchStart);
+ menuContainer.removeEventListener("touchmove", handleTouchMove);
+ menuContainer.removeEventListener("touchend", handleTouchEnd);
+ menuContainer.removeEventListener("touchcancel", handleTouchEnd);
+ };
+ }, [isSightsOpen, isStationOpen]); // Перезапускаем эффект, когда списки появляются/исчезают
+ // --- КОНЕЦ: Улучшенная логика ---
+
+ useEffect(() => {
+ if (isGovernorWidgetOpen) {
+ openWidget(true);
+ } else {
+ openWidget(false);
+ }
+ }, [isGovernorWidgetOpen]);
+
+ useEffect(() => {
+ setIsLeftWidgetVisible(isMenuOpen && isLeftWidgetOpen);
+ }, [isMenuOpen, isLeftWidgetOpen]);
+
+ useEffect(() => {}, [
+ localSelectedSightId,
+ sightTop,
+ isLeftWidgetVisible,
+ isLeftWidgetOpen,
+ isMenuOpen,
+ ]);
+
+ useEffect(() => {
+ if (isLeftWidgetVisible) {
+ setIsWeatherVisible(false);
+ } else {
+ setIsWeatherVisible(true);
+ }
+ }, [isLeftWidgetVisible]);
+
+ const [designData, setDesignData] = useState(null);
+ const [routeData, setRouteData] = useState(null);
+ const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+
+ useEffect(() => {
+ async function fetchCarrierAndCrest() {
+ try {
+ const carrierPath = carrier.logo ? getMediaUrl(carrier.logo) : null;
+ const cityPath = city.arms ? getMediaUrl(city.arms) : null;
+
+ const response = {
+ carrierPath: carrierPath,
+ creastPath: cityPath,
+ };
+ setDesignData(response);
+ } catch (err) {
+ console.error("Ошибка в получении данных герба и перевозчика:", err);
+ }
+ }
+ fetchCarrierAndCrest();
+ }, [contextData?.routeId, isGeolocationLoading, selectedLanguage]);
+
+ useEffect(() => {
+ if (isGeolocationLoading || !contextData?.routeId) {
+ return;
+ }
+ async function fetchRoutePathData() {
+ try {
+ setRouteData(route);
+ } catch (err) {
+ console.error("Ошибка в получении данных маршрута:", err);
+ }
+ }
+ fetchRoutePathData();
+ }, [contextData?.routeId, isGeolocationLoading, selectedLanguage]);
+
+ useEffect(() => {
+ const fetchArticles = async () => {
+ if (route && route?.governor_appeal > 0) {
+ await getArticle(route?.governor_appeal, "ru");
+ await getArticle(route?.governor_appeal, "en");
+ await getArticle(route?.governor_appeal, "zh");
+ }
+ };
+ fetchArticles();
+ }, [route, route?.governor_appeal]);
+
+ const handleLanguageChange = (langCode) => {
+ setSelectedLanguage(langCode);
+ setIsLangMenuOpen(false);
+ };
+
+ const handleMenuToggle = (newMenuState) => {
+ openWidget(false);
+ store.closeGovernorModal();
+ if (onMenuToggle) onMenuToggle(newMenuState);
+ if (newMenuState) {
+ openMenu(newMenuState);
+ } else {
+ setIsLeftWidgetVisible(false);
+ // Закрываем списки мгновенно
+ if (isSightsOpen) {
+ openSights(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }
+ if (isStationOpen) {
+ openStation(false);
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ }
+ openMenu(newMenuState);
+ setIsLeftWidgetOpen(false);
+ }
+ };
+
+ useEffect(() => {
+ // Автоматическое закрытие сайд-меню после 45 секунд бездействия
+ let idleSeconds = 0;
+
+ const checkIdle = () => {
+ idleSeconds += 1;
+
+ if (idleSeconds >= 45 && isMenuOpen) {
+ handleMenuToggle(false);
+ }
+ };
+
+ const intervalId = setInterval(checkIdle, 1000);
+
+ const resetIdle = () => {
+ idleSeconds = 0;
+ };
+
+ const events = [
+ "mousedown",
+ "mousemove",
+ "keypress",
+ "scroll",
+ "touchstart",
+ "click",
+ ];
+
+ events.forEach((event) => {
+ window.addEventListener(event, resetIdle, { passive: true });
+ });
+
+ return () => {
+ clearInterval(intervalId);
+ events.forEach((event) => {
+ window.removeEventListener(event, resetIdle);
+ });
+ };
+ }, [isMenuOpen, handleMenuToggle]);
+
+ // Закрываем и открываем список достопримечательностей при изменении сортировки
+ const prevSortingByRef = useRef(sortingBy);
+ const isFirstRenderRef = useRef(true);
+ useEffect(() => {
+ // Пропускаем первый рендер
+ if (isFirstRenderRef.current) {
+ isFirstRenderRef.current = false;
+ prevSortingByRef.current = sortingBy;
+ return;
+ }
+
+ // Если список достопримечательностей открыт и сортировка изменилась, закрываем и открываем заново
+ if (isSightsOpen && prevSortingByRef.current !== sortingBy) {
+ // Блокируем обновление позиции виджета во время процесса
+ isSortingChangingRef.current = true;
+
+ setIsSightsAnimating(true);
+ openSights(false);
+
+ setTimeout(() => {
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+
+ // Открываем список заново
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ // Разблокируем обновление позиции после полного открытия
+ setTimeout(() => {
+ isSortingChangingRef.current = false;
+ }, 350);
+ }, 10);
+ }, 300);
+ }
+
+ prevSortingByRef.current = sortingBy;
+ }, [sortingBy, isSightsOpen]);
+
+ return (
+ Загрузка информации...
+ ) : error ? (
+ {error}
+ ) : selectedSightData ? (
+ <>
+ {selectedSightData.mediaType == 1 ||
+ selectedSightData.mediaType == 3 ? (
+
+
+
+ ) : (isVisible || selectedSightData) && !isLoading ? (
+ {selectedSightData.title}
+
+ {selectedSightData.address}
+
+
+ {selectedSightData.text}
+
+
+ {selectedLanguage === "ru"
+ ? "Выберите достопримечательность для просмотра деталей."
+ : selectedLanguage === "zh"
+ ? "选择一个地标来查看详细信息。"
+ : "Select a landmark to view details."}
+
+ ) : null}
+
+
+ );
+});
+
+export default SideMenu;
diff --git a/src/client/src/components/side-menu/SightStationsList.jsx b/src/client/src/components/side-menu/SightStationsList.jsx
new file mode 100644
index 0000000..d1a1eb5
--- /dev/null
+++ b/src/client/src/components/side-menu/SightStationsList.jsx
@@ -0,0 +1,287 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { OverlayScrollbarsWrapper } from "../OverlayScrollbarsWrapper";
+import "../../styles/OverlayScrollbars.css";
+import { getSightStations } from "../../api/ApiStore/api";
+import busIcon from "../../assets/transport-icons/bus.svg";
+import metroBlueIcon from "../../assets/transport-icons/metroBlue.svg";
+import metroGreenIcon from "../../assets/transport-icons/metroGreen.svg";
+import metroOrangeIcon from "../../assets/transport-icons/metroOrange.svg";
+import metroPurpleIcon from "../../assets/transport-icons/metroPurple.svg";
+import metroRedIcon from "../../assets/transport-icons/metroRed.svg";
+import trainIcon from "../../assets/transport-icons/train.svg";
+import tramIcon from "../../assets/transport-icons/tram.svg";
+import trolleyIcon from "../../assets/transport-icons/trolley.svg";
+
+const StationItem = ({
+ station,
+ handlePointerDown,
+ handlePointerUp,
+ handleStationClick,
+ selectedStationId,
+ transferIcons,
+ getNoTransfersMessage,
+ isLast,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth * 1.1;
+ setShouldAnimate(textWidth > threshold);
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [station.name]);
+
+ return (
+
+ {designData?.creastPath && (
+ 
+ )}
+ {carrier?.slogan && (
+ {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }, 300);
+ }}
+ setWeatherVisible={setIsWeatherVisible}
+ setLocalSelectedSightId={setLocalSelectedSightId}
+ localSelectedSightId={localSelectedSightId}
+ onSightTopChange={(top) => {
+ // Не обновляем позицию виджета во время смены сортировки
+ if (isSortingChangingRef.current) {
+ return;
+ }
+ setSightTop(top);
+ }}
+ onSightSelected={(sightId) => {
+ // Обработка выбора достопримечательности уже в компоненте
+ }}
+ />
+ )}
+ {shouldRenderStation && (
+ {
+ setIsStationAnimating(true);
+ openStation(false);
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ setIsWeatherVisible(true);
+ }, 300);
+ }}
+ onStationSelected={(stationId) => {
+ // Обработка выбора остановки уже в компоненте
+ }}
+ onSightClick={(sightId, top) => {
+ setLocalSelectedSightId(sightId);
+ if (top !== undefined) {
+ setSightTop(top);
+ }
+ setIsLeftWidgetOpen(true);
+ }}
+ />
+ )}
+ {route?.governor_appeal > 0 && (
+
+ {carrier.slogan}
+ )}
+ {shouldRenderSights && (
+ {
+ openWidget(!isWidgetOpen);
+ store.setIsGovernorWidgetOpen(!isWidgetOpen);
+ }}
+ className="appeal-button"
+ >
+ {selectedLanguage == "ru"
+ ? "Обращение губернатора"
+ : selectedLanguage == "zh"
+ ? "州长致辞"
+ : "Governor's appeal"}
+
+ )}
+
+
+ {
+ if (!isSightsOpen) {
+ if (isStationOpen) {
+ setIsStationAnimating(true);
+ openStation(false);
+ setTimeout(() => {
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ }, 10);
+ }, 300);
+ } else {
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ }, 10);
+ }
+ openWidget(false);
+ store.closeGovernorModal();
+ setIsLeftWidgetOpen(false);
+ } else {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }, 300);
+ }
+ }}
+ className={`side-menu-button side-menu-button--sights ${
+ isSightsOpen ? "side-menu-button--active" : ""
+ }`}
+ >
+ {selectedLanguage == "ru"
+ ? "Достопримечательности"
+ : selectedLanguage == "zh"
+ ? "景点"
+ : "Attractions"}
+
+ {
+ if (!isStationOpen) {
+ if (isSightsOpen) {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ setShouldRenderStation(true);
+ setTimeout(() => {
+ openStation(true);
+ }, 10);
+ }, 300);
+ } else {
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderStation(true);
+ setTimeout(() => {
+ openStation(true);
+ }, 10);
+ }
+ openWidget(false);
+ store.closeGovernorModal();
+ setIsLeftWidgetOpen(false);
+ } else {
+ setIsStationAnimating(true);
+ openStation(false);
+ setTimeout(() => {
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ }, 300);
+ }
+ }}
+ className={`side-menu-button ${
+ isStationOpen ? "side-menu-button--active" : ""
+ }`}
+ >
+ {selectedLanguage == "ru"
+ ? "Остановки"
+ : selectedLanguage == "zh"
+ ? "车站"
+ : "Stations"}
+
+
+ {/* {selectedLanguage == "ru"
+ ? "#ВсемПоПути"
+ : selectedLanguage == "zh"
+ ? "#每个人都在路上"
+ : "#EveryoneOnTheWay"} */}
+
+
+ 
+
+
+ {designData?.carrierPath && (
+ 
+ )}
+ {carrier?.full_name && (
+
+ {carrier.short_name}
+ )}
+
+
+
+
+
+ {isLangMenuOpen ? (
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {isSightsOpen && (
+
+ )}
+
+ {
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ }, 1000);
+ }}
+ isVisible={isLeftWidgetVisible}
+ sightTop={sightTop}
+ />
+
+
+
+ );
+};
+
+const SightStationsList = observer(
+ forwardRef(
+ ({ style, className, onClose, sightId, selectedLanguage }, ref) => {
+ const [stationList, setStationList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isStationListLoading, setIsStationListLoading] = useState(true);
+ const [selectedStationId, setSelectedStationId] = useState(null);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ const getNoTransfersMessage = () => {
+ if (selectedLanguage === "ru") return "Нет пересадок";
+ if (selectedLanguage === "zh") return "没有转移";
+ return "No transfers";
+ };
+
+ const transferIcons = {
+ metro_red: metroRedIcon,
+ metro_green: metroGreenIcon,
+ metro_blue: metroBlueIcon,
+ metro_orange: metroOrangeIcon,
+ metro_purple: metroPurpleIcon,
+ tram: tramIcon,
+ trolleybus: trolleyIcon,
+ bus: busIcon,
+ train: trainIcon,
+ };
+
+ useEffect(() => {
+ async function fetchStationList() {
+ if (!sightId) {
+ setIsStationListLoading(false);
+ return;
+ }
+
+ setIsStationListLoading(true);
+ setError(null);
+ try {
+ const response = await getSightStations(sightId, selectedLanguage);
+
+ const sortedStations = [...(response || [])].sort((a, b) => {
+ const nameA = a.name.trim();
+ const nameB = b.name.trim();
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ }
+ );
+ });
+
+ setStationList(sortedStations);
+ } catch (err) {
+ setError(
+ "Не удалось получить остановки. Пожалуйста, попробуйте позже."
+ );
+ setStationList([]);
+ } finally {
+ setIsStationListLoading(false);
+ }
+ }
+
+ fetchStationList();
+ }, [sightId, selectedLanguage]);
+
+ const handleStationClick = (stationId) => {
+ setSelectedStationId((prevId) =>
+ prevId === stationId ? null : stationId
+ );
+ };
+
+ return (
+ handlePointerDown(e, station.id)}
+ onPointerUp={(e) => handlePointerUp(e, station.id, handleStationClick)}
+ title={station.name}
+ >
+
+ {station.name}
+
+
+
+ {station.transfers != null &&
+ !Object.values(station.transfers).every((value) => value === "") ? (
+ Object.entries(station.transfers).map(
+ ([transferType, transferValue]) => {
+ const IconComponent = transferIcons[transferType];
+
+ if (transferValue && transferValue.length > 0) {
+ return (
+
+
+ {IconComponent && (
+ 
+ )}
+ {transferValue}
+
+ );
+ }
+ return null;
+ }
+ )
+ ) : (
+
+ {getNoTransfersMessage()}
+
+ )}
+
+
+ {isStationListLoading ? (
+
+
+ );
+ }
+ )
+);
+
+export default SightStationsList;
diff --git a/src/client/src/components/side-menu/SightsList.jsx b/src/client/src/components/side-menu/SightsList.jsx
new file mode 100644
index 0000000..41932af
--- /dev/null
+++ b/src/client/src/components/side-menu/SightsList.jsx
@@ -0,0 +1,477 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { TouchableLayout } from "../TouchableLayout";
+import { getMediaUrl } from "../../api/apiConfig";
+import stationIcon from "../../assets/transport-icons/station.svg";
+
+export const isMediaIdEmpty = (id) => {
+ if (id == null || id === "") return true;
+ const digits = id.replace(/-/g, "");
+ return digits === "" || /^0+$/.test(digits);
+};
+
+const SightItem = ({
+ sight,
+ handlePointerDown,
+ handlePointerUp,
+ handleSightClick,
+ localSelectedSightId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ selectedSightId,
+ onSightSelected,
+ sightStationsCache,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ // Получаем название для отображения
+ const getSightName = () => {
+ // Если есть короткое название, используем его
+ if (sight.short_name) {
+ return sight.short_name;
+ }
+
+ if (!sight.left_article) {
+ return sight.name;
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return leftArticleData?.heading || sight.name;
+ };
+
+ const sightName = getSightName();
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const shouldAnimateValue = textWidth > containerWidth;
+ setShouldAnimate(shouldAnimateValue);
+
+ // Устанавливаем CSS переменную для анимации
+ if (shouldAnimateValue && containerRef.current) {
+ containerRef.current.style.setProperty(
+ "--container-width",
+ `${containerWidth}px`,
+ );
+ }
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [sightName]);
+
+ const handleClick = (e) => {
+ const newExpanded = !isExpanded;
+ setIsExpanded(newExpanded);
+
+ // Всегда открываем виджет при клике на достопримечательность
+ handleSightClick(sight.id);
+ };
+
+ const cacheKey = `${sight.id}_${selectedLanguage}`;
+ const stations = sightStationsCache.get(cacheKey) || [];
+
+ return (
+ {
+ if (onClose) {
+ onClose();
+ }
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Остановки" + : selectedLanguage === "zh" + ? "车站" + : "Stations"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка остановок..."
+ : selectedLanguage === "zh"
+ ? "加载停止..."
+ : "Loading stops..."}
+
+ ) : error ? (
+ {error}
+ ) : stationList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Остановки не найдены"
+ : selectedLanguage === "zh"
+ ? "没有找到停靠站"
+ : "No stops found"}
+
+ ) : (
+ stationList.map((station, index) => (
+
+
+ );
+};
+
+const SightsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onCloseSights,
+ setWeatherVisible,
+ setLocalSelectedSightId,
+ localSelectedSightId,
+ onSightTopChange,
+ onSightSelected,
+ },
+ ref,
+ ) => {
+ const containerRef = useRef(null);
+ const store = useGeolocationStore();
+ const {
+ sortingBy,
+ contextData,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ isLeftWidgetOpen,
+ setIsLeftWidgetOpen,
+ } = store;
+
+ useLayoutEffect(() => {
+ if (containerRef.current) {
+ if (className === "slide-in") {
+ // Применяем стили для slide-in
+ requestAnimationFrame(() => {
+ if (containerRef.current) {
+ containerRef.current.style.transform = "translateY(0)";
+ containerRef.current.style.opacity = "1";
+ }
+ });
+ } else if (className === "slide-out") {
+ // Очищаем inline стили, чтобы CSS transition работал
+ containerRef.current.style.transform = "";
+ // Принудительно применяем reflow для запуска transition
+ void containerRef.current.offsetHeight;
+ }
+ }
+ }, [className]);
+ const {
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ sightStationsCache,
+ } = apiStore;
+ const [sightList, setSightList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isSightListLoading, setIsSightListLoading] = useState(true);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchSightList() {
+ setIsSightListLoading(true);
+ setError(null);
+ try {
+ const sights =
+ selectedLanguage === "ru"
+ ? routeSights
+ : selectedLanguage === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+ // Функция для получения названия для сортировки
+ const getSightNameForSort = (sight) => {
+ if (sight.short_name) {
+ return sight.short_name.trim();
+ }
+
+ if (!sight.left_article) {
+ return sight.name.trim();
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return (leftArticleData?.heading || sight.name).trim();
+ };
+
+ const sortedSights = [...(sights || [])].sort((a, b) => {
+ const nameA = getSightNameForSort(a);
+ const nameB = getSightNameForSort(b);
+
+ if (sortingBy === "asc") {
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ } else {
+ return nameB.localeCompare(
+ nameA,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ }
+ });
+ setSightList(sortedSights);
+ } catch (err) {
+ setError(
+ "Не удалось получить достопримечательности. Пожалуйста, попробуйте позже.",
+ );
+ setSightList([]);
+ setIsLeftWidgetOpen(false);
+ } finally {
+ setIsSightListLoading(false);
+ }
+ }
+
+ fetchSightList();
+ }, [
+ contextData?.routeId,
+ isGeolocationLoading,
+ selectedLanguage,
+ sortingBy,
+ setIsLeftWidgetOpen,
+ setLocalSelectedSightId,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ ]);
+
+ const measureSelectedSight = () => {
+ if (localSelectedSightId && onSightTopChange) {
+ const element = document.getElementById(
+ `sight-${localSelectedSightId}`,
+ );
+ if (element && containerRef.current) {
+ const elementRect = element.getBoundingClientRect();
+ const containerRect = containerRef.current.getBoundingClientRect();
+
+ // Используем позицию элемента относительно viewport (elementRect.top)
+ // чтобы верхняя граница виджета совпадала с верхней границей элемента
+ const elementTop = elementRect.top;
+ onSightTopChange(elementTop);
+ } else {
+ console.warn(
+ "[SightsList] Element or container not found:",
+ `sight-${localSelectedSightId}`,
+ { element: !!element, container: !!containerRef.current },
+ );
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (!localSelectedSightId) return;
+
+ // Run measurement after render/update
+ // Используем requestAnimationFrame для точности измерения после рендеринга
+ const timer = setTimeout(() => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(measureSelectedSight);
+ });
+ }, 0);
+
+ return () => clearTimeout(timer);
+ }, [localSelectedSightId, sightList, className]);
+
+ const handleSightClick = (sightId) => {
+ // Открываем левый виджет
+ if (isLeftWidgetOpen && localSelectedSightId !== sightId) {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ } else if (!isLeftWidgetOpen) {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ } else {
+ // Если виджет уже открыт для этой достопримечательности, просто обновляем список остановок
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ }
+ };
+
+ const handleClose = () => {
+ setIsLeftWidgetOpen(false);
+ setWeatherVisible(true);
+ onCloseSights();
+ };
+
+ return (
+ handlePointerDown(e, sight.id)}
+ onPointerUp={(e) => handlePointerUp(e, sight.id, handleClick)}
+ className={`side-menu-sight pointer ${
+ localSelectedSightId === sight.id ? "selected" : ""
+ }`}
+ title={sightName}
+ >
+
+ {sightName}
+
+
+
+ {stations.length > 0 ? (
+ stations.map((station, index) => {
+ const iconSrc = isMediaIdEmpty(station.icon)
+ ? stationIcon
+ : getMediaUrl(station.icon);
+
+ return (
+
+
+
+ {station.name}
+
+ );
+ })
+ ) : (
+
+ {selectedLanguage === "ru"
+ ? "Нет остановок"
+ : selectedLanguage === "zh"
+ ? "没有站"
+ : "No stations"}
+
+ )}
+
+
+ {isSightListLoading ? (
+
+
+ );
+ },
+ ),
+);
+
+export default SightsList;
diff --git a/src/client/src/components/side-menu/StationSightsList.jsx b/src/client/src/components/side-menu/StationSightsList.jsx
new file mode 100644
index 0000000..58887d0
--- /dev/null
+++ b/src/client/src/components/side-menu/StationSightsList.jsx
@@ -0,0 +1,313 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { OverlayScrollbarsWrapper } from "../OverlayScrollbarsWrapper";
+import "../../styles/OverlayScrollbars.css";
+import { getStationSights } from "../../api/ApiStore/api";
+
+const SightItem = ({
+ sight,
+ handlePointerDown,
+ handlePointerUp,
+ handleSightClick,
+ localSelectedSightId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ // Получаем название из left_article
+ const getSightName = () => {
+ if (!sight.left_article) {
+ return sight.name;
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return leftArticleData?.heading || sight.name;
+ };
+
+ const sightName = getSightName();
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth;
+ setShouldAnimate(textWidth > threshold);
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [sightName]);
+
+ return (
+ {
+ handleClose();
+ }}
+ >
+
+ + {" "} + {selectedLanguage === "ru" + ? "Достопримечательности" + : selectedLanguage === "zh" + ? "景点" + : "Attractions"} +
+ + +
+ {selectedLanguage === "ru"
+ ? "Загрузка..."
+ : selectedLanguage === "zh"
+ ? "正在加载..."
+ : "Loading..."}
+
+ ) : error ? (
+ {error}
+ ) : sightList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Ничего не найдено"
+ : selectedLanguage === "zh"
+ ? "没有找到"
+ : "Nothing found"}
+
+ ) : (
+ sightList.map((sight) => (
+ handlePointerDown(e, sight.id)}
+ onPointerUp={(e) => handlePointerUp(e, sight.id, handleSightClick)}
+ className={`side-menu-sight pointer ${
+ localSelectedSightId === sight.id ? "selected" : ""
+ }`}
+ title={sightName}
+ >
+
+ {sightName}
+
+
+ );
+};
+
+const StationSightsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onClose,
+ stationId,
+ selectedLanguage,
+ setLocalSelectedSightId,
+ setIsLeftWidgetOpen,
+ isLeftWidgetOpen,
+ localSelectedSightId,
+ onSightTopChange,
+ onSightSelected,
+ },
+ ref
+ ) => {
+ const { sightArticles, sightArticlesEn, sightArticlesZh } = apiStore;
+ const [sightList, setSightList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isSightListLoading, setIsSightListLoading] = useState(true);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchSightList() {
+ if (!stationId) {
+ setIsSightListLoading(false);
+ return;
+ }
+
+ setIsSightListLoading(true);
+ setError(null);
+ try {
+ const response = await getStationSights(
+ stationId,
+ selectedLanguage
+ );
+
+ // Функция для получения названия из left_article
+ const getSightNameForSort = (sight) => {
+ if (!sight.left_article) {
+ return sight.name.trim();
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return (leftArticleData?.heading || sight.name).trim();
+ };
+
+ const sortedSights = [...(response || [])].sort((a, b) => {
+ const nameA = getSightNameForSort(a);
+ const nameB = getSightNameForSort(b);
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ }
+ );
+ });
+ setSightList(sortedSights);
+ } catch (err) {
+ setError(
+ "Не удалось получить достопримечательности. Пожалуйста, попробуйте позже."
+ );
+ setSightList([]);
+ } finally {
+ setIsSightListLoading(false);
+ }
+ }
+
+ fetchSightList();
+ }, [
+ stationId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ ]);
+
+ const measureSelectedSight = () => {
+ if (localSelectedSightId && onSightTopChange) {
+ const element = document.getElementById(
+ `sight-${localSelectedSightId}`
+ );
+ if (element) {
+ const rect = element.getBoundingClientRect();
+ onSightTopChange(rect.top);
+ }
+ }
+ };
+
+ useEffect(() => {
+ const timer = setTimeout(measureSelectedSight, 0);
+ return () => clearTimeout(timer);
+ }, [localSelectedSightId, sightList]);
+
+ const handleSightClick = (sightId) => {
+ // Открываем левый виджет
+ if (isLeftWidgetOpen && localSelectedSightId !== sightId) {
+ setTimeout(() => {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ }, 0);
+ } else if (!isLeftWidgetOpen) {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ } else {
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ }
+ };
+
+ return (
+
+ {
+ handleScroll(e);
+ measureSelectedSight();
+ }}
+ >
+ {isSightListLoading ? (
+
+
+ );
+ }
+ )
+);
+
+export default StationSightsList;
diff --git a/src/client/src/components/side-menu/StationsList.jsx b/src/client/src/components/side-menu/StationsList.jsx
new file mode 100644
index 0000000..4d4e709
--- /dev/null
+++ b/src/client/src/components/side-menu/StationsList.jsx
@@ -0,0 +1,368 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { TouchableLayout } from "../TouchableLayout";
+
+const StationItem = ({
+ station,
+ handlePointerDown,
+ handlePointerUp,
+ handleStationClick,
+ selectedStationId,
+ selectedLanguage,
+ stationSightsCache,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ onSightClick,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth * 1.1; // 110% от ширины контейнера
+ const shouldAnimateValue = textWidth > threshold;
+ setShouldAnimate(shouldAnimateValue);
+
+ // Устанавливаем CSS переменную для анимации
+ if (shouldAnimateValue && containerRef.current) {
+ containerRef.current.style.setProperty(
+ "--container-width",
+ `${containerWidth}px`,
+ );
+ }
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [station.name]);
+
+ const cacheKey = `${station.id}_${selectedLanguage}`;
+ const sights = stationSightsCache.get(cacheKey) || [];
+
+ const getSightName = (sight) => {
+ if (sight.short_name) {
+ return sight.short_name;
+ }
+
+ if (!sight.left_article) {
+ return sight.name;
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return leftArticleData?.heading || sight.name;
+ };
+
+ return (
+ {
+ if (onClose) {
+ onClose();
+ }
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Достопримечательности" + : selectedLanguage === "zh" + ? "景点" + : "Attractions"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка..."
+ : selectedLanguage === "zh"
+ ? "正在加载..."
+ : "Loading..."}
+
+ ) : error ? (
+ {error}
+ ) : sightList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Ничего не найдено"
+ : selectedLanguage === "zh"
+ ? "没有找到"
+ : "Nothing found"}
+
+ ) : (
+ sightList.map((sight) => (
+
+
+ );
+};
+
+const StationsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onCloseStation,
+ isOpen,
+ onStationSelected,
+ onSightClick,
+ setWeatherVisible,
+ },
+ ref,
+ ) => {
+ const containerRef = useRef(null);
+ const store = useGeolocationStore();
+ const {
+ contextData,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ isLeftWidgetOpen,
+ setIsLeftWidgetOpen,
+ } = store;
+ const [stationList, setStationList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isStationListLoading, setIsStationListLoading] = useState(true);
+ const [selectedStationId, setSelectedStationId] = useState(null);
+
+ useLayoutEffect(() => {
+ if (containerRef.current) {
+ if (className === "slide-in") {
+ // Применяем стили для slide-in
+ requestAnimationFrame(() => {
+ if (containerRef.current) {
+ containerRef.current.style.transform = "translateY(0)";
+ containerRef.current.style.opacity = "1";
+ }
+ });
+ } else if (className === "slide-out") {
+ // Очищаем inline стили, чтобы CSS transition работал
+ containerRef.current.style.transform = "";
+ // Принудительно применяем reflow для запуска transition
+ void containerRef.current.offsetHeight;
+ }
+ }
+ }, [className]);
+ const {
+ routeStations,
+ routeStationsEn,
+ routeStationsZh,
+ stationSightsCache,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ } = apiStore;
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchStationList() {
+ setIsStationListLoading(true);
+ setError(null);
+ try {
+ const response =
+ selectedLanguage === "ru"
+ ? routeStations
+ : selectedLanguage === "en"
+ ? routeStationsEn
+ : routeStationsZh;
+
+ // Сортировка по умолчанию по возрастанию (не зависит от sortingBy)
+ const sortedStations = [...(response || [])].sort((a, b) => {
+ const nameA = a.name.trim();
+ const nameB = b.name.trim();
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ });
+
+ setStationList(sortedStations);
+ } catch (err) {
+ setError(
+ "Не удалось получить остановки. Пожалуйста, попробуйте позже.",
+ );
+ setStationList([]);
+ } finally {
+ setIsStationListLoading(false);
+ }
+ }
+
+ fetchStationList();
+ }, [
+ contextData?.routeId,
+ isGeolocationLoading,
+ selectedLanguage,
+ routeStations,
+ routeStationsEn,
+ routeStationsZh,
+ ]);
+
+ const handleStationClick = (stationId) => {
+ const newSelectedId =
+ selectedStationId === stationId ? null : stationId;
+ setSelectedStationId(newSelectedId);
+
+ // Если остановка выбрана, вызываем callback для открытия списка достопримечательностей
+ if (newSelectedId !== null && onStationSelected) {
+ onStationSelected(newSelectedId);
+ }
+ };
+
+ const handleClose = () => {
+ setIsLeftWidgetOpen(false);
+ setWeatherVisible(true);
+ onCloseStation();
+ };
+
+ return (
+ handlePointerDown(e, station.id)}
+ onPointerUp={(e) => {
+ // Если у станции нет достопримечательностей, не открываем список
+ if (sights.length > 0) {
+ handlePointerUp(e, station.id, () =>
+ handleStationClick(station.id),
+ );
+ }
+ }}
+ title={station.name}
+ >
+
+ {station.name}
+
+
+
+ {sights.length > 0 ? (
+ sights.map((sight, index) => (
+
+ {
+ e.stopPropagation();
+ if (onSightClick) {
+ // Вычисляем позицию элемента для правильного позиционирования левого виджета
+ const element = e.currentTarget;
+ const elementRect = element.getBoundingClientRect();
+
+ // Используем позицию элемента относительно viewport (elementRect.top)
+ // чтобы верхняя граница виджета совпадала с верхней границей элемента
+ const elementTop = elementRect.top;
+ onSightClick(sight.id, elementTop);
+ }
+ }}
+ >
+ {getSightName(sight)}
+
+ ))
+ ) : (
+
+ {selectedLanguage === "ru"
+ ? "Нет достопримечательностей"
+ : selectedLanguage === "zh"
+ ? "没有景点"
+ : "No sights"}
+
+ )}
+
+
+ {isStationListLoading ? (
+
+
+ );
+ },
+ ),
+);
+
+export default StationsList;
diff --git a/src/client/src/components/widgets/AppealWidget.jsx b/src/client/src/components/widgets/AppealWidget.jsx
new file mode 100644
index 0000000..9b46505
--- /dev/null
+++ b/src/client/src/components/widgets/AppealWidget.jsx
@@ -0,0 +1,13 @@
+import '../../styles/AppealWidget.css'
+
+function AppealWidget({widgetImgPath, widgetLabel, widgetText, style}) {
+ return (
+ {
+ handleClose();
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Остановки" + : selectedLanguage === "zh" + ? "车站" + : "Stations"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка остановок..."
+ : selectedLanguage === "zh"
+ ? "加载停止..."
+ : "Loading stops..."}
+
+ ) : error ? (
+ {error}
+ ) : stationList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Остановки не найдены"
+ : selectedLanguage === "zh"
+ ? "没有找到停靠站"
+ : "No stops found"}
+
+ ) : (
+ stationList.map((station) => (
+
+ 
+
+ );
+}
+
+export default AppealWidget
diff --git a/src/client/src/components/widgets/PanoramView.tsx b/src/client/src/components/widgets/PanoramView.tsx
new file mode 100644
index 0000000..5116112
--- /dev/null
+++ b/src/client/src/components/widgets/PanoramView.tsx
@@ -0,0 +1,147 @@
+import React from "react";
+import { Viewer, ViewerConfig, AnimateOptions, CssSize, ExtendedPosition, UpdatableViewerConfig, events, PluginConstructor, NavbarCustomButton, TooltipConfig, Tooltip, Position, Size, PanoramaOptions, utils, AbstractPlugin } from "@photo-sphere-viewer/core";
+import "./styles.css";
+import "@photo-sphere-viewer/core/index.css";
+
+type MakeOptional{widgetLabel}
+ {widgetText}
+
+
+ );
+});
+
+export default RouteWidget;
diff --git a/src/client/src/components/widgets/ThreeView.tsx b/src/client/src/components/widgets/ThreeView.tsx
new file mode 100644
index 0000000..79abd24
--- /dev/null
+++ b/src/client/src/components/widgets/ThreeView.tsx
@@ -0,0 +1,293 @@
+import { Canvas, useThree } from "@react-three/fiber";
+import { OrbitControls, Stage, useGLTF } from "@react-three/drei";
+import React, { useEffect, Suspense } from "react";
+import { BACKGROUND_COLOR } from "../../assets/Constants";
+import * as THREE from "three";
+import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+
+export interface ThreeViewHandle {
+ zoomIn: () => void;
+ zoomOut: () => void;
+}
+
+interface ThreeViewProps {
+ fileUrl: string;
+ width?: string;
+ height?: string;
+ onLoad?: () => void;
+ onError?: (error: string) => void;
+ onAspectRatioCalculated?: (ratio: number) => void;
+ controlRef?: React.MutableRefObject
+ {route?.route_sys_number || context?.routeNumber || ""}
+
+
+
+
+ {startStation?.name}
+
+
+ {endStation?.name}
+
+ {(selectedLanguage === "en" || selectedLanguage === "ru") && (
+
+ {routeEnSubtitle}
+
+ )}
+ {selectedLanguage === "zh" && (
+
+ {routeZhSubtitle}
+
+ )}
+
+
+
+ );
+};
diff --git a/src/client/src/components/widgets/ThreeViewIcons.tsx b/src/client/src/components/widgets/ThreeViewIcons.tsx
new file mode 100644
index 0000000..d81ab04
--- /dev/null
+++ b/src/client/src/components/widgets/ThreeViewIcons.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+export const MinusIcon: React.FC
+ {showVideo && activeSightId && (
+
,
+ document.body,
+ );
+});
+
+export default VideoPreviewWidget;
diff --git a/src/client/src/context/GeolocationContext.tsx b/src/client/src/context/GeolocationContext.tsx
new file mode 100644
index 0000000..ec63836
--- /dev/null
+++ b/src/client/src/context/GeolocationContext.tsx
@@ -0,0 +1,101 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+
+// Обновленный тип контекста
+type GeolocationContextType = {
+ contextData: any; // Сохраняем для других данных (например, routeId)
+ setContextData: React.Dispatch
+
+ )}
+