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) => {