izawartka/td2-visualizer
izawartka/td2-visualizer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extended signal label position tweak

Browse Source 
*Overhead signals in Extended signal rendering mode have now, just like standard signals, their labels rendered "below" them
*Cleaned up SignalExtendedRenderer's code a bit
This commit is contained in:
izawartka 2025-07-03 16:57:10 +02:00
parent b54ce79888
commit 96e8cd1eef
2 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/Map.css
View File

@ -49,11 +49,11 @@
stroke: #eee; stroke: #eee;
} }
.map svg g.extended-signal-icon g { .map svg g.extended-signal-icon {
stroke: #eee; stroke: #eee;
} }
.map svg g.extended-signal-icon g path.background { .map svg g.extended-signal-icon path.background {
fill: #111; fill: #111;
} }

88
src/components/map/object-renderers/SignalExtendedRenderer.js
View File

@ -7,45 +7,63 @@ export default function SignalExtendedRenderer(props) {
const { object } = props; const { object } = props;
const [x, y] = object.pos.toSVGCoords(); const [x, y] = object.pos.toSVGCoords();
const overheadRot = object.signal_elements.isOverhead() ? 180 : 0;
const baseRot = object.rot.y; const baseRot = object.rot.y;
const rot = AngleHelper.normalizeDegAngle(overheadRot + baseRot); const rot = AngleHelper.normalizeDegAngle(baseRot);
const pointsData = getSignalPointsData(object);
return (
<g className="extended-signal" transform={`translate(${x}, ${y}) rotate(${rot})`}>
<SignalIcon object={object} pointsData={pointsData} />
<SignalNameText object={object} rot={rot} pointsData={pointsData} />
</g>
);
}
function SignalNameText(props) {
const {object, rot, pointsData} = props;
const upsideDown = rot >= 180; const upsideDown = rot >= 180;
const upsideDownRot = upsideDown ? 90 : -90; const upsideDownRot = upsideDown ? 90 : -90;
const anchor = upsideDown ? "start" : "end"; const anchor = upsideDown ? "start" : "end";
const isOverhead = object.signal_elements.isOverhead();
const baseY = isOverhead ? pointsData.headOffsetY + pointsData.polePoints.end : 0;
return ( return (
<g className="extended-signal" transform={`translate(${x}, ${y}) rotate(${rot})`}> <g transform={`translate(0, ${baseY + 1}) rotate(${upsideDownRot})`}>
<g className="extended-signal-icon" transform={`rotate(${-overheadRot})`}>
<SignalIcon object={object} />
</g>
<g transform={`translate(0, 1) rotate(${upsideDownRot})`}>
<text x="0" y="0" textAnchor={anchor} dominantBaseline="middle"> <text x="0" y="0" textAnchor={anchor} dominantBaseline="middle">
{object.getPrintableSignalName()} {object.getPrintableSignalName()}
</text> </text>
</g> </g>
</g>
); );
} }
function SignalIcon(props) { function SignalIcon(props) {
const { object } = props; const { object, pointsData } = props;
return (
<g className="extended-signal-icon" strokeWidth={0.2} strokeLinecap="round" strokeLinejoin="round">
{ getBase(pointsData) }
{ getOverheadFrame(object) }
{ getPole(pointsData) }
{ getBars(object, pointsData) }
{ getSigns(object, pointsData) }
{ getHead(object, pointsData) }
</g>
);
}
function getSignalPointsData(object) {
const halfBaseWidth = getHalfBaseWidth(object); const halfBaseWidth = getHalfBaseWidth(object);
const headOffsetX = getHeadOffsetX(object); const headOffsetX = getHeadOffsetX(object);
const polePoints = getPolePoints(object, headOffsetX); const polePoints = getPolePoints(object, headOffsetX);
const headOffsetY = getHeadOffsetY(object, polePoints); const headOffsetY = getHeadOffsetY(object, polePoints);
return ( return {
<g strokeWidth={0.2} strokeLinecap="round" strokeLinejoin="round"> halfBaseWidth, headOffsetX, polePoints, headOffsetY
{ getBase(halfBaseWidth) } };
{ getOverheadFrame(object) }
{ getPole(polePoints, headOffsetY, headOffsetX) }
{ getBars(object, polePoints, headOffsetY) }
{ getSigns(object, polePoints, headOffsetY) }
{ getHead(object, headOffsetY, headOffsetX) }
</g>
);
} }
function getHeadOffsetY(object, polePoints) { function getHeadOffsetY(object, polePoints) {
@ -67,7 +85,7 @@ function getHalfBaseWidth(object) {
return 0.4536; return 0.4536;
} }
function getBase(halfBaseWidth) { function getBase({halfBaseWidth}) {
if(halfBaseWidth === 0) return null; if(halfBaseWidth === 0) return null;
return <path d={`M ${-halfBaseWidth} 0 L ${halfBaseWidth} 0`} />; return <path d={`M ${-halfBaseWidth} 0 L ${halfBaseWidth} 0`} />;
} }
@ -131,7 +149,7 @@ function getPolePoints(object, headOffsetX) {
return polePoints; return polePoints;
} }
function getPole(polePoints, headOffsetY, headOffsetX) { function getPole({polePoints, headOffsetY, headOffsetX}) {
if(!polePoints) return null; if(!polePoints) return null;
if(headOffsetX) { if(headOffsetX) {
@ -190,13 +208,13 @@ function getUnit(key, unitType, x, y) {
} }
} }
function getHead(object, headOffsetY, headOffsetX) { function getHead(object, {headOffsetY, headOffsetX}) {
if(object.signal_elements.isMechanical()) { if(object.signal_elements.isMechanical()) {
return getHeadMech(object, headOffsetY); return getHeadMech(object, {headOffsetY});
} }
if(object.signal_elements.type === SignalElementsEnums.Type.TOP) { if(object.signal_elements.type === SignalElementsEnums.Type.TOP) {
return getHeadTOP(object, headOffsetY); return getHeadTOP(object, {headOffsetY});
} }
const isDoubleDwarf = object.signal_elements.type === SignalElementsEnums.Type.DWARF_DOUBLE; const isDoubleDwarf = object.signal_elements.type === SignalElementsEnums.Type.DWARF_DOUBLE;
@ -214,7 +232,7 @@ function getHead(object, headOffsetY, headOffsetX) {
return units; return units;
} }
function getHeadTOP(object, headOffsetY) { function getHeadTOP(object, {headOffsetY}) {
const isLeft = object.signal_elements.headPosition === SignalElementsEnums.HeadPosition.LEFT; const isLeft = object.signal_elements.headPosition === SignalElementsEnums.HeadPosition.LEFT;
const r = 0.6; const r = 0.6;
const whiteCX = isLeft ? r*2 : -r*2; const whiteCX = isLeft ? r*2 : -r*2;
@ -254,7 +272,7 @@ function getCustomMechHead(y, fileName) {
</g>; </g>;
} }
function getHeadMech(object, headOffsetY) { function getHeadMech(object, {headOffsetY}) {
const mechType = object.signal_elements.mechType; const mechType = object.signal_elements.mechType;
switch(mechType) { switch(mechType) {
@ -289,16 +307,16 @@ function getHeadMech(object, headOffsetY) {
} }
} }
function getBar(object, headOffsetX, y, isYellow, key = 0) { function getBar(y, isYellow, key = 0) {
const yellowOff = isYellow ? 0.2 : 0; const yellowOff = isYellow ? 0.2 : 0;
return <g key={key}> return <g key={key}>
<rect x={headOffsetX-0.6} y={y-0.2} width={1.2} height={0.4} className='background' />; <rect x={-0.6} y={y-0.2} width={1.2} height={0.4} className='background' />;
<line x1={headOffsetX - yellowOff} y1={y-0.2} x2={headOffsetX + yellowOff} y2={y+0.2} />; <line x1={-yellowOff} y1={y-0.2} x2={yellowOff} y2={y+0.2} />;
</g> </g>
} }
function getBars(object, polePoints, headOffsetY) { function getBars(object, {polePoints, headOffsetY}) {
if(!polePoints) return null; if(!polePoints) return null;
const barType = object.signal_elements.bar; const barType = object.signal_elements.bar;
@ -311,13 +329,13 @@ function getBars(object, polePoints, headOffsetY) {
default: default:
return null; return null;
case SignalElementsEnums.BarType.YELLOW: case SignalElementsEnums.BarType.YELLOW:
return getBar(object, 0, y, true); return getBar(y, true);
case SignalElementsEnums.BarType.GREEN: case SignalElementsEnums.BarType.GREEN:
return getBar(object, 0, y, false); return getBar(y, false);
case SignalElementsEnums.BarType.YELLOW_GREEN: case SignalElementsEnums.BarType.YELLOW_GREEN:
return <> return <>
{ getBar(object, 0, y, true, 0) } { getBar(y, true, 0) }
{ getBar(object, 0, y - 0.8, false, 1) } { getBar(y - 0.8, false, 1) }
</> </>
} }
} }
@ -353,7 +371,7 @@ function getSign(id, y) {
</g> </g>
} }
function getSigns(object, polePoints, headOffsetY) { function getSigns(object, {polePoints, headOffsetY}) {
if(!polePoints) return null; if(!polePoints) return null;
const signs = []; const signs = [];
let y = headOffsetY + polePoints.signs; let y = headOffsetY + polePoints.signs;