Unnamed2964 · Feb 22, 2026 · Feb 22, 2026 · Mar 5, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/src/components/side-panel/style-side-panel/design-section.tsx b/src/components/side-panel/style-side-panel/design-section.tsx
@@ -16,6 +16,7 @@ import {
     setTheme,
     staggerStationNames,
     toggleLineNameBeforeDestination,
+    setShmetro2020BranchDistanceFactor,
 } from '../../../redux/param/param-slice';
 import {
     FALSE,
@@ -60,6 +61,7 @@ export default function DesignSection() {
         info_panel_type,
         stn_list,
         loop,
+        branch_info: { distance_factor: branchDistanceFactor },
     } = useRootSelector(state => state.param);
 
     const lineServices = Math.max(...Object.values(stn_list).map(s => s.services.length));
@@ -109,6 +111,18 @@ export default function DesignSection() {
             label: t('StyleSidePanel.design.downward'),
             value: FALSE,
         },
+        {
+            type: 'slider',
+            label: t('StyleSidePanel.design.branchDistanceFactor'),
+            value: branchDistanceFactor,
+            min: 1,
+            max: 3,
+            step: 0.05,
+            onChange: value => {
+                dispatch(setShmetro2020BranchDistanceFactor(value));
+            },
+            hidden: ![RmgStyle.SHMetro].includes(style) || info_panel_type !== 'sh2020' || loop,
+        },
     ];
 
     const staggerNameSelections = [

diff --git a/src/components/side-panel/style-side-panel/layout-section.tsx b/src/components/side-panel/style-side-panel/layout-section.tsx
@@ -32,7 +32,7 @@ export default function LayoutSection() {
         svgWidth,
         svg_height,
         y_pc,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         padding,
         direction_gz_x,
         direction_gz_y,

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -219,10 +219,16 @@ export interface RMGParam {
      * Left and right margin of line (in percentage).
      */
     padding: number;
-    /** Branch spacing percentage (space between upper and lower branch).
-     *  In SHMetro loop line, this is also used in determining vertical padding.
-     */
-    branchSpacingPct: number;
+    branch_info: {
+        /** Branch spacing percentage (space between upper and lower branch).
+         *  In SHMetro loop line, this is also used in determining vertical padding.
+         */
+        spacing_pct: number;
+        /**
+         * Factor for the horizontal distance from bifurcation point to first branch station.
+         */
+        distance_factor: number;
+    };
     direction: ShortDirection;
     /**
      * Platform number of the destination canvas. Set to '' will hide the element.

diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -93,7 +93,8 @@
             "legacyDestination": "Display line name on direction sign",
             "overrideTerminal": "Override terminal",
             "terminalZhName": "Terminal Chinese name",
-            "terminalEnName": "Terminal English name"
+            "terminalEnName": "Terminal English name",
+            "branchDistanceFactor": "Branch horizontal distance factor"
         },
         "note": {
             "title": "Notes",

diff --git a/src/i18n/translations/ja.json b/src/i18n/translations/ja.json
@@ -91,7 +91,8 @@
             "legacyDestination": "終着駅表示板に路線名を表示",
             "overrideTerminal": "終着駅を上書き",
             "terminalZhName": "終着駅の日本語名",
-            "terminalEnName": "終着駅の英語名"
+            "terminalEnName": "終着駅の英語名",
+            "branchDistanceFactor": "分岐水平距離倍率"
         },
         "note": {
             "title": "備考",

diff --git a/src/i18n/translations/ko.json b/src/i18n/translations/ko.json
@@ -90,7 +90,8 @@
             "legacyDestination": "터미널에 경로 명칭 표시",
             "overrideTerminal": "끝점 다시 쓰기",
             "terminalZhName": "터미널 한자 명칭",
-            "terminalEnName": "터미널 영문 명칭"
+            "terminalEnName": "터미널 영문 명칭",
+            "branchDistanceFactor": "분기 수평 거리 배수"
         },
         "note": {
             "title": "설명",

diff --git a/src/i18n/translations/zh-Hans.json b/src/i18n/translations/zh-Hans.json
@@ -91,7 +91,8 @@
             "legacyDestination": "在终点站牌显示路线名称",
             "overrideTerminal": "重写终点站",
             "terminalZhName": "终点站中文名称",
-            "terminalEnName": "终点站英文名称"
+            "terminalEnName": "终点站英文名称",
+            "branchDistanceFactor": "分支水平间距倍数"
         },
         "note": {
             "title": "备注",

diff --git a/src/i18n/translations/zh-Hant.json b/src/i18n/translations/zh-Hant.json
@@ -87,7 +87,8 @@
             "legacyDestination": "於終點站牌顯示路綫名稱",
             "overrideTerminal": "覆寫終點站",
             "terminalZhName": "終點站中文名稱",
-            "terminalEnName": "終點站英文名稱"
+            "terminalEnName": "終點站英文名稱",
+            "branchDistanceFactor": "分支水平間距倍數"
         },
         "note": {
             "title": "備註",

diff --git a/src/redux/param/param-slice.ts b/src/redux/param/param-slice.ts
@@ -42,7 +42,7 @@ const paramSlice = createSlice({
         },
 
         setBranchSpacingPct: (state, action: PayloadAction<number>) => {
-            state.branchSpacingPct = action.payload;
+            state.branch_info.spacing_pct = action.payload;
         },
 
         setPaddingPercentage: (state, action: PayloadAction<number>) => {
@@ -159,6 +159,10 @@ const paramSlice = createSlice({
             state.loop_info.clockwise = action.payload;
         },
 
+        setShmetro2020BranchDistanceFactor: (state, action: PayloadAction<number>) => {
+            state.branch_info.distance_factor = action.payload;
+        },
+
         setCurrentStation: (state, action: PayloadAction<string>) => {
             state.current_stn_idx = action.payload;
         },
@@ -211,6 +215,7 @@ export const {
     setLoopBottomFactor,
     setLoopMidpointStation,
     setLoopClockwise,
+    setShmetro2020BranchDistanceFactor,
     setCurrentStation,
     setStation,
     setStations,

diff --git a/src/redux/param/util.ts b/src/redux/param/util.ts
@@ -93,7 +93,10 @@ export const initParam = (style: RmgStyle, language: LanguageCode): RMGParam =>
         style: style,
         y_pc: 50,
         padding: 10,
-        branchSpacingPct: 33,
+        branch_info: {
+            spacing_pct: 33,
+            distance_factor: 1,
+        },
         direction: ShortDirection.left,
         platform_num: '1',
         theme: initTheme(style),

diff --git a/src/svgs/gzmtr/main-gzmtr.tsx b/src/svgs/gzmtr/main-gzmtr.tsx
@@ -82,7 +82,7 @@ const MainGZMTR = () => {
         svg_height: svgH,
         y_pc: yPercentage,
         padding: paddingPercentage,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         direction,
         line_name: lineName,
         spanLineNum,

diff --git a/src/svgs/gzmtr/rail-map/loop-main.tsx b/src/svgs/gzmtr/rail-map/loop-main.tsx
@@ -14,7 +14,7 @@ export default function LoopMain() {
         svg_height: svgH,
         y_pc: yPercentage,
         padding: paddingPercentage,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         current_stn_idx: currentStation,
         loop_info: { midpoint_station: midpointStation, clockwise },
     } = useRootSelector(store => store.param);

diff --git a/src/svgs/mtr/main-mtr.tsx b/src/svgs/mtr/main-mtr.tsx
@@ -26,7 +26,7 @@ const MainMTR = () => {
         svg_height: svgH,
         y_pc: yPercentage,
         padding: paddingPercentage,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         direction,
         namePosMTR: namePosition,
         current_stn_idx: currentStationIndex,

diff --git a/src/svgs/shmetro/coline-shmetro.tsx b/src/svgs/shmetro/coline-shmetro.tsx
@@ -35,7 +35,7 @@ export const ColineSHMetro = (props: Props) => {
         direction,
         stn_list,
         current_stn_idx,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         info_panel_type,
         coline: colineInfo,
     } = useRootSelector(store => store.param);

diff --git a/src/svgs/shmetro/indoor/indoor-shmetro.tsx b/src/svgs/shmetro/indoor/indoor-shmetro.tsx
@@ -106,7 +106,7 @@ const IndoorSHMetro = () => {
 
     const yShares = useMemo(() => StationsSHMetro.getYShares(param.stn_list), [deps]);
     const ys = Object.keys(yShares).reduce(
-        (acc, cur) => ({ ...acc, [cur]: (yShares[cur] * param.branchSpacingPct * param.svg_height) / 200 }),
+        (acc, cur) => ({ ...acc, [cur]: (yShares[cur] * param.branch_info.spacing_pct * param.svg_height) / 200 }),
         {} as typeof yShares
     );
 
@@ -137,7 +137,7 @@ const IndoorSHMetro = () => {
         lineXs,
         xs,
         ys,
-        (param.branchSpacingPct * param.svg_height) / 200,
+        (param.branch_info.spacing_pct * param.svg_height) / 200,
         criticalPath,
         0
     );

diff --git a/src/svgs/shmetro/loop/loop-shmetro.tsx b/src/svgs/shmetro/loop/loop-shmetro.tsx
@@ -22,7 +22,7 @@ const LoopSHMetro = (props: { bank_angle: boolean; canvas: CanvasType.RailMap |
         svgWidth: svg_width,
         svg_height,
         padding,
-        branchSpacingPct,
+        branch_info: { spacing_pct: branchSpacingPct },
         direction,
         info_panel_type,
         stn_list,