From a182a52111fa502e2205504d13abf016ee0ba525 Mon Sep 17 00:00:00 2001 From: itoshi Date: Sun, 5 Apr 2026 14:24:29 +0300 Subject: [PATCH] feat: add default size for icon and en trasnlate for secondary name when ru language is selected --- .env | 14 +++--- .../Route/route-preview/MapDataContext.tsx | 14 ++++++ .../Route/route-preview/RightSidebar.tsx | 46 ++++++++++++++++++- .../WebGLRouteMapPrototype.tsx | 32 +++++++------ 4 files changed, 83 insertions(+), 23 deletions(-) diff --git a/.env b/.env index c554530..a5c21cf 100644 --- a/.env +++ b/.env @@ -1,8 +1,8 @@ -VITE_API_URL='https://wn.st.unprism.ru' -VITE_REACT_APP ='https://wn.st.unprism.ru/' -VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/' -VITE_NEED_AUTH='true' -# VITE_API_URL='https://wn.krbl.ru' -# VITE_REACT_APP ='https://wn.krbl.ru/' -# VITE_KRBL_MEDIA='https://wn.krbl.ru/media/' +# # VITE_API_URL='https://wn.st.unprism.ru' +# # VITE_REACT_APP ='https://wn.st.unprism.ru/' +# # VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/' # VITE_NEED_AUTH='true' +VITE_API_URL='https://wn.krbl.ru' +VITE_REACT_APP ='https://wn.krbl.ru/' +VITE_KRBL_MEDIA='https://wn.krbl.ru/media/' +VITE_NEED_AUTH='true' diff --git a/src/pages/Route/route-preview/MapDataContext.tsx b/src/pages/Route/route-preview/MapDataContext.tsx index cf7a093..4931629 100644 --- a/src/pages/Route/route-preview/MapDataContext.tsx +++ b/src/pages/Route/route-preview/MapDataContext.tsx @@ -44,6 +44,7 @@ const MapDataContext = createContext<{ ) => void; setSightIconSize: (sightId: number, size: number) => void; setFontSize: (size: number) => void; + setRouteIconSize: (size: number) => void; saveChanges: () => void; }>({ originalRouteData: undefined, @@ -67,6 +68,7 @@ const MapDataContext = createContext<{ setSightCoordinates: () => {}, setSightIconSize: () => {}, setFontSize: () => {}, + setRouteIconSize: () => {}, saveChanges: () => {}, }); @@ -180,6 +182,16 @@ export const MapDataProvider = observer( }); } + function setRouteIconSize(size: number) { + const clamped = Math.max(1, Math.min(300, size)); + setRouteChanges((prev) => { + if (prev.icon_size === clamped) { + return prev; + } + return { ...prev, icon_size: clamped }; + }); + } + function setMapCenter(latitude: number, longitude: number) { const epsilon = 1e-6; @@ -579,6 +591,7 @@ export const MapDataProvider = observer( setSightCoordinates, setSightIconSize, setFontSize, + setRouteIconSize, }), [ originalRouteData, @@ -594,6 +607,7 @@ export const MapDataProvider = observer( setStationIconSize, setSightIconSize, setFontSize, + setRouteIconSize, ] ); diff --git a/src/pages/Route/route-preview/RightSidebar.tsx b/src/pages/Route/route-preview/RightSidebar.tsx index fcdb44c..d13924f 100644 --- a/src/pages/Route/route-preview/RightSidebar.tsx +++ b/src/pages/Route/route-preview/RightSidebar.tsx @@ -22,6 +22,7 @@ export function RightSidebar() { setMapRotation, setMapCenter, setFontSize: updateFontSize, + setRouteIconSize: updateRouteIconSize, } = useMapData(); const { rotation, rotateToAngle, scale, setScaleAtCenter } = useTransform(); @@ -34,6 +35,7 @@ export function RightSidebar() { const [rotationDegrees, setRotationDegrees] = useState(0); const [isUserEditing, setIsUserEditing] = useState(false); const [fontSize, setFontSize] = useState(100); + const [defaultIconSize, setDefaultIconSize] = useState(100); const [isSaving, setIsSaving] = useState(false); useEffect(() => { @@ -52,6 +54,7 @@ export function RightSidebar() { y: originalRouteData.center_longitude ?? 0, }); setFontSize(originalRouteData.font_size ?? 100); + setDefaultIconSize(originalRouteData.icon_size ?? 100); } }, [originalRouteData]); @@ -63,7 +66,7 @@ export function RightSidebar() { useEffect(() => { setRotationDegrees( - ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360 + ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360, ); }, [rotation]); @@ -108,6 +111,20 @@ export function RightSidebar() { setFontSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev)); }, [routeData?.font_size, originalRouteData?.font_size]); + const handleDefaultIconSizeChange = (value: number) => { + if (!Number.isFinite(value)) { + return; + } + const clamped = Math.max(1, Math.min(300, Math.round(value))); + setDefaultIconSize(clamped); + updateRouteIconSize(clamped); + }; + + useEffect(() => { + const next = routeData?.icon_size ?? originalRouteData?.icon_size ?? 100; + setDefaultIconSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev)); + }, [routeData?.icon_size, originalRouteData?.icon_size]); + if (!routeData) { return null; } @@ -317,6 +334,33 @@ export function RightSidebar() { }} /> + { + const value = Number(e.target.value); + if (!isNaN(value)) { + handleDefaultIconSizeChange(value); + } + }} + style={{ backgroundColor: "#222", borderRadius: 4 }} + sx={{ + "& .MuiInputLabel-root": { + color: "#fff", + }, + "& .MuiInputBase-input": { + color: "#fff", + }, + }} + inputProps={{ + min: 1, + max: 300, + step: 1, + }} + /> + { return null; } const translatedStation = stationData?.[language]?.[index]; + const enStation = stationData?.["en"]?.[index]; const local = coordinatesToLocal( station.latitude, @@ -2341,11 +2342,12 @@ export const WebGLRouteMapPrototype = observer(() => { const rotationCss = `${rotationAngle}rad`; const counterRotationCss = `${-rotationAngle}rad`; + const secondaryStation = + language === "ru" ? enStation : translatedStation; const showSecondary = - language !== "ru" && - translatedStation && - translatedStation.name && - translatedStation.name !== station.name; + secondaryStation && + secondaryStation.name && + secondaryStation.name !== station.name; const fontSizePercent = routeData?.font_size ?? originalRouteData?.font_size ?? 100; @@ -2567,7 +2569,7 @@ export const WebGLRouteMapPrototype = observer(() => { pointerEvents: "none", }} > - {translatedStation?.name} + {secondaryStation?.name} ) : null} @@ -2701,21 +2703,21 @@ export const WebGLRouteMapPrototype = observer(() => { ? camera.scale / Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6) : 1; - const sightIconSizePercent = - liveSightIconSizes.get(sight.id) ?? - (typeof sight.icon_size === "number" && - Number.isFinite(sight.icon_size) - ? sight.icon_size - : (routeData?.icon_size ?? - originalRouteData?.icon_size ?? - 100)); + const sightIconSizePercent = sight.is_default_icon === false + ? (liveSightIconSizes.get(sight.id) ?? + (typeof sight.icon_size === "number" && + Number.isFinite(sight.icon_size) + ? sight.icon_size + : 100)) + : (routeData?.icon_size ?? originalRouteData?.icon_size ?? 100); const iconSize = 30 * clamp(sightIconSizePercent / 100, 0.1, 10) * customSightIconScaleFactor; const showSightResizeUi = - hoveredSightIconId === sight.id || - resizingSightIconId === sight.id; + sight.is_default_icon !== true && + (hoveredSightIconId === sight.id || + resizingSightIconId === sight.id); const iconLeft = cssX - iconSize; const iconTop = cssY - iconSize; const labelHeight = 24;