Mechanical signals rendering

+Added support for mechanical signals in extended signals rendering mode

public/assets/mech_signals/arm.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <g stroke-linecap="round">
+  <path d="m74 40c-3.5725 5.2e-5 -6.8746 1.9059-8.661 4.9997h-50.339c-2.216 0-4.0003 1.7843-4.0003 4.0003v1.9999c0 2.216 1.7843 3.9998 4.0003 3.9998h50.34c1.7862 3.094 5.0874 5.0001 8.6599 5.0002 5.523 2.34e-4 10-4.4769 10-9.9999-5e-5 -5.523-4.4774-10-10-9.9999z" class="background" />
+  <path d="m74 37c-3.9976 5.8e-5 -7.6615 1.9196-10.105 5h-48.895c-3.8264 0-7 3.1736-7 7v2c0 3.8264 3.1741 7 7 7h48.896c2.4436 3.0804 6.1058 4.9998 10.104 5 7.1443 3.03e-4 13-5.8557 13-13-6.5e-5 -7.1443-5.8557-13-13-13zm0 6c3.9016-1.65e-4 7 3.0984 7 7-3.8e-5 3.9016-3.0984 7.0002-7 7-2.5056-1.11e-4 -4.8097-1.33-6.0625-3.5l-0.86523-1.5h-52.072c-0.60611 0-1-0.39436-1-1v-2c0-0.60564 0.39435-1 1-1h52.07l0.86719-1.5c1.2526-2.1694 3.557-3.5 6.0625-3.5z" />
+ </g>
+</svg>

public/assets/mech_signals/distant_arm.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m56 15v69l-6 5-6-5v-69c0-2.216 1.784-4 4-4h4c2.216 0 4 1.784 4 4z" class="background" />
+ <path d="m59 15c0-3.8261-3.1739-7-7-7h-4c-3.8261 0-7 3.1739-7 7v69a3.0003 3.0003 0 0 0 1.0801 2.3047l6 5a3.0003 3.0003 0 0 0 3.8398 0l6-5a3.0003 3.0003 0 0 0 1.0801-2.3047zm-6 0v67.596l-3 2.5-3-2.5v-67.596c0-0.60589 0.39411-1 1-1h4c0.60589 0 1 0.39411 1 1z" />
+</svg>

public/assets/mech_signals/distant_head.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m79.2 50a29.2 29.2 0 0 1-29.2 29.2 29.2 29.2 0 0 1-29.2-29.2 29.2 29.2 0 0 1 29.2-29.2 29.2 29.2 0 0 1 29.2 29.2z" class="background" />
+ <path d="m50 17.801c-17.748 0-32.199 14.451-32.199 32.199s14.451 32.199 32.199 32.199 32.199-14.451 32.199-32.199-14.451-32.199-32.199-32.199zm0 6c14.505 0 26.199 11.694 26.199 26.199s-11.694 26.199-26.199 26.199-26.199-11.694-26.199-26.199 11.694-26.199 26.199-26.199z" />
+</svg>

public/assets/mech_signals/shunting_head.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path transform="rotate(45)" d="m47.711-27h46c2.216 0 4 1.784 4 4v46c0 2.216-1.784 4-4 4h-46c-2.216 0-4-1.784-4-4v-46c0-2.216 1.784-4 4-4z" class="background" />
+ <path transform="rotate(45)" d="m47.711-30c-3.8261 0-7 3.1739-7 7v46c0 3.8261 3.1739 7 7 7h46c3.8261 0 7-3.1739 7-7v-46c0-3.8261-3.1739-7-7-7zm0 6h46c0.60589 0 1 0.39411 1 1v46c0 0.60589-0.39411 1-1 1h-46c-0.60589 0-1-0.39411-1-1v-46c0-0.60589 0.39411-1 1-1z" />
+</svg>

public/assets/mech_signals/stop_head.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m28 20h44c4.432 0 8 3.568 8 8v44c0 4.432-3.568 8-8 8h-44c-4.432 0-8-3.568-8-8v-44c0-4.432 3.568-8 8-8z" />
+ <path d="m71 50a21 21 0 0 1-21 21 21 21 0 0 1-21-21 21 21 0 0 1 21-21 21 21 0 0 1 21 21z" class="background" />
+ <path d="m27.12 45.71h45.76v8.58h-45.76z" />
+</svg>

src/components/map/Map.css

@@ -91,6 +91,14 @@
     fill: #111;
 }
 
+.map svg g.signal-head-mech path {
+    fill: #eee;
+}
+
+.map svg g.signal-head-mech path.background {
+    fill: #111;
+}
+
 .map svg g.nevp path {
     fill: #eee;
 }

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

@@ -102,9 +102,11 @@ function getPolePoints(object, headOffsetX) {
     if(isDwarf) return null;
 
     const isOverhead = object.signal_elements.isOverhead();
+    const isMechanical = object.signal_elements.isMechanical();
 
     const polePoints = {};
     polePoints.zigzag = headOffsetX !== 0 ? 0.4 : 0;
+    if(isMechanical) polePoints.zigzag += 3.5;
     polePoints.bars = polePoints.zigzag;
 
     switch(object.signal_elements.bar) {
@@ -121,7 +123,9 @@ function getPolePoints(object, headOffsetX) {
 
     const signsHeight = Object.keys(object.signal_elements.signs).map(key => (DefinedSignalSigns[key]?.height || 1.0) + 0.2).reduce((a, b) => a + b, 0) || 0;
     polePoints.signs = polePoints.bars + signsHeight;
-    polePoints.end = isOverhead ? polePoints.signs : Math.max(polePoints.signs + 0.8, 2.2);
+    polePoints.end = polePoints.signs;
+    if(isMechanical) polePoints.end = Math.max(polePoints.end + 0.8, 6.0);
+    else if(!isOverhead) polePoints.end = Math.max(polePoints.signs + 0.8, 2.2);
 
     return polePoints;
 }
@@ -186,6 +190,10 @@ function getUnit(key, unitType, x, y) {
 }
 
 function getHead(object, headOffsetY, headOffsetX) {
+    if(object.signal_elements.isMechanical()) {
+        return getHeadMech(object, headOffsetY);
+    }
+
     if(object.signal_elements.type === SignalElementsEnums.Type.TOP) {
         return getHeadTOP(object, headOffsetY);
     }
@@ -219,6 +227,67 @@ function getHeadTOP(object, headOffsetY) {
     </>
 }
 
+function getHomeMechSignalArm(y, rot) {
+    return <g transform={`translate(0 ${y}) rotate(${rot}) translate(-0.576, -1.89)`}>
+        <ReactSVG
+            src={`${process.env.PUBLIC_URL}/assets/mech_signals/arm.svg`}
+            wrapper='svg'
+            beforeInjection={(svg) => {
+                svg.setAttribute('width', '1mm');
+                svg.setAttribute('height', '1mm');
+            }}
+        />;
+    </g>;
+}
+
+function getCustomMechHead(y, fileName) {
+    return <g transform={`translate(-1.89, ${y -1.89})`}>
+        <ReactSVG
+            src={`${process.env.PUBLIC_URL}/assets/mech_signals/${fileName}`}
+            wrapper='svg'
+            beforeInjection={(svg) => {
+                svg.setAttribute('width', '1mm');
+                svg.setAttribute('height', '1mm');
+            }}
+        />;
+    </g>;
+}
+
+function getHeadMech(object, headOffsetY) {
+    const mechType = object.signal_elements.mechType;
+
+    switch(mechType) {
+        case SignalElementsEnums.MechType.HOME_SINGLE:
+            return <g className="signal-head-mech">
+                { getHomeMechSignalArm(headOffsetY, 0) }
+            </g>
+        case SignalElementsEnums.MechType.HOME_DOUBLE:
+            return <g className="signal-head-mech">
+                { getHomeMechSignalArm(headOffsetY, 0) }
+                { getHomeMechSignalArm(headOffsetY + 3.5, -90) }
+            </g>
+        case SignalElementsEnums.MechType.SHUNTING:
+            return <g className="signal-head-mech">
+                { getCustomMechHead(headOffsetY, 'shunting_head.svg') }
+            </g>
+        case SignalElementsEnums.MechType.DISTANT_SINGLE:
+            return <g className="signal-head-mech">
+                { getCustomMechHead(headOffsetY, 'distant_head.svg') }
+            </g>
+        case SignalElementsEnums.MechType.DISTANT_DOUBLE:
+            return <g className="signal-head-mech">
+                { getCustomMechHead(headOffsetY, 'distant_head.svg') }
+                { getCustomMechHead(headOffsetY + 3.5, 'distant_arm.svg') }
+            </g>
+        case SignalElementsEnums.MechType.STOP:
+            return <g className="signal-head-mech">
+                { getCustomMechHead(headOffsetY, 'stop_head.svg') }
+            </g>
+        default:
+            return null;
+    }
+}
+
 function getBar(object, headOffsetX, y, isYellow, key = 0) {
     const yellowOff = isYellow ? 0.2 : 0;