From 40ad1e678bdde9ead51c68275b37b8c0a58cbcef Mon Sep 17 00:00:00 2001 From: izawartka <59137928+izawartka@users.noreply.github.com> Date: Tue, 12 Aug 2025 23:15:23 +0200 Subject: [PATCH] Cleaned up map class names *Cleaned up map class names and CSS *Fixed signalbox icons having color property --- package-lock.json | 4 +- public/assets/signalboxes/signalbox-skp.svg | 2 +- public/assets/signalboxes/signalbox-undef.svg | 2 +- public/assets/signalboxes/signalbox.svg | 2 +- src/components/map/Map.css | 111 ++++++------------ .../map/object-renderers/DerailerRenderer.js | 5 +- .../object-renderers/IsolationIdRenderer.js | 2 +- .../map/object-renderers/NEVPRenderer.js | 2 +- .../map/object-renderers/RouteRenderer.js | 7 +- .../map/object-renderers/SignRenderer.js | 20 ++-- .../map/object-renderers/SignalBoxRenderer.js | 7 +- .../SignalExtendedRenderer.js | 36 +++--- .../SignalStandardRenderer.js | 4 +- .../object-renderers/SpawnPointRenderer.js | 4 +- .../object-renderers/SwitchNameRenderer.js | 2 +- 15 files changed, 83 insertions(+), 127 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8916cd0..7f83959 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "visualizer2", - "version": "1.6.1", + "version": "1.6.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "visualizer2", - "version": "1.6.1", + "version": "1.6.2", "dependencies": { "-": "^0.0.1", "react": "^19.1.0", diff --git a/public/assets/signalboxes/signalbox-skp.svg b/public/assets/signalboxes/signalbox-skp.svg index 2fa2e6b..23512b8 100644 --- a/public/assets/signalboxes/signalbox-skp.svg +++ b/public/assets/signalboxes/signalbox-skp.svg @@ -1,5 +1,5 @@ - + diff --git a/public/assets/signalboxes/signalbox-undef.svg b/public/assets/signalboxes/signalbox-undef.svg index 86dccb2..d7e1743 100644 --- a/public/assets/signalboxes/signalbox-undef.svg +++ b/public/assets/signalboxes/signalbox-undef.svg @@ -1,6 +1,6 @@ - + diff --git a/public/assets/signalboxes/signalbox.svg b/public/assets/signalboxes/signalbox.svg index 2ba8939..2333213 100644 --- a/public/assets/signalboxes/signalbox.svg +++ b/public/assets/signalboxes/signalbox.svg @@ -1,6 +1,6 @@ - + diff --git a/src/components/map/Map.css b/src/components/map/Map.css index daf38cc..287bc24 100644 --- a/src/components/map/Map.css +++ b/src/components/map/Map.css @@ -17,118 +17,77 @@ vector-effect: non-scaling-stroke; } -.map svg text { +.map text { font-size: 2px; - text-shadow: 0 0 16px #000; fill: #eee; + stroke: none; } -.map svg text.switch-name { +.map .switch-name-text { font-size: 3px; - fill: #bbf; + text-shadow: 0 0 16px #000; } -.map svg text.isolation-id { +.map .route-text { + font-size: 72mm; +} + +.map .signalbox-text { + font-size: 4px; +} + +.map .isolation-id-text { fill: #ffa; + text-shadow: 0 0 16px #000; } -.map svg path.isolation-end-marker { +.map path.isolation-end-marker { stroke: #ffa; stroke-width: 0.5px; } -.map svg g.track-object circle { +.map g.track-object circle { fill: #eee; } -.map svg g.track-object text { +.map g.track-object text { fill: #eee; display: none; + text-shadow: 0 0 16px #000; } -.map svg g.track-object:hover text { +.map g.track-object:hover text { display: block; } -.map svg g.signal-icon g { - stroke: #eee; +.map g.platform rect { + fill: #444; } -.map svg g.extended-signal-icon { +.map g.map-icon-stroked path, +.map g.map-icon-stroked circle, +.map g.map-icon-stroked line, +.map g.map-icon-stroked rect { fill: none; stroke: #eee; } -.map svg g.extended-signal-icon .background { - fill: #111; -} - -.map svg g.route-arrow { +.map g.map-icon path, +.map g.map-icon circle, +.map g.map-icon line, +.map g.map-icon rect { fill: #eee; -} - -.map svg g.route-name text { - fill: #eee; - font-size: 72mm; -} - -.map svg g.signalbox { - fill: #eee; -} - -.map svg g.signalbox text { - fill: #eee; - font-size: 4px; -} - -.map svg g.sign path { - fill: #eee; -} - -.map svg g.sign path.background { - fill: #111; -} - -.map svg g.signal-sign path { - fill: #eee; -} - -.map svg g.signal-sign path.background { - fill: #111; -} - -.map svg g.signal-head-mech path { - fill: #eee; -} - -.map svg g.signal-head-mech path.background { - fill: #111; -} - -.map .signal-sign-text { stroke: none; } -.map svg g.nevp path { - fill: #eee; -} - -.map svg g.nevp path.background { +.map g.map-icon-stroked .background, +.map g.map-icon .background { fill: #111; + stroke: none; } -.map svg g.derailer path { - fill: #eee; -} - -.map svg g.spawn-point path { - fill: #eee; -} - -.map svg g.spawn-point path.background { +.map g.map-icon-stroked .with-background, +.map g.map-icon .with-background { fill: #111; -} - -.map svg g.platform rect { - fill: #444; + stroke: #eee; } diff --git a/src/components/map/object-renderers/DerailerRenderer.js b/src/components/map/object-renderers/DerailerRenderer.js index fad9eb1..613e21a 100644 --- a/src/components/map/object-renderers/DerailerRenderer.js +++ b/src/components/map/object-renderers/DerailerRenderer.js @@ -11,8 +11,8 @@ export default function DerailerRenderer(props) { } return ( - - + + ); diff --git a/src/components/map/object-renderers/IsolationIdRenderer.js b/src/components/map/object-renderers/IsolationIdRenderer.js index f1be890..0fc6649 100644 --- a/src/components/map/object-renderers/IsolationIdRenderer.js +++ b/src/components/map/object-renderers/IsolationIdRenderer.js @@ -14,7 +14,7 @@ export default function IsolationIdRenderer(props) { x={x} y={y} textProps={{ - className: "isolation-id" + className: "isolation-id-text" }} />); } diff --git a/src/components/map/object-renderers/NEVPRenderer.js b/src/components/map/object-renderers/NEVPRenderer.js index 493a13c..abea89f 100644 --- a/src/components/map/object-renderers/NEVPRenderer.js +++ b/src/components/map/object-renderers/NEVPRenderer.js @@ -5,7 +5,7 @@ export default function NEVPRenderer(props) { const [x, y] = object.pos.toSVGCoords(); return ( - + - + - + diff --git a/src/components/map/object-renderers/SignRenderer.js b/src/components/map/object-renderers/SignRenderer.js index b865fb1..a9a473b 100644 --- a/src/components/map/object-renderers/SignRenderer.js +++ b/src/components/map/object-renderers/SignRenderer.js @@ -14,16 +14,18 @@ export default function SignRenderer(props) { const height = object.def.height || 1; return ( - - + + { - svg.setAttribute('width', `${width}mm`); - svg.setAttribute('height', `${height}mm`); - }} - /> + beforeInjection={(svg) => { + svg.setAttribute('width', `${width}mm`); + svg.setAttribute('height', `${height}mm`); + }} + /> + ); diff --git a/src/components/map/object-renderers/SignalBoxRenderer.js b/src/components/map/object-renderers/SignalBoxRenderer.js index 2c886ca..682f879 100644 --- a/src/components/map/object-renderers/SignalBoxRenderer.js +++ b/src/components/map/object-renderers/SignalBoxRenderer.js @@ -8,8 +8,8 @@ export default function SignalBoxRenderer(props) { const rot = object.getFinalRotation(); return ( - - + + diff --git a/src/components/map/object-renderers/SignalExtendedRenderer.js b/src/components/map/object-renderers/SignalExtendedRenderer.js index 2be5a05..b073b87 100644 --- a/src/components/map/object-renderers/SignalExtendedRenderer.js +++ b/src/components/map/object-renderers/SignalExtendedRenderer.js @@ -45,7 +45,7 @@ function SignalIcon(props) { const { object, pointsData } = props; return ( - + { SignalBase(pointsData) } { SignalOverheadFrame(object) } { SignalPole(pointsData) } @@ -83,7 +83,7 @@ function SignalHeadUnit(key, unitType, x, y) { const r = C.HEAD_UNIT_RADIUS; const c = C.HEDA_UNIT_DIAGONAL; - const baseCircle = ; + const baseCircle = ; switch(unitType) { case SignalElementsEnums.UnitType.RED: @@ -170,7 +170,7 @@ function SignalHeadTOP(object, {headOffsetY}) { } function SignalHomeMechArm(y, rot) { - return + return + return - { SignalHomeMechArm(headOffsetY, 0) } - + return SignalHomeMechArm(headOffsetY, 0); case SignalElementsEnums.MechType.HOME_DOUBLE: - return + return <> { SignalHomeMechArm(headOffsetY, 0) } { SignalHomeMechArm(headOffsetY + C.MECH_SECOND_ARM_OFFSET, -90) } - + ; case SignalElementsEnums.MechType.SHUNTING: - return - { SignalCustomMechHead(headOffsetY, 'shunting_head.svg') } - + return SignalCustomMechHead(headOffsetY, 'shunting_head.svg'); case SignalElementsEnums.MechType.DISTANT_SINGLE: - return - { SignalCustomMechHead(headOffsetY, 'distant_head.svg') } - + return SignalCustomMechHead(headOffsetY, 'distant_head.svg'); case SignalElementsEnums.MechType.DISTANT_DOUBLE: - return + return <> { SignalCustomMechHead(headOffsetY, 'distant_head.svg') } { SignalCustomMechHead(headOffsetY + C.MECH_SECOND_ARM_OFFSET, 'distant_arm.svg') } - + ; case SignalElementsEnums.MechType.STOP: - return - { SignalCustomMechHead(headOffsetY, 'stop_head.svg') } - + return SignalCustomMechHead(headOffsetY, 'stop_head.svg'); default: return null; } @@ -234,7 +226,7 @@ function SignalBar(y, isYellow, key = 0) { const yellowOff = isYellow ? C.BAR_HALF_H : 0; return - ; + ; ; } @@ -282,7 +274,7 @@ function SignalSign(id, y) { const def = DefinedSignalSigns[id]; if(!def) return null; - return + return - + + - + + ; }