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

Improved SignalBox labels

Browse Source 
*Moved SignalBox labels into a separate component
*SignalBoxEmpty labels now rotate towards the camera
This commit is contained in:
izawartka 2025-07-25 17:39:35 +02:00
parent 634922986e
commit 58a51297c4
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,15 @@
import { ReactSVG } from 'react-svg'; import { ReactSVG } from 'react-svg';
import AlwaysUpText from '../text/AlwaysUpText'; import AlwaysUpText from '../text/AlwaysUpText';
import SimpleLabelText from '../text/SimpleLabelText';
export default function SignalBoxRenderer(props) { export default function SignalBoxRenderer(props) {
const { object } = props; const { object } = props;
const [x, y] = object.pos.toSVGCoords(); const [x, y] = object.pos.toSVGCoords();
const text = object.getPrintableSignalBoxName();
const rot = object.getFinalRotation(); const rot = object.getFinalRotation();
return ( return (
<g className="signalbox" transform={`translate(${x}, ${y}) rotate(${rot})`}> <g className="signalbox" transform={`translate(${x}, ${y})`}>
<g className="signalbox-icon" transform={`translate(-4.725, -4.725)`}> <g className="signalbox-icon" transform={`rotate(${rot}) translate(-4.725, -4.725)`}>
<ReactSVG <ReactSVG
src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`} src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
wrapper='svg' wrapper='svg'
@ -20,16 +20,32 @@ export default function SignalBoxRenderer(props) {
}} }}
/> />
</g> </g>
<AlwaysUpText <SignalBoxText object={object} rot={rot} />
baseRot={rot - 90}
additionalRot={180}
offsetY={6}
textProps={{
textAnchor: 'middle'
}}
text={text}
/>
</g> </g>
); );
} }
function SignalBoxText(props) {
const { object, rot } = props;
const text = object.getPrintableSignalBoxName();
if (object.def?.empty) {
return <SimpleLabelText
text={text}
textProps={{ y: 6 }}
/>;
}
return (
<AlwaysUpText
baseRot={rot - 90}
additionalRot={180}
additionalPreRot={rot}
offsetY={6}
textProps={{
textAnchor: 'middle'
}}
text={text}
/>
);
}