diff --git a/src/components/svgs/common/multiline-text.tsx b/src/components/svgs/common/multiline-text.tsx
index 983691886..740d374c2 100644
--- 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
index e28f5d37d..8e52b0867 100644
--- 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 (
@@ -165,20 +166,6 @@ const JREastBasicStation = (props: StationComponentProps) => {
fill="white"
/>
))}
-
{!textVertical ? (
@@ -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'}
/>
{
funcDX={i =>
i * LINE_WIDTH * Math.SQRT1_2 * textVerticalBase * (nameOffsetY === 'top' ? -1 : 1)
}
- x={textVerticalENX}
+ // x={textVerticalENX}
className="rmp-name__jreast_en"
/>
>
)}
+
+
+
);
};
@@ -280,8 +283,8 @@ export interface JREastBasicStationAttributes extends StationAttributes {
}
const defaultJREastBasicStationAttributes: JREastBasicStationAttributes = {
- names: ['渋谷', 'Shibuya'],
- nameOffsetX: 'left',
+ names: ['新宿', 'Shinjuku'],
+ nameOffsetX: 'right',
nameOffsetY: 'middle',
rotate: 0,
textOneLine: false,
diff --git a/src/components/svgs/stations/jr-east-important.tsx b/src/components/svgs/stations/jr-east-important.tsx
index b3ca385ab..dfbef0093 100644
--- a/src/components/svgs/stations/jr-east-important.tsx
+++ b/src/components/svgs/stations/jr-east-important.tsx
@@ -13,9 +13,9 @@ import {
} from '../../../constants/stations';
import { MultilineText } from '../common/multiline-text';
-const NAME_JRE_BASIC = {
+const NAME_JRE_IMPORTANT = {
ja: {
- size: 15,
+ size: 10,
baseOffset: 1,
},
en: {
@@ -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) => {