#566 Export LINE_WIDTH constant

src/components/svgs/lines/styles/bjsubway-dotted.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -26,7 +27,7 @@ const BjsubwayDotted = (props: LineStyleComponentProps<BjsubwayDottedAttributes>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeDasharray="2 2" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeDasharray="2 2" />
             <path d={path} fill="none" stroke={bgColor} strokeWidth="3.4" />
         </g>
     );

src/components/svgs/lines/styles/bjsubway-single-color.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -24,7 +25,7 @@ const BjsubwaySingleColor = (props: LineStyleComponentProps<BjsubwaySingleColorA
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
             <path d={path} fill="none" stroke="white" strokeWidth="6" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
         </g>
     );
 };

src/components/svgs/lines/styles/bjsubway-tram.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,7 +24,7 @@ const BjsubwayTram = (props: LineStyleComponentProps<BjsubwayTramAttributes>) =>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
             <path d={path} fill="none" stroke="white" strokeWidth="1.67" />
         </g>
     );

src/components/svgs/lines/styles/chengdurt-outside-fare-gates.tsx

@@ -2,7 +2,13 @@ import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const ChengduRTOutsideFareGates = (props: LineStyleComponentProps<ChengduRTOutsideFareGatesAttributes>) => {
     const { id, path, newLine, handlePointerDown } = props;
@@ -18,8 +24,8 @@ const ChengduRTOutsideFareGates = (props: LineStyleComponentProps<ChengduRTOutsi
             d={path}
             fill="none"
             stroke="#b4b4b5"
-            strokeWidth="5"
-            strokeDasharray="6 5"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`${LINE_WIDTH + 1} ${LINE_WIDTH}`}
             cursor="pointer"
             onPointerDown={newLine ? undefined : onPointerDown}
             pointerEvents={newLine ? 'none' : undefined}

src/components/svgs/lines/styles/china-railway.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const ChinaRailway = (props: LineStyleComponentProps<ChinaRailwayAttributes>) =>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[3]} strokeWidth="4.67" strokeDasharray="17.5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[3]} strokeWidth={LINE_WIDTH - 0.33} strokeDasharray="17.5" />
         </g>
     );
 };

src/components/svgs/lines/styles/dual-color.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { MdOutlineSwapVert } from 'react-icons/md';
 import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -40,8 +41,8 @@ const DualColor = (props: LineStyleComponentProps<DualColorAttributes>) => {
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={pathA} fill="none" stroke={colorA[2]} strokeWidth="2.5" strokeLinecap="round" />
-            <path d={pathB} fill="none" stroke={colorB[2]} strokeWidth="2.5" strokeLinecap="round" />
+            <path d={pathA} fill="none" stroke={colorA[2]} strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
+            <path d={pathB} fill="none" stroke={colorB[2]} strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
         </g>
     );
 };

src/components/svgs/lines/styles/guangdong-intercity-railway.tsx

@@ -1,7 +1,13 @@
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
 import { CityCode } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 import { ColorAttribute } from '../../../panels/details/color-field';
 
 const GuangdongIntercityRailway = (props: LineStyleComponentProps<GuangdongIntercityRailwayAttributes>) => {
@@ -16,8 +22,8 @@ const GuangdongIntercityRailway = (props: LineStyleComponentProps<GuangdongInter
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[3]} strokeWidth="2.5" strokeDasharray="7.5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[3]} strokeWidth={LINE_WIDTH / 2} strokeDasharray="7.5" />
         </g>
     );
 };

src/components/svgs/lines/styles/jr-east-single-color-pattern.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -12,8 +13,6 @@ import {
 } from '../../../../constants/lines';
 import { makeShortPathOutline } from '../../../../util/bezier-parallel';
 import { ColorAttribute, ColorField } from '../../../panels/details/color-field';
-
-const LINE_WIDTH = 5;
 const PATTERN_LEN = LINE_WIDTH * Math.SQRT1_2;
 const PATTERN_WIDTH = 0.25;
 const PATTERN_CLIP_PATH_D = ((PATTERN_LEN * Math.SQRT2 - PATTERN_WIDTH) / 2) * Math.SQRT2;

src/components/svgs/lines/styles/jr-east-single-color.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const JREastSingleColor = (props: LineStyleComponentProps<JREastSingleColorAttri
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="black" strokeWidth="5.1" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="4.9" />
+            <path d={path} fill="none" stroke="black" strokeWidth={LINE_WIDTH + 0.1} />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH - 0.1} />
         </g>
     );
 };

src/components/svgs/lines/styles/london-DART.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -24,7 +25,7 @@ const LondonLutonAirportDART = (props: LineStyleComponentProps<LondonLutonAirpor
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
             <path
                 d={path}
                 fill="none"

src/components/svgs/lines/styles/london-ifs-could-cable-car.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -24,9 +25,9 @@ const LondonIFSCloudCableCar = (props: LineStyleComponentProps<LondonIFSCloudCab
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
-            <path d={path} fill="none" stroke="white" strokeWidth="3" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="1" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
+            <path d={path} fill="none" stroke="white" strokeWidth={(LINE_WIDTH / 5) * 3} />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH / 5} />
         </g>
     );
 };

src/components/svgs/lines/styles/london-rail.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,14 +28,32 @@ const LondonRail = (props: LineStyleComponentProps<LondonRailAttributes>) => {
 
     return !limitedService ? (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorForeground[2]} strokeWidth="2" strokeDasharray="7 3" />
+            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorForeground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 2}
+                strokeDasharray="7 3"
+            />
         </g>
     ) : (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorForeground[2]} strokeWidth="4.25" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="2" strokeDasharray="7 3" />
+            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorForeground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 4.25}
+                strokeLinecap="round"
+            />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorForeground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 2}
+                strokeDasharray="7 3"
+            />
         </g>
     );
 };

src/components/svgs/lines/styles/london-sandwich.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,7 +24,7 @@ const LondonSandwichPre = (props: LineStyleComponentProps<LondonSandwichAttribut
 
     return (
         <g id={`${id}.pre`} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
         </g>
     );
 };

src/components/svgs/lines/styles/london-tube-10-min-walk.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const LondonTube10MinWalk = (props: LineStyleComponentProps<LondonTube10MinWalkAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -14,8 +20,8 @@ const LondonTube10MinWalk = (props: LineStyleComponentProps<LondonTube10MinWalkA
             d={path}
             fill="none"
             stroke="black"
-            strokeWidth="5"
-            strokeDasharray="5 2.5"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`${LINE_WIDTH} ${LINE_WIDTH / 2}`}
             cursor="pointer"
             onPointerDown={onPointerDown}
         />

src/components/svgs/lines/styles/london-tube-internal-int.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const LondonTubeInternalIntPre = (props: LineStyleComponentProps<LondonTubeInternalIntAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -26,7 +32,7 @@ const LondonTubeInternalInt = (props: LineStyleComponentProps<LondonTubeInternal
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke="white" strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
         </g>
     );
 };

src/components/svgs/lines/styles/london-tube-terminal.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,7 +28,7 @@ const LondonTubeTerminal = (props: LineStyleComponentProps<LondonTubeTerminalAtt
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="5"
+            strokeWidth={LINE_WIDTH}
             cursor="pointer"
             onPointerDown={onPointerDown}
         />

src/components/svgs/lines/styles/mrt-sentosa-express.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { AttrsProps } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const MRTSentosaExpress = (props: LineStyleComponentProps<MRTSentosaExpressAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -16,8 +22,8 @@ const MRTSentosaExpress = (props: LineStyleComponentProps<MRTSentosaExpressAttri
             d={path}
             fill="none"
             stroke="black"
-            strokeWidth="5"
-            strokeDasharray="0 10 10 10"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`0 ${LINE_WIDTH * 2} ${LINE_WIDTH * 2} ${LINE_WIDTH * 2}`}
             strokeLinecap="round"
             cursor="pointer"
             onPointerDown={onPointerDown}