#673 Fix GZMTR Circle line runin station name spacing

railmapgen · Jan 28, 2025 · 439e76b · 439e76b
1 parent a979171
commit 439e76b
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 22 deletions.
diff --git a/src/svgs/gzmtr/current-station-name.tsx b/src/svgs/gzmtr/current-station-name.tsx
@@ -1,27 +1,53 @@
 import { memo, SVGProps, useEffect, useRef, useState } from 'react';
 import { Translation } from '@railmapgen/rmg-translate';
 
+const ZH_NAME_FONT_SIZE = 92;
+
+const getLetterSpacing = (zhNameCount?: number) => {
+    switch (zhNameCount) {
+        case 2:
+            return 0.2;
+        case 3:
+            return 0.1;
+        default:
+            return 0;
+    }
+};
+
 interface CurrentStationNameProps {
     stnName: Translation;
     bold?: boolean;
+    sparse?: boolean;
     onUpdate?: (bBox: SVGRect) => void;
 }
 
 export default memo(
     function CurrentStationName(props: CurrentStationNameProps) {
-        const { stnName, bold, onUpdate } = props;
+        const { stnName, bold, sparse, onUpdate } = props;
 
         const nameEl = useRef<SVGGElement | null>(null);
 
+        const letterSpacing = getLetterSpacing(stnName.zh?.length);
+
         useEffect(() => {
             if (nameEl.current && onUpdate) {
-                onUpdate(nameEl.current.getBBox());
+                const bBox = nameEl.current.getBBox();
+                onUpdate({
+                    ...bBox,
+                    x: bBox.x + (letterSpacing * ZH_NAME_FONT_SIZE) / 2,
+                    width: bBox.width - letterSpacing * ZH_NAME_FONT_SIZE,
+                });
             }
-        }, [JSON.stringify(stnName), bold]);
+        }, [nameEl.current, JSON.stringify(stnName), bold, sparse]);
 
         return (
             <g ref={nameEl} fontWeight={bold ? 'bold' : 'normal'}>
-                <text className="rmg-name__zh" fontSize={92}>
+                <text
+                    className="rmg-name__zh"
+                    fontSize={ZH_NAME_FONT_SIZE}
+                    x={letterSpacing / 2 + 'em'}
+                    letterSpacing={letterSpacing + 'em'}
+                >
                     {stnName.zh}
                 </text>
                 <g fontSize={40}>

diff --git a/src/svgs/gzmtr/info-gzmtr.tsx b/src/svgs/gzmtr/info-gzmtr.tsx
@@ -64,6 +64,7 @@ const InfoGZMTR = () => {
                     <CurrentStationName
                         stnName={localisedName}
                         bold={infoPanelType === PanelTypeGZMTR.gz11}
+                        sparse={infoPanelType === PanelTypeGZMTR.gz11}
                         onUpdate={setNameBBox}
                     />
                     {currentLocalisedSecondaryName && (

diff --git a/src/svgs/gzmtr/runin/next-via-stations.tsx b/src/svgs/gzmtr/runin/next-via-stations.tsx
@@ -1,13 +1,13 @@
 import { useRootSelector } from '../../../redux';
 import { CanvasType, ShortDirection } from '../../../constants/constants';
 import ArrowGzmtr, { ARROW_WIDTH } from '../arrow-gzmtr';
-import ViaStation from './via-station';
 import {
     COACH_NUMBER_WIDTH,
     COACH_NUMBER_X_PERCENTAGE,
     getNextViaStations,
     LOOP_NEXT_ARROW_SCALE,
 } from './runin-utils';
+import ViaStations from './via-stations';
 
 type NextViaStationsProps = {
     nameBBox: DOMRect;
@@ -42,6 +42,7 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
     const {
         localisedName: { zh: zhName = '', en: enName = '' },
     } = stationList[nextStation];
+    const enNameRows = enName.split('\\').length;
     const nameBcrX = (svgWidth - nameBBox.width) / 2;
 
     const transforms = {
@@ -51,6 +52,9 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
         nextName: {
             x: 80 + 44 * 1.7,
         },
+        via: {
+            dy: 75 + 25 * (enNameRows - 1),
+        },
         arrow: {
             x:
                 direction === ShortDirection.left
@@ -69,7 +73,7 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
 
     return (
         <>
-            <g transform={`translate(0,${svgHeight / 2 - 75})`}>
+            <g transform={`translate(0,${svgHeight / 2 + 5 - transforms.via.dy})`}>
                 <g textAnchor="middle" transform={`translate(${transforms.next.x},0)`}>
                     <g fontWeight="bold">
                         <text className="rmg-name__zh" fontSize={44}>
@@ -79,7 +83,7 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
                             Next
                         </text>
                     </g>
-                    <g transform={`translate(0,75)`}>
+                    <g transform={`translate(0,${transforms.via.dy})`}>
                         <text className="rmg-name__zh" fontSize={20}>
                             途经
                         </text>
@@ -101,14 +105,8 @@ export default function NextViaStations({ nameBBox }: NextViaStationsProps) {
                             ))}
                         </g>
                     </g>
-                    <g transform={`translate(0,75)`}>
-                        {viaStations.map((stationId, i) => (
-                            <ViaStation
-                                key={stationId}
-                                stationInfo={stationList[stationId]}
-                                transform={`translate(0,${42 * i})`}
-                            />
-                        ))}
+                    <g transform={`translate(0,${transforms.via.dy})`}>
+                        <ViaStations viaStations={viaStations} stationList={stationList} />
                     </g>
                 </g>
             </g>

diff --git a/src/svgs/gzmtr/runin/via-station.tsx b/src/svgs/gzmtr/runin/via-station.tsx
@@ -1,13 +1,13 @@
 import { StationInfo } from '../../../constants/constants';
 import { LineIcon } from '@railmapgen/svg-assets/gzmtr';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
-import { SVGProps, useEffect, useRef, useState } from 'react';
+import { forwardRef, SVGProps, useEffect, useRef, useState } from 'react';
 
 type ViaStationProps = {
     stationInfo: StationInfo;
 } & SVGProps<SVGGElement>;
 
-export default function ViaStation({ stationInfo, ...others }: ViaStationProps) {
+const ViaStation = forwardRef<SVGGElement, ViaStationProps>(function ViaStation({ stationInfo, ...others }, ref) {
     const {
         localisedName,
         transfer: {
@@ -25,14 +25,16 @@ export default function ViaStation({ stationInfo, ...others }: ViaStationProps)
     }, [nameRef.current, JSON.stringify(localisedName)]);
 
     return (
-        <g {...others}>
+        <g ref={ref} {...others}>
             <g ref={nameRef}>
                 <text className="rmg-name__zh" fontSize={20}>
                     {localisedName.zh}
                 </text>
-                <text className="rmg-name__en" fontSize={12} dy={19}>
-                    {localisedName.en}
-                </text>
+                {localisedName.en?.split('\\')?.map((text, i) => (
+                    <text key={i} className="rmg-name__en" fontSize={12} dy={19 + 12 * i}>
+                        {text}
+                    </text>
+                ))}
             </g>
             <g transform={`translate(${nameBBox.width + 2},7)`}>
                 {lines?.length && (
@@ -53,4 +55,6 @@ export default function ViaStation({ stationInfo, ...others }: ViaStationProps)
             </g>
         </g>
     );
-}
+});
+
+export default ViaStation;
diff --git a/src/svgs/gzmtr/runin/via-stations.tsx b/src/svgs/gzmtr/runin/via-stations.tsx
@@ -0,0 +1,41 @@
+import { StationInfo } from '../../../constants/constants';
+import ViaStation from './via-station';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type ViaStationsProps = {
+    viaStations: string[];
+    stationList: Record<string, StationInfo>;
+};
+
+export default function ViaStations({ viaStations, stationList }: ViaStationsProps) {
+    const stationsRef = useRef<(SVGGElement | null)[]>([]);
+    const [stationHeights, setStationHeights] = useState<number[]>([]);
+
+    useEffect(() => {
+        stationsRef.current = [];
+    }, [viaStations, stationList]);
+
+    useEffect(() => {
+        setStationHeights(stationsRef.current.map(el => el?.getBBox()?.height ?? 0));
+    }, [stationsRef.current]);
+
+    const getHeightsUpTo = useCallback(
+        (index: number) => {
+            return stationHeights.slice(0, index).reduce((sum, x) => sum + x + 4, 0);
+        },
+        [stationHeights]
+    );
+
+    return (
+        <>
+            {viaStations.map((stationId, i) => (
+                <ViaStation
+                    key={stationId}
+                    ref={el => (stationsRef.current[i] = el)}
+                    stationInfo={stationList[stationId]}
+                    transform={`translate(0,${getHeightsUpTo(i)})`}
+                />
+            ))}
+        </>
+    );
+}