add bbox overlay for id

railmapgen · Jan 19, 2025 · f2b1dc7 · f2b1dc7
1 parent 1efeda7
commit f2b1dc7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
         "@railmapgen/rmg-palette-resources": "^2.2.4",
         "@railmapgen/rmg-runtime": "^10.2.0",
         "@railmapgen/rmg-translate": "^3.2.3",
-        "@railmapgen/svg-assets": "^5.0.6",
+        "@railmapgen/svg-assets": "^5.0.8",
         "@reduxjs/toolkit": "^2.2.5",
         "bezier-js": "^6.1.4",
         "canvas-size": "^2.0.0",

diff --git a/src/components/svgs/stations/gzmtr-int-2024.tsx b/src/components/svgs/stations/gzmtr-int-2024.tsx
@@ -60,7 +60,14 @@ const GzmtrInt2024Station = (props: StationComponentProps) => {
     );
 
     const transferAll = transfer.flat().slice(0, 5); // slice to make sure at most 5 transfers
+    const stations = transferAll.map(s => ({
+        style: (s[6] === 'gz' ? 'gzmtr' : 'fmetro') as 'gzmtr' | 'fmetro',
+        lineNum: s[4],
+        stnNum: s[5],
+        strokeColour: s[2],
+    }));
 
+    // use imperative handle to get the bbox of the icon (with the help from InterchangeStation2024Handle)
     const [borderBox, setBorderBox] = React.useState<SVGRect>();
     const [translate, setTranslate] = React.useState<Coordinates>([0, 0]);
     const ref = React.useRef<InterchangeStation2024Handle>(null);
@@ -85,17 +92,6 @@ const GzmtrInt2024Station = (props: StationComponentProps) => {
         document.fonts.load('12px Arial', 'ABCDEFG123456').finally(() => setTimeout(update, 100));
     }, []);
 
-    // temporary fix for the missing id on the top element of the station
-    const iconEl = React.useRef<SVGGElement | null>(null);
-    iconEl.current?.querySelectorAll('path')?.forEach(elem => elem.setAttribute('id', `stn_core_${id}`));
-
-    const stations = transferAll.map(s => ({
-        style: (s[6] === 'gz' ? 'gzmtr' : 'fmetro') as 'gzmtr' | 'fmetro',
-        lineNum: s[4],
-        stnNum: s[5],
-        strokeColour: s[2],
-    }));
-
     const textX =
         (nameOffsetX === 'left' ? iconBBox.x1 : nameOffsetX === 'right' ? iconBBox.x2 : 0) * SCALE_WITH_PADDING;
     const textY =
@@ -128,14 +124,7 @@ const GzmtrInt2024Station = (props: StationComponentProps) => {
 
     return (
         <g id={id} transform={`translate(${x}, ${y})`}>
-            <g
-                transform={`scale(${SCALE})`}
-                onPointerDown={onPointerDown}
-                onPointerMove={onPointerMove}
-                onPointerUp={onPointerUp}
-                style={{ cursor: 'move' }}
-                ref={iconEl}
-            >
+            <g transform={`scale(${SCALE})`}>
                 <InterchangeStation2024
                     ref={ref}
                     stations={stations}
@@ -149,6 +138,21 @@ const GzmtrInt2024Station = (props: StationComponentProps) => {
                             : undefined
                     }
                 />
+                {/* Below is an overlay element that has all event hooks but can not be seen. */}
+                <rect
+                    id={`stn_core_${id}`}
+                    x={iconBBox.x1}
+                    y={iconBBox.y1}
+                    width={iconBBox.x2 - iconBBox.x1}
+                    height={iconBBox.y2 - iconBBox.y1}
+                    fill="white"
+                    fillOpacity="0"
+                    onPointerDown={onPointerDown}
+                    onPointerMove={onPointerMove}
+                    onPointerUp={onPointerUp}
+                    style={{ cursor: 'move' }}
+                    className="removeMe"
+                />
             </g>
             <g ref={textRef} transform={`translate(${textX}, ${textY})`} textAnchor={textAnchor}>
                 <MultilineText