#466 Dynamic color key in color field

railmapgen · Oct 13, 2023 · 6f73b9e · 6f73b9e
1 parent 8da7eae
commit 6f73b9e
Show file tree

Hide file tree

Showing 21 changed files with 66 additions and 37 deletions.
diff --git a/src/components/panels/details/color-field.tsx b/src/components/panels/details/color-field.tsx
@@ -10,7 +10,7 @@ import ThemeButton from '../theme-button';
 
 /**
  * An Attributes that have a color field.
- * Extend this interface in your component's attributes if you want to use <ColorField />.
+ * Extend this interface in your component's attributes if you want to use ColorField.
  *
  * NOTE: Attribute with `color` key will be populated with user defined theme from
  * the _runtime_ redux store. See `handleBackgroundDown` in `SvgWrapper` for more info.
@@ -19,18 +19,17 @@ export interface AttributesWithColor {
     color: Theme;
 }
 
-type GetNodeOrEdgeAttribute = (id: string, type: NodeType | LineStyleType) => AttributesWithColor;
+type GetNodeOrEdgeAttribute = (id: string, type: NodeType | LineStyleType) => Record<string, any>;
 
 /**
  * This component provides an easy way to have a color input in the details panel.
- * It will read the first id in `selected` and change the `color` field in the related attrs.
+ * It will read the first id in `selected` and change the `colorKey` field in the related attrs.
  *
- * Make sure your component has a color field in the attributes.
- * You may extend AttributesWithColor interface.
- * Fail to do this will result in a redundant color field in your component's attributes.
+ * Make sure your component has a colorKey field in the attributes.
+ * You may extend AttributesWithColor interface so you do not need to pass the colorKey parameter.
  */
-export const ColorField = (props: { type: NodeType | LineStyleType; defaultAttrs: AttributesWithColor }) => {
-    const { type, defaultAttrs } = props;
+export const ColorField = (props: { type: NodeType | LineStyleType; colorKey?: string; defaultTheme: Theme }) => {
+    const { type, colorKey = 'color', defaultTheme } = props;
     const dispatch = useRootDispatch();
     const {
         selected,
@@ -63,10 +62,8 @@ export const ColorField = (props: { type: NodeType | LineStyleType; defaultAttrs
     const handleChangeColor = (color: Theme) => {
         // TODO: fix bind this
         if (selectedFirst && hasNodeOrEdge.bind(graph.current)(selectedFirst)) {
-            const attrs =
-                (getNodeOrEdgeAttribute.bind(graph.current)(selectedFirst, type) as AttributesWithColor) ??
-                defaultAttrs;
-            attrs.color = color;
+            const attrs = getNodeOrEdgeAttribute.bind(graph.current)(selectedFirst, type);
+            attrs[colorKey] = color;
             mergeNodeOrEdgeAttributes.bind(graph.current)(selectedFirst, { [type]: attrs });
             hardRefresh();
         }
@@ -80,15 +77,17 @@ export const ColorField = (props: { type: NodeType | LineStyleType; defaultAttrs
         }
     }, [output?.toString()]);
 
-    const theme =
+    const isCurrentSelectedValid =
         selectedFirst &&
         hasNodeOrEdge.bind(graph.current)(selectedFirst) &&
         (selectedFirst.startsWith('stn') || selectedFirst.startsWith('misc_node')
             ? graph.current.getNodeAttribute(selectedFirst, 'type') === type
-            : graph.current.getEdgeAttribute(selectedFirst, 'style') === type)
-            ? ((getNodeOrEdgeAttribute.bind(graph.current)(selectedFirst, type) as AttributesWithColor) ?? defaultAttrs)
-                  .color
-            : defaultAttrs.color;
+            : graph.current.getEdgeAttribute(selectedFirst, 'style') === type);
+    const theme = isCurrentSelectedValid
+        ? ((getNodeOrEdgeAttribute.bind(graph.current)(selectedFirst, type) ?? {
+              [colorKey]: defaultTheme,
+          })[colorKey] as Theme)
+        : defaultTheme;
 
     return (
         <>

diff --git a/src/components/svgs/lines/styles/bjsubway-dotted.tsx b/src/components/svgs/lines/styles/bjsubway-dotted.tsx
@@ -51,7 +51,9 @@ const defaultBjsubwayDottedAttributes: BjsubwayDottedAttributes = {
 const bjsubwayDottedFields = [
     {
         type: 'custom',
-        component: <ColorField type={LineStyleType.BjsubwayDotted} defaultAttrs={defaultBjsubwayDottedAttributes} />,
+        component: (
+            <ColorField type={LineStyleType.BjsubwayDotted} defaultTheme={defaultBjsubwayDottedAttributes.color} />
+        ),
     },
 ];
 

diff --git a/src/components/svgs/lines/styles/bjsubway-single-color.tsx b/src/components/svgs/lines/styles/bjsubway-single-color.tsx
@@ -49,7 +49,10 @@ const bjsubwaySingleColorFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={LineStyleType.BjsubwaySingleColor} defaultAttrs={defaultBjsubwaySingleColorAttributes} />
+            <ColorField
+                type={LineStyleType.BjsubwaySingleColor}
+                defaultTheme={defaultBjsubwaySingleColorAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/lines/styles/bjsubway-tram.tsx b/src/components/svgs/lines/styles/bjsubway-tram.tsx
@@ -47,7 +47,7 @@ const defaultBjsubwayTramAttributes: BjsubwayTramAttributes = {
 const bjsubwayTramFields = [
     {
         type: 'custom',
-        component: <ColorField type={LineStyleType.BjsubwayTram} defaultAttrs={defaultBjsubwayTramAttributes} />,
+        component: <ColorField type={LineStyleType.BjsubwayTram} defaultTheme={defaultBjsubwayTramAttributes.color} />,
     },
 ];
 

diff --git a/src/components/svgs/lines/styles/mtr-light-rail.tsx b/src/components/svgs/lines/styles/mtr-light-rail.tsx
@@ -39,7 +39,7 @@ const defaultMTRLightRailAttributes: MTRLightRailAttributes = {
 const mtrLightRailFields = [
     {
         type: 'custom',
-        component: <ColorField type={LineStyleType.MTRLightRail} defaultAttrs={defaultMTRLightRailAttributes} />,
+        component: <ColorField type={LineStyleType.MTRLightRail} defaultTheme={defaultMTRLightRailAttributes.color} />,
     },
 ];
 

diff --git a/src/components/svgs/lines/styles/mtr-race-day.tsx b/src/components/svgs/lines/styles/mtr-race-day.tsx
@@ -40,7 +40,7 @@ const defaultMTRRaceDaysAttributes: MTRRaceDaysAttributes = {
 const mtrRaceDaysFields = [
     {
         type: 'custom',
-        component: <ColorField type={LineStyleType.MTRRaceDays} defaultAttrs={defaultMTRRaceDaysAttributes} />,
+        component: <ColorField type={LineStyleType.MTRRaceDays} defaultTheme={defaultMTRRaceDaysAttributes.color} />,
     },
 ];
 

diff --git a/src/components/svgs/lines/styles/single-color.tsx b/src/components/svgs/lines/styles/single-color.tsx
@@ -40,7 +40,7 @@ const defaultSingleColorAttributes: SingleColorAttributes = {
 const singleColorFields = [
     {
         type: 'custom',
-        component: <ColorField type={LineStyleType.SingleColor} defaultAttrs={defaultSingleColorAttributes} />,
+        component: <ColorField type={LineStyleType.SingleColor} defaultTheme={defaultSingleColorAttributes.color} />,
     },
 ];
 

diff --git a/src/components/svgs/nodes/berlin-s-bahn-line-badge.tsx b/src/components/svgs/nodes/berlin-s-bahn-line-badge.tsx
@@ -101,7 +101,10 @@ const BerlinSBahnLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.BerlinSBahnLineBadge} defaultAttrs={defaultBerlinSBahnLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.BerlinSBahnLineBadge}
+                defaultTheme={defaultBerlinSBahnLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/berlin-u-bahn-line-badge.tsx b/src/components/svgs/nodes/berlin-u-bahn-line-badge.tsx
@@ -88,7 +88,10 @@ const BerlinUBahnLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.BerlinUBahnLineBadge} defaultAttrs={defaultBerlinUBahnLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.BerlinUBahnLineBadge}
+                defaultTheme={defaultBerlinUBahnLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/bjsubway-num-line-badge.tsx b/src/components/svgs/nodes/bjsubway-num-line-badge.tsx
@@ -97,7 +97,10 @@ const BjsubwayNumLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.BjsubwayNumLineBadge} defaultAttrs={defaultBjsubwayNumLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.BjsubwayNumLineBadge}
+                defaultTheme={defaultBjsubwayNumLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/bjsubway-text-line-badge.tsx b/src/components/svgs/nodes/bjsubway-text-line-badge.tsx
@@ -122,7 +122,7 @@ const BjsubwayTextLineBadgeFields = [
         component: (
             <ColorField
                 type={MiscNodeType.BjsubwayTextLineBadge}
-                defaultAttrs={defaultBjsubwayTextLineBadgeAttributes}
+                defaultTheme={defaultBjsubwayTextLineBadgeAttributes.color}
             />
         ),
     },

diff --git a/src/components/svgs/nodes/chongqingrt-num-line-badge.tsx b/src/components/svgs/nodes/chongqingrt-num-line-badge.tsx
@@ -99,7 +99,7 @@ const ChongqingRTNumLineBadgeFields = [
         component: (
             <ColorField
                 type={MiscNodeType.ChongqingRTNumLineBadge}
-                defaultAttrs={defaultChongqingRTNumLineBadgeAttributes}
+                defaultTheme={defaultChongqingRTNumLineBadgeAttributes.color}
             />
         ),
     },

diff --git a/src/components/svgs/nodes/chongqingrt-text-line-badge.tsx b/src/components/svgs/nodes/chongqingrt-text-line-badge.tsx
@@ -123,7 +123,7 @@ const ChongqingRTTextLineBadgeFields = [
         component: (
             <ColorField
                 type={MiscNodeType.ChongqingRTTextLineBadge}
-                defaultAttrs={defaultChongqingRTTextLineBadgeAttributes}
+                defaultTheme={defaultChongqingRTTextLineBadgeAttributes.color}
             />
         ),
     },

diff --git a/src/components/svgs/nodes/gzmtr-line-badge/gzmtr-line-badge.tsx b/src/components/svgs/nodes/gzmtr-line-badge/gzmtr-line-badge.tsx
@@ -89,7 +89,9 @@ const GzmtrLineBadgeFields = [
     },
     {
         type: 'custom',
-        component: <ColorField type={MiscNodeType.GzmtrLineBadge} defaultAttrs={defaultGzmtrLineBadgeAttributes} />,
+        component: (
+            <ColorField type={MiscNodeType.GzmtrLineBadge} defaultTheme={defaultGzmtrLineBadgeAttributes.color} />
+        ),
     },
 ];
 

diff --git a/src/components/svgs/nodes/shmetro-num-line-badge.tsx b/src/components/svgs/nodes/shmetro-num-line-badge.tsx
@@ -93,7 +93,10 @@ const ShmetroNumLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.ShmetroNumLineBadge} defaultAttrs={defaultShmetroNumLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.ShmetroNumLineBadge}
+                defaultTheme={defaultShmetroNumLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/shmetro-text-line-badge.tsx b/src/components/svgs/nodes/shmetro-text-line-badge.tsx
@@ -116,7 +116,10 @@ const ShmetroTextLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.ShmetroTextLineBadge} defaultAttrs={defaultShmetroTextLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.ShmetroTextLineBadge}
+                defaultTheme={defaultShmetroTextLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/suzhourt-num-line-badge.tsx b/src/components/svgs/nodes/suzhourt-num-line-badge.tsx
@@ -117,7 +117,10 @@ const SuzhouRTNumLineBadgeFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={MiscNodeType.SuzhouRTNumLineBadge} defaultAttrs={defaultSuzhouRTNumLineBadgeAttributes} />
+            <ColorField
+                type={MiscNodeType.SuzhouRTNumLineBadge}
+                defaultTheme={defaultSuzhouRTNumLineBadgeAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/nodes/text.tsx b/src/components/svgs/nodes/text.tsx
@@ -262,7 +262,7 @@ const TextFields = [
     },
     {
         type: 'custom',
-        component: <ColorField type={MiscNodeType.Text} defaultAttrs={defaultTextAttributes} />,
+        component: <ColorField type={MiscNodeType.Text} defaultTheme={defaultTextAttributes.color} />,
     },
 ];
 

diff --git a/src/components/svgs/stations/gzmtr-basic.tsx b/src/components/svgs/stations/gzmtr-basic.tsx
@@ -324,7 +324,7 @@ const gzmtrBasicStationFields = [
     },
     {
         type: 'custom',
-        component: <ColorField type={StationType.GzmtrBasic} defaultAttrs={defaultGzmtrBasicStationAttributes} />,
+        component: <ColorField type={StationType.GzmtrBasic} defaultTheme={defaultGzmtrBasicStationAttributes.color} />,
     },
     {
         type: 'input',

diff --git a/src/components/svgs/stations/shmetro-basic-2020.tsx b/src/components/svgs/stations/shmetro-basic-2020.tsx
@@ -225,7 +225,10 @@ const shmetroBasic2020StationFields = [
     {
         type: 'custom',
         component: (
-            <ColorField type={StationType.ShmetroBasic2020} defaultAttrs={defaultShmetroBasic2020StationAttributes} />
+            <ColorField
+                type={StationType.ShmetroBasic2020}
+                defaultTheme={defaultShmetroBasic2020StationAttributes.color}
+            />
         ),
     },
 ];

diff --git a/src/components/svgs/stations/suzhourt-basic.tsx b/src/components/svgs/stations/suzhourt-basic.tsx
@@ -188,7 +188,9 @@ const suzhouRTBasicStationFields = [
     },
     {
         type: 'custom',
-        component: <ColorField type={StationType.SuzhouRTBasic} defaultAttrs={defaultSuzhouRTBasicStationAttributes} />,
+        component: (
+            <ColorField type={StationType.SuzhouRTBasic} defaultTheme={defaultSuzhouRTBasicStationAttributes.color} />
+        ),
     },
 ];