From 11133b6839393d10a5e5e14768bb9ea6d4838ca0 Mon Sep 17 00:00:00 2001 From: itoshi Date: Wed, 26 Nov 2025 19:37:26 +0300 Subject: [PATCH] fix: update `preview-page` `bug fix sights` --- .../WebGLRouteMapPrototype.tsx | 122 ++++++++++++++---- src/pages/Sight/LinkedStations.tsx | 7 +- src/pages/Station/StationListPage/index.tsx | 6 +- .../SightTabs/CreateRightTab/index.tsx | 6 +- 4 files changed, 111 insertions(+), 30 deletions(-) diff --git a/src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx b/src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx index d16612d..04f6884 100644 --- a/src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx +++ b/src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx @@ -1,17 +1,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { flushSync } from "react-dom"; -import type { PointerEvent as ReactPointerEvent } from "react"; +import type { PointerEvent as ReactPointerEvent, CSSProperties } from "react"; import { observer } from "mobx-react-lite"; import { useMapData } from "../MapDataContext"; import { useTransform } from "../TransformContext"; import { coordinatesToLocal, localToCoordinates } from "../utils"; -import { - BACKGROUND_COLOR, - PATH_COLOR, - SCALE_FACTOR, - UP_SCALE, -} from "../Constants"; +import { BACKGROUND_COLOR, SCALE_FACTOR, UP_SCALE } from "../Constants"; import { languageStore } from "@shared"; import { SightData } from "../types"; @@ -360,7 +355,8 @@ const computeViewTransform = ( }; const backgroundColor = toColor(BACKGROUND_COLOR); -const pathColor = toColor(PATH_COLOR); +// Override route & station color to ED1C24 +const pathColor = toColor(0xed1c24); export const WebGLRouteMapPrototype = observer(() => { const { @@ -370,6 +366,7 @@ export const WebGLRouteMapPrototype = observer(() => { sightData, setSelectedSight, setStationOffset, + setStationAlign, setSightCoordinates, setMapCenter, } = useMapData(); @@ -440,6 +437,11 @@ export const WebGLRouteMapPrototype = observer(() => { const [liveSightPositions, setLiveSightPositions] = useState< Map >(new Map()); + type StationAlignment = "left" | "center" | "right"; + const [stationAlignments, setStationAlignments] = useState< + Map + >(new Map()); + const [hoveredStationId, setHoveredStationId] = useState(null); const lastCenterRef = useRef<{ latitude: number | null; longitude: number | null; @@ -586,6 +588,45 @@ export const WebGLRouteMapPrototype = observer(() => { }, 120); }, [cancelScheduledCenterCommit, commitCenter]); + useEffect(() => { + if (hoveredStationId == null) { + return; + } + + const handleKeyDown = (event: KeyboardEvent) => { + const key = event.key; + let nextAlignment: StationAlignment | null = null; + let alignNumber: number | null = null; + + if (key === "1") { + nextAlignment = "left"; + alignNumber = 1; + } else if (key === "2") { + nextAlignment = "center"; + alignNumber = 2; + } else if (key === "3") { + nextAlignment = "right"; + alignNumber = 3; + } + + if (!nextAlignment || alignNumber === null) { + return; + } + + setStationAlignments((prev) => { + const next = new Map(prev); + next.set(hoveredStationId, nextAlignment as StationAlignment); + return next; + }); + setStationAlign(hoveredStationId, alignNumber); + }; + + window.addEventListener("keydown", handleKeyDown); + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [hoveredStationId, setStationAlignments, setStationAlign]); + useEffect(() => { return () => { cancelScheduledCenterCommit(); @@ -1138,8 +1179,8 @@ export const WebGLRouteMapPrototype = observer(() => { const { scale, translation } = transform; - const desiredRouteWidthCss = 13; - const desiredStationDiameterCss = 30; + const desiredRouteWidthCss = 7; + const desiredStationDiameterCss = 12; const pointOuterSizePx = desiredStationDiameterCss * dpr; const pointInnerSizePx = pointOuterSizePx * 0.8; @@ -1763,9 +1804,32 @@ export const WebGLRouteMapPrototype = observer(() => { const secondaryFontSize = 13 * fontScale; const secondaryMarginTop = 5 * fontScale; + const backendAlign = station.align; + const alignmentFromData: StationAlignment = + backendAlign === 1 + ? "left" + : backendAlign === 3 + ? "right" + : "center"; + const alignment: StationAlignment = + stationAlignments.get(station.id) ?? alignmentFromData; + + const secondaryPositionStyle: CSSProperties = + alignment === "left" + ? { left: 0, transform: "none" } + : alignment === "right" + ? { right: 0, transform: "none" } + : { left: "50%", transform: "translateX(-50%)" }; + return (
setHoveredStationId(station.id)} + onMouseLeave={() => + setHoveredStationId((prev) => + prev === station.id ? null : prev + ) + } onPointerDown={(event) => handleStationPointerDown( event, @@ -1807,28 +1871,40 @@ export const WebGLRouteMapPrototype = observer(() => { >
- {station.name} -
- {showSecondary ? (
- {translatedStation?.name} + {station.name}
- ) : null} + {showSecondary ? ( +
+ {translatedStation?.name} +
+ ) : null} +
diff --git a/src/pages/Sight/LinkedStations.tsx b/src/pages/Sight/LinkedStations.tsx index 73b1afa..7a2f80a 100644 --- a/src/pages/Sight/LinkedStations.tsx +++ b/src/pages/Sight/LinkedStations.tsx @@ -505,7 +505,12 @@ const LinkedStationsContentsInner = < }} renderOption={(props, option) => (
  • - {String(option.name)} +
    +

    {String(option.name)}

    +

    + {String(option.description)} +

    +
    • )} /> diff --git a/src/pages/Station/StationListPage/index.tsx b/src/pages/Station/StationListPage/index.tsx index bbd2374..1e71e59 100644 --- a/src/pages/Station/StationListPage/index.tsx +++ b/src/pages/Station/StationListPage/index.tsx @@ -51,8 +51,8 @@ export const StationListPage = observer(() => { }, }, { - field: "system_name", - headerName: "Системное название", + field: "description", + headerName: "Описание", flex: 1, renderCell: (params: GridRenderCellParams) => { return ( @@ -130,7 +130,7 @@ export const StationListPage = observer(() => { const rows = filteredStations().map((station: any) => ({ id: station.id, name: station.name, - system_name: station.system_name, + description: station.description, direction: station.direction, })); diff --git a/src/widgets/SightTabs/CreateRightTab/index.tsx b/src/widgets/SightTabs/CreateRightTab/index.tsx index 653a738..1d7ca53 100644 --- a/src/widgets/SightTabs/CreateRightTab/index.tsx +++ b/src/widgets/SightTabs/CreateRightTab/index.tsx @@ -10,6 +10,7 @@ import { import { BackButton, createSightStore, + editSightStore, languageStore, SelectArticleModal, TabPanel, @@ -51,9 +52,6 @@ export const CreateRightTab = observer( unlinkPreviewMedia, createLinkWithRightArticle, deleteRightArticleMedia, - setFileToUpload, - setUploadMediaOpen, - uploadMediaOpen, unlinkRightAritcle, deleteRightArticle, linkExistingRightArticle, @@ -62,6 +60,8 @@ export const CreateRightTab = observer( updateRightArticles, } = createSightStore; const { language } = languageStore; + const { setFileToUpload, setUploadMediaOpen, uploadMediaOpen } = + editSightStore; const [selectArticleDialogOpen, setSelectArticleDialogOpen] = useState(false);