#763 Support switching PSD label in GZMTR style

.gitignore

@@ -6,7 +6,7 @@
 .pnp.js
 
 # testing
-/coverage
+coverage/
 
 # production
 /build

package.json

@@ -29,7 +29,6 @@
         "react-router-dom": "^7.9.6"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.39.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
@@ -40,6 +39,7 @@
         "@types/react-router-dom": "^5.3.3",
         "@vitejs/plugin-legacy": "^7.2.1",
         "@vitejs/plugin-react": "^5.1.1",
+        "@vitest/coverage-v8": "^4.0.10",
         "eslint": "^9.39.1",
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "^7.37.5",
@@ -54,10 +54,10 @@
     "scripts": {
         "dev": "vite --host",
         "build": "tsc && vite build",
-        "test": "vitest",
+        "test": "vitest run --coverage",
         "lint": "eslint ./src",
         "lint:fix": "eslint ./src --fix",
         "preview": "vite preview"
     },
-    "version": "5.20.11"
+    "version": "5.21.0-0"
 }

src/components/side-panel/style-side-panel/design-section.tsx

@@ -11,13 +11,14 @@ import {
     setLineNum,
     setPanelType,
     setPlatform,
+    setPsdLabel,
     setPsdNum,
     setSpanLineNum,
     setTheme,
     staggerStationNames,
     toggleLineNameBeforeDestination,
 } from '../../../redux/param/param-slice';
-import { PanelTypeGZMTR, PanelTypeShmetro, RmgStyle, ShortDirection } from '../../../constants/constants';
+import { PanelTypeGZMTR, PanelTypeShmetro, PsdLabel, RmgStyle, ShortDirection } from '../../../constants/constants';
 import { MdSwapVert } from 'react-icons/md';
 import { RmgButtonGroup, RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import { useTranslation } from 'react-i18next';
@@ -37,6 +38,7 @@ export default function DesignSection() {
         direction,
         platform_num: platformNum,
         psd_num: psdNum,
+        psdLabel,
         coachNum,
         namePosMTR,
         customiseMTRDest,
@@ -149,6 +151,22 @@ export default function DesignSection() {
             onChange: value => dispatch(setPsdNum(value)),
             hidden: ![RmgStyle.GZMTR].includes(style),
         },
+        {
+            type: 'custom',
+            label: t('Platform door label'),
+            component: (
+                <RmgButtonGroup
+                    selections={[
+                        { label: '屏蔽门 Screen door', value: PsdLabel.screen },
+                        { label: '站台门 Platform door', value: PsdLabel.platform },
+                    ]}
+                    defaultValue={psdLabel}
+                    onChange={label => dispatch(setPsdLabel(label))}
+                />
+            ),
+            hidden: ![RmgStyle.GZMTR].includes(style),
+            minW: 260,
+        },
         {
             type: 'input',
             label: t('Coach number'),

src/constants/constants.ts

@@ -52,6 +52,11 @@ export enum ShortDirection {
     right = 'r',
 }
 
+export enum PsdLabel {
+    screen = 'screen',
+    platform = 'platform',
+}
+
 export enum BranchStyle {
     through = 'through',
     nonThrough = 'nonthrough',
@@ -252,6 +257,7 @@ export interface RMGParam {
     line_num: string;
     spanLineNum?: boolean;
     psd_num: string;
+    psdLabel: PsdLabel;
     coachNum: string;
     info_panel_type: PanelTypeGZMTR | PanelTypeShmetro;
     notesGZMTR?: Note[];

src/i18n/translations/zh-Hans.json

@@ -275,6 +275,7 @@
     "Open selected": "打开选中项目",
     "Open template": "打开模板",
     "Paid area": "付费区换乘",
+    "Platform door label": "站台门标签",
     "Project": "项目",
     "Project selected is invalid or corrupted.": "选中的项目无效或已损坏。",
     "Project Selector": "项目选择器",

src/i18n/translations/zh-Hant.json

@@ -267,6 +267,7 @@
     "Open selected": "開啟所選專案",
     "Open template": "開啟範本",
     "Paid area": "付費區轉車",
+    "Platform door label": "幕門標籤",
     "Project": "專案",
     "Project selected is invalid or corrupted.": "所選專案無效或者已損壞。",
     "Project Selector": "專案選擇器",

src/redux/param/param-slice.ts

@@ -5,6 +5,7 @@ import {
     Note,
     PanelTypeGZMTR,
     PanelTypeShmetro,
+    PsdLabel,
     RMGParam,
     RmgStyle,
     ShortDirection,
@@ -84,6 +85,10 @@ const paramSlice = createSlice({
             state.psd_num = action.payload;
         },
 
+        setPsdLabel: (state, action: PayloadAction<PsdLabel>) => {
+            state.psdLabel = action.payload;
+        },
+
         setCoachNum: (state, action: PayloadAction<string>) => {
             state.coachNum = action.payload;
         },
@@ -190,6 +195,7 @@ export const {
     setLineNum,
     setSpanLineNum,
     setPsdNum,
+    setPsdLabel,
     setCoachNum,
     setPanelType,
     addNote,

src/redux/param/util.ts

@@ -2,6 +2,7 @@ import {
     Name,
     PanelTypeGZMTR,
     PanelTypeShmetro,
+    PsdLabel,
     RMGParam,
     RmgStyle,
     Services,
@@ -115,6 +116,7 @@ export const initParam = (style: RmgStyle, language: LanguageCode): RMGParam =>
         line_num: '1',
         spanLineNum: true,
         psd_num: '1',
+        psdLabel: PsdLabel.platform,
         coachNum: '1',
         info_panel_type: style === RmgStyle.SHMetro ? PanelTypeShmetro.sh : PanelTypeGZMTR.gz1,
         direction_gz_x: 40,

src/svgs/gzmtr/psd-number.tsx

@@ -1,22 +1,23 @@
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import { SVGProps } from 'react';
+import { PsdLabel } from '../../constants/constants';
 
 interface PsdNumberProps extends SVGProps<SVGGElement> {
     num: string;
+    psdLabel: PsdLabel;
     inStrip?: boolean;
-    showAsPlatformDoor?: boolean;
 }
 
 export default function PsdNumber(props: PsdNumberProps) {
-    const { num, inStrip, showAsPlatformDoor, ...others } = props;
+    const { num, psdLabel, inStrip, ...others } = props;
 
     return (
         <g textAnchor="middle" fill={inStrip ? MonoColour.black : 'var(--rmg-theme-fg)'} {...others}>
             <rect height={40} width={40} rx={4} x={-20} fill={inStrip ? '#fff' : 'var(--rmg-theme-colour)'} />
             <text className="rmg-name__en" fontSize={20} dy={12}>
                 {num}
             </text>
-            {showAsPlatformDoor ? (
+            {psdLabel === PsdLabel.platform ? (
                 <>
                     <text className="rmg-name__zh" fontSize={11} dy={26}>
                         站台门

src/svgs/gzmtr/rail-map/railmap-gzmtr.tsx

@@ -17,6 +17,7 @@ const RailMapGZMTR = () => {
         svg_height: svgHeight,
         direction,
         psd_num: psdNumber,
+        psdLabel,
         info_panel_type: infoPanelType,
         notesGZMTR: notes,
         current_stn_idx: currentStationIndex,
@@ -42,6 +43,7 @@ const RailMapGZMTR = () => {
                 variant={infoPanelType}
                 isShowLight={infoPanelType === PanelTypeGZMTR.gz2otis}
                 isShowPSD={infoPanelType === PanelTypeGZMTR.gz2otis && psdNumber}
+                psdLabel={psdLabel}
             />
 
             {!loop &&

src/svgs/gzmtr/runin/runin-gzmtr.tsx

@@ -19,6 +19,7 @@ export default function RunInGZMTR() {
         info_panel_type: infoPanelType,
         platform_num: platformNumber,
         psd_num: psdNumber,
+        psdLabel,
         coachNum,
         theme,
     } = useRootSelector(store => store.param);
@@ -42,6 +43,7 @@ export default function RunInGZMTR() {
                 variant={infoPanelType}
                 isShowLight={infoPanelType !== PanelTypeGZMTR.gz2otis}
                 isShowPSD={infoPanelType !== PanelTypeGZMTR.gz2otis && psdNumber}
+                psdLabel={psdLabel}
             />
 
             <g transform={infoPanelType === PanelTypeGZMTR.gz2otis ? otisTransforms.platform : ''}>

src/svgs/gzmtr/strip-gzmtr.tsx

@@ -1,11 +1,12 @@
-import { PanelTypeGZMTR, PanelTypeShmetro } from '../../constants/constants';
+import { PanelTypeGZMTR, PanelTypeShmetro, PsdLabel } from '../../constants/constants';
 import PsdNumber from './psd-number';
 import { memo, useMemo } from 'react';
 
 interface Props {
     variant: PanelTypeGZMTR | PanelTypeShmetro;
     isShowLight: boolean;
     isShowPSD: false | string;
+    psdLabel: PsdLabel;
 }
 
 const StripGZMTR = (props: Props) => {
@@ -132,8 +133,8 @@ const PSD = memo(
         return (
             <PsdNumber
                 num={props.isShowPSD as string}
+                psdLabel={props.psdLabel}
                 inStrip={isInStrip}
-                showAsPlatformDoor={props.variant === PanelTypeGZMTR.gz11}
                 style={{
                     ['--psd-dy' as any]: psdDy,
                     transform: 'translate(var(--translate-x), var(--translate-y))scale(var(--scale))',
@@ -146,5 +147,8 @@ const PSD = memo(
             />
         );
     },
-    (prevProps, nextProps) => prevProps.variant === nextProps.variant && prevProps.isShowPSD === nextProps.isShowPSD
+    (prevProps, nextProps) =>
+        prevProps.variant === nextProps.variant &&
+        prevProps.isShowPSD === nextProps.isShowPSD &&
+        prevProps.psdLabel === nextProps.psdLabel
 );

src/util/param-updater-utils.ts

@@ -1,7 +1,16 @@
 import { MonoColour, Theme, updateTheme } from '@railmapgen/rmg-palette-resources';
 import rmgRuntime, { logger } from '@railmapgen/rmg-runtime';
 import { nanoid } from 'nanoid';
-import { CanvasType, InterchangeGroup, Name, Note, RMGParam, RmgStyle, StationInfo } from '../constants/constants';
+import {
+    CanvasType,
+    InterchangeGroup,
+    Name,
+    Note,
+    PsdLabel,
+    RMGParam,
+    RmgStyle,
+    StationInfo,
+} from '../constants/constants';
 
 export const updateParam = (param: { [x: string]: any }) => {
     // Version 0.10
@@ -252,6 +261,7 @@ export const updateParam = (param: { [x: string]: any }) => {
     v5_10_updateInterchangeGroup(param);
     v5_17_updateLocalisedName(param);
     v5_18_addStationNameSpacingAndSvgWidthPlatform(param);
+    v5_21_addPsdLabel(param);
 
     sanitiseParam(param);
     return param;
@@ -312,6 +322,12 @@ export const v5_18_addStationNameSpacingAndSvgWidthPlatform = (param: Record<str
     }
 };
 
+export const v5_21_addPsdLabel = (param: Record<string, any>) => {
+    if (!('psdLabel' in param)) {
+        param.psdLabel = PsdLabel.screen;
+    }
+};
+
 interface MatchedThemeWithPaths {
     path: string;
     value: Theme;

vite.config.mts

@@ -1,24 +1,23 @@
-/// <reference types="vitest/config" />
-
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import legacy from '@vitejs/plugin-legacy';
+import { coverageConfigDefaults } from 'vitest/config';
 
 // https://vitejs.dev/config
 export default defineConfig({
     base: '/rmg/',
-    plugins: [
-        react(),
-        legacy({
-            targets: ['defaults', '>0.2%', 'not dead'],
-            modernPolyfills: true,
-        }),
-    ],
+    plugins: [react()],
     build: {
         rollupOptions: {
             output: {
                 manualChunks: {
-                    react: ['react', 'react-dom', 'react-router-dom', '@reduxjs/toolkit', 'react-redux', 'react-i18next'],
+                    react: [
+                        'react',
+                        'react-dom',
+                        'react-router-dom',
+                        '@reduxjs/toolkit',
+                        'react-redux',
+                        'react-i18next',
+                    ],
                     chakra: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion', 'react-icons'],
                     'ag-grid-community': ['ag-grid-community'],
                     'ag-grid-react': ['ag-grid-react'],
@@ -39,11 +38,11 @@ export default defineConfig({
         globals: true,
         environment: 'jsdom',
         setupFiles: './src/setupTests.ts',
-        server: {
-            deps: {
-                fallbackCJS: false,
-            },
-        },
         watch: false,
+        coverage: {
+            provider: 'v8',
+            exclude: coverageConfigDefaults.exclude,
+            skipFull: true,
+        },
     },
 });