izawartka/td2-visualizer
izawartka/td2-visualizer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Text components warnings

Browse Source 
*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
This commit is contained in:
izawartka 2025-07-07 17:29:35 +02:00
parent 55cbface5f
commit 44b838dc1b
7 changed files with 50 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/object-renderers/IsolationIdRenderer.js
View File

@ -12,8 +12,10 @@ export default function IsolationIdRenderer(props) {
return <SimpleLabelText
text={text}
className="isolation-id"
x={x}
y={y}
textProps={{
className: "isolation-id"
}}
/>
}

6
src/components/map/object-renderers/RouteRenderer.js
View File

@ -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>

55
src/components/map/object-renderers/SignalBoxRenderer.js
View File

@ -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 { 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;
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'
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>
);
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>
);
}

4
src/components/map/object-renderers/SwitchNameRenderer.js
View File

@ -7,8 +7,10 @@ export default function SwitchNameRenderer(props) {
return <SimpleLabelText
text={text}
className="switch-name"
x={x}
y={y}
textProps={{
className: "switch-name"
}}
/>;
}

6
src/components/map/object-renderers/TrackObjectRenderer.js
View File

@ -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>

4
src/components/map/text/AlwaysUpText.js
View File

@ -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>

4
src/components/map/text/SimpleLabelText.js
View File

@ -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>