From 44b838dc1bdcd088d3b5e4d979506b15bd846b5e Mon Sep 17 00:00:00 2001
From: izawartka <59137928+izawartka@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:29:35 +0200
Subject: [PATCH] Fixed Text components warnings

*Fixed AlwaysUpText and SimpleLabelText throwing warnings because off how props were passed. Now to set props of the inside text tag, you pass them as textProps
*Updated Object Renderers to use the new text props passing method
---
 .../object-renderers/IsolationIdRenderer.js   |  4 +-
 .../map/object-renderers/RouteRenderer.js     |  6 +-
 .../map/object-renderers/SignalBoxRenderer.js | 61 ++++++++++---------
 .../object-renderers/SwitchNameRenderer.js    |  4 +-
 .../object-renderers/TrackObjectRenderer.js   |  6 +-
 src/components/map/text/AlwaysUpText.js       |  4 +-
 src/components/map/text/SimpleLabelText.js    |  4 +-
 7 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/src/components/map/object-renderers/IsolationIdRenderer.js b/src/components/map/object-renderers/IsolationIdRenderer.js
index 785b312..54bd3a3 100644
--- a/src/components/map/object-renderers/IsolationIdRenderer.js
+++ b/src/components/map/object-renderers/IsolationIdRenderer.js
@@ -12,8 +12,10 @@ export default function IsolationIdRenderer(props) {
 
     return <SimpleLabelText
         text={text}
-        className="isolation-id"
         x={x}
         y={y}
+        textProps={{  
+            className: "isolation-id"
+        }}
     />
 }
diff --git a/src/components/map/object-renderers/RouteRenderer.js b/src/components/map/object-renderers/RouteRenderer.js
index 7a3c390..474ead5 100644
--- a/src/components/map/object-renderers/RouteRenderer.js
+++ b/src/components/map/object-renderers/RouteRenderer.js
@@ -25,8 +25,10 @@ export default function RouteRenderer(props) {
                 additionalRot={-90}
                 offsetX={object.track_offset}
                 reverseAnchor={true}
-                y={offY}
-                dominantBaseline="bottom"
+                textProps={{
+                    y: offY,
+                    dominantBaseline: "bottom"
+                }}
                 text={object.route_name}
             />
         </g>
diff --git a/src/components/map/object-renderers/SignalBoxRenderer.js b/src/components/map/object-renderers/SignalBoxRenderer.js
index b7b495d..71368b5 100644
--- a/src/components/map/object-renderers/SignalBoxRenderer.js
+++ b/src/components/map/object-renderers/SignalBoxRenderer.js
@@ -2,33 +2,36 @@ import { ReactSVG } from 'react-svg';
 import AlwaysUpText from '../text/AlwaysUpText';
 
 export default function SignalBoxRenderer(props) {
-  const { object } = props;
-  const [x, y] = object.pos.toSVGCoords();
-  const text = object.getPrintableSignalBoxName();
-
-  const rotDiff = object.def.undef ? Math.round(object.rot.y / 90) * (-90) : object.def.rot * 90;
-  const rot = object.rot.y + rotDiff;
-
-  return (
-    <g className="signalbox" transform={`translate(${x}, ${y}) rotate(${rot})`}>
-      <g className="signalbox-icon" transform={`translate(-4.725, -4.725)`}>
-          <ReactSVG
-              src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
-              wrapper='svg'
-
-              beforeInjection={(svg) => {
-                  svg.setAttribute('width', '2.5mm');
-                  svg.setAttribute('height', '2.5mm');
-              }}
-          />
-      </g>
-      <AlwaysUpText
-        baseRot={rot - 90}
-        additionalRot={180}
-        offsetY={6}
-        textAnchor='middle'
-        text={text}
-      />
-    </g>
-  );
+    const { object } = props;
+    const [x, y] = object.pos.toSVGCoords();
+    const text = object.getPrintableSignalBoxName();
+    
+    const rotDiff = object.def.undef ? Math.round(object.rot.y / 90) * (-90) : object.def.rot * 90;
+    const rot = object.rot.y + rotDiff;
+    
+    return (
+        <g className="signalbox" transform={`translate(${x}, ${y}) rotate(${rot})`}>
+            <g className="signalbox-icon" transform={`translate(-4.725, -4.725)`}>
+                <ReactSVG
+                    src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
+                    wrapper='svg'
+                    
+                    beforeInjection={(svg) => {
+                        svg.setAttribute('width', '2.5mm');
+                        svg.setAttribute('height', '2.5mm');
+                    }}
+                />
+            </g>
+            <AlwaysUpText
+                baseRot={rot - 90}
+                additionalRot={180}
+                offsetY={6}
+                textProps={{
+                    textAnchor: 'middle'
+                }}
+                text={text}
+            />
+        </g>
+    );
 }
+    
\ No newline at end of file
diff --git a/src/components/map/object-renderers/SwitchNameRenderer.js b/src/components/map/object-renderers/SwitchNameRenderer.js
index b7d9a02..c29654a 100644
--- a/src/components/map/object-renderers/SwitchNameRenderer.js
+++ b/src/components/map/object-renderers/SwitchNameRenderer.js
@@ -7,8 +7,10 @@ export default function SwitchNameRenderer(props) {
 
     return <SimpleLabelText
         text={text}
-        className="switch-name"
         x={x}
         y={y}
+        textProps={{
+            className: "switch-name"
+        }}
     />;
 }
diff --git a/src/components/map/object-renderers/TrackObjectRenderer.js b/src/components/map/object-renderers/TrackObjectRenderer.js
index b1b7340..32613b7 100644
--- a/src/components/map/object-renderers/TrackObjectRenderer.js
+++ b/src/components/map/object-renderers/TrackObjectRenderer.js
@@ -22,10 +22,12 @@ export default function TrackObjectRenderer(props) {
             ></circle>
             <SimpleLabelText
                 text={text}
-                className="track-object-label"
                 x={x}
                 y={y}
-                enableBackground="new 0 0 100 100"
+                textProps={{
+                    enableBackground: "new 0 0 100 100",
+                    className: "track-object-label"
+                }}
                 wrapperStyle={{pointerEvents: 'none'}}
             />
         </g>
diff --git a/src/components/map/text/AlwaysUpText.js b/src/components/map/text/AlwaysUpText.js
index 6e9a330..0fa634b 100644
--- a/src/components/map/text/AlwaysUpText.js
+++ b/src/components/map/text/AlwaysUpText.js
@@ -4,7 +4,7 @@ import { mapRotation$ } from "../../../services/mapRotationService";
 
 export default function AlwaysUpText(props) {
     const [mapRotation, setMapRotation] = useState(0);
-    const { baseRot, additionalRot, text, reverseAnchor, offsetX, offsetY } = props;
+    const { baseRot, additionalRot, text, reverseAnchor, offsetX, offsetY, textProps } = props;
     
     const adjustedRot = AngleHelper.normalizeDegAngle(baseRot + mapRotation);
     const upsideDown = adjustedRot >= 180;
@@ -21,7 +21,7 @@ export default function AlwaysUpText(props) {
 
     return (
         <g transform={`translate(${offsetX || 0}, ${offsetY || 0}) rotate(${upsideDownRot + additionalRot})`}>
-            <text textAnchor={anchor} dominantBaseline='middle' {...props}>
+            <text textAnchor={anchor} dominantBaseline='middle' {...textProps}>
                 {text}
             </text>
         </g>
diff --git a/src/components/map/text/SimpleLabelText.js b/src/components/map/text/SimpleLabelText.js
index 79e650d..5bf837d 100644
--- a/src/components/map/text/SimpleLabelText.js
+++ b/src/components/map/text/SimpleLabelText.js
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { mapRotation$ } from "../../../services/mapRotationService";
 
 export default function SimpleLabelText(props) {
-    const { text, x, y, wrapperStyle } = props;
+    const { text, x, y, wrapperStyle, textProps } = props;
     const gRef = useRef(null);
 
     const getTransformString = useCallback((rot) => (
@@ -21,7 +21,7 @@ export default function SimpleLabelText(props) {
 
     return (
         <g transform={getTransformString(0)} ref={gRef} style={wrapperStyle}>
-            <text textAnchor="middle" dominantBaseline="middle" {...props} x={null} y={null}>
+            <text textAnchor="middle" dominantBaseline="middle" {...textProps}>
                 {text}
             </text>
         </g>