railmapgen · wongchito · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="robots" content="noindex" />
         <meta name="description" content="Rail Map Generator" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,18 +7,18 @@
     },
     "license": "GPL-3.0-only",
     "dependencies": {
-        "@chakra-ui/react": "2.10.4",
+        "@chakra-ui/react": "2.10.5",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@railmapgen/rmg-components": "^10.1.9",
         "@railmapgen/rmg-palette-resources": "^2.2.5",
         "@railmapgen/rmg-runtime": "^10.3.2",
         "@railmapgen/rmg-translate": "^3.2.3",
         "@railmapgen/svg-assets": "^5.0.12",
-        "@reduxjs/toolkit": "^2.5.0",
+        "@reduxjs/toolkit": "^2.5.1",
         "ag-grid-community": "^33.0.4",
         "ag-grid-react": "^33.0.4",
-        "framer-motion": "^11.18.1",
+        "framer-motion": "^11.18.2",
         "jszip": "^3.10.1",
         "nanoid": "^5.0.9",
         "react": "^18.3.1",
@@ -46,7 +46,7 @@
         "prettier": "^3.4.2",
         "terser": "^5.37.0",
         "typescript": "^5.7.3",
-        "typescript-eslint": "^8.21.0",
+        "typescript-eslint": "^8.22.0",
         "vite": "^6.0.11",
         "vitest": "^3.0.4"
     },

diff --git a/src/components/ag-grid/station-ag-grid.tsx b/src/components/ag-grid/station-ag-grid.tsx
@@ -7,16 +7,16 @@ import {
     ColDef,
     ModuleRegistry,
     provideGlobalGridOptions,
+    RowSelectionOptions,
     SelectionChangedEvent,
 } from 'ag-grid-community';
-import { RmgStyle, SidePanelMode, StationInfo, StationTransfer } from '../../constants/constants';
+import { RmgStyle, SidePanelMode, StationInfo } from '../../constants/constants';
 import { useTranslation } from 'react-i18next';
 import { HStack } from '@chakra-ui/react';
 import { setIsShareTrackEnabled, setSelectedStation, setSidePanelMode } from '../../redux/app/app-slice';
 import { getRowSpanForColine } from '../../redux/param/coline-action';
 import GzmtrStationCode from './gzmtr-station-code';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
-import { Translation } from '@railmapgen/rmg-translate';
 
 // Register all community features
 ModuleRegistry.registerModules([AllCommunityModule]);
@@ -30,6 +30,12 @@ interface StationAgGridProps {
 
 type RowDataType = StationInfo & { id: string; rowSpan: [number, string | undefined] };
 
+const rowSelection: RowSelectionOptions = {
+    mode: 'singleRow',
+    checkboxes: false,
+    enableClickSelection: true,
+};
+
 export default function StationAgGrid(props: StationAgGridProps) {
     const { branchIndex } = props;
     const { t, i18n } = useTranslation();
@@ -75,19 +81,19 @@ export default function StationAgGrid(props: StationAgGridProps) {
                 field: 'localisedName',
                 valueFormatter: ({ value, data }) =>
                     value.zh +
-                    (style === RmgStyle.GZMTR && data?.currentLocalisedSecondaryName?.zh
-                        ? ` (${data.currentLocalisedSecondaryName.zh})`
+                    (style === RmgStyle.GZMTR && data?.localisedSecondaryName?.zh
+                        ? ` (${data.localisedSecondaryName.zh})`
                         : ''),
             },
             {
                 headerName: t('English name'),
-                field: 'localisedName',
-                cellRenderer: ({ value, data }: { value: Translation; data: RowDataType }) => (
+                // field: 'localisedName',
+                cellRenderer: ({ data }: { data: RowDataType }) => (
                     <RmgMultiLineString
                         text={
-                            value.en +
-                            (style === RmgStyle.GZMTR && data.currentLocalisedSecondaryName?.en
-                                ? ` (${data.currentLocalisedSecondaryName.en})`
+                            data.localisedName.en +
+                            (style === RmgStyle.GZMTR && data.localisedSecondaryName?.en
+                                ? ` (${data.localisedSecondaryName.en})`
                                 : '')
                         }
                     />
@@ -96,10 +102,10 @@ export default function StationAgGrid(props: StationAgGridProps) {
             },
             {
                 headerName: t('StationAgGrid.interchange'),
-                field: 'transfer',
-                cellRenderer: ({ value }: { value: StationTransfer }) => (
+                // field: 'transfer',
+                cellRenderer: ({ data }: { data: RowDataType }) => (
                     <HStack>
-                        {value.groups
+                        {data.transfer.groups
                             .map(group => group.lines ?? [])
                             .flat()
                             .map((it, i) => (
@@ -116,14 +122,14 @@ export default function StationAgGrid(props: StationAgGridProps) {
             },
             {
                 headerName: t('StationAgGrid.coline'),
-                field: 'rowSpan',
+                // field: 'rowSpan',
                 rowSpan: ({ data }) => data?.rowSpan[0] ?? 0,
                 cellClassRules: {
-                    'rmg-ag-grid--spanned-cell': ({ value }) => value[0] > 0,
+                    'rmg-ag-grid--spanned-cell': ({ data }) => !!data && data.rowSpan[0] > 0,
                 },
-                cellRenderer: ({ value }: { value: RowDataType['rowSpan'] }) => (
+                cellRenderer: ({ data }: { data: RowDataType }) => (
                     <HStack>
-                        {coline[value[1] as string]?.colors?.map((it, i) => (
+                        {coline[data.rowSpan[1] as string]?.colors?.map((it, i) => (
                             <RmgLineBadge key={i} name={[it[4], it[5]]} bg={it[2]} fg={it[3]} showShortName />
                         ))}
                     </HStack>
@@ -182,7 +188,7 @@ export default function StationAgGrid(props: StationAgGridProps) {
                 suppressCellFocus={true}
                 suppressMovableColumns={true}
                 suppressRowTransform={true}
-                rowSelection={'single'}
+                rowSelection={rowSelection}
                 onSelectionChanged={handleSelectionChanged}
                 onGridReady={handleGridReady}
                 debug={import.meta.env.DEV}

diff --git a/src/components/side-panel/station-side-panel/info-section.tsx b/src/components/side-panel/station-side-panel/info-section.tsx
@@ -17,7 +17,7 @@ export default function InfoSection() {
     const selectedStation = useRootSelector(state => state.app.selectedStation);
     console.log('InfoSection:: Rendering for', selectedStation);
     const style = useRootSelector(state => state.param.style);
-    const { num, localisedName, currentLocalisedSecondaryName } = useRootSelector(
+    const { num, localisedName, localisedSecondaryName } = useRootSelector(
         state => state.param.stn_list[selectedStation]
     );
 
@@ -53,7 +53,7 @@ export default function InfoSection() {
                             { label: t('No'), value: false },
                         ] as { label: string; value: boolean }[]
                     }
-                    defaultValue={!!currentLocalisedSecondaryName}
+                    defaultValue={!!localisedSecondaryName}
                     onChange={flag => dispatch(toggleStationSecondaryName(selectedStation, flag))}
                 />
             ),
@@ -62,18 +62,18 @@ export default function InfoSection() {
         {
             type: 'input',
             label: t('StationSidePanel.info.zhSecondary'),
-            value: currentLocalisedSecondaryName?.zh ?? '',
+            value: localisedSecondaryName?.zh ?? '',
             placeholder: '1号航站楼',
             onChange: (value: string) => dispatch(updateStationSecondaryName(selectedStation, 'zh', value)),
-            hidden: !currentLocalisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
+            hidden: !localisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
         },
         {
             type: 'input',
             label: t('StationSidePanel.info.enSecondary'),
-            value: currentLocalisedSecondaryName?.en ?? '',
+            value: localisedSecondaryName?.en ?? '',
             placeholder: 'Terminal 1',
             onChange: (value: string) => dispatch(updateStationSecondaryName(selectedStation, 'en', value)),
-            hidden: !currentLocalisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
+            hidden: !localisedSecondaryName || ![RmgStyle.GZMTR].includes(style),
         },
     ];
 

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -120,7 +120,7 @@ export interface StationInfo {
     // name?: Name;
     // secondaryName?: Name;
     localisedName: Translation;
-    currentLocalisedSecondaryName?: Translation;
+    localisedSecondaryName?: Translation;
     /**
      * Station number. (GZMTR specific)
      */

diff --git a/src/redux/param/action.ts b/src/redux/param/action.ts
@@ -195,9 +195,9 @@ export const updateStationName = (stationId: string, lang: LanguageCode, value:
 
 export const toggleStationSecondaryName = (stationId: string, flag: boolean) => {
     return (dispatch: RootDispatch, getState: () => RootState) => {
-        const { currentLocalisedSecondaryName, ...stationInfo } = getState().param.stn_list[stationId];
+        const { localisedSecondaryName, ...stationInfo } = getState().param.stn_list[stationId];
         if (flag) {
-            dispatch(setStation(stationId, { ...stationInfo, currentLocalisedSecondaryName: {} }));
+            dispatch(setStation(stationId, { ...stationInfo, localisedSecondaryName: {} }));
         } else {
             dispatch(setStation(stationId, stationInfo));
         }
@@ -210,7 +210,7 @@ export const updateStationSecondaryName = (stationId: string, lang: LanguageCode
         dispatch(
             setStation(stationId, {
                 ...stationInfo,
-                currentLocalisedSecondaryName: { ...stationInfo.currentLocalisedSecondaryName, [lang]: value },
+                localisedSecondaryName: { ...stationInfo.localisedSecondaryName, [lang]: value },
             })
         );
     };

diff --git a/src/svgs/gzmtr/info-gzmtr.tsx b/src/svgs/gzmtr/info-gzmtr.tsx
@@ -20,7 +20,7 @@ const InfoGZMTR = () => {
         stn_list: stationList,
     } = useRootSelector(store => store.param);
     const curStnInfo = stationList[currentStationIndex];
-    const { localisedName, currentLocalisedSecondaryName } = curStnInfo;
+    const { localisedName, localisedSecondaryName } = curStnInfo;
 
     const [nameBBox, setNameBBox] = useState({ width: 0 } as SVGRect);
 
@@ -38,22 +38,22 @@ const InfoGZMTR = () => {
     const transforms = {
         nameGroup: {
             x: svgWidths.runin / 2,
-            y: 0.5 * svgHeight - 50 - (enNameRows - 1) * 18 - (currentLocalisedSecondaryName ? 29 : 0),
+            y: 0.5 * svgHeight - 50 - (enNameRows - 1) * 18 - (localisedSecondaryName ? 29 : 0),
         },
         secondaryName: {
             x: 0,
             y: 70 + enNameRows * 36,
         },
         stationNumber: {
             x: stationNumberX,
-            y: 0.5 * svgHeight - 30 - (enNameRows - 1) * 18 - (currentLocalisedSecondaryName ? 58 / 2 : 0),
+            y: 0.5 * svgHeight - 30 - (enNameRows - 1) * 18 - (localisedSecondaryName ? 58 / 2 : 0),
         },
         stationNumberPost2022: {
             x:
                 direction === ShortDirection.left
                     ? stationNumberX
                     : (svgWidths[CanvasType.RunIn] - nameBBox.width) / 2 - NAME_NUM_GAP,
-            y: 0.5 * svgHeight - (enNameRows - 2) * 18 - (currentLocalisedSecondaryName ? 58 / 2 : 0),
+            y: 0.5 * svgHeight - (enNameRows - 2) * 18 - (localisedSecondaryName ? 58 / 2 : 0),
         },
     };
 
@@ -67,9 +67,9 @@ const InfoGZMTR = () => {
                         sparse={infoPanelType === PanelTypeGZMTR.gz11}
                         onUpdate={setNameBBox}
                     />
-                    {currentLocalisedSecondaryName && (
+                    {localisedSecondaryName && (
                         <CurrentStationSecondaryName
-                            secondaryName={currentLocalisedSecondaryName}
+                            secondaryName={localisedSecondaryName}
                             transform={`translate(${transforms.secondaryName.x},${transforms.secondaryName.y})`}
                         />
                     )}

diff --git a/src/svgs/gzmtr/runin/next-station.tsx b/src/svgs/gzmtr/runin/next-station.tsx
@@ -17,7 +17,7 @@ type NextStationProps = {
 export default function NextStation({ nextId, nameBBox, ignoreNumWidth }: NextStationProps) {
     const { svgWidth: svgWidths, svg_height: svgHeight, direction } = useRootSelector(store => store.param);
     const nextInfo = useRootSelector(store => store.param.stn_list[nextId]);
-    const { localisedName, currentLocalisedSecondaryName } = nextInfo;
+    const { localisedName, localisedSecondaryName } = nextInfo;
     const { zh: zhName = '', en: enName = '' } = localisedName;
     const svgWidth = svgWidths[CanvasType.RunIn];
 
@@ -84,10 +84,10 @@ export default function NextStation({ nextId, nameBBox, ignoreNumWidth }: NextSt
                         ))}
                     </g>
                 </g>
-                {currentLocalisedSecondaryName && (
+                {localisedSecondaryName && (
                     <g textAnchor="middle" transform={`translate(${transforms.nextName.x},0)`}>
                         <NextStationSecondary
-                            secName={currentLocalisedSecondaryName}
+                            secName={localisedSecondaryName}
                             transform={`translate(${nextBBox.width / 2},${30 + enName.split('\\').length * 17 + 5})`}
                         />
                     </g>

diff --git a/src/svgs/gzmtr/runin/next-via-stations.tsx b/src/svgs/gzmtr/runin/next-via-stations.tsx
@@ -40,7 +40,7 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
 
     const {
         localisedName: { en: currentEnName = '' },
-        currentLocalisedSecondaryName,
+        localisedSecondaryName,
     } = stationList[currentStation];
     const {
         localisedName: { zh: zhName = '', en: enName = '' },
@@ -66,10 +66,7 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
                           (svgWidth * COACH_NUMBER_X_PERCENTAGE - COACH_NUMBER_WIDTH / 2)) /
                           2 +
                       (ARROW_WIDTH * LOOP_NEXT_ARROW_SCALE) / 2,
-            y:
-                0.5 * svgHeight -
-                (currentEnName.split('\\').length - 2) * 18 -
-                (currentLocalisedSecondaryName ? 58 / 2 : 0),
+            y: 0.5 * svgHeight - (currentEnName.split('\\').length - 2) * 18 - (localisedSecondaryName ? 58 / 2 : 0),
             rotate: direction === ShortDirection.left ? 0 : 180,
         },
     };

diff --git a/src/svgs/gzmtr/station.tsx b/src/svgs/gzmtr/station.tsx
@@ -32,7 +32,7 @@ export default function Station(props: Props) {
         if (stationNameEl.current) {
             setNameBBox(stationNameEl.current.getBBox());
         }
-    }, [stationNameEl.current, stnY, stnInfo.localisedName, stnInfo.currentLocalisedSecondaryName, stnInfo.services]);
+    }, [stationNameEl.current, stnY, stnInfo.localisedName, stnInfo.localisedSecondaryName, stnInfo.services]);
 
     const isNameShift = stnInfo.parents.length === 2 || stnInfo.children.length === 2;
     const tickRotation =
@@ -89,7 +89,7 @@ export default function Station(props: Props) {
             <g ref={stationNameEl} transform={`translate(${-nameDX},0)`}>
                 <StationNameWrapper
                     primaryName={stnInfo.localisedName}
-                    secondaryName={stnInfo.currentLocalisedSecondaryName}
+                    secondaryName={stnInfo.localisedSecondaryName}
                     stationState={stnState}
                     flipped={tickRotation === 180}
                     express={stnInfo.services.includes(Services.express)}