Added original signal names option

+Added an option to show original (internal) signal names

src/components/SettingsManager.js

@@ -7,6 +7,7 @@ export default function SettingsManager(props) {
     const [ trackColorMode, setTrackColorMode ] = useState(Constants.trackColorModeDefault);
     const [ showTrackHoverInfo, setShowTrackHoverInfo ] = useState(true);
     const [ extendedSignals, setExtendedSignals ] = useState(true);
+    const [ originalSignalNames, setOriginalSignalNames ] = useState(false);
     const [ settingsLoaded, setSettingsLoaded ] = useState(false);
 
     const loadLayersSettings = useCallback(() => {
@@ -29,6 +30,7 @@ export default function SettingsManager(props) {
             showTrackHoverInfo, setShowTrackHoverInfo,
             trackColorMode, setTrackColorMode,
             extendedSignals, setExtendedSignals,
+            originalSignalNames, setOriginalSignalNames
         }}>
             { props.children }
         </SettingsContext.Provider>

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

@@ -7,7 +7,7 @@ import AlwaysUpText from '../text/AlwaysUpText';
 import C from '../../../helpers/extendedSignalsConstants';
 
 export default function SignalExtendedRenderer(props) {
-    const { object } = props;
+    const { object, showOriginalName } = props;
     const [x, y] = object.pos.toSVGCoords();
 
     const baseRot = object.rot.y;
@@ -18,23 +18,24 @@ export default function SignalExtendedRenderer(props) {
     return (
         <g className="extended-signal" transform={`translate(${x}, ${y}) rotate(${rot})`}>
             <SignalIcon object={object} pointsData={pointsData} />
-            <SignalNameText object={object} rot={rot} pointsData={pointsData} />
+            <SignalNameText object={object} rot={rot} pointsData={pointsData} showOriginalName={showOriginalName} />
         </g>
     );
 }
 
 function SignalNameText(props) {
-    const {object, rot, pointsData} = props;
+    const {object, rot, pointsData, showOriginalName} = props;
 
     const isOverhead = object.signal_elements.isOverhead();
     const baseY = isOverhead ? pointsData.headOffsetY + pointsData.polePoints.end : 0;
+    const name = showOriginalName ? object.name : object.getPrintableSignalName();
 
     return (
         <AlwaysUpText
             baseRot={rot}
             additionalRot={-90}
             offsetY={baseY + C.NAME_TEXT_OFFSET}
-            text={object.getPrintableSignalName()}
+            text={name}
             reverseAnchor={true}
         />
     );

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

@@ -5,12 +5,12 @@ import SettingsContext from '../../../contexts/SettingsContext';
 
 export default function SignalRenderer(props) {
     const { object } = props;
-    const { extendedSignals } = useContext(SettingsContext);
-    
+    const { extendedSignals, originalSignalNames: showOriginalName } = useContext(SettingsContext);
+
     if (extendedSignals && object.signal_elements) {
-        return <MemoizedSignalExtendedRenderer object={object} />;
+        return <MemoizedSignalExtendedRenderer object={object} showOriginalName={showOriginalName} />;
     } else {
-        return <MemoizedSignalStandardRenderer object={object} />;
+        return <MemoizedSignalStandardRenderer object={object} showOriginalName={showOriginalName} />;
     }
 }
 

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

@@ -2,8 +2,9 @@ import { ReactSVG } from "react-svg";
 import AlwaysUpText from "../text/AlwaysUpText";
 
 export default function SignalStandardRenderer(props) {
-    const { object } = props;
+    const { object, showOriginalName } = props;
     const [x, y] = object.pos.toSVGCoords();
+    const name = showOriginalName ? object.name : object.getPrintableSignalName();
 
     return (
         <g className="signal" transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
@@ -22,7 +23,7 @@ export default function SignalStandardRenderer(props) {
                 baseRot={object.rot.y}
                 additionalRot={-90}
                 offsetY={-2}
-                text={object.getPrintableSignalName()}
+                text={name}
             />
         </g>
     );

src/components/sidemenu/LayerOptionsMenu.js

@@ -1,4 +1,5 @@
 import ExtendedSignalsCheckbox from "./ExtendedSignalsCheckbox";
+import OriginalSignalNamesCheckbox from "./OriginalSignalNamesCheckbox";
 import ShowTrackHoverInfoCheckbox from "./ShowTrackHoverInfoCheckbox";
 import TrackColorMode from "./track-color-mode/TrackColorMode";
 
@@ -9,6 +10,7 @@ export default function LayerOptionsMenu() {
             <div className="layer-options-menu-checkboxes">
                 <ShowTrackHoverInfoCheckbox />
                 <ExtendedSignalsCheckbox />
+                <OriginalSignalNamesCheckbox />
             </div>
             <TrackColorMode />
         </div>

src/components/sidemenu/OriginalSignalNamesCheckbox.js

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import SettingsContext from "../../contexts/SettingsContext";
+
+export default function OriginalSignalNamesCheckbox(props) {
+    const { originalSignalNames, setOriginalSignalNames, layers } = useContext(SettingsContext);
+
+    const handleChange = (event) => {
+        setOriginalSignalNames(event.target.checked);
+    };
+
+    let divClass = 'original-signal-names-checkbox';
+    if (!layers['signals']) divClass += ' hidden';
+
+    return (
+        <div className={divClass}>
+            <label>
+                <input
+                    type="checkbox"
+                    checked={originalSignalNames}
+                    onChange={handleChange}
+                />
+                Original signal names
+            </label>
+        </div>
+    );
+}

src/components/sidemenu/SideMenu.css

@@ -80,7 +80,8 @@
 }
 
 .extended-signals-checkbox input,
-.show-track-hover-info-checkbox input {
+.show-track-hover-info-checkbox input,
+.original-signal-names-checkbox input {
     margin-right: 0.5em;
     vertical-align: middle;
 }