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

Place route name label at the start of route

Browse Source
This commit is contained in:
dominik-korsa 2025-07-13 22:58:55 +02:00
parent 94554d5200
commit 391be08250
No known key found for this signature in database
GPG Key ID: 5A24D76EE0A30974
3 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/Map.css
View File

@ -63,11 +63,11 @@
fill: #111; fill: #111;
} }
.map svg g.route g { .map svg g.route-arrow {
fill: #eee; fill: #eee;
} }
.map svg g.route text { .map svg g.route-name text {
fill: #eee; fill: #eee;
font-size: 72mm; font-size: 72mm;
} }

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

@ -1,17 +1,21 @@
import { ReactSVG } from "react-svg"; import { ReactSVG } from "react-svg";
import AlwaysUpText from "../text/AlwaysUpText"; import AlwaysUpText from "../text/AlwaysUpText";
import AngleHelper from "../../../helpers/angleHelper";
export default function RouteRenderer(props) { export default function RouteRenderer(props) {
const { object } = props; const { object } = props;
const [x, y] = object.end_center.toSVGCoords();
const angle = object.end_angle_rad * 180 / Math.PI; const [startX, startY] = object.pos.toSVGCoords();
const startAngle = object.rot.y;
const [endX, endY] = object.end_center.toSVGCoords();
const endAngle = AngleHelper.radToDeg(object.end_angle_rad);
const offY = object.track_count === 2 ? -22 : -20; const offY = object.track_count === 2 ? -22 : -20;
const arrowOffset = - object.track_offset - 37.8; const arrowOffset = - object.track_offset - 37.8;
return ( return (<>
<g className="route" transform={`translate(${x}, ${y}) rotate(${angle})`}> <g className="route-arrow" transform={`translate(${endX}, ${endY}) rotate(${endAngle + 90}) translate(-80, ${arrowOffset})`}>
<g transform={`rotate(90) translate(-80, ${arrowOffset})`}>
<ReactSVG <ReactSVG
src={`${process.env.PUBLIC_URL}/assets/route.svg`} src={`${process.env.PUBLIC_URL}/assets/route.svg`}
wrapper='svg' wrapper='svg'
@ -21,8 +25,9 @@ export default function RouteRenderer(props) {
}} }}
/> />
</g> </g>
<g className="route-name" transform={`translate(${startX}, ${startY}) rotate(${startAngle})`}>
<AlwaysUpText <AlwaysUpText
baseRot={angle} baseRot={startAngle}
additionalRot={-90} additionalRot={-90}
offsetX={object.track_offset} offsetX={object.track_offset}
reverseAnchor={true} reverseAnchor={true}
@ -33,5 +38,5 @@ export default function RouteRenderer(props) {
text={object.route_name} text={object.route_name}
/> />
</g> </g>
); </>);
} }

5
src/model/route.js
View File

@ -3,6 +3,7 @@ import Vector3 from "./vector3";
import SceneryParserLog from "./scenery-parser-log"; import SceneryParserLog from "./scenery-parser-log";
import RouteTrack from "./tracks/route-track"; import RouteTrack from "./tracks/route-track";
import TrackConnection, {TrackConnectionEnd} from "./track-connection"; import TrackConnection, {TrackConnectionEnd} from "./track-connection";
import AngleHelper from "../helpers/angleHelper";
export default class Route extends SceneryObject { export default class Route extends SceneryObject {
track_count; track_count;
@ -57,7 +58,7 @@ export default class Route extends SceneryObject {
return; return;
} }
const startAngleRad = this.end_angle_rad; const startAngleRad = this.end_angle_rad;
const start_rot = new Vector3(0, startAngleRad * 180 / Math.PI, 0); const startRot = new Vector3(0, AngleHelper.radToDeg(startAngleRad), 0);
const startPoints = this.end_points; const startPoints = this.end_points;
this.end_points = []; this.end_points = [];
@ -98,7 +99,7 @@ export default class Route extends SceneryObject {
trackId, trackId,
startPoints[index], startPoints[index],
this.end_points[index], this.end_points[index],
start_rot, startRot,
lengths[index], lengths[index],
radii[index], radii[index],
[], // connections [], // connections