Add line style selection dropdown to tools panel for drawing new lines

src/components/panels/tools/tools.tsx

@@ -17,24 +17,25 @@ import {
     useColorModeValue,
 } from '@chakra-ui/react';
 import { LanguageCode } from '@railmapgen/rmg-translate';
+import { RmgSelect } from '@railmapgen/rmg-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconContext } from 'react-icons';
 import { MdCode, MdExpandLess, MdExpandMore, MdOpenInNew } from 'react-icons/md';
 import { Theme } from '../../../constants/constants';
-import { LinePathType } from '../../../constants/lines';
+import { LinePathType, LineStyleType } from '../../../constants/lines';
 import { MAX_MASTER_NODE_FREE } from '../../../constants/master';
 import { MiscNodeType } from '../../../constants/nodes';
 import { StationType } from '../../../constants/stations';
 import { useRootDispatch, useRootSelector } from '../../../redux';
 import { setToolsPanelExpansion } from '../../../redux/app/app-slice';
-import { setMode, setTheme } from '../../../redux/runtime/runtime-slice';
+import { setMode, setSelectedLineStyle, setTheme } from '../../../redux/runtime/runtime-slice';
 import { usePaletteTheme } from '../../../util/hooks';
-import { linePaths } from '../../svgs/lines/lines';
+import { linePaths, lineStyles } from '../../svgs/lines/lines';
 import miscNodes from '../../svgs/nodes/misc-nodes';
 import stations from '../../svgs/stations/stations';
 import ThemeButton from '../theme-button';
-import { localizedMiscNodes, localizedStaions } from './localized-order';
+import { localizedMiscNodes, localizedStaions, localizedLineStyles } from './localized-order';
 
 const buttonStyle: SystemStyleObject = {
     justifyContent: 'flex-start',
@@ -74,6 +75,7 @@ const ToolsPanel = () => {
     } = useRootSelector(state => state.app);
     const {
         mode,
+        selectedLineStyle,
         count: { masters: masterNodesCount },
     } = useRootSelector(state => state.runtime);
     const bgColor = useColorModeValue('white', 'var(--chakra-colors-gray-800)');
@@ -151,6 +153,26 @@ const ToolsPanel = () => {
                                 </Text>
                             </Flex>
 
+                            {isTextShown && (
+                                <Box mb={2}>
+                                    <Text fontSize="sm" fontWeight="600" mb={1}>
+                                        {t('panel.tools.section.lineStyle')}
+                                    </Text>
+                                    <RmgSelect
+                                        options={Object.fromEntries(
+                                            localizedLineStyles[i18n.language as LanguageCode]?.map(lineStyle => [
+                                                lineStyle,
+                                                t(lineStyles[lineStyle].metadata.displayName).toString(),
+                                            ]) ?? []
+                                        )}
+                                        value={selectedLineStyle}
+                                        onChange={({ target: { value } }) => {
+                                            dispatch(setSelectedLineStyle(value as LineStyleType));
+                                        }}
+                                    />
+                                </Box>
+                            )}
+
                             {Object.values(LinePathType)
                                 .filter(type => !(type === LinePathType.Simple && unlockSimplePathAttempts >= 0))
                                 .map(type => (

src/components/svg-canvas-graph.tsx

@@ -40,7 +40,7 @@
 import { getLines, getNodes } from '../util/process-elements';
 import SnapPointGuideLines from './snap-point-guide-lines';
 import SvgLayer from './svg-layer';
-import { linePaths } from './svgs/lines/lines';
+import { linePaths, lineStyles } from './svgs/lines/lines';
 import singleColor from './svgs/lines/styles/single-color';
 import miscNodes from './svgs/nodes/misc-nodes';
 import { default as stations } from './svgs/stations/stations';
@@ -77,6 +77,7 @@
         mode,
         keepLastPath,
         theme,
+        selectedLineStyle,
     } = useRootSelector(state => state.runtime);
     const size = useWindowSize();
     const { height, width } = getCanvasSize(size);
@@ -325,14 +326,18 @@
                     const parallelIndex = autoParallel
                         ? makeParallelIndex(graph.current, type, source, target, 'from')
                         : -1;
+                    const lineStyleAttrs = selectedLineStyle === LineStyleType.SingleColor 
+                        ? { color: theme }
+                        : structuredClone(lineStyles[selectedLineStyle].defaultAttrs);
+
                     graph.current.addDirectedEdgeWithKey(newLineId, source, target, {
                         visible: true,
                         zIndex: 0,
                         type,
                         // deep copy to prevent mutual reference
                         [type]: structuredClone(linePaths[type].defaultAttrs),
-                        style: LineStyleType.SingleColor,
-                        [LineStyleType.SingleColor]: { color: theme },
+                        style: selectedLineStyle,
+                        [selectedLineStyle]: lineStyleAttrs,
                         reconcileId: '',
                         parallelIndex,
                     });

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

@@ -14,7 +14,7 @@
 import { ColorAttribute, ColorField } from '../../../panels/details/color-field';
 
 const BjsubwayDotted = (props: LineStyleComponentProps<BjsubwayDottedAttributes>) => {
-    const { id, path, styleAttrs, handlePointerDown } = props;
+    const { id, path, styleAttrs, newLine, handlePointerDown } = props;
     const { color = defaultBjsubwayDottedAttributes.color } = styleAttrs ?? defaultBjsubwayDottedAttributes;
 
     const onPointerDown = React.useCallback(
@@ -25,7 +25,12 @@
     const bgColor = useColorModeValue('white', 'var(--chakra-colors-gray-800)');
 
     return (
-        <g id={id} onPointerDown={onPointerDown} cursor="pointer">
+        <g 
+            id={id} 
+            onPointerDown={newLine ? undefined : onPointerDown} 
+            cursor="pointer"
+            pointerEvents={newLine ? 'none' : undefined}
+        >
             <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeDasharray="2 2" />
             <path d={path} fill="none" stroke={bgColor} strokeWidth="3.4" />
         </g>

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

@@ -13,7 +13,7 @@
 import { ColorAttribute, ColorField } from '../../../panels/details/color-field';
 
 const BjsubwaySingleColor = (props: LineStyleComponentProps<BjsubwaySingleColorAttributes>) => {
-    const { id, path, styleAttrs, handlePointerDown } = props;
+    const { id, path, styleAttrs, newLine, handlePointerDown } = props;
     const { color = defaultBjsubwaySingleColorAttributes.color } = styleAttrs ?? defaultBjsubwaySingleColorAttributes;
 
     const onPointerDown = React.useCallback(
@@ -22,7 +22,12 @@
     );
 
     return (
-        <g id={id} onPointerDown={onPointerDown} cursor="pointer">
+        <g 
+            id={id} 
+            onPointerDown={newLine ? undefined : onPointerDown} 
+            cursor="pointer"
+            pointerEvents={newLine ? 'none' : undefined}
+        >
             <path d={path} fill="none" stroke="white" strokeWidth="6" strokeLinecap="round" />
             <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
         </g>

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

@@ -13,7 +13,7 @@
 import { ColorAttribute, ColorField } from '../../../panels/details/color-field';
 
 const ChinaRailway = (props: LineStyleComponentProps<ChinaRailwayAttributes>) => {
-    const { id, path, styleAttrs, handlePointerDown } = props;
+    const { id, path, styleAttrs, newLine, handlePointerDown } = props;
     const { color = defaultChinaRailwayAttributes.color } = styleAttrs ?? defaultChinaRailwayAttributes;
 
     const onPointerDown = React.useCallback(
@@ -22,7 +22,12 @@
     );
 
     return (
-        <g id={id} onPointerDown={onPointerDown} cursor="pointer">
+        <g 
+            id={id} 
+            onPointerDown={newLine ? undefined : onPointerDown} 
+            cursor="pointer"
+            pointerEvents={newLine ? 'none' : undefined}
+        >
             <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" />
         </g>

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

@@ -19,7 +19,7 @@ import { makeShortPathParallel } from '../../../../util/bezier-parallel';
 import { ColorField } from '../../../panels/details/color-field';
 
 const DualColor = (props: LineStyleComponentProps<DualColorAttributes>) => {
-    const { id, type, path, styleAttrs, handlePointerDown } = props;
+    const { id, type, path, styleAttrs, newLine, handlePointerDown } = props;
     const { colorA = defaultDualColorAttributes.colorA, colorB = defaultDualColorAttributes.colorB } =
         styleAttrs ?? defaultDualColorAttributes;
 
@@ -39,7 +39,12 @@ const DualColor = (props: LineStyleComponentProps<DualColorAttributes>) => {
     }, [path]);
 
     return (
-        <g id={id} onPointerDown={onPointerDown} cursor="pointer">
+        <g 
+            id={id} 
+            onPointerDown={newLine ? undefined : onPointerDown} 
+            cursor="pointer"
+            pointerEvents={newLine ? 'none' : undefined}
+        >
             <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" />
         </g>

src/components/svgs/lines/styles/river.tsx

@@ -7,7 +7,7 @@ import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps }
 import { ColorAttribute } from '../../../panels/details/color-field';
 
 const River = (props: LineStyleComponentProps<RiverAttributes>) => {
-    const { id, path, styleAttrs, handlePointerDown } = props;
+    const { id, path, styleAttrs, newLine, handlePointerDown } = props;
     const { color = defaultRiverAttributes.color, width = defaultRiverAttributes.width } =
         styleAttrs ?? defaultRiverAttributes;
 
@@ -25,7 +25,8 @@ const River = (props: LineStyleComponentProps<RiverAttributes>) => {
             strokeWidth={width}
             strokeLinecap="round"
             cursor="pointer"
-            onPointerDown={onPointerDown}
+            onPointerDown={newLine ? undefined : onPointerDown}
+            pointerEvents={newLine ? 'none' : undefined}
         />
     );
 };

src/components/svgs/lines/styles/shmetro-virtual-int.tsx

@@ -2,15 +2,20 @@ import React from 'react';
 import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
 
 const ShmetroVirtualInt = (props: LineStyleComponentProps<ShmetroVirtualIntAttributes>) => {
-    const { id, path, handlePointerDown } = props;
+    const { id, path, newLine, handlePointerDown } = props;
 
     const onPointerDown = React.useCallback(
         (e: React.PointerEvent<SVGElement>) => handlePointerDown(id, e),
         [id, handlePointerDown]
     );
 
     return (
-        <g id={id} onPointerDown={onPointerDown} cursor="pointer">
+        <g 
+            id={id} 
+            onPointerDown={newLine ? undefined : onPointerDown} 
+            cursor="pointer"
+            pointerEvents={newLine ? 'none' : undefined}
+        >
             <path d={path} fill="none" stroke="black" strokeWidth="7" strokeLinecap="round" />
             <path d={path} fill="none" stroke="white" strokeWidth="4.33" strokeLinecap="round" />
         </g>

src/i18n/translations/en.json

@@ -13,6 +13,7 @@
             "showLess": "Show less",
             "section": {
                 "lineDrawing": "Line drawing",
+                "lineStyle": "Line style",
                 "stations": "Stations",
                 "miscellaneousNodes": "Miscellaneous nodes"
             },

src/i18n/translations/zh-Hans.json

@@ -13,6 +13,7 @@
             "showLess": "显示更少",
             "section": {
                 "lineDrawing": "线段绘制",
+                "lineStyle": "线段样式",
                 "stations": "车站",
                 "miscellaneousNodes": "杂项节点"
             },

src/i18n/translations/zh-Hant.json

@@ -13,6 +13,7 @@
             "showLess": "顯示更少",
             "section": {
                 "lineDrawing": "線段繪製",
+                "lineStyle": "線段樣式",
                 "stations": "車站",
                 "miscellaneousNodes": "雜項節點"
             },

src/redux/runtime/runtime-slice.ts

@@ -4,6 +4,7 @@ import { Translation } from '@railmapgen/rmg-translate';
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { RootState } from '..';
 import { CityCode, Id, MiscNodeId, NodeType, RuntimeMode, StationCity, StnId, Theme } from '../../constants/constants';
+import { LineStyleType } from '../../constants/lines';
 import { MAX_MASTER_NODE_FREE, MAX_MASTER_NODE_PRO } from '../../constants/master';
 import { MiscNodeType } from '../../constants/nodes';
 import { STATION_TYPE_VALUES, StationType } from '../../constants/stations';
@@ -37,6 +38,11 @@ interface RuntimeState {
         edges: number;
     };
     mode: RuntimeMode;
+    /**
+     * The selected line style for new lines.
+     * Defaults to SingleColor.
+     */
+    selectedLineStyle: LineStyleType;
     /**
      * The last tool used by the user.
      * Will be undefined on first load.
@@ -83,6 +89,7 @@ const initialState: RuntimeState = {
         edges: Date.now(),
     },
     mode: 'free',
+    selectedLineStyle: LineStyleType.SingleColor,
     lastTool: undefined,
     keepLastPath: false,
     theme: [CityCode.Shanghai, 'sh1', '#E3002B', MonoColour.white],
@@ -202,6 +209,9 @@ const runtimeSlice = createSlice({
             if (state.mode !== 'free') state.lastTool = state.mode;
             state.mode = action.payload;
         },
+        setSelectedLineStyle: (state, action: PayloadAction<LineStyleType>) => {
+            state.selectedLineStyle = action.payload;
+        },
         setKeepLastPath: (state, action: PayloadAction<boolean>) => {
             state.keepLastPath = action.payload;
         },
@@ -286,6 +296,7 @@ export const {
     setRefreshNodes,
     setRefreshEdges,
     setMode,
+    setSelectedLineStyle,
     setKeepLastPath,
     setTheme,
     openPaletteAppClip,