From 391be08250d32f313e2667301bf11653bd9d8c4e Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Sun, 13 Jul 2025 22:58:55 +0200
Subject: [PATCH] Place route name label at the start of route

---
 src/components/map/Map.css                    |  4 +-
 .../map/object-renderers/RouteRenderer.js     | 37 +++++++++++--------
 src/model/route.js                            |  5 ++-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/map/Map.css b/src/components/map/Map.css
index 7c95820..3e72537 100644
--- a/src/components/map/Map.css
+++ b/src/components/map/Map.css
@@ -63,11 +63,11 @@
     fill: #111;
 }
 
-.map svg g.route g {
+.map svg g.route-arrow {
     fill: #eee;
 }
 
-.map svg g.route text {
+.map svg g.route-name text {
     fill: #eee;
     font-size: 72mm;
 }
diff --git a/src/components/map/object-renderers/RouteRenderer.js b/src/components/map/object-renderers/RouteRenderer.js
index a208bb9..e42de3c 100644
--- a/src/components/map/object-renderers/RouteRenderer.js
+++ b/src/components/map/object-renderers/RouteRenderer.js
@@ -1,28 +1,33 @@
 import { ReactSVG } from "react-svg";
 import AlwaysUpText from "../text/AlwaysUpText";
+import AngleHelper from "../../../helpers/angleHelper";
 
 export default function RouteRenderer(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 arrowOffset = - object.track_offset - 37.8;
 
-    return (
-        <g className="route" transform={`translate(${x}, ${y}) rotate(${angle})`}>
-            <g transform={`rotate(90) translate(-80, ${arrowOffset})`}>
-                <ReactSVG
-                    src={`${process.env.PUBLIC_URL}/assets/route.svg`}
-                    wrapper='svg'
-                    beforeInjection={(svg) => {
-                        svg.setAttribute('width', '20mm');
-                        svg.setAttribute('height', '20mm');
-                    }}
-                />
-            </g>
+    return (<>
+        <g className="route-arrow" transform={`translate(${endX}, ${endY}) rotate(${endAngle + 90}) translate(-80, ${arrowOffset})`}>
+            <ReactSVG
+                src={`${process.env.PUBLIC_URL}/assets/route.svg`}
+                wrapper='svg'
+                beforeInjection={(svg) => {
+                    svg.setAttribute('width', '20mm');
+                    svg.setAttribute('height', '20mm');
+                }}
+            />
+        </g>
+        <g className="route-name" transform={`translate(${startX}, ${startY}) rotate(${startAngle})`}>
             <AlwaysUpText
-                baseRot={angle}
+                baseRot={startAngle}
                 additionalRot={-90}
                 offsetX={object.track_offset}
                 reverseAnchor={true}
@@ -33,5 +38,5 @@ export default function RouteRenderer(props) {
                 text={object.route_name}
             />
         </g>
-    );
+    </>);
 }
diff --git a/src/model/route.js b/src/model/route.js
index 7136391..c3a4324 100644
--- a/src/model/route.js
+++ b/src/model/route.js
@@ -3,6 +3,7 @@ import Vector3 from "./vector3";
 import SceneryParserLog from "./scenery-parser-log";
 import RouteTrack from "./tracks/route-track";
 import TrackConnection, {TrackConnectionEnd} from "./track-connection";
+import AngleHelper from "../helpers/angleHelper";
 
 export default class Route extends SceneryObject {
     track_count;
@@ -57,7 +58,7 @@ export default class Route extends SceneryObject {
             return;
         }
         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;
         this.end_points = [];
@@ -98,7 +99,7 @@ export default class Route extends SceneryObject {
                 trackId,
                 startPoints[index],
                 this.end_points[index],
-                start_rot,
+                startRot,
                 lengths[index],
                 radii[index],
                 [], // connections