Minor angles related tweaks & fixes

+Added AngleHelper
*Signals names are no longer always rendered horizontally
*Fixed a minor rendering bug accuring when routes were rotated at exactly 180 deg
*Fixed PointTrack rot field being in radians instead of degrees

src/components/map/Map.css

@@ -35,7 +35,7 @@
     display: block;
 }
 
-.map svg g.signal g {
+.map svg g.signal-icon g {
     stroke: #eee;
 }
 

src/components/map/object-renderers/RouteRenderer.js

@@ -1,21 +1,12 @@
-import { useMemo } from "react";
 import { ReactSVG } from "react-svg";
+import AngleHelper from "../../../helpers/angleHelper";
 
 export default function RouteRenderer(props) {
     const { object } = props;
     const [x, y] = object.pos.toSVGCoords();
 
-    const upsideDown = useMemo(() => {
-        let rot = object.rot.y;
-        if (rot < 0) {
-            rot += 360 * Math.ceil(Math.abs(rot) / 360);
-        } else if (rot >= 360) {
-            rot -= 360 * Math.floor(rot / 360);
-        }
-
-        return rot > 180;
-    }, [object.rot.y]);
-
+    const rot = AngleHelper.normalizeDegAngle(object.rot.y);
+    const upsideDown = rot >= 180;
     const upsideDownRot = upsideDown ? 90 : -90;
     const offY = object.track_count === 2 ? -22 : -20;
     const anchor = upsideDown ? "start" : "end";

src/components/map/object-renderers/SignalRenderer.js

@@ -1,12 +1,18 @@
 import { ReactSVG } from 'react-svg'
+import AngleHelper from '../../../helpers/angleHelper';
 
 export default function SignalRenderer(props) {
     const { object } = props;
     const [x, y] = object.pos.toSVGCoords();
 
+    const rot = AngleHelper.normalizeDegAngle(object.rot.y);
+    const upsideDown = rot >= 180;
+    const upsideDownRot = upsideDown ? 90 : -90;
+    const anchor = upsideDown ? "end" : "start";
+
     return (
-        <g className="signal" transform={`translate(${x}, ${y})`}>
-            <g transform={`rotate(${object.rot.y}) translate(-2, -2)`}>
+        <g className="signal" transform={`translate(${x}, ${y}) rotate(${object.rot.y}) `}>
+            <g className="signal-icon" transform={`translate(-1.89, -1.89)`}>
                 <ReactSVG
                     src="/assets/signal.svg"
                     wrapper='svg'
@@ -17,9 +23,11 @@ export default function SignalRenderer(props) {
                     }}
                 />
             </g>
-            <text x="2.5" y="0" textAnchor="start" dominantBaseline="middle">
+            <g transform={`translate(0, -2) rotate(${upsideDownRot})`}>
+                <text x="0" y="0" textAnchor={anchor} dominantBaseline="middle">
                     {object.getPrintableSignalName()}
                 </text>
             </g>
+        </g>
     );
 }

src/helpers/angleHelper.js

@@ -0,0 +1,25 @@
+function degToRad(angle) {
+    return angle * (Math.PI / 180);
+}
+
+function radToDeg(angle) {
+    return angle * (180 / Math.PI);
+}
+
+function normalizeDegAngle(angle) {
+    if (angle < 0) {
+        return angle + 360 * Math.ceil(Math.abs(angle) / 360);
+    } else if (angle >= 360) {
+        return angle - 360 * Math.floor(angle / 360);
+    } else {
+        return angle;
+    }
+}
+
+const AngleHelper = {
+    degToRad,
+    radToDeg,
+    normalizeDegAngle,
+}
+
+export default AngleHelper;

src/model/point-track.js

@@ -1,3 +1,4 @@
+import AngleHelper from '../helpers/angleHelper';
 import Track from './track';
 import Vector3 from './vector3';
 
@@ -10,7 +11,7 @@ export default class PointTrack extends Track
     };
 
     constructor(id, start, end, r, previd, nextid, id_station, id_isolation, maxspeed, derailspeed) {
-        const ry = start.atanY(end);
+        const ry = AngleHelper.radToDeg(start.atanY(end));
         const rot = new Vector3(0, ry, 0);
         // TODO: fix rx and rz = 0
         // TODO: calculate length

src/model/standard-track.js

@@ -1,3 +1,4 @@
+import AngleHelper from "../helpers/angleHelper";
 import Track from "./track";
 import Vector3 from "./vector3";
 
@@ -35,7 +36,7 @@ export default class StandardTrack extends Track
     }
 
     _calcPoints() {
-        const rotRad = this.rot.y * Math.PI / 180;
+        const rotRad = AngleHelper.degToRad(this.rot.y);
 
         this.points.start = this.pos.clone();
         this.points.end = this.pos.add(Vector3.fromAngleY(rotRad, this.len));