From 0f15edc2383436dec7dd665c68caeab91fd28c7e Mon Sep 17 00:00:00 2001
From: Chito Wong <chi.to.wong@outlook.com>
Date: Tue, 6 May 2025 21:48:17 +0800
Subject: [PATCH] #734 Fix GZMTR position of line icon with long text

---
 package-lock.json             | 14 +++++++-------
 package.json                  |  2 +-
 public/styles/share_gzmtr.css |  2 +-
 src/svgs/gzmtr/main-gzmtr.tsx | 25 ++++++++++++++++++++++---
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 18c31348f..720ce7f9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
                 "@railmapgen/rmg-palette-resources": "^3.0.1",
                 "@railmapgen/rmg-runtime": "^12.0.0",
                 "@railmapgen/rmg-translate": "^3.4.1",
-                "@railmapgen/svg-assets": "^6.1.2",
+                "@railmapgen/svg-assets": "^6.1.4",
                 "@reduxjs/toolkit": "^2.7.0",
                 "ag-grid-community": "^33.2.4",
                 "ag-grid-react": "^33.2.4",
@@ -2812,9 +2812,9 @@
             "license": "GPL-3.0-only"
         },
         "node_modules/@railmapgen/svg-assets": {
-            "version": "6.1.2",
-            "resolved": "https://registry.npmjs.org/@railmapgen/svg-assets/-/svg-assets-6.1.2.tgz",
-            "integrity": "sha512-2p2AOyBiXgbB+qSQAz9hxlZ+1yOk1AscMHLmtqpLCuiDVblN5bXvz9bR52oO1jnbIPl02cD08/Utb5IL6mIdfQ==",
+            "version": "6.1.4",
+            "resolved": "https://registry.npmjs.org/@railmapgen/svg-assets/-/svg-assets-6.1.4.tgz",
+            "integrity": "sha512-mGX4bANjWY9k0B8Wu6M6K6I04CMaj/hVQWCo6d0ATMA25HP1k/D67OUzcfyiNT7yV7Ox7TnhN1mR2kvL+G/tUQ==",
             "license": "GPL-3.0-only",
             "dependencies": {
                 "@railmapgen/rmg-palette-resources": "^3.0.1"
@@ -11384,9 +11384,9 @@
             "integrity": "sha512-WliNlAv8YIF6BXLfSwFdNGIPzvoRz7KL0CYTC/eTznSnLGqNnwbGsI+MpcwnkJMaq/KpqGVRPCzqhN+eZgZkng=="
         },
         "@railmapgen/svg-assets": {
-            "version": "6.1.2",
-            "resolved": "https://registry.npmjs.org/@railmapgen/svg-assets/-/svg-assets-6.1.2.tgz",
-            "integrity": "sha512-2p2AOyBiXgbB+qSQAz9hxlZ+1yOk1AscMHLmtqpLCuiDVblN5bXvz9bR52oO1jnbIPl02cD08/Utb5IL6mIdfQ==",
+            "version": "6.1.4",
+            "resolved": "https://registry.npmjs.org/@railmapgen/svg-assets/-/svg-assets-6.1.4.tgz",
+            "integrity": "sha512-mGX4bANjWY9k0B8Wu6M6K6I04CMaj/hVQWCo6d0ATMA25HP1k/D67OUzcfyiNT7yV7Ox7TnhN1mR2kvL+G/tUQ==",
             "requires": {
                 "@railmapgen/rmg-palette-resources": "^3.0.1"
             }
diff --git a/package.json b/package.json
index 5b1501599..628f52e6b 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         "@railmapgen/rmg-palette-resources": "^3.0.1",
         "@railmapgen/rmg-runtime": "^12.0.0",
         "@railmapgen/rmg-translate": "^3.4.1",
-        "@railmapgen/svg-assets": "^6.1.2",
+        "@railmapgen/svg-assets": "^6.1.4",
         "@reduxjs/toolkit": "^2.7.0",
         "ag-grid-community": "^33.2.4",
         "ag-grid-react": "^33.2.4",
diff --git a/public/styles/share_gzmtr.css b/public/styles/share_gzmtr.css
index bb4581d53..1d41fa515 100644
--- a/public/styles/share_gzmtr.css
+++ b/public/styles/share_gzmtr.css
@@ -53,7 +53,7 @@ g#big_sec {
     fill: #000;
 }
 
-g#line_name {
+.line_name {
     transform: translate(var(--translate-x, 0px), -18px) scale(1.5);
 }
 
diff --git a/src/svgs/gzmtr/main-gzmtr.tsx b/src/svgs/gzmtr/main-gzmtr.tsx
index f8016c0ee..2f9ee307f 100644
--- a/src/svgs/gzmtr/main-gzmtr.tsx
+++ b/src/svgs/gzmtr/main-gzmtr.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { adjacencyList, criticalPathMethod, drawLine, getStnState } from '../methods/share';
 import { CanvasType, ShortDirection, StationDict } from '../../constants/constants';
 import { useRootSelector } from '../../redux';
@@ -75,6 +75,7 @@ const getXShare = (stnId: string, adjMat: ReturnType<typeof adjacencyList>, bran
 
 const MainGZMTR = () => {
     const { branches, routes, depsStr: deps } = useRootSelector(store => store.helper);
+    const [lineBoxWidth, setLineBoxWidth] = useState(45);
 
     const {
         svgWidth: svgWidths,
@@ -89,6 +90,19 @@ const MainGZMTR = () => {
         stn_list: stationList,
     } = useRootSelector(store => store.param);
 
+    const lineIconRef = useRef<SVGGElement>(null);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (lineIconRef.current) {
+                setLineBoxWidth(lineIconRef.current.getBBox().width);
+            }
+        }, 100);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [lineIconRef.current, lineName[0], lineName[1], spanLineNum]);
+
     const adjMat = adjacencyList(stationList, wideFactor, wideFactor);
 
     const xShares = useMemo(() => {
@@ -160,6 +174,8 @@ const MainGZMTR = () => {
         {} as { [key in keyof ReturnType<typeof drawLine>]: string[] }
     );
 
+    const lineBoxOffset = lineBoxWidth + 20; // default is 65
+
     return (
         <g
             id="main"
@@ -171,13 +187,16 @@ const MainGZMTR = () => {
             <Line paths={paths} />
             <StationGroup xs={xs} ys={ys} stnStates={stnStates} />
             <g
-                id="line_name"
+                className="line_name"
                 style={{
                     ['--translate-x' as any]:
-                        direction === ShortDirection.right ? `${lineXs[0] - 65}px` : `${lineXs[1] + 65}px`,
+                        direction === ShortDirection.right
+                            ? `${lineXs[0] - lineBoxOffset}px`
+                            : `${lineXs[1] + lineBoxOffset}px`,
                 }}
             >
                 <LineIcon
+                    ref={lineIconRef}
                     zhName={lineName[0]}
                     enName={lineName[1]}
                     foregroundColour={'var(--rmg-theme-fg)' as MonoColour}