KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add default size for icon and en trasnlate for secondary name when ru language is selected

Browse Source
This commit is contained in:
Илья Куприец
2026-04-05 14:24:29 +03:00
parent dd5aee58e6
commit a182a52111
4 changed files with 83 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.env
View File

@@ -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'

14
src/pages/Route/route-preview/MapDataContext.tsx
View File

@@ -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,
]
);

46
src/pages/Route/route-preview/RightSidebar.tsx
View File

@@ -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<number>(0);
const [isUserEditing, setIsUserEditing] = useState<boolean>(false);
const [fontSize, setFontSize] = useState<number>(100);
const [defaultIconSize, setDefaultIconSize] = useState<number>(100);
const [isSaving, setIsSaving] = useState<boolean>(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() {
}}
/>
<TextField
type="number"
label="Размер иконок по умолчанию (%)"
variant="filled"
value={defaultIconSize}
onChange={(e) => {
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,
}}
/>
<TextField
type="number"
label="Поворот (в градусах)"

32
src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx
View File

@@ -2288,6 +2288,7 @@ export const WebGLRouteMapPrototype = observer(() => {
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}
</div>
) : null}
</div>
@@ -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;