#795 Better station name offset in JR East basic station vertical

railmapgen · Sep 23, 2024 · 75829cf · 75829cf
1 parent 29f8f1d
commit 75829cf
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 31 deletions.
diff --git a/src/components/svgs/common/multiline-text.tsx b/src/components/svgs/common/multiline-text.tsx
@@ -20,7 +20,7 @@ export const MultilineText = React.forwardRef((props: MultilineTextProps, ref: R
         // if dominantBaseline is defined, use it, or we calculate the dominantBaseline for you
         dominantBaseline = grow === 'up' ? 'auto' : grow === 'down' ? 'hanging' : 'middle',
         baseOffset = 2, // default dy offset
-        funcDX = () => 0, // default dx will always be 0
+        funcDX = (_: number) => 0, // default dx will always be 0
         ...otherSvgTextProps
     } = props;
 

diff --git a/src/components/svgs/stations/jr-east-basic.tsx b/src/components/svgs/stations/jr-east-basic.tsx
@@ -144,12 +144,13 @@ const JREastBasicStation = (props: StationComponentProps) => {
     const textVerticalBaseDY = textVerticalBase * NAME_JRE_BASIC.ja.size;
     const textVerticalENBaseOffset =
         (names[0].split('\\').length * NAME_JRE_BASIC.ja.size) / 2 + NAME_JRE_BASIC.en.baseOffset;
-    const textVerticalENY = (important ? 2 : 0) * NAME_DY[nameOffsetY].polarity * -1;
-    const textVerticalENX =
+    const textVerticalENX = (important ? 1 : 0) * NAME_DY[nameOffsetY].polarity * -1;
+    const textVerticalENY =
         ((names[0].split('\\').length - 0) / 2) *
-        (nameOffsetY === 'top' ? -1 : 1) *
-        textVerticalBase *
-        NAME_JRE_BASIC.ja.size;
+            (nameOffsetY === 'top' ? -1 : 1) *
+            textVerticalBase *
+            NAME_JRE_BASIC.ja.size +
+        (important ? 2 : 0) * NAME_DY[nameOffsetY].polarity * -1;
 
     return (
         <g id={id} transform={`translate(${x}, ${y})`}>
@@ -165,20 +166,6 @@ const JREastBasicStation = (props: StationComponentProps) => {
                         fill="white"
                     />
                 ))}
-                <rect
-                    id={`stn_core_${id}`}
-                    fill="url(#opaque)"
-                    fillOpacity="50%"
-                    x={iconDX1}
-                    y={-LINE_WIDTH / 2}
-                    rx={LINE_WIDTH / 2}
-                    width={iconWidth}
-                    height={LINE_WIDTH}
-                    onPointerDown={onPointerDown}
-                    onPointerMove={onPointerMove}
-                    onPointerUp={onPointerUp}
-                    style={{ cursor: 'move' }}
-                />
             </g>
             {!textVertical ? (
                 <g transform={`translate(${textDX}, ${textDY})`} textAnchor={textAnchor}>
@@ -238,13 +225,13 @@ const JREastBasicStation = (props: StationComponentProps) => {
                             grow="bidirectional"
                             baseOffset={0}
                             baseDY={textVerticalBaseDY}
-                            y="-2.75"
+                            y={important ? 2.75 * NAME_DY[nameOffsetY].polarity : 0}
                             className="rmp-name__jreast_ja"
                             fill={important ? 'white' : 'black'}
                         />
                     </g>
                     <g
-                        transform={`translate(0, ${textVerticalY + textVerticalENY})rotate(270)`}
+                        transform={`translate(${textVerticalENX}, ${textVerticalY + textVerticalENY})rotate(270)`}
                         textAnchor={textVerticalAnchor.en}
                     >
                         <MultilineText
@@ -256,12 +243,28 @@ const JREastBasicStation = (props: StationComponentProps) => {
                             funcDX={i =>
                                 i * LINE_WIDTH * Math.SQRT1_2 * textVerticalBase * (nameOffsetY === 'top' ? -1 : 1)
                             }
-                            x={textVerticalENX}
+                            // x={textVerticalENX}
                             className="rmp-name__jreast_en"
                         />
                     </g>
                 </>
             )}
+            <g transform={`rotate(${rotate})`}>
+                <rect
+                    id={`stn_core_${id}`}
+                    fill="url(#opaque)"
+                    fillOpacity="50%"
+                    x={iconDX1}
+                    y={-LINE_WIDTH / 2}
+                    rx={LINE_WIDTH / 2}
+                    width={iconWidth}
+                    height={LINE_WIDTH}
+                    onPointerDown={onPointerDown}
+                    onPointerMove={onPointerMove}
+                    onPointerUp={onPointerUp}
+                    style={{ cursor: 'move' }}
+                />
+            </g>
         </g>
     );
 };

diff --git a/src/components/svgs/stations/jr-east-important.tsx b/src/components/svgs/stations/jr-east-important.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../../constants/stations';
 import { MultilineText } from '../common/multiline-text';
 
-const NAME_JRE_BASIC = {
+const NAME_JRE_IMPORTANT = {
     ja: {
         size: 15,
         baseOffset: 1,
@@ -58,10 +58,10 @@ const JREastImportantStation = (props: StationComponentProps) => {
     // writing-mode = vertical-rl -> the length of the text = bBox.height
     // Might due to the use of ref in two components, but anyway this Math.max should be a workaround.
     const textLength = Math.max(bBox.width, bBox.height);
-    const textSafeD = (textVertical ? 0.1 : 0.7) * NAME_JRE_BASIC.ja.size;
+    const textSafeD = (textVertical ? 0.1 : 0.7) * NAME_JRE_IMPORTANT.ja.size;
     const iconLength = Math.max(textLength + textSafeD, minLength);
-    const iconWidth = textVertical ? NAME_JRE_BASIC.ja.size + ICON_SAFE_D : iconLength;
-    const iconHeight = textVertical ? iconLength - 5 : NAME_JRE_BASIC.ja.size + ICON_SAFE_D;
+    const iconWidth = textVertical ? NAME_JRE_IMPORTANT.ja.size + ICON_SAFE_D : iconLength;
+    const iconHeight = textVertical ? iconLength - 5 : NAME_JRE_IMPORTANT.ja.size + ICON_SAFE_D;
 
     const textENDX = { left: -iconWidth / 2 - 1, middle: 0, right: iconWidth / 2 + 1 }[nameOffsetX];
     const textENDY = { top: -iconHeight / 2 - 1, middle: 0, bottom: iconHeight / 2 + 1 }[nameOffsetY];
@@ -88,7 +88,7 @@ const JREastImportantStation = (props: StationComponentProps) => {
                         y="-1"
                         className="rmp-name__jreast_ja"
                         textAnchor="middle"
-                        fontSize={NAME_JRE_BASIC.ja.size}
+                        fontSize={NAME_JRE_IMPORTANT.ja.size}
                         fill="white"
                         dominantBaseline="central"
                     >
@@ -100,7 +100,7 @@ const JREastImportantStation = (props: StationComponentProps) => {
                         className="rmp-name__jreast_ja"
                         textAnchor="middle"
                         writingMode="vertical-rl"
-                        fontSize={NAME_JRE_BASIC.ja.size}
+                        fontSize={NAME_JRE_IMPORTANT.ja.size}
                         fill="white"
                         dominantBaseline="central"
                     >
@@ -128,8 +128,8 @@ const JREastImportantStation = (props: StationComponentProps) => {
             <g transform={`translate(${textENDX * scale}, ${textENDY * scale})`} textAnchor={textENAnchor}>
                 <MultilineText
                     text={names[1].split('\\')}
-                    fontSize={NAME_JRE_BASIC.en.size}
-                    lineHeight={NAME_JRE_BASIC.en.size}
+                    fontSize={NAME_JRE_IMPORTANT.en.size}
+                    lineHeight={NAME_JRE_IMPORTANT.en.size}
                     grow={nameOffsetY === 'top' ? 'up' : nameOffsetY === 'middle' ? 'bidirectional' : 'down'}
                     baseOffset={0}
                     className="rmp-name__jreast_en"