fix: resolved problems in the code review

LYXOfficial · LYXOfficial · commit c506ca560629 · 2025-02-23T23:49:52.000+08:00
diff --git a/src/components/svgs/nodes/chongqingrt-num-line-badge.tsx b/src/components/svgs/nodes/chongqingrt-num-line-badge.tsx
@@ -56,7 +56,7 @@ const ChongqingRTNumLineBadge = (props: NodeComponentProps<ChongqingRTNumLineBad
 };
 
 /**
- * BerlinUBahnLineBadge specific props.
+ * ChongqingRTNumLineBadge specific props.
  */
 export interface ChongqingRTNumLineBadgeAttributes extends AttributesWithColor {
     num: number | string;
diff --git a/src/components/svgs/nodes/chongqingrt-text-line-badge.tsx b/src/components/svgs/nodes/chongqingrt-text-line-badge.tsx
@@ -69,7 +69,7 @@ const ChongqingRTTextLineBadge = (props: NodeComponentProps<ChongqingRTTextLineB
 };
 
 /**
- * BerlinUBahnLineBadge specific props.
+ * ChongqingRTTextLineBadge specific props.
  */
 export interface ChongqingRTTextLineBadgeAttributes extends AttributesWithColor {
     names: [string, string];
diff --git a/src/components/svgs/nodes/chongqingrt2021-num-line-badge.tsx b/src/components/svgs/nodes/chongqingrt2021-num-line-badge.tsx
@@ -1,9 +1,10 @@
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
-import { CityCode } from '../../../constants/constants';
+import { useTranslation } from 'react-i18next';
+import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
+import { AttrsProps, CityCode } from '../../../constants/constants';
 import { MiscNodeType, Node, NodeComponentProps } from '../../../constants/nodes';
 import { AttributesWithColor, ColorField } from '../../panels/details/color-field';
-import { RmgFieldsFieldDetail, RmgFieldsFieldSpecificAttributes } from '../../panels/details/rmg-field-specific-attrs';
 
 const ChongqingRT2021NumLineBadge = (props: NodeComponentProps<ChongqingRT2021NumLineBadgeAttributes>) => {
     const { id, x, y, attrs, handlePointerDown, handlePointerMove, handlePointerUp } = props;
@@ -57,7 +58,7 @@ const ChongqingRT2021NumLineBadge = (props: NodeComponentProps<ChongqingRT2021Nu
 };
 
 /**
- * BerlinUBahnLineBadge specific props.
+ * ChongqingRT2021NumLineBadge specific props.
  */
 export interface ChongqingRT2021NumLineBadgeAttributes extends AttributesWithColor {
     num: number | string;
@@ -68,43 +69,39 @@ const defaultChongqingRT2021NumLineBadgeAttributes: ChongqingRT2021NumLineBadgeA
     color: [CityCode.Chongqing, 'cq1', '#e4002b', MonoColour.white],
 };
 
-const chongqingRT2021NumLineBadgeFields = [
-    {
-        type: 'input',
-        label: 'panel.details.nodes.common.num',
-        value: (attrs?: ChongqingRT2021NumLineBadgeAttributes) =>
-            (attrs ?? defaultChongqingRT2021NumLineBadgeAttributes).num,
-        validator: (val: string) => !Number.isNaN(val),
-        onChange: (val: string | number, attrs_: ChongqingRT2021NumLineBadgeAttributes | undefined) => {
-            // set default value if switched from another type
-            const attrs = attrs_ ?? defaultChongqingRT2021NumLineBadgeAttributes;
-            // set value
-            if (Number.isNaN(Number(val))) {
-                attrs.num = val;
-            } else {
-                attrs.num = Number(val);
-            }
-            // return modified attrs
-            return attrs;
+const ChongqingRT2021NumLineBadgeAttrsComponent = (props: AttrsProps<ChongqingRT2021NumLineBadgeAttributes>) => {
+    const { id, attrs, handleAttrsUpdate } = props;
+    const { t } = useTranslation();
+    const fields: RmgFieldsField[] = [
+        {
+            type: 'input',
+            label: t('panel.details.nodes.common.num'),
+            value: (attrs ?? defaultChongqingRT2021NumLineBadgeAttributes).num as string,
+            validator: (val: string) => !Number.isNaN(val),
+            onChange: (val: string | number) => {
+                if (Number.isNaN(Number(val))) {
+                    attrs.num = val;
+                } else {
+                    attrs.num = Number(val);
+                }
+                handleAttrsUpdate(id, attrs);
+            },
+            minW: 'full',
         },
-    },
-    {
-        type: 'custom',
-        label: 'color',
-        component: (
-            <ColorField
-                type={MiscNodeType.ChongqingRT2021NumLineBadge}
-                defaultTheme={defaultChongqingRT2021NumLineBadgeAttributes.color}
-            />
-        ),
-    },
-];
-
-const attrsComponent = () => (
-    <RmgFieldsFieldSpecificAttributes
-        fields={chongqingRT2021NumLineBadgeFields as RmgFieldsFieldDetail<ChongqingRT2021NumLineBadgeAttributes>}
-    />
-);
+        {
+            type: 'custom',
+            label: t('color'),
+            component: (
+                <ColorField
+                    type={MiscNodeType.ChongqingRT2021NumLineBadge}
+                    defaultTheme={defaultChongqingRT2021NumLineBadgeAttributes.color}
+                />
+            ),
+            minW: 'full',
+        },
+    ];
+    return <RmgFields fields={fields} />;
+};
 
 const chongqingRT2021NumLineBadgeIcon = (
     <svg viewBox="0 0 21 21" height={40} width={40} focusable={false} style={{ padding: 3 }}>
@@ -120,7 +117,7 @@ const chongqingRT2021NumLineBadge: Node<ChongqingRT2021NumLineBadgeAttributes> =
     component: ChongqingRT2021NumLineBadge,
     icon: chongqingRT2021NumLineBadgeIcon,
     defaultAttrs: defaultChongqingRT2021NumLineBadgeAttributes,
-    attrsComponent,
+    attrsComponent: ChongqingRT2021NumLineBadgeAttrsComponent,
     metadata: {
         displayName: 'panel.details.nodes.chongqingRT2021NumLineBadge.displayName',
         tags: [],
diff --git a/src/components/svgs/nodes/chongqingrt2021-text-line-badge.tsx b/src/components/svgs/nodes/chongqingrt2021-text-line-badge.tsx
@@ -1,9 +1,10 @@
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
-import { CityCode } from '../../../constants/constants';
+import { useTranslation } from 'react-i18next';
+import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
+import { AttrsProps, CityCode } from '../../../constants/constants';
 import { MiscNodeType, Node, NodeComponentProps } from '../../../constants/nodes';
 import { AttributesWithColor, ColorField } from '../../panels/details/color-field';
-import { RmgFieldsFieldDetail, RmgFieldsFieldSpecificAttributes } from '../../panels/details/rmg-field-specific-attrs';
 import { MultilineText } from '../common/multiline-text';
 
 const ChongqingRT2021TextLineBadge = (props: NodeComponentProps<ChongqingRT2021TextLineBadgeAttributes>) => {
@@ -82,7 +83,7 @@ const ChongqingRT2021TextLineBadge = (props: NodeComponentProps<ChongqingRT2021T
 };
 
 /**
- * BerlinUBahnLineBadge specific props.
+ * ChongqingRT2021NumLineBadge specific props.
  */
 export interface ChongqingRT2021TextLineBadgeAttributes extends AttributesWithColor {
     names: [string, string];
@@ -95,68 +96,55 @@ const defaultChongqingRT2021TextLineBadgeAttributes: ChongqingRT2021TextLineBadg
     isRapid: false,
 };
 
-const chongqingRT2021TextLineBadgeFields = [
-    {
-        type: 'input',
-        label: 'panel.details.nodes.common.nameZh',
-        value: (attrs?: ChongqingRT2021TextLineBadgeAttributes) =>
-            (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).names[0],
-        onChange: (val: string | number, attrs_: ChongqingRT2021TextLineBadgeAttributes | undefined) => {
-            // set default value if switched from another type
-            const attrs = attrs_ ?? defaultChongqingRT2021TextLineBadgeAttributes;
-            // set value
-            attrs.names[0] = val.toString();
-            // return modified attrs
-            return attrs;
+const ChongqingRT2021NumLineBadgeAttrsComponent = (props: AttrsProps<ChongqingRT2021TextLineBadgeAttributes>) => {
+    const { id, attrs, handleAttrsUpdate } = props;
+    const { t } = useTranslation();
+    const fields: RmgFieldsField[] = [
+        {
+            type: 'input',
+            label: t('panel.details.nodes.common.nameZh'),
+            value: (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).names[0],
+            onChange: (val: string | number) => {
+                attrs.names[0] = val.toString();
+                handleAttrsUpdate(id, attrs);
+            },
+            minW: 'full',
         },
-    },
-    {
-        type: 'textarea',
-        label: 'panel.details.nodes.common.nameEn',
-        value: (attrs?: ChongqingRT2021TextLineBadgeAttributes) =>
-            (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).names[1],
-        onChange: (val: string | number, attrs_: ChongqingRT2021TextLineBadgeAttributes | undefined) => {
-            // set default value if switched from another type
-            const attrs = attrs_ ?? defaultChongqingRT2021TextLineBadgeAttributes;
-            // return if invalid
-            // set value
-            attrs.names[1] = val.toString();
-            // return modified attrs
-            return attrs;
+        {
+            type: 'textarea',
+            label: t('panel.details.nodes.common.nameEn'),
+            value: (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).names[1],
+            onChange: (val: string | number) => {
+                attrs.names[1] = val.toString();
+                handleAttrsUpdate(id, attrs);
+            },
+            minW: 'full',
         },
-    },
-    {
-        type: 'custom',
-        label: 'color',
-        component: (
-            <ColorField
-                type={MiscNodeType.ChongqingRT2021TextLineBadge}
-                defaultTheme={defaultChongqingRT2021TextLineBadgeAttributes.color}
-            />
-        ),
-    },
-    {
-        type: 'switch',
-        label: 'panel.details.nodes.chongqingRT2021TextLineBadge.isRapid',
-        value: (attrs?: ChongqingRT2021TextLineBadgeAttributes) =>
-            (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).isRapid,
-        onChange: (val: boolean, attrs_: ChongqingRT2021TextLineBadgeAttributes | undefined) => {
-            // set default value if switched from another type
-            const attrs = attrs_ ?? defaultChongqingRT2021TextLineBadgeAttributes;
-            // set value
-            attrs.isRapid = val;
-            // return modified attrs
-            return attrs;
+        {
+            type: 'custom',
+            label: t('color'),
+            component: (
+                <ColorField
+                    type={MiscNodeType.ChongqingRT2021TextLineBadge}
+                    defaultTheme={defaultChongqingRT2021TextLineBadgeAttributes.color}
+                />
+            ),
+            minW: 'full',
         },
-        oneLine: true,
-    },
-];
-
-const attrsComponent = () => (
-    <RmgFieldsFieldSpecificAttributes
-        fields={chongqingRT2021TextLineBadgeFields as RmgFieldsFieldDetail<ChongqingRT2021TextLineBadgeAttributes>}
-    />
-);
+        {
+            type: 'switch',
+            label: t('panel.details.nodes.chongqingRT2021TextLineBadge.isRapid'),
+            isChecked: (attrs ?? defaultChongqingRT2021TextLineBadgeAttributes).isRapid,
+            onChange: (val: boolean) => {
+                attrs.isRapid = val;
+                handleAttrsUpdate(id, attrs);
+            },
+            oneLine: true,
+            minW: 'full',
+        },
+    ];
+    return <RmgFields fields={fields} />;
+};
 
 const chongqingRT2021TextLineBadgeIcon = (
     <svg viewBox="0 0 21 21" height={40} width={40} focusable={false} style={{ padding: 3 }}>
@@ -183,7 +171,7 @@ const chongqingRT2021TextLineBadge: Node<ChongqingRT2021TextLineBadgeAttributes>
     component: ChongqingRT2021TextLineBadge,
     icon: chongqingRT2021TextLineBadgeIcon,
     defaultAttrs: defaultChongqingRT2021TextLineBadgeAttributes,
-    attrsComponent,
+    attrsComponent: ChongqingRT2021NumLineBadgeAttrsComponent,
     metadata: {
         displayName: 'panel.details.nodes.chongqingRT2021TextLineBadge.displayName',
         tags: [],
diff --git a/src/components/svgs/stations/chongqingrt2021-basic.tsx b/src/components/svgs/stations/chongqingrt2021-basic.tsx
@@ -70,6 +70,7 @@ const ChongqingRT2021BasicStation = (props: StationComponentProps) => {
 
     const [textX, textY] = getTextOffset(nameOffsetX, nameOffsetY);
     const textAnchor = nameOffsetX === 'left' ? 'end' : nameOffsetX === 'right' ? 'start' : 'middle';
+    const isTextLine = new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(lineCode);
 
     return (
         <g id={id} transform={`translate(${x}, ${y})`}>
@@ -90,16 +91,16 @@ const ChongqingRT2021BasicStation = (props: StationComponentProps) => {
                 style={{ cursor: 'move' }}
             />
             <text
-                fontSize={new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(lineCode) ? 5 : 7}
+                fontSize={isTextLine ? 5 : 7}
                 textAnchor="middle"
                 x={0}
-                y={new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(lineCode) ? -1.5 : -1}
+                y={isTextLine ? -1.5 : -1}
                 style={{ pointerEvents: 'none' }}
             >
                 {lineCode}
             </text>
             <text fontSize={7} textAnchor="middle" x={0} y={6} style={{ pointerEvents: 'none' }}>
-                {Number(stationCode) < 10 ? `0${Number(stationCode)}` : stationCode}
+                {Number.isInteger(stationCode) && Number(stationCode) < 10 ? `0${Number(stationCode)}` : stationCode}
             </text>
             <line
                 x1={-5.5}
diff --git a/src/components/svgs/stations/chongqingrt2021-int.tsx b/src/components/svgs/stations/chongqingrt2021-int.tsx
@@ -330,21 +330,18 @@ const ChongqingRT2021IntAttrsComponent = (props: AttrsProps<ChongqingRT2021IntSt
             },
             minW: 'full',
         },
-        ...((attrs.isRapid
-            ? [
-                  {
-                      type: 'custom',
-                      label: t('color'),
-                      component: (
-                          <ColorField
-                              type={StationType.ChongqingRT2021Int}
-                              defaultTheme={defaultChongqingRT2021IntStationAttributes.rapidColor}
-                              colorKey="rapidColor"
-                          />
-                      ),
-                  },
-              ]
-            : []) as RmgFieldsField[]),
+        {
+            type: 'custom',
+            label: t('color'),
+            component: (
+                <ColorField
+                    type={StationType.ChongqingRT2021Int}
+                    defaultTheme={defaultChongqingRT2021IntStationAttributes.rapidColor}
+                    colorKey="rapidColor"
+                />
+            ),
+            hidden: !attrs.isRapid,
+        },
         {
             type: 'switch',
             label: t('panel.details.stations.chongqingRT2021Int.isWide'),
diff --git a/src/util/save.test.ts b/src/util/save.test.ts
@@ -571,15 +571,16 @@ describe('Unit tests for param upgrade function', () => {
     });
     it('44 -> 45', () => {
         // Bump save version to support Chongqing Rail Transit stations.
+        // Add isLoop attributes to Chongqing Rail Transit Basic stations.
         // Prepare an empty save.
         const oldParam =
-            '{"graph":{"options":{"type":"directed","multi":true,"allowSelfLoops":true},"attributes":{},"nodes":[],"edges":[]},"svgViewBoxZoom":100,"svgViewBoxMin":{"x":0,"y":0},"version":44}';
+            '{"graph":{"options":{"type":"directed","multi":true,"allowSelfLoops":true},"attributes":{},"nodes":[{"key":"stn_6oAhcug7aq","attributes":{"visible":true,"zIndex":0,"x":-1161.8544148936169,"y":648.2702426050851,"type":"chongqingrt-basic","chongqingrt-basic":{"names":["铁山坪","Tieshanping"],"color":["chongqing","cq4","#DC8633","#fff"],"nameOffsetX":"middle","nameOffsetY":"top","textVertical":false}}}],"edges":[]},"svgViewBoxZoom":100,"svgViewBoxMin":{"x":0,"y":0},"version":44}';
         // Upgrade it with your newly added function.
         const newParam = UPGRADE_COLLECTION[44](oldParam);
         const graph = new MultiDirectedGraph() as MultiDirectedGraph<NodeAttributes, EdgeAttributes, GraphAttributes>;
         expect(() => graph.import(JSON.parse(newParam))).not.toThrow();
         const expectParam =
-            '{"graph":{"options":{"type":"directed","multi":true,"allowSelfLoops":true},"attributes":{},"nodes":[],"edges":[]},"svgViewBoxZoom":100,"svgViewBoxMin":{"x":0,"y":0},"version":45}';
+            '{"graph":{"options":{"type":"directed","multi":true,"allowSelfLoops":true},"attributes":{},"nodes":[{"key":"stn_6oAhcug7aq","attributes":{"visible":true,"zIndex":0,"x":-1161.8544148936169,"y":648.2702426050851,"type":"chongqingrt-basic","chongqingrt-basic":{"names":["铁山坪","Tieshanping"],"color":["chongqing","cq4","#DC8633","#fff"],"nameOffsetX":"middle","nameOffsetY":"top","textVertical":false,"isLoop":false}}}],"edges":[]},"svgViewBoxZoom":100,"svgViewBoxMin":{"x":0,"y":0},"version":45}';
         // And the updated save has only version field changed.
         expect(newParam).toEqual(expectParam);
     });
diff --git a/src/util/save.ts b/src/util/save.ts
@@ -585,7 +585,20 @@ export const UPGRADE_COLLECTION: { [version: number]: (param: string) => string
     43: param =>
         // Bump save version to support Chongqing Rail Transit stations.
         JSON.stringify({ ...JSON.parse(param), version: 44 }),
-    44: param =>
+    44: param => {
         // Bump save version to support Chongqing Rail Transit 2021 stations and facilities.
-        JSON.stringify({ ...JSON.parse(param), version: 45 }),
+        // Add isLoop attributes to Chongqing Rail Transit Basic stations.
+        const p = JSON.parse(param);
+        const graph = new MultiDirectedGraph() as MultiDirectedGraph<NodeAttributes, EdgeAttributes, GraphAttributes>;
+        graph.import(p?.graph);
+        graph
+            .filterNodes((node, attr) => node.startsWith('stn') && attr.type === StationType.ChongqingRTBasic)
+            .forEach(node => {
+                const type = graph.getNodeAttribute(node, 'type');
+                const attr = graph.getNodeAttribute(node, type) as any;
+                attr.isLoop = false;
+                graph.mergeNodeAttributes(node, { [type]: attr });
+            });
+        return JSON.stringify({ ...p, version: 45, graph: graph.export() });
+    },
 };
